/* The shared look of every screen, taken from the issue pages. The rules and the
   markup for each part are in the manual's Design page (portal/docs/design.md);
   a screen's own file (static/screens/<screen>.css) holds only what that screen alone has. */
:root {
  color-scheme: light;
  --bg: #f5f7f9;
  --surface: #ffffff;
  --ink: #1b2230;
  --ink-2: #3d4757;
  --muted: #5d6676;
  --line: #d4dae2;
  --web: #1d6787;
  --web-soft: #e2eff5;
  --warn: #b0431b;
  --caution: #855c00;
  --chip: #eef1f5;
  --ok: #37724b;
  --done: #7646c8;
  /* label colours (issue tags) */
  --hue-1: #0b5cad;
  --hue-2: #2d6e3e;
  --hue-3: #a8480f;
  --hue-4: #7646c8;
  --hue-5: #a83273;
  --hue-6: #0f766e;
  --sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* a ruled row under the pointer, popup and dialog shadows */
  --hover: color-mix(in srgb, var(--bg) 55%, var(--surface));
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.18);
  --shadow-dlg: 0 12px 40px rgb(0 0 0 / 0.25);
}
/* Dark by system preference unless a page pins data-theme="light"; data-theme="dark" forces it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #10141a;
    --surface: #171c24;
    --ink: #e3e8ef;
    --ink-2: #c3cad5;
    --muted: #97a1af;
    --line: #2b333f;
    --web: #6cb4d4;
    --web-soft: #15303c;
    --warn: #ef8a62;
    --caution: #d9b04a;
    --chip: #202733;
    --ok: #7dc293;
    --done: #b08ef5;
    --hue-1: #6eb0f7;
    --hue-2: #72c486;
    --hue-3: #f0a061;
    --hue-4: #b893f7;
    --hue-5: #ef86bd;
    --hue-6: #5fcfc0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10141a;
  --surface: #171c24;
  --ink: #e3e8ef;
  --ink-2: #c3cad5;
  --muted: #97a1af;
  --line: #2b333f;
  --web: #6cb4d4;
  --web-soft: #15303c;
  --warn: #ef8a62;
  --caution: #d9b04a;
  --chip: #202733;
  --ok: #7dc293;
  --done: #b08ef5;
  --hue-1: #6eb0f7;
  --hue-2: #72c486;
  --hue-3: #f0a061;
  --hue-4: #b893f7;
  --hue-5: #ef86bd;
  --hue-6: #5fcfc0;
}
* { box-sizing: border-box; }
/* keep-all: Korean words never break between syllables; break-word still wraps a long run. */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
a { color: inherit; }

