/*
  毎日使う業務画面。Google Workspace 管理コンソールの作法に、
  JNET様Day1スライドの配色（濃紺 → 青 → 紫）を重ねる。
  グラデーションを敷くのはヘッダーと「際」だけ。**毎日読む表と数字は白地のまま。**
  ヘッダーの地はコントラスト比を計算して決めてある（白文字で最悪 8.45:1 = AAA）。
*/
:root {
  --bg: #ffffff;
  --surface: #f7f8fb;
  --surface-2: #eef1f7;
  --line: #d8dce6;
  --line-soft: #e8ebf2;
  /* ホバー・フォーカスで境界を少し強める。--line より濃く、文字色よりは淡い。 */
  --line-strong: #b9c1d2;

  /* スライドから採った3色 */
  --navy: #0d1a3d;
  --navy-2: #1b2b56;
  --blue: #186fec;
  --blue-dark: #0f56bd;
  --violet: #57399e;   /* 白文字で 8.45:1（AAA）。#6349b9 では 6.60 で AAA に届かない */
  --violet-2: #6340a6; /* 白文字で 7.46:1（AAA） */

  --text: #16192b;
  --text-2: #5a6076;
  --tint: #edf3fe;       /* 青の極薄 */
  --tint-v: #f1edfa;     /* 紫の極薄 */
  --green: #0f7a43;
  --amber: #9a5b00;
  --amber-bg: #fdf4e3;
  --red: #c02626;
  --night-bg: #f2effb;
  --sidebar: 212px;

  /* 余白の刻み。**新しく書く規則はトークンを使う**。基準はファイル冒頭の注記 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  /* main/.ops main の下端の余白専用。3箇所で同じ意味（本文の下の呼吸代）で再利用されている実在の値。 */
  --space-7: 56px;
  /*
     ヘッダーの地。**白文字で最悪 8.45:1（AAA）** になる範囲に終端を選んである。
     もっと明るい紫（#7750bd）だと 5.73 まで落ち、本文の基準 4.5 は満たすが
     長時間見る画面としては薄い。
  */
  --rail: linear-gradient(100deg, #4a2f8f 0%, #57399e 18%, #3f3a96 42%, #24357a 70%, #14285a 100%);
  --rail-thin: linear-gradient(90deg, #57399e 0%, #3f3a96 38%, #1b3a80 100%);

  /* 文字サイズの段。実測で使われている8種類に名前を付けた。 */
  --text-2xs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .875rem;
  --text-md: .9375rem;
  --text-lg: 1rem;
  --text-xl: 1.0625rem;
  --text-2xl: 1.25rem;

  /* 角丸の段。1px〜18pxに散っていたものを4段へ寄せる。 */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-pill: 999px;

  /* 部品の高さ。 */
  --control-h: 32px;
  --control-h-touch: 44px;

  /* フォント。 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 孤立していた色に名前を付けて吸収する。 */
  --on-accent: #fff;
  --btn-grad: linear-gradient(115deg, #0f56bd 0%, #2b4bb8 55%, #4a4bbf 100%);
  --control-border: #7b8296;
  --row-hover: #fafbfd;
  --stripe-a: #eef0f5;
  --stripe-b: #e4e8f0;
  --tint-line: #c3d4f5;
  --dot-off: #99a0b0;
  --tag-ok-bg: #e7f4ec;
  --unrecorded-line: #e0a63a;
  --visited-grad-1: #c9dcfb;
  --visited-grad-2: #d9cdf2;
  --turn-stripe: #b4bccd;
  --memo-fg: #e9ecf5;
  --memo-fg-muted: #a8b1c9;
  --memo-dt: #9fa9c4;
  --appbar-who: #dbe1f0;

  /* alpha付きの色はRGB成分をトークンにし、rgba(var(--x-rgb), .N) の形で使う。 */
  --white-rgb: 255, 255, 255;
  --appbar-glow-blue-rgb: 90, 150, 255;
  --appbar-glow-violet-rgb: 160, 120, 240;
  --memo-glow-blue-rgb: 24, 111, 236;
  --memo-glow-violet-rgb: 119, 80, 189;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Noto Sans JP", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.num { font-variant-numeric: tabular-nums; }

/* 最上部の細いレール。スライドの見出し帯と同じ向きのグラデーション */
.rail { height: 3px; background: var(--rail-thin); }

/* ── アプリバー。グラデーションを面として敷き、文字は白 ── */
.appbar {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  height: 56px; padding: 0 var(--space-4); overflow: hidden;
  background: var(--rail); color: var(--on-accent);
}
/* 面の上に置く滲み。地が濃いので、明るい側を足して奥行きを出す */
.appbar::before {
  content: ""; position: absolute; inset: -70px auto -50px -60px; width: 520px;
  background: radial-gradient(closest-side, rgba(var(--appbar-glow-blue-rgb), .22), transparent 72%);
  pointer-events: none;
}
.appbar::after {
  content: ""; position: absolute; inset: -80px -140px -60px auto; width: 560px;
  background: radial-gradient(closest-side, rgba(var(--appbar-glow-violet-rgb), .20), transparent 72%);
  pointer-events: none;
}
.appbar > * { position: relative; }
.appbar .brand { display: flex; align-items: center; gap: var(--space-2); min-width: calc(var(--sidebar) - 16px); }
.appbar .mark {
  width: 22px; height: 22px; border-radius: var(--radius-1); flex: none;
  background: rgba(var(--white-rgb), .18); border: 1px solid rgba(var(--white-rgb), .30);
  position: relative;
}
.appbar .mark::after {
  content: ""; position: absolute; inset: var(--space-2) var(--space-2) auto var(--space-2); height: 2px;
  background: rgba(var(--white-rgb), .92); border-radius: var(--radius-1); box-shadow: 0 5px 0 rgba(var(--white-rgb), .92);
}
.appbar .brand b { font-size: var(--text-xl); font-weight: 500; letter-spacing: -.01em; color: var(--on-accent); }
.appbar .who { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); color: var(--appbar-who); }
.avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: rgba(var(--white-rgb), .26); border: 1px solid rgba(var(--white-rgb), .34); }

/* ── サイドバー。パックを畳み、その中に画面を並べる ── */
.shell { display: flex; align-items: flex-start; }

.side {
  width: var(--sidebar); flex: none; padding: var(--space-2) 0 var(--space-5);
  display: flex; flex-direction: column; min-height: calc(100vh - 56px);
}
.side nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.side .signout { margin: var(--space-2) var(--space-3) 0 var(--space-4); }

/* パック1つぶん。見出しと、その中の画面。 */
.packgroup { display: flex; flex-direction: column; }
.side .packhead {
  display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-4);
  font-size: var(--text-sm); color: var(--text); text-decoration: none;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; margin-right: var(--space-2);
}
.side .packhead:hover { background: var(--surface); }
/* **選ばれているパックだけ色が付く。** 中の画面は地の色で並べる。 */
.side .packhead.on {
  background: linear-gradient(90deg, var(--tint-v) 0%, var(--tint) 100%);
  color: var(--navy); font-weight: 500;
}
/* 中の画面。左に段差をつけて、どのパックの下かを示す。 */
.side .packitem {
  display: block; height: 28px; line-height: 28px; padding: 0 var(--space-4) 0 42px;
  font-size: var(--text-sm); color: var(--text-2); text-decoration: none;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; margin-right: var(--space-2); position: relative;
}
.side .packitem::before {
  content: ""; position: absolute; left: var(--space-5); top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.side .packitem:hover { background: var(--surface); color: var(--text); }
.side .packitem.on { color: var(--blue-dark); font-weight: 500; background: var(--tint); }
.side .packitem.on::before { background: var(--blue); width: 2px; left: var(--space-5); }
.side a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.side .ico { width: 16px; text-align: center; flex: none; opacity: .7; font-size: var(--text-base); }

/* ── メイン ── */
main { flex: 1; min-width: 0; border-left: 1px solid var(--line-soft); padding: var(--space-4) var(--space-5) var(--space-7); }
.crumb { font-size: var(--text-xs); color: var(--text-2); margin-bottom: var(--space-2); }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
h1 { font-size: var(--text-2xl); font-weight: 500; margin: 0 0 var(--space-1); color: var(--navy); }
.sub { color: var(--text-2); font-size: var(--text-sm); margin: 0; }
.headline { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.headline .acts { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

/* 白文字で 6.80〜7.46:1。#186fec まで明るくすると 4.64 まで落ちる */
.btn {
  font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1.4;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); cursor: pointer;
  border: 1px solid transparent; color: var(--on-accent);
  background: var(--btn-grad);
}
.btn.text { background: none; color: var(--blue-dark); padding: var(--space-2) var(--space-3); }
.btn.text:hover { background: var(--tint); }
.btn.outline { background: none; color: var(--blue-dark); border-color: var(--line); }
.btn.danger { background: none; color: var(--red); border-color: var(--line); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.filterbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px dashed var(--line); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--text-2);
}
.chip.set { border-style: solid; border-color: var(--blue); background: var(--tint); color: var(--blue-dark); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-2); overflow: hidden; }
.seg span { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); color: var(--text-2); }
.seg span.on { background: var(--tint); color: var(--blue-dark); font-weight: 500; }

