/* 自動生成: build_tokens.py — 直接編集しない。tokens.json を直して再生成する。
 * 参照UI: CARAVAN / ウカガイ（色）＋ 標準SaaSスケール（構造） https://caravanbase.jp / https://ukagai.caravanbase.jp
 * 抽出日: 2026-08-06
 */
:root {

  /* border */
  --border-width-hairline: 1px;
  --border-width-thick: 2px;

  /* color */
  --color-accent-active: #82281E;
  --color-accent-default: #B3392A;
  --color-accent-hover: #9A3024;
  --color-accent-subtle: #FBEDE9;
  --color-bg-active: #EBEFF5;
  --color-bg-canvas: #FFFFFF;
  --color-bg-hover: #F4F7FA;
  --color-bg-raised: #FFFFFF;
  --color-bg-selected: #FBEDE9;
  --color-bg-sunken: #F4F7FA;
  --color-bg-surface: #FFFFFF;
  --color-border-default: #D4DEE9;
  --color-border-focus: #B3392A;
  --color-border-strong: #B8C2CF;
  --color-border-subtle: #E3E8EE;
  --color-busy-bg: #F4F7FA;
  --color-busy-bg-cont: #F7F9FC;
  --color-busy-border: #E3E8EE;
  --color-busy-ink: #8792A2;
  --color-busy-ink-strong: #697386;
  --color-fg-disabled: #A3ACBA;
  --color-fg-inverse: #FFFFFF;
  --color-fg-muted: #697386;
  --color-fg-on-accent: #FFFFFF;
  --color-fg-primary: #1A1F36;
  --color-fg-secondary: #414552;
  --color-overlay-scrim: rgba(26,31,54,0.45);
  --color-state-danger: #A02617;
  --color-state-danger-bg: #FBEDE9;
  --color-state-danger-border: #E6C9C4;
  --color-state-info: #2F5D7D;
  --color-state-info-bg: #E9F0F5;
  --color-state-info-border: #C9DCE8;
  --color-state-success: #2F7D5E;
  --color-state-success-bg: #EAF3EF;
  --color-state-success-border: #BFDCCF;
  --color-state-success-hover: #276A4F;
  --color-state-warning: #A96A1F;
  --color-state-warning-bg: #FAF1E3;
  --color-state-warning-border: #EAD9BE;

  /* density */
  --density-control_height_lg: 48px;
  --density-control_height_md: 40px;
  --density-control_height_sm: 32px;
  --density-focus_ring: 2px;
  --density-page_max_width: 760px;
  --density-sidebar_width: 240px;
  --density-table_row_height: 48px;

  /* font */
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-leading-none: 1;
  --font-leading-normal: 1.7;
  --font-leading-relaxed: 1.9;
  --font-leading-snug: 1.6;
  --font-leading-tight: 1.4;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 13px;
  --font-size-xl: 21px;
  --font-size-xs: 12px;
  --font-tracking-normal: 0.02em;
  --font-tracking-tight: 0em;
  --font-tracking-wide: 0.22em;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* motion */
  --motion-duration-fast: 120ms;
  --motion-duration-instant: 80ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 320ms;
  --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* radius
     【丸めすぎない】
     以前は lg:14 / md:10 / sm:6 で、カードもボタンも入力欄もバッジも全部が丸かった。
     角が丸いものばかりが並ぶと、作りが柔らかく見えて「中身も軽い」印象になる。
     勤怠は賃金の記録を扱う道具なので、そこは崩したくない。
     角は「触れるものを示す印」として控えめに使い、面（カード）はほぼ角のままにする。 */
  --radius-full: 9999px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-xl: 10px;

  /* shadow */
  --shadow-lg: 0 12px 32px rgba(26,31,54,0.14);
  --shadow-md: 0 4px 12px rgba(26,31,54,0.10);
  --shadow-none: none;
  --shadow-sm: 0 0 4px rgba(26,31,54,0.10);

  /* space */
  --space-0: 0px;
  --space-05: 2px;
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-20: 80px;
  --space-24: 96px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}


*, *::before, *::after { box-sizing: border-box; }

/* 隠したものは、必ず隠れる。
   ブラウザは hidden を「display: none」で消しているだけなので、
   こちらで .field に display: grid と書いていると、そちらが勝って
   隠したはずの欄がそのまま出ていた（法定休日の「どの曜日」が
   ずっと見えていたのはこれが原因）。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-fg-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-normal);
  letter-spacing: var(--font-tracking-normal);
  /* 日本語の約物の余分な空きを詰める */
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3 { line-height: var(--font-leading-tight); margin: 0; }

