/* ==========================================================================
   ProTexts — revisão na nuvem. Shared styles for /txts/adm, /txts/rev and the
   editor placeholder at /txts/e.

   The palette is the one the generated revision editor already uses
   (pipeline/revision/export_revision_html.py) so a revisor moving from the
   dashboard into the editor stays in the same room.

   Theme rule, learned the hard way in that file: EVERY colour gets its
   definition on bare :root. The dark blocks redefine tokens ONLY — never
   introduce a colour whose only definition lives inside a media query, or the
   light side (and print) comes out with an undefined variable.

   Dark lives inside @media screen for the same reason it does there: printing
   must always get the light palette, since browsers drop backgrounds but keep
   colours.
   ========================================================================== */

:root{
  color-scheme:light;

  --bg:#f6f3ec;          /* the page */
  --paper:#fffdf8;       /* a sheet laid on it */
  --card:#fff;           /* raised surface: buttons, inputs, menus */
  --ink:#1a1a1a;
  --ink-2:#333;
  --dim:#6b7280;         /* secondary text */
  --mute:#8a8a8a;        /* tertiary text, timestamps */
  --line:#e3ddcd;
  --hover:#f0ece2;
  --tint:#00000006;      /* the faint wash of a chip or a hovered row */
  --bar:#fffdf8ee;       /* the sticky header's wash over the page */
  --shadow:#00000026;
  --shadow-s:#0000000d;

  --accent:#1f4e79;
  --accent-soft:#eef4fa;
  --on-accent:#fff;
  --gold:#8a6d00;
  --gold-l:#d6c28a;
  --rev:#8a5a00;         /* "pendente" amber — the editor's own */
  --rev-l:#e5c07b;
  --ok:#1b7a2f;
  --ok-bg:#1b7a2f12;
  --bad:#b00020;
  --bad-bg:#b0002010;
  --edited:#2e7d32;
  --hl:#fde68a;

  --toast-bg:#1a1a1acc;
  --toast-ink:#fff;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"EB Garamond","Liberation Serif",Times,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius:10px;
  --radius-s:7px;
}

@media screen{
  /* System preference — but never when the reader has explicitly asked for light. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --bg:#14161a; --paper:#1b1d22; --card:#23262c;
      --ink:#e8e4da; --ink-2:#cfcabd; --dim:#98a0ad; --mute:#8f897c;
      --line:#3a3831; --hover:#2e323a; --tint:#ffffff0f; --bar:#1b1d22e6;
      --shadow:#00000080; --shadow-s:#00000059;
      --accent:#8fc2f5; --accent-soft:#2b3540; --on-accent:#10131a;
      --gold:#d9bd5e; --gold-l:#7a6633; --rev:#e0a94a; --rev-l:#6a5326;
      --ok:#5fcf7a; --ok-bg:#5fcf7a1f; --bad:#ff8a94; --bad-bg:#ff8a941f;
      --edited:#56c46a; --hl:#6b5410;
      --toast-bg:#3a3f48ee; --toast-ink:#f2efe6;
    }
  }
  /* An explicit choice wins in both directions. */
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#14161a; --paper:#1b1d22; --card:#23262c;
    --ink:#e8e4da; --ink-2:#cfcabd; --dim:#98a0ad; --mute:#8f897c;
    --line:#3a3831; --hover:#2e323a; --tint:#ffffff0f; --bar:#1b1d22e6;
    --shadow:#00000080; --shadow-s:#00000059;
    --accent:#8fc2f5; --accent-soft:#2b3540; --on-accent:#10131a;
    --gold:#d9bd5e; --gold-l:#7a6633; --rev:#e0a94a; --rev-l:#6a5326;
    --ok:#5fcf7a; --ok-bg:#5fcf7a1f; --bad:#ff8a94; --bad-bg:#ff8a941f;
    --edited:#56c46a; --hl:#6b5410;
    --toast-bg:#3a3f48ee; --toast-ink:#f2efe6;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  min-height:100dvh;
}
h1,h2,h3{margin:0; font-weight:700; line-height:1.25}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
[hidden]{display:none !important}