/* ── 表 ── */
.tablewrap { border: 1px solid var(--line-soft); border-radius: var(--radius-2); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 720px; }
thead th {
  background: var(--surface); text-align: left; font-weight: 500; color: var(--text-2);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); white-space: nowrap; font-size: var(--text-xs);
}
tbody td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.picked { background: linear-gradient(90deg, var(--tint), var(--tint-v)); }
td a { color: var(--blue-dark); text-decoration: none; }
td a:hover { text-decoration: underline; }
td.right { text-align: right; }
.faq td.q { min-width: 12em; }
.faq td.answer { max-width: 32em; }
.faq .clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; max-height: 3em; white-space: pre-line;
}
.faq td.when, .faq td.acts { white-space: nowrap; }
.faq .btn { white-space: nowrap; }
.faq td.acts form { display: inline-block; margin-left: var(--space-2); }
.faq td.pick { width: 1%; text-align: center; }
.box { width: 16px; height: 16px; border: 2px solid var(--control-border); border-radius: var(--radius-1); display: inline-block; vertical-align: -3px; }
.box.on { background: var(--blue-dark); border-color: var(--blue-dark); position: relative; }
.box.on::after {
  content: ""; position: absolute; left: var(--space-1); top: 0; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}

.status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--green); }
.dot.off { background: var(--dot-off); }
.tag { display: inline-block; font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-1); background: var(--amber-bg); color: var(--amber); }
.tag.night { background: var(--night-bg); color: var(--violet); }
.tag.ok { background: var(--tag-ok-bg); color: var(--green); }

/* ── 一括操作バー ── */
.bulkbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: linear-gradient(100deg, var(--tint), var(--tint-v));
  border: 1px solid var(--tint-line); border-radius: var(--radius-3);
  padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-base); color: var(--navy);
}
.bulkbar .count { font-weight: 500; }
.bulkbar .sp { flex: 1; }