/* 文章の中のリンク。既定のままだと青くなって、この画面だけ浮く。
   ボタン・タブ・フッターはそれぞれ自前で色を持っているので、ここでは触らない */
.page a:not(.btn):not(.subnav__item) {
  color: var(--color-accent-default);
  text-decoration: underline;
  text-underline-offset: var(--space-05);
}

.page {
  max-width: var(--density-page_max_width);
  margin: 0 auto;
  padding: var(--space-4);
}

/* ---------- ヘッダ ---------- */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.appbar__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
/* 冠。サービス名より一段落として、店舗名より前に出ないようにする */
.appbar__by {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-fg-muted);
  letter-spacing: var(--font-tracking-normal);
  white-space: nowrap;
}
.appbar__sub {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}

.sitefoot {
  padding: var(--space-8) var(--space-4) var(--space-10);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-fg-disabled);
  letter-spacing: var(--font-tracking-normal);
}
/* スマホ幅で4本並ぶので、折り返す前提で組む */
.sitefoot__links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}
.sitefoot__links a {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.sitefoot__links a:hover {
  text-decoration: underline;
}

/* ---------- カード ---------- */
.card {
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
.card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

/* ---------- 打刻の状態表示 ---------- */
.status {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.status__label {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}
.status__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-none);
}
.status__detail {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-fg-secondary);
}
.status--working .status__value { color: var(--color-state-success); }
.status--on_break .status__value { color: var(--color-state-warning); }
.status--not_working .status__value { color: var(--color-fg-secondary); }

.clock {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-tight);
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--density-control_height_lg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
  cursor: pointer;
  /* <a> をボタンとして使う場所（ログイン・画面の移動）で、
     文字に下線が出てしまっていた。ボタンは押すものなので下線は付けない */
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}
.btn--primary {
  background: var(--color-accent-default);
  color: var(--color-fg-on-accent);
}
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-accent-active); }
.btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  border-color: var(--color-border-default);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-bg-hover); }
.btn--ghost {
  background: transparent;
  color: var(--color-fg-secondary);
  min-height: var(--density-control_height_md);
  font-weight: var(--font-weight-medium);
  /* 幅いっぱいのボタンが3つ縦に並ぶと、どれも同じ重さに見えて
     「退職にする」まで押しやすくなる。控えめな操作は文字を小さくして下げる */
  font-size: var(--font-size-sm);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-bg-hover); }
.btn:disabled {
  background: var(--color-bg-sunken);
  color: var(--color-fg-disabled);
  border-color: var(--color-border-subtle);
  cursor: not-allowed;
}
/* 打刻の主ボタンは、現場で手袋・濡れた手でも押せるように大きく取る */
.btn--punch {
  min-height: var(--space-16);
  font-size: var(--font-size-xl);
  border-radius: var(--radius-lg);
}
.btn-stack { display: grid; gap: var(--space-3); }
/* めったに使わない・元に戻しにくい操作は、線の下にまとめて置く。
   同じ見た目のボタンが縦に3つ並ぶと、どれも同じ重さに見えて誤タップが増える */
.btn-stack--rare {
  gap: var(--space-1);
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
  padding-top: var(--space-2);
}

/* ---------- お知らせ（結果の復唱・エラー） ---------- */
.notice {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--font-size-base);
  border: var(--border-width-hairline) solid transparent;
}
.notice--success {
  background: var(--color-state-success-bg);
  border-color: var(--color-state-success-border);
  color: var(--color-state-success);
}
.notice--danger {
  background: var(--color-state-danger-bg);
  border-color: var(--color-state-danger-border);
  color: var(--color-state-danger);
}
.notice--warning {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
  color: var(--color-state-warning);
}
.notice--info {
  background: var(--color-state-info-bg);
  border-color: var(--color-state-info-border);
  color: var(--color-state-info);
}
/* ---------- 誰として操作しているか（会員のまま代理を兼ねる方・2026-09-21） ----------
   代理として開いている間は色付き（アクセントの淡い色）。自分のお店は無地。新しい色は作らない */
.whobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-snug);
  background: var(--color-bg-sunken);
  color: var(--color-fg-secondary);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.whobar--delegate {
  background: var(--color-accent-subtle);
  color: var(--color-accent-active);
  border-bottom-color: var(--color-accent-default);
}
.whobar__switch {
  flex-shrink: 0;
  color: inherit;
  font-weight: var(--font-weight-semibold);
}
.notice__title { font-weight: var(--font-weight-semibold); }
.notice__body { margin-top: var(--space-1); line-height: var(--font-leading-snug); }

/* ---------- 位置情報の状態 ---------- */
.geo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}
.geo__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-fg-disabled);
  flex: none;
}
.geo--inside .geo__dot { background: var(--color-state-success); }
.geo--outside .geo__dot { background: var(--color-state-danger); }
.geo--unavailable .geo__dot { background: var(--color-state-warning); }

/* ---------- 履歴（スマホでは表にしない） ---------- */
.rows { display: grid; gap: var(--space-2); }
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.row:last-child { border-bottom: none; }
/* 行の右端に置く印は、途中で折り返させない。
   「承認されま／した」と2行に割れて、行の高さだけが伸びていた。
   幅が足りないときは、印だけ次の行へ落ちる */
.row > .badge { flex: none; white-space: nowrap; }
.row__date { font-size: var(--font-size-sm); color: var(--color-fg-secondary); flex: none; }
.row__time { font-family: var(--font-family-mono); font-size: var(--font-size-base); }
.row__meta { font-size: var(--font-size-xs); color: var(--color-fg-muted); }

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  padding: var(--space-05) var(--space-2);
  /* 完全な楕円（薬みたいな形）はやめる。丸いものが並びすぎて全体が緩んで見えた */
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: var(--border-width-hairline) solid transparent;
}
.badge--warning {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
  color: var(--color-state-warning);
}
.badge--muted {
  background: var(--color-bg-sunken);
  border-color: var(--color-border-subtle);
  color: var(--color-fg-muted);
}
.badge--success {
  background: var(--color-state-success-bg);
  border-color: var(--color-state-success-border);
  color: var(--color-state-success);
}
.badge--danger {
  background: var(--color-state-danger-bg);
  border-color: var(--color-state-danger-border);
  color: var(--color-state-danger);
}

/* ---------- 空状態 ---------- */
.empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-snug);
}

/* ---------- 読み込み中（スケルトン） ---------- */
.skeleton {
  background: var(--color-bg-sunken);
  border-radius: var(--radius-sm);
  height: var(--space-5);
  animation: pulse var(--motion-duration-slow) var(--motion-easing-standard) infinite alternate;
}
@keyframes pulse { from { opacity: 1; } to { opacity: 0.55; } }

/* ---------- フォーム ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.field__hint { font-size: var(--font-size-sm); color: var(--color-fg-muted); line-height: var(--font-leading-snug); }
.field__error { font-size: var(--font-size-sm); color: var(--color-state-danger); }
.input, .select, .textarea {
  width: 100%;
  min-height: var(--density-control_height_md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
}
.textarea { min-height: var(--space-20); line-height: var(--font-leading-snug); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
  border-color: var(--color-border-focus);
}
.field--time .input { font-family: var(--font-family-mono); }

/* ---------- 承認画面の Before / After ---------- */
.compare {
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.compare__row { display: grid; gap: var(--space-1); }
.compare__row + .compare__row { margin-top: var(--space-3); }
.compare__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.compare__value { font-family: var(--font-family-mono); font-size: var(--font-size-base); }
.compare__value--old { color: var(--color-fg-secondary); }
.compare__value--new { color: var(--color-fg-primary); font-weight: var(--font-weight-semibold); }

.reason { margin-bottom: var(--space-4); }
.reason__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-bottom: var(--space-1); }
.reason__body { font-size: var(--font-size-base); line-height: var(--font-leading-snug); }

/* ---------- 管理画面のタブ ---------- */
.subnav {
  display: flex;
  gap: var(--space-1);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}
.subnav__item {
  flex: 1;
  text-align: center;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-secondary);
  text-decoration: none;
  /* タブ名は絶対に途中で折り返させない。
     幅375pxで1枠81pxしか取れず、以前は2行に割れて高さが1.6倍になっていた */
  white-space: nowrap;
}
.subnav__item--on {
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  box-shadow: var(--shadow-sm);
}
.subnav__item:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
}
/* 項目名が長いもの（公開物の4枚）は、折り返さず横に流す。
   スマホ幅で「プライバシーポリ／シー」と3行に割れて読みにくかった */
