/* ============================================================
   SHO-HAN Design Tokens — v2  Modular Editorial
   Navy + 10-module accent palette + Light/Dark themes
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* =========================================================
   :root — common (theme-independent) tokens
   ========================================================= */
:root {
  /* ─── Brand ─────────────────────────── */
  --sh-navy:        #0F2451;
  --sh-navy-2:      #1B3978;
  --sh-navy-3:      #2A55A0;

  /* Primary action */
  --sh-blue:        #2563EB;
  --sh-blue-2:      #1D4ED8;

  /* ─── Module palette ────────────────────────
     Each module owns a color, used for: icon bg tint,
     accent rules, hero washes, status, hover focus.
     `-d` = deeper saturation for ink on tint.
     `-l` = light tint (use only in light mode; dark mode
            substitutes a desat variant).
     ───────────────────────────────────────── */
  --sh-mod-e:    #4F46E5;  --sh-mod-e-d:  #4338CA;  --sh-mod-e-l:  #EEF2FF;  /* Indigo  — 工程管理 ★ */
  --sh-mod-a:    #F26B5C;  --sh-mod-a-d:  #DC4D3D;  --sh-mod-a-l:  #FFF0EE;  /* Coral   — 見積請求   */
  --sh-mod-b:    #0E8C5E;  --sh-mod-b-d:  #066842;  --sh-mod-b-l:  #ECFDF5;  /* Emerald — 経理会計   */
  --sh-mod-c:    #7C3AED;  --sh-mod-c-d:  #5B21B6;  --sh-mod-c-l:  #F5F3FF;  /* Violet  — 日報ナレッジ */
  --sh-mod-d:    #0284C7;  --sh-mod-d-d:  #0369A1;  --sh-mod-d-l:  #E0F2FE;  /* Sky     — 勤怠給与   */
  --sh-mod-j:    #10B981;  --sh-mod-j-d:  #047857;  --sh-mod-j-l:  #D1FAE5;  /* Mint    — シフト     */
  --sh-mod-h:    #F97316;  --sh-mod-h-d:  #C2410C;  --sh-mod-h-l:  #FFEDD5;  /* Orange  — チャット   */
  --sh-mod-i:    #F97316;  --sh-mod-i-d:  #C2410C;  --sh-mod-i-l:  #FFEDD5;  /* Orange  — 通話 (チャットと統合) */
  --sh-mod-f:    #D97706;  --sh-mod-f-d:  #B45309;  --sh-mod-f-l:  #FFFBEB;  /* Amber   — 顧客       */
  --sh-mod-g:    #475569;  --sh-mod-g-d:  #334155;  --sh-mod-g-l:  #F1F5F9;  /* Slate   — カスタム   */

  /* ─── Status accents ─────────────────── */
  --sh-coral:       #E5484D;
  --sh-amber:       #D97706;
  --sh-mint:        #0E8C5E;

  /* ─── Type ───────────────────────────── */
  --sh-font-jp:        "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --sh-font-latin:     "Inter", "Noto Sans JP", system-ui, sans-serif;
  --sh-font-display:   "Bebas Neue", "Inter", system-ui, sans-serif;
  --sh-font-mono:      "JetBrains Mono", ui-monospace, monospace;
  --sh-font-num:       "Inter", "Noto Sans JP", system-ui, sans-serif;

  /* Sizes */
  --sh-fs-mega:    72px;
  --sh-fs-h1:      32px;
  --sh-fs-h2:      24px;
  --sh-fs-h3:      18px;
  --sh-fs-h4:      16px;
  --sh-fs-body:    15px;
  --sh-fs-small:   13px;
  --sh-fs-meta:    11px;

  /* Tracking */
  --sh-tk-display: 0.04em;
  --sh-tk-meta:    0.14em;

  /* ─── Spacing (4px base) ─────────────── */
  --sh-s-1:  4px;  --sh-s-2:  8px;  --sh-s-3:  12px;
  --sh-s-4: 16px;  --sh-s-5: 20px;  --sh-s-6:  24px;
  --sh-s-8: 32px;  --sh-s-10:40px;  --sh-s-12: 48px;
  --sh-s-16:64px;

  /* ─── Radii — 4 step ─────────────────── */
  --sh-r-xs:   4px;
  --sh-r-sm:   6px;
  --sh-r-md:   8px;
  --sh-r-lg:  12px;
  --sh-r-xl:  16px;
  --sh-r-2xl: 22px;
  --sh-r-pill:999px;

  /* ─── Motion ─────────────────────────── */
  --sh-dur-1: 120ms;
  --sh-dur-2: 200ms;
  --sh-dur-3: 320ms;
  --sh-dur-4: 480ms;
  --sh-ease:     cubic-bezier(.2,.7,.2,1);
  --sh-ease-emph:cubic-bezier(.2,.85,.25,1.15);
  --sh-ease-out: cubic-bezier(.16,1,.3,1);

  /* ─── Layout ─────────────────────────── */
  --sh-sidebar-w:  240px;
  --sh-topbar-h:   60px;
  --sh-tabbar-h:   72px;
}

