/* design/tokens-b.css の確定値をそのまま使用。 */
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --ink: #171412;
  --ink-sub: #5f5952;
  --line: #171412;
  --primary: #171412;
  --on-primary: #ffffff;
  --ok: #3f6a4b;
  --ok-bg: #e2ebe0;
  --caution: #a2472f;
  --caution-bg: #f3e1d8;
  --closed-bg: #e4e1db;
  --focus: #171412;
  --icon-bg: #eeebe5;
  --nav-bg: #ffffff;
  --font-number: 32px;
  --font-heading: 20px;
  --font-body: 16px;
  --font-sub: 14px;
  --font-min: 12px;
  --weight-body: 400;
  --weight-bold: 700;
  --weight-number: 800;
  --leading-body: 1.6;
  --leading-heading: 1.3;
  --tracking-label: .12em;
  --tracking-number: -.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-s: 8px;
  --radius-l: 16px;
  --tap: 44px;
  --button-height: 52px;
  --row-height: 56px;
  --bar-height: 64px;
  --tile-size: 64px;
  --icon-size: 28px;
  --mark-size: 48px;
  --mark-large: 120px;
  --stroke: 1.8;
  --border-width: 1px;
  --double-width: 4px;
  --card-border: 1px solid var(--line);
  --completion-duration: 640ms;
}

:root { color-scheme: light; --content-width: 480px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: var(--font-body); line-height: var(--leading-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); }
.topbar { min-height: var(--bar-height); padding: var(--space-2) var(--space-4); padding-top: max(var(--space-2), env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--line); }
.brand { text-decoration: none; display: flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-number); letter-spacing: var(--tracking-label); }
.logout { min-height: var(--tap); padding: var(--space-2); border: 0; background: var(--bg); color: var(--ink); font-size: var(--font-sub); text-decoration: underline; text-underline-offset: var(--space-1); }
.app { max-width: var(--content-width); margin: auto; padding: var(--space-8) var(--space-4) max(var(--space-6), env(safe-area-inset-bottom)); min-height: calc(100svh - var(--bar-height)); display: flex; flex-direction: column; align-items: stretch; }
h1 { font-size: var(--font-heading); line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
h2 { font-size: var(--font-heading); line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
#page-message { color: var(--ink-sub); }
.welcome-mark { display: block; width: var(--mark-size); height: var(--mark-size); object-fit: contain; margin: 0 auto var(--space-6); }
/* ロゴ・見出し・説明文は中央に（2026-10-08 柴山さん） */
.app > #page-title, .app > #page-message, #first-visit { text-align: center; }
/* カードが出ていない画面（ログイン前・招待・登録完了前）は、ロゴから説明文までを上下の真ん中に。
   下のボタン（.actions）も margin-top:auto なので、空きが上下に半分ずつ配られる */
.app:not(:has(.card:not([hidden]))) > .welcome-mark:not([hidden]),
.app:not(:has(.card:not([hidden]))) > .welcome-mark[hidden] + #page-title { margin-top: auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-4); margin: var(--space-4) 0; }
.label { display: inline-block; padding: var(--space-1) var(--space-3); margin-bottom: var(--space-4); background: var(--ink); color: var(--on-primary); font-size: var(--font-min); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
.sub-text { font-size: var(--font-sub); color: var(--ink-sub); }
.empty-home p { margin-bottom: 0; }
.install-guide ol { list-style: none; margin: var(--space-6) 0; padding: 0; }
.install-guide li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); margin: var(--space-3) 0; }
.install-guide svg { flex-shrink: 0; width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.actions { position: sticky; bottom: 0; background: var(--bg); margin-top: auto; padding-top: var(--space-4); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); }
.actions > * + * { margin-top: var(--space-3); }
.button { width: 100%; min-height: var(--button-height); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); text-decoration: none; text-align: center; }
.primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); }
.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.text-button { min-height: var(--tap); color: var(--ink); border: 0; background: transparent; text-decoration: underline; text-underline-offset: var(--space-1); }
button:disabled { opacity: .65; cursor: wait; }
.status { font-size: var(--font-sub); color: var(--caution); margin-top: var(--space-4); }
.status:empty { display: none; }
/* カードの無い画面（ログイン前・招待）では、知らせの一文も中央に（2026-10-09） */
.app:not(:has(.card:not([hidden]))) > #status { text-align: center; }

/* ホーム・勤務時間・出勤中で共通の部品。 */
.with-nav .app { padding-bottom: calc(var(--bar-height) + var(--space-8) + env(safe-area-inset-bottom)); }
.home-features { margin: var(--space-4) 0 var(--space-6); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.feature { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2) 0; border: 0; background: transparent; text-align: center; text-decoration: none; font-size: var(--font-min); color: var(--ink); }
.tile { display: grid; place-items: center; width: var(--tile-size); height: var(--tile-size); border-radius: 50%; background: var(--icon-bg); }
.feature svg { width: var(--icon-size); height: var(--icon-size); }
.feature svg, .staff-nav svg { fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.accent-ok { stroke: var(--ok); }
.staff-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; background: var(--nav-bg); border-top: var(--card-border); padding-bottom: env(safe-area-inset-bottom); }
.staff-nav > * { flex: 1; max-width: calc(var(--content-width) / 3); min-height: var(--bar-height); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); color: var(--ink-sub); text-decoration: none; font-size: var(--font-min); border: 0; background: transparent; padding: var(--space-2) var(--space-1); }
.staff-nav svg { width: var(--space-6); height: var(--space-6); }
.staff-nav [aria-current="page"] { color: var(--ink); font-weight: var(--weight-bold); }
.staff-menu { width: min(calc(100% - var(--space-8)), var(--content-width)); max-height: calc(100svh - var(--space-8)); background: var(--surface); color: var(--ink); border: var(--card-border); border-radius: var(--radius-l); padding: var(--space-6); }
.staff-menu::backdrop { background: var(--ink); opacity: .35; }
.staff-menu button + button { margin-top: var(--space-3); }
.toast { position: fixed; bottom: calc(var(--bar-height) + var(--space-4) + env(safe-area-inset-bottom)); left: var(--space-4); right: var(--space-4); z-index: 20; width: fit-content; max-width: calc(100% - var(--space-8)); margin: auto; padding: var(--space-3) var(--space-6); background: var(--ink); color: var(--on-primary); border-radius: var(--radius-s); }
.back-link { min-height: var(--tap); display: flex; align-items: center; text-decoration: none; }
.report-app > #page-title { text-align: left; }
.report-app > #page-message { text-align: left; }
.report-app > .button { margin-bottom: var(--space-4); }
.month-controls { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; }
.month-controls h2 { text-align: center; margin: 0; font-size: var(--font-body); }
.month-controls button { min-height: var(--tap); padding: var(--space-2); border: var(--card-border); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--font-sub); }
.month-controls button:disabled { cursor: default; }
.hours-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-2); }
.hours-summary p { margin: 0; }
.duration { display: flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; }
.duration strong { font-size: var(--font-number); font-weight: var(--weight-number); letter-spacing: var(--tracking-number); }
.duration small { font-size: var(--font-sub); margin-right: var(--space-1); }
.worked-days { font-size: var(--font-sub); }
.summary-note { margin-bottom: 0; }
.report-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); background: var(--surface); border: var(--card-border); border-radius: var(--radius-l); }
.report-list:empty { display: none; }
.report-row { min-height: var(--row-height); padding: var(--space-4); }
.report-row + .report-row { border-top: var(--card-border); }
.report-row p { margin: var(--space-1) 0 0; }
.row-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.row-duration { font-weight: var(--weight-bold); }
.chip { display: inline-block; font-size: var(--font-min); padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); }
.ok-chip { color: var(--ok); background: var(--ok-bg); }
.caution-chip { color: var(--caution); background: var(--caution-bg); }
.flag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.report-row .correction-note { margin-top: var(--space-2); }
.empty-state { text-align: center; padding: var(--space-6) var(--space-4); }
.empty-state img { display: block; width: var(--mark-size); height: var(--mark-size); margin: 0 auto var(--space-4); }
.empty-state p { margin: 0; }
.off-count { padding-top: var(--space-4); border-top: var(--card-border); }

