:root{
  /* v11: v9 の構成を維持。system font を使用し、丸い card container を廃止して「見出し → 内容 → 罫線」で区切る。 */
  --bg:#FFFFFF; --side:#FAFAFA; --surface:#FFFFFF; --surface-2:#F4F4F5; --sel:#ECECEE; --line:#DCDCE0; --line-strong:#CFCFD6;
  --ink:#18181B; --ink-2:#3F3F46; --ink-3:#52525B;
  --accent:#3B5BDB; --accent-soft:#E8EDFB; --btn:#18181B; --btn-ink:#FFFFFF;
  --ok:#15803D; --ok-soft:#DCFCE7; --warn:#B45309; --warn-soft:#FEF3C7; --err:#DC2626; --err-soft:#FEE2E2;
  --run:#3B5BDB; --run-soft:#E8EDFB; --plan:#C4C4CB; --plan-soft:#F4F4F5; --band:#FAFAFA; --focus:#3B5BDB;
  --font:-apple-system,BlinkMacSystemFont,"Meiryo","Noto Sans JP","Yu Gothic","Yu Gothic UI",Arial,sans-serif;
  --font-body:14px; --font-subheading:15px; --font-heading:16px; --font-brand:18px; --font-small:12px; --font-column-head:.7rem; --profile-thumb-size:20px; --content-row-y:16px; --content-compact-row-y:8px; --content-stack-y:16px; --content-section-y:32px; --content-col-x:30px; --field-label-width:10rem; --field-label-gap:var(--content-col-x); --info-label-width:var(--field-label-width); --button-y:8px; --button-x:14px; --button-min-h:36px; --button-min-w:72px;
  --help-icon-size:1.2em; --help-icon-offset-y:-.07em;
  --r:8px; --r-lg:0; --shadow:0 1px 2px rgba(24,24,27,.06),0 8px 24px rgba(24,24,27,.08);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131316; --side:#18181C; --surface:#131316; --surface-2:#1F1F24; --sel:#2A2A31; --line:#2A2A31; --line-strong:#3F3F48;
    --ink:#F0F0F2; --ink-2:#D4D4D8; --ink-3:#A1A1AA;
    --accent:#7C93F0; --accent-soft:#1E2540; --btn:#F0F0F2; --btn-ink:#131316;
    --ok:#4ADE80; --ok-soft:#14301F; --warn:#FBBF24; --warn-soft:#3A2A0C; --err:#F87171; --err-soft:#3F1A1A;
    --run:#7C93F0; --run-soft:#1E2540; --plan:#45454F; --plan-soft:#1F1F24; --band:#18181C; --focus:#7C93F0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131316; --side:#18181C; --surface:#131316; --surface-2:#1F1F24; --sel:#2A2A31; --line:#2A2A31; --line-strong:#3F3F48;
  --ink:#F0F0F2; --ink-2:#D4D4D8; --ink-3:#A1A1AA;
  --accent:#7C93F0; --accent-soft:#1E2540; --btn:#F0F0F2; --btn-ink:#131316;
  --ok:#4ADE80; --ok-soft:#14301F; --warn:#FBBF24; --warn-soft:#3A2A0C; --err:#F87171; --err-soft:#3F1A1A;
  --run:#7C93F0; --run-soft:#1E2540; --plan:#45454F; --plan-soft:#1F1F24; --band:#18181C; --focus:#7C93F0;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;line-height:1.3;text-wrap:balance}
h1{font-size:1.35rem}h2{font-size:1rem}h3{font-size:var(--font-subheading)}
p{margin:0}
a{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}.dim{color:var(--ink-2)}.small{font-size:.86rem}
.link{color:var(--accent);text-decoration:none}@media (hover:hover){.link:hover{text-decoration:underline}}

/* ===== shell: 左 sidebar（sitemap。全 link 常時展開）+ 中央 ===== */
.app{display:grid;grid-template-columns:14rem minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--side);border-right:1px solid var(--line);padding:14px 12px 12px;display:flex;flex-direction:column;scrollbar-width:thin}
.side .brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 15px 30px;font-weight:600;font-size:15px}
.side .brand .brand-home{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none}
@media (hover:hover){.side .brand .brand-home:hover{color:var(--ink);text-decoration:none;background:transparent}}
.brand-lockup{display:flex;align-items:center;min-width:0}
.brand-logo{display:block;flex:0 1 auto;height:17px;width:auto;min-width:0}
.side nav{display:flex;flex-direction:column;gap:2px}
.side .cat{margin-top:10px}
.side .cat.first{margin-top:0}
.side .top,.side .lbl{display:flex;align-items:center;gap:10px;padding:7px 10px;font-weight:600;font-size:13.5px;color:var(--ink);border-radius:var(--r);text-decoration:none}
.side .lbl{cursor:pointer}
@media (hover:hover){.side .top:hover,.side .lbl:hover{background:var(--surface-2)}}
.side .ic{width:17px;height:17px;flex:none;color:var(--ink-2)}
.side .sub{display:flex;flex-direction:column;gap:1px}
.side .sub a{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 37px;font-size:13.5px;color:var(--ink-2);border-radius:var(--r);text-decoration:none;font-weight:400}
@media (hover:hover){.side .sub a:hover{background:var(--surface-2);color:var(--ink)}}
.side .subtree{display:flex;flex-direction:column;gap:1px;margin:1px 0 2px}
.side .subtree a{padding-left:54px;font-size:13px;color:var(--ink-3)}
@media (hover:hover){.side .subtree a:hover{color:var(--ink)}}
.side a[aria-current="page"]{background:var(--sel);color:var(--ink)}
.side .top[aria-current="page"],.side .lbl[aria-current="page"]{font-weight:600}
.side .sub a[aria-current="page"]{font-weight:500}
.side .group{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:16px 10px 4px;font-weight:600}
.side .nav-divider{height:1px;background:var(--line);margin:16px 10px 8px}
.side .badge{margin-left:auto}
.side .foot{margin-top:auto;padding:14px 10px 2px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.side .foot .foot-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.side .foot .sample,.side .foot .version{font-size:.7rem;color:var(--ink-3);font-weight:500;white-space:nowrap}
.side .foot .foot-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--err);color:#fff;font-size:.7rem;text-align:center;line-height:18px;font-weight:600}
.topbar{display:none}
.main{padding:0 40px 80px;min-width:0}
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;border-bottom:1px solid var(--line);margin:0 -40px 26px;padding:0 40px;position:sticky;top:0;background:var(--bg);z-index:3}
.pagebar .crumbs{display:flex;gap:16px;align-items:baseline;font-size:var(--font-heading)}
.pagebar .crumbs b{font-weight:600}.pagebar .crumbs span{color:var(--ink-3)}
.pagebar .crumbs a{color:var(--ink-3);text-decoration:none}@media (hover:hover){.pagebar .crumbs a:hover{color:var(--ink)}}
/* 全体の状態（警告・運転・要対応・最終確認・更新）: sidebar を出す幅ではページの帯の右、出さない幅では上部の bar に出す。 */
.pagebar .right,.topbar-status{display:flex;align-items:center;gap:14px;font-size:var(--font-body);color:var(--ink-3)}
.pagebar .right .ib,.topbar-status .ib{border:0;background:transparent;cursor:pointer;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--ink-2)}
@media (hover:hover){.pagebar .right .ib:hover,.topbar-status .ib:hover{background:var(--surface-2)}}
.pagebar .right .page-alert,.topbar-status .page-alert{color:var(--ink);text-decoration:none}
@media (hover:hover){.pagebar .right .page-alert:hover,.topbar-status .page-alert:hover{text-decoration:underline}}
.content{max-width:82rem}
.intro{color:var(--ink-2);margin:-10px 0 20px;max-width:none;line-break:strict;word-break:normal;overflow-wrap:normal}
.intro b{color:var(--ink);font-weight:500}

/* 幅の区分は 3 つ: 狭い（767px 以下）／中（768〜1179px）／広い（1180px 以上）。境界に使う値は 767px・1023px・1179px だけにする。
   sidebar を出さない幅（1023px 以下）: 上の bar の ☰ で、PC と同じ sidebar を左から引き出す（帯の navigation は持たない）。
   767px 以下の狭い幅の配置とは別判定。開閉の状態は .app の class（nav-open）だけが持つ。 */