/* ── 時間軸 ── */
.board { border: 1px solid var(--line-soft); border-radius: var(--radius-3); overflow: hidden; margin-top: var(--space-2); }
.board-scroll { overflow-x: auto; }
.ruler { display: flex; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.ruler .pad { width: 128px; flex: none; border-right: 1px solid var(--line-soft); }
.ruler .hours { position: relative; height: 28px; flex: 1; }
.ruler .hours span { position: absolute; top: var(--space-2); font-size: var(--text-2xs); color: var(--text-2); transform: translateX(-50%); }
.ruler .hours span:first-child { transform: none; padding-left: var(--space-1); }
.ruler .hours span:last-child { transform: translateX(-100%); padding-right: var(--space-1); }
.row { display: flex; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row .name { width: 128px; flex: none; border-right: 1px solid var(--line-soft); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.row .name small { display: block; color: var(--text-2); font-size: var(--text-2xs); }
.track { position: relative; flex: 1; height: 54px; background: #fff; }
.band-night { position: absolute; top: 0; bottom: 0; background: var(--night-bg); }
.band-off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px); }
.tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.bk {
  position: absolute; top: var(--space-2); height: 42px; border-radius: var(--radius-1);
  background: linear-gradient(135deg, var(--tint) 0%, var(--tint-v) 100%);
  border-left: 3px solid var(--blue); padding: var(--space-1) var(--space-2); overflow: hidden;
  font-size: var(--text-2xs); line-height: 1.35; color: var(--navy);
}
.bk b { display: block; font-weight: 500; font-size: var(--text-xs); white-space: nowrap; }
.bk.cancelled { background: #fff; border: 1px dashed var(--line); border-left: 3px dashed var(--red); }
.bk.cancelled b { text-decoration: line-through; color: var(--text-2); }
.turn { position: absolute; top: var(--space-2); height: 42px; border-radius: 0 var(--radius-1) var(--radius-1) 0; background: repeating-linear-gradient(135deg, var(--turn-stripe) 0 2px, transparent 2px 5px); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line-soft); background: var(--surface); font-size: var(--text-xs); color: var(--text-2); }
.legend i { display: inline-block; width: 20px; height: 10px; border-radius: var(--radius-1); vertical-align: -1px; margin-right: var(--space-2); }
.i-bk { background: linear-gradient(135deg, var(--tint), var(--tint-v)); border-left: 3px solid var(--blue); }
.i-turn { background: repeating-linear-gradient(135deg, var(--turn-stripe) 0 2px, transparent 2px 5px); }
.i-night { background: var(--night-bg); }
.i-off { background: repeating-linear-gradient(45deg, var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px); }
.i-cancel { border: 1px dashed var(--line); border-left: 3px dashed var(--red); }

/* 予約の状態。**色だけに頼らず、線の形でも分ける**（破線は枠を空けた予約）。 */
a.bk { display: block; text-decoration: none; }
a.bk:hover { box-shadow: 0 0 0 1px var(--blue); }
a.bk:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.bk.visited { background: linear-gradient(135deg, var(--visited-grad-1) 0%, var(--visited-grad-2) 100%); border-left-color: var(--blue-dark); }
.bk.no-show { background: #fff; border: 1px dashed var(--line); border-left: 3px dashed var(--amber); }
.bk.no-show b { text-decoration: line-through; color: var(--text-2); }
.bk.unrecorded { border-left-color: var(--unrecorded-line); background: linear-gradient(135deg, var(--amber-bg) 0%, var(--tint-v) 100%); }
.i-visited { background: linear-gradient(135deg, var(--visited-grad-1), var(--visited-grad-2)); border-left: 3px solid var(--blue-dark); }
.i-noshow { border: 1px dashed var(--line); border-left: 3px dashed var(--amber); }
.i-unrecorded { background: var(--amber-bg); border-left: 3px solid var(--unrecorded-line); }

/* ── 予約の一覧・詳細 ── */
.daybar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.daybar .date { font-size: var(--text-lg); font-weight: 500; color: var(--navy); margin-right: var(--space-2); }
.daybar form { display: flex; gap: var(--space-2); align-items: center; }
.daybar input[type="date"] {
  font: inherit; font-size: var(--text-sm); padding: var(--space-2) var(--space-2); border-radius: var(--radius-1);
  border: 1px solid var(--line); background: #fff; color: var(--text);
}
a.btn { display: inline-block; text-decoration: none; }
tbody tr.unrecorded { background: var(--amber-bg); }
.rsv td.acts { white-space: nowrap; }
.rsv td.acts form { display: inline-block; margin-right: var(--space-2); }
.rsv td.when { white-space: nowrap; }
.detail { display: grid; grid-template-columns: 9em 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-base); }
.detail dt { color: var(--text-2); }
.detail dd { margin: 0; }
.statusacts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.formrow.gap-top { margin-top: var(--space-5); }
.preview .sp { flex: 1; }
.modepick { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.modepick a {
  font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-2); border: 1px solid var(--line);
  color: var(--text-2); text-decoration: none;
}
.modepick a.on { background: var(--tint); border-color: var(--blue); color: var(--blue-dark); font-weight: 500; }

/*
  幅の狭い画面（店頭のスマホ）。**時間軸を隠し、表の行をカードに積む。**
  来店の記録は受付で片手で押すので、ボタンは指で押せる高さ（44px 以上）にする。
*/
@media (max-width: 900px) {
  .board { display: none; }
  .tablewrap.cardwrap { border: 0; overflow: visible; }
  .cards { min-width: 0; }
  .cards thead { display: none; }
  .cards, .cards tbody, .cards tr, .cards td { display: block; }
  .cards tr { border: 1px solid var(--line); border-radius: var(--radius-3); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: #fff; }
  .cards tr.unrecorded { border-left: 4px solid var(--unrecorded-line); background: var(--amber-bg); }
  .cards td { border: 0; padding: var(--space-1) 0; }
  .cards td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 6em; color: var(--text-2); font-size: var(--text-xs); }
  .cards td.acts { display: flex; gap: var(--space-2); margin-top: var(--space-2); white-space: normal; }
  .cards td.acts form { flex: 1; margin: 0; }
  .cards .btn, .daybar .btn, .statusacts .btn { width: 100%; min-height: 44px; font-size: var(--text-md); }
  .daybar .date, .daybar form { flex: 1 1 100%; }
  .daybar > a.btn { flex: 1 1 0; width: auto; text-align: center; }
  .statusacts form { flex: 1 1 100%; }
  .detail { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .detail dd { margin-bottom: var(--space-2); }
}

/* ── 注意 ── */
.callout {
  display: flex; gap: var(--space-3); align-items: flex-start; background: var(--amber-bg);
  border-radius: var(--radius-3); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; font-size: var(--text-base);
  border-left: 3px solid var(--unrecorded-line);
}
.callout .ico { color: var(--amber); font-weight: 700; flex: none; }
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-1); color: var(--text-2); }

/* ── フォーム ── */
.panel { border: 1px solid var(--line-soft); border-radius: var(--radius-2); padding: var(--space-4); position: relative; overflow: hidden; }
.panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rail-thin);
}
.formrow { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label, .field .grouplabel { font-size: var(--text-xs); color: var(--text-2); }
.field input, .field select,
.setting input:not([type="checkbox"]):not([type="radio"]), .setting select, .setting textarea {
  font: inherit; font-size: var(--text-sm); padding: var(--space-2) var(--space-2); border-radius: var(--radius-1);
  border: 1px solid var(--line); background: #fff; color: var(--text);
}
.field input, .field select { min-width: 148px; }
.field input:hover, .field select:hover,
.setting input:not([type="checkbox"]):not([type="radio"]):hover, .setting select:hover,
.setting textarea:hover { border-color: var(--line-strong); }
/*
  select の矢印を自前で描く。**OSごとの見た目を揃える。**
  Why not 素のまま: macOS と Windows で高さも矢印も違い、隣の input と揃わない。
  背景画像は CSP の img-src に引っかからないよう、グラデーションで三角を作る。
*/
.field select, .setting select {
  appearance: none; -webkit-appearance: none; padding-right: var(--space-5);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus-visible, .field select:focus-visible,
.setting input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.setting select:focus-visible, .setting textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue);
}
.hint { font-size: var(--text-sm); color: var(--text-2); margin: var(--space-3) 0 0; }
.days, .staffpick { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.days span, .staffpick span { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); border: 1px solid var(--line); color: var(--text-2); }
.days span.on, .staffpick span.on { background: var(--tint); border-color: var(--blue); color: var(--blue-dark); font-weight: 500; }
.radio { display: flex; flex-direction: column; gap: var(--space-2); }
.radio label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.radio .d { display: block; font-size: var(--text-xs); color: var(--text-2); margin-top: var(--space-1); }