/* T004: 案Bのモックと共通の寸法・並び。 */
.topbar { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); padding: 0 var(--space-2); min-height: var(--bar-height); }
.brand { grid-column: 2; grid-row: 1; justify-content: center; gap: var(--space-2); }
.brand img { width: var(--mark-size); height: var(--mark-size); }
.back-link { grid-column: 1; grid-row: 1; font-size: var(--font-sub); white-space: nowrap; }
.with-nav[data-screen="home"] .app { padding-top: var(--space-2); }
.with-nav[data-screen="home"] #page-title { text-align: left; margin: var(--space-3) 0 var(--space-1); }
.with-nav[data-screen="home"] #page-message { text-align: left; font-size: var(--font-sub); margin-bottom: var(--space-6); }
.with-nav[data-screen="home"] .actions:has(> :not([hidden])) { margin-top: var(--space-4); }
.with-nav[data-screen="home"] .actions:not(:has(> :not([hidden]))) { display: none; }
.with-nav[data-screen="home"] .welcome-mark { display: none; }
.home-features { margin: 0; }
.card { margin: 0 0 var(--space-4); }
.card.next { border: var(--double-width) double var(--line); }
.card.next p:last-child { margin-bottom: 0; }
.label { padding: var(--space-1) var(--space-2); margin-bottom: var(--space-2); line-height: var(--leading-body); }
.section-label { margin-top: var(--space-2); }
.feature-grid { gap: var(--space-6) var(--space-1); margin: var(--space-8) 0 var(--space-6); }
.feature { padding: 0; font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.list { background: var(--surface); border: var(--card-border); border-radius: var(--radius-l); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--row-height); padding: var(--space-2) var(--space-3); text-decoration: none; }
.list-row + .list-row { border-top: var(--card-border); }
.grow { flex: 1; }
.hours-row { flex-wrap: wrap; }
.chev { color: var(--ink-sub); font-size: var(--font-heading); }
.updated { text-align: right; margin: var(--space-2) 0; }
.install-hint { margin: var(--space-6) 0 0; font-size: var(--font-min); }
.install-hint .text-button { font-size: var(--font-sub); padding: 0 var(--space-2); }
.report-app { padding-top: var(--space-6); }
.month-controls { margin-bottom: var(--space-4); }
.report-row { padding: var(--space-2) var(--space-3); }
.row-heading { align-items: center; }
.row-heading strong { flex: 1; }
.report-row .row-duration { margin-left: auto; }
[data-screen="working"] .report-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
[data-screen="working"] .report-row .row-heading { width: 100%; }
[data-screen="working"] .report-row > p { margin: 0 0 0 auto; }
.report-app .hours-summary { margin: 0 0 var(--space-2); }
.report-app .empty-state img { width: var(--mark-large); height: var(--mark-large); }
body:not(.with-nav):not([data-screen="hours"]):not([data-screen="working"]) .welcome-mark { width: var(--mark-large); height: var(--mark-large); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-screen="home"]:not(.with-nav) .app > .welcome-mark { margin-top: auto; }

/* T005: 2階層目の上のバー（＜＋画面の名前）・月の切り替え・行の左のアイコン。
   動的な行のアイコンは CSS の mask で描く（色は :root の変数だけ。行の中の並びは JS とテストのまま）。 */
