/* Visual language follows the Google Docs editing view: pale blue-grey canvas, white page,
   comment cards with soft elevation, Material-style blue accent, pill buttons, initial avatars. */
:root {
  --canvas:#f9fbfd; --surface:#fff; --ink:#1f1f1f; --muted:#5f6368; --line:#e1e3e6; --page-edge:#c7c7c7;
  --accent:#0b57d0; --accent-weak:#d3e3fd; --danger:#b3261e;
  --hl:rgba(255,212,0,.30); --hl-active:rgba(255,184,0,.62); --pending:rgba(11,87,208,.25);
  --elev1:0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --elev2:0 1px 3px rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
  --bar:56px; --side:360px;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--canvas); color:var(--ink); font:14px/20px "Google Sans Text","Google Sans",Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button { font:inherit; cursor:pointer; color:inherit; }
.muted { color:var(--muted); }
.small { font-size:12px; line-height:16px; }
.error { color:var(--danger); min-height:1.2em; margin:.2em 0; }
a { color:var(--accent); }

/* buttons */
button.link { background:none; border:0; padding:4px 8px; border-radius:16px; color:var(--accent); font-weight:500; }
button.link:hover { background:var(--accent-weak); }
button.link.danger { color:var(--danger); }
button.link.danger:hover { background:#f9dedc; }
button.primary { background:var(--accent); color:#fff; border:0; border-radius:18px; padding:7px 18px; font-weight:500; }
button.primary:hover { box-shadow:var(--elev1); background:#0a4cb4; }
button.ghost { background:var(--surface); color:var(--accent); border:1px solid #c4c7c5; border-radius:18px; padding:6px 14px; font-weight:500; }
button.ghost:hover { background:#f0f4fa; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* login */
#login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
#login-form { background:var(--surface); width:100%; max-width:400px; padding:36px 32px 28px; border:1px solid var(--line); border-radius:28px; display:flex; flex-direction:column; gap:12px; }
#login-form h1 { margin:0 0 4px; font-size:24px; line-height:32px; font-weight:400; }
#login-form p { margin:0; }
#login-form label { display:flex; flex-direction:column; gap:4px; font-weight:500; font-size:13px; }
#login-form input { font:inherit; font-size:16px; padding:12px 14px; border:1px solid #747775; border-radius:4px; background:var(--surface); }
#login-form input:focus { outline:2px solid var(--accent); outline-offset:-2px; border-color:transparent; }
#login-form button.primary { align-self:flex-end; margin-top:4px; }

/* top bar */
#topbar { position:sticky; top:0; z-index:20; height:var(--bar); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; background:var(--canvas); border-bottom:1px solid var(--line); }
.brand { font-size:18px; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand .muted { font-size:12px; border:1px solid var(--line); border-radius:10px; padding:1px 8px; margin-left:6px; vertical-align:2px; }
.who { white-space:nowrap; display:flex; align-items:center; gap:10px; }
.avatar { width:28px; height:28px; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:500; font-size:13px; flex:none; }

/* layout: page on the canvas, comments in the right margin */
#layout { display:grid; grid-template-columns:minmax(0,1fr) var(--side); align-items:start; }
#doc-pane { position:relative; padding:20px 16px 80px; min-width:0; }
.banner { max-width:816px; margin:0 auto 12px; background:#fff8e1; border:1px solid #f6e3a1; border-radius:8px; padding:8px 12px; }
#doc { background:#fff; margin:0 auto; max-width:818px; border:1px solid var(--page-edge); box-shadow:none; overflow-x:hidden; contain:layout paint; }
/* Google sizes assume content-box: 468pt text column + 72pt padding = a letter-width page. */
#doc *, #doc #doc-body { box-sizing:content-box; }
#doc #doc-body { min-height:60vh; margin:0; }
#doc .table-wrap { overflow-x:auto; max-width:100%; }
#doc img { max-width:100% !important; height:auto !important; }
#doc span:has(> img) { max-width:100% !important; width:auto !important; height:auto !important; }

/* PDF pages: canvas + transparent text layer + link boxes */
#doc #doc-body.pdf { padding:0 !important; min-height:200px; }
.pdfpage { position:relative; margin:0 auto; background:#fff; }
.pdfpage + .pdfpage { border-top:1px solid var(--page-edge); }
.pdfpage canvas { display:block; position:absolute; inset:0; }
.textLayer { position:absolute; inset:0; overflow:clip; text-align:initial; line-height:1; letter-spacing:normal; word-spacing:normal; text-size-adjust:none; -webkit-text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; z-index:0;
  --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0 0; user-select:text; -webkit-user-select:text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index:1; --font-height:0; font-size:calc(var(--text-scale-factor) * var(--font-height)); --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display:contents; }
.textLayer ::selection { background:rgba(11,87,208,.3); color:transparent; }
.pdflinks a { position:absolute; display:block; z-index:2; }
.pdflinks a:hover { background:rgba(11,87,208,.08); }
.pdf mark.hl { color:transparent; mix-blend-mode:multiply; }
.pdf mark.hl.pending { background:rgba(11,87,208,.35); }
#doc sup a[id^="ftnt_ref"] { color:inherit !important; text-decoration:none !important; }
#doc sup a[id^="ftnt_ref"]:hover { text-decoration:underline !important; }

/* highlights */
mark.hl { background:var(--hl); color:inherit; padding:0; cursor:pointer; }
mark.hl.active { background:var(--hl-active); }
mark.hl.pending { background:var(--pending); }
mark.hl.flash { animation:flash 1.4s ease-out; }
@keyframes flash { 0%,40% { background:rgba(255,160,0,.85); } }

/* add-comment button, shown by the selection */
#selbtn-wrap { position:absolute; z-index:10; display:none; }
#selbtn-wrap.show { display:block; }
#selbtn { display:flex; align-items:center; gap:6px; background:var(--surface); color:var(--accent); border:1px solid #c4c7c5; border-radius:20px; padding:6px 14px 6px 10px; font-weight:500; box-shadow:var(--elev1); white-space:nowrap; }
#selbtn svg { width:18px; height:18px; fill:currentColor; }
#selbtn:hover { background:#f0f4fa; }

/* sidebar */
#sidebar { position:sticky; top:var(--bar); height:calc(100vh - var(--bar)); display:flex; flex-direction:column; min-height:0; }
#sheet-handle { display:none; }
#side-scroll { overflow-y:auto; padding:8px 12px 24px 4px; flex:1; }
.note { font-size:12px; line-height:16px; color:var(--muted); padding:4px 8px 10px; }
#tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; padding:0 4px; }
#tools label { font-size:13px; display:flex; align-items:center; gap:4px; }
#tools select { font:inherit; font-size:13px; max-width:150px; padding:5px 6px; border:1px solid #c4c7c5; border-radius:6px; background:var(--surface); }
.section-title { font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:16px 8px 8px; }

.card, #composer { background:var(--surface); border-radius:8px; padding:12px 14px; margin:0 0 10px; box-shadow:var(--elev1); border:1px solid transparent; }
.card { cursor:pointer; }
.card:hover { box-shadow:var(--elev2); }
.card.active { box-shadow:var(--elev2); border-color:var(--accent); }
.card.addressed { opacity:.6; }
#composer { border-color:var(--accent); box-shadow:var(--elev2); }
.card .head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.card .head .who-line { flex:1; min-width:0; }
.card .head .nm { font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .head .when { font-size:12px; color:var(--muted); display:block; line-height:16px; }
.card .quote, #composer .quote { font-size:13px; color:var(--muted); border-left:2px solid #f0c000; padding-left:8px; margin:0 0 8px; overflow-wrap:anywhere; }
.card .quote.lost { border-color:var(--danger); }
.card .body { white-space:pre-wrap; overflow-wrap:anywhere; }
.card .actions { margin:6px -8px -4px; display:flex; gap:4px; font-size:13px; align-items:center; }
.card .actions label { padding:4px 8px; display:flex; align-items:center; gap:6px; }
.card .warn { font-size:12px; color:var(--danger); margin-bottom:6px; }
textarea { width:100%; min-height:72px; font:inherit; padding:8px 10px; border:1px solid #747775; border-radius:4px; resize:vertical; background:var(--surface); }
textarea:focus { outline:2px solid var(--accent); outline-offset:-2px; border-color:transparent; }
.row { display:flex; gap:8px; margin-top:8px; align-items:center; justify-content:flex-end; }
.row .hint { margin-right:auto; }
.empty { color:var(--muted); padding:8px; }

/* overall rating (green / yellow / red) */
#rating .panel { background:var(--surface); border-radius:8px; box-shadow:var(--elev1); padding:12px 14px; margin:0 0 12px; }
#rating .q { font-weight:500; margin:0 0 8px; }
#rating .circles { display:flex; gap:14px; }
.rate { --c:#1e8e3e; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:2px solid var(--c); background:var(--surface); color:var(--c); padding:0; transition:transform .12s, background .12s, box-shadow .12s; }
.rate svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.rate.mid { --c:#e49b00; } .rate.no { --c:#d93025; }
.rate:hover { background:color-mix(in srgb, var(--c) 12%, #fff); }
.rate:active { transform:scale(.88); }
.rate[aria-pressed="true"] { background:var(--c); color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent); }
.rate.mid[aria-pressed="true"] { background:#f9ab00; color:#202124; }
.rate.mini { width:20px; height:20px; border-width:1.5px; pointer-events:none; background:var(--c); color:#fff; flex:none; }
.rate.mini.mid { background:#f9ab00; color:#202124; }
.rate.mini svg { width:12px; height:12px; stroke-width:3.2; }
#rating .cap { font-size:12px; line-height:16px; color:var(--muted); min-height:16px; margin-top:8px; }
#rating .tally { display:flex; gap:16px; align-items:center; }
#rating .tally span { display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.card .head .rate.mini { margin-left:auto; }

#rating details { margin-top:8px; }
#rating summary { cursor:pointer; font-size:13px; font-weight:500; padding:2px 0; }
#rating .rlist { max-height:240px; overflow-y:auto; margin:4px -6px 0; }
#rating .rrow { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; border-radius:6px; padding:4px 6px; text-align:left; }
#rating .rrow:hover { background:#f0f4fa; }
#rating .rrow.on { background:var(--accent-weak); }
#rating .rrow .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rating .rrow .n { font-size:12px; color:var(--muted); white-space:nowrap; }
.rate.mini.none { background:#fff; border:1.5px dashed #9aa0a6; }

/* footnote popover + toast */
#footnote-pop { position:absolute; z-index:15; max-width:340px; background:var(--surface); border-radius:8px; box-shadow:var(--elev2); padding:12px 14px; }
#footnote-pop .go { margin:6px -8px -4px; }
#toast { position:fixed; left:50%; bottom:70px; transform:translateX(-50%); background:#313235; color:#fff; padding:10px 16px; border-radius:4px; z-index:50; max-width:90vw; box-shadow:var(--elev2); }

/* narrow screens: single column, comments become a bottom sheet */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1000px) {
  #layout { display:block; }
  #doc-pane { padding:0 0 90px; }
  #doc { border-left:0; border-right:0; }
  #doc #doc-body { padding:16px !important; max-width:none !important; }
  .banner { margin:8px; }
  .who .avatar + span { display:none; }
  #sidebar { position:fixed; left:0; right:0; bottom:0; top:auto; height:70vh; z-index:30; background:var(--canvas); border-radius:16px 16px 0 0; box-shadow:0 -2px 10px rgba(60,64,67,.35); transition:transform .2s; padding-bottom:env(safe-area-inset-bottom); }
  #side-scroll { padding:8px 12px 24px; }
  #sidebar.collapsed { transform:translateY(calc(100% - 48px - env(safe-area-inset-bottom))); }
  #sheet-handle { display:flex; justify-content:space-between; align-items:center; height:48px; flex:none; width:100%; background:none; border:0; border-bottom:1px solid var(--line); padding:0 16px; font-weight:500; font-size:14px; }
  #sidebar:not(.collapsed) .chev { transform:rotate(180deg); }
  #selbtn-wrap { position:fixed !important; left:50% !important; top:auto !important; bottom:62px; transform:translateX(-50%); z-index:40; }
  #selbtn { padding:10px 20px 10px 14px; font-size:16px; }
  #toast { bottom:110px; }
}

.doc-error { padding:48px 32px; text-align:center; }
.doc-error p { margin:0 0 12px; }