/* FeedHub styles.
   Structure follows the Apps-in-Toss design guidance (semantic tokens over a base scale,
   size+line-height pairs, four spacing steps, list rows, no decorative effects).
   All values are FeedHub's own; no TDS palette, fonts, or assets are used.
   Shell (2026-10-01): icon rail | side panel | main, after the structure of Toss's business console;
   grays are translucent ink so one token reads the same on white cards and on the gray page.
   Components use only the semantic tokens below — never raw hex or px font sizes. */

:root {
  /* base scale (FeedHub) */
  --gray-0: #ffffff; --gray-50: #f6f7f9; --gray-100: #eef0f3; --gray-200: #e2e5ea; --gray-300: #cdd2d9;
  --gray-500: #858d9a; --gray-600: #626a78; --gray-700: #474e5a; --gray-900: #1b1e24;
  --brand-50: #f3effe; --brand-500: #7956e4; --brand-600: #593ab6;

  --ink: 22 28 40;                     /* text and neutral fills are this color at an alpha */

  /* semantic: background layers */
  --color-bg: var(--gray-50);          /* page */
  --color-surface: var(--gray-0);      /* layered content */
  --color-floated: var(--gray-0);      /* dialogs, popups */
  --color-fill: rgb(var(--ink) / .05);        /* neutral buttons, inputs, hover */
  --color-fill-strong: rgb(var(--ink) / .09); /* selected menu item, pressed */
  --color-rail: rgb(var(--ink) / .025);
  /* semantic: text */
  --color-text: rgb(var(--ink) / .92);
  --color-text-sub: rgb(var(--ink) / .76);
  --color-text-weak: rgb(var(--ink) / .62);   /* still 4.5:1 on white and on the gray page */
  --color-on-accent: #ffffff;
  /* semantic: lines */
  --color-divider: rgb(var(--ink) / .09);
  --color-border-input: rgb(var(--ink) / .45);
  /* semantic: brand and status */
  --color-accent: var(--brand-500);
  --color-accent-weak: var(--brand-50);
  --color-accent-weak-text: var(--brand-600);
  --color-danger: #c62828; --color-danger-weak: #fdeeee;
  --color-success: #1c7c43; --color-success-weak: #eaf7ef;
  --color-warning-text: #8a4b00; --color-warning-weak: #fff5e6;
  --color-highlight: #ffe58a; --color-highlight-text: var(--gray-900);
  --color-scrim: rgba(17, 19, 23, .45);
  --shadow-floated: 0 8px 28px rgba(17, 19, 23, .16);

  /* typography: size / line-height pairs, rem so the browser text-size setting applies */
  --fs-display: 1.75rem;  --lh-display: 2.375rem;  /* article title */
  --fs-title: 1.375rem;   --lh-title: 1.875rem;    /* page title */
  --fs-heading: 1.125rem; --lh-heading: 1.625rem;  /* section heading */
  --fs-body-l: 1.0625rem; --lh-body-l: 1.875rem;   /* article body */
  --fs-body: 1rem;        --lh-body: 1.5rem;       /* list titles, main text */
  --fs-body-s: .9375rem;  --lh-body-s: 1.5rem;     /* excerpts, controls */
  --fs-caption: .8125rem; --lh-caption: 1.25rem;   /* meta */
  --fs-micro: .75rem;     --lh-micro: 1.125rem;    /* badges, menu group names */
  --fs-nav: .875rem;      --lh-nav: 1.25rem;       /* side panel items */
  --fs-rail: .6875rem;    --lh-rail: 1rem;         /* icon rail labels */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* spacing: four steps for components, one for layout */
  --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-layout: 2.5rem;
  --radius-s: .5rem; --radius-m: .625rem; --radius-l: 1rem;   /* inner controls < menu items, inputs < cards */
  --rail-w: 4rem; --panel-w: 14rem;
  --row-avatar: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111317; --color-surface: #1a1d23; --color-floated: #22262d;
    --ink: 236 238 242;
    --color-fill: rgb(var(--ink) / .07); --color-fill-strong: rgb(var(--ink) / .12); --color-rail: rgb(var(--ink) / .02);
    --color-text: rgb(var(--ink) / .94); --color-text-sub: rgb(var(--ink) / .76); --color-text-weak: rgb(var(--ink) / .6); --color-on-accent: #111317;
    --color-divider: rgb(var(--ink) / .1); --color-border-input: rgb(var(--ink) / .4);
    --color-accent: #b69eff; --color-accent-weak: #2c2348; --color-accent-weak-text: #d1c2ff;
    --color-danger: #ff8a8a; --color-danger-weak: #3a1c1f; --color-success: #6ad99a; --color-success-weak: #10291c;
    --color-warning-text: #ffcf85; --color-warning-weak: #33260f;
    --color-highlight: #6b5200; --color-highlight-text: #fff3c4;
    --color-scrim: rgba(0, 0, 0, .6); --shadow-floated: 0 8px 28px rgba(0, 0, 0, .5);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.muted { color: var(--color-text-weak); }
.small { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.ok { color: var(--color-success); }
.error { color: var(--color-danger); }
.danger { color: var(--color-danger) !important; }
.inline { display: inline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell: icon rail | side panel | main ---------- */
.layout { display: grid; grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr); min-height: 100vh; }
.layout.no-panel { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

.rail { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; background: var(--color-rail); }
.rail-logo { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--sp-1); }
.rail > a:not(.rail-logo) { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; font-size: var(--fs-rail); line-height: var(--lh-rail); color: var(--color-text-weak); white-space: nowrap; }
.rail > a:hover { text-decoration: none; color: var(--color-text); }
.rail-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-s); }
.rail > a:hover .rail-ic { background: var(--color-fill); }
.rail > a.on { color: var(--color-text); font-weight: 600; }
.rail > a.on .rail-ic { background: var(--color-fill-strong); }
.me { position: relative; margin-top: auto; }
.me summary { list-style: none; cursor: pointer; border-radius: 50%; }
.me summary::-webkit-details-marker { display: none; }
.me-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-size: var(--fs-caption); font-weight: 700; }
.me-menu { position: absolute; left: calc(100% + var(--sp-1)); bottom: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem; padding: var(--sp-1); border-radius: var(--radius-l); background: var(--color-floated); box-shadow: var(--shadow-floated); }
.me-who { display: flex; flex-direction: column; margin-bottom: 4px; padding: var(--sp-1) var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--color-divider); }
.me-who b { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.me-who span { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-weak); }
.me-menu a, .me-menu button.link { display: flex; align-items: center; width: 100%; min-height: 2.25rem; padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-m); background: none; font-size: var(--fs-nav); color: var(--color-text); text-align: left; cursor: pointer; }
.me-menu a:hover, .me-menu button.link:hover { background: var(--color-fill); text-decoration: none; }