:root {
  --row-icon: 40px;
  --row-glyph: 22px;
  --dot: 8px;
  --mask-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M7 3v4M17 3v4M7 14h2M11 14h2M7 18h2'/%3E%3C/svg%3E");
  --mask-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1'/%3E%3C/svg%3E");
  --mask-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9zM16 11h2a3 3 0 0 1 0 6h-2M8 3v3M12 3v3'/%3E%3C/svg%3E");
}
.sub-bar { grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); }
.sub-bar .back-link { justify-content: center; width: var(--tap); }
.sub-bar svg, .month-controls svg, .row-icon svg, .card-icon { fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.sub-bar svg { width: var(--icon-size); height: var(--icon-size); }
.bar-title { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-size: var(--font-body); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
.sub-bar + .report-app { padding-top: var(--space-4); }
.month-controls { grid-template-columns: var(--tap) auto var(--tap); justify-content: center; gap: var(--space-4); }
.month-controls h2 { font-size: var(--font-heading); }
.month-controls button { display: grid; place-items: center; width: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; }
.month-controls svg { width: var(--row-glyph); height: var(--row-glyph); }
.month-controls button:disabled { opacity: .3; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.card-icon { width: var(--space-6); height: var(--space-6); }
.accent-caution { stroke: var(--caution); }
/* ホームの「今月の勤務」の行（HTMLにインラインSVG） */
.row-icon { display: grid; place-items: center; flex-shrink: 0; width: var(--row-icon); height: var(--row-icon); border-radius: 50%; background: var(--icon-bg); }
.row-icon svg { width: var(--row-glyph); height: var(--row-glyph); }
.list-row { gap: var(--space-3); }
/* 勤務時間・出勤中の行（JSが作る行。左に丸い台＋アイコン、右上に状態の点） */
.icon-row { position: relative; padding-left: calc(var(--space-3) * 2 + var(--row-icon)); }
.icon-row::before, .icon-row::after { content: ""; position: absolute; left: var(--space-3); top: var(--space-2); width: var(--row-icon); height: var(--row-icon); }
.icon-row::before { --tile: radial-gradient(circle, var(--icon-bg) calc(var(--row-icon) / 2), transparent calc(var(--row-icon) / 2 + .5px)); background: var(--tile); }
.icon-row::after { background: var(--ink); -webkit-mask: var(--glyph) center / var(--row-glyph) no-repeat; mask: var(--glyph) center / var(--row-glyph) no-repeat; }
.day-row { --glyph: var(--mask-calendar); }
.person-row { --glyph: var(--mask-person); }
.person-row.is-break { --glyph: var(--mask-cup); }
.person-row.is-done::after { background: var(--ink-sub); }
/* 点は台の右上の縁に重ねる（台は丸く切らず、グラデーションで丸を描く） */
.is-ok::before, .is-caution::before { background: radial-gradient(circle at calc(100% - var(--dot) * .6) calc(var(--dot) * .6), var(--dot-color) calc(var(--dot) / 2 + 1px), transparent calc(var(--dot) / 2 + 1.5px)), var(--tile); }
.is-ok { --dot-color: var(--ok); }
.is-caution { --dot-color: var(--caution); }

/* シフト希望 /request（モック design/mocks/b-shift.html・b-done.html の寸法のまま）。
   モックと同じく下のナビは出さず、「出す」ボタンを下に固定する */
body[data-screen="request"] .staff-nav { display: none; }
body[data-screen="request"].with-nav .app { padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.request-head { margin: var(--space-1) 0 var(--space-2); }
.request-head .chip:empty { display: none; }
.request-state { font-size: var(--font-sub); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }
.request-state.is-ok { color: var(--ok); }
.request-state.is-caution { color: var(--caution); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 var(--space-4); }
.legend .chip { font-weight: var(--weight-bold); }
.can-chip { color: var(--ok); background: var(--ok-bg); }
.off-chip { color: var(--caution); background: var(--caution-bg); }
.either-chip { color: var(--ink); background: var(--icon-bg); }
.closed-chip { color: var(--ink-sub); background: var(--closed-bg); }
.cal { background: var(--surface); border: var(--card-border); border-radius: var(--radius-l); padding: var(--space-3) var(--space-2); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { text-align: center; font-size: var(--font-min); color: var(--ink-sub); font-weight: var(--weight-bold); padding-bottom: var(--space-2); }
.cal-head div:first-child { color: var(--caution); }
.cal-grid { row-gap: var(--space-1); column-gap: 2px; }
.cal-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); width: 100%; height: var(--button-height); margin: 0; padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink); font-size: var(--font-body); line-height: 1; }
.cal-grid button .mk { font-size: var(--font-min); font-weight: var(--weight-bold); min-height: var(--font-min); }
.cal-grid button.can { background: var(--ok-bg); color: var(--ok); }
.cal-grid button.off { background: var(--caution-bg); color: var(--caution); }
.cal-grid button.either { background: var(--icon-bg); color: var(--ink); }
.cal-grid button.closed, .cal-grid button.closed:disabled { background: var(--closed-bg); color: var(--ink-sub); opacity: 1; cursor: default; }
.cal-grid button.sel { outline: 2px solid var(--focus); outline-offset: -2px; }
.request-day { margin-top: var(--space-4); }
.day-title { margin: 0; font-size: var(--font-heading); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.seg button { height: var(--button-height); border: 1px solid var(--ink); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--font-sub); font-weight: var(--weight-bold); }
.seg button.on[data-choice="can"] { background: var(--ok); border-color: var(--ok); color: var(--on-primary); }
.seg button.on[data-choice="off"] { background: var(--caution); border-color: var(--caution); color: var(--on-primary); }
.seg button.on[data-choice="either"] { background: var(--ink); color: var(--on-primary); }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.times button { height: var(--bar-height); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink-sub); font-size: var(--font-body); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.times button small { display: block; font-weight: var(--weight-body); font-size: var(--font-min); }
.times button.on { color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.request-clear, .request-next { display: block; width: 100%; margin: var(--space-2) auto 0; font-size: var(--font-sub); text-align: center; }
#request-locked { margin: var(--space-3) 0 0; }
.request-actions { margin-top: var(--space-4); }
.request-actions .status { text-align: center; margin: 0 0 var(--space-2); }
.request-actions .text-button { width: 100%; }
/* 出したあと */
.request-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) 0 0; min-height: calc(100svh - var(--bar-height) - var(--space-8)); }
.mark-frame { position: relative; border: var(--double-width) double var(--line); border-radius: var(--radius-l); padding: var(--space-4); margin-bottom: var(--space-8); }
.mark-frame img { display: block; width: var(--mark-large); height: var(--mark-large); }
.done-check { position: absolute; right: calc(var(--space-3) * -1); bottom: calc(var(--space-3) * -1); display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--ok); border-radius: var(--radius-s); background: var(--ok-bg); }
.done-check svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: var(--ok); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.request-done h2 { white-space: pre-line; font-size: var(--font-heading); line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
.done-list { width: 100%; margin: var(--space-6) 0 var(--space-4); text-align: left; }
.request-done > .text-button { font-weight: var(--weight-bold); }
.request-done .actions { width: 100%; }
#done-title:focus { outline: none; }
/* ホームのシフト希望のカード（モック b-home の「11月のシフト希望」）と、機能アイコンの「あと◯日」の吹き出し */
.request-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; text-decoration: none; color: var(--ink); }
.request-card-text { display: flex; flex-direction: column; align-items: flex-start; }
.request-card strong { font-size: var(--font-body); }
.request-card .chip { font-weight: var(--weight-bold); }
.tile { position: relative; }
.bubble { position: absolute; top: calc(var(--space-3) * -1); left: 50%; transform: translateX(-50%); padding: 0 var(--space-2); border-radius: var(--radius-s); background: var(--caution); color: var(--on-primary); font-size: var(--font-min); font-weight: var(--weight-bold); line-height: var(--leading-body); white-space: nowrap; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--space-1) * -1); transform: translateX(-50%); border: var(--space-1) solid transparent; border-bottom: 0; border-top-color: var(--caution); }
.cal-title { margin: 0 0 var(--space-3); text-align: center; font-size: var(--font-heading); }
/* 締切は目立つ枠に。入れた日の数はカレンダーの中の1行（色の見本を兼ねる） */
.deadline-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-1) 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--double-width) double var(--line); border-radius: var(--radius-l); }
.deadline-text { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.deadline-text .label { margin: 0; }
.deadline-text strong { font-size: var(--font-heading); line-height: var(--leading-heading); }
.deadline-card .chip { font-size: var(--font-sub); font-weight: var(--weight-bold); padding: var(--space-1) var(--space-3); white-space: nowrap; }
.cal .legend { justify-content: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); }
.key { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-min); color: var(--ink-sub); }
.key::before { content: ""; width: var(--space-3); height: var(--space-3); border-radius: 3px; background: var(--icon-bg); }
.key.can::before { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); }
.key.off::before { background: var(--caution-bg); box-shadow: inset 0 0 0 1px var(--caution); }
.key.either::before { background: var(--icon-bg); box-shadow: inset 0 0 0 1px var(--ink-sub); }
.key.closed::before { background: var(--closed-bg); }
/* 出勤スタンプ: 出勤した日の数だけウリボーのマーク。時間の合計の代わり（2026-10-09） */
.stamp-row { display: block; padding: var(--space-3); text-decoration: none; color: var(--ink); }
.stamp-row + .list-row { border-top: var(--card-border); }
.stamp-head { display: flex; align-items: center; gap: var(--space-2); }
.stamp-count { display: flex; align-items: baseline; gap: 2px; }
.stamp-count span { font-size: var(--font-number); font-weight: var(--weight-number); letter-spacing: var(--tracking-number); line-height: 1; }
.stamp-count small { font-size: var(--font-sub); }
.stamps { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; }
.stamps:empty { display: none; }
.stamps img { width: var(--space-6); height: var(--space-6); }
.stamp-total { display: flex; align-items: baseline; gap: var(--space-1); margin: var(--space-2) 0 0; font-size: var(--font-sub); }
.stamp-total strong { font-size: var(--font-number); font-weight: var(--weight-number); letter-spacing: var(--tracking-number); line-height: 1; }
.stamp-total small { font-size: var(--font-sub); }
/* 出勤スタンプカード: 上に「大きいウリボー × ◯日」、下に10マス（2026-10-09 柴山さん: B＋C） */
.stamp-card { display: block; padding: var(--space-3) var(--space-4) var(--space-4); text-decoration: none; color: var(--ink); }
.stamp-card + .list-row { border-top: var(--card-border); }
.stamp-top { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.stamp-big { width: var(--mark-size); height: var(--mark-size); }
.stamp-times { display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--font-heading); font-weight: var(--weight-bold); }
.stamp-times span { font-size: var(--font-number); font-weight: var(--weight-number); letter-spacing: var(--tracking-number); line-height: 1; }
.stamp-times small { font-size: var(--font-sub); }
.stamp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); max-width: 300px; margin: var(--space-3) auto 0; }
.stamp-grid .slot { aspect-ratio: 1; display: grid; place-items: center; border: 1.5px dashed var(--ink-sub); border-radius: 50%; color: var(--ink-sub); font-size: var(--font-min); }
.stamp-grid .slot.on { border: 1.5px solid var(--ink); background: var(--icon-bg); }
.stamp-grid .slot img { width: 70%; height: 70%; }
.stamp-goal { display: block; margin: var(--space-3) 0 0; text-align: center; font-size: var(--font-sub); color: var(--ink-sub); }
.stamp-goal:empty { display: none; }
/* ホームの「すべて ›」と、すべての機能の画面（グループごとに黒帯の見出し・4列。design-brief の機能一覧） */
.feature-head { display: flex; align-items: center; justify-content: space-between; margin: var(--space-6) 0 0; }
.feature-head .label { margin: 0; }
.feature-head + .feature-grid { margin-top: var(--space-4); }
.all-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-1); font-size: var(--font-sub); font-weight: var(--weight-bold); text-decoration: none; color: var(--ink); }
.feature-group + .feature-group { margin-top: var(--space-2); }
.feature-group .feature-grid { margin: var(--space-6) 0; }
.group-label { display: block; margin: 0; }
.feature.is-soon { color: var(--ink-sub); cursor: default; }
.feature.is-soon svg { opacity: .45; }
.bubble.soon { background: var(--ink-sub); }
.bubble.soon::after { border-top-color: var(--ink-sub); }
/* シフト希望を iPhone の Safari の見える高さ（393×660 前後）に収める（2026-10-09 実機で下が切れた）。
   押す所は 44px 以上のまま、余白と並べ方で詰める */