/* =========================================================
   LIGHT theme (default)
   ========================================================= */
:root,
[data-theme="light"] {
  --sh-bg:          #F7F8FB;
  --sh-bg-2:        #EEF1F7;
  --sh-surface:     #FFFFFF;
  --sh-surface-2:   #FBFCFE;
  --sh-panel:       #F2F4F8;
  --sh-row-alt:     #F7F8FA;
  --sh-overlay:     rgba(15,36,81,0.06);

  --sh-ink:         #0B1426;
  --sh-ink-2:       #344056;
  --sh-ink-3:       #6B7587;
  --sh-ink-4:       #9AA3B2;
  --sh-ink-5:       #C7CCD6;
  --sh-ink-on-navy: #FFFFFF;

  --sh-line:        #E5E8EE;
  --sh-line-soft:   #EEF0F4;
  --sh-line-strong: #CBD0DA;

  --sh-blue-tint:   #E8EFFD;
  --sh-coral-tint:  #FDECEC;
  --sh-amber-tint:  #FEF3DA;
  --sh-mint-tint:   #E5F5EE;

  /* Shadow system — 4 step */
  --sh-sh-1: 0 1px 2px rgba(11,20,38,0.04), 0 1px 3px rgba(11,20,38,0.06);
  --sh-sh-2: 0 2px 6px rgba(11,20,38,0.06), 0 4px 12px rgba(11,20,38,0.08);
  --sh-sh-3: 0 8px 24px rgba(11,20,38,0.10), 0 4px 8px rgba(11,20,38,0.06);
  --sh-sh-4: 0 24px 48px rgba(11,20,38,0.18), 0 12px 24px rgba(11,20,38,0.10);

  /* Sidebar (always navy regardless of theme) */
  --sh-side-bg:     #0F2451;
  --sh-side-bg-2:   #16306B;
  --sh-side-ink:    #FFFFFF;
  --sh-side-ink-2:  rgba(255,255,255,0.65);
  --sh-side-ink-3:  rgba(255,255,255,0.40);
  --sh-side-line:   rgba(255,255,255,0.08);

  /* Backdrop dot grid color */
  --sh-dot:         rgba(15,36,81,0.06);
}

/* =========================================================
   DARK theme
   ========================================================= */