/* sidebar の中の ☰ は、引き出したメニューのときだけ出す（.btn の表示の指定に勝つよう、祖先鎖で書く）。 */
.nav-toggle,.nav-scrim,.side .brand .nav-toggle{display:none}
@media (max-width:1023px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;z-index:20;width:min(18rem,84%);height:auto;transform:translateX(-100%);visibility:hidden;transition:transform .18s ease,visibility .18s;overscroll-behavior:contain}
  .app.nav-open .side{transform:none;visibility:visible}
  .app.nav-open .nav-scrim{display:block;position:fixed;inset:0;z-index:19;background:rgb(0 0 0 / .32)}
  /* 引き出したメニューの先頭は、上部の bar の左側と同じ形にする: ☰ とロゴを、同じ位置・同じ大きさで置く
     （メニューを開いても閉じても、☰ とロゴは動かず、大きさも変わらない）。☰ を押すと閉じる。メニューの中を送っても先頭に残す。
     余白・間・下の線は、下の .topbar と同じ値。 */
  .side{padding-top:0;scroll-padding-top:4.5rem}
  .side .brand{position:sticky;top:0;z-index:1;justify-content:flex-start;gap:12px;margin:0 -12px 12px;padding:10px 16px;background:var(--side);border-bottom:1px solid var(--line)}
  .side .brand .nav-toggle{display:inline-flex}
  .side .brand .brand-logo{height:14px}
  /* 上部の bar は画面の上に固定する（どこまで送っても、☰・状態・要対応に届く）。メニュー（z 20）と暗い背景（z 19）より下、ページの帯より上。 */
  html{scroll-padding-top:var(--topbar-h,0px)}
  .topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 16px;background:var(--side);border-bottom:1px solid var(--line);font-weight:600}
  .topbar .nav-toggle{display:inline-flex}
  .topbar .topbar-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
  @media (hover:hover){.topbar .topbar-brand:hover{color:var(--ink);text-decoration:none;background:transparent}}
  .topbar .topbar-brand .brand-logo{height:14px}
  .topbar-identity{display:flex;align-items:center;gap:12px;min-width:0}
  /* 並び: ☰・ロゴ ／（右へ寄せて）状態（警告・運転・要対応・最終確認・更新）。要対応は button の形にしない（押すと問題の画面へ移る link）。 */
  .topbar-status{margin-left:auto;min-width:0;flex-wrap:wrap;row-gap:4px;font-weight:400}
  .main{padding:0 16px 56px}
  .pagebar{margin:0 -16px 20px;padding:0 16px;height:48px;position:static}
  /* 状態は上部の bar に出すので、ページの帯では繰り返さない（帯は、大分類とページ名だけ）。 */
  .pagebar .right{display:none}
}
@media (max-width:767px){
  /* 狭い幅: 上部の bar を 1 段に収める。InstaAuto の状態（警告 N件 など）と最終確認の時刻は出さない（ロゴは残す）。
     文字の長い状態や、とても狭い幅で入りきらないときだけ、状態が 2 段目へ折り返す（字を切らない・はみ出させない）。 */
  .topbar-status .system-state,.topbar-status .status-time{display:none}
  /* 間を 8px に詰める（幅 360px で、文字の長い運転の状態〔一時停止中・緊急停止中〕も 1 段に入る）。 */
  .topbar,.topbar-status{column-gap:8px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* ===== section（見出し → 内容 → 罫線。card container は使わない） ===== */
.box{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0 0 24px;margin-bottom:44px;min-width:0}
.box.tight{padding:0 0 24px}
.box.tight>.box-head{padding:0}
.box.tight>.list,.box.tight>.scroll{padding:0}
.box-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px;flex-wrap:wrap}
.box-head .r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.box-head .cnt,.table-controls .cnt{font-size:13px;color:var(--ink-3)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}

/* buttons: 全画面で寸法を共通化。primary は色だけを変える。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--button-min-w);min-height:var(--button-min-h);padding:var(--button-y) var(--button-x);border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-weight:500;font-size:var(--font-body);line-height:1.2;text-decoration:none;color:var(--ink);white-space:nowrap}
@media (hover:hover){.btn:hover{background:var(--surface-2)}}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
@media (hover:hover){.btn.primary:hover{opacity:.9;background:var(--btn)}}
.btn.danger{border-color:var(--err);color:var(--err)}
.btn.icon{min-width:var(--button-min-h);width:var(--button-min-h);height:var(--button-min-h);padding:0}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.section-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--content-stack-y);margin-top:var(--content-stack-y)}
.main.standard-page .content .content-section>:is(h2,h3) + .section-actions{margin-top:0}
/* stack内では親のgapが縦間隔を担当し、操作領域のmarginを重ねない。 */
.section-actions.section-actions-in-stack{margin-top:0}
.section-actions.section-actions-bordered{padding-top:var(--content-section-y);border-top:1px solid var(--line)}

/* status（点 + 語）と tag */
/* 状態の印（inline-flex）は、行の中で上端にそろえる。baseline にそろえると、先頭の点（字ではない）の下端が基準になり、
   字の形しだいで行が少し高くなる。 */
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap;vertical-align:top}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.st.ok::before{background:var(--ok)}.st.run::before{background:var(--run)}.st.warn::before{background:var(--warn)}.st.err::before{background:var(--err)}.st.plan::before{background:transparent;border:2px solid var(--plan)}
.tag{display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:500;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.planned-update-action{display:inline-grid;grid-template-columns:6rem minmax(0,max-content);align-items:center;column-gap:var(--content-stack-y);max-width:100%}
.planned-update-action>.btn{width:100%}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag.err{background:var(--err-soft);color:var(--err);border-color:transparent}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tag.scope{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag.future{background:transparent;color:var(--ink-3);border:1px dashed var(--line-strong)}
.tg{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.switch{position:relative;width:40px;height:22px;border-radius:999px;background:var(--line-strong);border:0;cursor:pointer;flex:none;padding:0;vertical-align:top}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch[aria-checked="true"]{background:var(--accent)}.switch[aria-checked="true"]::after{left:21px}
@media (prefers-reduced-motion:reduce){.switch::after{transition:none}}

/* ===== 行の一覧（sample の Models 一覧の形: 開閉 / avatar / 題と補足 / 右側） ===== */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:18px 44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:var(--content-row-y) 10px;border-top:1px solid var(--line)}
.list>.row:first-child,.list>details:first-child>summary{border-top:0}
.row .av{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600;font-size:13px;letter-spacing:.02em}
.row .av.ok{background:var(--ok-soft);color:var(--ok)}.row .av.err{background:var(--err-soft);color:var(--err)}.row .av.plan{background:var(--surface-2);color:var(--ink-2)}.row .av.warn{background:var(--warn-soft);color:var(--warn)}
.row .t{font-weight:600;font-size:var(--font-subheading);color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m{font-size:13px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m b{color:var(--ink-2);font-weight:500}
.row .r{display:flex;align-items:center;gap:16px;white-space:nowrap}
details.item>summary{cursor:pointer;list-style:none;border-radius:0}
details.item>summary::-webkit-details-marker{display:none}
@media (hover:hover){details.item>summary:hover{background:var(--surface-2)}}
details.item[open]>summary{background:var(--band)}
@media (max-width:767px){.row .r{gap:8px}}

/* ===== 表（sample の sub-table: 大文字の小さな見出し、行に罫線） ===== */
.tbl{width:100%;border-collapse:collapse;font-size:var(--font-body)}
.ui-column-head,.tbl th{font-weight:600;font-size:var(--font-column-head);letter-spacing:.08em;text-transform:none;color:var(--ink-3)}
.tbl th{text-align:left;padding:var(--content-row-y) 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:var(--content-row-y) 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
@media (hover:hover){.tbl tbody tr:hover td{background:var(--band)}}
.tbl .id{font-family:var(--font);font-size:12px;color:var(--ink-3)}
.tbl .who{display:flex;align-items:center;gap:10px}
.tbl .who .av{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-2)}
.tbl .who b{display:block;font-weight:600;font-size:var(--font-body)}
/* 表示名は block にする。inline のままだと、標準モードでは行の高さが親（14px）の行高になり、2 行のまとまりが 3px 高くなる。 */
.tbl .who .id{display:block}
.tbl td.r{text-align:right}
.tbl tr.hrow{cursor:pointer}
.scroll{overflow-x:auto}
.sel{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 30px 7px 10px;min-width:10rem;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
/* ============================================================
   記録の一覧（複数のアカウント・記録を並べる一覧）。DESIGN.md「複数のアカウント・記録を並べる一覧」
   今日の運転・処理の流れ・PC一覧・アカウント一覧・アカウントのスケジュール・運転ログ・通知ログが使う。
   一覧ごとに決めるのは「列の幅（--list-columns）」と「狭い幅での 1 件の組み方」だけで、
   列間・左右の端・罫線・行の背景・列見出し・項目名は、全一覧で同じ決まりを使う。
   ============================================================ */
.record-list{
  --list-gap:clamp(var(--content-col-x),5%,64px);
  --list-fill:1fr;
  --list-band-bleed:10px;
  --list-line-gap:var(--content-compact-row-y);
  --list-item-y:20px;      /* 狭い幅: 1 件の上下 */
  --list-value-gap:12px;   /* 狭い幅: 値の行の間 */
  --list-label-w:6em;      /* 狭い幅: 項目名の列の幅 */
  min-width:0;max-width:100%;overflow:visible
}
/* 列の必要幅を測る間だけ、余りを受け持つ列を最小幅にする（layoutRecordLists）。 */
.record-list.record-list-measuring{--list-fill:0px}
/* 文字は一覧の左右の端から始める（見出し・設定行と同じ縦の線にそろえる）。罫線は行へ引き、一覧の幅いっぱいにする。 */
.record-list .tbl th,.record-list .tbl td{padding-left:0;padding-right:0;border-bottom:0;min-width:0}
/* 列見出しの行（狭い幅では先頭の 1 件）の文字は、上の内容から 32px 空ける。H2・説明文のすぐ下（すでに 32px 空いている）に置く一覧は
   上の余白を持たず（.box-head の直後、または table-flush）、操作行などの下（stack の 16px）に続く一覧は、行の上の余白 16px を足して 32px にする。
   末尾の行は下の余白を持たない（次の内容との間隔は section / stack が作る）。すぐ下に罫線つきの操作行が続く一覧だけ、その罫線までの余白として残す。 */
.main.standard-page .content .record-list:not(:has(+ .section-actions-bordered)) .tbl tbody tr:last-child td{padding-bottom:0}
.record-list .tbl thead tr,.record-list .tbl tbody tr,.record-list.flow .item{border-bottom:1px solid var(--line)}
.record-list .tbl tbody tr:last-child,.record-list.flow .item:last-child{border-bottom:0}
/* 行の背景（乗せた行・現在の行・開いた詳細・並べ替えの移動先）は行全体へ付け、文字の左右の外まで塗る。
   文字と罫線は本文の幅にそろえたまま、背景の端と文字が接しないようにする。状態ごとの規則は --list-band の色だけを決める。 */
.record-list .tbl tbody tr,.record-list.flow .item{background:var(--list-band,transparent);box-shadow:calc(var(--list-band-bleed) * -1) 0 0 var(--list-band,transparent),var(--list-band-bleed) 0 0 var(--list-band,transparent)}
@media (hover:hover){
  .record-list .tbl tbody tr:hover td{background:transparent}
  /* 記録の一覧は 7 つとも、乗せた行に背景を出す（行を横に読む助け。押せる行かどうかで分けない）。 */
  .record-list .tbl tbody tr:hover,.record-list.flow .item:hover{--list-band:var(--band)}
}
@media (width > 767px){
  /* 横並び: 全行が同じ列を共有する。列間は全列同じで、一覧の幅の 5%（30〜64px）。
     その列間で入りきらない一覧は、script が求めた「入りきる列間」（下限 16px）まで全列を一緒に詰める。
     余りは「余りを受け持つ列」へ渡す（文の列が無い一覧は最後の列。中身は左へ寄せたままなので、余りは右に残る）。 */
  .record-list .tbl,.record-list.flow{display:grid;grid-template-columns:var(--list-columns);column-gap:min(var(--list-gap),var(--list-fit-gap,64px));justify-content:start;width:100%;min-width:0}
  .record-list .tbl thead,.record-list .tbl tbody{display:contents}
  .record-list .tbl tr,.record-list.flow .item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center}
  .record-list .tbl td[colspan]{grid-column:1/-1}
}
@media (max-width:767px){
  /* 狭い幅: 横に並べて見比べる表を、1 件ずつ縦に組み替える（DESIGN.md の「狭い幅の 1 件の組み方」）。7 つの一覧とも、この同じ規則を使う。
     1 行目＝見分ける列（list-key）。2 行目以降＝残りの列を、表の列の順のまま「項目名　値」で 1 行ずつ。
     項目名は data-label を ::before で出す（表は script が列見出しから付ける。表でない今日の運転は markup に書く）。
     一覧ごとの CSS が持つのは、見分ける列まわりの指定だけ。欄の class:
     list-key＝見分ける列、list-text＝文の列（省略せず折り返す）、list-control＝入力の部品を置く欄、list-mark＝1 行目の右端に置く記号。
     値の行の間（12px）は、欄の上下の余白（6px ずつ）で作る。行の中の link の押せる範囲を、となりの行と重ねずに行の間隔（33px）まで広げるため。 */
  .record-list .tbl,.record-list .tbl tbody{display:block;width:100%;min-width:0;max-width:100%}
  .record-list .tbl thead{display:none}
  .record-list .tbl tbody tr,.record-list.flow .item{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;width:100%;padding:calc(var(--list-item-y) - var(--list-value-gap) / 2) 0;
    --hit-grow-y:min(0px,calc(50% - (1.5em + var(--list-value-gap)) / 2))}
  /* 見出し・説明文のすぐ下の一覧は上の余白を持たず、末尾の 1 件は下の余白を持たない（欄の余白の分も打ち消す）。 */
  .box-head + .record-list .tbl tbody tr:first-child,.record-list.table-flush .tbl tbody tr:first-child,.box-head + .record-list.flow .item:first-child{padding-top:0;margin-top:calc(var(--list-value-gap) / -2)}
  .record-list:not(:has(+ .section-actions-bordered)) .tbl tbody tr:last-child,.record-list.flow .item:last-child{padding-bottom:0;margin-bottom:calc(var(--list-value-gap) / -2)}
  .main.standard-page .content .record-list .tbl td{padding:0;max-width:100%;overflow-wrap:anywhere}
  /* 欄: 1 行に 1 つ。短い値は折り返さず … で省略する。 */
  .main.standard-page .content .record-list .tbl td:not([colspan]),.main.standard-page .content .record-list.flow .item>*{display:block;flex:0 0 100%;min-width:0;max-width:100%;margin:0;padding:calc(var(--list-value-gap) / 2) 0;font-size:var(--font-body);font-weight:400;line-height:1.5;color:var(--ink);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main.standard-page .content .record-list .tbl td[colspan]{flex:0 0 100%}
  /* 末尾の行の欄の下の余白を 0 にする横並びの規則を、縦の組み方では打ち消す（欄の余白が値の行の間を作るため）。 */
  .main.standard-page .content .box .record-list.scroll .tbl tbody tr:last-child td:not([colspan]),
  .main.standard-page .content .record-list:not(:has(+ .section-actions-bordered)) .tbl tbody tr:last-child td:not([colspan]){padding-bottom:calc(var(--list-value-gap) / 2)}
  .record-list .tbl td[data-label]:not(.list-key,.list-mark)::before,.record-list.flow .item>[data-label]::before{content:attr(data-label);position:static;inset:auto;display:inline-block;flex:0 0 var(--list-label-w);width:var(--list-label-w);vertical-align:top;color:var(--ink-3);font-weight:400;white-space:nowrap}
  .main.standard-page .content .record-list .tbl td.list-key,.main.standard-page .content .record-list.flow .item>.list-key{order:-1;flex:1 1 1px;align-self:center;font-weight:600}
  /* 見分ける列の幅の元を 0 にしない（0 だと、次の欄と同じ行に入って幅が 0 になる）。 */
  /* 見分ける列が 2 つ並ぶ一覧（スケジュールの順番の部品とアカウント名）は、先の列を中身の幅にする。 */
  .main.standard-page .content .record-list .tbl td.list-key:has(+ .list-key){flex:none;margin-right:12px}
  .record-list .list-key .muted,.record-list .list-key .account-label{font-weight:400}
  .main.standard-page .content .record-list .tbl td.list-mark{order:-1;flex:none;width:auto;align-self:center;color:var(--ink-3)}
  .main.standard-page .content .record-list .tbl td.list-text,.main.standard-page .content .record-list.flow .item>.list-text{display:flex;align-items:flex-start;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .main.standard-page .content .record-list .tbl td.list-control{display:flex;align-items:center;white-space:normal;overflow:visible;text-overflow:clip}
  /* 値の中の部品: 状態の印・太字・アカウントの link を、本文の大きさで 1 行に収める。 */
  .record-list .tbl td .st,.record-list.flow .item .st{font-size:var(--font-body);font-weight:400;vertical-align:top}
  .record-list .tbl td:not(.list-key) b{font-weight:inherit}
  .main.standard-page .content .record-list .tbl td .who{display:inline}
  .main.standard-page .content .record-list .tbl td .profile-link{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:top}
  .main.standard-page .content .record-list .tbl td[data-label]:not(.list-key) .profile-link{max-width:calc(100% - var(--list-label-w))}
  .main.standard-page .content .record-list .profile-thumb{--profile-thumb-size:20px;flex:none}
  .main.standard-page .content .record-list .tbl td .profile-link>span:last-child{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main.standard-page .content .record-list .profile-link .account-id,.main.standard-page .content .record-list .profile-link .account-label{display:inline;font-size:var(--font-body);white-space:nowrap;overflow:visible;text-overflow:clip}
  .main.standard-page .content .record-list .profile-link .account-id{margin-right:8px;font-weight:600}
  .main.standard-page .content .record-list .profile-link .account-label{color:var(--ink-2);font-weight:400}
}

/* 一覧ごとの列（横並び）。max-content＝中身に合わせ、縮めない。minmax(0,max-content)＝入らないときだけ縮めて折り返す。
   minmax(…,var(--list-fill))＝余りを受け持つ（1 つの一覧に 1 列）。 */
.flow.record-list{--list-columns:max-content minmax(0,max-content) max-content minmax(14rem,var(--list-fill))}                                                       /* 時間 / アカウント / 状態 / 説明 */
.run-status-table{--list-columns:max-content max-content minmax(0,max-content) minmax(0,max-content) minmax(max-content,var(--list-fill))}                          /* 状態 / 時刻 / アカウント / 対象 / 動作 */
.pc-list{--list-columns:max-content minmax(0,max-content) max-content max-content max-content minmax(max-content,var(--list-fill))}        /* PC / InstaAuto / 運転 / 現在のアカウント / 要対応 / 最終確認 */
.account-overview-scroll{--list-columns:minmax(0,max-content) max-content max-content minmax(0,max-content) max-content minmax(max-content,var(--list-fill))}      /* アカウント / ログイン / 対象 / 動作 / 作業時間 / Proxy */
.schedule-scroll{--list-columns:max-content minmax(7.5rem,max-content) max-content minmax(7.5rem,max-content) max-content minmax(max-content,var(--list-fill))}    /* 順 / アカウント / 作業時間 / 開始 / 終了見込 / 運転 */
.history-spacing{--list-columns:max-content max-content max-content minmax(0,max-content) max-content minmax(8rem,var(--list-fill)) max-content}                     /* 時刻 / アカウント / 動作 / 対象 / 結果 / 概要 / 開閉 */
.status-record-table{--list-columns:max-content minmax(0,max-content) minmax(0,max-content) max-content minmax(max-content,var(--list-fill))}                       /* 時刻 / 内容 / 対象 / 送り先 / 結果 */

/* ----- 処理の流れ ----- */
.run-status-table .tbl td:nth-child(3),.run-status-table .tbl td:nth-child(4){overflow-wrap:anywhere}
/* 現在の行・運転中の行は、乗せても自分の色のまま（乗せた行の規則より後に、同じ強さで書く）。 */
.record-list .tbl tbody tr.run-status-current{--list-band:var(--accent-soft)}
.run-status-table .run-status-current td{font-weight:500}

/* ----- PC一覧 ----- */
.pc-list .tbl td .tag{white-space:normal;max-width:100%;overflow-wrap:anywhere}

/* ----- 運転ログ ----- */
/* アカウントと対象のニックネーム。@ID より控えめな色にする。 */
.name-pair-nick{color:var(--ink-2)}
/* 詳細を開いた行: 行と詳細の間の罫線を消し、詳細は背景つきで全列にまたがる。 */
.record-list .tbl tbody tr.hrow[aria-expanded="true"]{border-bottom-color:transparent}
.record-list .tbl tbody tr.hdet{--list-band:var(--band)}
.main.standard-page .content .record-list .tbl tr.hdet td{color:var(--ink-2);padding:10px 0 14px 1.5rem}
@media (width > 767px){
  /* 横並びでは、アカウントと対象を上限幅で「…」にし（全文は title と詳細の行で見せる）、概要は途中でも折り返す。
     列を自由に縮めると、通常の長さの名前まで折り返して行が高くなるため、折り返しではなく上限幅にしている。
     PC一覧の「現在のアカウント」の @ID は、欄ではなく link の中の字（.clip-long）で切り取る。欄ごと切り取ると、link の上に出る表示名の tooltip まで切れる。 */
  .pc-list .tbl .clip-long{display:inline-block;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  /* 運転ログのアカウントと対象は、@ID の下にニックネームを置く（処理の流れと同じ 2 行の形）。横に並べると、7 つの列の中では
     概要の列が最小幅まで縮み、幅 1024px 以下では対象のニックネームが見えなくなる。上限幅（9rem）は、いまと同じにする。 */
  .history-spacing .tbl tr.hrow .name-pair{display:inline-grid;max-width:9rem;vertical-align:middle}
  /* 「…」にする切り取りは、link そのものではなく、中の字（.name-pair-clip）に掛ける。link ごと切り取ると、指で押す範囲を広げる部分まで切れる。 */
  .history-spacing .tbl tr.hrow .name-pair>*{min-width:0}
  .history-spacing .tbl tr.hrow .name-pair-clip,.history-spacing .tbl tr.hrow .name-pair-nick{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .history-spacing .tbl tr.hrow .name-pair-nick{font-size:var(--font-small)}
  .history-spacing .tbl tr.hrow td:nth-child(4){max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .history-spacing .tbl tr.hrow td:nth-child(6){overflow-wrap:anywhere}
}
@media (max-width:767px){
  /* 狭い幅では、値の行に @ID とニックネームを 1 行で並べる（入りきらないときは「…」。全文は詳細の行で見せる）。 */
  .name-pair-nick{margin-left:8px}
  /* 詳細を開いた行: 行と詳細の間に罫線を引かず、詳細を同じ 1 件の最後に置く。 */
  .record-list .tbl tbody tr.hrow[aria-expanded="true"]{border-bottom:0;--list-band:var(--band)}
  .record-list .tbl tbody tr.hdet{display:block;padding:0}
  .main.standard-page .content .record-list .tbl tr.hdet td{display:block;width:100%;padding:12px 0 18px;overflow-wrap:anywhere}
}

/* ----- 通知ログ ----- */
.status-record-table .tbl td{overflow-wrap:anywhere}

/* ----- アカウント一覧 ----- */
/* 入りきらないときに折り返すのは、長い文になり得る「アカウント」と「動作」だけ。 */
.account-overview-main td:nth-child(1),.account-overview-main td:nth-child(4){min-width:0;overflow-wrap:anywhere;word-break:normal}
/* ログイン対応が必要なアカウントだけ、同じアカウントの下に操作行を置く。アカウントの行と操作行の間に罫線は引かない。 */
.record-list .tbl tbody tr.account-overview-main:has(+ .account-overview-actions){border-bottom:0}
/* 標準pageの表の基底規則（.main.standard-page .content .tbl th / td）に勝たせる指定は、important 指定ではなく実際の祖先鎖で書く。
   行（tr）の規則は、勝たせる宣言だけを祖先鎖つきの規則へ分け、残りの宣言の優先順位を変えない。 */
.main.standard-page .content .account-overview-scroll .tbl .account-overview-actions td{contain:inline-size;padding-top:0}
.account-overview-actionbar{display:flex;align-items:center;justify-content:flex-end;column-gap:8px;row-gap:var(--content-stack-y);flex-wrap:wrap;min-width:0;width:100%}
.account-overview-actionbar .btn{flex:0 0 auto}
.account-overview-feedback{min-width:0;max-width:100%;margin-right:auto;color:var(--ink-3);font-size:var(--font-body);overflow-wrap:anywhere}
/* 操作行と、その上のアカウントの行は、どちらに乗せても両方に背景を出す。 */
@media (hover:hover){.account-overview-scroll .tbl tbody .account-overview-main:hover + .account-overview-actions,
.account-overview-scroll .tbl tbody .account-overview-main:has(+ .account-overview-actions:hover){--list-band:var(--band)}}
.account-overview-main .who,.account-overview-main .profile-link,.account-overview-main .profile-link>span{min-width:0;max-width:100%}
.account-overview-main .account-id,.account-overview-main .account-label{overflow-wrap:anywhere}
.account-overview-scroll .account-tip::after{left:0;transform:none;max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* ----- アカウントのスケジュール ----- */
/* 並べ替えの移動先の強調は、乗せた行の背景より優先する。 */
.record-list .tbl tbody tr.schedule-row.drag-over{--list-band:var(--accent-soft)}
/* 最長の選択肢（「指定時刻以降」「時間帯の中で」の 6 文字）が切れない幅。7.5rem では 6px 足りなかった。 */
.schedule-start-select{min-width:8rem;width:8rem}
/* 時刻（HH:MM の 5 文字）が入る幅。3.75rem では 1px 足りず、末尾が切れていた。 */
.field input.schedule-time-input{width:4rem}
.schedule-account-cell .who,.schedule-account-cell .profile-link,.schedule-account-cell .profile-link>span:last-child{min-width:0;max-width:100%}
.schedule-account-cell .profile-link>span:last-child{overflow:hidden}
.schedule-start-cell{min-width:0}
.schedule-start-controls{max-width:100%;min-width:0;flex-wrap:wrap}
.schedule-account-cell .account-id,.schedule-account-cell .account-label{overflow-wrap:anywhere}
@media (max-width:767px){
  /* ログイン対応の操作行は、同じ 1 件の最後に置く（アカウントの行との間に罫線を引かない）。 */
  .record-list .tbl tbody tr.account-overview-main:has(+ .account-overview-actions){padding-bottom:calc(var(--list-value-gap) / 2)}
  .record-list .tbl tbody tr.account-overview-actions{display:block;padding:0 0 var(--list-item-y)}
  /* 操作の行が一覧の最後のときは、下の余白を持たない。欄の余白を持たない行なので、末尾の 1 件の打ち消し（欄の余白の分）はしない。 */
  .record-list .tbl tbody tr.account-overview-actions:last-child{padding-bottom:0;margin-bottom:0}
  .main.standard-page .content .account-overview-scroll .tbl .account-overview-actions td{display:block;width:100%}
  .account-overview-feedback{flex:1 1 100%;margin:0}
  /* スケジュールの見分ける列: 順番の部品（つかむ印・上へ・下へ・番号）を横に並べる。開始の操作は、項目名の右で折り返す。 */
  .main.standard-page .content .schedule-scroll .tbl td.schedule-order-cell{display:flex;align-items:center;gap:6px;overflow:visible}
  .schedule-scroll .schedule-order-cell>.drag-handle{position:static;transform:none}
  .schedule-scroll .schedule-start-controls{flex:1 1 0;max-width:100%;min-width:0;flex-wrap:wrap;gap:8px}
  .schedule-scroll .schedule-start-select{max-width:100%}
}

/* 中の幅で sidebar を出している間（1024〜1179px）は、本文の左右の余白を縮め、6 列の表を押しつぶさない。 */
@media (width > 1023px) and (max-width:1179px){
  .main{padding-left:24px;padding-right:24px}
  .pagebar{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
}
.schedule-run-body{display:grid;gap:var(--content-row-y);font-size:var(--font-body)}
.settings-lock{border:0;margin:0;padding:0;min-width:0}
.settings-lock-note{margin:0 0 var(--content-stack-y);color:var(--ink-2);font-size:var(--font-body)}
.section-lead-stack>.settings-lock-note{margin:0}
.settings-lock[disabled] .drag-handle{cursor:not-allowed;opacity:.45}

.schedule-order-cell{position:relative;display:flex;align-items:center;gap:8px;width:auto;white-space:nowrap}
.schedule-order-cell>.num{display:inline-block;min-width:0;text-align:left}
.schedule-order-cell>.drag-handle{position:static}
.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:28px;border-radius:6px;color:var(--ink-3);cursor:grab;font-size:18px;line-height:1;user-select:none}
@media (hover:hover){.drag-handle:hover{background:var(--surface-2);color:var(--ink)}}
.schedule-row.dragging{opacity:.45}

/* ===== 設定の行（label / 説明 | 操作） ===== */
.set{display:grid;grid-template-columns:var(--field-label-width) minmax(0,1fr);gap:8px var(--field-label-gap);align-items:start;padding:var(--content-row-y) 0;border-top:1px solid var(--line)}
.set:first-of-type{border-top:0;padding-top:0}
.box-head + .set{border-top:0;padding-top:0}
.set .lab{min-width:0;overflow-wrap:anywhere}
.set.set-label-center{align-items:center}
.set .lab .ui-field-title,.set .lab .ui-row-label,.set .lab>strong{display:block;color:var(--ink);font-size:var(--font-body);font-weight:400;line-height:1.5}
.set .lab .ui-title-help{font-size:var(--font-body);font-weight:400;line-height:1.5}
.set .lab>span:not(.ui-field-title):not(.ui-row-label){display:block;color:var(--ink-3);font-size:var(--font-body);margin-top:var(--content-stack-y);max-width:42ch}
.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.set.compact .ctl>.sel{min-width:0;max-width:100%}
/* An input stays at the value-column start; its action stays at the right edge. */
.input-action{display:flex;align-items:center;flex-wrap:wrap;gap:var(--content-stack-y);width:100%;min-width:0}
.input-action>.field{flex:1 1 18rem;min-width:min(100%,18rem);max-width:34rem}
.input-action-buttons{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--content-stack-y);margin-left:auto;max-width:100%}
.webhook-url-value{min-width:0;overflow-wrap:anywhere;word-break:break-word;user-select:all}
@media (width > 767px){.set:has(.input-action)>.lab{align-self:start;display:flex;align-items:center;min-height:var(--button-min-h)}}
.set.compact .ctl .file-path,.set.compact .ctl .file-name{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.current-run-meta{gap:var(--content-col-x)}
.field{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);overflow:hidden;max-width:100%}
.field input{border:0;padding:7px 10px;width:5.5rem;font:inherit;background:transparent;color:inherit;font-variant-numeric:tabular-nums;min-width:0}
.field input:focus{outline:none}
/* 数値入力は native の増減 button を出さない。指の端末には無く、マウスの端末では乗せたときだけ出るうえ、
   出ていない間も数字の表示幅を約 17px 取る。端末で操作が変わらず、入力欄の幅をすべて数字に使える。
   キーボードの上下での増減は残る。 */
.field input[type=number]{appearance:textfield;-moz-appearance:textfield}
.field input[type=number]::-webkit-inner-spin-button,.field input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}
.field input.wide{width:100%}
.field:has(input.wide){width:100%;max-width:34rem}
.field input.host-input{width:100%}
.field:has(input.host-input){width:18rem;max-width:100%}
.field .unit{padding:0 10px;color:var(--ink-3);font-size:12.5px;background:var(--surface-2);align-self:stretch;display:flex;align-items:center;border-left:1px solid var(--line);flex-shrink:0;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;flex-wrap:wrap}
.seg button{border:0;background:var(--surface);padding:7px 12px;cursor:pointer;border-right:1px solid var(--line);font-size:13px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--ink);font-weight:600}
.days{display:flex;gap:4px}
.days button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:12.5px}
.days button[aria-pressed="true"]{background:var(--sel);color:var(--ink);border-color:var(--line-strong);font-weight:400}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--sel);color:var(--ink);border-color:var(--line-strong);font-weight:600}
@media (max-width:767px){.set,.set.compact{grid-template-columns:1fr}}

/* ===== ホーム（概要） ===== */
.run-status-note{margin-bottom:var(--content-stack-y)}
.run-status-table .run-status-future td{color:var(--ink-2)}
.att{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;align-items:start;padding:var(--content-row-y) 0;border-top:1px solid var(--line)}
.att:first-child{border-top:0;padding-top:0}
.box-head + .att{border-top:0;padding-top:0}
.att-main{display:grid;gap:var(--content-stack-y);min-width:0}
.att .scope{font-weight:600;font-size:14px;min-width:0}
.att>.btn{justify-self:end;align-self:start}
.att-actions{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;flex-wrap:wrap}
.att>.att-actions{justify-self:end;align-self:start}
.att .issue{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.att .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.att.err .dot{background:var(--err)}.att.info .dot{background:var(--plan)}
.att .what{color:var(--ink-2);font-size:13px}
@media (max-width:767px){.att{grid-template-columns:1fr;gap:10px}}
.next{display:grid;grid-template-columns:auto 1fr;row-gap:var(--content-stack-y);column-gap:var(--content-col-x);align-items:baseline;font-size:13.5px}
.next .t{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.next b{font-weight:600}

/* ===== 今日の運転（1 アカウント = 1 行）。列・列間・罫線・行の背景は「記録の一覧」の共通の形を使う ===== */
.flow{display:grid;grid-template-columns:minmax(0,1fr)}
.flow .item{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--list-line-gap);align-items:start;padding:var(--content-row-y) 0}
.box-head + .flow .item:first-child{padding-top:0}
.record-list.flow .item.run{--list-band:var(--run-soft)}
.flow .when{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.flow .name{font-weight:400;text-decoration:none;color:var(--accent);min-width:0;max-width:100%;overflow:visible}
.flow .name>span:last-child{display:block;min-width:0;overflow:hidden}
.flow .name .account-id,.flow .name .account-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow .name .account-id{font-weight:600}
.flow .name .account-label{font-size:12px;font-weight:400}
.flow .stcell{display:flex;align-items:center;min-width:0}
.flow .d{color:var(--ink-2);font-size:13px}
.flow .d b{color:var(--ink);font-weight:500}
.flow .flow-attention{color:var(--err)}
@media (max-width:767px){
 /* 今日の運転は表ではなく、アカウントの link そのものが欄になっている。欄の中で、アイコン・@ID・表示名を 1 行に並べる。 */
 .main.standard-page .content .record-list.flow .item>.name{color:var(--accent)}
 .main.standard-page .content .record-list.flow .item>.name .profile-thumb{display:inline-flex;vertical-align:top;margin-right:8px}
 .main.standard-page .content .record-list.flow .item>.name>span:last-child{display:inline;overflow:visible}
}

/* ===== その他 ===== */
details.fold{border-top:1px solid var(--line)}
details.fold>summary{cursor:pointer;padding:var(--content-row-y) 4px;list-style:none;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸";color:var(--ink-3);font-size:10px;width:.8rem}
details.fold[open]>summary::before{content:"▾"}
details.fold>summary .hint{font-weight:400;color:var(--ink-3);font-size:12.5px}
details.fold>.body{padding:2px 4px 18px}
.notice{padding:12px 14px;border-radius:0;background:var(--warn-soft);border:0;border-left:3px solid var(--warn);display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;font-size:13.5px}
.notice.err{background:var(--err-soft);border-left-color:var(--err)}
.toast{position:fixed;right:24px;bottom:24px;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:0;box-shadow:var(--shadow);border:1px solid var(--line);font-size:13px;z-index:9;opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:center;gap:10px;max-width:min(36rem,calc(100vw - 48px))}
.toast .k{font-size:.68rem;letter-spacing:.08em;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.toast.err .k{background:var(--err-soft);color:var(--err)}
.toast.show{opacity:1}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:8px}.crumb a{text-decoration:none;color:var(--ink-3)}
.log{font-family:var(--font);font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-all;padding:12px 0;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;max-height:32rem;overflow:auto}
.log .lv{display:inline-block;width:4.2rem;color:var(--ink-3)}
.log .lv.warn{color:var(--warn)}.log .lv.err{color:var(--err)}
.log .t{color:var(--ink-3)}
.checks{display:grid;gap:8px}
.checks label{display:flex;gap:10px;align-items:center;font-size:13.5px;cursor:pointer}
.checks input{width:16px;height:16px;accent-color:var(--accent)}

/* アカウント識別用ダミーサムネイル。実装時は Instagram 画像へ差し替える。 */
.profile-identity,.profile-link{display:inline-flex;align-items:center;gap:8px;min-width:0;vertical-align:top}
.profile-identity>span:last-child{min-width:0;overflow-wrap:anywhere}
.ui-section-title .profile-identity{display:flex}
/* アカウント識別リンク: 画像・@ID・表示名を一体でクリック可能にし、表示名だけ本文色にする。 */
.account-identity-link{color:var(--accent);text-decoration:none}
.account-identity-link .account-id{color:var(--accent);font-size:var(--font-body)}
.account-identity-link .account-label{color:var(--ink)}
@media (hover:hover){.account-identity-link:hover .account-id{text-decoration:underline}}
@media (hover:hover){.account-identity-link:hover .account-label{text-decoration:none}}
.profile-thumb{width:var(--profile-thumb-size);height:var(--profile-thumb-size);border-radius:50%;overflow:hidden;display:inline-flex;flex:0 0 var(--profile-thumb-size);border:1px solid var(--line);background:var(--surface-2);vertical-align:middle}
.profile-thumb svg{display:block;width:100%;height:100%}
.flow .profile-link{gap:6px;min-width:0}

/* アカウントリンク共通ツールチップ。PC の hover 時だけ表示する。 */
@media (hover:hover) and (pointer:fine){
  a.account-tip{position:relative}
  a.account-tip::after{
    content:attr(data-account-label);
    position:absolute;
    left:50%;
    bottom:calc(100% + 7px);
    transform:translateX(-50%);
    z-index:30;
    display:none;
    padding:5px 8px;
    border:1px solid var(--line-strong);
    border-radius:6px;
    background:var(--surface);
    color:var(--ink);
    font-size:12px;
    font-weight:500;
    line-height:1.3;
    white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    pointer-events:none;
  }
  a.account-tip:hover,
  a.account-tip:focus-visible{z-index:40}
  a.account-tip:hover::after,
  a.account-tip:focus-visible::after{display:block}
}

/* 本文の文字サイズは --font-body に一本化。大小は余白・太さ・色で表現し、個別 font-size を増やさない。 */
.content,
.content .intro,
.content .st,
.content .btn,
.content .btn.sm,
.content .row .m,
.content .set .lab span,
.content .kv,
.content .att .scope,
.content .att .what,
.content .next,
.content .flow .d,
.content details.fold>summary,
.content details.fold>summary .hint,
.content .notice,
.content .checks label{font-size:var(--font-body)}

/* ===== content 共通: 通常の操作UIは本文14pxを使う ===== */
.content .field,
.content .field input,
.content .field .unit,
.content .seg button,
.content .sel,
.content .tg,
.content .chip,
.content .days button{font-size:var(--font-body)}

/* Shared multiple selection for account settings and individual run. */
.action-choice{display:flex;align-items:center;gap:8px;min-height:var(--button-min-h);min-width:0;cursor:pointer;font-weight:500;white-space:nowrap}
.action-choice input[type="checkbox"]{width:16px;height:16px;margin:0;flex:none;accent-color:var(--accent)}
.field.number-range input{flex:0 1 auto;width:var(--range-input-width,5.5rem)}
.number-range-compact{--range-input-width:3.25rem}
.ui-toggle-field{min-height:var(--button-min-h)}
.ui-toggle-field .switch::before{content:"";position:absolute;inset:-7px 0}

/* 個別実行: アカウント選択と、そのアカウントの接続状態を1つのsectionにまとめる。 */
.manual-account-select{width:min(24rem,100%)}

/* 利用環境の冒頭一覧: 状態は値列左端、同page内の設定導線は右端。 */
.page-summary-main{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.page-summary-action{display:inline-flex;margin-left:auto;flex:none}

/* 共通情報ブロック: アカウント状態 / Proxy / 読み込みファイルで同じHTML・同じCSSを使う。
   左側は「ラベル + 値」の複数行、右側はブロック全体に対する操作列。
   情報行の縦間隔は共通16px。操作列を行ごとに持たせず縦に結合する。 */
.info-meta-block{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);column-gap:var(--content-col-x);row-gap:var(--content-stack-y);align-items:start;width:100%;min-width:0}
.info-meta-block:has(>.info-meta-actions:empty){grid-template-columns:minmax(0,1fr)}
.kv,.info-meta{--info-meta-label:var(--field-label-width);display:grid;grid-template-columns:var(--info-meta-label) minmax(0,1fr);column-gap:var(--field-label-gap);row-gap:var(--content-stack-y);font-size:var(--font-body);margin:0;width:100%;min-width:0}
.info-meta-row{display:contents}
.kv dt,.info-meta-row dt{color:var(--ink-3);min-width:0;overflow-wrap:anywhere}
.kv dd,.info-meta-row dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* 共通ルール: 値に入力UIを持つ情報行は、ラベルと入力UIを縦中央で揃える。 */
.info-meta-row:has(.field,select,.tg)>dt,
.info-meta-row:has(.field,select,.tg)>dd{align-self:center}
.info-meta-row dd>.sel{min-width:0;max-width:100%}
.info-meta-actions{grid-column:2;grid-row:1;justify-self:end;align-self:start;display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:var(--content-stack-y);max-width:100%}
.info-meta-actions:empty{display:none}
.info-meta-block.info-actions-below{grid-template-columns:minmax(0,1fr);row-gap:var(--content-stack-y)}
.info-actions-below>.info-meta-actions{grid-column:1;grid-row:2;justify-self:end;justify-content:flex-end}
/* Measure only the information beside the buttons, without changing input placement. */
.info-actions-measuring>.info-meta{width:max-content;max-width:none}
.info-actions-measuring>.info-meta{grid-template-columns:var(--info-meta-label) max-content}
.info-actions-measuring>.info-meta-actions{width:max-content;max-width:none;flex-wrap:nowrap}
.info-meta .file-count strong{font-weight:600;color:var(--ink)}
.info-meta .file-name{font-weight:400}
.info-meta .file-path{overflow-wrap:anywhere;word-break:break-word;color:var(--ink-2)}
/* File name/path form one information group; selection is a separate action row. */
@media (max-width:767px){
  .info-meta-block{column-gap:var(--content-stack-y)}
  .kv,.info-meta{grid-template-columns:minmax(0,1fr)}
  .info-meta-row{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
  .kv{row-gap:8px}
  .kv dd+dt{margin-top:8px}
  .info-inputs-stacked-mobile .ui-field-title{display:block}
  .info-inputs-stacked-mobile .info-meta-row dd>.sel{width:100%}
}
.manual-count-field input{width:6rem;text-align:left;font-size:var(--font-body)}
.manual-page .manual-box>.box-head{margin-bottom:var(--content-section-y)}
.manual-page .manual-desc{font-size:var(--font-body);color:var(--ink-2);margin:0;max-width:none}
.account-profile-url{overflow-wrap:anywhere}
.manual-page .small{font-size:var(--font-body)}

/* ===== COMMON CONTENT RULES =====
   全page共通。縦の基本単位16px / section外周32px。
   page固有の余白値ではなく、このblockと共通tokenを正本とする。 */
.ui-section-title,
.main.standard-page .content h2{
  margin:0;
  font-size:var(--font-heading);
  font-weight:600;
  line-height:1.3;
}
.ui-subheading,
.ui-field-title,
.ui-title-help,
.main.standard-page .content h3{
  margin:0;
  font-size:var(--font-subheading);
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}
.ui-row-label{display:block;color:var(--ink);font-size:var(--font-body);font-weight:400;line-height:1.5}
.ui-title-help{display:flex;align-items:center;gap:8px;min-width:0}
.btn.ui-help-trigger{border-color:transparent;background:transparent;color:var(--ink-3);font-size:inherit;flex:none}
.ui-help-icon{display:block;flex:none;width:var(--help-icon-size);height:var(--help-icon-size);transform:translateY(var(--help-icon-offset-y))}
.ui-help-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 見出しの行の高さは、見出しの字の行の高さ（字の大きさ × 1.3）で決める。「i」と、見出しの右の操作は、字の行の中央に置き、
   押す範囲・button の高さが字の行より高いぶんは、行の高さに数えず上下の余白へはみ出させる（見出しの字の位置を、「i」や操作の有無で変えない）。 */
:is(h2,h3,h4).ui-title-help>.ui-help-trigger{margin-block:calc((1.3em - var(--button-min-h)) / 2)}
.box-head>.r{margin-block:calc((1.3 * var(--font-heading) - var(--button-min-h)) / 2)}
/* 右の操作が無い見出しは、空の入れ物を置かない（見出しが折り返す幅で、空の入れ物だけが次の行へ送られ、行の間隔ぶんの余白が出る）。 */
.box-head>.r:empty{display:none}
.ui-help-panel{position:fixed;z-index:1000;display:grid;gap:var(--content-stack-y);width:min(28rem,calc(100vw - 2 * var(--content-stack-y)));max-height:calc(100dvh - 2 * var(--content-stack-y));overflow:auto;padding:var(--content-stack-y);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:var(--font-body);box-shadow:var(--shadow)}
.ui-help-panel[hidden]{display:none}
.ui-help-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--content-stack-y)}
.ui-help-panel p{margin:0;overflow-wrap:anywhere}

/* page header / intro */
.main.standard-page .pagebar{margin-bottom:var(--content-section-y)}
.main.standard-page .content>h2 + *{margin-top:var(--content-section-y)}
.main.standard-page .content>.intro{margin-bottom:var(--content-section-y)}

/* H2 section:
   前sectionの罫線 → 32px → H2 → 32px → 内容 → 32px → 罫線 */
.main.standard-page .content .box,
.main.standard-page .content .box.tight{
  padding:0 0 var(--content-section-y);
  margin:0 0 var(--content-section-y);
  border-bottom:1px solid var(--line);
}
.main.standard-page .content .box:last-child{margin-bottom:0}
.main.standard-page .content .box.has-subsections{padding-bottom:0;border-bottom:0}
.main.standard-page .content .box.box-bordered-top{border-top:1px solid var(--line);padding-top:var(--content-section-y)}
/* 上の罫線で区切る section（box-bordered-top）の前の section は、自分の下の罫線を描かない（描くと、罫線が 2 本並ぶ）。
   下の余白 32px は残し、「内容 → 32px → 次の section の上の罫線」にする。小分類を持つ section（has-subsections）は、もともと下の罫線を持たない。 */
.main.standard-page .content .box:not(.has-subsections):has(+ .box-bordered-top){border-bottom:0;margin-bottom:0}
/* 入力を止める枠（fieldset）の中の最後の section も、枠のすぐ後ろが上の罫線で始まるときは同じ（描くと、2 本が重なって太い線になる）。 */
.main.standard-page .content .settings-lock:has(+ .box-bordered-top) > .section-stack > .box:last-child{border-bottom:0}

.main.standard-page .content .box-head{margin:0 0 var(--content-section-y)}

/* H2→最初の内容は box-head の32pxだけで作る。 */
.main.standard-page .content .box-head + .set,
.main.standard-page .content .box-head + .att,
.main.standard-page .content .box-head + .flow .item:first-child,
.main.standard-page .content .box-head + .list > .row:first-child,
.main.standard-page .content .box-head + .list > details:first-child > summary,
.main.standard-page .content .box-head + .scroll .tbl thead tr:first-child th{
  padding-top:0;
}
/* 最後のrow自身のpaddingとsection外周32pxを二重加算しない。 */
.main.standard-page .content .box > .set:last-child,
.main.standard-page .content .box > .att:last-child,
.main.standard-page .content .box > .flow .item:last-child,
.main.standard-page .content .box > .list > .row:last-child,
.main.standard-page .content .box > .list > details:last-child > summary,
.main.standard-page .content .box > .scroll .tbl tbody tr:last-child td,
.main.standard-page .content .box > .content-stack > .scroll .tbl tbody tr:last-child td{
  padding-bottom:0;
}

/* 共通section: 主要項目はH2、下位項目はH3。
   罫線 → 32px → 見出し → H2は32px / H3は16px → 内容 → 32px → 次の罫線 */
.main.standard-page .content .section-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}
.main.standard-page .content .section-lead-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--content-section-y);min-width:0}
.content-stack{display:grid;gap:var(--content-stack-y);min-width:0}
/* 表の外側のfilter・件数・操作は共通stackが縦間隔を担当する。 */
.table-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--content-stack-y);min-width:0}
.main.standard-page .content .section-desc{margin:0;color:var(--ink-2);font-size:var(--font-body)}
/* 見出しの説明文の後は、設定本体へ視線を切り替えるため合計32px空ける。grid gap 16px + margin-top 16px。 */
.main.standard-page .content .section-desc + *{margin-top:var(--content-stack-y)}
.main.standard-page .content .content-section{
  display:grid;
  gap:var(--content-stack-y);
  margin:0;
  padding:0 0 var(--content-section-y);
  border-top:1px solid var(--line);
}
.main.standard-page .content .content-section:last-child{border-bottom:1px solid var(--line)}
.main.standard-page .content .content-section.content-section-flush{padding-bottom:0;border-bottom:0}
/* ページ末尾は区切る相手がないため、閉じるためだけの下罫線を描かない。 */
.main.standard-page .content > .box:last-child,
.main.standard-page .content > .content-section:last-child,
.main.standard-page .content > .account-add-flow:last-child > .box:last-child,
.main.standard-page .content.manual-page .section-lead-stack > .section-stack > .box:last-child,
.main.standard-page .content.workspace-page .section-lead-stack > .section-stack > .content-section:last-child{border-bottom:0}
.main.standard-page .content .content-section>.purpose-item-head,
.main.standard-page .content .content-section>:is(h2,h3){
  margin:0;
  padding-top:var(--content-section-y);
}
.main.standard-page .content .content-section>h2{margin-bottom:var(--content-stack-y)}

/* 標準row / stack */
.main.standard-page .content .set,
.main.standard-page .content .row,
.main.standard-page .content .tbl th,
.main.standard-page .content .tbl td,
.main.standard-page .content .att,
.main.standard-page .content details.fold>summary{
  padding-top:var(--content-row-y);
  padding-bottom:var(--content-row-y);
}
.main.standard-page .content .checks,
.main.standard-page .content .schedule-run-body{
  gap:var(--content-stack-y);
}
.main.standard-page .content .ctl{row-gap:var(--content-stack-y)}
.main.standard-page .content .next{
  row-gap:var(--content-stack-y);
  column-gap:var(--content-col-x);
}
.main.standard-page .content .toolbar{margin-bottom:var(--content-stack-y)}
.main.standard-page .content details.fold>.body,
.main.standard-page .content .notice,
.main.standard-page .content .log{
  padding-top:var(--content-stack-y);
  padding-bottom:var(--content-stack-y);
}

/* .lab は配置用。設定・情報行の項目名は通常本文と同じ14px / 400にする。 */
.main.standard-page .content .set .lab .ui-field-title,
.main.standard-page .content .set .lab .ui-row-label,
.main.standard-page .content .set .lab>strong{
  display:block;
  font-size:var(--font-body);
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
}
.main.standard-page .content .set .lab .ui-title-help{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--font-body);
  font-weight:400;
  line-height:1.5;
}
.main.standard-page .content .set .lab>span:not(.ui-field-title):not(.ui-row-label){
  margin-top:var(--content-stack-y);
  font-size:var(--font-body);
}

/* table / grid の小さい列見出しは独立した共通styleを維持する。 */
.main.standard-page .content .ui-column-head,
.main.standard-page .content .tbl th{
  font-size:var(--font-column-head);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:none;
  color:var(--ink-3);
}

/* Shared Timing controls use information/input rows; the comparison has its own content widths. */
.timing-panel{container:timing / inline-size;display:grid;gap:var(--content-section-y);width:100%;min-width:0}
.timing-table{display:grid;grid-template-columns:var(--field-label-width) max-content max-content minmax(0,max-content);column-gap:var(--field-label-gap);row-gap:var(--content-stack-y);width:100%;min-width:0}
.timing-table-head,.timing-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;column-gap:inherit;align-items:center;min-width:0}
.timing-value{display:grid;align-items:center;justify-items:start;gap:8px;min-width:0}
.timing-value-label,.timing-result-label{display:none}
.timing-name,.timing-result{min-width:0;overflow-wrap:anywhere}
.timing-result{font-variant-numeric:tabular-nums}
.main.standard-page .content .table-flush .tbl thead tr:first-child th{padding-top:0}
.main.standard-page .content .table-flush .tbl tbody tr:last-child td{padding-bottom:0}
@container timing (width < 35rem){
  .timing-table{grid-template-columns:max-content max-content minmax(0,1fr);column-gap:var(--content-stack-y);row-gap:0}
  .timing-table-head{display:none}
  .timing-row{align-items:start;row-gap:var(--content-stack-y);padding:var(--content-row-y) 0;border-top:1px solid var(--line)}
  .timing-table-head+.timing-row{padding-top:0;border-top:0}
  .timing-row:last-child{padding-bottom:0}
  .timing-name{grid-column:1/-1}
  .timing-value-label,.timing-result-label{display:block}
  .timing-value .field input{width:3.5rem}
  .timing-result{display:grid;align-items:center;justify-items:start;gap:8px}
  .timing-value>span:not(.ui-column-head):not(.field),.timing-result>[data-timing-result]{display:flex;align-items:center;min-height:var(--button-min-h)}
}