/*
  ── 設定のフォーム（テナント / 予約 / AIの話し方 の3枚） ──
  .settings が1つのフォームで、その中に .panel（セクション）を並べる。
  AIの話し方はパネルが2つだが、フォームは1つ（声とモデルと指示文を
  1度に保存する。分けると、片方だけ送ったときに指示文が消える）。
  Why not .field をそのまま使う: ラベルが上に付く形で、設定の画面では
  「左にラベル・右に入力」の2列が読みやすい。項目どうしは細い線で区切る。
*/
.settings { display: flex; flex-direction: column; }
.settings .panel { margin: 0; }
.settings .panel + .panel { margin-top: var(--space-6); }
/*
  フォーム（.settings）の後に並ぶ読み取りパネル（テナントの設定の
  契約中の機能・着信番号・通知先）。パネルどうしの間は --space-6。
*/
.settings ~ .panel { margin-top: var(--space-6); }
.settings .panel > h2,
.settings ~ .panel > h2 {
  margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: 500; color: var(--navy);
}
.setting {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  column-gap: var(--space-5); row-gap: var(--space-1);
  align-items: start; padding: var(--space-2) 0;
}
/*
  項目どうしは細い線で区切る。**下線ではなく次の項目の上線にする。**
  Why not border-bottom: 最後の .setting の直後に .formfoot が来ると、
  項目の下線とフッターの上線が重なって2本になる（レビュー指摘）。
*/
.setting + .setting { border-top: 1px solid var(--line-soft); }
/*
  ラベルは上の余白で、1行目の入力欄の文字の高さに合わせる。
  Why not align-items: baseline: 右の列は .control（flex column）なので、
  グリッドの baseline が flex コンテナの下辺になってラベルが上に浮く。
*/
.setting .label { font-size: var(--text-sm); color: var(--text); padding-top: var(--space-2); }
.setting .control { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* 補足は小さく。**入力欄の直下（.control の gap）に置く。** */
.setting .hint { margin: 0; font-size: var(--text-xs); color: var(--text-2); }
/* チェックボックスはラベルの本文と横並び。 */
.setting .check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
/*
  短い入力欄（input / select）は右の列いっぱいに広げず、最大 360px に収める。
  textarea（指示文）だけは幅いっぱい（下の .setting textarea）。
*/
.setting input:not([type="checkbox"]):not([type="radio"]),
.setting select { width: 100%; min-width: 0; max-width: 360px; }
.setting textarea { width: 100%; min-width: 0; min-height: 8em; resize: vertical; }
.formfoot {
  display: flex; justify-content: flex-end;
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 900px) {
  .setting { grid-template-columns: 1fr; row-gap: var(--space-2); }
}

/*
  ── 選択の部品 ──
  **素の見た目を消して自前で描く。** ブラウザ既定のチェックボックスとラジオは
  OSごとに色も大きさも違い、ここだけ浮いて見える（実機で指摘された）。
  appearance: none で土台を消し、印は ::after で描く。
  Why not span で描いて input を隠す: キーボードで操作できなくなり、
  フォームの送信にも自前のJSが要る。**本物の input のまま見た目だけ替える。**
*/
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  /*
    .field input の min-width: 148px と padding: 6px 10px を打ち消す。
    Why not .field 側で直す: .field はテナント画面でも使われており、
    この画面群で共通のチェックボックス・ラジオボタンの見た目を
    一箇所（このセレクタ）で決めたい。
  */
  width: 16px; min-width: 16px; height: 16px; flex: none; margin: 0; padding: 0;
  border: 1.5px solid var(--control-border); background: #fff;
  position: relative; cursor: pointer; vertical-align: -3px;
}
input[type="checkbox"] { border-radius: var(--radius-1); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--blue-dark); border-color: var(--blue-dark);
}
/* チェックの印。傾けた L 字。 */
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: var(--space-1); top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: var(--space-1); border-radius: 50%; background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: default; }

/*
  選択肢を並べる帯（曜日・担当者）。**ラベルごと押せるようにする。**
  チェックボックスは隠さず左に置く。何が選ばれているか、印と色の両方で分かる。
*/
.days label, .staffpick label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-1);
  border: 1px solid var(--line); color: var(--text-2); cursor: pointer;
  background: #fff;
}
.days label:hover, .staffpick label:hover { border-color: var(--line-strong); }
.days label.on, .staffpick label.on {
  background: var(--tint); border-color: var(--blue); color: var(--blue-dark); font-weight: 500;
}
.days label:focus-within, .staffpick label:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.preview { margin-top: var(--space-5); border-top: 1px solid var(--line-soft); padding-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-base); }
.preview .big { font-size: var(--text-2xl); font-weight: 500; color: var(--navy); }

section { margin-top: var(--space-6); }
section > h2 { font-size: var(--text-md); font-weight: 500; margin: 0 0 var(--space-1); color: var(--navy); }
section > .sub { margin-bottom: var(--space-4); }

/* ── 業務との対応。ここだけ濃紺の面（スライドの締めページと同じ扱い） ── */
.memo {
  margin-top: 48px; border-radius: var(--radius-3); padding: var(--space-5) var(--space-6); color: var(--memo-fg);
  background:
    radial-gradient(760px 260px at 12% -30%, rgba(var(--memo-glow-blue-rgb), .30), transparent 70%),
    radial-gradient(680px 300px at 92% 130%, rgba(var(--memo-glow-violet-rgb), .34), transparent 70%),
    var(--navy);
}
.memo h2 { font-size: var(--text-xl); font-weight: 500; margin: 0 0 var(--space-2); color: var(--on-accent); }
.memo .sub { color: var(--memo-fg-muted); }
.memo dl { margin: 0; display: grid; grid-template-columns: 210px 1fr; gap: var(--space-3) var(--space-5); font-size: var(--text-base); }
.memo dt { color: var(--memo-dt); }
.memo dd { margin: 0; }
.memo b { color: var(--on-accent); }
.memo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); background: rgba(var(--white-rgb), .10); padding: 1px var(--space-2); border-radius: var(--radius-1); }

