/* ============================================================
   Tokens. Light is the base; both dark paths redefine only
   these values so components never reference a raw colour.
   ============================================================ */
:root{
  --paper:#F2F4F7;        /* app ground, cool grey biased to the indigo accent */
  --card:#FFFFFF;
  --card-2:#F8FAFC;
  --ink:#1B2430;
  --ink-2:#48576B;
  --ink-3:#6D7C8E;
  --line:#D6DCE4;
  --line-2:#E6EAF0;
  --indigo:#2F4A8C;       /* primary action */
  --indigo-soft:#E3E9F6;
  --indigo-ink:#22376B;
  --teal:#1E6B72;         /* data / systems */
  --teal-soft:#DCEAEB;
  --amber:#9A6A1F;        /* attention, decisions */
  --amber-soft:#F7ECD6;
  --clay:#9A3A2A;         /* rework, destructive */
  --clay-soft:#F6E1DD;
  --green:#2C6E4E;
  --green-soft:#DCEAE1;
  --focus:#2F4A8C;
  --on-accent:#FFFFFF;
  --control-line:#8A97A6;
  --shadow-up:0 -2px 4px rgba(27,36,48,.06), 0 -8px 24px rgba(27,36,48,.06);
  --shadow:0 1px 2px rgba(27,36,48,.06), 0 8px 24px rgba(27,36,48,.06);
  --shadow-lg:0 2px 4px rgba(27,36,48,.08), 0 18px 40px rgba(27,36,48,.10);
  --radius:8px;
  --base:17px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12171F;
    --card:#1B222D;
    --card-2:#212A37;
    --ink:#EDF1F6;
    --ink-2:#B3BECC;
    --ink-3:#8794A4;
    --line:#333F4F;
    --line-2:#2A3441;
    --indigo:#8FA9E4;
    --indigo-soft:#25324B;
    --indigo-ink:#C3D2F0;
    --teal:#79BFC4;
    --teal-soft:#1D3238;
    --amber:#DFB068;
    --amber-soft:#3A2E1B;
    --clay:#E09386;
    --clay-soft:#3B241F;
    --green:#83C4A0;
    --green-soft:#1D3227;
    --focus:#8FA9E4;
    --on-accent:#12171F;
    --control-line:#6C7A8C;
    --shadow-up:0 -2px 4px rgba(0,0,0,.45), 0 -8px 24px rgba(0,0,0,.35);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#12171F; --card:#1B222D; --card-2:#212A37;
  --ink:#EDF1F6; --ink-2:#B3BECC; --ink-3:#8794A4;
  --line:#333F4F; --line-2:#2A3441;
  --indigo:#8FA9E4; --indigo-soft:#25324B; --indigo-ink:#C3D2F0;
  --teal:#79BFC4; --teal-soft:#1D3238;
  --amber:#DFB068; --amber-soft:#3A2E1B;
  --clay:#E09386; --clay-soft:#3B241F;
  --green:#83C4A0; --green-soft:#1D3227;
  --focus:#8FA9E4;
  --on-accent:#12171F;
  --control-line:#6C7A8C;
  --shadow-up:0 -2px 4px rgba(0,0,0,.45), 0 -8px 24px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.45);
}
:root[data-size="l"]{ --base:19px; }
:root[data-size="xl"]{ --base:21px; }

/* ============================================================
   Type. Meiryo throughout - the face these users already read
   all day. Hierarchy comes from weight and size, not a second family.
   ============================================================ */
*{box-sizing:border-box;}
[hidden]{ display:none !important; }
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* the header is sticky and grows with the text size, so a focused control has
   to keep that much room above it or it lands underneath */
*{ scroll-margin-top:230px; }
.screen:focus{ outline:none; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Meiryo","メイリオ","Hiragino Kaku Gothic ProN","Hiragino Sans",
              "Yu Gothic Medium","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  font-size:var(--base); line-height:1.75;
  font-feature-settings:"palt" 1;
}
/* One family throughout; hierarchy comes from weight and tracking, not from a
   second face. Meiryo is what these users already read all day. */
