/* 動きの共通部品（2026-10-17 Stage 23H）：管理コンソール（/admin/）と運営画面（/operator/）で共用。
   motion.js と対で使う。見た目と動きだけで、画面の処理（保存・権限・データ）は変えない。
   動きは 150〜300ms の控えめなものだけ。「視差効果を減らす」設定の端末では動きを止める（最後の reduced-motion）。
   Stage 27E（2026-10-17）：動かすのは transform と opacity だけ（幅・文字の大きさ・列の幅は即座に切り替える）。長さは --dur-1/2/3、
   緩急は --ease-*（admin.css / operator.css の :root）。跳ね返る曲線は使わない。決まりは docs/WEB_DESIGN_SYSTEM.md。 */

/* ---- 1. メニューの折りたたみ（アイコンだけの細い帯）。PC幅のみ。 ---- */
.tw-rail-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--side-muted,#bbcdcd);font:inherit;font-size:var(--fs-xs);cursor:pointer;text-align:left}
.tw-rail-toggle:hover{background:var(--side-hover,var(--side-2,rgba(255,255,255,.08)));color:var(--side-fg,#fff)}
.tw-rail-toggle:focus-visible{outline:2px solid var(--accent,#9CC7F2);outline-offset:1px}
.tw-rail-toggle svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tw-rail [data-tw-rail-label]{display:none}
@media(max-width:720px){.console .tw-rail-toggle{display:none}}
@media(max-width:900px){.shell .tw-rail-toggle{display:none}}
@media(min-width:721px){
  .console.tw-rail{grid-template-columns:72px minmax(0,1fr)}
  .console.tw-rail .sidebar .brand{justify-content:center;padding-inline:0}
  .console.tw-rail .brand-text{display:none}
  .console.tw-rail .nav-search{display:none}
  .console.tw-rail .sidebar nav .nav-app-link{justify-content:center;gap:0;margin-inline:0;padding:0;height:40px;min-height:40px}
  .console.tw-rail .nav-app-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .console.tw-rail .sidebar nav{padding-inline:8px}
  .console.tw-rail .sidebar nav [data-view]{display:flex;align-items:center;justify-content:center;font-size:0;min-height:40px;height:40px;padding:0;text-align:center}
  .console.tw-rail .sidebar nav [data-view]::after{display:none}
  .console.tw-rail .sidebar nav [data-view][hidden],.console.tw-rail .sidebar nav [data-view].nav-filtered-out{display:none}
  .console.tw-rail .sidebar nav [data-view]{gap:0}
  .console.tw-rail .sidebar .nav-group{font-size:0;line-height:0;margin:8px 10px;padding-top:0}
  .console.tw-rail .sidebar-foot{padding-inline:8px;align-items:center}
  .console.tw-rail .who-text{display:none}
  .console.tw-rail .logout-button{font-size:0;justify-content:center;padding-inline:0;gap:0;width:44px}
  .console.tw-rail .logout-icon{width:18px;height:18px}
  .console.tw-rail .tw-rail-toggle{justify-content:center;padding-inline:0}
  .console.tw-rail .tw-rail-toggle svg{transform:rotate(180deg)}
}
@media(min-width:901px){
  .shell.tw-rail{grid-template-columns:76px minmax(0,1fr)}
  .shell.tw-rail .sidebar{padding-inline:10px}
  .shell.tw-rail .sidebar-brand{align-items:center;padding-inline:0}
  .shell.tw-rail .sidebar-brand .brand{font-size:0;gap:0}
  .shell.tw-rail .sidebar-brand small{display:none}
  .shell.tw-rail #nav a{position:relative;justify-content:center;font-size:0;gap:0;padding:8px}
  .shell.tw-rail #nav .nav-badge{position:absolute;top:6px;right:10px;min-width:8px;height:8px;padding:0;font-size:0;line-height:0}
  .shell.tw-rail .nav-group{font-size:0;line-height:0;margin:8px 10px;border-top:1px solid var(--side-2,#1F2A40)}
  .shell.tw-rail .sidebar-foot{align-items:center;padding-inline:0}
  .shell.tw-rail .who>span:last-child{display:none}
  .shell.tw-rail .logout-button{font-size:0;justify-content:center;padding-inline:0;gap:0;width:44px}
  .shell.tw-rail .logout-icon{width:18px;height:18px}
  .shell.tw-rail .tw-rail-toggle{justify-content:center;padding-inline:0}
  .shell.tw-rail .tw-rail-toggle svg{transform:rotate(180deg)}
}

/* ---- 2. 大きな見出しがスクロールで小さくなる（PC幅のみ。ホームは特に大きく）。 ---- */
@media(min-width:721px){
  .console .content>.page-head{position:sticky;top:0;z-index:4;background:var(--bg,#f4f7f7);margin-inline:-8px;padding:6px 8px}
  .console .content:where(:has(#view-overview:not([hidden])))>.page-head h1{font-size:clamp(var(--fs-3xl),1.2vw + 16px,34px);letter-spacing:0}
  html.tw-scrolled .console .content>.page-head{box-shadow:0 8px 16px -14px rgba(20,15,30,.45)}
  html.tw-scrolled .console .content>.page-head h1{font-size:var(--fs-xl)}
  html.tw-scrolled .console .content>.page-head p{max-height:0;opacity:0;margin:0;overflow:hidden}
  .console .content>.page-head p{max-height:6em}
}
@media(min-width:901px){
  .shell .content>.page-head{position:sticky;top:0;z-index:4;background:var(--bg,#f4f7f7);margin-inline:-8px;padding:6px 8px}
  .shell .content:where(:has(#view-dashboard:not([hidden])))>.page-head h1{font-size:clamp(var(--fs-3xl),1.2vw + 16px,34px);letter-spacing:0}
  html.tw-scrolled .shell .content>.page-head{box-shadow:0 8px 16px -14px rgba(20,15,30,.45)}
  html.tw-scrolled .shell .content>.page-head h1{font-size:var(--fs-xl)}
  html.tw-scrolled .shell .content>.page-head p{max-height:0;opacity:0;margin:0;overflow:hidden}
  .shell .content>.page-head p{max-height:6em}
}

/* ---- 3. 保存ボタン：処理中の回転 → 完了のチェック → 元の表示。 ---- */
.tw-btn-loading{cursor:progress}
.tw-btn-loading::before,.tw-btn-done::before{content:"";display:inline-block;flex:none;box-sizing:border-box;vertical-align:-.15em;margin-right:.45em}
.tw-btn-loading::before{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
.tw-btn-done::before{width:.42em;height:.8em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-.1em) rotate(45deg);margin-left:.15em;margin-right:.6em}
.tw-btn-done{box-shadow:0 0 0 3px color-mix(in srgb,var(--go,#2f9e7a) 30%,transparent)}
/* 失敗：赤い輪を少しの間だけ（理由は #message・欄の下に出る。Stage 27E） */
.tw-btn-error{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger,#B23A48) 28%,transparent)!important}

/* ---- 4. 表の行をその場で開く（省略された内容を全部見せる）。 ---- */
@media(min-width:721px){
  #audit-rows tr:not(.tw-row-open) td{max-width:34ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #audit-rows tr.tw-expandable td:first-child::before{content:"";display:inline-block;width:.42em;height:.42em;margin-right:.55em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);vertical-align:.12em;opacity:.55}
  #audit-rows tr.tw-row-open td:first-child::before{transform:rotate(45deg)}
}
/* design-lint: allow（省略の印として右端を薄くする mask。飾りの色ではない） */#events .event-row:not(.tw-row-open) .inline-kv{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,#000 85%,transparent)}
#events .event-row:not(.tw-row-open) .inline-kv dd{overflow-wrap:normal}
#events .event-row.tw-expandable time::before{content:"";display:inline-block;width:.42em;height:.42em;margin-right:.55em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);vertical-align:.12em;opacity:.55}
#events .event-row.tw-row-open time::before{transform:rotate(45deg)}
.tw-expandable{cursor:pointer}
.tw-expandable:hover{background:var(--accent-soft,rgba(0,0,0,.03))}
.tw-expandable:focus-visible{outline:2px solid var(--focus,var(--accent,#5b8def));outline-offset:-2px}
.tw-row-open{background:var(--accent-soft,rgba(0,0,0,.035))}

/* 一括選択のある表：選んだ行を薄く色付けする（見出しの「すべて選ぶ」と連動）。 */
tbody tr:has(>td:first-child input[type=checkbox]:checked){background:var(--accent-soft,rgba(0,0,0,.04))}

/* ---- 5. タブの下線が選んだタブへすべる（PC幅のみ。スマホの格子表示は従来どおり）。 ---- */
@media(min-width:721px){
  .tw-ink{position:relative}
  .tw-ink>[role=tab][aria-selected=true]{border-bottom-color:transparent!important}
  .tw-ink::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100px;transform-origin:left center;transform:translateX(var(--tw-ink-x,0)) scaleX(var(--tw-ink-s,0));background:var(--focus,var(--teal,#075e63));border-radius:3px 3px 0 0;pointer-events:none}
  .tw-ink.inv-tabs::after,.tw-ink.payroll-workflow-tabs::after{background:var(--teal,#075e63)}
}

/* ---- 6. 検索欄：虫めがねの印と、入力中は欄が広がる。 ---- */
.search-label input[type=search],.inv-search input[type=search],#nav-search{padding-left:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807a8c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center;background-size:16px}
@media(min-width:721px){
  .filter-row .search-label:focus-within,.filter-bar .search-label:focus-within{flex-basis:460px}
  .shell .search:focus-within{max-width:560px;flex-grow:2}
}

/* ---- 7. メニュー・小窓：押したボタンの位置から少し拡大して出る。 ---- */
@keyframes tw-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes tw-spin{to{transform:rotate(360deg)}}
@keyframes tw-check{from{opacity:0;transform:translateY(-.1em) rotate(45deg) scale(.4)}to{opacity:1;transform:translateY(-.1em) rotate(45deg)}}
.accent-menu,.column-picker-panel,.menu-items,[role=menu]{transform-origin:var(--tw-origin,top right)}
.column-picker-panel{--tw-origin:top left}

@media(prefers-reduced-motion:no-preference){
  .tw-rail-toggle svg{transition:transform var(--dur-2) var(--ease-out)}
  .content>.page-head p{transition:opacity var(--dur-1) var(--ease-out)}
  .content>.page-head{transition:box-shadow var(--dur-2) var(--ease-out)}
  .tw-btn-loading::before{animation:tw-spin .8s linear infinite}
  .tw-btn-done::before{animation:tw-check var(--dur-2) var(--ease-out)}
  .tw-btn-done,.tw-btn-error{transition:box-shadow var(--dur-2) var(--ease-out)}
  .tw-ink.tw-ink-ready::after{transition:transform var(--dur-2) var(--ease-in-out)}
  #audit-rows td:first-child::before,#events time::before{transition:transform var(--dur-2) var(--ease-out)}
  .tw-expandable{transition:background-color var(--dur-1) var(--ease-out)}
  .accent-menu:not([hidden]),.column-picker[open]>.column-picker-panel,details.menu[open]>.menu-items,[role=menu]:not([hidden]){animation:tw-pop var(--dur-1) var(--ease-out)}
  /* 8. Stage 26D：骨組みのゆっくりした明滅（27E：光の帯をやめ、1.2 秒の不透明度だけに）・小窓の出入り・お知らせの帯 */
  tr.tw-skel-row td>span,.tw-skel-text::before,.dash-skel span{animation:tw-pulse 1.2s var(--ease-in-out) infinite alternate}
  dialog:not(.help-panel):not(.side-panel):not(.inv-drawer){transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete;opacity:0;transform:translateY(8px) scale(.985)}
  dialog:not(.help-panel):not(.side-panel):not(.inv-drawer)[open]{opacity:1;transform:none}
  dialog.side-panel,dialog.inv-drawer{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete;opacity:0;transform:translateX(28px)}
  dialog.side-panel[open],dialog.inv-drawer[open]{opacity:1;transform:none}
  dialog::backdrop{transition:opacity var(--dur-2) var(--ease-out),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete;opacity:0}
  dialog[open]::backdrop{opacity:1}
  @starting-style{
    dialog:not(.help-panel):not(.side-panel):not(.inv-drawer)[open]{opacity:0;transform:translateY(8px) scale(.985)}
    dialog.side-panel[open],dialog.inv-drawer[open]{opacity:0;transform:translateX(28px)}
    dialog[open]::backdrop{opacity:0}
  }
  /* 9. Stage 30B：画面の切り替え（View Transitions）・選択の印・吹き出し・トースト・小さなグラフ */
  html.tw-vt-view::view-transition-group(tw-main){animation-duration:0s}
  html.tw-vt-view::view-transition-old(tw-main){animation:tw-vt-out var(--dur-1) var(--ease-in) both}
  html.tw-vt-view::view-transition-new(tw-main){animation:tw-vt-in var(--dur-3) var(--ease-spring) both}
  html.tw-vt-rail::view-transition-group(*){animation-duration:var(--dur-3);animation-timing-function:var(--ease-spring)}
  .view.tw-view-enter{animation:tw-vt-in var(--dur-3) var(--ease-spring) both}
  .tw-nav-ink.tw-ink-ready{transition:transform var(--dur-3) var(--ease-spring),opacity var(--dur-1) var(--ease-out)}
  .tw-tip{transition:opacity var(--dur-1) var(--ease-out),translate var(--dur-1) var(--ease-out)}
  .tw-toast{animation:tw-toast-in var(--dur-3) var(--ease-spring) both}
  .tw-toast.is-leaving,.toasts>.toast.is-leaving{transition:opacity var(--dur-1) var(--ease-in),transform var(--dur-1) var(--ease-in)}
  .tw-spark{animation:tw-reveal .6s var(--ease-out) .15s both}
  .tw-spark-dot{animation:tw-rise var(--dur-2) var(--ease-spring) .6s both}
  .tw-bar{animation:tw-grow .4s var(--ease-spring) calc(var(--i,0) * 40ms + 120ms) both}
  .tw-meter{animation:tw-wipe .5s var(--ease-spring) .12s both}
  .tw-pal-item{transition:background-color var(--dur-1) var(--ease-out)}
  /* 行をその場で開いたとき：省略されていた中身が少し上から降りて出る */
  #audit-rows tr.tw-row-open>td,#events .event-row.tw-row-open .inline-kv{animation:tw-drop var(--dur-2) var(--ease-spring)}
  .dash.is-entering .dash-card,.bento.is-entering>.dash-card{animation:tw-rise var(--dur-3) var(--ease-spring) calc(var(--i,0) * 50ms) backwards}
  .dash-card{transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
  .dash-go{transition:background-color var(--dur-1) var(--ease-out)}
  /* お知らせの帯（管理コンソールの #message）は上から少し降りて出る */
  #message:not([hidden]){animation:tw-drop var(--dur-2) var(--ease-out)}
}
@media(prefers-reduced-motion:reduce){
  .tw-btn-loading::before{border-right-color:currentColor;opacity:.5}
}

/* ---- 8. Stage 26D（2026-10-17）：小窓の出入り・読み込み中の骨組み・お知らせの帯の出方 ---- */
/* 読み込み中の骨組み：仮の行（motion.js が置く tr.tw-skel-row）と、「読み込み中…」の文だけの欄（.tw-skel-text）。 */
tr.tw-skel-row td{border-bottom-color:transparent!important;padding-block:12px}
tr.tw-skel-row td>span{display:block;height:10px;width:72%;border-radius:6px;background:var(--skeleton,#E9ECF0)}
tr.tw-skel-row:nth-child(2) td>span{width:58%}
tr.tw-skel-row:nth-child(3) td>span{width:66%}
tr.tw-skel-row:hover{background:transparent!important}
.tw-skel-text{position:relative;min-height:44px;color:transparent!important;border-color:transparent!important;background:transparent!important;user-select:none}
.tw-skel-text::before{content:""!important;position:absolute;left:0;top:10px;width:min(320px,70%);height:10px;border-radius:6px;background:var(--skeleton,#E9ECF0)!important;box-shadow:0 18px 0 var(--skeleton,#E9ECF0)}
.tw-skel-text::after{content:none!important}
/* 小窓：中央の小窓は少し下から浮かび上がり、右から出る小窓（引き出し）は右から入る。閉じるときも逆の動き（対応ブラウザ）。 */
/* 動き（骨組みの光・小窓の出入り・お知らせの帯）は上の no-preference の中（「8. Stage 26D」）。 */
@keyframes tw-pulse{from{opacity:1}to{opacity:.45}}
@keyframes tw-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- 9. Stage 30B（2026-10-17）：画面の切り替え・選択の印・吹き出し・コマンドパレット・トースト・小さなグラフ ----
   動き（animation / transition）は上の no-preference の中（「9. Stage 30B」）。ここは形と色だけ。 */
/* 画面の切り替え（View Transitions API）：切り替えの間だけ名前を付ける（motion.js の transition が html に .tw-vt-view／.tw-vt-rail を付ける）。 */
html.tw-vt-view .content{view-transition-name:tw-main}
html.tw-vt-rail .sidebar{view-transition-name:tw-side}
html.tw-vt-rail .main-column,html.tw-vt-rail .shell>.content{view-transition-name:tw-main}
html.tw-vt-rail::view-transition-old(tw-side),html.tw-vt-rail::view-transition-new(tw-side),
html.tw-vt-rail::view-transition-old(tw-main),html.tw-vt-rail::view-transition-new(tw-main){height:100%;width:auto;object-fit:none;object-position:left top}

/* メニューの選択の印（左の短い棒が選んだ項目へすべる。motion.js の setupNavInk）。以前の各項目の ::after の棒は使わない。 */
.tw-has-ink{position:relative}
.tw-nav-ink{position:absolute;left:0;top:0;z-index:1;width:3px;height:100px;border-radius:0 3px 3px 0;background:var(--accent);pointer-events:none;opacity:0;transform-origin:0 0;
  transform:translate(var(--tw-x,0),calc(var(--tw-y,0px) + 9px)) scaleY(calc(var(--tw-h,.4) - .18))}
.tw-nav-ink.is-on{opacity:1}
.tw-has-ink [data-view].active::after,.tw-has-ink a.active::after{content:none!important}

/* 吹き出し（data-tw-tip。メニューの細い帯の名前など） */
.tw-tip{position:fixed;left:0;top:0;z-index:80;max-width:280px;padding:5px 10px;border-radius:8px;background:var(--ink);color:white;font-size:var(--fs-xs);font-weight:600;line-height:1.5;
  pointer-events:none;opacity:0;transform:translate(var(--tw-x,0),var(--tw-y,0));translate:0 3px;box-shadow:var(--e3)}
.tw-tip[data-side=right]{translate:-3px 0}
.tw-tip.is-on{opacity:1;translate:0 0}

/* コマンドパレット（Ctrl+K・⌘K） */
dialog.tw-palette{width:min(640px,calc(100% - 32px));max-width:none;max-height:min(560px,calc(100vh - 96px));margin:12vh auto auto;padding:0;border:0;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--e3);overflow:hidden}
dialog.tw-palette[open]{display:flex;flex-direction:column}
dialog.tw-palette::backdrop{background:rgba(15,18,26,.42)}
.tw-pal-field{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tw-pal-field input[type=search]{flex:1;min-width:0;min-height:40px;border:0!important;box-shadow:none!important;outline:0;padding:6px 6px 6px 30px;font-size:var(--fs-lg);background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807a8c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:4px center;background-size:18px}
.tw-pal-list{list-style:none;margin:0;padding:8px;overflow:auto;flex:1;min-height:0;scroll-padding:8px}
.tw-pal-item{display:flex;align-items:center;gap:12px;min-height:42px;padding:8px 12px;border-radius:10px;cursor:pointer}
.tw-pal-item::before{content:"";flex:none;width:18px;height:18px;background:currentColor;opacity:.7;-webkit-mask:var(--ic,none) center/18px no-repeat;mask:var(--ic,none) center/18px no-repeat}
.tw-pal-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-pal-item small{flex:none;color:var(--muted);font-size:var(--fs-xs)}
.tw-pal-item[aria-selected=true]{background:var(--accent-soft);color:var(--ink)}
.tw-pal-item[aria-selected=true]::before{opacity:1;color:var(--teal)}
.tw-pal-empty{margin:0;padding:28px 16px;text-align:center;color:var(--muted)}
.tw-pal-foot{margin:0;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs)}
.tw-palette kbd{display:inline-block;min-width:22px;padding:0 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;font:inherit;font-size:var(--fs-xs);line-height:1.6;text-align:center;color:var(--muted);background:var(--surface)}

/* トースト（管理コンソール：成功の結果を右下に積み重ねる。#message の文は読み上げ用に残し、見た目だけ隠す） */
.tw-toasts{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.tw-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:12px;background:var(--ink);color:white;box-shadow:var(--e3);font-size:var(--fs-md);font-weight:600;line-height:1.5;pointer-events:auto;cursor:pointer}
.tw-toast-mark{position:relative;flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--go)}
.tw-toast-mark::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tw-toast.is-leaving,.toasts>.toast.is-leaving{opacity:0;transform:translateX(16px)}
#message.tw-toasted{position:absolute!important;width:1px;height:1px;margin:0!important;padding:0!important;border:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 小さなグラフ（window.twUi の sparkline・bars・meter） */
.tw-spark-box{position:relative;height:56px}
.tw-spark{display:block;width:100%;height:100%;overflow:visible}
.tw-spark-line{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tw-spark-area{fill:color-mix(in srgb,var(--teal) 9%,transparent)}
.tw-spark-dot{position:absolute;left:100%;top:calc(var(--tw-dy,.5) * 100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--teal)}
.tw-bars-box{display:grid;gap:4px}
.tw-bars{display:block;width:100%;height:48px;overflow:visible}
.tw-bar{fill:color-mix(in srgb,var(--teal) 30%,transparent);transform-box:fill-box;transform-origin:50% 100%}
.tw-bar.is-now{fill:var(--teal)}
.tw-bar.is-zero{fill:var(--line)}
.tw-bar-labels{display:flex;gap:8px;font-size:var(--fs-xs);color:var(--muted);line-height:1.3}
.tw-bar-labels span{flex:1;text-align:center;white-space:nowrap}
.tw-bar-labels .is-now{color:var(--ink);font-weight:700}
.tw-meter-box{display:grid;gap:8px}
.tw-meter{display:flex;gap:2px;height:8px;border-radius:999px;overflow:hidden;background:var(--line);transform-origin:left center}
.tw-seg{flex:var(--w,1) 1 0;min-width:3px}
.tw-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:var(--fs-xs);color:var(--muted)}
.tw-legend li{display:inline-flex;align-items:center;gap:6px}
.tw-legend i{width:8px;height:8px;border-radius:2px}
.tw-legend b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tw-tone-base{background:var(--teal)}
.tw-tone-mid{background:color-mix(in srgb,var(--teal) 62%,white)}
.tw-tone-soft{background:color-mix(in srgb,var(--teal) 38%,white)}
.tw-tone-faint{background:color-mix(in srgb,var(--teal) 20%,white)}
.tw-tone-warn{background:var(--warn)}
.tw-tone-alert{background:var(--danger)}
.tw-tone-alert-strong{background:color-mix(in srgb,var(--danger) 72%,black)}
@keyframes tw-vt-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes tw-vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes tw-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes tw-grow{from{transform:scaleY(0)}}
@keyframes tw-wipe{from{transform:scaleX(0)}}
@keyframes tw-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tw-toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* ホームのダッシュボード（管理：#home-dash、運営：#dash-kpis。大きな見出し＋カードの格子）。カードは置いているだけの面（枠1px）で、押せるカードは載せると少し浮く。 */
.dash{margin:0 0 24px}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin:0 0 14px}
.dash-date{margin:0 0 2px;color:var(--muted);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.dash-title{margin:0;font-size:var(--fs-xl);line-height:1.3}
.dash-summary{margin:0;color:var(--ink-2);font-size:var(--fs-md)}
.bento{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-flow:dense;gap:14px}
.dash-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:188px;padding:16px 18px 18px;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface);box-shadow:var(--e1)}
.dash-card.is-wide{grid-column:span 2}
.dash-card.is-full{grid-column:1/-1}
.dash-card.is-link{cursor:pointer}
.dash-card.is-link:hover{border-color:color-mix(in srgb,var(--focus) 45%,var(--line));box-shadow:var(--e2,var(--shadow));transform:translateY(-2px)}
.dash-card-head{display:flex;align-items:center;gap:10px;min-height:28px}
.dash-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--teal)}
.dash-ic::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic,none) center/16px no-repeat;mask:var(--ic,none) center/16px no-repeat}
.dash-card-title{flex:1;min-width:0;margin:0;font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--ink-2)}
.dash-go{flex:none;min-height:28px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;text-decoration:none}
.dash-go::after{content:" ›"}
.dash-go:hover{background:var(--accent-soft)}
.dash-go:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dash-card-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.dash-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 4px;margin:0;line-height:1.1}
.dash-value{font-size:var(--fs-3xl);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.dash-num small{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.dash-sub{margin:0;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.dash-chart{margin-top:auto;padding-top:4px}
.dash-card.is-alert .dash-value{color:var(--danger)}
.dash-card.is-warn .dash-ic{background:var(--warn-soft);color:var(--warn)}
.dash-card.is-alert .dash-ic{background:color-mix(in srgb,var(--danger) 10%,white);color:var(--danger)}
.dash-card.is-good .dash-ic{background:var(--go-soft);color:var(--go)}
.dash-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dash-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:var(--fs-xs);color:var(--ink-2)}
.dash-chip b{font-variant-numeric:tabular-nums}
.dash-chip.is-warn{border-color:transparent;background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 80%,black)}
.dash-chip.is-alert{border-color:transparent;background:color-mix(in srgb,var(--danger) 10%,white);color:var(--danger)}
.dash-skel{display:grid;gap:10px;padding-top:4px}
.dash-skel span{display:block;height:10px;border-radius:6px;background:var(--skeleton)}
.dash-skel span:first-child{width:44%;height:26px}
.dash-skel span:nth-child(2){width:72%}
.dash-skel span:nth-child(3){height:44px;margin-top:6px}
.dash-empty,.dash-error{display:grid;justify-items:start;gap:4px;margin-top:auto;padding-top:12px}
.dash-empty::before,.dash-error::before{content:"";width:22px;height:22px;margin-bottom:4px;background:var(--muted);opacity:.7;-webkit-mask:var(--ic,none) center/22px no-repeat;mask:var(--ic,none) center/22px no-repeat}
.dash-card.is-good .dash-empty::before{background:var(--go);opacity:1}
.dash-error::before{background:var(--danger);opacity:1}
.dash-empty p,.dash-error p{margin:0;font-weight:600;color:var(--ink-2)}
.dash-empty small,.dash-error small{color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
@media(max-width:720px){.bento{grid-template-columns:minmax(0,1fr);gap:10px}.dash-card.is-wide,.dash-card.is-full{grid-column:auto}.dash-card{min-height:0}}