[data-theme="dark"] {
  --sh-bg:          #0A0F1E;
  --sh-bg-2:        #0F1628;
  --sh-surface:     #131A2D;
  --sh-surface-2:   #181F35;
  --sh-panel:       #1A2238;
  --sh-row-alt:     #161D32;
  --sh-overlay:     rgba(255,255,255,0.05);

  --sh-ink:         #ECF0FA;
  --sh-ink-2:       #B6BFD3;
  --sh-ink-3:       #828FA6;
  --sh-ink-4:       #5A6680;
  --sh-ink-5:       #3D475D;
  --sh-ink-on-navy: #FFFFFF;

  --sh-line:        rgba(255,255,255,0.08);
  --sh-line-soft:   rgba(255,255,255,0.05);
  --sh-line-strong: rgba(255,255,255,0.14);

  --sh-blue:        #5B8DEF;
  --sh-blue-2:      #7AA5F5;
  --sh-blue-tint:   rgba(91,141,239,0.14);

  --sh-coral:       #FB7185;
  --sh-amber:       #FBBF24;
  --sh-mint:        #34D399;
  --sh-coral-tint:  rgba(251,113,133,0.14);
  --sh-amber-tint:  rgba(251,191,36,0.14);
  --sh-mint-tint:   rgba(52,211,153,0.14);

  /* Module palette: tints become low-opacity overlays in dark */
  --sh-mod-e-l:  rgba(129,140,248,0.14);
  --sh-mod-a-l:  rgba(251,126,112,0.14);
  --sh-mod-b-l:  rgba(52,211,153,0.14);
  --sh-mod-c-l:  rgba(167,139,250,0.14);
  --sh-mod-d-l:  rgba(56,189,248,0.14);
  --sh-mod-j-l:  rgba(52,211,153,0.14);
  --sh-mod-h-l:  rgba(251,146,60,0.14);
  --sh-mod-i-l:  rgba(251,146,60,0.14);
  --sh-mod-f-l:  rgba(251,191,36,0.14);
  --sh-mod-g-l:  rgba(148,163,184,0.14);
  /* And the hue desaturates slightly for AA in dark */
  --sh-mod-e:    #818CF8;
  --sh-mod-a:    #FB7E70;
  --sh-mod-b:    #34D399;
  --sh-mod-c:    #A78BFA;
  --sh-mod-d:    #38BDF8;
  --sh-mod-j:    #34D399;
  --sh-mod-h:    #FB923C;
  --sh-mod-i:    #FB923C;
  --sh-mod-f:    #FBBF24;
  --sh-mod-g:    #94A3B8;

  --sh-sh-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --sh-sh-2: 0 4px 12px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.30);
  --sh-sh-3: 0 12px 28px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
  --sh-sh-4: 0 28px 56px rgba(0,0,0,0.70), 0 12px 24px rgba(0,0,0,0.40);

  --sh-side-bg:     #08101F;
  --sh-side-bg-2:   #0E1A33;
  --sh-side-ink:    #ECF0FA;
  --sh-side-ink-2:  rgba(236,240,250,0.65);
  --sh-side-ink-3:  rgba(236,240,250,0.40);
  --sh-side-line:   rgba(255,255,255,0.06);

  --sh-dot:         rgba(255,255,255,0.05);
}

/* Respect system pref if user hasn't set anything */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

/* =========================================================
   Resets & primitives
   ========================================================= */
html { color-scheme: light dark; }
[data-theme="light"] html, [data-theme="light"] body { color-scheme: light; }
[data-theme="dark"] html,  [data-theme="dark"] body  { color-scheme: dark; }

.sh-root, .sh-root * { box-sizing: border-box; }
body, .sh-root {
  font-family: var(--sh-font-jp);
  font-size: var(--sh-fs-body);
  line-height: 1.6;
  color: var(--sh-ink);
  background: var(--sh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1, "ss01" 1;
}
.sh-root h1, .sh-root h2, .sh-root h3, .sh-root h4 {
  margin: 0; font-weight: 700; line-height: 1.35;
  letter-spacing: -0.01em;
}
.sh-root p { margin: 0; }

.sh-num {
  font-family: var(--sh-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sh-display, .sh-bebas {
  font-family: var(--sh-font-display);
  letter-spacing: var(--sh-tk-display);
  text-transform: uppercase;
}
.sh-meta {
  font-family: var(--sh-font-latin);
  font-size: var(--sh-fs-meta);
  letter-spacing: var(--sh-tk-meta);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sh-ink-3);
}

/* =========================================================
   Buttons
   ========================================================= */
.sh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sh-font-jp);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--sh-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--sh-dur-1) var(--sh-ease),
    border-color var(--sh-dur-1) var(--sh-ease),
    color var(--sh-dur-1) var(--sh-ease),
    box-shadow var(--sh-dur-2) var(--sh-ease),
    transform var(--sh-dur-1) var(--sh-ease);
  white-space: nowrap;
  user-select: none;
}
.sh-btn:active { transform: translateY(1px); }