.request-app { padding-top: var(--space-3); }
.deadline-card { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); }
.deadline-text { gap: var(--space-2); }
.deadline-text strong { font-size: var(--font-body); }
.request-state { margin: 0 0 var(--space-2); font-size: var(--font-min); }
.cal { padding: var(--space-2); }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 var(--space-1) var(--space-2); }
.cal-top .cal-title { margin: 0; font-size: var(--font-body); text-align: left; white-space: nowrap; }
.cal .legend { margin: 0; justify-content: flex-end; gap: var(--space-1) var(--space-2); }
.cal-head div { padding-bottom: var(--space-1); }
.cal-grid { row-gap: 2px; }
.cal-grid button { height: var(--tap); gap: 2px; }
.cal-grid button .mk { font-size: 10px; min-height: 10px; }
.request-day { margin-top: var(--space-3); }
.day-title { font-size: var(--font-body); }
.request-day .request-clear { width: auto; margin: 0; min-height: var(--tap); padding: 0; }
.seg { margin: var(--space-2) 0; }
.seg button { height: var(--tap); }
.times button { height: var(--tap); display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.times button small { display: inline; }
.request-actions { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); }
.request-actions > * + * { margin-top: 0; }
.request-actions .status { grid-column: 1 / -1; }
.request-actions .button { min-height: var(--tap); }
.request-actions:has(#request-save[hidden]) #request-submit { grid-column: 1 / -1; }
/* ホームも見える高さに寄せる: まだ中身の無い「次の出勤」は低く。スタンプカードは5×2の大きさのまま（柴山さん） */
.stamp-card { padding: var(--space-3); }
.stamp-goal { margin-top: var(--space-2); font-size: var(--font-min); }
.card.next:has(> p.sub-text:only-of-type) { padding: var(--space-3) var(--space-4); }
.card.next .label + .sub-text { margin: 0; }
.with-nav[data-screen="home"] #page-message { margin-bottom: var(--space-4); }
.home-features .card { margin-bottom: var(--space-3); }
.feature-head { margin-top: var(--space-4); }
.feature-head + .feature-grid { margin: var(--space-4) 0 var(--space-4); }
.stamp-top .stamp-goal { margin: 0; max-width: 9em; text-align: right; line-height: var(--leading-heading); }
/* ホームのシフト希望のカード: 1行目＝見出しと状態、2行目＝何をすればいいか＋押せる印（2026-10-09 分かりにくいと言われて） */
.request-card { display: block; padding: var(--space-3) var(--space-4); }
.request-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.request-card-top .label { margin: 0; }
.request-card-action { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.request-card-action strong { flex: 1; font-size: var(--font-body); }
/* シフト希望を出す前の確認（下から出る。一覧が長いときは中だけスクロール） */
.confirm-sheet { width: min(100%, var(--content-width)); max-width: 100%; max-height: calc(100svh - var(--space-6)); margin: auto auto 0; padding: var(--space-4) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)); border: var(--card-border); border-bottom: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--surface); color: var(--ink); }
.confirm-sheet[open] { display: flex; flex-direction: column; }
.confirm-sheet::backdrop { background: var(--ink); opacity: .4; }
.confirm-sheet h2 { margin: 0 0 var(--space-1); font-size: var(--font-heading); }
.confirm-sheet > .sub-text { margin: 0 0 var(--space-3); }
.confirm-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; border-top: var(--card-border); border-bottom: var(--card-border); }
.confirm-row { display: grid; grid-template-columns: 9em auto 1fr; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-1) 0; }
.confirm-row + .confirm-row { border-top: 1px solid var(--closed-bg); }
.confirm-date { font-weight: var(--weight-bold); font-size: var(--font-sub); }
.confirm-slots { font-size: var(--font-sub); color: var(--ink-sub); }
.confirm-row .chip { font-weight: var(--weight-bold); justify-self: start; }
.confirm-blank { margin: var(--space-2) 0 0; color: var(--caution); font-weight: var(--weight-bold); }
.confirm-blank:empty { display: none; }
.confirm-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); margin-top: var(--space-4); }
/* アプリとして使うので拡大させない: ダブルタップの拡大を止める（2026-10-09） */
html { touch-action: manipulation; }
/* 出した後の案内（ボタンの代わり） */
.request-submitted { grid-column: 1 / -1; display: flex; align-items: center; min-height: var(--tap); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--ok-bg); color: var(--ok); font-size: var(--font-sub); font-weight: var(--weight-bold); }
/* シフト希望（2026-10-09 作り直し）: 主は「出られる」1つ。時間の希望は押さなくてもよいサブの選択肢として小さく */
.can-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: var(--tap); margin: var(--space-2) 0; border: 1px solid var(--ink); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--font-body); font-weight: var(--weight-bold); }
.can-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.can-toggle.on { background: var(--ok); border-color: var(--ok); color: var(--on-primary); }
.can-toggle.on svg { opacity: 1; }
.time-pref-label { margin: 0 0 var(--space-1); font-size: var(--font-min); font-weight: var(--weight-bold); color: var(--ink-sub); }
.time-pref-label small { font-weight: var(--weight-body); }
.time-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.time-chips button { display: inline-flex; align-items: baseline; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--closed-bg); border-radius: 999px; background: var(--surface); color: var(--ink-sub); font-size: var(--font-sub); }
.time-chips button small { font-size: 10px; }
.time-chips button.on { border-color: var(--ink); background: var(--icon-bg); color: var(--ink); font-weight: var(--weight-bold); }
.custom-time { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.custom-time select { flex: 1; min-height: var(--tap); padding: 0 var(--space-2); border: 1px solid var(--ink); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--font-body); }
/* 日付の右に「出られる」。時間の希望は4等分の1行（2026-10-09 見える高さに収める） */
.day-row .can-toggle { width: auto; min-width: 9em; margin: 0; padding: 0 var(--space-4); }
.day-hint { margin: var(--space-2) 0 0; font-size: var(--font-min); }
.time-pref { margin-top: var(--space-2); }
.time-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.time-chips button { flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: var(--tap); padding: 2px var(--space-1); border-radius: var(--radius-s); font-size: var(--font-min); line-height: 1.3; }
/* 1つの枠に「出られる」（主）と時間の希望4つ（サブ）。出られるを選ぶまでサブは薄く（2026-10-09） */
.choice-box { margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--closed-bg); border-radius: var(--radius-l); background: var(--surface); }
.choice-box .can-toggle { width: 100%; margin: 0; }
.choice-box .time-pref { margin-top: var(--space-2); }
.choice-box.is-off .time-pref { opacity: .5; }
.day-row .day-hint { margin: 0; }
/* 時間指定を選んでいる間は「なくてもOK」の説明を隠して、時刻の欄の場所をつくる */
.choice-box:has(#request-custom:not([hidden])) .time-pref-label { display: none; }
.deadline-card { padding: var(--space-1) var(--space-3); }
/* シフト管理（見る） */
.manage-app { padding-top: var(--space-2); }
.manage-app .month-controls { margin-bottom: 0; }
.manage-deadline { margin: 0 0 var(--space-2); text-align: center; font-size: var(--font-min); }
.status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-2); }
.status-pill { display: flex; align-items: baseline; justify-content: center; gap: var(--space-1); min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--font-sub); }
.status-pill strong { font-size: var(--font-heading); font-weight: var(--weight-number); }
.status-pill.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.status-pill.caution { border-color: var(--caution); color: var(--caution); background: var(--caution-bg); }
.manage-grid button.can { background: var(--ok-bg); color: var(--ok); }
.manage-grid button.can.many { background: var(--ok); color: var(--on-primary); }
.small-button { width: auto; min-height: var(--tap); padding: 0 var(--space-3); font-size: var(--font-sub); }
.manage-list { margin-top: var(--space-2); }
.confirm-actions.single { grid-template-columns: 1fr; }
.people-row { grid-template-columns: 1fr auto; }
/* シフト管理（組む・公開）。見本は design/mocks/manage-flow.html */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); list-style: none; margin: var(--space-2) 0; padding: 0; }
.steps li { padding: 6px 2px; border-radius: var(--radius-s); background: var(--icon-bg); color: var(--ink-sub); font-size: var(--font-min); font-weight: var(--weight-bold); text-align: center; }
.steps li.done { background: var(--ok-bg); color: var(--ok); }
.steps li.now { background: var(--ink); color: var(--on-primary); }
.seg-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-2); border: 1px solid var(--ink); border-radius: var(--radius-s); overflow: hidden; }
.seg-views button { min-height: 40px; border: 0; background: var(--surface); color: var(--ink); font-size: var(--font-min); font-weight: var(--weight-bold); }
.seg-views button + button { border-left: 1px solid var(--ink); }
.seg-views button.on { background: var(--ink); color: var(--on-primary); }
.week-nav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-2); }
.week-nav strong { font-size: var(--font-sub); }
.week-nav button { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; background: transparent; color: var(--ink); }
.week-nav button:disabled { opacity: .3; }
.week-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: 11px; color: var(--ink-sub); }
.plan-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.pill { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 4px; border-radius: 6px; font-size: 11px; font-style: normal; font-weight: var(--weight-bold); line-height: 1; white-space: nowrap; }
.pill.fix-early { background: var(--ok); color: var(--on-primary); }
.pill.fix-late { background: var(--ink); color: var(--on-primary); }
.pill.fix-custom { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.pill.wish { color: var(--ink-sub); box-shadow: inset 0 0 0 1px var(--ink-sub); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--icon-bg) 4px 8px); }
.pill.lack { background: var(--caution-bg); color: var(--caution); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.zero { background: var(--caution); color: var(--on-primary); }
/* 表: 縦に人、横に7日 */
.plan-table { display: grid; grid-template-columns: 60px repeat(7, minmax(0, 1fr)); border: var(--card-border); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); }
.plan-table > * { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--closed-bg); border-left: 1px solid var(--closed-bg); background: transparent; color: var(--ink); font: inherit; font-size: 11px; }
.plan-table .h { min-height: 36px; border-top: 0; background: var(--bg); font-weight: var(--weight-bold); line-height: 1.1; }
.plan-table .h.red { color: var(--caution); }
.plan-table .h.is-today { box-shadow: inset 0 -3px 0 var(--ink); }
.plan-table .n { align-items: flex-start; padding: 0 2px 0 6px; border-left: 0; font-size: 11px; font-weight: var(--weight-bold); line-height: 1.15; overflow: hidden; word-break: break-all; text-align: left; }
.plan-table .pill { width: 92%; padding: 0 1px; }
.plan-table button.sel { outline: 2px solid var(--ink); outline-offset: -2px; }
.plan-table button.past { background: var(--bg); opacity: .5; }
.plan-table .closed, .plan-table .out { background: var(--closed-bg); color: var(--ink-sub); }
.plan-table .sum { background: var(--bg); }
.plan-table .sum .pill { height: 16px; font-size: 10px; }
/* 時間軸（1日） */
.time-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-2); }
.time-days button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--tap); border: 1px solid var(--closed-bg); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: var(--weight-bold); line-height: 1.2; }
.time-days button.closed { background: var(--closed-bg); color: var(--ink-sub); }
.time-days button.on { border-color: var(--ink); background: var(--ink); color: var(--on-primary); }
.time-days button.short::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--caution); }
.timeline { border: var(--card-border); border-radius: var(--radius-l); background: var(--surface); padding: var(--space-2) var(--space-2) var(--space-1); }
.timeline .axis, .timeline .cover, .timeline .tl-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; }
.timeline .axis { font-size: 10px; color: var(--ink-sub); }
.timeline .ticks { position: relative; height: 14px; }
.timeline .ticks span { position: absolute; transform: translateX(-50%); }
.timeline .cover { margin-bottom: var(--space-1); }
.timeline .cells { display: grid; grid-template-columns: repeat(13, 1fr); gap: 1px; }
.timeline .cells span { height: 18px; border-radius: 3px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); font-size: 10px; font-weight: var(--weight-bold); }
.timeline .cells span.zero { background: var(--caution); color: var(--on-primary); }
.timeline .cells span.out { background: transparent; }
.timeline .nm { overflow: hidden; padding-right: 2px; font-size: 11px; font-weight: var(--weight-bold); line-height: 1.15; text-align: left; word-break: break-all; }
.timeline .tl-row { width: 100%; min-height: var(--tap); padding: 0; border: 0; border-top: 1px solid var(--closed-bg); background: transparent; color: var(--ink); font: inherit; }
.timeline .tl-row:disabled { opacity: .5; }
.timeline .track { position: relative; display: block; height: 26px; }
.timeline .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--closed-bg) 1px, transparent 1px); background-size: calc(100% / 13) 100%; pointer-events: none; }
.timeline .w, .timeline .f { position: absolute; top: 3px; height: 20px; display: flex; align-items: center; padding-left: 4px; overflow: hidden; border-radius: 6px; font-size: 10px; font-weight: var(--weight-bold); white-space: nowrap; }
.timeline .w { color: var(--ink-sub); box-shadow: inset 0 0 0 1px var(--ink-sub); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--icon-bg) 4px 8px); }
.timeline .f { background: var(--ok); color: var(--on-primary); }
.timeline .f.late { background: var(--ink); }
.timeline .f.custom { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.timeline .none { position: absolute; left: 4px; top: 0; line-height: 26px; font-size: 11px; color: var(--ink-sub); }
.timeline-empty { margin: var(--space-3) 0; text-align: center; }
.timeline-hint { margin: var(--space-2) 0 0; font-size: var(--font-min); }
.plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.plan-actions .button { min-height: var(--tap); padding: 0 var(--space-2); font-size: var(--font-sub); }
.plan-state { margin: var(--space-2) 0 0; font-size: var(--font-min); text-align: center; }
/* 1マスを決めるシート */
.plan-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.plan-opts button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--closed-bg); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--font-sub); font-weight: var(--weight-bold); line-height: 1.2; }
.plan-opts button small { font-size: 10px; font-weight: var(--weight-body); }
.plan-opts button.on { border-color: var(--ok); background: var(--ok); color: var(--on-primary); }
.plan-opts button[data-kind="none"].on { border-color: var(--ink); background: var(--ink); }
/* 公開の確認 */
.sheet-warn, .sheet-ok { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); font-size: 13px; font-weight: var(--weight-bold); }
.sheet-warn { background: var(--caution-bg); color: var(--caution); }
.sheet-ok { margin-top: var(--space-2); background: var(--ok-bg); color: var(--ok); }
#publish-sheet > .sub-text { margin: 0 0 var(--space-1); }
#publish-sheet .publish-days-label { margin-top: var(--space-2); }
#publish-list, #publish-days { max-height: 28svh; }
.publish-row { grid-template-columns: 5.5em 1fr auto; }
.publish-row .publish-what { grid-column: 1 / -1; margin-top: -6px; }
/* ホームの「次の出勤」（公開されたシフト） */
.next-date { margin: var(--space-1) 0 0; font-size: 26px; font-weight: var(--weight-number); line-height: var(--leading-heading); }
.next-date small { font-size: var(--font-sub); }
.next-time { font-size: 18px; }
.next-more { margin: var(--space-2) 0 0; font-size: var(--font-min); }
.confirm-list:focus:not(:focus-visible) { outline: none; }
.undo-button { display: block; margin: var(--space-2) auto 0; font-size: var(--font-sub); }