/* ---- top bar --------------------------------------------------------------------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { font-weight: 700; text-decoration: none; }
/* The PI's app switch beside the brand: Portal and Studio (portal.js opens it). */
.apps { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.apps-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.apps-toggle:hover, .apps-toggle[aria-expanded="true"] { color: var(--ink); background: var(--chip); }
.apps-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apps-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; min-width: 140px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); font-size: 14px; }
.apps-toggle[aria-expanded="false"] + .apps-menu { display: none; }
.apps-menu a { padding: 5px 10px; border-radius: 4px; text-decoration: none; color: var(--ink-2); }
.apps-menu a:hover { background: var(--chip); color: var(--ink); }
.apps-menu a[aria-current] { color: var(--ink); font-weight: 600; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.top nav a { text-decoration: none; color: var(--muted); white-space: nowrap; }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* Right end: theme button, Account · Admin · Manual, Sign out. */
.util { margin-left: auto; display: flex; align-items: center; gap: 6px 14px; }
.logout { margin: 0; }
.logout button { font: inherit; font-size: 14px; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; white-space: nowrap; }
.logout button:hover, .top nav a:hover, .theme:hover, .menu:hover { color: var(--ink); }
.theme, .menu { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.theme svg, .menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The icon names the theme a click switches to. */
.theme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .moon { display: none; }
  :root:not([data-theme="light"]) .theme .sun { display: block; }
}
:root[data-theme="dark"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
/* Narrow screens fold the menus under the bar behind the menu button (portal.js
   flips aria-expanded); wider ones keep them in the bar and hide the button. */
.top-menu { display: contents; }
.menu, .menu .x, .menu[aria-expanded="true"] .bars { display: none; }
.menu[aria-expanded="true"] .x { display: block; }
@media (max-width: 640px) {
  .apps { gap: 6px; }
  .apps-toggle, .menu { width: 32px; height: 32px; }
  .menu { display: inline-grid; margin-left: auto; }
  .menu[aria-expanded="false"] + .top-menu { display: none; }
  .menu + .top-menu { display: grid; flex-basis: 100%; gap: 4px; }
  .menu + .top-menu > nav { flex-direction: column; gap: 0; }
  .menu + .top-menu > nav a { padding: 8px 0; }
  .menu + .top-menu .util { margin-left: 0; padding-top: 4px; border-top: 1px solid var(--line); }
  .menu + .top-menu .util, .menu + .top-menu .util nav { gap: 18px; }
  .menu + .top-menu .util nav a, .menu + .top-menu .logout button { padding: 8px 0; }
}

/* ---- page frame, status lines, text helpers -------------------------------------- */
main { max-width: 980px; margin: 0 auto; padding: 16px 20px 48px; display: grid; gap: 12px; }
/* A record page with a sidebar (one issue, one project) is wider. */
main.rec-page { max-width: 1120px; }
main > h1 { margin: 0; font-size: 22px; }
.meta { color: var(--muted); font-size: 13px; margin: 0; }
.mono { font-family: var(--mono); font-size: 12px; }
.msg { margin: 0; padding: 6px 20px; font-size: 13px; color: var(--ink-2); background: var(--chip); }
.msg.err { color: var(--warn); }
.msg.ro { background: var(--web-soft); color: var(--ink); }
.err { color: var(--warn); }
.ok { color: var(--ok); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.user-text { overflow-wrap: anywhere; }
.user-text a { color: var(--web); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--web); outline-offset: 2px; }

/* ---- page head: the title and the page's main action ----------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.page-head h1 { margin: 0; font-size: 22px; }
.page-head .btns { margin-left: auto; }
/* The source line under the title ("Drive 1_Research · 16 projects · view only"). */
.page-head > .meta { flex-basis: 100%; order: 3; margin-top: -4px; }
/* The active filters above a list, with Clear filters. */
.filtered { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13.5px; }
.filtered a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; text-decoration: none; }
.filtered a:hover { color: var(--web); }

/* ---- buttons ----------------------------------------------------------------------- */
.btn { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); background: var(--hover); color: var(--ink); }
.btn.pri { background: var(--web); border-color: var(--web); color: var(--surface); }
.btn.pri:hover { background: color-mix(in srgb, var(--web) 88%, var(--ink)); }
.btn.sm { font-size: 12px; min-height: 22px; padding: 1px 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Touch screens: small buttons keep a 28 px tap target. */
@media (pointer: coarse) { .btn.sm { min-height: 28px; } }
.btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btns form { margin: 0; }

/* ---- icons (_ui.html icon), labels, counters, states ------------------------------ */
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico .dot { fill: currentColor; stroke: none; }
.st.open { color: var(--ok); }
.st.done { color: var(--done); }
.st.warn { color: var(--warn); }
.st.caution { color: var(--caution); }
.st.web { color: var(--web); }
.st.muted { color: var(--muted); }
/* A coloured label (_ui.html label): issue tags, and any short category. */
.lbl { --c: var(--hue-1); display: inline-block; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-decoration: none; vertical-align: 1px; }
a.lbl:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.lbl.h2 { --c: var(--hue-2); }
.lbl.h3 { --c: var(--hue-3); }
.lbl.h4 { --c: var(--hue-4); }
.lbl.h5 { --c: var(--hue-5); }
.lbl.h6 { --c: var(--hue-6); }
.lbl.ok { --c: var(--ok); }
.lbl.done { --c: var(--done); }
.lbl.warn { --c: var(--warn); }
.lbl.caution { --c: var(--caution); }
.lbl.web { --c: var(--web); }
.lbl.muted { --c: var(--muted); }
/* Filled: the stronger of two states (a Problem beside a Warning). */
.lbl.fill { border-color: var(--c); background: var(--c); color: var(--surface); }
a.lbl.fill:hover { background: color-mix(in srgb, var(--c) 88%, var(--ink)); }
.lbls { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.ctr { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ctr:empty { display: none; }
/* The filled state badge of a record: Open, Closed, and the like. */
.state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; color: var(--surface); font-size: 14px; font-weight: 600; white-space: nowrap; }
.state.open { background: var(--ok); }
.state.done { background: var(--done); }
.state.warn { background: var(--warn); }
.state.caution { background: var(--caution); }
.state.web { background: var(--web); }
.state.muted { background: var(--muted); }

/* ---- boxes: a bordered box with a tinted head, ruled rows, and a foot -------------- */
.box { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; border-radius: 6px 6px 0 0; background: var(--bg); }
.box-head.bar { padding: 10px 16px; }
.box-head h2 { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.box-head h2 .meta { font-weight: 400; }
/* Links at the right of a head: muted, an optional icon first, underlined on hover. */
.box-head > a.meta, .box-head > .meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; }
.box-head > a.meta:hover, .box-head > .meta a:hover { color: var(--web); text-decoration: underline; }
.box-head > .meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.box-row { margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); }
.box-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.box-foot:last-child { border-radius: 0 0 6px 6px; }
.box-none { margin: 0; padding: 36px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; text-align: center; }
.box-head + .tbl, .box-head + .scroll > .tbl, .box-row + .tbl, .box-row + .scroll > .tbl { border-top: 1px solid var(--line); }
/* A box without a head: its first row or empty state draws no rule of its own. */
.box > .box-row:first-child, .box > .box-none:first-child, .box > .box-sub:first-child,
.box > .box-list:first-child > li:first-child { border-top: 0; }
.box > .box-list:first-child > li:first-child { border-radius: 6px 6px 0 0; }
.box > .box-list:first-child > li:only-child { border-radius: 6px; }
/* A page that is one narrow box (sign-in, error, read-only), centred; its h1 sits in the head. */
.box.narrow { width: 100%; max-width: 560px; margin: 8vh auto 0; }
.box-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.box-title h1 { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.box-text { display: grid; gap: 4px; }
.box-text > p { margin: 0; }
/* A box whose content is a sub-head (a day, a group) above its rows. */
.box-sub { margin: 0; padding: 6px 16px; border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.box-sub.on { color: var(--web); }
.box.on { border-color: color-mix(in srgb, var(--web) 55%, var(--line)); }
.box.on > .box-head { background: var(--web-soft); }

/* State tabs and filter buttons in a box head (the issue list's Open / Closed, Mine, Tag). */
.box-tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.box-tabs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; text-decoration: none; }
.box-tabs a:hover, .box-tabs a[aria-current] { color: var(--ink); }
.box-tabs a[aria-current] { font-weight: 600; }
.box-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.fbtn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.fbtn::-webkit-details-marker { display: none; }
.fbtn:hover { background: var(--chip); color: var(--ink); }
.fbtn[aria-pressed="true"] { border-color: var(--line); background: var(--chip); color: var(--ink); font-weight: 600; }
/* A drop-down menu: <details class="drop" data-menu><summary class="fbtn">…</summary><nav class="drop-list">.
   portal.js folds it on a click outside or Escape. */
.drop { position: relative; }
.drop-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 10; display: grid; width: 240px; max-height: 60vh; overflow: auto; padding: 0 0 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-pop); }
.drop-head { margin: 0 0 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.drop-list a, .drop-list label { display: flex; align-items: center; gap: 8px; padding: 5px 12px; color: var(--ink); font-size: 13.5px; text-decoration: none; cursor: pointer; }
.drop-list a:hover, .drop-list label:hover { background: var(--chip); }
.drop-list a:focus-visible { outline-offset: -2px; border-radius: 6px; }
.drop-list label:focus-within { outline: 2px solid var(--web); outline-offset: -2px; }
.drop-list .mark { visibility: hidden; }
.drop-list a[aria-current] .mark { visibility: visible; }

/* A list of records in a box: state or kind icon | title, labels, meta line | counts or date. */
.box-list { list-style: none; margin: 0; padding: 0; }
.box-list > li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 0 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.box-list > li:hover { background: var(--hover); }
.box-list > li:last-child { border-radius: 0 0 6px 6px; }
.box-list > li > .ico { margin-top: 3px; }
.box-list.plain > li { grid-template-columns: minmax(0, 1fr) auto; }
.box-list.dense > li { padding-top: 7px; padding-bottom: 7px; }
.item-main { min-width: 0; }
.item-main > .meta { margin-top: 3px; }
.item-title { margin-right: 4px; color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
a.item-title:hover { color: var(--web); }
.box-list.dense .item-title { font-size: 14.5px; }
.item-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 14px; padding-top: 2px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.item-side a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; }
.item-side a:hover { color: var(--web); }

/* ---- a record page: title bar, state line, main column and sidebar ---------------- */
.rec-top { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rec-top > .meta a { color: var(--muted); }
.rec-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rec-titlebar h1 { min-width: 0; margin: 0; font-size: 26px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rec-num { color: var(--muted); font-weight: 400; }
.rec-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--muted); font-size: 14px; }
.rec-sub b { color: var(--ink); font-weight: 600; }
.rec-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; padding-top: 4px; }
.rec-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
/* Sidebar: small muted headings over ruled sections; a pencil links to the edit form. */
.side { display: grid; min-width: 0; font-size: 13.5px; }
.side section { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.side section:first-child { padding-top: 0; }
.side h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.side h2 a { display: inline-grid; color: var(--muted); }
.side h2 a:hover { color: var(--web); }
.side p { margin: 0; overflow-wrap: anywhere; }
.side-list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.side-list li { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.side-list .ico { color: var(--muted); }
@media (max-width: 760px) {
  .rec-layout { grid-template-columns: 1fr; gap: 12px; }
  .side { order: -1; }
  .side section, .side section:first-child { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 8px 0; }
  .side h2 { margin: 0; }
  .side h2 a { display: none; }
  .rec-titlebar { flex-wrap: wrap; }
  .rec-titlebar h1 { font-size: 22px; }
}

/* ---- forms ------------------------------------------------------------------------- */
input, select, textarea { font: inherit; font-size: 13.5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
/* Text fields, selects, and buttons share one height, so a toolbar row lines up. */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select { min-height: 28px; }
input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
/* A file picker: its button looks like .btn, without a field border around it. */
input[type="file"] { padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; }
input[type="file"]::file-selector-button { min-height: 28px; margin-right: 8px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--hover); color: var(--ink); }
textarea { width: 100%; min-height: 6em; resize: vertical; line-height: 1.5; }
form.inline, .inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
/* A field label above its field, and a group of checkable chips. */
.flabel { display: block; margin: 0 0 6px; padding: 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.chks { display: flex; flex-wrap: wrap; gap: 6px; }
.chk { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; }
.chk:has(input:checked) { border-color: var(--web); background: var(--web-soft); color: var(--ink); }
.chk input { margin: 0; accent-color: var(--web); }
/* A failed form check, shown in the page instead of the browser bubble (portal.js). */
[aria-invalid="true"] { border-color: var(--warn); outline: 1px solid var(--warn); }
[aria-invalid="true"]:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.field-note { grid-column: 1 / -1; align-self: center; color: var(--warn); font-size: 12px; }

/* ---- dialogs: <dialog class="dlg"> with a sticky head and foot. data-dialog-open=<id>
   opens one (portal.js); without script the link's #id shows it in place (:target). -- */
.dlg { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-dlg); }
.dlg::backdrop { background: rgba(10, 14, 20, 0.45); }
.dlg:target { display: block; position: static; width: auto; max-height: none; margin: 0 0 12px; }
.dlg-head, .dlg-foot { position: sticky; z-index: 2; background: var(--surface); }
.dlg-head { top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; font-size: 17px; }
.dlg-body { padding: 16px 20px; }
.dlg-x { display: inline-grid; padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.dlg-x:hover { background: var(--chip); color: var(--ink); }
.dlg-foot { bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.dlg-foot > .meta:first-child { margin-right: auto; }

/* ---- code: a clone URL or command, with a Copy button after it ---------------------- */
.code { padding: 2px 6px; border-radius: 4px; background: var(--chip); color: var(--ink); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
pre.code { display: block; margin: 0; padding: 6px 10px; border: 1px solid var(--line); background: var(--bg); line-height: 1.6; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.codeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.codeline > .code:not(pre) { min-width: 0; }
/* A clone URL in two parts (through /git/, then the repository), so it wraps between them. */
.code .url-part { display: inline-block; }

/* ---- tables and key-value lists --------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; background: var(--bg); }
.tbl th, .tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th:first-child, .tbl td:first-child { padding-left: 16px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 16px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll { position: relative; overflow-x: auto; }
.kv { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 5px 10px; font-size: 13.5px; align-items: baseline; }
.kv .k2 { color: var(--muted); font-size: 12.5px; }
.kv > * { min-width: 0; overflow-wrap: anywhere; }

/* Underlined tabs: the admin screens (admin/_tabs.html), and any page with sub-pages. */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--web); }

@media (max-width: 560px) {
  .kv { grid-template-columns: 1fr; row-gap: 0; }
  .kv > .k2:not(:first-child) { margin-top: 8px; }
  .tbl th, .tbl td { padding: 6px 6px; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 12px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 12px; }
  .box-head, .box-head.bar, .box-row, .box-foot, .box-list > li, .box-sub { padding-left: 12px; padding-right: 12px; }
}