/* The shared look of every screen, the same design system as the lab Portal. The rules
   and the markup for each part are in the docs' 디자인 page (studio/docs/design.md); a
   screen's own file (static/screens/<screen>.css) holds only what that screen alone has.
   Each color is light-dark(light, dark): the system's theme picks, unless the theme
   button pins data-theme="light" or "dark" (studio.js). */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f5f7f9, #10141a);
  --surface: light-dark(#ffffff, #171c24);
  --ink: light-dark(#1b2230, #e3e8ef);
  --ink-2: light-dark(#3d4757, #c3cad5);
  --muted: light-dark(#5d6676, #97a1af);
  --line: light-dark(#d4dae2, #2b333f);
  --web: light-dark(#1d6787, #6cb4d4);
  --web-soft: light-dark(#e2eff5, #15303c);
  --warn: light-dark(#b0431b, #ef8a62);
  --caution: light-dark(#855c00, #d9b04a);
  --chip: light-dark(#eef1f5, #202733);
  --ok: light-dark(#37724b, #7dc293);
  --done: light-dark(#7646c8, #b08ef5);
  /* label colors (lbl h1 … h6) */
  --hue-1: light-dark(#0b5cad, #6eb0f7);
  --hue-2: light-dark(#2d6e3e, #72c486);
  --hue-3: light-dark(#a8480f, #f0a061);
  --hue-4: light-dark(#7646c8, #b893f7);
  --hue-5: light-dark(#a83273, #ef86bd);
  --hue-6: light-dark(#0f766e, #5fcfc0);
  --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);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { 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 app switch beside the brand: Studio and the lab Portal (studio.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, MFA · 문서 · 설정, 로그아웃. */
.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 (studio.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; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
/* A record page with a sidebar (one paper, one person, one project) is wider. */
main.rec-page { max-width: 1120px; }
/* A page whose list wants the whole window (the feed, the library, the projects board). */
main.wide { max-width: 1320px; }
main > h1 { margin: 0; font-size: 22px; }
.meta { color: var(--muted); font-size: 13px; margin: 0; }
.mono { font-family: var(--mono); font-size: 12px; }
/* The status line of the last action (?msg=), with its undo form if any; msg err a refusal. */
.msg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 6px 14px; border-radius: 6px; font-size: 13px; color: var(--ink-2); background: var(--chip); scroll-margin-top: 8px; }
.msg form { margin: 0; }
.msg:focus { outline: none; }
.msg.err { color: var(--warn); }
.err { color: var(--warn); }
.ok { color: var(--ok); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* hidden always hides, whatever display a component sets (page scripts toggle el.hidden). */
[hidden] { display: none !important; }
.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 { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 22px; }
.page-head .btns { margin-left: auto; }
/* The source line under the title ("My Drive/1_Research · 16"). */
.page-head > .meta { flex-basis: 100%; order: 3; margin-top: -4px; }
/* The active filters above a list, with 필터 지우기. */
.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); }
/* A back link above a page or record ("← 라이브러리"). */
.crumb { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; text-decoration: none; }
.crumb a:hover { color: var(--web); text-decoration: underline; }

/* ---- 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; }
/* A destructive action (삭제): plain, its words in the problem color. */
.btn.danger { color: var(--warn); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: 0.5; cursor: progress; }
/* A state button (Follow / Following, a stage): pressed shows the accent. */
.btn[aria-pressed="true"] { border-color: var(--web); background: var(--web-soft); color: var(--web); font-weight: 600; }
/* 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 colored label: a short category or state. */
.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 문제 beside a 경고). */
.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. */
.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; }
/* A head with nothing shown after it (its rows hidden or none) rounds all four corners. */
.box-head:not(:has(~ :not([hidden]))) { border-radius: 6px; }
.box-head :is(h2, h3) { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.box-head :is(h2, h3) .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, .dlg-head > a.meta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; }
.box-head > a.meta:hover, .box-head > .meta a:hover, .dlg-head > a.meta:hover { color: var(--web); text-decoration: underline; }
.box-head > .meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.box-head form { margin: 0; }
/* A folding box: <details class="box"><summary class="box-head">…{{ icon('caret', 'fold') }}</summary>. */
details.box > summary.box-head { list-style: none; cursor: pointer; }
details.box > summary.box-head::-webkit-details-marker { display: none; }
details.box:not([open]) > summary.box-head { border-radius: 6px; }
details.box > summary .fold { margin-left: auto; color: var(--muted); }
details.box[open] > summary .fold { transform: rotate(180deg); }
.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-foot form { margin: 0; }
.box-none { margin: 0; padding: 36px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; text-align: center; }
.box-none a { color: var(--web); text-decoration: none; }
.box-none a:hover { text-decoration: underline; }
.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 > .row: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, a short form), 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 small tinted sub-head between rows (a group inside a box). */
.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 (전체 · Following, 읽은 글도 보기). */
.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; }
.box-tools form { margin: 0; }
.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">.
   studio.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: 4px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-pop); }
.drop-list.left { right: auto; left: 0; }
.drop-head { margin: -4px 0 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.drop-list a, .drop-list label, .drop-list button { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.drop-list a:hover, .drop-list label:hover, .drop-list button:hover { background: var(--chip); }
.drop-list a:focus-visible, .drop-list button: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, .drop-list button[aria-pressed="true"] .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; }
.box-list > li > form { margin: 0; }
.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); }
.item-side form { margin: 0; }

/* ---- a record page: title bar, sub line, main column and sidebar ------------------ */
.rec-top { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.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-titlebar .btns { flex: none; justify-content: flex-end; }
.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 a:not(.btn, .tag a) { color: var(--web); text-decoration: none; }
.side a:not(.btn, .tag a):hover { text-decoration: underline; }
.side form { margin: 0; }
.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: minmax(0, 1fr); gap: 12px; }
  .side { order: -1; }
  .side section, .side section:first-child { display: grid; grid-template-columns: 72px 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; }
}

/* ---- a two-pane page: a list box | the main column (the feed, the library) --------- */
.panes { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
/* One minmax(0, 1fr) column: an auto column would take the width of the longest one-line
   name (a source title) and push counts and rows past the edge. */
.pane-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.pane-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; font-size: 13.5px; }
.pane-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.pane-grp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 6px 8px; }
.pane-grp + .pane-grp { border-top: 1px solid var(--line); }
.pane-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border-radius: 6px; color: var(--ink-2); text-decoration: none; }
.pane-item > .ico { color: var(--muted); }
.pane-item:hover { background: var(--chip); color: var(--ink); }
.pane-item.top { color: var(--ink); font-weight: 600; }
/* an item under a group's top item lines up with the top item's name */
.pane-item.sub { padding-left: 32px; }
.pane-item.zero { color: var(--muted); }
.pane-item[aria-current] { background: var(--web-soft); color: var(--web); font-weight: 600; }
.pane-item[aria-current] > .ico { color: var(--web); }
.pane-item[aria-current] > .ctr { background: var(--surface); color: var(--web); }
/* A name wraps rather than being cut: sources are told apart by their last words. */
.pane-nm { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Narrow screens: the list folds into one line above the main column, which opens. */
.pane-fold { display: none; }
.pane-fold > summary.box-head { flex-wrap: nowrap; }
.pane-fold-t { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.pane-fold-t > .ico { color: var(--muted); }
.pane-fold-t > .pane-nm { flex: 0 1 auto; }
.pane-fold-l { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.pane-fold:not([open]) .pane-open, .pane-fold[open] .pane-shut { display: none; }
.pane-fold[open] .pane-fold-l .ico { transform: rotate(180deg); }
.pane-fold > .pane-list { max-height: 62vh; overflow-y: auto; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .panes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pane-side { display: none; }
  .pane-fold { display: block; }
}

/* ---- 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 one-line form that fills its row: the field grows, the button keeps its width. */
.fill-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.fill-form > input:not([type="hidden"]), .fill-form > .grow { flex: 1 1 220px; min-width: 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; }
/* A form of labelled fields, label left and field right (one column under 560 px). */
.fgrid { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0; }
.fgrid > label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.fgrid > input, .fgrid > textarea, .fgrid > .grow { width: 100%; min-width: 0; }
.fgrid > select { justify-self: start; }
.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 (studio.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 (studio.js); without script the link's #id shows it in place (:target). -- */
.dlg { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-dlg); overscroll-behavior: contain; }
.dlg.narrow { width: min(560px, calc(100vw - 32px)); }
.dlg.small { width: min(420px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(10, 14, 20, 0.45); }
/* Not once open: replaceState keeps :target, and a modal opened at #id must stay centred. */
.dlg:target:not([open]) { display: block; position: static; width: auto; max-height: none; margin: 0 0 12px; }
.dlg form { margin: 0; }
.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 { min-width: 0; margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.dlg-body { display: grid; gap: 12px; padding: 16px 20px; }
.dlg-x { display: inline-grid; flex: none; 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; }
.dlg[aria-busy="true"] .dlg-foot .btn { opacity: 0.5; pointer-events: none; }
@media (max-width: 560px) {
  .dlg { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .dlg-head, .dlg-body, .dlg-foot { padding-left: 14px; padding-right: 14px; }
}

/* ---- code: a token 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; }
code { font-family: var(--mono); font-size: 0.9em; }

/* ---- 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: a 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); }

/* ==== Studio's own shared parts ===================================================== */

/* ---- article rows: feed, home, search, a person's papers, author checks ----------- */
/* Title (relevance shades it, feed.css), then authors left and date right; the marks
   (one .acts group per page, feed.js) float at the right of the row under the pointer. */
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 16px; border-top: 1px solid var(--line); }
.row:hover, .row:focus-within { background: var(--hover); }
.row:focus-visible { outline: 2px solid var(--web); outline-offset: -2px; }
.box > .row:last-child { border-radius: 0 0 6px 6px; }
.row .t { color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.row[data-article] .t { padding-right: 150px; }
a.t:hover { text-decoration: underline; }
.row .sub { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.row .al { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .date { flex: none; font-variant-numeric: tabular-nums; }
.row .note { color: var(--ink-2); font-size: 13px; }
.row.read .t { color: var(--muted); font-weight: 400; }
.row.read .sub { opacity: 0.75; }
/* A mark or library symbol before a title (✅ ⭐ ●). */
.sym { display: inline-block; min-width: 1.6em; margin-right: 2px; }
.acts { position: absolute; right: 10px; top: 5px; display: flex; gap: 2px; padding: 1px 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); opacity: 0; transition: opacity 0.12s; }
.acts form { margin: 0; }
.row:hover .acts, .row:focus-within .acts { opacity: 1; }
/* A mark button: ✅ ⚠️ ❌ ⭐ or a short word; on is the accent's soft fill. */
.act { font: inherit; font-size: 13px; padding: 0 5px; border: 0; border-radius: 4px; background: none; color: var(--ink-2); cursor: pointer; line-height: 1.6; }
.act:hover { background: var(--chip); color: var(--ink); }
.act.on, .act[aria-pressed="true"] { background: var(--web-soft); }
.act[aria-busy="true"] { opacity: 0.4; }
/* The marks as a row of buttons (a paper's page, the article dialog). */
.marks { display: flex; flex-wrap: wrap; gap: 4px; }
.marks form { margin: 0; }
.marks .act { min-height: 28px; padding: 2px 9px; border: 1px solid var(--line); font-size: 14px; }
.marks .act.on, .marks .act[aria-pressed="true"] { border-color: var(--web); box-shadow: inset 0 0 0 1px var(--web); }
/* "+N" or "N편 더" at the end of a list of rows. */
.more { display: block; margin: 0; padding: 6px 16px 7px; border-top: 1px solid var(--line); color: var(--web); font-size: 13px; font-weight: 600; text-decoration: none; }
a.more:hover { text-decoration: underline; }
.more[aria-busy="true"] { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .acts { transition: none; } }

/* ---- author names (_authors.html): Following in the accent, candidates dotted ----- */
.au, [data-authors] a:not(.au) { color: inherit; text-decoration: none; }
.au:hover, [data-authors] a:not(.au):hover { text-decoration: underline; }
.au.tracked { color: var(--web); font-weight: 500; }
.au.cand { text-decoration: underline dashed var(--web); text-underline-offset: 3px; }
/* The follow dialog (a .dlg small, studio.js): the name and the question. */
.fdlg-q { margin: 0; color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.fdlg-q a { color: var(--web); text-decoration: none; }
.fdlg-q a:hover { text-decoration: underline; }

/* ---- removable values: a name, a tag, an attachment, with × to remove ------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips > form { flex: 1 1 140px; min-width: 0; }
.chips > form input { width: 100%; }
.tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 2px 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 12.5px; line-height: 22px; overflow-wrap: anywhere; }
.tag a { color: inherit; text-decoration: none; }
.tag a:hover { color: var(--web); text-decoration: underline; }
.tag form { display: inline-flex; margin: 0; }
.tag button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.tag button:hover { background: var(--line); color: var(--ink); }
.tag button .ico { width: 12px; height: 12px; }

/* ---- narrow screens ------------------------------------------------------------------ */
@media (max-width: 560px) {
  .kv { grid-template-columns: 1fr; row-gap: 0; }
  .kv > .k2:not(:first-child) { margin-top: 8px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fgrid > label:not(:first-child) { margin-top: 6px; }
  .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, .row, .more { padding-left: 12px; padding-right: 12px; }
  .row .t, .row[data-article] .t { padding-right: 0; }
  .acts { position: static; justify-self: start; margin-top: 4px; }
  .row:not(:focus-within) .acts { display: none; }
}