/* WW Article Review — refined-minimal, WeightWatchers design system */

@font-face {
  font-family: 'Geist';
  src: url('https://www.weightwatchers.com/stb/fonts/Geist[wght].woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Druk Condensed';
  src: url('https://www.weightwatchers.com/stb/fonts/DrukCondensed-Super.otf') format('opentype');
  font-weight: 800; font-display: swap;
}

:root{
  --blue-01:#e6efff; --blue-02:#b8d2ff; --blue-05:#2e50ff;
  --primary:#0222d0; --primary-dark:#031373;
  --warm-white:#fef9f0; --container:#f4f5f9; --surface:#ebeaf2;
  --ink:#070517; --ink-2:#403d5e; --muted:#6e7e99; --inverse:#fff;
  --border:#e3e2ec; --border-strong:#d9d8e3;
  --good:#0a7d52; --mid:#b06f15; --low:#c0341d;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Druk Condensed',Impact,'Arial Black',sans-serif;
  --shadow-sm:0 1px 2px rgba(7,5,23,.04),0 4px 16px rgba(7,5,23,.05);
  --shadow-md:0 8px 32px rgba(7,5,23,.10);
  --radius:1rem; --radius-sm:.625rem; --pill:100px;
  --t:.18s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--warm-white)}
a{color:var(--primary);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--primary-dark)}
.muted{color:var(--muted)}
.spacer{flex:1}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px;border:2px solid var(--warm-white)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

button{font:inherit;cursor:pointer;border:1px solid var(--border-strong);background:#fff;color:var(--ink);
  border-radius:var(--pill);padding:.5rem 1.1rem;font-weight:600;font-size:.9rem;transition:all var(--t)}
button:hover{border-color:var(--muted);background:var(--container)}
button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
button.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
button.pushed{background:#e3f5ec;color:var(--good);border-color:#bfe6d2;font-weight:700}
button.pushed:hover{background:#d4efe1;border-color:var(--good)}
button:disabled{opacity:.55;cursor:default;transform:none}
.link{border:none;background:none;color:var(--primary);padding:0 .2rem;font-weight:600;border-radius:0}
.link:hover{background:none;text-decoration:underline}

/* top bar */
.topbar{display:flex;align-items:center;gap:1.25rem;padding:.85rem 1.75rem;background:rgba(254,249,240,.85);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar strong{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.3rem;color:var(--primary)}
.who{font-weight:600;background:var(--blue-01);color:var(--primary);padding:.28rem .8rem;border-radius:var(--pill);font-size:.82rem}

/* login */
.login-page{display:grid;place-items:center;min-height:100vh;
  background:radial-gradient(120% 90% at 50% -10%,var(--blue-01) 0%,var(--warm-white) 45%)}
.login-card{background:#fff;padding:2.5rem;border-radius:var(--radius);box-shadow:var(--shadow-md);
  width:360px;display:flex;flex-direction:column;gap:.85rem;border:1px solid var(--border)}
.login-card h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:1.7rem;color:var(--primary);font-weight:800}
.login-card .muted{margin-top:-.4rem;font-size:.9rem}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted);font-weight:600}
.login-card input{padding:.7rem .85rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:inherit;color:var(--ink);transition:border var(--t)}
.login-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--blue-01)}
.login-card button{background:var(--primary);color:#fff;border-color:var(--primary);padding:.8rem;margin-top:.6rem;font-size:1rem}
.login-card button:hover{background:var(--primary-dark)}
.error{color:var(--low);font-size:.85rem;margin:0}

/* list */
.list-wrap{max-width:1080px;margin:2.5rem auto;padding:0 1.5rem}
table.list{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
table.list th,table.list td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--border);vertical-align:top}
table.list thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;background:var(--container)}
table.list tbody tr{transition:background var(--t)}
table.list tbody tr:hover{background:var(--warm-white)}
table.list tbody tr:last-child td{border-bottom:none}
table.list td a{font-weight:600;color:var(--ink)}
table.list td a:hover{color:var(--primary)}
.slug{font-size:.76rem;color:var(--muted);margin-top:.15rem}
.badge{display:inline-block;white-space:nowrap;font-size:.7rem;padding:.12rem .5rem;border-radius:var(--pill);font-weight:700;letter-spacing:.01em}
.badge.edited{background:#fff3e0;color:#9a6700}
.badge.comment{background:var(--blue-01);color:var(--primary)}
.badge.pushed{background:#e3f5ec;color:var(--good)}
.status{display:inline-block;white-space:nowrap;font-size:.72rem;padding:.2rem .6rem;border-radius:var(--pill);font-weight:700;text-transform:capitalize;letter-spacing:.01em}
.status-in_review{background:var(--surface);color:var(--ink-2)}
.status-approved{background:#e3f5ec;color:var(--good)}
.status-pushed{background:var(--blue-01);color:var(--primary)}
.score{font-weight:700;font-variant-numeric:tabular-nums}
.score.good,.g-num.good{color:var(--good)}
.score.mid,.g-num.mid{color:var(--mid)}
.score.low,.g-num.low{color:var(--low)}

/* editor layout */
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:1.75rem;
  max-width:1300px;margin:2rem auto;padding:0 1.5rem;align-items:start}
.doc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);
  padding:3.25rem clamp(1.5rem,5vw,4rem)}