/* ── header ──────────────────────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  justify-content:space-between;
  padding:10px 16px; background:var(--bar); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.bar .brand{display:flex; align-items:baseline; gap:9px; min-width:0}
.bar h1{font-size:16px; white-space:nowrap}
.bar .brand .sub{color:var(--dim); font-size:12px; white-space:nowrap}
.bar .grp{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.who{color:var(--dim); font-size:12px; overflow-wrap:anywhere; max-width:16em}

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap{max-width:1080px; margin:0 auto; padding:18px 16px 64px}
.wrap.narrow{max-width:620px}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row.between{justify-content:space-between}
.grow{flex:1 1 auto; min-width:0}
.spacer{flex:1 1 auto}

section.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 2px var(--shadow-s);
  padding:16px; overflow:hidden;
}
section.card > header{
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline;
  justify-content:space-between; margin:0 0 12px;
}
section.card > header h2{font-size:15px; letter-spacing:.01em}
section.card > header .hint{color:var(--dim); font-size:12px}

/* ── controls ────────────────────────────────────────────────────────────── */
button,.btn{
  font:inherit; font-size:13px; padding:7px 12px;
  border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--card); color:var(--ink);
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  min-height:36px;
}
button:hover:not(:disabled),.btn:hover{border-color:var(--accent); color:var(--accent)}
button.primary,.btn.primary{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;
}
button.primary:hover:not(:disabled),.btn.primary:hover{filter:brightness(1.12); color:var(--on-accent)}
button.danger{border-color:var(--bad); color:var(--bad)}
button.danger:hover:not(:disabled){background:var(--bad-bg); border-color:var(--bad); color:var(--bad)}
button.ghost{background:transparent; border-color:transparent; color:var(--dim)}
button.ghost:hover:not(:disabled){background:var(--hover); color:var(--ink)}
button.small,.btn.small{font-size:12px; padding:4px 9px; min-height:30px}
button:disabled{opacity:.45; cursor:default}

input,select,textarea{
  font:inherit; font-size:14px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--card); color:var(--ink); min-height:38px; max-width:100%;
}
input::placeholder{color:var(--mute)}
label.field{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--dim)}
label.field > span{font-weight:600; color:var(--ink-2)}
form.inline{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
form.inline .grow{flex:1 1 200px}

/* ── chips, badges, states ───────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--tint); color:var(--dim);
  white-space:nowrap;
}
.pill.admin{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.pill.ok{border-color:var(--ok); color:var(--ok); background:var(--ok-bg)}
.pill.warn{border-color:var(--rev-l); color:var(--rev); background:var(--tint)}
.pill.bad{border-color:var(--bad); color:var(--bad); background:var(--bad-bg)}
.pill.revoked{text-decoration:line-through}
.code{font-family:var(--mono); font-size:12px; color:var(--dim); overflow-wrap:anywhere}

.note{
  border:1px solid var(--line); border-left:3px solid var(--rev-l);
  background:var(--tint); border-radius:var(--radius-s);
  padding:10px 12px; font-size:13px; color:var(--ink-2);
}
.note.bad{border-left-color:var(--bad); background:var(--bad-bg)}
.note.ok{border-left-color:var(--ok); background:var(--ok-bg)}
.empty{color:var(--dim); font-size:14px; padding:14px 2px; text-align:center}
.err{color:var(--bad); font-size:13px}

/* ── progress ────────────────────────────────────────────────────────────── */
.meter{
  /* width is set inline on the <i> from the tally the API returns */
  position:relative; height:7px; border-radius:999px;
  background:var(--tint); border:1px solid var(--line); overflow:hidden;
}
.meter > i{
  display:block; height:100%; width:0;
  background:var(--edited); transition:width .3s ease;
}
.meter.full > i{background:var(--ok)}
.tally{font-size:12px; color:var(--dim)}
.tally b{color:var(--edited)}
.tally b.pend{color:var(--rev)}

/* ── tables that survive a phone ─────────────────────────────────────────── */
.tablewrap{overflow-x:auto; margin:0 -4px}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:start; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); font-weight:700}
tbody tr:hover{background:var(--tint)}
td.num{text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap}
td.actions{white-space:nowrap; text-align:end}

/* ── the revisor's document cards ────────────────────────────────────────── */
/* The list view. Texts are ordered pages of a book, so they read down a column;
   the old card grid is kept below for anything that still renders .doc. */
/* ── the Google button ────────────────────────────────────────────────────────
   Deliberately NOT .primary. Google's brand guidance wants its four-colour mark on a
   neutral surface, and putting it on the accent fill both breaks that and makes the
   logo fight the button. So: a white face with a real border, the mark at the left,
   the label optically centred. The mark is inline SVG because the page is served under
   a CSP with no external image host — and because an icon that fails to load is worse
   than no icon. It keeps its own colours in dark mode (a Google mark is not ours to
   re-tint); only the surface under it changes. */
.gbtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:11px 14px; font:inherit; font-size:15px; font-weight:500;
  color:#1f1f1f; background:#fff; border:1px solid #dadce0; border-radius:var(--radius);
  cursor:pointer}