@media (max-width: 900px) {
  .shell { display: block; }
  .side {
    width: auto; border-bottom: 1px solid var(--line-soft);
    min-height: 0; padding: var(--space-2) 0; flex-direction: row; align-items: center;
  }
  .side nav { flex-direction: row; overflow-x: auto; }
  .packgroup { flex-direction: row; align-items: center; }
  .side .packitem { height: 36px; line-height: 36px; padding: 0 var(--space-3); }
  .side .packitem::before { display: none; }
  .side .signout { margin: 0 var(--space-2); }
  .side .group { display: none; }
  .side a { border-radius: var(--radius-pill); margin: 0 var(--space-1); white-space: nowrap; }
  main { border-left: 0; padding: var(--space-4) var(--space-4) var(--space-7); }
  .appbar .brand { min-width: 0; }
  .memo { padding: var(--space-5) var(--space-4); }
  .memo dl { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .memo dd { margin-bottom: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── 通話の記録（既存の画面が使う） ── */
.calls { display: grid; gap: var(--space-2); }
.call {
  display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-3);
  color: inherit; text-decoration: none; background: var(--bg);
}
.call:hover { border-color: var(--blue); background: var(--row-hover); }
.call.warn { border-color: var(--unrecorded-line); }
audio { width: 100%; margin: var(--space-3) 0; }
.segment {
  display: grid; grid-template-columns: 120px 90px 1fr; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); align-items: start; font-size: var(--text-base);
}
.segment .time { color: var(--blue-dark); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.segment.left { border-left: 3px solid var(--blue); padding-left: var(--space-2); }
.segment.right { border-left: 3px solid var(--violet); padding-left: var(--space-2); }
.segment.silence { color: var(--text-2); font-style: italic; }
code { color: var(--text-2); font-size: var(--text-sm); word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--text-2); }
.error { color: var(--red); min-height: 24px; }
.ok { color: var(--green); }
.warn { color: var(--amber); }
/*
  運営画面（ログイン結果・支援の結果）のメッセージ。
  **素の <p> のままにしない。** 左の細い帯と薄い地で、本文と区別できるようにする。
*/
.message {
  margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2);
  background: var(--surface-2); border-left: 3px solid var(--blue); font-size: var(--text-base);
}
h2 { font-size: var(--text-md); font-weight: 500; margin: var(--space-5) 0 var(--space-2); color: var(--navy); }
h3 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); color: var(--text-2); font-weight: 500; }
.card { border: 1px solid var(--line-soft); border-radius: var(--radius-2); padding: var(--space-3); margin-top: var(--space-3); background: var(--bg); }
textarea {
  width: 100%; background: #fff; color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: var(--space-3); font: inherit; font-size: var(--text-base); line-height: 1.7;
}
textarea:focus-visible { outline: 2px solid var(--blue); border-color: var(--blue); }
form.toolbar { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-4) 0; flex-wrap: wrap; }
form.toolbar input {
  font: inherit; font-size: var(--text-sm); padding: var(--space-2) var(--space-2); border-radius: var(--radius-1);
  border: 1px solid var(--line); background: #fff; color: var(--text);
}
form.toolbar input:focus-visible { outline: 2px solid var(--blue); border-color: var(--blue); }
form.toolbar button {
  font: inherit; font-size: var(--text-base); font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--radius-2);
  border: 1px solid transparent; color: var(--on-accent); cursor: pointer;
  background: var(--btn-grad);
}
/* リンクをボタンの見た目にする（Googleログインなど、フォームのPOSTでは済まない遷移）。 */
a.button {
  display: inline-block; font-size: var(--text-base); font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--radius-2);
  border: 1px solid transparent; color: var(--on-accent); text-decoration: none;
  background: var(--btn-grad);
}
ul { margin: var(--space-2) 0; padding-left: var(--space-5); font-size: var(--text-base); }
li { margin: var(--space-1) 0; }