.panel { position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-2); border-right: 1px solid var(--color-divider); }
.panel .brand { padding: var(--sp-1) var(--sp-2) var(--sp-3); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 800; color: var(--color-accent); letter-spacing: -.01em; }
.panel .brand:hover { text-decoration: none; }
.nav-group { padding: var(--sp-2) var(--sp-2) 4px; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; color: var(--color-text-weak); }
.views, .feedlist { display: flex; flex-direction: column; gap: 2px; }
.views a, .feedlist a { display: flex; align-items: center; gap: var(--sp-1); min-height: 2.25rem; padding: 0 var(--sp-2); border-radius: var(--radius-m); font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 500; color: var(--color-text-sub); }
.views a .lbl, .feedlist a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.views a b, .feedlist a b { font-weight: 500; font-size: var(--fs-caption); color: var(--color-text-weak); }
.views a .ic { width: 1.125rem; height: 1.125rem; color: var(--color-text-weak); }
.views a:hover, .feedlist a:hover { background: var(--color-fill); text-decoration: none; }
.views a.on, .feedlist a.on { background: var(--color-fill-strong); color: var(--color-text); font-weight: 600; }
.views a.on .ic { color: var(--color-text); }
.feedlist .folder { display: block; min-height: 0; margin-top: var(--sp-1); padding: 4px var(--sp-2); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; color: var(--color-text-weak); }
.feedlist .folder:hover { background: none; color: var(--color-text); text-decoration: underline; }
.feedlist .folder.on { background: none; color: var(--color-text); }
.feedlist .feed.err span { color: var(--color-danger); }
.panel-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--sp-2) 0; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--color-text-weak); }
.menu-toggle, .menu-toggle.btn { display: none; }
.main { min-width: 0; padding: var(--sp-layout); }
.page { max-width: 55rem; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- top area ---------- */
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: 0 var(--sp-1) var(--sp-3); }
.bar h1 { flex: 1; min-width: 12rem; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; letter-spacing: -.01em; }
.bar h1 .muted { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 400; letter-spacing: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.search input { width: 15rem; height: 2.5rem; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-m); background: var(--color-fill); font-size: var(--fs-body-s); }
.search input:focus { background: var(--color-surface); border-color: var(--color-accent); outline: none; }