.ttl{ font-weight:700; letter-spacing:.01em; }
h1,h2,h3{ margin:0; text-wrap:balance; line-height:1.4; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
a{ color:var(--indigo); }
.num{ font-variant-numeric:tabular-nums; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* ============================================================
   Shell
   ============================================================ */
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px 72px; }

.topbar{
  position:sticky; top:0; z-index:30; background:var(--card);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.topbar-in{
  max-width:1180px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:baseline; gap:12px; margin-right:auto; }
.brand .mark{
  font-size:1.28em; letter-spacing:.06em; color:var(--ink);
}
.brand .sub{ font-size:.78em; color:var(--ink-3); letter-spacing:.08em; }
.sizectl{ display:flex; align-items:center; gap:8px; }
.sizectl span{ font-size:.82em; color:var(--ink-2); }
.seg{ display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.seg button{
  background:var(--card); border:0; padding:8px 14px; cursor:pointer;
  color:var(--ink-2); min-height:44px;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button[aria-pressed="true"]{ background:var(--indigo-soft); color:var(--indigo-ink); font-weight:700; }

/* ============================================================
   Stepper - a real sequence, so it is numbered
   ============================================================ */
.stepbar{ background:var(--card); border-bottom:1px solid var(--line); }
.stepbar-in{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; gap:0; overflow-x:auto;
}
.step{
  display:flex; align-items:center; gap:12px; padding:16px 22px 14px;
  border-bottom:4px solid transparent; color:var(--ink-3); white-space:nowrap;
  background:none; border-left:0; border-right:0; border-top:0; cursor:pointer;
  min-height:60px;
}
.step .n{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  display:grid; place-items:center; font-size:.92em; font-weight:700;
  background:var(--line-2); color:var(--ink-3);
}
.step .t{ font-size:.98em; }
.step[data-state="done"]{ color:var(--ink-2); }
.step[data-state="done"] .n{ background:var(--green-soft); color:var(--green); }
.step[aria-current="step"]{ color:var(--ink); border-bottom-color:var(--indigo); }
.step[aria-current="step"] .n{ background:var(--indigo); color:var(--on-accent); }
.step[aria-current="step"] .t{ font-weight:700; }
/* A step you have not reached yet stays visible - it tells you what is coming -
   but it is not a shortcut: the wizard only moves forward one step at a time. */
.step[disabled]{ cursor:default; opacity:.45; pointer-events:none; }
.step[disabled]:hover{ background:none; }

.filters{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 18px; }
.filters .fl{ font-size:.86em; color:var(--ink-2); }

/* ============================================================
   Blocks
   ============================================================ */
.screen{ display:none; }
.screen.on{ display:block; }
.head{ padding:34px 0 22px; }
.eyebrow{
  font-size:.78em; letter-spacing:.16em; color:var(--ink-3);
  text-transform:none; margin-bottom:8px;
}
.head h1{ font-size:2.0em; }
.head .lead{ margin-top:12px; color:var(--ink-2); max-width:46em; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{ padding:26px 28px; }
.grid{ display:grid; gap:18px; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .g3,.g2{ grid-template-columns:1fr; } }

.sect-h{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 14px;
}
.sect-h h2{ font-size:1.24em; }
.sect-h .note{ font-size:.86em; color:var(--ink-3); }

/* Buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; font-weight:700; box-shadow:var(--shadow);
}
.btn:hover{ background:var(--card-2); }
.btn-primary{ background:var(--indigo); border-color:var(--indigo); color:var(--on-accent); }
.btn-primary:hover{ filter:brightness(1.08); background:var(--indigo); }
.btn-lg{ min-height:64px; font-size:1.06em; padding:0 34px; }
.btn-ghost{ box-shadow:none; background:transparent; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn .ico{ font-size:1.1em; line-height:1; }

.actions{
  position:sticky; bottom:0; margin-top:34px; padding:16px 20px;
  background:var(--card); border-top:1px solid var(--line);
  display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-up);
}
.actions .spacer{ margin-left:auto; }
.actions .hint{ color:var(--ink-3); font-size:.88em; }

/* Choice cards ----------------------------------------------- */
.choice{
  display:flex; flex-direction:column; gap:14px; text-align:left;
  padding:26px 26px 24px; background:var(--card);
  border:2px solid var(--line); border-radius:var(--radius);
  cursor:pointer; box-shadow:var(--shadow); height:100%;
}
.choice:hover{ border-color:var(--indigo); background:var(--card-2); }
.choice[aria-pressed="true"]{ border-color:var(--indigo); background:var(--indigo-soft); }
.choice .glyph{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--indigo-soft); color:var(--indigo-ink); font-size:1.5em;
}
.choice[aria-pressed="true"] .glyph{ background:var(--card); }
.choice h3{ font-size:1.16em; }
.choice p{ color:var(--ink-2); font-size:.94em; }
.choice .meta{ margin-top:auto; font-size:.84em; color:var(--ink-3); padding-top:6px; }

/* Tabs -------------------------------------------------------- */
.tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.tab{
  min-height:48px; padding:0 20px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink-2);
}
.tab[aria-selected="true"]{ background:var(--indigo); border-color:var(--indigo); color:var(--on-accent); font-weight:700; }
.panel{ display:none; }
.panel.on{ display:block; }

/* Recorder ---------------------------------------------------- */
.rec{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.rec-btn{
  width:112px; height:112px; border-radius:50%; border:0; cursor:pointer;
  background:var(--clay); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:.94em; box-shadow:var(--shadow-lg);
}
.rec-btn .dot{ display:block; width:26px; height:26px; border-radius:50%; background:#fff; margin:0 auto 6px; }
.rec.live .rec-btn{ background:var(--ink); }
.rec.live .rec-btn .dot{ border-radius:4px; width:22px; height:22px; }
.rec-state{ flex:1 1 260px; }
.rec-state .big{ font-size:1.14em; font-weight:700; }
.rec-state .t{ color:var(--ink-3); font-size:.9em; }
.wave{ display:flex; align-items:flex-end; gap:4px; height:52px; margin-top:12px; }
.wave i{ width:5px; background:var(--line); border-radius:2px; height:14%; }
.rec.live .wave i{ background:var(--clay); animation:b .9s ease-in-out infinite; }
.wave i:nth-child(3n){ animation-delay:.15s; }
.wave i:nth-child(3n+1){ animation-delay:.35s; }
@keyframes b{ 0%,100%{height:16%} 50%{height:96%} }
@media (prefers-reduced-motion:reduce){ .wave i{ animation:none !important; height:52% !important; } }

.field label{ display:block; font-weight:700; margin-bottom:8px; }
.field .help{ color:var(--ink-3); font-size:.88em; margin-bottom:10px; }
textarea,select,
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],input[type="tel"],input[type="number"]{
  width:100%; font:inherit; color:var(--ink); background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  line-height:1.8;
}
textarea{ min-height:230px; resize:vertical; }

/* Drop zone --------------------------------------------------- */
.drop{
  border:2px dashed var(--control-line); border-radius:var(--radius); background:var(--card-2);
  padding:40px 26px; text-align:center;
}
.drop .big{ font-size:1.14em; font-weight:700; margin-bottom:6px; }
.drop .t{ color:var(--ink-3); font-size:.9em; }
.filelist{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.filelist li{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
}
.filelist .fx{
  font-size:.74em; font-weight:700; letter-spacing:.06em; padding:4px 8px;
  border-radius:4px; background:var(--indigo-soft); color:var(--indigo-ink);
}
.filelist .nm{ margin-right:auto; }
.filelist .sz{ color:var(--ink-3); font-size:.86em; }

/* Chips / pills ----------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:10px; padding:9px 14px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  font-size:.94em;
}
.chip .sw{ width:12px; height:12px; border-radius:3px; }
.chip button{ border:0; background:none; cursor:pointer; color:var(--ink-3); font-size:1.1em; line-height:1; }
.chip.add{ border-style:dashed; color:var(--indigo); cursor:pointer; }

.pill{
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  font-size:.82em; font-weight:700; white-space:nowrap;
}
.pill::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.pill.ok{ background:var(--green-soft); color:var(--green); }
.pill.warn{ background:var(--amber-soft); color:var(--amber); }
.pill.draft{ background:var(--line-2); color:var(--ink-2); }
.pill.data{ background:var(--teal-soft); color:var(--teal); }

/* Tables ------------------------------------------------------ */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
table{ border-collapse:collapse; width:100%; min-width:620px; }
th,td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top; }
th{ background:var(--card-2); font-size:.88em; color:var(--ink-2); font-weight:700; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:0; }
td.c,th.c{ text-align:center; }
td .sysname{ color:var(--teal); font-weight:700; }
.rowno{ font-weight:700; color:var(--ink-2); }
.editcol{ width:132px; }
.rowacts{ display:flex; gap:4px; justify-content:center; }
.rowacts button{
  min-width:34px; min-height:34px; padding:0 6px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink-2);
  cursor:pointer; font-size:.95em; line-height:1;
}
.rowacts button:hover:not(:disabled){ border-color:var(--indigo); color:var(--indigo); }
.rowacts button:disabled{ opacity:.35; cursor:default; }
.rowtools{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.rowtools .note{ color:var(--ink-3); font-size:.88em; }

/* Notice ------------------------------------------------------ */
.notice{
  display:flex; gap:16px; padding:20px 22px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--amber-soft); color:var(--ink);
}
.notice .k{ font-weight:700; color:var(--amber); white-space:nowrap; }
.notice.calm{ background:var(--indigo-soft); }
.notice.calm .k{ color:var(--indigo-ink); }

/* Question and answer ---------------------------------------- */
.qa-list{ display:grid; gap:16px; }
.qa{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card-2);
  padding:20px 22px;
}
.qa.answered{ background:var(--green-soft); border-color:var(--green); }
.qa-top{ display:flex; gap:14px; align-items:flex-start; }
.qa-main{ flex:1 1 auto; }
.qn{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); font-size:.86em; font-weight:700;
}
.qa.answered .qn{ background:var(--green); color:var(--on-accent); border-color:var(--green); }
.qq{ font-weight:700; }
.qm{ color:var(--ink-3); font-size:.86em; margin-top:4px; }
.qa-ans{ margin:16px 0 0 46px; }
.qa-ans label{ display:block; font-weight:700; font-size:.92em; margin-bottom:8px; }
.qa-foot{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.qa-to{ color:var(--ink-3); font-size:.86em; margin-right:auto; }
.qerr{ color:var(--clay); font-weight:700; font-size:.9em; margin-top:8px; }
.qa-done{ margin:14px 0 0 46px; }
.qa-done .qd{ font-size:1.02em; }
.qa-done .qd .k{
  display:inline-block; font-size:.78em; font-weight:700; color:var(--green);
  border:1px solid var(--green); border-radius:4px; padding:1px 8px; margin-right:10px;
  vertical-align:.15em;
}
.qa-done .btn{ min-height:44px; padding:0 18px; margin-top:12px; font-size:.92em; }
.newrow{ background:var(--green-soft); }
.applied{ color:var(--green); font-weight:700; }

/* Options ----------------------------------------------------- */
.opt{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line-2); }
.opt:last-child{ border-bottom:0; }
.opt .ot{ font-weight:700; }
.opt .od{ color:var(--ink-3); font-size:.88em; }
.opt .oc{ margin-left:auto; flex:0 0 auto; }
.switch{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.track{ width:60px; height:34px; border-radius:999px; background:var(--control-line); position:relative; transition:background .15s; }
.track::after{ content:""; position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%; background:var(--card); transition:transform .15s; box-shadow:var(--shadow); }
.switch input:checked + .track{ background:var(--indigo); }
.switch input:checked + .track::after{ transform:translateX(26px); }
.switch input:focus-visible + .track{ outline:3px solid var(--focus); outline-offset:2px; }
.switch .lb{ font-weight:700; min-width:3.2em; }

/* Slide previews ---------------------------------------------- */
.slides{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .slides{ grid-template-columns:repeat(2,1fr); } }
.slide{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--card); }
.slide .thumb{ aspect-ratio:16/9; background:var(--card-2); padding:9px; display:grid; gap:4px; }
.slide .cap{ padding:9px 11px; font-size:.82em; color:var(--ink-2); border-top:1px solid var(--line-2); }
.bar{ background:var(--line); border-radius:2px; height:5px; }
.bar.w40{ width:40%; } .bar.w60{ width:60%; } .bar.w80{ width:80%; }
.bar.ink{ background:var(--ink-3); height:7px; }
.lanes{ display:grid; gap:3px; }
.lane{ display:flex; gap:3px; align-items:center; height:11px; }
.lane .lb{ width:16%; background:var(--line); border-radius:1px; height:100%; }
.lane .bd{ flex:1; background:var(--card); border:1px solid var(--line-2); border-radius:1px; height:100%; position:relative; }
.nodesq{ position:absolute; top:2px; height:7px; width:16%; border-radius:1px; }
.thumb.dark{ background:var(--ink); }
.grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
.cellg{ height:8px; background:var(--line-2); border-radius:1px; }
.cellg.h{ background:var(--ink-3); }

/* Home list --------------------------------------------------- */
.projects{ display:grid; gap:12px; }
.proj{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  padding:20px 22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.proj .pn{ font-size:1.08em; font-weight:700; }
.proj .pm{ color:var(--ink-3); font-size:.88em; }
.proj .pr{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* Role gating. The mock carries a role switcher so reviewers can see
   what each of the three roles is actually allowed to do. ------- */
:root[data-role="editor"] [data-admin-only]{ display:none !important; }
:root[data-role="viewer"] [data-admin-only],
:root[data-role="viewer"] [data-editor-only]{ display:none !important; }
:root[data-role="viewer"] .stepbar{ display:none; }
.vonly{ display:none; }
:root[data-role="viewer"] .vonly{ display:block; }
:root[data-role="viewer"] span.vonly{ display:inline; }
:root[data-role="viewer"] #s4 .g2{ grid-template-columns:1fr; }
.rolectl{ display:flex; align-items:center; gap:8px; }

/* Saving, resuming, failing ----------------------------------- */
.save{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3); font-size:.88em; }
.save::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--green); flex:0 0 9px;
}
.save[data-s="saving"]{ color:var(--ink-2); }
.save[data-s="saving"]::before{ background:var(--amber); animation:pulse 1s ease-in-out infinite; }
.save[data-s="error"]{ color:var(--clay); font-weight:700; }
.save[data-s="error"]::before{ background:var(--clay); }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .save[data-s="saving"]::before{ animation:none; } }