.doc h1{font-size:2.15rem;line-height:1.18;margin:.1rem 0 1.1rem;letter-spacing:-.018em;font-weight:700}
.doc h2{font-size:1.45rem;margin:2.4rem 0 .6rem;letter-spacing:-.012em;font-weight:700}
.doc h3{font-size:1.14rem;margin:1.5rem 0 .4rem;font-weight:700}
.doc p{margin:.85rem 0;color:var(--ink-2);font-size:1.06rem;line-height:1.72}
.doc .dek{font-size:1.22rem;line-height:1.6;color:var(--ink);margin:0 0 1.6rem;font-weight:400}
.doc .static-h{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--primary);
  font-size:1.7rem;line-height:1;border-top:1px solid var(--border);padding-top:1.7rem;margin-top:2.8rem;font-weight:800}
.doc a.ilink{color:var(--primary);text-decoration:underline;text-decoration-color:var(--blue-02);
  text-underline-offset:2px;text-decoration-thickness:1.5px;cursor:pointer}
.doc a.ilink:hover{text-decoration-color:var(--primary);background:var(--blue-01);border-radius:3px}
.doc ul,.doc ol{margin:.7rem 0;padding-left:1.4rem;color:var(--ink-2)}
.doc li{margin:.35rem 0;line-height:1.7}
.sb-table{border-collapse:separate;border-spacing:0;width:100%;margin:1.25rem 0;font-size:.95rem;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden}
.sb-table th,.sb-table td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:.6rem .8rem;text-align:left}
.sb-table tr:last-child th,.sb-table tr:last-child td{border-bottom:none}
.sb-table th:last-child,.sb-table td:last-child{border-right:none}
.sb-table th{background:var(--blue-01);font-weight:700;color:var(--ink)}
.source{font-size:.9rem;color:var(--ink-2);margin:.5rem 0;padding-left:.8rem;border-left:2px solid var(--blue-02)}
.src-url{font-size:.78rem;color:var(--muted);display:inline-block;margin-left:.3rem;word-break:break-all}
.related{list-style:none;padding:0;margin:.7rem 0;display:grid;gap:.6rem}
.related li{padding:.7rem .9rem;background:var(--container);border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--t)}
.related li:hover{border-color:var(--blue-02);background:var(--blue-01)}
.related li a{font-weight:600}
.rel-url{display:block;font-size:.72rem;color:var(--muted);margin-top:.15rem;word-break:break-all}

/* editable affordance — subtle, content-first */
.b[contenteditable]{outline:none;border-radius:6px;transition:background var(--t),box-shadow var(--t);
  margin-left:-.4rem;margin-right:-.4rem;padding:.05rem .4rem}
