/* tool-staff-portal — 正本は notes/design.md。直値を散らさず必ずトークン経由で。 */

:root{
  /* --- 面（明るいアルミ紙面 / フェイスプレート） --- */
  --paper:#E8EAEE;
  --plate:#F6F7F9;
  --plate-edge:#FFFFFF;
  --line:#CFD4DB;
  --line-soft:#DFE3E8;

  /* --- 文字（シルク印刷） --- */
  --ink:#14171C;
  --ink-2:#444B55;
  --muted:#5F6772;

  /* --- 暗インセット＝運航ストリップ（このページ唯一の暗面） --- */
  --board:#0D1116;
  --board-ink:#C9D2DA;
  --board-dim:#69737F;

  /* --- 信号 --- */
  --accent:#E8873A;        /* SDI橙＝ブランド。大きい面/グラフィック用 */
  --accent-deep:#A3520E;   /* 本文サイズの文字/リンクはこちら（AA確保） */
  --lamp-on:#35C46B;       /* 点灯＝いま使える */
  --lamp-off:#8A93A0;      /* 消灯＝準備中 */

  /* --- タイポ --- */
  --font-jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  /* ↓ IBM Plex Mono の Latinサブセットを自前ホストしたら、この1行の先頭に足すだけ */
  --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;

  --fs-code:11px;
  --fs-label:11.5px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-name:19px;
  --fs-chapter:22px;
  --fs-title:28px;

  /* --- 余白（4px基準） --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* --- 形（機材の面取り＝丸くしすぎない） --- */
  --r-plate:6px; --r-chip:3px; --r-btn:6px;

  /* --- 影（既定のふわっとした影は使わない。上端インセットで板を浮かせる） --- */
  --shadow-plate:
    0 1px 0 var(--plate-edge) inset,
    0 1px 2px rgba(20,25,35,.10),
    0 6px 16px rgba(20,25,35,.06);
  --shadow-plate-hover:
    0 1px 0 var(--plate-edge) inset,
    0 2px 4px rgba(20,25,35,.12),
    0 10px 24px rgba(20,25,35,.10);

  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.18s;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:var(--fs-base);
  line-height:1.7;
  padding:var(--sp-6) var(--sp-4) var(--sp-7);
}

/* ---------- 見出し（玄関の名札） ---------- */
.masthead{max-width:1120px;margin:0 auto var(--sp-6)}
.org{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-code);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.title{
  margin:var(--sp-1) 0 0;
  font-size:var(--fs-title);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
}
.lede{
  margin:var(--sp-3) 0 0;
  max-width:34em;
  color:var(--ink-2);
  font-size:var(--fs-sm);
}

/* ---------- 章（本物の順路なので番号を振る） ---------- */
.board{max-width:1120px;margin:0 auto}
.board-loading{color:var(--muted);font-size:var(--fs-sm)}

.chapter + .chapter{margin-top:var(--sp-7)}

.chapter-head{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--sp-3);
  row-gap:var(--sp-1);
  align-items:baseline;
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-4);
}
.chapter-no{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  color:var(--accent-deep);
  flex:none;
}
.chapter-label{
  margin:0;
  font-size:var(--fs-chapter);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.35;
}
.chapter-label{grid-column:2}
.chapter-note{
  grid-column:2;                 /* 375px では見出しの下に落とす（横に並べると衝突する） */
  font-size:var(--fs-label);
  color:var(--muted);
}

/* ---------- プレート（＝ラックに挿さった機材の面） ---------- */
.plates{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-4);
}

