/* ===================== TrueTone application shell ===================== */
/* The [hidden] attribute must beat any display rule below it. */
[hidden]{display:none!important}
body.app{background:var(--paper);height:100vh;overflow:hidden}
.shell{display:grid;grid-template-columns:264px 1fr;height:100vh}

/* ------------------------------------------------------------- sidebar */
.side{background:var(--paper-2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.side-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.side-nav{padding:12px;display:grid;gap:2px}
.side-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:none;
  border-radius:8px;font:inherit;font-size:.92rem;font-weight:500;color:var(--ink-2);cursor:pointer;text-align:left}
.side-nav button:hover{background:#00000006}
/* --brand-ink (#0b7a57) measures 5.34:1; --brand-2 measured 2.43:1 here and
   --brand 1.93:1 on the tabs. Every one of these states is signalled by colour
   alone, so under 4.5:1 they are not a style choice — they are unreadable to
   anyone with moderate low vision, and to everyone on a laptop in daylight.
   The bright green stays where it belongs: filled buttons, whose dark label
   measures 6.91:1. */
.side-nav button.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.side-nav button svg{flex:none;opacity:.75}
.side-list{flex:1;overflow-y:auto;padding:0 12px 12px;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.side-list h5{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin:0 0 8px;padding:0 4px}
.doc-item{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:.87rem;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px;align-items:center}
.doc-item:hover{background:#00000006}
.doc-item.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.doc-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-item b{font-size:.74rem;font-weight:700;flex:none;opacity:.7}
.side-foot{border-top:1px solid var(--line);padding:12px 16px;font-size:.82rem}
.side-account{display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-account #whoami{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}
.meter{margin-bottom:9px}
.meter-top{display:flex;justify-content:space-between;color:var(--ink-3);font-size:.76rem;margin-bottom:3px}
.meter-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.meter-bar i{display:block;height:100%;background:var(--brand);border-radius:3px}
.meter-bar i.hot{background:var(--warn)}
.meter-bar i.full{background:var(--bad)}

/* ---------------------------------------------------------------- main */
.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:56px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--paper-2);flex:none}
.topbar input.title{border:none;background:none;font:inherit;font-size:1rem;font-weight:600;color:var(--ink);flex:1;min-width:0;padding:6px 8px;border-radius:6px}
.topbar input.title:hover{background:#00000006}
.topbar input.title:focus{outline:2px solid var(--brand);background:var(--paper)}
.panes{flex:1;display:grid;grid-template-columns:1fr 400px;overflow:hidden;min-height:0}
.pane{overflow-y:auto;min-width:0}
.pane-left{padding:24px 28px}
.pane-right{border-left:1px solid var(--line);background:var(--paper-2);padding:20px}
#editor{width:100%;min-height:calc(100vh - 210px);border:1px solid var(--line);border-radius:12px;padding:22px 24px;
  font-family:var(--serif);font-size:1.02rem;line-height:1.78;color:var(--ink);background:var(--paper-2);resize:none}
#editor:focus{outline:2px solid var(--brand);outline-offset:-1px}
.readview{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:var(--paper-2);
  font-family:var(--serif);font-size:1.02rem;line-height:1.78;white-space:pre-wrap;min-height:200px}
.editor-tools{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.wordcount{margin-left:auto;font-size:.82rem;color:var(--ink-4)}

/* --------------------------------------------------------------- tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-20px -20px 18px;padding:0 12px;background:#fcfbf9}
.tabs button{border:none;background:none;padding:13px 14px;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink-3);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--brand-ink);border-bottom-color:var(--brand-ink)}

/* ------------------------------------------------------------- results */
.score-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.cat-row{display:flex;align-items:center;gap:9px;font-size:.83rem;margin-bottom:7px}
.cat-row span.n{flex:0 0 104px;color:var(--ink-3)}
.cat-row .bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.cat-row .bar i{display:block;height:100%}
.cat-row b{flex:0 0 28px;text-align:right;font-variant-numeric:tabular-nums}
.finding{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px;padding:12px 14px;margin-bottom:9px;background:var(--paper-2);cursor:pointer}
.finding:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.finding.sev3{border-left-color:var(--bad)}
.finding.sev1{border-left-color:var(--ok)}
.finding h6{margin:0 0 5px;font-size:.88rem;font-weight:650}
.finding p{margin:0 0 5px;font-size:.82rem;color:var(--ink-3);line-height:1.5}
.finding .fix{font-size:.82rem;color:var(--good);font-weight:500}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:16px}
.stat{background:var(--paper-2);padding:11px 13px}
.stat b{display:block;font-size:1.1rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.74rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em}
.source{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:9px;background:var(--paper-2)}
.source a{font-size:.9rem;font-weight:600;display:block;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source .dom{font-size:.76rem;color:var(--ink-4);font-family:var(--mono)}
.source .simbar{height:5px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.source .simbar i{display:block;height:100%;background:var(--warn)}

/* ---------------------------------------------------------------- diff */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diff h6{margin:0 0 8px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.diff .col{min-width:0}
.diff pre{margin:0;white-space:pre-wrap;font-family:var(--serif);font-size:.95rem;line-height:1.7;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:18px;max-height:60vh;overflow:auto}

/* --------------------------------------------------------------- forms */
label.field{display:block;margin-bottom:14px;font-size:.85rem;font-weight:600;color:var(--ink-2)}
label.field span.hint{display:block;font-weight:400;color:var(--ink-4);font-size:.8rem;margin-top:2px}
input.inp,select.inp,textarea.inp{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;
  font:inherit;font-size:.92rem;background:var(--paper-2);color:var(--ink)}
input.inp:focus,select.inp:focus,textarea.inp:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
textarea.inp{font-family:var(--serif);line-height:1.6;resize:vertical}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{border:none;background:var(--paper-2);padding:7px 13px;font:inherit;font-size:.84rem;cursor:pointer;color:var(--ink-3);border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}

/* -------------------------------------------------------------- screens */
.auth{display:grid;place-items:center;height:100vh;padding:24px;overflow-y:auto}
.auth-card{width:100%;max-width:410px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-lg)}
.auth-card h2{font-size:1.5rem;margin-bottom:6px}
.auth-card .sub{color:var(--ink-3);font-size:.92rem;margin-bottom:24px}
.err{background:var(--bad-soft);border:1px solid #f0c6c6;color:var(--bad);padding:10px 13px;border-radius:8px;font-size:.86rem;margin-bottom:16px}
.ok-msg{background:var(--good-soft);border:1px solid #c3e2d2;color:var(--good);padding:10px 13px;border-radius:8px;font-size:.86rem;margin-bottom:16px}
.empty{text-align:center;padding:44px 20px;color:var(--ink-4)}
.empty h3{color:var(--ink-2);margin-bottom:6px}
.spinner{width:15px;height:15px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;
  border-radius:999px;font-size:.88rem;box-shadow:var(--shadow-lg);z-index:200;animation:rise .25s ease}
.toast.bad{background:var(--bad)}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}
.modal{position:fixed;inset:0;background:rgba(20,27,45,.45);display:grid;place-items:center;z-index:150;padding:20px;overflow-y:auto}
.modal-card{background:var(--paper-2);border-radius:var(--r-lg);padding:28px;width:100%;max-width:620px;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.sample-box{border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:10px;background:var(--paper)}
.sample-box .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:.8rem;color:var(--ink-4)}

/* The sidebar toggle is a width question, so CSS owns it end to end. Note it
   is NOT hidden with the [hidden] attribute: line 3 marks that !important, so
   the media query below could never turn it back on. */
#sideToggle{display:none}

@media(max-width:1100px){.panes{grid-template-columns:1fr 350px}}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .side.open{display:flex;position:fixed;inset:0 auto 0 0;width:264px;z-index:100;box-shadow:var(--shadow-lg)}
  /* Shown by the same query that hides the sidebar, so the two can never
     disagree. It used to be set once by JavaScript at sign-in with no resize
     listener: narrow the window afterwards and the sidebar vanished while its
     toggle stayed hidden, leaving no way to reach documents or sign out. */
  #sideToggle{display:inline-flex}
  /* Results first, editor taking what is left, and BOTH panes allowed to
     shrink. Without min-height:0 a grid item refuses to go below its content,
     so once an analysis rendered a few thousand pixels of flags the editor was
     squeezed to nothing and the tail of the list sat outside an overflow:hidden
     box with no scrollbar on any ancestor — the flags you came for, unreachable. */
  .panes{grid-template-columns:1fr;grid-template-rows:minmax(180px,1fr) minmax(220px,1.2fr)}
  .pane,.pane-right{min-height:0}
  .pane-right{border-left:none;border-top:1px solid var(--line)}
  .diff{grid-template-columns:1fr}
}

/* Sign in with Google. Google's brand guidance asks for their exact mark on a
   plain white or plain blue button — not tinted to our green — so this one
   button deliberately sits outside the palette. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;
  color:#3c4043;border:1px solid #dadce0;font-weight:600;text-decoration:none}
.btn-google:hover{background:#f8f9fa;border-color:#d2d5d9}
.btn-google svg{flex:0 0 18px}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-3);font-size:.82rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* The browser's default focus ring is blue and fights the brand. Keep a ring
   — removing it strands keyboard users — but make it ours. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* Unconfirmed-email notice. Amber rather than red: nothing is broken and
   nothing is lost, there is simply one thing left to do. It spans the full
   width above the views so it cannot be mistaken for part of the document
   being edited. */
.verify-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;background:#fff8e9;border-bottom:1px solid #f0dcae;color:#7a5a12;font-size:.88rem}
.verify-bar[hidden]{display:none}
.verify-bar .verify-text{flex:1;min-width:220px;line-height:1.5}
.verify-bar .btn{flex:0 0 auto}
/* The bar's own buttons, not the app's. A green primary here would be the
   loudest thing on a new user's first screen, competing with Analyse — which
   is the button they actually came to press. These stay inside the amber. */
.verify-act{background:#fff;color:#7a5a12;border:1px solid #e0c88a;font-weight:600}
.verify-act:hover{background:#fffdf7;border-color:#d3b878}
.verify-dismiss{background:transparent;color:#9a7d3c;border:1px solid transparent}
.verify-dismiss:hover{color:#7a5a12;background:rgba(122,90,18,.06)}


/* A message inside a panel, above whatever the panel already holds. Errors used
   to replace the panel wholesale, taking the controls with them. */
.panel-note{margin:0 0 14px}

/* Recovered draft offer. Amber, because nothing is broken — there is simply
   work here that was never saved. */
.draft-restore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;background:#fff8e9;border-bottom:1px solid #f0dcae;color:#7a5a12;font-size:.88rem}
.draft-restore>span:first-child{flex:1;min-width:180px}
.draft-restore .draft-actions{display:flex;gap:8px;flex:0 0 auto}

/* Modal footers. */
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.modal-actions .btn{flex:0 0 auto}

/* Clickable rows are real controls now: they take focus, so they must show it. */
.finding[role="button"],.doc-item[role="button"]{cursor:pointer}
.finding[role="button"]:focus-visible,.doc-item[role="button"]:focus-visible{
  outline:2px solid var(--brand-ink);outline-offset:2px}

/* Team list. Rows rather than cards: they are a list of people, not a set of
   separate objects, and giving each one a border would say otherwise. */
.team-list{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line)}
.team-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.team-row .pill{justify-self:start}
@media(max-width:560px){
  .team-row{grid-template-columns:1fr auto;row-gap:8px}
  .team-row .btn{grid-column:2}
}