.subnav--scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subnav--scroll .subnav__item {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------- 地図 ---------- */
.map {
  /* 高さを固定値で決めず、幅に対する比で決める。
     縦長（3/4）にしていたらスマホで401pxになり、画面の半分を地図が占めて
     住所の入力欄と地図を同時に見られなかった。住所で印が付く今は、
     地図は「合っているかの確認と微調整」なので、これで足りる */
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  overflow: hidden;
}
@media (min-width: 640px) { .map { aspect-ratio: 16 / 10; } }

/* ピンは画像を使わずCSSで描く（外部ファイルを増やさないため） */
.pin {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full) var(--radius-full) var(--radius-none) var(--radius-full);
  background: var(--color-accent-default);
  border: var(--border-width-thick) solid var(--color-fg-inverse);
  box-shadow: var(--shadow-md);
  transform: rotate(-45deg);
}
.maprow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.maprow .btn { width: auto; }

/* ---------- 登録直後の案内（打刻ページのURLを渡す） ---------- */
.welcome { border-color: var(--color-accent-default); }
.urlbox {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.urlbox .input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-sm);
}
.urlbox .btn { width: auto; flex: 0 0 auto; }

/* ---------- 住所から場所を探す ---------- */
.addrrow {
  display: flex;
  gap: var(--space-2);
}
.addrrow .input { flex: 1 1 auto; min-width: 0; }
.addrrow .btn { width: auto; flex: 0 0 auto; }

.addrmsg {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-relaxed);
}
.addrmsg--ok {
  background: var(--color-state-success-bg);
  /* 小さい字(13px)なので、文字は濃い側を使う。既定の success だと地との明暗差が4.40しかない */
  color: var(--color-state-success-hover);
}
.addrmsg--ng {
  background: var(--color-state-danger-bg);
  color: var(--color-state-danger);
}
.addrmsg--ask {
  background: var(--color-bg-sunken);
  color: var(--color-fg-secondary);
}
/* 候補が複数出たとき。押しやすいよう縦に積む */
.addrpick {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.addrpick .btn { width: 100%; text-align: left; justify-content: flex-start; }

.range {
  width: 100%;
  accent-color: var(--color-accent-default);
  height: var(--density-control_height_md);
}

/* ---------- 選べる項目（大きめのタップ領域） ---------- */
.choices { display: grid; gap: var(--space-2); }
.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.choice:hover { background: var(--color-bg-hover); }
/* まだ使えない選択肢。押せないことが見て分かるようにする（.btn:disabled と同じ扱い） */
.choice--disabled {
  cursor: not-allowed;
  background: var(--color-bg-sunken);
  border-color: var(--color-border-subtle);
}
.choice--disabled .choice__title,
.choice--disabled .choice__desc { color: var(--color-fg-disabled); }
.choice--disabled:hover { background: var(--color-bg-sunken); }
.choice__title .badge { margin-left: var(--space-2); }
.choice:has(input:checked) {
  border-color: var(--color-accent-default);
  background: var(--color-accent-subtle);
}
.choice:has(input:focus-visible) {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
}
.choice input { margin-top: var(--space-1); accent-color: var(--color-accent-default); }
.choice__body { display: grid; gap: var(--space-1); }
.choice__title { font-weight: var(--font-weight-semibold); }
.choice__desc { font-size: var(--font-size-sm); color: var(--color-fg-secondary); line-height: var(--font-leading-snug); }

.timepair { display: flex; align-items: center; gap: var(--space-3); }
.timepair .input { font-family: var(--font-family-mono); }

.periodnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.periodnav .btn { width: auto; }

/* シフトと食い違っている日の1行（2026-08-23）。
   クラス名を .rec から .shiftrec に変えた。運営コンソールと同じ .rec を使っていたが、
   どちらにも指定が1つも無く、行の区切りが出ていなかった。理由のボタンが付いて
   1行が5行ぶんの高さになったので、区切りが無いと隣の日と地続きに見える
   （.punchrec と同じ理由。名前が同じままだと、片方に合わせた指定が離れた画面を壊す） */
.shiftrec {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.shiftrec:last-child { border-bottom: none; padding-bottom: 0; }
.shiftrec__main { line-height: var(--font-leading-snug); }
.shiftrec__meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-fg-secondary);
}