.resume{
  display:flex; gap:16px; align-items:center; padding:14px 18px; margin-bottom:20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--indigo-soft); color:var(--indigo-ink);
}
.resume .k{ font-weight:700; white-space:nowrap; }
.resume .x{
  margin-left:auto; border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  border-radius:var(--radius); min-height:44px; padding:0 14px; cursor:pointer;
}
.prog{ height:10px; border-radius:999px; background:var(--line-2); overflow:hidden; margin:14px 0 8px; }
.prog i{ display:block; height:100%; width:0%; background:var(--indigo); transition:width .35s ease; }
.failbox{
  display:flex; gap:16px; padding:20px 22px; border-radius:var(--radius);
  border:1px solid var(--clay); background:var(--clay-soft);
}
.failbox .k{ font-weight:700; color:var(--clay); white-space:nowrap; }

/* Editing lock, in-app notices, offline ----------------------- */
.lockchip{
  display:inline-flex; align-items:center; gap:9px; padding:5px 12px; border-radius:999px;
  background:var(--amber-soft); color:var(--amber); font-size:.86em; font-weight:700;
}
.lockchip::before{ content:"●"; font-size:.7em; }
.lockchip.mine{ background:var(--green-soft); color:var(--green); }

.bell{ position:relative; }
.badge{
  position:absolute; top:-6px; right:-6px; min-width:23px; height:23px; padding:0 6px;
  border-radius:999px; background:var(--clay); color:#fff; font-size:.72em; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--card);
}
.nlist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.nrow{
  display:grid; grid-template-columns:64px 1fr 132px; gap:16px; align-items:center;
  padding:16px 18px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--card);
}
.nrow + .nrow{ margin-top:0; }
.nrow.unread{ border-color:var(--line); background:var(--card-2); }
.ntype{
  justify-self:start; width:100%; text-align:center; padding:5px 0; border-radius:5px;
  font-size:.78em; font-weight:700; letter-spacing:.04em;
  background:var(--line-2); color:var(--ink-2);
}
.ntype.done{ background:var(--green-soft); color:var(--green); }
.ntype.fail{ background:var(--clay-soft); color:var(--clay); }
.ntype.share{ background:var(--indigo-soft); color:var(--indigo-ink); }
.ntype.reply{ background:var(--teal-soft); color:var(--teal); }
.ntype.wait{ background:var(--amber-soft); color:var(--amber); }
.nrow .nb{ min-width:0; }
.nrow .nt{ font-weight:700; line-height:1.5; }
.nrow.unread .nt::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--indigo); margin-right:9px; vertical-align:.12em;
}
.nrow .nd{ color:var(--ink-3); font-size:.85em; margin-top:3px; }
/* one width, one height - a column of buttons that each hug their label reads
   as an unfinished list */