/* シフト表（自分のシフト。2026-10-13） */
.shifts-summary .summary-days { margin: var(--space-1) 0 0; font-size: var(--font-number); font-weight: var(--weight-number); line-height: 1.1; letter-spacing: var(--tracking-number); }
.shifts-summary .summary-days small { margin-left: 2px; font-size: var(--font-sub); }
.shifts-summary .sub-text { margin: var(--space-1) 0 0; }
.shift-list { margin-top: var(--space-3); overflow: hidden; } /* 今日の行の色が、表の角の丸みからはみ出さないように */
.shift-row .row-heading strong { font-size: var(--font-body); }
.shift-line { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0 0; }
.shift-kind { display: inline-block; min-width: 4.5em; padding: 1px var(--space-2); border-radius: 999px; font-size: var(--font-min); font-weight: var(--weight-bold); text-align: center; }
.shift-early .shift-kind { background: var(--ok); color: var(--on-primary); }
.shift-late .shift-kind { background: var(--ink); color: var(--on-primary); }
.shift-custom .shift-kind, .shift-full .shift-kind { box-shadow: inset 0 0 0 2px var(--ink); }
.shift-time { font-size: 20px; font-weight: var(--weight-number); font-variant-numeric: tabular-nums; }
.shift-row.is-past { opacity: .5; }
/* 今日の行は薄い緑の地で示す（2026-10-14 柴山さん「気になる」: 以前の緑の枠は表の外枠と角の丸みが合わず、上の辺で二重に見えた） */
.shift-row.is-today { background: var(--ok-bg); }
.shift-row.is-today .ok-chip { background: var(--surface); }
.next-link { display: inline-block; margin-top: var(--space-2); font-size: var(--font-sub); font-weight: var(--weight-bold); color: var(--ink); }
.next-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.next-foot .next-more { margin: 0; }
.next-foot .next-link { margin: 0; white-space: nowrap; }
/* シフト表の上の「出勤予定」は1行に（2026-10-13 低く） */
.shifts-summary { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0 0; }
.shifts-summary .label { margin: 0; }
.shifts-summary .summary-days { margin: 0; font-size: 24px; }
.shifts-summary .sub-text { margin: 0 0 0 auto; }
.shift-past { margin-top: var(--space-3); }
.shift-past summary { min-height: var(--tap); display: flex; align-items: center; font-size: var(--font-sub); font-weight: var(--weight-bold); color: var(--ink-sub); cursor: pointer; }