/* 個別実行もglobal ruleだけでsection rhythmを作る。 */
.main.standard-page .content.manual-page .content-section>.ctl{
  width:100%;
  row-gap:var(--content-stack-y);
}
/* ========================================================= */
/* Wizard and disclosure-specific rules */
.main.standard-page .content details.fold>summary{font-size:var(--font-subheading);font-weight:600}

/* Purpose-based category views. Scope keeps established dashboard pages unchanged. */
.purpose-page .purpose-stack{display:grid;gap:var(--content-stack-y);min-width:0}
.purpose-page .purpose-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--content-stack-y);margin-top:var(--content-stack-y)}
.purpose-page .purpose-item{min-width:0}
.purpose-page .purpose-item-head{display:flex;align-items:center;justify-content:space-between;gap:var(--content-col-x)}
.purpose-page .purpose-item-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--content-stack-y) var(--content-col-x);align-items:start}
.purpose-page .purpose-item-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.purpose-page .purpose-time{width:4.5rem}
.purpose-page .sel{max-width:100%}
.purpose-page .seg{flex-wrap:wrap}
.purpose-page .small{font-size:var(--font-body)}
.purpose-page .tbl .profile-link{min-width:max-content}
.purpose-page .purpose-item h3 .who{display:block}
.purpose-page .purpose-item .account-label{display:block;font-size:var(--font-body);font-weight:400}
.purpose-page .purpose-item .account-identity-link{align-items:center}
@media (max-width:767px){
 .app:has(.purpose-page){grid-template-columns:minmax(0,1fr)}
 .app:has(.purpose-page)>div{min-width:0}
 .purpose-page .purpose-item-body{grid-template-columns:minmax(0,1fr)}
 .purpose-page .purpose-item-head{align-items:flex-start;flex-wrap:wrap;gap:var(--content-stack-y)}
 .main:has(.purpose-page) .pagebar{height:auto;min-height:48px;flex-wrap:wrap;padding-top:var(--content-stack-y);padding-bottom:var(--content-stack-y)}
 .purpose-page .field{max-width:100%}
}