.nrow .btn{ width:100%; min-height:46px; padding:0 10px; font-size:.92em; }
.shrow .btn{ width:auto; min-width:152px; min-height:46px; padding:0 14px; font-size:.92em; }
@media (max-width:640px){
  .nrow{ grid-template-columns:64px 1fr; }
  .nrow .btn{ grid-column:2; }
}

.offbar{
  background:var(--amber-soft); border-bottom:1px solid var(--amber);
  color:var(--ink); position:sticky; top:0; z-index:40;
}
.offbar-in{
  max-width:1180px; margin:0 auto; padding:12px 20px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.offbar .k{ font-weight:700; color:var(--amber); white-space:nowrap; }
.offbar{ display:block; }

.toast{
  visibility:hidden;
  position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(140%);
  z-index:60; display:flex; gap:16px; align-items:center;
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow-lg); max-width:min(660px, calc(100vw - 32px));
  transition:transform .28s ease;
}
.toast.on{ visibility:visible; transform:translateX(-50%) translateY(0); }
.toast .tt{ font-weight:700; }
.toast .btn{
  width:auto; min-width:0; min-height:44px; padding:0 16px; font-size:.9em; background:transparent;
  border-color:rgba(255,255,255,.35); color:var(--paper); box-shadow:none;
}
.toast .btn:hover{ background:rgba(255,255,255,.12); }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }

.protobar{
  margin-top:14px; padding:12px 16px; border:1px dashed var(--line);
  border-radius:var(--radius); display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-size:.86em; color:var(--ink-3);
}
.rolectl label{ font-size:.82em; color:var(--ink-2); }
.rolectl select{ width:auto; min-height:46px; padding:0 12px; font-size:.92em; }

.syncbar{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); box-shadow:var(--shadow); margin-bottom:20px;
}
.syncbar .lg{
  width:42px; height:42px; border-radius:8px; flex:0 0 42px; display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal); font-weight:700; font-size:.82em;
}
.syncbar .st{ margin-right:auto; }
.syncbar .st .n1{ font-weight:700; }
.syncbar .st .n2{ color:var(--ink-3); font-size:.86em; }
.locked{
  display:flex; gap:14px; padding:16px 18px; border-radius:var(--radius);
  background:var(--card-2); border:1px solid var(--line); margin-bottom:18px;
}
.locked .k{ font-weight:700; color:var(--teal); white-space:nowrap; }
.btn[data-locked]{ opacity:.45; cursor:not-allowed; }

/* Admin (directory) ------------------------------------------- */
.adm{ display:grid; grid-template-columns:236px 1fr; gap:26px; align-items:start; }
@media (max-width:900px){ .adm{ grid-template-columns:1fr; } }
.admnav{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow); position:sticky; top:96px;
}
@media (max-width:900px){ .admnav{ position:static; } }
.admnav-h{
  font-size:.78em; letter-spacing:.12em; color:var(--ink-3);
  padding:10px 12px 8px;
}
.admnav button{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:14px 12px; border-radius:6px;
  min-height:52px; color:var(--ink-2);
}
.admnav button:hover{ background:var(--card-2); }
.admnav button[aria-current="page"]{ background:var(--indigo-soft); color:var(--indigo-ink); font-weight:700; }
.admnav .cnt{ margin-left:auto; font-size:.84em; color:var(--ink-3); }
.admnav button[aria-current="page"] .cnt{ color:var(--indigo-ink); }

.toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
}
.toolbar .search{ flex:1 1 260px; max-width:420px; }
.toolbar .search input{ min-height:52px; }

.gname{ font-weight:700; }
.gdesc{ color:var(--ink-3); font-size:.86em; }
.gkind{
  display:inline-block; font-size:.76em; font-weight:700; padding:2px 9px; border-radius:4px;
  background:var(--line-2); color:var(--ink-2); white-space:nowrap;
}
.gkind.dept{ background:var(--indigo-soft); color:var(--indigo-ink); }
.roleedit{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rmini{ width:auto; min-width:0; min-height:46px; padding:0 14px; font-size:.9em; }
.linkbtn{
  border:0; background:none; padding:0; cursor:pointer; color:var(--indigo);
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.crumb{ display:flex; gap:10px; align-items:center; margin-bottom:14px; font-size:.9em; color:var(--ink-3); }
.chk{ width:22px; height:22px; accent-color:var(--indigo); }
.subscreen{ display:none; }
.subscreen.on{ display:block; }

/* Share dialog ------------------------------------------------ */
dialog{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  color:var(--ink); padding:0; width:min(680px, calc(100vw - 40px));
  box-shadow:var(--shadow-lg); font:inherit;
}
dialog::backdrop{ background:rgba(16,22,30,.55); }
.dlg-h{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 26px 18px; border-bottom:1px solid var(--line);
}
.dlg-h h2{ font-size:1.2em; }
.dlg-h .sub{ color:var(--ink-3); font-size:.86em; margin-top:4px; }
.dlg-x{
  margin-left:auto; border:1px solid var(--line); background:var(--card);
  border-radius:var(--radius); min-width:48px; min-height:48px; cursor:pointer; font-size:1.1em;
}
.dlg-b{ padding:22px 26px; max-height:min(62vh, 560px); overflow:auto; }
.dlg-f{
  display:flex; gap:12px; align-items:center; padding:18px 26px;
  border-top:1px solid var(--line); background:var(--card-2);
}
.dlg-f .spacer{ margin-left:auto; }

.shgrp{ margin-bottom:22px; }
.shgrp > h3{
  font-size:.86em; color:var(--ink-2); letter-spacing:.06em; margin-bottom:10px;
}
.shlist{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.shrow{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
}
.shav{
  width:42px; height:42px; flex:0 0 42px; border-radius:8px; display:grid; place-items:center;
  font-weight:700; font-size:.9em; background:var(--indigo-soft); color:var(--indigo-ink);
}
.shav.person{ border-radius:50%; background:var(--teal-soft); color:var(--teal); }
.shnm{ margin-right:auto; }
.shnm .n1{ font-weight:700; }
.shnm .n2{ color:var(--ink-3); font-size:.84em; }
.shrow select{ width:auto; min-width:132px; min-height:46px; padding:0 12px; }
.shrow .rm{
  border:1px solid var(--line); background:var(--card); border-radius:var(--radius);
  min-height:46px; padding:0 14px; cursor:pointer; color:var(--ink-2);
}
.shrow.owner .shnm .n2{ color:var(--green); font-weight:700; }
.shadd{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.shadd .f{ flex:1 1 260px; }
.shadd .f label{ display:block; font-weight:700; font-size:.9em; margin-bottom:6px; }
.shadd select{ width:auto; min-width:132px; min-height:54px; }
.mkgrp{
  margin-top:14px; padding:16px 18px; border:1px dashed var(--line);
  border-radius:var(--radius); background:var(--card-2);
}
.mkgrp .t{ font-weight:700; margin-bottom:4px; }
.mkgrp .d{ color:var(--ink-3); font-size:.86em; }

.footnote{ margin-top:34px; color:var(--ink-3); font-size:.86em; max-width:52em; }
.kbd{ font-size:.82em; color:var(--ink-3); }

/* ============================================================
   Auth — the one screen shown before anything else exists.
   ============================================================ */
/* display は .on と組にして書く。素の .authwrap に display を持たせると
   .screen{display:none} と同じ詳細度で後勝ちし、ログイン後も残ってしまう。 */
.authwrap{ min-height:100vh; padding:40px 20px; }
.authwrap.on{ display:grid; place-items:center; }
.authcard{ width:100%; max-width:460px; padding:34px 34px 28px; }
.authcard .head h1{ font-size:1.7em; }
.authcard .field + .field{ margin-top:16px; }
.authcard .footnote{ margin-top:22px; }

/* Who am I / sign out. Sits at the end of the topbar so the
   brand keeps the left edge. */
.usermenu{ display:flex; align-items:center; gap:10px; }
.usermenu .un{ font-weight:700; font-size:.92em; }
.usermenu .ur{ font-size:.78em; }

/* Real rendered slides replace the schematic thumbnails: what you
   see here is the file you are about to download. */
.slides img.shot{
  display:block; width:100%; height:auto; border:1px solid var(--line);
  border-radius:6px; background:var(--card);
}
.slides .slide{ cursor:zoom-in; }
.shotdlg{ max-width:min(96vw,1400px); }
.shotdlg img{ width:100%; height:auto; display:block; }

.filelist li .rm{
  margin-left:10px; background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-size:1.1em; line-height:1; padding:4px 8px;
}
.filelist li .rm:hover{ color:var(--clay); }

.busy{ opacity:.6; pointer-events:none; }

/* 何も起きていないときは保存表示ごと消す（常時「保存しました」は嘘になる） */
.save:empty{ display:none; }

/* 運営が代理アクセスしているあいだ、画面の一番上に出す帯。
   誰の画面を見ているのか分からないまま操作するのが一番危ないので、
   スクロールしても常に見えるようにする。 */
.opbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: #7a2e2e;
  color: #fff;
  font-size: .95em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.opbar .btn {
  min-height: 38px;
  padding: 0 14px;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.opbar .btn:hover { background: rgba(255, 255, 255, .12); }

/* 補足の箇条書き。画面の下に「守られていること」を並べるのに使う。 */
.notes {
  margin: 18px 0 0;
  padding-left: 1.2em;
  color: var(--ink-2);
  font-size: .92em;
  line-height: 1.85;
}
.notes li { margin-bottom: 4px; }