/* 打刻の訂正の申請（出勤の記録。2026-10-13） */
.fix-open { min-height: var(--tap); margin-top: var(--space-1); padding: 0; font-size: var(--font-sub); font-weight: var(--weight-bold); }
.fix-other { width: 100%; margin-top: var(--space-4); }
.fix-help { margin: var(--space-2) 0 0; font-size: var(--font-min); }
.fix-request { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--font-sub); }
.fix-request .fix-withdraw { min-height: 36px; padding: 0 var(--space-2); font-size: var(--font-min); }
.fix-sheet .fix-label { display: block; margin: var(--space-3) 0 var(--space-1); font-size: var(--font-sub); font-weight: var(--weight-bold); }
.fix-sheet input[type="time"], .fix-sheet input[type="date"], .fix-sheet input[type="text"] { display: block; width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--ink); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--font-body); }
.fix-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); border-radius: var(--radius-s); overflow: hidden; }
.fix-seg button { min-height: var(--tap); border: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--font-min); font-weight: var(--weight-bold); }
.fix-seg button + button { border-left: 1px solid var(--ink); }
.fix-seg button.on { background: var(--ink); color: var(--on-primary); }
.fix-seg button:disabled { opacity: .4; }
.fix-kinds, .fix-punches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
.fix-kinds button, .fix-punches button { min-height: var(--tap); border: 1px solid var(--closed-bg); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--font-sub); font-weight: var(--weight-bold); }
.fix-kinds button.on, .fix-punches button.on { border-color: var(--ok); background: var(--ok); color: var(--on-primary); }
.fix-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }
.fix-chips button { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--closed-bg); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--font-min); }
.fix-sheet { overflow-y: auto; }
.fix-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--font-sub); }
.fix-check input { width: 22px; height: 22px; }