/* Shared guided-flow components. Existing pages keep their established layout. */
.flow-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--content-stack-y) var(--content-col-x);margin:var(--content-section-y) 0}
.flow-steps li{display:flex;align-items:center;gap:8px;color:var(--ink-3);padding-bottom:var(--content-row-y);border-bottom:2px solid var(--line)}
.flow-steps li[aria-current="step"]{color:var(--ink);border-color:var(--ink);font-weight:600}
.flow-step-number{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border:1px solid var(--line);border-radius:50%}
.flow-steps .complete .flow-step-number{background:var(--surface-2);color:var(--ink)}
.choice-card{display:flex;gap:var(--content-stack-y);align-items:flex-start;padding:var(--content-row-y);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;min-width:0}
.choice-card>input{flex:none;margin-top:3px}
.choice-card>span{display:grid;gap:8px;min-width:0;overflow-wrap:anywhere}
.choice-card:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.flow-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.flow-feedback{margin-bottom:var(--content-stack-y)}
.account-add-flow .purpose-stack{gap:var(--content-stack-y)}
.account-add-flow .purpose-item-body>div{min-width:0;overflow-wrap:anywhere}
.account-add-flow .purpose-item .info-meta{margin-top:var(--content-stack-y)}
.account-add-flow .purpose-actions{column-gap:var(--content-stack-y)}
@media (max-width:767px){
 .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v180: shared structures for task, settings, and maintenance pages.
   Same typography, 16/32px rhythm and button rules as completed pages.
   Scope new layout rules so account/run/history views stay unchanged. */
.workspace-page .work-stack{display:grid;gap:var(--content-stack-y);min-width:0}
/* 長いページの先頭の要約（利用環境・アカウント個別ページ・個別運転で共通）。 */
.page-summary{padding-bottom:var(--content-section-y);min-width:0}
/* Setting rows own their internal padding; the surrounding stack/section owns outer spacing. */
.setting-rows{display:grid;gap:0;min-width:0}
.main.standard-page .content .setting-rows>.set:first-child{border-top:0;padding-top:0}
.main.standard-page .content .setting-rows>.set:last-child{padding-bottom:0}
/* 入れ物（class なしの div）に入った設定の行も、最後の行の下の余白を持たない（section の外周 32px と二重にしない）。 */
.main.standard-page .content .content-section>div:last-child>.set:last-child{padding-bottom:0}
/* 外側の 32px は、見える字と部品で測る。押す範囲だけの見えない高さ（--button-min-h と、字 1 行の高さの差）は、最初・最後の行では数えない。
   (1) 切り替えだけの行: 最後の行は、切り替えの下の差を打ち消す。項目名と切り替えを横に並べる幅では、最初の行の上の差も打ち消す
       （縦に積む幅では、項目名の字が行の上端にあるので打ち消さない）。
   (2) 縦に積む幅で、項目名に「i」が付く行・選ぶ項目（.action-choice）で始まる行: 最初の行の上の差を打ち消す。 */
.main.standard-page .content .setting-rows>.set:last-child:has(>.ctl>.ui-toggle-field:only-child){margin-bottom:calc((1.5 * var(--font-body) - var(--button-min-h)) / 2)}
@media (width > 767px){.main.standard-page .content .setting-rows>.set:first-child:has(>.ctl>.ui-toggle-field:only-child){margin-top:calc((1.5 * var(--font-body) - var(--button-min-h)) / 2)}}
@media (max-width:767px){
  .main.standard-page .content .setting-rows>.set:first-child:has(>.lab .ui-help-trigger){margin-top:calc((1.5 * var(--font-body) - var(--button-min-h)) / 2)}
  /* 表の入れ物は中身を切る（overflow）ので、行ではなく入れ物ごと上へ寄せる（行だけを寄せると、押す範囲の上が切れる）。 */
  .main.standard-page .content .settings-comparison-table:has(.tbl tbody tr:first-child>td:first-child>.action-choice){margin-top:calc((1.5 * var(--font-body) - var(--button-min-h)) / 2)}
}
.workspace-page .work-list{display:grid;min-width:0}
.workspace-page .work-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--content-stack-y) var(--content-col-x);padding:var(--content-row-y) 0;border-bottom:1px solid var(--line);align-items:start;min-width:0}
.workspace-page .work-row.work-row-single-column{grid-template-columns:minmax(0,1fr)}
.workspace-page .work-row:first-child{padding-top:0}
.workspace-page .work-row:last-child{border-bottom:0;padding-bottom:0}
/* H3を持つ記録は共通subsectionの32px外周と16pxの見出し間隔を使う。 */
.workspace-page .work-row.work-row-section{padding-top:var(--content-section-y);padding-bottom:var(--content-section-y)}
.workspace-page .work-row.work-row-section:first-child{padding-top:0}
.workspace-page .work-row.work-row-section:last-child{padding-bottom:0}
.workspace-page .work-row-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--content-stack-y);font-weight:600}
.workspace-page .work-row-title .st{font-weight:500}
.workspace-page .problem-action-heading{display:flex;align-items:center;justify-content:flex-start;gap:var(--content-stack-y);min-width:0}
.workspace-page .problem-action-heading .st{font-weight:500;flex:none}
.workspace-page .problem-action-heading .problem-scope-account{min-width:0;font-weight:600}
.workspace-page .problem-action-heading .problem-scope-account .account-id{font-size:var(--font-subheading);font-weight:600}
.workspace-page .problem-action-heading .problem-scope-account .account-label{font-size:var(--font-body);font-weight:400}
.workspace-page .problem-action-heading .problem-scope-pc{font-weight:600}
.workspace-page .problem-action-body{display:grid;gap:var(--content-stack-y);min-width:0}
.workspace-page .problem-action-summary{font-weight:600;color:var(--ink)}
.workspace-page .problem-action-detail{color:var(--ink-2);overflow-wrap:anywhere}
.workspace-page .work-row-body{display:grid;gap:var(--content-stack-y);min-width:0}
.workspace-page .work-row-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--content-stack-y)}
.workspace-page .work-row-detail{grid-column:1/-1;min-width:0}
.workspace-page .work-lead{display:flex;justify-content:space-between;gap:var(--content-col-x);align-items:start}
.workspace-page .work-lead p{color:var(--ink-2)}
.workspace-page .work-meta{color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--content-stack-y)}
.workspace-page .work-feedback{padding:var(--content-stack-y);background:var(--surface-2);border-left:2px solid var(--line-strong);display:grid;gap:var(--content-stack-y);overflow-wrap:anywhere}
.workspace-page .work-feedback.err{border-left-color:var(--err)}
.workspace-page .work-feedback.ok{border-left-color:var(--ok)}
.workspace-page .work-feedback p{margin:0}
.workspace-page input.wide{width:100%;min-width:0}
.workspace-page .sel{max-width:100%}
.workspace-page .work-break{overflow-wrap:anywhere;min-width:0}
.workspace-page .fold .body{min-width:0}
.workspace-page details.fold>summary{font-size:var(--font-body)}
.workspace-page .content-section>:is(h2,h3){scroll-margin-top:calc(var(--content-section-y) * 3)}
/* 罫線が見出しの 32px 上にある節（box-bordered-top）も、移動したときに罫線が同じ位置に来るようにする。 */
.manual-page .box-bordered-top>.box-head>h2{scroll-margin-top:calc(var(--content-section-y) * 4)}
@media (max-width:767px){
 .workspace-page .problem-action-heading{align-items:flex-start;gap:var(--content-stack-y);flex-wrap:wrap}
 /* Shared shell correction: long breadcrumbs must not widen the mobile page. */
 .app>div{min-width:0}
 .main .pagebar{height:auto;min-height:48px;flex-wrap:wrap;padding-top:var(--content-stack-y);padding-bottom:var(--content-stack-y)}
 .main.standard-page .content .section-stack{grid-template-columns:minmax(0,1fr)}
 .main.standard-page .content .content-section{min-width:0;grid-template-columns:minmax(0,1fr)}
 .workspace-page .work-row{grid-template-columns:minmax(0,1fr)}
 .workspace-page .work-lead{flex-direction:column;gap:var(--content-stack-y)}
}