/* 「予定があるが打刻なし」の日に、理由を1回で残すところ（2026-08-23）。
   ボタンを幅いっぱいにしない。3つ縦に並ぶと、食い違いを見る画面が
   選択肢だらけになって、肝心の日付と名前が読めなくなる */
.absence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.absence .btn {
  width: auto;
  min-height: var(--density-control_height_md);
  font-size: var(--font-size-sm);
}
.absence__label {
  font-size: var(--font-size-sm);
  color: var(--color-fg-secondary);
  line-height: var(--font-leading-snug);
}

.finding {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.finding:first-child { padding-top: 0; }
.finding:last-child { border-bottom: none; padding-bottom: 0; }
.finding__body {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  grid-template-areas: "msg" "tag" "detail";
}
.finding__msg { grid-area: msg; font-weight: var(--font-weight-medium); line-height: var(--font-leading-snug); }
.finding__tag { grid-area: tag; }
.finding__detail {
  grid-area: detail;
  font-size: var(--font-size-sm);
  color: var(--color-fg-secondary);
  line-height: var(--font-leading-snug);
}
/* 横幅に余裕があるときだけ、印を本文の右に戻す */
@media (min-width: 640px) {
  .finding__body {
    grid-template-columns: 1fr auto;
    grid-template-areas: "msg tag" "detail detail";
    align-items: start;
  }
}

/* 日ごとの打刻の1行。名前・時刻・実働を縦に積む。
   幅375pxで横に並べると、名前と時刻がどちらも途中で折り返して読めなくなる。

   クラス名を .rec から .punchrec に変えた（2026-08-22）。
   運営コンソールとシフト画面が先に .rec を使っていて、こちらの grid-template-areas が
   向こうにも効き、文字が重なって描画されていた。名前が同じだと、離れた画面が壊れる。 */
.punchrec {
  display: grid;
  grid-template-areas: "name worked" "time worked" "meta meta" "edit edit";
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.punchrec:last-child { border-bottom: none; padding-bottom: 0; }
.punchrec__name { grid-area: name; font-weight: var(--font-weight-medium); }
.punchrec__time { grid-area: time; font-family: var(--font-family-mono); font-size: var(--font-size-base); }
.punchrec__worked { grid-area: worked; text-align: right; white-space: nowrap; color: var(--color-fg-secondary); }
.punchrec__meta { grid-area: meta; font-size: var(--font-size-xs); color: var(--color-fg-muted); }
/* 「直す」は毎日押すものではないので、控えめに置く。
   ただし探さないと見つからない状態にはしない */
.punchrec__edit { grid-area: edit; margin-top: var(--space-1); }
.punchrec__edit a { font-size: var(--font-size-sm); color: var(--color-fg-secondary); }

/* 従業員台帳のチェック行。
   四角と名前をひとかたまりにして、行ごと押せるようにする
   （ボタンを横に置くと「押すもの」に見えて、入/切が読めない） */
.chk { border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.chk:last-of-type { border-bottom: none; }
.chk__btn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-1);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
}
.chk__btn:hover { background: var(--color-bg-hover); }
.chk__btn:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: calc(var(--space-05) * -1);
}
.chk__box {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border: var(--border-width-thick) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-on-accent);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-none);
}
.chk__btn--on .chk__box {
  background: var(--color-accent-default);
  border-color: var(--color-accent-default);
}
.chk__label { display: grid; gap: var(--space-05); }
.chk__name { font-weight: var(--font-weight-medium); color: var(--color-fg-primary); }
.chk__meta { font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
.chk__note {
  padding: 0 var(--space-1) var(--space-3) calc(var(--space-6) + var(--space-3) + var(--space-1));
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
  line-height: var(--font-leading-snug);
}

/* 雇用のかたち（雇用 / 業務委託）の切り替え。
   1操作＝1フォームなので、ボタンごとに form が挟まる。
   幅375pxでは見出しと2つのボタンが1行に収まらないので、折り返す前提で組む */
.chk__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-4) calc(var(--space-6) + var(--space-3) + var(--space-1));
}
.chk__kind-label { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
/* 【いま選ばれている方も押せる形にする】
   押せない側を消すと、そもそも何が選べるのかが読めない */
.kindbtn {
  min-height: var(--density-control_height_sm);
  padding: 0 var(--space-3);
  background: var(--color-bg-surface);
  color: var(--color-fg-secondary);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.kindbtn:hover { background: var(--color-bg-hover); }
.kindbtn:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}
.kindbtn--on {
  background: var(--color-accent-default);
  border-color: var(--color-accent-default);
  color: var(--color-fg-on-accent);
}

/* 使い始めるまでの手順。
   幅375pxで見出しの右にボタンを置くと「LINEで通知を／受け取れるように／する」と
   3行に割れ、右半分が空いたままになる。スマホでは縦に積む */
.setupstep {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
  grid-template-areas: "title" "body" "go";
}
.setupstep:first-of-type { padding-top: 0; }
.setupstep:last-of-type { border-bottom: none; padding-bottom: 0; }
.setupstep__title { grid-area: title; font-weight: var(--font-weight-medium); line-height: var(--font-leading-snug); }
.setupstep__body {
  grid-area: body;
  font-size: var(--font-size-sm);
  color: var(--color-fg-secondary);
  line-height: var(--font-leading-snug);
}
.setupstep .btn { grid-area: go; }
/* いま進む手順だけを幅いっぱいにする。
   済んだ手順・先の手順まで同じ大きさだと、どれが次なのか分からなくなる */
.setupstep .btn--ghost {
  width: auto;
  padding-left: 0;
  padding-right: var(--space-3);
  min-height: auto;
  justify-content: flex-start;
}
@media (min-width: 640px) {
  .setupstep {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title go" "body go";
    align-items: center;
  }
}

/* スタッフのカード。スマホ幅（375px）で横に並べると全部が2行に割れるので、縦に積む */
.staffhead { display: grid; gap: var(--space-2); }
.staffhead__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.staffhead__meta {
  display: grid;
  gap: var(--space-05);
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-snug);
  /* メールアドレスは長いので、途中でも折り返してよい（はみ出させない） */
  overflow-wrap: anywhere;
}