/* 通知を受け取る（ホームの下。2026-10-13） */
.push-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--closed-bg); border-radius: var(--radius-s); background: var(--surface); font-size: var(--font-sub); }
.push-row .row-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.push-row .small-button { flex: none; }

/* 画面の切り替えをアプリのように（2026-10-13 柴山さん「押すとブラウザのページみたいに画面が出てくるのが気になる」）
   - 画面と画面の間を白く抜かずに、ふわっと入れ替える（iOS 18.2〜の Safari・Chrome。古い端末ではいつもどおり切り替わるだけ）
   - 下のナビは入れ替えずにそのまま残す
   - 「確認しています」の文は、すぐ出てくるときは見せない（0.6秒たっても出ないときだけ出す） */
@view-transition { navigation: auto; }
.staff-nav { view-transition-name: staff-nav; }
::view-transition-group(root) { animation-duration: .16s; }
::view-transition-old(root) { animation: .12s ease-in both uc-fade-out; }
::view-transition-new(root) { animation: .16s ease-out both uc-fade-in; }
@keyframes uc-fade-out { to { opacity: 0; } }
@keyframes uc-fade-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
.sub-bar ~ .app > #page-message { animation: 0s linear .6s backwards uc-wait; }
@keyframes uc-wait { from { visibility: hidden; } }
/* ホームの「次の出勤」を初めて読むあいだの空の枠（中身が入ったときと同じ高さ。2026-10-13） */
.card.next .skeleton { width: 55%; color: transparent; background: var(--icon-bg); border-radius: var(--radius-s); }
.card.next .skeleton.next-time { width: 40%; margin: var(--space-2) 0 0; }
.card.next .skeleton.short { width: 30%; margin: 0; }

