/* Scientia AI — shared stylesheet
   Background/list-layout instinct from the v1 concept mockup, accent colors
   swapped for a more "AI-coded" cyan/jade/magenta set. See CLAUDE.md → "Design tokens". */

:root{
  --bg:#161c27;
  --bg-1:#1e2635;
  --bg-2:#252f42;
  --hair:rgba(237,231,220,0.11);
  --hair-strong:rgba(237,231,220,0.22);
  --ink:#EDE7DC;
  --ink-dim:#9BA2B0;
  --ink-faint:#6C7484;
  --cyan:#4FD1FF;
  --cyan-dim:#2b7d94;
  --jade:#57AD98;
  --jade-dim:#3c7364;
  --magenta:#FF5FA8;
  --magenta-dim:#9c3a6b;
  --gold:#CDA24A;
  --gold-dim:#8a7237;
  --orange:#FF9F45;
  --orange-dim:#a5651f;
  --accent:var(--cyan);
  --accent-dim:var(--cyan-dim);
  --radius:4px;
  --thumb:56px;
  --nav-h:46px;
}
/* interface language drives the accent color, not just source-language
   badges — English reads cyan, Korean reads jade, everywhere generic UI
   chrome (hovers, CTAs, rank badges) uses --accent. Set on <html> by
   setLang() in main.js. Fixed per-item colors (src-tag.en/ko, embedded
   flags) are deliberately NOT --accent — those label data, not UI state. */