.muted { color: var(--color-fg-muted); font-size: var(--font-size-sm); line-height: var(--font-leading-snug); }
.stack-4 { display: grid; gap: var(--space-4); }
.center { text-align: center; }
.hidden { display: none !important; }

@media (min-width: 640px) {
  .page { padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 記録の一覧を表にする（2026-09-21）。
   スプレッドシートのように1行1勤務で、ひと月を見渡せる形。
   決まり（saas-ui）: 区切りは横線1本だけ・縦線もゼブラも無し／見出しは沈んだ地／
   数字の列は右寄せ＋等幅／スマホでは表を横スクロールさせずカードに組み替える。
   なので 640px 未満は今までのカード（.rcards）、以上は表（.rtable）を出す。 */
.rtable { display: none; }
.rcards { display: block; }
.rcards > .card + .card { margin-top: var(--space-4); }
@media (min-width: 640px) {
  .rtable { display: block; }
  .rcards { display: none; }
}
.rtable__scroll { overflow-x: auto; margin: 0 calc(var(--space-5) * -1); }
.rtable table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.rtable th,
.rtable td {
  height: var(--density-table_row_height);
  padding: 0 var(--space-3);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.rtable th:first-child,
.rtable td:first-child { padding-left: var(--space-5); }
.rtable th:last-child,
.rtable td:last-child { padding-right: var(--space-5); }
.rtable thead th {
  background: var(--color-bg-sunken);
  color: var(--color-fg-secondary);
  font-weight: var(--font-weight-medium);
}
.rtable tbody tr:last-child td { border-bottom: none; }
.rtable tbody tr:hover { background: var(--color-bg-hover); }
.rtable .rtable__num { text-align: right; font-family: var(--font-family-mono); }
.rtable .rtable__date { color: var(--color-fg-secondary); }
.rtable__today .rtable__date { color: var(--color-fg-primary); font-weight: var(--font-weight-medium); }
.rtable .rtable__note { color: var(--color-fg-muted); font-size: var(--font-size-xs); }
.rtable .rtable__edit { text-align: right; }
/* 「直す」は全行に並ぶので、赤のリンク色（.page a:not(...)）のままだと表じゅうが赤くなり、
   めったに使わない操作に目が引っ張られる。同じ強さのセレクタにして、後に書いたこちらを勝たせる */
.page .rtable .rtable__edit a:not(.btn) { color: var(--color-fg-secondary); }