.sh-btn--primary {
  background: var(--sh-navy); color: #fff;
  box-shadow: 0 2px 6px rgba(15,36,81,0.20);
}
.sh-btn--primary:hover { background: var(--sh-navy-2); box-shadow: 0 6px 16px rgba(15,36,81,0.30); transform: translateY(-1px); }

.sh-btn--action {
  background: var(--sh-blue); color: #fff;
  box-shadow: 0 2px 6px rgba(37,99,235,0.32);
}
.sh-btn--action:hover { background: var(--sh-blue-2); box-shadow: 0 6px 18px rgba(37,99,235,0.42); transform: translateY(-1px); }

.sh-btn--ghost {
  background: transparent;
  color: var(--sh-ink);
  border-color: var(--sh-line-strong);
}
.sh-btn--ghost:hover { background: var(--sh-panel); }

.sh-btn--text {
  background: transparent;
  color: var(--sh-blue);
  padding-left: 8px; padding-right: 8px;
}
.sh-btn--text:hover { background: var(--sh-blue-tint); }

.sh-btn--sm { padding: 6px 10px; font-size: 12px; }
.sh-btn--lg { padding: 14px 22px; font-size: 15px; }

.sh-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--sh-r-md);
  background: transparent; border: none; cursor: pointer;
  color: var(--sh-ink-2);
  transition: background var(--sh-dur-1) var(--sh-ease), color var(--sh-dur-1) var(--sh-ease);
}
.sh-iconbtn:hover { background: var(--sh-panel); color: var(--sh-ink); }

/* =========================================================
   Card / surface
   ========================================================= */
.sh-card {
  background: var(--sh-surface);
  border-radius: var(--sh-r-lg);
  border: 1px solid var(--sh-line);
  box-shadow: var(--sh-sh-1);
}

/* =========================================================
   Chip / Tag
   ========================================================= */
.sh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sh-font-jp);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-panel);
  color: var(--sh-ink-2);
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sh-chip--navy   { background: var(--sh-navy); color: #fff; }
.sh-chip--blue   { background: var(--sh-blue-tint); color: var(--sh-blue); }
.sh-chip--mint   { background: var(--sh-mint-tint); color: var(--sh-mint); }
.sh-chip--amber  { background: var(--sh-amber-tint); color: var(--sh-amber); }
.sh-chip--coral  { background: var(--sh-coral-tint); color: var(--sh-coral); }
.sh-chip--ghost  { background: transparent; border: 1px solid var(--sh-line); color: var(--sh-ink-3); }
.sh-chip--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.9;
}

/* =========================================================
   Form
   ========================================================= */
.sh-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--sh-line-strong);
  border-radius: var(--sh-r-md);
  background: var(--sh-surface);
  color: var(--sh-ink);
  transition: border-color var(--sh-dur-1) var(--sh-ease), box-shadow var(--sh-dur-1) var(--sh-ease), background var(--sh-dur-1) var(--sh-ease);
  outline: none;
}
.sh-input::placeholder { color: var(--sh-ink-4); }
.sh-input:hover { border-color: var(--sh-line-strong); }
.sh-input:focus {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 4px var(--sh-blue-tint);
}
.sh-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sh-ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* =========================================================
   Module-color helpers (used by tiles/badges)
   ========================================================= */
