:root {
  --wine: #77363E;
  --wine-dark: #5e2a31;
  --peach: #FFB3AB;
  --warm: #FFF9F7;
  --ink: #2B1B1D;
  --muted: #6B5558;
  --line: #E8D6D3;
  --ok: #2f6b45;
  --err: #77363E;
  --nav-bg: #F2EFEB;
  --nav-text: #493F3D;
  --nav-muted: #736966;
  --nav-active-bg: #EADDD9;
  --nav-active-text: #713D43;
  --nav-line: #DED8D2;
  --nav-hover: #E8E3DE;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--warm);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; line-height: 1.55; font-size: 15px; background: var(--warm); }

.dev-banner { background: var(--peach); color: var(--wine-dark); font-weight: 700; text-align: center; padding: 6px 12px; font-size: 14px; }
.logo { display: block; width: 100%; max-width: 320px; height: auto; }
.center-card { max-width: 420px; margin: 48px auto; padding: 32px 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.center-card h1 { color: var(--wine); font-size: 24px; margin: 12px 0 8px; }
.center-card form { display: grid; gap: 8px; }

label { font-weight: 600; }
input, select { min-height: 44px; font: inherit; padding: 8px 12px; border: 1px solid #BFA6A2; border-radius: 6px; background: #fff; color: inherit; width: 100%; }
[aria-invalid="true"] { border-color: var(--err); }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 2px; }

.btn { min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 600; border-radius: 6px; border: 1px solid var(--wine); background: #fff; color: var(--wine); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.primary { background: var(--wine); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.small { padding: 4px 12px; }
.btn.tab[aria-pressed="true"] { background: var(--peach); color: var(--ink); }
.menu-toggle { display: none; }

.error { color: var(--err); font-weight: 600; margin: 0; }
.muted { color: var(--muted); }
.notice { background: #fff; border: 1px solid var(--line); padding: 10px 14px; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--nav-bg); color: var(--nav-text); border-right: 1px solid var(--nav-line); scrollbar-color: var(--nav-line) var(--nav-bg); padding: 16px 12px; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 4px 8px 16px; }
.brand .logo { width: 145px; max-width: 100%; height: auto; }
.brand { flex-wrap: wrap; }
#nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: var(--nav-text); text-decoration: none; overflow-wrap: anywhere; }
#nav a:hover { background: var(--nav-hover); }
#nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 700; }
#nav .tag { background: var(--nav-hover); color: var(--nav-text); }
/* Module children (Infra, HR) expand under their module: a 44px disclosure button beside the module link. */
.nav-row { display: flex; align-items: stretch; gap: 4px; }
.nav-row > a { flex: 1 1 auto; min-width: 0; }
.nav-toggle { flex: 0 0 44px; min-height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--nav-text); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle:hover { background: var(--nav-hover); }
.nav-chevron { display: inline-block; transition: transform .15s ease; }
.nav-toggle[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
#nav .nav-children { margin: 2px 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--nav-line); }
#nav .nav-children a { font-size: 14px; }
#nav a[data-active="true"] { background: var(--nav-hover); color: var(--nav-active-text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .nav-chevron { transition: none; } }
/* Slots the user cannot open (無權限 / 建置中): same row geometry as a link, visibly muted, not interactive. */
#nav .nav-locked { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 8px 12px; border-radius: 6px; color: var(--nav-muted); cursor: default; user-select: none; }
#nav .nav-locked-name { min-width: 0; overflow-wrap: anywhere; }
#nav .nav-locked .tag { flex: 0 0 auto; background: var(--nav-hover); color: var(--nav-text); }

.content { min-width: 0; }
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.who { overflow-wrap: anywhere; }
.view { max-width: 1180px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.view h1 { margin: 0; font-size: 24px; color: var(--wine); }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 0 0 8px; font-size: 16px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.panel.inset { background: var(--warm); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.query { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: grid; gap: 4px; min-width: 180px; }
.field.grow { flex: 1 1 240px; }
.field-static { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 4px; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #F7EEEC; color: var(--muted); white-space: nowrap; }
.tag.ok { background: #EFF7F1; color: var(--ok); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--warm); }
.card:hover { border-color: var(--wine); }
.card-title { font-weight: 700; overflow-wrap: anywhere; }
.ops-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ops-list li { display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }

.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.grid th { font-size: 13px; color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.catalog { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.catalog-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.catalog-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.catalog-head h3 { margin: 0; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; min-height: 0; }
  .sidebar { padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; max-height: 100vh; max-height: 100dvh; }
  .brand { padding: 0; }
  .menu-toggle { display: inline-flex; border-color: var(--nav-muted); color: var(--nav-text); background: transparent; }
  #nav { display: none; flex-basis: 100%; padding-top: 8px; }
  #nav.open { display: block; }
  .topbar { padding: 8px 12px; justify-content: space-between; }
  .view { padding: 16px 12px; }
  .center-card { margin: 16px 12px; padding: 24px 16px; }
  .query { flex-direction: column; align-items: stretch; }
  .field { min-width: 0; }
  .field.grow { flex: 1 1 auto; }
  .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grid, .grid tbody, .grid tr, .grid td { display: block; width: 100%; }
  .grid tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--warm); }
  .grid td { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 0; text-align: left; white-space: normal; }
  .grid td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
  .facts { grid-template-columns: 1fr; }
}

/* Login: alternate methods are visible but honestly not configured yet. */
.alt-login { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.alt-login-title { margin: 0; font-weight: 600; }
.alt-login-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alt-login .muted { margin: 0; font-size: 14px; }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
#password-view form { display: grid; gap: 8px; }
#password-view .stack[hidden] + .stack { padding-top: 0; border-top: 0; }
#password-view h1:focus { outline: none; }

/* Infra people workspace: roster left, person right; one page at a time on mobile. */
.workspace { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.roster { position: sticky; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.roster-messages { display: grid; gap: 6px; min-width: 0; }
.roster-messages:empty { display: none; }
.roster-pager { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.roster-list[aria-busy="true"] { opacity: .6; }
.roster-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.roster-head h2 { margin: 0; }
.roster-filter { display: grid; gap: 8px; }
.roster-filter .field { min-width: 0; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roster .muted, .roster .error { margin: 0; }
.roster-list { list-style: none; margin: 0 -8px; padding: 0 8px; display: grid; gap: 4px; overflow-y: auto; align-content: start; }
.roster-item { display: grid; gap: 2px; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.roster-item:hover { background: #fff3f1; }
.roster-item[aria-current="true"] { background: var(--peach); border-color: var(--wine); }
.roster-name { font-weight: 700; overflow-wrap: anywhere; }
.roster-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.roster-item[aria-current="true"] .roster-meta { color: var(--ink); }
.tag-row { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag.warn { background: #FFF6E2; color: #7A4E00; }
.person { min-height: 320px; align-content: start; }
.person .back { display: none; justify-self: start; }
.person-head { display: grid; gap: 4px; }
.person-head h2 { margin: 0; font-size: 20px; color: var(--wine); }
.person-head h2:focus, .pane-body > h2:focus { outline: none; }
.person-head .muted { margin: 0; }
.pane-body { display: grid; gap: 16px; min-width: 0; }
.pane-body .empty { padding: 48px 0; text-align: center; margin: 0; }
.person-tabs { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.btn.tab[aria-selected="true"], a.btn.tab[aria-current="page"] { background: var(--peach); color: var(--ink); }
.person-panel { display: grid; gap: 16px; min-width: 0; }
/* Allocate the actual space below the banner, top bar and title, including wrapped headers.
   The roster and detail body scroll independently; identity, tabs and paging stay in view. */
@media (width > 760px) {
  body:has(.workspace) { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  body:has(.workspace) > .dev-banner { flex: 0 0 auto; }
  .shell:has(.workspace) { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .shell:has(.workspace) > .sidebar { height: 100%; min-height: 0; }
  .content:has(.workspace) { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .view:has(.workspace) { width: 100%; min-height: 0; display: flex; flex-direction: column; }
  .view:has(.workspace) > * { flex: 0 0 auto; }
  .view:has(.workspace) > :has(> .workspace) { flex: 1 1 0; min-height: 0; }
  .workspace { min-height: 0; height: 100%; align-items: stretch; }
  .workspace > .roster { position: static; min-height: 0; max-height: none; height: 100%; overflow-y: auto; }
  .workspace > .person { min-height: 0; height: 100%; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
  .person > .pane-body { min-height: 0; overflow-y: auto; padding: 5px; margin: -5px; }
  .person > .pane-body:has(.person-panel) { display: flex; flex-direction: column; overflow: hidden; }
  .pane-body > .person-head, .pane-body > .person-tabs, .pane-body > .notice { flex: 0 0 auto; }
  .pane-body > .person-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding: 5px; margin-inline: -5px; }
  .workspace .roster-list { grid-row: 4; padding-block: 5px; }
  .workspace .roster-pager { grid-row: 5; }
}
.stack { display: grid; gap: 10px; min-width: 0; }
.stack h3 { margin: 0; }
.stack + .stack, .facts + .stack { padding-top: 16px; border-top: 1px solid var(--line); }
.confirm-box { display: grid; gap: 10px; padding: 14px 16px; border: 2px solid var(--wine); border-radius: 12px; background: var(--warm); }
.confirm-box p { margin: 0; }
.btn.danger { background: #8E2A2A; border-color: #8E2A2A; color: #fff; }
.btn.danger:hover:not(:disabled) { background: #6F1F1F; color: #fff; }
.btn.danger-outline { border-color: #8E2A2A; color: #8E2A2A; justify-self: start; }
.stack > .btn { justify-self: start; }

/* One-time temporary password: shown once, cleared on hand-over or leaving. */
.secret { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: #FFF6E2; border: 1px solid #E2C27A; }
.secret h3, .secret p { margin: 0; }
.secret-value { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .04em; padding: 10px 12px; background: #fff; border-radius: 6px; border: 1px solid #E2C27A; overflow-wrap: anywhere; user-select: all; }

/* Grants tree: module -> feature -> operation with explicit scopes. */
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.check input, .scope-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--wine); }
.tree { display: grid; gap: 8px; }
.tree-module { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; }
.tree-module summary { display: list-item; min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 700; }
.tree-module summary::marker { color: var(--wine); }
.tree-module summary .tag { float: right; margin-left: 8px; }
.tree-module[open] summary { border-bottom: 1px solid var(--line); }
.tree-feature { padding: 10px 0; display: grid; gap: 6px; }
.tree-feature + .tree-feature { border-top: 1px dashed var(--line); }
.tree-feature h4 { margin: 0; font-size: 14px; color: var(--muted); }
.op-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-row { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.op-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.scope-list { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.scope-check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 400; cursor: pointer; }
.scope-check.locked { cursor: default; color: var(--muted); }
.diff { padding: 16px; border-radius: 12px; background: var(--warm); border: 1px solid var(--line); }
.diff-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.diff-items li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.diff-kind { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.diff-add .diff-kind { background: #EFF7F1; color: var(--ok); }
.diff-remove .diff-kind { background: #FDF0F1; color: #8E2A2A; }
.diff-list .muted { margin: 0; }
.catalog-item .ops-list li { align-items: center; }

@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  .workspace[data-pane="list"] .person, .workspace[data-pane="detail"] .roster { display: none; }
  .roster { position: static; max-height: none; }
  .roster-list { overflow: visible; }
  .person .back { display: inline-flex; }
  .op-row { grid-template-columns: 1fr; }
  .alt-login-buttons { grid-template-columns: 1fr; }
}

/* Infra read-only pages and planned pages; 活動紀錄 is filters, then list + detail (one page on mobile). */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.panel-head h2 { margin: 0; }
.tabs a.btn.tab { gap: 6px; }
.detail-items { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }
.activity { display: grid; gap: 20px; min-width: 0; }
.activity-filter .query .field { flex: 1 1 180px; }
.activity-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.activity-list > h2, .activity-list > .muted, .activity-list > .error, .activity-list > .hint { margin: 0; }
.activity-list > h2:focus { outline: none; }
.activity-detail { position: sticky; top: 16px; align-content: start; }
.activity-detail .back { display: none; justify-self: start; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.grid tr.is-current td { background: #fff3f1; }
.grid a.btn { white-space: nowrap; }
.grant-list summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.grant-list summary::marker { color: var(--wine); }
.grant-list .tag { margin-left: 6px; }

@media (max-width: 760px) {
  .activity-filter .query .field { flex: initial; }
  .activity-main { grid-template-columns: 1fr; }
  .activity[data-pane="list"] .activity-detail,
  .activity[data-pane="detail"] .activity-filter,
  .activity[data-pane="detail"] .activity-list { display: none; }
  .activity-detail { position: static; }
  .activity-detail .back { display: inline-flex; }
  .grid tr.is-current { border-color: var(--wine); }
  .grid tr.is-current td { background: transparent; }
}

::selection { background: var(--peach); color: var(--ink); }
input, select { caret-color: var(--wine); }
* { scrollbar-color: #b19674 var(--warm); scrollbar-width: thin; }
.btn:hover:not(:disabled) { background: #ffe7e3; }
.btn.primary:hover:not(:disabled) { background: var(--wine-dark); color: white; }
.btn.tab[aria-pressed="true"]:hover { background: #ffe7e3; color: var(--ink); }
.sidebar :focus-visible { outline-color: var(--nav-active-text); }
.grid td.num { text-align: right; }
@media (max-width: 760px) { .grid td.num { text-align: left; } .brand .logo { width: 125px; } }

/* 班表管理｜差勤管理 (attendance.js): month and lead fixed on top; 地點 / 員工 / 月明細. Wide: three columns
   (220px / 260px / rest) with fixed pane heads, search and pagers and scrolling lists. Medium: a native location
   selector with its pager above employees + detail. Narrow: one step at a time (data-step), never three squeezed
   columns. Local layout only; no new global tokens. */
.att-workspace { display: grid; gap: 16px; min-width: 0; }
.att-head { display: grid; gap: 8px; min-width: 0; }
.att-lead { margin: 0; }
.att-month { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.att-month .field { min-width: 200px; }
.att-columns { display: grid; grid-template-columns: 220px 260px minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.att-pane { padding: 16px; gap: 10px; align-content: start; }
.att-pane-head { display: grid; gap: 4px; min-width: 0; }
.att-pane-head h2 { margin: 0; overflow-wrap: anywhere; }
.att-pane-head h2:focus { outline: none; }
.att-pane-head .att-scope { margin: 0; overflow-wrap: anywhere; }
.att-back { display: none; justify-self: start; }
.att-loc-select { display: none; min-width: 0; }
.att-messages { display: grid; gap: 6px; min-width: 0; }
.att-messages p { margin: 0; }
.att-messages p:empty, .att-messages .actions:empty { display: none; }
.att-list { list-style: none; margin: 0 -6px; padding: 0 6px; display: grid; gap: 4px; align-content: start; }
.att-list[aria-busy="true"] { opacity: .6; }
.att-item { display: grid; justify-items: start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.att-item:hover { background: #fff3f1; }
.att-item[aria-pressed="true"] { background: var(--peach); border-color: var(--wine); }
.att-item-name { font-weight: 700; overflow-wrap: anywhere; }
.att-item-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.att-item[aria-pressed="true"] .att-item-meta { color: var(--ink); }
.att-pager { justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.att-pager .btn { padding-inline: 10px; }
.att-page-text { font-size: 13px; font-variant-numeric: tabular-nums; }
.att-size select { width: auto; }
.att-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.att-search .field { min-width: 0; flex: 1 1 140px; }
.att-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.att-toggle input { width: 22px; height: 22px; min-height: 0; accent-color: var(--wine); }
.att-toggle label { font-weight: 600; cursor: pointer; }
.att-notice { font-weight: 700; background: #FFF6E2; border-color: #E2C27A; color: #7A4E00; border-radius: 12px; }
.att-days { display: grid; gap: 8px; align-content: start; min-width: 0; }
.att-day { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
/* The whole summary row is the native disclosure target (keyboard: Enter / Space). display:flex removes the
   native marker, so an authored chevron shows the state: pointing right when closed, down when open. */
.att-day-summary { position: relative; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  min-height: 44px; padding: 8px 12px 8px 36px; cursor: pointer; }
.att-day-summary::-webkit-details-marker { display: none; }
.att-day-summary::before { content: ""; position: absolute; left: 15px; top: 18px; width: 7px; height: 7px;
  border-right: 2px solid var(--wine); border-bottom: 2px solid var(--wine); transform: rotate(-45deg);
  transition: transform .15s ease; }
.att-day[open] > .att-day-summary::before { transform: rotate(45deg); }
.att-day-summary:hover .att-day-date { color: var(--wine); }
@media (prefers-reduced-motion: reduce) { .att-day-summary::before { transition: none; } }
.att-day-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.att-day-span { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.att-day[open] > .att-day-summary { border-bottom: 1px solid var(--line); }
.att-source { display: grid; gap: 6px; padding: 10px 12px; min-width: 0; }
.att-source + .att-source { border-top: 1px dashed var(--line); }
.att-segments th[scope="row"] { color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.att-segments td { font-variant-numeric: tabular-nums; }
.att-hours, .att-provenance, .att-footnote { margin: 0; }
.att-provenance { font-size: 13px; overflow-wrap: anywhere; }
.att-footnote { font-size: 13px; }

/* Wide and medium: the workspace takes the height left under banner, top bar and title; lists and the
   month detail scroll inside their panes while heads, search and pagers stay in view. */
@media (width > 760px) {
  body:has(.att-workspace) { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  body:has(.att-workspace) > .dev-banner { flex: 0 0 auto; }
  .shell:has(.att-workspace) { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .shell:has(.att-workspace) > .sidebar { height: 100%; min-height: 0; }
  .content:has(.att-workspace) { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .view:has(.att-workspace) { width: 100%; max-width: 1440px; min-height: 0; display: flex; flex-direction: column; }
  .view:has(.att-workspace) > * { flex: 0 0 auto; }
  .view:has(.att-workspace) > :has(> .att-workspace) { flex: 1 1 0; min-height: 0; }
  .att-workspace { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .att-columns { min-height: 0; height: 100%; align-items: stretch; }
  /* Lists keep room for at least two complete rows; if a pane is ever shorter than its fixed parts, the pane
     itself scrolls, so the pager is never clipped. */
  .att-pane { min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .att-pane > * { flex: 0 0 auto; }
  .att-pane > .att-list { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; padding-block: 5px; }
  .att-pane > .att-days { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; padding: 5px; margin: -5px; }
}

/* Short-height fallback (e.g. 1096x768, 1440x768): the lead and month scroll away with the page and the
   columns get almost the whole viewport height, each pane keeping its head, search and pager in view and its
   list / month detail scrolling inside. Taller screens keep the fixed full-height workspace above. */
@media (width > 760px) and (max-height: 860px) {
  .view:has(.att-workspace) { overflow-y: auto; }
  .view:has(.att-workspace) > :has(> .att-workspace) { flex: 0 0 auto; min-height: auto; }
  .att-workspace { height: auto; grid-template-rows: auto auto; }
  .att-columns { height: clamp(26rem, calc(100vh - 8.5rem), 60rem); height: clamp(26rem, calc(100dvh - 8.5rem), 60rem); }
}

@media (min-width: 761px) and (max-width: 1200px) {
  /* Compact head: lead beside the month form instead of above it. */
  .att-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 16px; }
  .att-head > .error { grid-column: 1 / -1; }
  .att-head > .error:empty { display: none; }
  .att-columns { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  .att-pane { padding: 12px 14px; gap: 8px; }
  .att-locations { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding-block: 10px; }
  .att-locations > .att-pane-head { align-self: center; }
  .att-locations > .att-list { display: none; }
  .att-locations > .att-loc-select { display: grid; gap: 4px; flex: 1 1 260px; }
  .att-locations > .att-messages { flex: 1 1 100%; order: 3; }
  .att-locations > .att-pager { border-top: 0; padding-top: 0; flex: 0 1 auto; }
  /* Employees: title and location on one line; the pager is a fixed two-row block (page text, then
     previous / page size / next), so its height never depends on wrapping. */
  .att-employees > .att-pane-head { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
  .att-employees > .att-pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "text text text" "prev size next"; gap: 4px 8px; padding-top: 8px; }
  .att-employees > .att-pager > .att-page-text { grid-area: text; text-align: center; }
  .att-employees > .att-pager > .btn:first-child { grid-area: prev; }
  .att-employees > .att-pager > .btn:nth-child(3) { grid-area: next; }
  .att-employees > .att-pager > .att-size { grid-area: size; min-width: 0; }
  .att-employees > .att-pager > .att-size select { width: 100%; }
}

@media (max-width: 760px) {
  .att-columns { grid-template-columns: 1fr; }
  .att-workspace[data-step="locations"] .att-employees, .att-workspace[data-step="locations"] .att-detail,
  .att-workspace[data-step="employees"] .att-locations, .att-workspace[data-step="employees"] .att-detail,
  .att-workspace[data-step="detail"] .att-locations, .att-workspace[data-step="detail"] .att-employees { display: none; }
  .att-back { display: inline-flex; }
  .att-month .field { flex: 1 1 auto; min-width: 0; }
  .att-pager { flex-wrap: wrap; }
  /* The three segments are compact aligned rows separated by rules, not the generic stacked .grid cards:
     段名 | 上班 time | 下班 time, with a segment's issues on a second line under its times. A segment without an
     issue shows no empty status line. */
  .att-segments tr { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) minmax(0, 1fr); gap: 2px 8px;
    align-items: baseline; margin: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; background: transparent; }
  .att-segments tbody tr:last-child { border-bottom: 0; }
  .att-segments th[scope="row"] { display: block; padding: 0; border: 0; }
  .att-segments td { display: block; padding: 0; border: 0; }
  .att-segments td::before { margin-right: 6px; font-size: 12px; }
  .att-segments td[data-label="狀態"] { grid-column: 2 / -1; }
  .att-segments td[data-label="狀態"]::before { content: none; }
  .att-segments td[data-label="狀態"]:has(> .muted:only-child) { display: none; }
}

/* Infra: a single ordered list, with the same controls on keyboard and touch. */
.navigation-order { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-height: 60vh; overflow: auto; }
.navigation-order li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.navigation-position { width: 2em; font-variant-numeric: tabular-nums; color: var(--muted); }
.navigation-name { flex: 1 1 120px; }
.navigation-order .actions { gap: 6px; }
.navigation-order li[draggable="true"] { cursor: grab; }

.shift-brushes { display:flex; flex-wrap:wrap; gap:8px; }
.shift-brushes [aria-pressed="true"] { background:var(--peach); color:var(--ink); }
.shift-grid { overflow:auto; max-height:60vh; border:1px solid var(--line); min-width:0; }
.shift-table { border-collapse:separate; border-spacing:0; width:100%; font-variant-numeric:tabular-nums; }
.shift-table th, .shift-table td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
.shift-table th { background:var(--warm); min-width:100px; padding:8px; }
.shift-table thead th { position:sticky; top:0; z-index:2; }
.shift-table th:first-child { position:sticky; left:0; z-index:1; min-width:130px; text-align:left; }
.shift-table thead th:first-child { z-index:3; }
.shift-table small, .shift-day-list small { display:block; font-weight:400; }
.shift-cell { display:block; width:100%; min-width:64px; height:44px; border:0; border-radius:0; background:#fff; cursor:pointer; font:inherit; color:var(--ink); font-weight:600; }
.shift-cell.leave { background:var(--warm); }
.shift-cell.support { background:var(--peach); font-size:12px; padding:4px; }
.shift-cell.unavailable { background:var(--warm); color:var(--muted); }
.shift-editor { border-block:1px solid var(--line); padding-block:16px; }
.shift-editor[hidden] { display:none; }
.shift-position { width:5em; }
.shift-cell.changed { box-shadow:inset 0 -3px 0 var(--wine); }
.shift-cell:disabled { cursor:default; }
.shift-phone { display:none; }
.shift-day-picker { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; gap:8px; }
.shift-day-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.shift-day-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); }
.shift-day-list .shift-cell { width:70px; border:1px solid var(--line); }
.import-mapping-row { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:12px 0; border-bottom:1px solid var(--line); }
@media (max-width:760px) { .shift-grid { display:none; } .shift-phone { display:grid; gap:12px; } .shift-brushes .btn { min-width:44px; } }

.view > div { min-width: 0; }
.table-scroll { min-width:0; overflow:auto; max-height:60vh; }

/* Compact HR confirmation reuses the roster/detail workspace without stretching form rows. */
.hr-maintenance .pane-body, .hr-maintenance .stack { align-content: start; }
.hr-maintenance .pane-body p { margin: 0; }
.hr-maintenance .roster-item { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 10px; }
.check-row input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 2px 0 0; accent-color: var(--wine); }