/* 起動のロゴ（T007 案A「あいさつ」。2026-10-13 柴山さん。参考＝Duolingo の起動）
   アイコンと同じ白地に黒のウリボーを0.6秒止めて見せる（2026-10-13 柴山さん「動く前にほんの一瞬、静止画として出したい」）→ 2回ぴょこっと跳ねる → 点まで縮む → 真ん中から丸く穴があいてホームが見える（約2.7秒）
   2026-10-13 柴山さん「もう少し滑らかに動かしたい」→ 区切りごとに速さの付け方を変える（沈む→ふわっと上がる→落ちて着地でつぶれる→戻る）、
   つぶれ方・高さを控えめに、跳ねる時間を1.15秒→1.5秒、縮む前にほんの少しふくらむ。iPhoneが先に絵を用意できるよう will-change
   出す・出さないは splash.js（アプリを起こしたときだけ）。ホームはこの裏で先に読み込む。押せばすぐ消える。
   最後は visibility:hidden で必ず消える（JS が止まっても画面をふさがない） */
/* 丸く穴があく所（2026-10-13 柴山さん「コマ送りの感じがある」）:
   以前は画面全体の穴（mask）を毎コマ計算し直していて、ちょうどホームを組み立てている最中なので追いつかずにコマが飛んでいた。
   今は「真ん中に小さな穴のあいた白い板」を1枚だけ用意して、拡大するだけにする（拡大は iPhone が別の仕組みで動かすので、忙しくても滑らか）。
   穴が見え始めるまでは後ろも白（.launch の地）。縮んだロゴが穴の位置に重なるので、ロゴがそのまま穴になって開くように見える */
.launch { display: none; }
.launch-on .launch {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #fff; color: var(--ink);
  animation: launch-clear 0s steps(1) 1.98s both, launch-end .1s linear 2.58s both;
}
.launch::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax;
  background: radial-gradient(circle, transparent 0 38px, #fff 40px);
  will-change: transform; backface-visibility: hidden;
  animation: launch-iris .6s cubic-bezier(.55, 0, .35, 1) 1.98s both;
}
.launch img { position: relative; z-index: 1; width: min(38vw, 160px); height: auto; margin-top: -8vh; will-change: transform; backface-visibility: hidden; animation: launch-hop 1.5s linear .6s both; }
.launch-word { position: absolute; left: 0; right: 0; bottom: max(9%, env(safe-area-inset-bottom)); text-align: center; font-size: 20px; font-weight: var(--weight-number); letter-spacing: .14em; animation: launch-end .25s ease-in 1.75s both; }
.launch-skip .launch { display: none; }
/* 絵が読めて描ける状態になるまで（splash.js が launch-ready を付けるまで）は白いまま・動きは止めておく。読み込み途中の絵を出さない（2026-10-14） */
.launch-on:not(.launch-ready) .launch,
.launch-on:not(.launch-ready) .launch::before,
.launch-on:not(.launch-ready) .launch img,
.launch-on:not(.launch-ready) .launch-word { animation-play-state: paused; }
.launch-on:not(.launch-ready) .launch img,
.launch-on:not(.launch-ready) .launch-word { visibility: hidden; }
/* 区切りごとの速さ（animation-timing-function はその区切りから次の区切りまでに効く） */
@keyframes launch-hop {
  0%   { transform: none;                                   animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  9%   { transform: scale(1.04, .95);                       animation-timing-function: cubic-bezier(.15, .7, .3, 1); }   /* 沈む → 上がる */
  22%  { transform: translateY(-7%) scale(.98, 1.03);       animation-timing-function: cubic-bezier(.55, 0, .85, .35); } /* 頂上 → 落ちる */
  33%  { transform: translateY(0) scale(1.03, .97);         animation-timing-function: cubic-bezier(.2, .6, .35, 1); }   /* 着地でつぶれる → 戻る */
  41%  { transform: none;                                   animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  48%  { transform: scale(1.04, .95);                       animation-timing-function: cubic-bezier(.15, .7, .3, 1); }
  61%  { transform: translateY(-7%) scale(.98, 1.03);       animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
  72%  { transform: translateY(0) scale(1.03, .97);         animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  79%  { transform: none;                                   animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  85%  { transform: scale(1.05);                            animation-timing-function: cubic-bezier(.6, 0, .9, .5); }    /* ほんの少しふくらんでから */
  100% { transform: scale(0); }                                                                                          /* 点まで縮む */
}
@keyframes launch-clear { to { background: transparent; } }
@keyframes launch-iris { to { transform: scale(14); } }   /* 穴 40px → 560px（画面の角まで届く） */
@keyframes launch-end { to { opacity: 0; visibility: hidden; } }
/* 「視差効果を減らす」の人には動かさず、少し見せて消すだけ */
@media (prefers-reduced-motion: reduce) {
  .launch-on .launch { animation: launch-end .3s ease .8s both; }
  .launch img, .launch-word, .launch::before { animation: none; }
}
/* 次の出勤: 最新を確かめられなかったとき（前回の中身を出したまま。2026-10-13） */
.card.next .next-stale { margin: var(--space-2) 0 0; color: var(--caution); font-size: var(--font-min); }