/*
  ── /ops の枠 ──
  テナント画面の shell（サイドバー・パック切り替え）は流用しない。
  /ops はテナント横断の運営画面で、今後もここに画面が増える前提。
*/
.ops { background: var(--bg); }
.ops-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--space-5); background: var(--rail); color: var(--on-accent); font-size: var(--text-base);
}
.ops-header button {
  font: inherit; font-size: var(--text-sm); color: var(--on-accent); background: rgba(var(--white-rgb), .14);
  border: 1px solid rgba(var(--white-rgb), .30); border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); cursor: pointer;
}
.ops-header button:hover { background: rgba(var(--white-rgb), .24); }
/*
  border-left は main セレクタ（テナント画面のサイドバー境界線）の名残。
  /ops はサイドバーを持たないので、境界線だけが不自然な余白として残る。
*/
.ops main { max-width: 880px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-7); border-left: 0; }
.tenant-id {
  display: block; font-size: var(--text-xs); color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.at-0{left:0%}
.at-1{left:0.3472%}.len-1{width:0.3472%}
.at-2{left:0.6944%}.len-2{width:0.6944%}
.at-3{left:1.0417%}.len-3{width:1.0417%}
.at-4{left:1.3889%}.len-4{width:1.3889%}
.at-5{left:1.7361%}.len-5{width:1.7361%}
.at-6{left:2.0833%}.len-6{width:2.0833%}
.at-7{left:2.4306%}.len-7{width:2.4306%}
.at-8{left:2.7778%}.len-8{width:2.7778%}
.at-9{left:3.125%}.len-9{width:3.125%}
.at-10{left:3.4722%}.len-10{width:3.4722%}
.at-11{left:3.8194%}.len-11{width:3.8194%}
.at-12{left:4.1667%}.len-12{width:4.1667%}
.at-13{left:4.5139%}.len-13{width:4.5139%}
.at-14{left:4.8611%}.len-14{width:4.8611%}
.at-15{left:5.2083%}.len-15{width:5.2083%}
.at-16{left:5.5556%}.len-16{width:5.5556%}
.at-17{left:5.9028%}.len-17{width:5.9028%}
.at-18{left:6.25%}.len-18{width:6.25%}
.at-19{left:6.5972%}.len-19{width:6.5972%}
.at-20{left:6.9444%}.len-20{width:6.9444%}
.at-21{left:7.2917%}.len-21{width:7.2917%}
.at-22{left:7.6389%}.len-22{width:7.6389%}
.at-23{left:7.9861%}.len-23{width:7.9861%}
.at-24{left:8.3333%}.len-24{width:8.3333%}
.at-25{left:8.6806%}.len-25{width:8.6806%}
.at-26{left:9.0278%}.len-26{width:9.0278%}
.at-27{left:9.375%}.len-27{width:9.375%}
.at-28{left:9.7222%}.len-28{width:9.7222%}
.at-29{left:10.0694%}.len-29{width:10.0694%}
.at-30{left:10.4167%}.len-30{width:10.4167%}
.at-31{left:10.7639%}.len-31{width:10.7639%}
.at-32{left:11.1111%}.len-32{width:11.1111%}
.at-33{left:11.4583%}.len-33{width:11.4583%}
.at-34{left:11.8056%}.len-34{width:11.8056%}
.at-35{left:12.1528%}.len-35{width:12.1528%}
.at-36{left:12.5%}.len-36{width:12.5%}
.at-37{left:12.8472%}.len-37{width:12.8472%}
.at-38{left:13.1944%}.len-38{width:13.1944%}
.at-39{left:13.5417%}.len-39{width:13.5417%}
.at-40{left:13.8889%}.len-40{width:13.8889%}
.at-41{left:14.2361%}.len-41{width:14.2361%}
.at-42{left:14.5833%}.len-42{width:14.5833%}
.at-43{left:14.9306%}.len-43{width:14.9306%}
.at-44{left:15.2778%}.len-44{width:15.2778%}
.at-45{left:15.625%}.len-45{width:15.625%}
.at-46{left:15.9722%}.len-46{width:15.9722%}
.at-47{left:16.3194%}.len-47{width:16.3194%}
.at-48{left:16.6667%}.len-48{width:16.6667%}
.at-49{left:17.0139%}.len-49{width:17.0139%}
.at-50{left:17.3611%}.len-50{width:17.3611%}
.at-51{left:17.7083%}.len-51{width:17.7083%}
.at-52{left:18.0556%}.len-52{width:18.0556%}
.at-53{left:18.4028%}.len-53{width:18.4028%}
.at-54{left:18.75%}.len-54{width:18.75%}
.at-55{left:19.0972%}.len-55{width:19.0972%}
.at-56{left:19.4444%}.len-56{width:19.4444%}
.at-57{left:19.7917%}.len-57{width:19.7917%}
.at-58{left:20.1389%}.len-58{width:20.1389%}
.at-59{left:20.4861%}.len-59{width:20.4861%}
.at-60{left:20.8333%}.len-60{width:20.8333%}
.at-61{left:21.1806%}.len-61{width:21.1806%}
.at-62{left:21.5278%}.len-62{width:21.5278%}
.at-63{left:21.875%}.len-63{width:21.875%}
.at-64{left:22.2222%}.len-64{width:22.2222%}
.at-65{left:22.5694%}.len-65{width:22.5694%}
.at-66{left:22.9167%}.len-66{width:22.9167%}
.at-67{left:23.2639%}.len-67{width:23.2639%}
.at-68{left:23.6111%}.len-68{width:23.6111%}
.at-69{left:23.9583%}.len-69{width:23.9583%}
.at-70{left:24.3056%}.len-70{width:24.3056%}
.at-71{left:24.6528%}.len-71{width:24.6528%}
.at-72{left:25%}.len-72{width:25%}
.at-73{left:25.3472%}.len-73{width:25.3472%}
.at-74{left:25.6944%}.len-74{width:25.6944%}
.at-75{left:26.0417%}.len-75{width:26.0417%}
.at-76{left:26.3889%}.len-76{width:26.3889%}
.at-77{left:26.7361%}.len-77{width:26.7361%}
.at-78{left:27.0833%}.len-78{width:27.0833%}
.at-79{left:27.4306%}.len-79{width:27.4306%}
.at-80{left:27.7778%}.len-80{width:27.7778%}
.at-81{left:28.125%}.len-81{width:28.125%}
.at-82{left:28.4722%}.len-82{width:28.4722%}
.at-83{left:28.8194%}.len-83{width:28.8194%}
.at-84{left:29.1667%}.len-84{width:29.1667%}
.at-85{left:29.5139%}.len-85{width:29.5139%}
.at-86{left:29.8611%}.len-86{width:29.8611%}
.at-87{left:30.2083%}.len-87{width:30.2083%}
.at-88{left:30.5556%}.len-88{width:30.5556%}
.at-89{left:30.9028%}.len-89{width:30.9028%}
.at-90{left:31.25%}.len-90{width:31.25%}
.at-91{left:31.5972%}.len-91{width:31.5972%}
.at-92{left:31.9444%}.len-92{width:31.9444%}
.at-93{left:32.2917%}.len-93{width:32.2917%}
.at-94{left:32.6389%}.len-94{width:32.6389%}
.at-95{left:32.9861%}.len-95{width:32.9861%}
.at-96{left:33.3333%}.len-96{width:33.3333%}
.at-97{left:33.6806%}.len-97{width:33.6806%}
.at-98{left:34.0278%}.len-98{width:34.0278%}
.at-99{left:34.375%}.len-99{width:34.375%}
.at-100{left:34.7222%}.len-100{width:34.7222%}
.at-101{left:35.0694%}.len-101{width:35.0694%}
.at-102{left:35.4167%}.len-102{width:35.4167%}
.at-103{left:35.7639%}.len-103{width:35.7639%}
.at-104{left:36.1111%}.len-104{width:36.1111%}
.at-105{left:36.4583%}.len-105{width:36.4583%}
.at-106{left:36.8056%}.len-106{width:36.8056%}
.at-107{left:37.1528%}.len-107{width:37.1528%}
.at-108{left:37.5%}.len-108{width:37.5%}
.at-109{left:37.8472%}.len-109{width:37.8472%}
.at-110{left:38.1944%}.len-110{width:38.1944%}
.at-111{left:38.5417%}.len-111{width:38.5417%}
.at-112{left:38.8889%}.len-112{width:38.8889%}
.at-113{left:39.2361%}.len-113{width:39.2361%}
.at-114{left:39.5833%}.len-114{width:39.5833%}
.at-115{left:39.9306%}.len-115{width:39.9306%}
.at-116{left:40.2778%}.len-116{width:40.2778%}
.at-117{left:40.625%}.len-117{width:40.625%}
.at-118{left:40.9722%}.len-118{width:40.9722%}
.at-119{left:41.3194%}.len-119{width:41.3194%}
.at-120{left:41.6667%}.len-120{width:41.6667%}
.at-121{left:42.0139%}.len-121{width:42.0139%}
.at-122{left:42.3611%}.len-122{width:42.3611%}
.at-123{left:42.7083%}.len-123{width:42.7083%}
.at-124{left:43.0556%}.len-124{width:43.0556%}
.at-125{left:43.4028%}.len-125{width:43.4028%}
.at-126{left:43.75%}.len-126{width:43.75%}
.at-127{left:44.0972%}.len-127{width:44.0972%}
.at-128{left:44.4444%}.len-128{width:44.4444%}
.at-129{left:44.7917%}.len-129{width:44.7917%}
.at-130{left:45.1389%}.len-130{width:45.1389%}
.at-131{left:45.4861%}.len-131{width:45.4861%}
.at-132{left:45.8333%}.len-132{width:45.8333%}
.at-133{left:46.1806%}.len-133{width:46.1806%}
.at-134{left:46.5278%}.len-134{width:46.5278%}
.at-135{left:46.875%}.len-135{width:46.875%}
.at-136{left:47.2222%}.len-136{width:47.2222%}
.at-137{left:47.5694%}.len-137{width:47.5694%}
.at-138{left:47.9167%}.len-138{width:47.9167%}
.at-139{left:48.2639%}.len-139{width:48.2639%}
.at-140{left:48.6111%}.len-140{width:48.6111%}
.at-141{left:48.9583%}.len-141{width:48.9583%}
.at-142{left:49.3056%}.len-142{width:49.3056%}
.at-143{left:49.6528%}.len-143{width:49.6528%}
.at-144{left:50%}.len-144{width:50%}
.at-145{left:50.3472%}.len-145{width:50.3472%}
.at-146{left:50.6944%}.len-146{width:50.6944%}
.at-147{left:51.0417%}.len-147{width:51.0417%}
.at-148{left:51.3889%}.len-148{width:51.3889%}
.at-149{left:51.7361%}.len-149{width:51.7361%}
.at-150{left:52.0833%}.len-150{width:52.0833%}
.at-151{left:52.4306%}.len-151{width:52.4306%}
.at-152{left:52.7778%}.len-152{width:52.7778%}
.at-153{left:53.125%}.len-153{width:53.125%}
.at-154{left:53.4722%}.len-154{width:53.4722%}
.at-155{left:53.8194%}.len-155{width:53.8194%}
.at-156{left:54.1667%}.len-156{width:54.1667%}
.at-157{left:54.5139%}.len-157{width:54.5139%}
.at-158{left:54.8611%}.len-158{width:54.8611%}
.at-159{left:55.2083%}.len-159{width:55.2083%}
.at-160{left:55.5556%}.len-160{width:55.5556%}
.at-161{left:55.9028%}.len-161{width:55.9028%}
.at-162{left:56.25%}.len-162{width:56.25%}
.at-163{left:56.5972%}.len-163{width:56.5972%}
.at-164{left:56.9444%}.len-164{width:56.9444%}
.at-165{left:57.2917%}.len-165{width:57.2917%}
.at-166{left:57.6389%}.len-166{width:57.6389%}
.at-167{left:57.9861%}.len-167{width:57.9861%}
.at-168{left:58.3333%}.len-168{width:58.3333%}
.at-169{left:58.6806%}.len-169{width:58.6806%}
.at-170{left:59.0278%}.len-170{width:59.0278%}
.at-171{left:59.375%}.len-171{width:59.375%}
.at-172{left:59.7222%}.len-172{width:59.7222%}
.at-173{left:60.0694%}.len-173{width:60.0694%}
.at-174{left:60.4167%}.len-174{width:60.4167%}
.at-175{left:60.7639%}.len-175{width:60.7639%}
.at-176{left:61.1111%}.len-176{width:61.1111%}
.at-177{left:61.4583%}.len-177{width:61.4583%}
.at-178{left:61.8056%}.len-178{width:61.8056%}
.at-179{left:62.1528%}.len-179{width:62.1528%}
.at-180{left:62.5%}.len-180{width:62.5%}
.at-181{left:62.8472%}.len-181{width:62.8472%}
.at-182{left:63.1944%}.len-182{width:63.1944%}
.at-183{left:63.5417%}.len-183{width:63.5417%}
.at-184{left:63.8889%}.len-184{width:63.8889%}
.at-185{left:64.2361%}.len-185{width:64.2361%}
.at-186{left:64.5833%}.len-186{width:64.5833%}
.at-187{left:64.9306%}.len-187{width:64.9306%}
.at-188{left:65.2778%}.len-188{width:65.2778%}
.at-189{left:65.625%}.len-189{width:65.625%}
.at-190{left:65.9722%}.len-190{width:65.9722%}
.at-191{left:66.3194%}.len-191{width:66.3194%}
.at-192{left:66.6667%}.len-192{width:66.6667%}
.at-193{left:67.0139%}.len-193{width:67.0139%}
.at-194{left:67.3611%}.len-194{width:67.3611%}
.at-195{left:67.7083%}.len-195{width:67.7083%}
.at-196{left:68.0556%}.len-196{width:68.0556%}
.at-197{left:68.4028%}.len-197{width:68.4028%}
.at-198{left:68.75%}.len-198{width:68.75%}
.at-199{left:69.0972%}.len-199{width:69.0972%}
.at-200{left:69.4444%}.len-200{width:69.4444%}
.at-201{left:69.7917%}.len-201{width:69.7917%}
.at-202{left:70.1389%}.len-202{width:70.1389%}
.at-203{left:70.4861%}.len-203{width:70.4861%}
.at-204{left:70.8333%}.len-204{width:70.8333%}
.at-205{left:71.1806%}.len-205{width:71.1806%}
.at-206{left:71.5278%}.len-206{width:71.5278%}
.at-207{left:71.875%}.len-207{width:71.875%}
.at-208{left:72.2222%}.len-208{width:72.2222%}
.at-209{left:72.5694%}.len-209{width:72.5694%}
.at-210{left:72.9167%}.len-210{width:72.9167%}
.at-211{left:73.2639%}.len-211{width:73.2639%}
.at-212{left:73.6111%}.len-212{width:73.6111%}
.at-213{left:73.9583%}.len-213{width:73.9583%}
.at-214{left:74.3056%}.len-214{width:74.3056%}
.at-215{left:74.6528%}.len-215{width:74.6528%}
.at-216{left:75%}.len-216{width:75%}
.at-217{left:75.3472%}.len-217{width:75.3472%}
.at-218{left:75.6944%}.len-218{width:75.6944%}
.at-219{left:76.0417%}.len-219{width:76.0417%}
.at-220{left:76.3889%}.len-220{width:76.3889%}
.at-221{left:76.7361%}.len-221{width:76.7361%}
.at-222{left:77.0833%}.len-222{width:77.0833%}
.at-223{left:77.4306%}.len-223{width:77.4306%}
.at-224{left:77.7778%}.len-224{width:77.7778%}
.at-225{left:78.125%}.len-225{width:78.125%}
.at-226{left:78.4722%}.len-226{width:78.4722%}
.at-227{left:78.8194%}.len-227{width:78.8194%}
.at-228{left:79.1667%}.len-228{width:79.1667%}
.at-229{left:79.5139%}.len-229{width:79.5139%}
.at-230{left:79.8611%}.len-230{width:79.8611%}
.at-231{left:80.2083%}.len-231{width:80.2083%}
.at-232{left:80.5556%}.len-232{width:80.5556%}
.at-233{left:80.9028%}.len-233{width:80.9028%}
.at-234{left:81.25%}.len-234{width:81.25%}
.at-235{left:81.5972%}.len-235{width:81.5972%}
.at-236{left:81.9444%}.len-236{width:81.9444%}
.at-237{left:82.2917%}.len-237{width:82.2917%}
.at-238{left:82.6389%}.len-238{width:82.6389%}
.at-239{left:82.9861%}.len-239{width:82.9861%}
.at-240{left:83.3333%}.len-240{width:83.3333%}
.at-241{left:83.6806%}.len-241{width:83.6806%}
.at-242{left:84.0278%}.len-242{width:84.0278%}
.at-243{left:84.375%}.len-243{width:84.375%}
.at-244{left:84.7222%}.len-244{width:84.7222%}
.at-245{left:85.0694%}.len-245{width:85.0694%}
.at-246{left:85.4167%}.len-246{width:85.4167%}
.at-247{left:85.7639%}.len-247{width:85.7639%}
.at-248{left:86.1111%}.len-248{width:86.1111%}
.at-249{left:86.4583%}.len-249{width:86.4583%}
.at-250{left:86.8056%}.len-250{width:86.8056%}
.at-251{left:87.1528%}.len-251{width:87.1528%}
.at-252{left:87.5%}.len-252{width:87.5%}
.at-253{left:87.8472%}.len-253{width:87.8472%}
.at-254{left:88.1944%}.len-254{width:88.1944%}
.at-255{left:88.5417%}.len-255{width:88.5417%}
.at-256{left:88.8889%}.len-256{width:88.8889%}
.at-257{left:89.2361%}.len-257{width:89.2361%}
.at-258{left:89.5833%}.len-258{width:89.5833%}
.at-259{left:89.9306%}.len-259{width:89.9306%}
.at-260{left:90.2778%}.len-260{width:90.2778%}
.at-261{left:90.625%}.len-261{width:90.625%}
.at-262{left:90.9722%}.len-262{width:90.9722%}
.at-263{left:91.3194%}.len-263{width:91.3194%}
.at-264{left:91.6667%}.len-264{width:91.6667%}
.at-265{left:92.0139%}.len-265{width:92.0139%}
.at-266{left:92.3611%}.len-266{width:92.3611%}
.at-267{left:92.7083%}.len-267{width:92.7083%}
.at-268{left:93.0556%}.len-268{width:93.0556%}
.at-269{left:93.4028%}.len-269{width:93.4028%}
.at-270{left:93.75%}.len-270{width:93.75%}
.at-271{left:94.0972%}.len-271{width:94.0972%}
.at-272{left:94.4444%}.len-272{width:94.4444%}
.at-273{left:94.7917%}.len-273{width:94.7917%}
.at-274{left:95.1389%}.len-274{width:95.1389%}
.at-275{left:95.4861%}.len-275{width:95.4861%}
.at-276{left:95.8333%}.len-276{width:95.8333%}
.at-277{left:96.1806%}.len-277{width:96.1806%}
.at-278{left:96.5278%}.len-278{width:96.5278%}
.at-279{left:96.875%}.len-279{width:96.875%}
.at-280{left:97.2222%}.len-280{width:97.2222%}
.at-281{left:97.5694%}.len-281{width:97.5694%}
.at-282{left:97.9167%}.len-282{width:97.9167%}
.at-283{left:98.2639%}.len-283{width:98.2639%}
.at-284{left:98.6111%}.len-284{width:98.6111%}
.at-285{left:98.9583%}.len-285{width:98.9583%}
.at-286{left:99.3056%}.len-286{width:99.3056%}
.at-287{left:99.6528%}.len-287{width:99.6528%}
.at-288{left:100%}.len-288{width:100%}
.grid.h-1{min-width:calc(128px + 62px * 1)}
.grid.h-2{min-width:calc(128px + 62px * 2)}
.grid.h-3{min-width:calc(128px + 62px * 3)}
.grid.h-4{min-width:calc(128px + 62px * 4)}
.grid.h-5{min-width:calc(128px + 62px * 5)}
.grid.h-6{min-width:calc(128px + 62px * 6)}
.grid.h-7{min-width:calc(128px + 62px * 7)}
.grid.h-8{min-width:calc(128px + 62px * 8)}
.grid.h-9{min-width:calc(128px + 62px * 9)}
.grid.h-10{min-width:calc(128px + 62px * 10)}
.grid.h-11{min-width:calc(128px + 62px * 11)}
.grid.h-12{min-width:calc(128px + 62px * 12)}
.grid.h-13{min-width:calc(128px + 62px * 13)}
.grid.h-14{min-width:calc(128px + 62px * 14)}
.grid.h-15{min-width:calc(128px + 62px * 15)}
.grid.h-16{min-width:calc(128px + 62px * 16)}
.grid.h-17{min-width:calc(128px + 62px * 17)}
.grid.h-18{min-width:calc(128px + 62px * 18)}
.grid.h-19{min-width:calc(128px + 62px * 19)}
.grid.h-20{min-width:calc(128px + 62px * 20)}
.grid.h-21{min-width:calc(128px + 62px * 21)}
.grid.h-22{min-width:calc(128px + 62px * 22)}
.grid.h-23{min-width:calc(128px + 62px * 23)}
.grid.h-24{min-width:calc(128px + 62px * 24)}

.authshell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--surface); padding: var(--space-5);
}
.authcard {
  width: 100%; max-width: 360px; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: var(--radius-3);
  padding: var(--space-6) var(--space-5); position: relative; overflow: hidden;
}
.authcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rail-thin);
}
.authcard h1 { text-align: center; margin: 0 0 var(--space-5); }
.authcard form { display: flex; flex-direction: column; gap: var(--space-3); }
.authcard .field input { width: 100%; }