.gbtn:hover{background:#f8f9fa}
.gbtn:disabled{opacity:.6; cursor:default}
.gmark{flex:none; display:block}

@media screen{
  :root[data-theme="dark"] .gbtn{background:#fff; color:#1f1f1f; border-color:#5f6368}
  :root[data-theme="dark"] .gbtn:hover{background:#f1f3f4}
}

.docs{display:block}
.project{margin:0 0 26px}
.project-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; padding:0 0 7px; font-size:15px; font-weight:600;
  letter-spacing:.02em; border-bottom:1px solid var(--line)}
.project-n{font-weight:400; font-size:12.5px; color:var(--dim)}
.rows{display:flex; flex-direction:column; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:8px; overflow:hidden}
.row{display:grid; grid-template-columns:1fr auto 18px; align-items:center; gap:16px;
  padding:11px 14px; background:var(--card); color:inherit; text-decoration:none}
.row:hover{background:var(--hover)}
.row-main{min-width:0}
.row-title{display:block; font-size:14.5px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-sub{display:flex; align-items:center; gap:7px; margin-top:3px}
.row-progress{display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  min-width:172px}
.row-progress .meter{width:150px}
.row-go{color:var(--dim); text-align:right}
.row:hover .row-go{color:var(--accent)}
.row.is-stale{box-shadow:inset 3px 0 0 var(--rev)}

@media (max-width:560px){
  .row{grid-template-columns:1fr 18px; gap:8px}
  .row-progress{grid-column:1/2; align-items:flex-start; min-width:0}
  .row-progress .meter{width:100%}
}

.docs-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.doc{
  display:flex; flex-direction:column; gap:9px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 2px var(--shadow-s); padding:14px;
}
.doc h3{font-family:var(--serif); font-size:19px}
.doc .meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--dim)}
.doc .foot{display:flex; gap:8px; align-items:center; justify-content:space-between; margin-top:auto}
.doc.is-stale{border-color:var(--rev-l)}

/* ── sign-in gate ────────────────────────────────────────────────────────── */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px 16px}
.gate .box{
  width:100%; max-width:400px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 6px 24px var(--shadow-s); padding:22px;
  display:flex; flex-direction:column; gap:14px;
}
.gate h1{font-family:var(--serif); font-size:26px}
.gate p{margin:0; color:var(--dim); font-size:13px}
.gate form{display:flex; flex-direction:column; gap:10px}
.gate button{justify-content:center; width:100%; min-height:42px; font-size:14px}
.gate .sep{
  display:flex; align-items:center; gap:10px; color:var(--mute);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
}
.gate .sep::before,.gate .sep::after{content:""; flex:1; height:1px; background:var(--line)}
.gate input.otp{
  font-family:var(--mono); font-size:26px; letter-spacing:.4em; text-align:center;
  padding:12px; width:100%;
}

/* ── offline banner + toast ──────────────────────────────────────────────── */
.offline{
  display:none; align-items:center; gap:8px; justify-content:center;
  background:var(--rev); color:var(--on-accent);
  font-size:12px; font-weight:600; padding:6px 12px; text-align:center;
}
body.is-offline .offline{display:flex}
body.is-offline .needs-net{opacity:.5; pointer-events:none}

.toast{
  position:fixed; inset-inline:0; bottom:18px; margin:0 auto; width:max-content;
  max-width:calc(100vw - 32px);
  background:var(--toast-bg); color:var(--toast-ink);
  padding:9px 16px; border-radius:999px; font-size:13px;
  box-shadow:0 4px 16px var(--shadow); z-index:60;
  opacity:0; transform:translateY(8px); transition:opacity .18s,transform .18s;
  pointer-events:none;
}
.toast.on{opacity:1; transform:none}

.skel{
  height:12px; border-radius:6px; background:var(--tint);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ── tabs (admin) ────────────────────────────────────────────────────────── */
.tabs{
  display:flex; gap:4px; overflow-x:auto; padding:0 16px;
  border-bottom:1px solid var(--line); background:var(--bar);
  position:sticky; top:56px; z-index:15;
}
.tabs button{
  border:0; border-bottom:2px solid transparent; border-radius:0;
  background:transparent; color:var(--dim); font-size:13px; font-weight:600;
  padding:10px 12px; white-space:nowrap; min-height:40px;
}
.tabs button:hover{color:var(--ink); background:var(--hover)}
.tabs button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}

@media (max-width:560px){
  .bar{padding:9px 12px}
  .wrap{padding:14px 12px 56px}
  section.card{padding:13px; border-radius:var(--radius)}
  .tabs{top:52px}
  .docs-grid{grid-template-columns:1fr}
  th,td{padding:7px 8px}
}