html[lang="ko"]{--accent:var(--jade); --accent-dim:var(--jade-dim);}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', ui-sans-serif, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none; transition:color .15s;}
::selection{background:var(--accent); color:#0c1620;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
button, select, input, textarea{font-family:inherit;}

/* ---------- organic background: irregular grid + very subtle digital rain ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(79,209,255,0.06), transparent),
    radial-gradient(ellipse 700px 500px at 100% 8%, rgba(87,173,152,0.05), transparent),
    radial-gradient(ellipse 600px 420px at 70% 95%, rgba(255,95,168,0.04), transparent),
    repeating-linear-gradient(90deg, rgba(237,231,220,0.035) 0 1px, transparent 1px 97px),
    repeating-linear-gradient(90deg, rgba(237,231,220,0.02) 0 1px, transparent 1px 41px),
    repeating-linear-gradient(0deg, rgba(237,231,220,0.025) 0 1px, transparent 1px 160px),
    var(--bg);
}
#rain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;}

.site-alert{
  position:relative; z-index:1;
  background:var(--bg-2); border-bottom:1px solid var(--hair-strong); color:var(--ink-dim);
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em;
  text-align:center; padding:8px 16px;
}
.site-alert strong{color:var(--gold); font-weight:600; margin-right:6px;}

.wrap{max-width:960px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}

/* ---------- masthead ---------- */
header.masthead{padding:34px 0 0;}
.mast-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--hair);}
.mast-title{
  font-family:'Playfair Display', serif; font-weight:700; font-size:40px;
  letter-spacing:.01em; line-height:1; margin:0; display:flex; align-items:baseline; gap:10px;
}
.mast-title .dot{color:var(--accent); font-size:.5em;}
.mast-tagline{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-dim); margin:9px 0 0; letter-spacing:.03em;}
.mast-tagline .ko{color:var(--jade);}
.mast-lang-col{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;}
.lang-toggle{
  display:flex; align-items:center; gap:2px; background:var(--bg-1);
  border:1px solid var(--hair-strong); border-radius:20px; padding:3px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; flex-shrink:0;
}
.lang-toggle button{
  border:none; background:transparent; color:var(--ink-faint);
  padding:6px 14px; border-radius:20px; cursor:pointer; font-weight:500;
  transition:background .15s, color .15s;
}
.lang-toggle button.active{background:var(--cyan); color:#0c1620;}
.lang-toggle button[data-lang="ko"].active{background:var(--jade); color:#0e2620;}

/* auth status — a quiet "robot power light", not a login button. Dim/gray
   when signed out (still clickable — doubles as a manual sign-in trigger),
   bright green only once confirmed as the owner (see auth.js: this is
   never just "signed in", it's "signed in AND the owner"). */
.auth-status{
  display:flex; align-items:center; gap:5px; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.06em;
  color:var(--ink-faint); opacity:.45; transition:opacity .2s, color .2s; user-select:none;
}
.auth-status::after{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.auth-status.on{color:#57e389; opacity:1;}
.auth-status:hover{opacity:.8;}

.auth-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,16,22,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.auth-overlay.open{opacity:1; pointer-events:auto;}
.auth-overlay-msg{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink);
  background:var(--bg-1); border:1px solid var(--hair-strong); border-radius:20px; padding:10px 20px;
}

/* sticky anchor nav */
.subnav-stick{
  position:sticky; top:0; z-index:50;
  background:rgba(22,28,39,0.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair-strong);
  margin:0 -24px; padding:0 24px;
}
nav.subnav{position:relative; display:flex; gap:22px; flex-wrap:wrap; align-items:center; height:var(--nav-h); font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-dim);}
nav.subnav a{text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent; cursor:pointer;}
nav.subnav a:hover, nav.subnav a.current{color:var(--ink); border-color:var(--accent);}
nav.subnav .subnav-name{margin-right:auto; color:var(--ink-faint); font-weight:600; letter-spacing:.08em;}
/* Reading list stays gold at all times (not just hover/current) — it's this
   week's actionable task, so it needs to read as "look here" at a glance. */
nav.subnav a.subnav-gold{color:var(--gold); font-weight:600;}
nav.subnav a.subnav-gold:hover, nav.subnav a.subnav-gold.current{color:var(--gold); border-color:var(--gold);}
.subnav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.subnav-divider{width:1px; height:14px; background:var(--hair-strong);}
.subnav-toggle{display:none; background:none; border:none; color:var(--ink-dim); font-size:17px; line-height:1; cursor:pointer; padding:4px 2px;}
.subnav-toggle:hover{color:var(--accent);}
@media (max-width:640px){
  .subnav-toggle{display:block;}
  .subnav-divider{display:none;}
  .subnav-links{
    display:none; position:absolute; top:100%; left:-16px; right:-16px;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg-1); border-bottom:1px solid var(--hair-strong);
    padding:4px 16px 10px;
  }
  .subnav-links.open{display:flex;}
  .subnav-links a{width:100%; padding:9px 0; border-bottom:1px solid var(--hair);}
}

/* ---------- back to top ---------- */
#back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-1); border:1px solid var(--hair-strong); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s, transform .2s, border-color .2s, color .2s;
  font-size:16px;
}
#back-to-top.visible{opacity:1; pointer-events:auto; transform:translateY(0);}
#back-to-top:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- filters ---------- */
section.filters{padding:20px 0; border-bottom:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.chip{
  font-family:'IBM Plex Mono', monospace; font-size:12px; border:1px solid var(--hair-strong); color:var(--ink-dim);
  background:transparent; padding:6px 13px; border-radius:20px; cursor:pointer; transition:all .15s;
}
.chip:hover{border-color:var(--accent); color:var(--ink);}
.chip.active{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600;}
.chip.embedded{border-color:var(--jade-dim); color:var(--jade);}
.chip.embedded.active{background:var(--jade); color:#0e2620; border-color:var(--jade);}
.filter-status{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-faint);
}
.filter-status button{background:none; border:none; color:var(--magenta); cursor:pointer; font-family:inherit; font-size:inherit; padding:0;}
.filter-status.hidden{display:none;}
.suggest-source{
  margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--accent); border:1px solid var(--accent-dim); padding:6px 13px; border-radius:20px;
  text-decoration:none; transition:background .15s, color .15s;
}
.suggest-source:hover{background:var(--accent); color:#0c1620;}

/* ---------- section + topic heads ---------- */
section.major-head{padding:30px 0 4px;}
.major-head h2{font-family:'Playfair Display', serif; font-size:24px; margin:0 0 4px;}
.major-head p{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-faint); margin:0;}

.topic-head{
  display:flex; align-items:center; gap:12px; margin:36px 0 6px; padding-bottom:8px;
  border-bottom:2px solid var(--hair-strong);
}
.topic-head .rank{
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:13px;
  background:var(--ink-faint); color:#0c1620; border-radius:3px; padding:3px 8px; letter-spacing:.03em;
  flex-shrink:0;
}
.topic-head h3{
  font-family:'Playfair Display', serif; font-weight:700; font-size:22px; margin:0; color:var(--ink);
}
.topic-sub{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); margin:0 0 14px;}

/* one distinct color per research topic — helps the eye separate the five
   sections while scrolling, independent of the language-tied --accent. */