/* ---------- buttons ---------- */
.btn, button.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 2.5rem; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--radius-m); background: var(--color-fill); color: var(--color-text);
  font-size: var(--fs-body-s); line-height: 1; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover, button.primary:hover { background: var(--color-fill-strong); text-decoration: none; }
.btn.primary, button.primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn.primary:hover, button.primary:hover { filter: brightness(.94); background: var(--color-accent); }
.btn.on, .btn.save.on { background: var(--color-accent-weak); color: var(--color-accent-weak-text); }
.btn[aria-busy="true"], .btn:disabled { opacity: .6; cursor: progress; }
button.link { border: 0; background: none; padding: 0; cursor: pointer; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--color-text-weak); }
button.link:hover, a.link:hover { color: var(--color-text); text-decoration: none; }
button.link.save.on { color: var(--color-accent-weak-text); }

/* ---------- surfaces ---------- */
.card, .entries, .table-wrap, .body, .ai, .highlights, .empty-state { background: var(--color-surface); border-radius: var(--radius-l); }
.card { padding: var(--sp-4); }
.card h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 700; margin-bottom: var(--sp-2); }
.card h3 { margin: var(--sp-3) 0 var(--sp-1); }
.card > p + p, .card .row + p, .card form + p { margin-top: var(--sp-1); }