.plate{
  position:relative;
  background:var(--plate);
  border:1px solid var(--line);
  border-radius:var(--r-plate);
  box-shadow:var(--shadow-plate);
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plate:has(.plate-go:hover),
.plate:has(.plate-go:focus-visible){
  transform:translateY(-1px);
  box-shadow:var(--shadow-plate-hover);
}

/* --- 署名要素：暗インセットの運航ストリップ --- */
.strip{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  background:var(--board);
  color:var(--board-ink);
  padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-mono);
  font-size:var(--fs-code);
  letter-spacing:.14em;
}
.strip-code{flex:none;font-weight:600}
.strip-leader{
  flex:1 1 auto;
  height:1px;
  min-width:var(--sp-4);
  background-image:radial-gradient(circle, var(--board-dim) .6px, transparent .7px);
  background-size:5px 1px;
  background-repeat:repeat-x;
  opacity:.75;
}
.strip-state{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.lamp{
  width:7px;height:7px;border-radius:50%;
  background:var(--lamp-off);
  flex:none;
}
.is-open .lamp{
  background:var(--lamp-on);
  box-shadow:0 0 0 2px rgba(53,196,107,.18);
}
.strip-word{font-weight:600}
.is-open .strip-word{color:var(--lamp-on)}
.is-preparing .strip-word{color:var(--lamp-off)}

/* --- プレート本体 --- */
.plate-body{padding:var(--sp-4)}

.plate-head{display:flex;gap:var(--sp-3);align-items:flex-start}
.plate-icon{flex:none;width:24px;height:24px;color:var(--ink-2);margin-top:2px}
.is-preparing .plate-icon{color:var(--muted)}

.plate-name{
  margin:0;
  font-size:var(--fs-name);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
}
.plate-name-en{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:var(--fs-code);
  font-weight:400;
  letter-spacing:.16em;
  color:var(--muted);
}

.plate-summary{margin:var(--sp-3) 0 0;color:var(--ink-2);font-size:var(--fs-sm)}

.plate-foot{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-soft);
  min-height:44px;           /* 現場で片手・タップ標的 44px */
}
.plate-when{font-size:var(--fs-label);color:var(--muted);flex:1 1 auto}

.plate-badge{
  flex:none;
  font-family:var(--font-mono);
  font-size:var(--fs-code);
  letter-spacing:.12em;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:var(--r-chip);
  padding:1px var(--sp-2);
}

.plate-go{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:44px;
  padding:0 var(--sp-2);
  color:var(--accent-deep);
  font-size:var(--fs-sm);
  font-weight:700;
  text-decoration:none;
}
.plate-go::after{content:"";position:absolute;inset:0}  /* 板ぜんぶを押せる。タブ停止は1つ */
.plate-go .arrow{font-family:var(--font-mono);transition:transform var(--dur) var(--ease)}
.plate-go:hover{text-decoration:underline}
.plate-go:hover .arrow{transform:translateX(3px)}

.plate-wait{flex:none;font-size:var(--fs-sm);color:var(--muted);padding:0 var(--sp-2)}

/* ---------- エラー / フォールバック ---------- */
.board-error, .fallback{
  max-width:1120px;margin:0 auto;
  background:var(--plate);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-plate);
  padding:var(--sp-4);
  font-size:var(--fs-sm);
}
.board-error p:first-child{margin-top:0;font-weight:700}
.fallback a{color:var(--accent-deep)}

.foot{
  max-width:1120px;margin:var(--sp-7) auto 0;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:var(--fs-label);
}
.foot p{margin:0}

/* ---------- フォーカス（キーボードで全カードに到達できる） ---------- */
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:2px}

/* ---------- PC：2カラムまで（件数が少ないうちに間延びさせない） ---------- */
@media (min-width:720px){
  body{padding:var(--sp-7) var(--sp-5) var(--sp-7)}
  .chapter-head{grid-template-columns:auto auto 1fr}
  .chapter-note{grid-column:3;justify-self:end}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root{--fs-title:34px}
}

/* ---------- 署名モーション：状態語が1回だけパタンと着地する ---------- */
@media (prefers-reduced-motion: no-preference){
  .strip-word{
    display:inline-block;
    transform-origin:top center;
    animation:flap .28s var(--ease) both;
    animation-delay:calc(var(--i, 0) * 40ms + 120ms);
  }
}
@keyframes flap{
  from{transform:rotateX(-90deg);opacity:0}
  to{transform:rotateX(0);opacity:1}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .plate:has(.plate-go:hover),
  .plate:has(.plate-go:focus-visible){transform:none}
  .plate-go:hover .arrow{transform:none}
}