/* v180: user-facing values stay visible without turning the Dashboard into a schema console. */
.ui-input-error{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.ui-input-error{margin:0;color:var(--err);font:inherit}
.action-limit-value{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-width:0}
.action-limit-label{display:none;color:var(--ink-3)}
.action-limit-value>.field{justify-self:start;min-width:0}
.comparison-value{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:start;gap:8px;min-width:0}
.comparison-value-label{display:none;color:var(--ink-3)}
.comparison-value>.field{justify-self:start;min-width:0}
@media (hover:hover){.manual-page .settings-table .tbl tbody tr:hover td,
.manual-page .timing-settings-table .tbl tbody tr:hover td{background:transparent}}
/* Shared settings comparison: fixed labels, reserved controls and bounded gutters.
   設定・比較用tableは行自体を操作しないため、共通tblのrow hoverを使わない。 */
.settings-comparison-table{container:settings-columns / inline-size;--settings-label-width:var(--field-label-width);--settings-control-width:8rem;--settings-column-gap:clamp(var(--field-label-gap),6cqi,64px);--settings-compact-width:5.8125rem}
.settings-comparison-table .tbl{display:grid;grid-template-columns:var(--settings-label-width) var(--content-col-x) minmax(var(--settings-control-width),max-content) var(--settings-column-gap) minmax(var(--settings-control-width),max-content) minmax(0,1fr);gap:0;width:100%;min-width:0}
.settings-comparison-table.timing-settings-table .tbl{grid-template-columns:var(--settings-label-width) var(--content-col-x) minmax(var(--settings-control-width),max-content) var(--settings-column-gap) minmax(var(--settings-control-width),max-content) var(--settings-column-gap) max-content minmax(0,1fr)}
.settings-comparison-table .tbl thead,.settings-comparison-table .tbl tbody{display:contents}
.settings-comparison-table .tbl tr{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;border-bottom:1px solid var(--line)}
.settings-comparison-table .tbl tr>:nth-child(1){grid-column:1}
.settings-comparison-table .tbl tr>:nth-child(2){grid-column:3}
.settings-comparison-table .tbl tr>:nth-child(3){grid-column:5}
.settings-comparison-table .tbl tr>:nth-child(4){grid-column:7}
.main.standard-page .content .settings-comparison-table .tbl th,
.main.standard-page .content .settings-comparison-table .tbl td{padding-left:0;padding-right:0;border-bottom:0;min-width:0}
.settings-comparison-table .tbl tbody tr:last-child{border-bottom:0}
@media (hover:hover){.settings-comparison-table .tbl tbody tr:hover td{background:transparent}}
@media (max-width:767px){
 .comparison-value-label{display:block}
 .settings-comparison-table .tbl{grid-template-columns:minmax(0,var(--settings-control-width)) var(--content-col-x) minmax(0,var(--settings-control-width)) minmax(0,1fr)}
 .settings-comparison-table.timing-settings-table .tbl{grid-template-columns:var(--settings-compact-width) var(--content-col-x) var(--settings-compact-width) var(--content-col-x) minmax(0,1fr)}
 .settings-comparison-table .tbl thead{display:none}
 .settings-comparison-table .tbl tr{align-items:start;row-gap:var(--content-stack-y);padding:var(--content-row-y) 0}
 .settings-comparison-table .tbl tbody tr:first-child{padding-top:0}
 .settings-comparison-table.timing-settings-table .tbl tbody tr:first-child{padding-top:var(--content-row-y);border-top:1px solid var(--line)}
 .settings-comparison-table .tbl tbody tr:last-child{padding-bottom:0}
 .main.standard-page .content .settings-comparison-table .tbl td{padding:0}
 .settings-comparison-table .tbl tr>:nth-child(1){grid-column:1/-1}
 .settings-comparison-table .tbl tr>:nth-child(2){grid-column:1}
 .settings-comparison-table .tbl tr>:nth-child(3){grid-column:3}
 .settings-comparison-table .tbl tr>:nth-child(4){grid-column:5}
 .settings-comparison-table .timing-value-label,.settings-comparison-table .timing-result-label{display:block}
 /* 秒数の入力欄は 4 文字（999 秒・12.5 秒）が入る幅より縮めない。値の列（--settings-compact-width）は
    入力欄＋単位＋枠の幅に合わせる（3.5rem + 35px + 2px = 5.8125rem）。列を先に決めて入力欄を合わせ込まない。 */
 .settings-comparison-table .timing-value .field input{width:3.5rem}
 .settings-comparison-table .timing-result{display:grid;align-items:center;justify-items:start;gap:8px}
 .settings-comparison-table .timing-value>span:not(.ui-column-head):not(.field),.settings-comparison-table .timing-result>[data-timing-result]{display:flex;align-items:center;min-height:var(--button-min-h)}
 .settings-comparison-table .timing-value,.settings-comparison-table .timing-result{overflow-wrap:anywhere}
}
@container settings-columns (width < 20rem){
 /* 単位の左右を 6px に詰めた幅（3.5rem + 27px + 2px = 5.3125rem）。入力欄は縮めない。 */
 .settings-comparison-table.timing-settings-table .tbl{--settings-compact-width:5.3125rem;grid-template-columns:var(--settings-compact-width) var(--content-stack-y) var(--settings-compact-width) var(--content-stack-y) minmax(0,1fr)}
 .settings-comparison-table .timing-value .field .unit{padding-inline:6px}
}
/* Five-field status records share bounded column gaps and a readable narrow layout. */
/* v195: account detail follows the shared 16/32 vertical rhythm used by individual run. */
.account-detail-intro{display:grid;gap:var(--content-stack-y)}
.account-detail-intro .settings-lock-note{margin:0}
@media (max-width:767px){
 .action-limit-value{grid-template-columns:minmax(0,1fr);row-gap:var(--content-stack-y)}
 .action-limit-label{display:block}
}

/* ===== 入力の方法で決まるもの（DESIGN.md の「端末ごとの決まり」）。画面の幅の条件と組み合わせない =====
   hover の見た目は、各規則を @media (hover:hover) で囲んである（指では、押したあとに色が残るため出さない）。 */
.schedule-move-buttons{display:none;gap:4px}
.schedule-move-buttons .btn{min-width:var(--button-min-h)}
@media (hover:none){
  /* 指で押す範囲の決まり（DESIGN.md）: 押せるものの押せる範囲は、縦・横とも 40px（--touch-h）以上にする。
     (1) 枠のある部品（button・入力欄・select・chip・切り替え・曜日の button）は、部品そのものを 40px にする。
     (2) sidebar の項目（引き出したメニューを含む）は 44px にする。 */
  :root{--touch-h:40px;--button-min-h:var(--touch-h);--nav-item-h:44px;
    /* 40px より小さい部品の、押せる範囲を広げる幅（上下左右。部品の中心から 40px の半分まで。40px ある向きは 0 で、広げない） */
    --hit-grow:min(0px,calc(50% - var(--touch-h) / 2))}
  .field,.sel,.chip,.seg button{min-height:var(--button-min-h)}
  .side .top,.side .lbl,.side .sub a{min-height:var(--nav-item-h)}
  .days button{width:var(--button-min-h);height:var(--button-min-h)}
  /* 40px の曜日 7 つは 320px 幅に 1 行で入らないため、折り返す */
  .days{flex-wrap:wrap}
  /* (3) 見た目が 40px より小さい部品（字の link・記号だけの button・スイッチ）は、見た目の大きさと位置を変えず、押せる範囲だけを
     部品の中心から 40px まで広げる（::before。部品ごとに大きさは書かない。どの部品も、この同じ 1 つの形で広げる）。
     スイッチは、項目名の右に置く形（.ui-toggle-field。マウス用に 36px の押せる範囲を持つ）も同じ形にする（マウス用の規則より後に、同じ強さで書く）。 */
  a:not(.btn),.pagebar .right .ib,.topbar-status .ib{position:relative}
  .pagebar .right .ib::before,.topbar-status .ib::before,.switch::before,.ui-toggle-field .switch::before{content:"";position:absolute;inset:var(--hit-grow)}
  /* link は、狭い幅の一覧の値の行の中では、縦を行の間隔までにする（となりの行の link と重ねない。その行が --hit-grow-y を持つ）。 */
  a:not(.btn,.st)::before,a.st::after{content:"";position:absolute;inset:var(--hit-grow-y,var(--hit-grow)) var(--hit-grow)}
  /* 状態の印つきの link（a.st）は ::before が印なので、::after で広げる。 */
  /* 並べ替えは、つかむ代わりに上へ・下へのボタンで行う */
  .schedule-move-buttons{display:inline-flex}
  .schedule-order-cell>.drag-handle{display:none}
}

/* ===== 入口の状態（通常の navigation を出さない）／見本だけの要素 ===== */
.app.entry-mode .side nav,.app.entry-mode .nav-toggle,.app.entry-mode .topbar-status,.app.entry-mode .side .foot .nav-only{display:none}
.side .foot a.sample{text-decoration:underline}
.hist-toggle-cell{width:1.5rem;text-align:center}