[data-mod="E"] { --m: var(--sh-mod-e); --m-d: var(--sh-mod-e-d); --m-l: var(--sh-mod-e-l); }
[data-mod="A"] { --m: var(--sh-mod-a); --m-d: var(--sh-mod-a-d); --m-l: var(--sh-mod-a-l); }
[data-mod="B"] { --m: var(--sh-mod-b); --m-d: var(--sh-mod-b-d); --m-l: var(--sh-mod-b-l); }
[data-mod="C"] { --m: var(--sh-mod-c); --m-d: var(--sh-mod-c-d); --m-l: var(--sh-mod-c-l); }
[data-mod="D"] { --m: var(--sh-mod-d); --m-d: var(--sh-mod-d-d); --m-l: var(--sh-mod-d-l); }
[data-mod="J"] { --m: var(--sh-mod-j); --m-d: var(--sh-mod-j-d); --m-l: var(--sh-mod-j-l); }
[data-mod="H"] { --m: var(--sh-mod-h); --m-d: var(--sh-mod-h-d); --m-l: var(--sh-mod-h-l); }
[data-mod="I"] { --m: var(--sh-mod-i); --m-d: var(--sh-mod-i-d); --m-l: var(--sh-mod-i-l); }
[data-mod="F"] { --m: var(--sh-mod-f); --m-d: var(--sh-mod-f-d); --m-l: var(--sh-mod-f-l); }
[data-mod="G"] { --m: var(--sh-mod-g); --m-d: var(--sh-mod-g-d); --m-l: var(--sh-mod-g-l); }

/* =========================================================
   Universal entry / motion (stronger animations)
   ========================================================= */