.b[contenteditable]:hover{background:var(--warm-white);box-shadow:inset 0 0 0 1px var(--border)}
.b[contenteditable]:focus{background:var(--blue-01);box-shadow:inset 0 0 0 1px var(--blue-02)}
.b.just-saved{background:#e3f5ec!important;box-shadow:inset 0 0 0 1px #b6e3cb!important}

/* sidebar */
.side{position:sticky;top:78px;display:flex;flex-direction:column;gap:1.1rem;max-height:calc(100vh-94px);overflow:auto;padding-bottom:1rem}
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:1.25rem}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.panel-head h3{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.grade-panel{background:linear-gradient(180deg,#fff 0%,var(--warm-white) 100%)}
/* grade accordions — scores/flags collapse so comments + history stay visible */
.grade-acc{display:flex;flex-direction:column;gap:.5rem}
.g-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;transition:box-shadow var(--t)}
.g-item[open]{box-shadow:var(--shadow-sm)}
.g-item summary{list-style:none;display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem;cursor:pointer;user-select:none}
.g-item summary::-webkit-details-marker{display:none}
.g-item summary:hover{background:var(--warm-white);border-radius:var(--radius-sm)}
.g-num{font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em;min-width:2.1rem;text-align:center}
.g-name{flex:1;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.g-chev{color:var(--muted);font-size:1.2rem;line-height:1;transition:transform var(--t)}
.g-item[open] .g-chev{transform:rotate(90deg)}
.flags-item .g-num.flag-n{font-size:.9rem;font-weight:800;color:#fff;background:var(--mid);min-width:auto;
  padding:.18rem .55rem;border-radius:var(--pill)}
.g-item .notes,.g-item>div{padding:0 .85rem .8rem}
.notes{font-size:.85rem;margin:.2rem 0 0;color:var(--ink-2);line-height:1.6}
.no-flags{font-size:.82rem;padding:.3rem .2rem}
.flag{border-left:3px solid var(--border-strong);padding:.45rem .7rem;margin:.45rem 0;background:var(--container);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.85rem}
.flag .sev{font-size:.66rem;text-transform:uppercase;font-weight:800;letter-spacing:.05em}
.flag.sev-block{border-color:var(--low)} .flag.sev-block .sev{color:var(--low)}
.flag.sev-review{border-color:var(--mid)} .flag.sev-review .sev{color:var(--mid)}
.flag.sev-info{border-color:var(--blue-05)} .flag.sev-info .sev{color:var(--blue-05)}
.flag-quote{font-style:italic;color:var(--ink-2);margin:.2rem 0}
.comment{border-bottom:1px solid var(--border);padding:.6rem 0;font-size:.86rem}
.comment.resolved{opacity:.5}
.c-meta{font-size:.78rem;margin-bottom:.2rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.c-body{cursor:default}
.cmark-demo{filter:grayscale(.15)}

/* anchored (in-document) comments */
.bwrap{position:relative}
.cbtn{position:absolute;top:.15rem;right:-2.2rem;width:1.65rem;height:1.65rem;padding:0;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--border);
  background:#fff;border-radius:50%;font-size:.82rem;line-height:1;cursor:pointer;opacity:0;
  transition:opacity var(--t),transform var(--t),border-color var(--t)}
.bwrap:hover .cbtn{opacity:.5}
.cbtn:hover{opacity:1!important;transform:scale(1.08);border-color:var(--blue-02)}
.cbtn[data-count]:not([data-count=""]){opacity:1;background:var(--blue-01);border-color:var(--blue-02)}
.cbtn[data-count]:not([data-count=""])::after{content:attr(data-count);position:absolute;top:-.35rem;right:-.35rem;
  background:var(--primary);color:#fff;font-size:.6rem;font-weight:700;min-width:.95rem;height:.95rem;
  border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 .15rem}
.b.has-comment{background:rgba(132,171,255,.16)!important;border-radius:6px}
.flash{animation:flashbg 1.5s ease}
@keyframes flashbg{0%,100%{background:transparent}25%{background:var(--blue-01)}}
.cthread{margin:.5rem 0 1rem;padding:.7rem .85rem;background:var(--container);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:.88rem}
.ct-item{padding:.4rem 0;border-bottom:1px solid var(--border)}
.ct-item:last-of-type{border-bottom:none}
.ct-item.resolved{opacity:.5}
.ct-meta{font-size:.78rem;margin-bottom:.15rem;display:flex;gap:.5rem;align-items:center}
.ct-input{width:100%;min-height:48px;margin-top:.5rem;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.5rem;font:inherit;resize:vertical;background:#fff}
.ct-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--blue-01)}
.ct-actions{display:flex;gap:.5rem;margin-top:.5rem}
.ct-send{padding:.4rem 1.1rem}
.rev{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;padding:.3rem 0;border-bottom:1px solid var(--border)}

/* toast */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(2rem);
  background:var(--ink);color:#fff;padding:.6rem 1.15rem;border-radius:var(--pill);opacity:0;pointer-events:none;
  transition:all .28s cubic-bezier(.2,.8,.2,1);font-size:.85rem;font-weight:500;z-index:30;box-shadow:var(--shadow-md)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--primary)}
.toast.err{background:var(--low)}

@media(max-width:1000px){.editor-layout{grid-template-columns:1fr}.side{position:static;max-height:none}}