.topic-head.t1{border-bottom-color:var(--cyan-dim);}
.topic-head.t1 .rank{background:var(--cyan); color:#0c1620;}
.topic-head.t2{border-bottom-color:var(--jade-dim);}
.topic-head.t2 .rank{background:var(--jade); color:#0e2620;}
.topic-head.t3{border-bottom-color:var(--magenta-dim);}
.topic-head.t3 .rank{background:var(--magenta); color:#2a0e1c;}
.topic-head.t4{border-bottom-color:var(--gold-dim);}
.topic-head.t4 .rank{background:var(--gold); color:#20160a;}
.topic-head.t5{border-bottom-color:var(--orange-dim);}
.topic-head.t5 .rank{background:var(--orange); color:#2a1400;}

.filter-group.hidden{display:none;}
.filter-group[id]{scroll-margin-top:104px;} /* clears the fixed subnav + sticky section-tabs bar */

/* ---------- sticky research section tabs ---------- */
/* .research-tabs-scope is what makes the sticky bar turn "off" at News with
   zero JS: position:sticky releases the moment its own containing block's
   bottom scrolls past the sticky offset, so wrapping only the 5 research
   .filter-groups (not News) is the entire mechanism — no scroll listener
   needed to detect "we've left the research zone." */
.research-tabs-scope{position:relative;}
.section-tabs{
  position:sticky; top:var(--nav-h); z-index:40;
  /* overflow-y:hidden is required, not decorative — per spec, a lone
     overflow-x:auto with no overflow-y set computes overflow-y as auto too
     (UAs won't pair auto/scroll with visible), which was giving this bar a
     needless vertical scrollbar since its content is a couple px taller
     than the box. */
  display:flex; align-items:center; gap:22px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  background:rgba(22,28,39,0.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair-strong);
  margin:0 -24px 24px; padding:12px 24px;
}
.section-tab{
  position:relative; flex-shrink:0;
  background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:7px;
  padding:2px 0;
  opacity:.5; filter:grayscale(1); transform:scale(.78); transform-origin:left center;
  transition:opacity .25s, filter .25s, transform .25s;
}
.section-tab:hover{opacity:.8;}
.section-tab.current{opacity:1; filter:grayscale(0); transform:scale(1);}
.section-tab .rank{
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:12px;
  border-radius:3px; padding:3px 7px; letter-spacing:.03em; flex-shrink:0;
}
.section-tab .tab-label{font-family:'Playfair Display', serif; font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap;}
.section-tab.t1 .rank{background:var(--cyan); color:#0c1620;}
.section-tab.t2 .rank{background:var(--jade); color:#0e2620;}
.section-tab.t3 .rank{background:var(--magenta); color:#2a0e1c;}
.section-tab.t4 .rank{background:var(--gold); color:#20160a;}
.section-tab.t5 .rank{background:var(--orange); color:#2a1400;}
.section-tab-indicator{
  position:absolute; bottom:-12px; left:0; height:2px; width:0; background:var(--accent);
  transition:left .3s cubic-bezier(.2,.7,.2,1), width .3s cubic-bezier(.2,.7,.2,1);
}
@media (max-width:640px){
  .section-tabs{margin:0 -16px 20px; padding:10px 16px;}
  .section-tab .tab-label{font-size:13px;}
}

/* Within a topic section, every use of --accent (pill-cta background, title
   hover, tag hover, entry-actions hover) picks up that topic's fixed color
   instead of the language-tied default — descendants inherit --accent from
   the nearest ancestor that sets it, so this overrides html[lang="ko"]'s
   version for everything inside, in either language. */
.filter-group.t1{--accent:var(--cyan); --accent-dim:var(--cyan-dim);}
.filter-group.t2{--accent:var(--jade); --accent-dim:var(--jade-dim);}
.filter-group.t3{--accent:var(--magenta); --accent-dim:var(--magenta-dim);}
.filter-group.t4{--accent:var(--gold); --accent-dim:var(--gold-dim);}
.filter-group.t5{--accent:var(--orange); --accent-dim:var(--orange-dim);}

/* ---------- lead / pinned story ---------- */
.lead-wrap{margin:16px 0 30px;}
.lead-story{
  position:relative; margin:0; padding:22px 24px;
  background:var(--bg-1); border:1px solid var(--magenta-dim); border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,95,168,0.08);
}
/* gold border marks Aaron's own research, not just an editorial pick */
.lead-story.own-research{border-color:var(--gold-dim); box-shadow:0 0 0 1px rgba(205,162,74,0.15);}
.lead-story.own-research .lead-badge{color:var(--gold); border-color:var(--gold-dim);}
.lead-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--magenta);
  border:1px solid var(--magenta-dim); border-radius:20px; padding:3px 10px; margin-bottom:12px;
}
.lead-image{width:100%; max-height:280px; object-fit:cover; border-radius:6px; margin-bottom:16px; display:block;}
.lead-title{font-family:'Playfair Display', serif; font-weight:700; font-size:26px; line-height:1.3; margin:0 0 8px;}
.lead-title a{border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.lead-title a:hover{color:var(--accent); border-color:var(--accent);}
.lead-summary{font-size:15px; line-height:1.65; color:var(--ink-dim); margin:0 0 14px; max-width:62ch;}
.lead-links{display:flex; gap:18px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:12.5px;}
.lead-links a{color:var(--magenta); text-decoration:none; border-bottom:1px dashed var(--magenta-dim);}
.lead-links a:hover{border-style:solid;}

/* secondary pinned stories (priority 2+) — smaller half-width cards below
   the full-width priority-1 lead */
.lead-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
.lead-card{
  position:relative; padding:16px 18px;
  background:var(--bg-1); border:1px solid var(--magenta-dim); border-radius:8px;
}
.lead-card.own-research{border-color:var(--gold-dim); box-shadow:0 0 0 1px rgba(205,162,74,0.12);}
.lead-card.own-research .lead-badge{color:var(--gold); border-color:var(--gold-dim);}
.lead-badge.small{font-size:9.5px; padding:2px 8px; margin-bottom:8px;}
.lead-card-title{font-family:'Playfair Display', serif; font-weight:600; font-size:16px; line-height:1.32; margin:0 0 6px;}
.lead-card-title a{border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.lead-card-title a:hover{color:var(--accent); border-color:var(--accent);}
.lead-card-summary{font-size:12.5px; line-height:1.55; color:var(--ink-dim); margin:0 0 12px;}
@media (max-width:640px){.lead-grid{grid-template-columns:1fr;}}

/* ---------- research log entries (v1 list style, no thumbnails) ---------- */
section.log{padding:6px 0 10px;}
.entry{display:grid; grid-template-columns:100px 1fr; gap:18px; padding:18px 0; border-bottom:1px solid var(--hair);}
.entry:first-child{padding-top:0;}
.entry.wire{opacity:.72;}
/* dims entries Aaron hasn't written a summary for yet — a quick visual
   triage of what still needs writing */
.entry.no-summary, .list-row.no-summary{opacity:.82;}
.entry.wire.no-summary, .list-row.wire.no-summary{opacity:.68;}
.entry-time{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-faint); padding-top:3px;}
.entry-time .date{display:block; color:var(--ink-dim); margin-bottom:3px;}

.src-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px;}
.src-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.04em;
  padding:2px 7px; border-radius:3px; border:1px solid var(--hair-strong);
}
.src-tag.en{color:var(--cyan); border-color:var(--cyan-dim);}
.src-tag.ko{color:var(--jade); border-color:var(--jade-dim);}
.src-tag .swatch{width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block;}

.cov-inline{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-faint);}
.gap-flag{color:var(--magenta); border:1px solid var(--magenta); padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.05em; font-size:9.5px;}
.embedded-flag{color:var(--jade); border:1px solid var(--jade-dim); padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.05em; font-size:9.5px;}
.embedded-flag.health{color:var(--cyan); border-color:var(--cyan-dim);}
.embedded-flag.education{color:var(--magenta); border-color:var(--magenta-dim);}
/* marks entries with Aaron's own written summary — same gold as "own
   research" pins, a consistent "this is my work, not just a fetch" signal */
.summary-badge{color:var(--gold); border:1px solid var(--gold-dim); padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.05em; font-size:9.5px;}
.summary-dot{color:var(--gold); font-size:9px; line-height:1;}
.commentary-flag.own-research{color:var(--gold); border-color:var(--gold-dim);}
/* small muted marker on titles that link straight out to the source
   (no summary written yet) — its absence signals "this links to my page" */
.ext-icon{display:inline-block; margin-left:5px; font-size:.68em; color:var(--ink-faint); vertical-align:middle;}

/* "Read article" pill CTAs — deliberately the brightest, most clickable-looking
   element in each entry, since the original source is the most likely link
   anyone actually wants. */
.pill-cta{
  display:inline-flex; align-items:center; font-family:'IBM Plex Mono', monospace; font-weight:600;
  border-radius:20px; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s, transform .1s;
}
.pill-cta:active{transform:scale(.97);}
.entry-actions .pill-cta{font-size:11.5px; padding:5px 12px; background:var(--accent); color:#0c1620; border-bottom:none;}
.entry-actions .pill-cta:hover{filter:brightness(1.18); color:#0c1620;}
.pill-cta-small{font-size:10px; padding:3px 9px; background:var(--accent); color:#0c1620;}
.pill-cta-small:hover{filter:brightness(1.18);}
.entry-page-cta-row{margin:0 0 20px;}
.pill-cta-big{font-size:14px; padding:11px 22px; background:var(--magenta); color:#fff; box-shadow:0 2px 12px rgba(255,95,168,0.25);}
.pill-cta-big:hover{filter:brightness(1.12);}
.wire-flag{color:var(--ink-faint); border:1px solid var(--hair-strong); padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.05em; font-size:9.5px;}

.entry-title{font-family:'Playfair Display', serif; font-weight:600; font-size:19px; line-height:1.32; margin:0 0 3px;}
.entry-title a{border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.entry-title a:hover{color:var(--accent); border-color:var(--accent);}
.entry-title-ko{font-family:'IBM Plex Sans KR','IBM Plex Sans', sans-serif; font-size:14.5px; color:var(--ink-dim); margin:0 0 9px; font-weight:400;}
.entry-summary{font-size:14px; line-height:1.65; color:var(--ink-dim); margin:0 0 12px; max-width:58ch;}
.entry-summary .gloss-note{display:block; margin-top:6px; font-size:12px; font-style:italic; color:var(--ink-faint);}
.entry-tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.tag{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-faint); border:1px solid var(--hair);
  padding:2px 8px; border-radius:20px; background:none; cursor:pointer; transition:border-color .15s, color .15s;
}
.tag:hover{border-color:var(--accent); color:var(--accent);}
.entry-actions{display:flex; gap:16px; align-items:center;}
.entry-actions button, .entry-actions a{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:11.5px; padding:0; border-bottom:1px dashed var(--ink-faint); text-decoration:none;}
.entry-actions button:hover, .entry-actions a:hover{color:var(--accent); border-color:var(--accent);}
.entry-actions button.marked{color:var(--magenta); border-color:var(--magenta);}
.note-box{display:none; margin-top:12px; max-width:58ch;}
.note-box.open{display:block;}
.note-box textarea{width:100%; min-height:60px; background:var(--bg-1); border:1px solid var(--hair-strong); border-radius:3px; color:var(--ink); font-family:'IBM Plex Sans', sans-serif; font-size:13px; padding:10px; resize:vertical;}
.note-box .note-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; display:block;}
.entry.hidden, .list-row.hidden{display:none;}

/* ---------- news: dense list, smaller, thumbnail beside title only if present ---------- */
section.news{padding:6px 0 10px;}
.list-row{display:grid; grid-template-columns:64px auto 1fr auto; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--hair);}
.list-row:first-child{padding-top:0;}
.list-row.no-thumb{grid-template-columns:64px 1fr auto;}
.list-row.wire{opacity:.72;}
.list-date{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint);}
.list-thumb{width:var(--thumb); height:var(--thumb); border-radius:3px; object-fit:cover; background:var(--bg-1); display:block;}
.list-main{min-width:0;}
.list-title{font-family:'Playfair Display', serif; font-size:14.5px; font-weight:600; margin:0 0 2px; line-height:1.3;}
.list-title a{border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.list-title a:hover{color:var(--accent); border-color:var(--accent);}
.list-summary{font-size:12px; color:var(--ink-faint); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list-mini-cov{display:flex; height:4px; border-radius:2px; overflow:hidden; margin-top:5px; width:120px; background:var(--bg-2);}
.list-mini-cov span{height:100%;}
.list-mini-cov .en{background:var(--cyan);}
.list-mini-cov .ko{background:var(--jade);}

.list-row{position:relative;}
.list-meta{display:flex; align-items:center; gap:8px; justify-self:end; text-align:right;}
.list-src{font-family:'IBM Plex Mono', monospace; font-size:10.5px; flex-shrink:0;}
.list-src.en{color:var(--cyan);} .list-src.ko{color:var(--jade);}
.commentary-flag{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--magenta); border:1px solid var(--magenta); padding:1px 5px; border-radius:3px; text-transform:uppercase;}
.cov-count{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-faint); flex-shrink:0;}
/* bookmark icon on news rows — same pink as the old "mark for class" marked
   state; outline when unbookmarked, filled once bookmarked */
.bookmark-btn{background:none; border:none; cursor:pointer; padding:0; line-height:0; color:var(--ink-faint); flex-shrink:0; transition:color .15s, transform .1s;}
.bookmark-btn svg{fill:none; stroke:currentColor; stroke-width:1.6;}
.bookmark-btn:hover{color:var(--magenta);}
.bookmark-btn.marked{color:var(--magenta);}
.bookmark-btn.marked svg{fill:currentColor; stroke:none;}
.bookmark-btn:active{transform:scale(.88);}

/* heart icon on research cards — "papers I'm personally interested in",
   separate from the authoritative This week's set. Same interaction
   pattern as .bookmark-btn, red instead of pink so the two read as
   distinct actions at a glance. */
.heart-btn{background:none; border:none; cursor:pointer; padding:0; line-height:0; color:var(--ink-faint); flex-shrink:0; transition:color .15s, transform .1s; margin-left:auto;}
.heart-btn svg{fill:none; stroke:currentColor; stroke-width:1.6;}
.heart-btn:hover{color:#ff6b6b;}
.heart-btn.marked{color:#ff6b6b;}
.heart-btn.marked svg{fill:currentColor; stroke:none;}
.heart-btn:active{transform:scale(.88);}

/* "mark for class" — Firestore-backed (kind=class), feeds This week's set
   + the permanent semester log. Cyan to read as "official/assigned",
   distinct from the heart's red and the news bookmark's pink. */
.class-btn{background:none; border:none; cursor:pointer; padding:0; line-height:0; color:var(--ink-faint); flex-shrink:0; transition:color .15s, transform .1s;}
.class-btn svg{fill:none; stroke:currentColor; stroke-width:1.6;}
.class-btn:hover{color:var(--cyan);}
.class-btn.marked{color:var(--cyan);}
.class-btn.marked svg{fill:currentColor; stroke:none;}
.class-btn:active{transform:scale(.88);}

/* Zotero one-click add — owner only (see functions/index.js). Hidden until
   auth.js confirms the owner is signed in; the public-facing Zotero story
   is the citation <meta> tags in default.html's <head>, not this button. */
.zotero-btn{
  display:none; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px; flex-shrink:0;
  background:none; border:1px solid var(--hair-strong); color:var(--ink-faint);
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:12px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
body.is-owner .zotero-btn{display:inline-flex;}
.zotero-btn:hover{border-color:#CC2936; color:#CC2936;}
.zotero-btn.done{border-color:var(--jade); color:var(--jade);}
.zotero-btn.error{border-color:var(--magenta); color:var(--magenta);}
.zotero-btn:disabled{opacity:.5; cursor:wait;}

/* ---------- entry permalink page ---------- */
.entry-page{padding:30px 0 60px;}
.entry-page-back a{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-faint); text-decoration:none;}
.entry-page-back a:hover{color:var(--accent);}
.entry-page-title{font-family:'Playfair Display', serif; font-size:32px; line-height:1.3; margin:14px 0 8px;}
.entry-page-hook{font-family:'IBM Plex Sans KR','IBM Plex Sans', sans-serif; font-size:16px; color:var(--ink-dim); margin:0 0 16px;}
.entry-page-meta{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-faint); margin:0 0 18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.entry-page-source-link{color:var(--accent); text-decoration:none; margin-left:8px;}
.entry-page-source-link:hover{text-decoration:underline;}
.entry-page-body{font-size:16px; line-height:1.75; color:var(--ink); max-width:68ch; margin-bottom:20px;}
.entry-page-empty{font-style:italic; color:var(--ink-faint); font-size:14px;}
.entry-page-commentary{font-family:'IBM Plex Mono', monospace; font-size:13px; margin:0 0 8px;}
.entry-page-commentary a{color:var(--magenta); text-decoration:none; border-bottom:1px dashed var(--magenta-dim);}
.entry-page-coverage{margin-top:16px; display:flex; gap:10px; align-items:center;}

/* ---------- course view / reading list page ---------- */
section.course{padding:24px; margin:30px 0; background:var(--bg-1); border:1px solid var(--hair-strong); border-radius:var(--radius);}
.course-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:4px;}
.course-head h3, .course-head h1{font-family:'Playfair Display', serif; font-size:20px; margin:0;}
.course-head span{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--accent);}
.course-sub{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-dim); margin:0 0 16px; line-height:1.6;}
/* "This week's set" gets the same gold treatment as .semester-block h2 below
   — same signal (this is the live, current-week thing), so it should read
   as visually related to that section. */
.course-head .week-badge{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.04em; color:var(--gold); font-weight:600;}
hr.week-hr{border:none; border-top:2px solid var(--gold-dim); margin:2px 0 16px;}
.course-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.course-list li{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--hair); font-size:13.5px;}
.course-list li a{text-decoration:none; border-bottom:1px solid transparent;}
.course-list li a:hover{color:var(--accent); border-color:var(--accent);}
.course-list li span{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); flex-shrink:0;}
.course-empty{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-faint); padding:6px 0;}
.course-print{margin-top:18px;}
.course-print button{font-family:'IBM Plex Mono', monospace; font-size:12px; background:none; border:1px solid var(--hair-strong); color:var(--ink-dim); padding:7px 14px; border-radius:20px; cursor:pointer;}
.course-print button:hover{border-color:var(--accent); color:var(--accent);}
.clear-all-btn{font-family:'IBM Plex Mono', monospace; font-size:12px; background:none; border:1px solid var(--magenta-dim); color:var(--magenta); padding:7px 14px; border-radius:20px; cursor:pointer; margin-left:10px;}
.clear-all-btn:hover{background:var(--magenta); color:#fff;}

/* Reading List page — richer list rows (source tag like the homepage) +
   an owner-only, hover-revealed remove icon. Two-level gating on purpose:
   body.is-owner (only Aaron ever sees the icon at all) AND :hover (not
   constantly visible even to him — see his own request). */
.course-list li{align-items:center;}
.rl-meta{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.rl-src{font-family:'IBM Plex Mono', monospace; font-size:10.5px;}
.rl-src.en{color:var(--cyan);} .rl-src.ko{color:var(--jade);}
.rl-delete{
  background:none; border:none; color:var(--magenta); cursor:pointer; padding:0;
  font-size:13px; line-height:1; opacity:0; pointer-events:none; transition:opacity .15s;
}
body.is-owner .course-list li:hover .rl-delete{opacity:1; pointer-events:auto;}

.rl-hr{border:none; border-top:1px solid var(--hair-strong); margin:40px 0 0;}
.semester-block{margin:30px 0;}
.semester-block h2{font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.08em; color:var(--gold); margin:0 0 4px; padding-bottom:8px; border-bottom:2px solid var(--gold-dim);}
.semester-week{margin:20px 0;}
.semester-week h3{font-family:'Playfair Display', serif; font-size:17px; margin:0 0 8px; color:var(--ink);}
.semester-week .course-list{gap:6px;}
.semester-week .course-list li{padding:7px 0; font-size:13px;}

/* "found this elsewhere" citation form — owner only, same reasoning as the
   Zotero button: no reason for a public visitor to ever see this. */
.add-citation-box{display:none;}
body.is-owner .add-citation-box{display:block;}
.citation-input{
  width:100%; background:var(--bg); border:1px solid var(--hair-strong); border-radius:var(--radius);
  color:var(--ink); font-family:'IBM Plex Mono', monospace; font-size:12.5px; padding:10px; resize:vertical;
  margin-bottom:10px;
}
.citation-status{font-family:'IBM Plex Mono', monospace; font-size:12px; margin:0 0 10px; min-height:1.4em;}
.citation-status.ok{color:var(--jade);}
.citation-status.error{color:var(--magenta);}

@media print{
  .subnav-stick, .filters, #back-to-top, .site-alert, .course-print, .add-citation-box{display:none !important;}
  .bg-grid, #rain{display:none !important;}
  body{background:#fff; color:#111;}
}

/* ---------- sources tab ---------- */
section.sources{padding:34px 0; border-top:1px solid var(--hair); margin-top:20px;}
.sources h4{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;}
.sources-sub{font-size:13px; color:var(--ink-dim); max-width:64ch; margin:0 0 22px; line-height:1.6;}
.source-topic{margin-bottom:26px;}
.source-topic h5{font-family:'Playfair Display', serif; font-size:16px; margin:0 0 10px; color:var(--ink);}
.src-cols{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.src-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.src-cols li{font-size:13px; color:var(--ink-dim); display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--hair); padding-bottom:6px;}
.src-cols li a{text-decoration:none; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.src-cols li a:hover{color:var(--accent); border-color:var(--accent);}
.src-cols li .method{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-faint); text-align:right; flex-shrink:0;}
.src-col-label{font-size:11.5px; margin:0 0 10px; font-family:'IBM Plex Mono', monospace; letter-spacing:.06em;}
.src-col-label.en{color:var(--cyan);}
.src-col-label.ko{color:var(--jade);}

.suggest-box{
  background:var(--bg-1); border:1px solid var(--hair-strong); border-radius:var(--radius); padding:18px 20px; margin-top:20px;
}
.suggest-box p{margin:0 0 12px; font-size:13px; color:var(--ink-dim); line-height:1.6;}
/* not scoped to .suggest-box — also used standalone, e.g. the Discussions
   link on /tools/, which isn't inside a .suggest-box card. */
.suggest-cta{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:600;
  background:var(--magenta); color:#fff; border-radius:20px; padding:8px 16px; text-decoration:none;
  border:none; cursor:pointer;
}
.suggest-cta:hover{background:#e34e8c;}

/* ---------- Tools page (/tools/) — citation converter, discussion
   templates, AI self-check. Reuses .suggest-box as the card shell (public,
   unlike .add-citation-box which is owner-only) and .chip for style tabs. ---------- */
.tool-btn{
  font-family:'IBM Plex Mono', monospace; font-size:12px; background:none;
  border:1px solid var(--hair-strong); color:var(--ink-dim); padding:8px 16px;
  border-radius:20px; cursor:pointer; transition:all .15s;
}
.tool-btn:hover{border-color:var(--accent); color:var(--ink);}
.tool-btn.primary{background:var(--gold); border-color:var(--gold); color:#20160a; font-weight:600;}
.tool-btn.primary:hover{background:#ddb662; border-color:#ddb662; color:#20160a;}
.tool-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px;}
.cite-style-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.cite-style-tabs[hidden]{display:none;}
.cite-output-box{
  background:var(--bg); border:1px solid var(--hair-strong); border-radius:var(--radius);
  padding:14px 16px; margin-top:12px;
}
.cite-output{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; line-height:1.7; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; margin:0 0 12px;
}
.template-textarea{
  width:100%; background:var(--bg); border:1px solid var(--hair-strong); border-radius:var(--radius);
  color:var(--ink); font-family:'IBM Plex Mono', monospace; font-size:12.5px; line-height:1.75;
  padding:14px; resize:vertical;
}
.ai-check-line{font-family:'IBM Plex Mono', monospace; font-size:12.5px; line-height:1.7; margin:0 0 8px;}
.ai-check-line code{background:var(--bg-2); padding:1px 5px; border-radius:3px; font-size:11.5px;}
.ai-check-warn{color:var(--orange);}
.ai-check-ok{color:var(--jade);}
.ai-check-meta{color:var(--ink-faint);}
.ai-check-result{margin-top:14px;}
.how-to-list{margin:0; padding-left:22px; display:grid; gap:8px;}
.how-to-list li{font-size:13.5px; line-height:1.7; color:var(--ink-dim);}
.how-to-list strong{color:var(--ink); font-weight:600;}
.glossary-list{margin:0; display:grid; gap:10px;}
.glossary-list > div{display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:baseline;}
.glossary-list dt{font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:600; color:var(--accent); margin:0;}
.glossary-list dd{margin:0; font-size:13px; color:var(--ink-dim); line-height:1.6;}
@media(max-width:640px){
  .glossary-list > div{grid-template-columns:1fr; gap:2px;}
}

footer{position:relative; z-index:1; padding:26px 0 50px; border-top:1px solid var(--hair); font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer a{color:var(--ink-dim); text-decoration:none;}
footer a:hover{color:var(--accent);}

/* ---------- reading frequency calendar ---------- */
.freq-section{padding:30px 0 40px; border-top:1px solid var(--hair); margin-top:10px;}
.freq-section h4{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;}
.freq-sub{font-size:12.5px; color:var(--ink-dim); margin:0 0 16px; max-width:60ch; line-height:1.6;}

/* full-width by construction: 53 flex:1 columns, each 7 stacked squares —
   the grid always spans its container exactly, at whatever size it renders. */
.freq-outer{display:flex; gap:6px; align-items:flex-start; width:100%;}
.freq-daylabels{display:flex; flex-direction:column; gap:2px; flex-shrink:0; margin-top:17px;}
.freq-daylabels span{
  height:11px; line-height:11px; font-family:'IBM Plex Mono', monospace; font-size:8px;
  color:var(--ink-faint); text-align:center;
}
.freq-scroll{flex:1; min-width:0;}
.freq-months{display:flex; gap:2px; height:13px; margin-bottom:4px;}
.freq-months span{
  flex:1; min-width:0; font-family:'IBM Plex Mono', monospace; font-size:9px;
  color:var(--ink-faint); white-space:nowrap; overflow:hidden;
}
.freq-grid{display:flex; gap:2px;}
.freq-col{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.freq-day{width:100%; aspect-ratio:1/1; border-radius:2px; background:var(--bg-1); border:1px solid var(--hair); display:block;}
.freq-day.future{background:transparent; border-color:transparent;}
.freq-day.level-1{background:var(--jade-dim); border-color:var(--jade-dim);}
.freq-day.level-2{background:var(--jade); border-color:var(--jade);}
.freq-day.level-3{background:#7fd6bd; border-color:#7fd6bd;}
.freq-day.level-4{background:var(--gold); border-color:var(--gold);}

@media (max-width:640px){
  /* 53 flex-fit columns get illegibly thin on a phone — switch to a fixed
     small size and let the strip scroll horizontally instead, auto-scrolled
     to the most recent weeks on load (see initFreqScroll in main.js). */
  .freq-scroll{overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
  .freq-months, .freq-grid{width:max-content;}
  .freq-months span{flex:none; width:9px; font-size:7px;}
  .freq-col{flex:none; width:9px;}
  .freq-day{width:9px; height:9px;}
  .freq-daylabels span{font-size:7px;}
}

@media (max-width:640px){
  .mast-title{font-size:31px;}
  .entry{grid-template-columns:1fr; gap:6px;}
  .entry-time{display:flex; gap:8px; padding-top:0;}
  .entry-time .date{margin-bottom:0;}
  .list-row{grid-template-columns:48px 1fr; gap:10px;}
  .list-row.no-thumb{grid-template-columns:1fr;}
  .list-meta{grid-column:1 / -1; justify-self:start; margin-top:2px;}
  .list-summary{white-space:normal;}
  .src-cols{grid-template-columns:1fr;}
  .subnav-stick{margin:0 -16px; padding:0 16px;}
  #back-to-top{right:14px; bottom:14px;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} #rain{display:none;} }