/* ---------- list rows: left / contents / right ---------- */
.entries { list-style: none; margin: 0; padding: var(--sp-1) 0; }
.entry { position: relative; display: grid; grid-template-columns: var(--row-avatar) 1fr auto; column-gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); }
.entry:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--sp-4) + var(--row-avatar) + var(--sp-3)); right: var(--sp-4); bottom: 0; border-bottom: 1px solid var(--color-divider); }
.entry:hover { background: var(--color-fill); }
.entry:first-child { border-radius: var(--radius-l) var(--radius-l) 0 0; }
.entry:last-child { border-radius: 0 0 var(--radius-l) var(--radius-l); }
.entry .avatar { width: var(--row-avatar); height: var(--row-avatar); border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-weak); color: var(--color-accent-weak-text); font-size: var(--fs-body-s); font-weight: 700; }
.entry .contents { min-width: 0; }
.entry .chevron { align-self: center; color: var(--color-text-weak); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-weak); }
.meta .feed { font-weight: 600; color: var(--color-text-sub); }
.entry .title { display: block; margin: 2px 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.entry .title::after { content: ""; position: absolute; inset: 0; }                 /* whole row opens the article */
.entry .title:hover { text-decoration: none; }
.entry.read .title { color: var(--color-text-weak); font-weight: 500; }
.excerpt { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-actions { position: relative; z-index: 1; display: flex; gap: var(--sp-3); margin-top: var(--sp-1); }
.row-actions .link { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--color-text-weak); }
.entry blockquote, .entry .note { position: relative; z-index: 1; }
.entry a.link { position: relative; z-index: 1; }
.tag, .prio { display: inline-block; padding: 1px var(--sp-1); border-radius: 999px; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; }
.tag { background: var(--color-accent-weak); color: var(--color-accent-weak-text); }
.prio { background: var(--color-fill-strong); color: var(--color-text); }
.prio.p4, .prio.p5 { background: var(--color-warning-weak); color: var(--color-warning-text); }
.pager { display: flex; justify-content: center; gap: var(--sp-4); padding: var(--sp-3); font-size: var(--fs-body-s); }

/* ---------- empty / result ---------- */
.empty-state { padding: var(--sp-layout) var(--sp-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.empty-state .figure { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-fill); color: var(--color-text-weak); margin-bottom: var(--sp-1); }
.empty-state .figure .ic { width: 1.75rem; height: 1.75rem; }
.empty-state h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 700; }
.empty-state p { color: var(--color-text-sub); font-size: var(--fs-body-s); line-height: var(--lh-body-s); max-width: 28rem; }
.empty-state .btn { margin-top: var(--sp-2); }
.result-count { padding: 0 var(--sp-1); color: var(--color-text-weak); font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* ---------- skeleton ---------- */
.skeleton-row { display: grid; grid-template-columns: var(--row-avatar) 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.sk { background: var(--color-fill); border-radius: var(--radius-s); }
.sk.avatar { width: var(--row-avatar); height: var(--row-avatar); border-radius: 50%; }
.sk.line { height: .75rem; margin: .375rem 0; }
.sk.line.w60 { width: 60%; } .sk.line.w90 { width: 90%; } .sk.line.w30 { width: 30%; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: sk-pulse 1.4s ease-in-out infinite; } }
@keyframes sk-pulse { 50% { opacity: .45; } }

/* ---------- article ---------- */
.article { display: flex; flex-direction: column; gap: var(--sp-2); }
.article > .meta, .article > h1, .article > .toolbar, .article > .hint { padding: 0 var(--sp-1); }
.article h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -.015em; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-bottom: var(--sp-1); }
.hint { color: var(--color-text-weak); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.ai { padding: var(--sp-3) var(--sp-4); }
.ai-head { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 700; margin-bottom: 4px; color: var(--color-accent-weak-text); }
.ai ul { margin: var(--sp-1) 0; padding-left: var(--sp-4); }
.body { padding: var(--sp-4) var(--sp-layout); font-size: var(--fs-body-l); line-height: var(--lh-body-l); overflow-wrap: anywhere; }
.body img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.body pre { overflow: auto; background: var(--color-fill); padding: var(--sp-2); border-radius: var(--radius-s); font-size: var(--fs-body-s); }
.body a { color: var(--color-accent); text-decoration: underline; }
.body mark.hl { background: var(--color-highlight); color: var(--color-highlight-text); cursor: pointer; padding: 0 1px; border-radius: 2px; }
.highlights { padding: var(--sp-4); }
.highlights h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 700; margin-bottom: var(--sp-2); }
.highlights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
blockquote { margin: 4px 0; padding: var(--sp-1) var(--sp-2); border-left: 3px solid var(--color-highlight); background: var(--color-bg); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
blockquote.comment { border-left-color: var(--color-accent); }
.note { margin: 2px 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-sub); }

/* ---------- forms ---------- */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.row input, .row select, .table select, .table input[type="text"], .table input:not([type]) {
  height: 2.5rem; padding: 0 var(--sp-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-m); background: var(--color-surface); font-size: var(--fs-body-s);
}
.row input[type="file"] { border: 0; padding: 0; height: auto; }
.check { display: block; margin: var(--sp-1) 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-1); }
.stack textarea { width: 100%; min-height: 6rem; padding: var(--sp-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-m); background: var(--color-surface); resize: vertical; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
code.temp { font-size: var(--fs-body-s); letter-spacing: .04em; user-select: all; white-space: nowrap; }
#created .link { white-space: nowrap; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--color-text-weak); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.table td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body-s); line-height: var(--lh-body-s); border-bottom: 1px solid var(--color-divider); vertical-align: middle; word-break: keep-all; }
.table tr:last-child td { border-bottom: 0; }
.card .table { margin-top: var(--sp-2); }
.kv th { padding: var(--sp-1) var(--sp-4) var(--sp-1) 0; text-align: left; font-weight: 500; color: var(--color-text-weak); font-size: var(--fs-body-s); }
.kv td { font-size: var(--fs-body-s); }

/* ---------- banners ---------- */
.alert { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-m); background: var(--color-warning-weak); color: var(--color-warning-text); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.alert label { display: block; font-weight: 600; }
.alert-ok { background: var(--color-success-weak); color: var(--color-success); }
p.ok, p.error { padding: 0 var(--sp-1); font-size: var(--fs-body-s); }

/* ---------- floating: popup, dialog, toast ---------- */
.pop { position: absolute; z-index: 10; width: 18rem; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); background: var(--color-floated); border-radius: var(--radius-l); box-shadow: var(--shadow-floated); }
.pop textarea, .modal textarea { width: 100%; min-height: 4.5rem; padding: var(--sp-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-m); background: var(--color-surface); resize: vertical; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.pop .btn-pair, .modal .btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); background: var(--color-scrim); }
.modal .dialog { width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--color-floated); border-radius: var(--radius-l); box-shadow: var(--shadow-floated); }
.modal .dialog h3 { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 700; }
.modal .dialog p { color: var(--color-text-sub); font-size: var(--fs-body-s); }
.modal[hidden], .pop[hidden] { display: none; }
.toast { position: fixed; left: 50%; bottom: var(--sp-4); z-index: 30; max-width: calc(100vw - 2rem); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-m); background: var(--color-text); color: var(--color-surface); font-size: var(--fs-body-s); line-height: var(--lh-body-s); opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- auth pages ---------- */
body.auth { background: var(--color-surface); }
.auth-layout { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-layout) var(--sp-3); }
.auth-form { width: 100%; max-width: 25rem; }
.auth-brand { display: inline-block; margin-bottom: var(--sp-4); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 800; color: var(--color-accent); }
.auth-form h2 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--sp-1); }
.auth-form .lead { color: var(--color-text-sub); font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin-bottom: var(--sp-4); }
.auth-form label { display: block; margin: var(--sp-3) 0 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; color: var(--color-text-sub); }
.auth-form input { width: 100%; height: 3rem; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-m); background: var(--color-fill); font-size: var(--fs-body); }
.auth-form input:focus { outline: none; background: var(--color-surface); border-color: var(--color-accent); }
.auth-form input:disabled { color: var(--color-text-weak); }
.auth-form button.primary, .auth-form .btn.primary { width: 100%; height: 3.25rem; margin-top: var(--sp-4); font-size: var(--fs-body); }
.auth-form .error { margin-top: var(--sp-2); font-size: var(--fs-body-s); }
.auth-form .foot-note { margin-top: var(--sp-3); color: var(--color-text-weak); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.auth-foot { margin-top: var(--sp-layout); color: var(--color-text-weak); font-size: var(--fs-micro); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .layout, .layout.no-panel { grid-template-columns: minmax(0, 1fr); }
  /* the rail becomes a bottom tab bar; the side panel opens above the page from a button */
  .rail { position: fixed; top: auto; right: 0; bottom: 0; left: 0; height: auto; flex-direction: row; justify-content: space-around; gap: 0;
          padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-divider); }
  .rail-logo, .rail > a[href="/settings"] { display: none; }
  .rail > a:not(.rail-logo) { flex: 1; width: auto; }
  .me { margin-top: 0; flex: 1; display: grid; place-items: center; }
  .me-menu { left: auto; right: var(--sp-1); bottom: calc(100% + var(--sp-2)); }
  .panel { display: none; position: static; height: auto; padding: var(--sp-2) var(--sp-3) 0; border-right: 0; }
  .panel.open { display: flex; }
  .panel .brand { display: none; }
  .menu-toggle.btn { display: inline-flex; margin-bottom: var(--sp-2); }
  .main { padding: var(--sp-3) var(--sp-3) calc(5rem + env(safe-area-inset-bottom)); }
  .bar h1 { flex-basis: 100%; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .entry { padding: var(--sp-3); column-gap: var(--sp-2); }
  .entry:not(:last-child)::after { left: calc(var(--sp-3) + var(--row-avatar) + var(--sp-2)); right: var(--sp-3); }
  .entry .chevron { display: none; }
  .body { padding: var(--sp-3); }
}
.side-empty { padding: 0 var(--sp-2); color: var(--color-text-weak); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.btn.block { display: flex; width: 100%; height: 3.25rem; margin-top: var(--sp-4); font-size: var(--fs-body); }

/* ---------- additions for management pages ---------- */
.alert-error { background: var(--color-danger-weak); color: var(--color-danger); }
.row .grow { flex: 1; min-width: 12rem; }
.row .w-select { width: 12.5rem; }
.row .w-name { width: 9rem; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-m); background: var(--color-fill); }
.seg a { display: inline-flex; align-items: center; height: 2.125rem; padding: 0 var(--sp-2); border-radius: var(--radius-s); font-size: var(--fs-body-s); font-weight: 600; color: var(--color-text-sub); }
.seg a:hover { text-decoration: none; color: var(--color-text); }
.seg a.on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(17, 19, 23, .08); }
.card .sub-title { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 600; color: var(--color-text-sub); }
.card h2 + .sub-title { margin-top: 0; }
.status { display: inline-block; padding: 1px var(--sp-1); border-radius: 999px; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; white-space: nowrap; background: var(--color-fill); color: var(--color-text-sub); }
.status.good { background: var(--color-success-weak); color: var(--color-success); }
.status.bad { background: var(--color-danger-weak); color: var(--color-danger); }
.table .cell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.table .cell-actions form { display: inline; }
.table .err-text { margin-top: 2px; color: var(--color-danger); font-size: var(--fs-caption); line-height: var(--lh-caption); }
tr.dim td { color: var(--color-text-weak); }
.entry .src { position: relative; z-index: 1; }
/* article body: restore reading rhythm removed by the global margin reset */
.body > :first-child { margin-top: 0; }
.body p, .body ul, .body ol, .body pre, .body figure, .body table, .body blockquote { margin: 0 0 1em; }
.body h1, .body h2, .body h3, .body h4 { margin: 1.6em 0 .5em; font-weight: 700; letter-spacing: -.01em; }
.body h1 { font-size: var(--fs-title); line-height: var(--lh-title); }
.body h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); }
.body h3, .body h4 { font-size: var(--fs-body); line-height: var(--lh-body); }
.body ul, .body ol { padding-left: 1.5em; }
.body li + li { margin-top: .25em; }
.table td:first-child { min-width: 13rem; }
.table td .muted.small { overflow-wrap: anywhere; word-break: normal; }
.table .cell-actions { flex-wrap: nowrap; white-space: nowrap; }
.table td select { max-width: 11rem; }
.page.wide { max-width: 72rem; }
@media (max-width: 760px) { .table td:first-child { min-width: 8rem; } }
.auth-form .btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); margin-top: var(--sp-4); }
.auth-form .btn-pair .btn { height: 3.25rem; margin-top: 0; width: 100%; font-size: var(--fs-body); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
/* ---------- team share board and highlight groups (2026-10-01) ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-2); }
.board-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); background: var(--color-surface); border-radius: var(--radius-l); }
.board-card:hover { background: var(--color-fill); }
.board-card .title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.board-card .title::after { content: ""; position: absolute; inset: 0; }
.board-card .title:hover { text-decoration: none; }
.board-card .sharer { display: flex; gap: var(--sp-1); align-items: flex-start; }
.board-card .sharer p { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.board-card blockquote { margin: 0; }
.board-card blockquote .who { display: block; margin-top: 2px; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--color-text-weak); }
.avatar-sm { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-weak); color: var(--color-accent-weak-text); font-size: var(--fs-micro); font-weight: 700; }
.card-foot { margin-top: auto; padding-top: var(--sp-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-weak); }
.hl-group { padding: var(--sp-3) var(--sp-4); background: var(--color-surface); border-radius: var(--radius-l); }
.hl-group h2 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.hl-group .meta { margin: 2px 0 var(--sp-2); }
.hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.hl-list li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--sp-2); }
.hl-list .who { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-sub); padding-top: var(--sp-1); }
.hl-list blockquote { margin: 0; }
@media (max-width: 760px) {
  .hl-list li { grid-template-columns: 1fr; gap: 2px; }
  .hl-group { padding: var(--sp-3); }
}
.steps { margin: var(--sp-2) 0; padding-left: var(--sp-4); font-size: var(--fs-body-s); line-height: var(--lh-body-s); display: flex; flex-direction: column; gap: 4px; }
details.dev summary { cursor: pointer; font-size: var(--fs-caption); color: var(--color-text-weak); }
details.dev[open] summary { margin-bottom: var(--sp-1); }
details.dev pre { overflow-x: auto; padding: var(--sp-2); border-radius: var(--radius-s); background: var(--color-fill); font-size: var(--fs-caption); }