@keyframes sh-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Safer variant: doesn't dim the element if animation gets stuck (iframes, throttled tabs) */
@keyframes sh-rise-safe {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes sh-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sh-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sh-pop {
  0%   { opacity: 0; transform: scale(0.88) translateY(12px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { transform: scale(1); }
}
@keyframes sh-pulse-ring {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.6; }
  70%  { box-shadow: 0 0 0 10px currentColor; opacity: 0; }
  100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}
@keyframes sh-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

.sh-anim-rise   { animation: sh-rise-safe   var(--sh-dur-3) var(--sh-ease-out) both; }
.sh-anim-fade   { animation: sh-fade-in var(--sh-dur-3) var(--sh-ease) both; }
.sh-anim-scale  { animation: sh-scale-in var(--sh-dur-3) var(--sh-ease-emph) both; }
.sh-anim-pop    { animation: sh-pop var(--sh-dur-3) var(--sh-ease-emph) both; }

/* Stagger children */
.sh-stagger > * { animation: sh-rise-safe var(--sh-dur-3) var(--sh-ease-out) both; }
.sh-stagger > *:nth-child(1) { animation-delay: 30ms; }
.sh-stagger > *:nth-child(2) { animation-delay: 80ms; }
.sh-stagger > *:nth-child(3) { animation-delay: 130ms; }
.sh-stagger > *:nth-child(4) { animation-delay: 180ms; }
.sh-stagger > *:nth-child(5) { animation-delay: 230ms; }
.sh-stagger > *:nth-child(6) { animation-delay: 280ms; }
.sh-stagger > *:nth-child(7) { animation-delay: 330ms; }
.sh-stagger > *:nth-child(8) { animation-delay: 380ms; }
.sh-stagger > *:nth-child(9) { animation-delay: 430ms; }
.sh-stagger > *:nth-child(10) { animation-delay: 480ms; }

/* Dot grid backdrop (used by hero panels) */
.sh-dot-grid {
  background-image: radial-gradient(circle, var(--sh-dot) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Pulse status dot */
.sh-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  position: relative;
}
.sh-dot--live { background: var(--sh-mint); }
.sh-dot--live::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  color: var(--sh-mint); animation: sh-pulse-ring 1.8s var(--sh-ease) infinite;
}

/* Theme toggle button (used by app-nav) */
.sh-theme-btn {
  width: 36px; height: 36px; border-radius: var(--sh-r-md);
  background: transparent; border: 1px solid var(--sh-line);
  color: var(--sh-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--sh-dur-1) var(--sh-ease), color var(--sh-dur-1) var(--sh-ease), transform var(--sh-dur-2) var(--sh-ease);
}
.sh-theme-btn:hover { background: var(--sh-panel); color: var(--sh-ink); transform: rotate(15deg); }
.sh-theme-btn .sh-icon-moon { display: none; }
[data-theme="dark"] .sh-theme-btn .sh-icon-sun  { display: none; }
[data-theme="dark"] .sh-theme-btn .sh-icon-moon { display: inline-flex; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   app-nav.js overrides — dark-mode aware shell
   The legacy nav script hardcodes #fff for topbar etc.
   These selectors are more specific so they win.
   ========================================================= */
.sh-root .sh-topbar,
.sh-root .sh-mobile-topbar {
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-line);
  transition: background var(--sh-dur-2) var(--sh-ease), border-color var(--sh-dur-2) var(--sh-ease);
}
.sh-root .sh-topbar h1,
.sh-root .sh-mobile-topbar .sh-greeting-name {
  color: var(--sh-ink);
}
.sh-root .sh-topbar .sh-subtitle,
.sh-root .sh-mobile-topbar .sh-greeting-sub {
  color: var(--sh-ink-3);
}
.sh-root .sh-bell-btn,
.sh-root .sh-hamburger {
  color: var(--sh-ink-2);
}
.sh-root .sh-bell-btn:hover,
.sh-root .sh-hamburger:hover { background: var(--sh-panel); color: var(--sh-ink); }

.sh-root .sh-bottom-tab {
  background: var(--sh-surface);
  border-top: 1px solid var(--sh-line);
}
.sh-root .sh-tab-item { color: var(--sh-ink-4); }
.sh-root .sh-tab-item.active { color: var(--sh-mod-e); }

/* Sidebar — keep navy in light, deepen in dark */
.sh-root .sh-sidebar {
  background: var(--sh-side-bg);
  border-right: 1px solid var(--sh-side-line);
}

/* More sheet */
.sh-root .sh-sheet { background: var(--sh-surface); }
.sh-root .sh-sheet h4 { color: var(--sh-ink-2); }
.sh-root .sh-sheet .sh-sitem {
  background: var(--sh-panel); color: var(--sh-ink);
}

/* layout main bg */
.sh-root .sh-layout { background: var(--sh-bg); }

/* Bridge: original koutei .container shouldn't paint behind tokens bg */
.sh-root .container { background: transparent; }

/* ===== iOS input-focus auto-zoom prevention (2026-06-13 zoomfix) =====
   iOS Safari/WKWebView は focus した form control の computed font-size が
   16px 未満だとページ全体を自動ズームし、ズームが解除されず残る事象がある
   (工程書レコード検索で報告)。viewport の maximum-scale 固定はピンチ拡大の
   アクセシビリティを壊すため採らず、発火条件そのものを潰す:
   iOS 限定 (@supports -webkit-touch-callout) かつタッチ環境 (pointer:coarse)
   のみで全 form control を実質 16px 以上に底上げ。max(16px, 1em) なので
   元々 16px 以上の入力はそのまま。PC/Android は完全に無影響。 */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    /* zoomfix2 (2026-06-13): :not(#sh_zg) で詳細度を (1,0,x) に引き上げ。
       .fk-shell select / .quick-status 等のクラス系 font-size!important
       (shohan-unify-lite.css ほか) に負けて 13px のまま残りズームが再発
       していたため。#sh_zg は存在しないIDで挙動への影響なし。 */
    input:not(#sh_zg):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]),
    select:not(#sh_zg),
    textarea:not(#sh_zg),
    [contenteditable="true"]:not(#sh_zg),
    [contenteditable=""]:not(#sh_zg) {
      font-size: 16px !important;
      font-size: max(16px, 1em) !important;
    }
  }
}