/* ProofPR client portal. Builds on site.css tokens. */
body.portal { background: var(--sheet); }
.p-top { background: var(--paper); border-bottom: 1px solid var(--line); }
.p-top-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.p-top .logo-link { display: inline-flex; align-items: center; gap: 12px; }
.p-tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px; }
.p-user { display: flex; align-items: center; gap: 14px; }
.p-user a { display: grid; text-align: right; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.25; }
.p-user a small { color: var(--muted); font-weight: 400; font-size: .82rem; }
.p-nav { display: flex; gap: 4px; overflow-x: auto; }
.p-nav a { padding: 12px 14px; color: var(--ink-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.p-nav a:hover { color: var(--ink); }
.p-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.p-nav em { font-style: normal; font-family: var(--mono); font-size: .72rem; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.p-main { padding-block: 32px 72px; }
.p-stack { display: grid; gap: 22px; }
.p-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.p-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.p-head p { color: var(--muted); margin-top: 6px; max-width: 64ch; }
.p-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 3vw, 26px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.p-card h2 { font-size: 1.15rem; letter-spacing: -.01em; }
.p-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.p-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 960px) { .p-cols { grid-template-columns: minmax(0, 1fr); } }
.p-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .p-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .p-tiles { grid-template-columns: minmax(0, 1fr); } }
.p-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 4px; text-decoration: none; color: var(--ink); }
a.p-tile:hover { border-color: var(--ink); color: var(--ink); }
.p-tile .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.p-tile .v { font: 800 2rem/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.p-tile .s { color: var(--muted); font-size: .88rem; }
.p-empty { color: var(--muted); padding: 8px 0; }
.p-flash { padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.p-flash-ok { background: var(--accent-soft); color: var(--ink); }
.p-flash-err { background: var(--flag-soft); color: var(--ink); }
.p-foot { border-top: 1px solid var(--line); padding-block: 24px; color: var(--muted); font-size: .92rem; background: var(--paper); }

/* Lists of reports */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.doc { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.doc:last-child { border-bottom: 0; }
.doc-icon { width: 46px; height: 56px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--sheet); display: grid; place-items: end center; padding-bottom: 6px; font: 600 .62rem var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; position: relative; }
.doc-icon::before { content: ""; position: absolute; top: 8px; left: 9px; right: 9px; height: 18px; background: repeating-linear-gradient(0deg, var(--line) 0 2px, transparent 2px 6px); }
.doc-main { min-width: 0; display: grid; gap: 2px; }
.doc-main a { color: var(--ink); font-weight: 700; text-decoration: none; }
.doc-main a:hover { color: var(--accent); }
.doc-meta { color: var(--muted); font-size: .86rem; }
@media (max-width: 560px) { .doc { grid-template-columns: 40px minmax(0, 1fr); } .doc .btn { grid-column: 2; justify-self: start; } }

/* Verdicts and statuses */
.verdict, .pstatus { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.v-correct { background: var(--accent-soft); color: var(--accent); }
.v-outdated, .v-wrong { background: var(--flag-soft); color: var(--flag); }
.v-missing { background: var(--amber-soft); color: var(--amber); }
.v-unreviewed { background: var(--sheet); color: var(--muted); border: 1px dashed var(--line); }
.ps-received { background: var(--amber-soft); color: var(--amber); }
.ps-in_progress { background: var(--blue-soft); color: var(--blue); }
.ps-done { background: var(--accent-soft); color: var(--accent); }

/* Score ring */
.score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.ring { --p: 0; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; }
.ring span { width: 92px; height: 92px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 800 1.8rem/1 var(--display); letter-spacing: -.03em; }
.ring-empty { background: var(--line); }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: .9rem; }
.bar-track { height: 10px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* Answer cards */
.qa { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.qa:first-of-type { border-top: 0; }
.qa h3 { font-size: 1.02rem; }
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .qa-grid { grid-template-columns: minmax(0, 1fr); } }
.answer { background: var(--sheet); border-radius: 10px; padding: 14px; display: grid; gap: 8px; font-size: .94rem; }
.answer-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.answer-top b { font-size: .9rem; }
.answer p { color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.answer .note { font-size: .86rem; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 10px; white-space: normal; }
.answer details summary { cursor: pointer; color: var(--muted); font-size: .86rem; }

/* Report stats */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat-tiles div { background: var(--sheet); border-radius: 10px; padding: 14px; display: grid; gap: 2px; }
.stat-tiles span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-tiles b { font: 800 1.6rem/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Requests */
.req-list { display: grid; }
.req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.req:last-child { border-bottom: 0; }
.req:hover b { color: var(--accent); }
.req small { color: var(--muted); grid-column: 1; }
.reply { background: var(--accent-soft); border-radius: 10px; padding: 14px 16px; white-space: pre-line; }
.file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.file-list a { overflow-wrap: anywhere; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 18px; background: var(--sheet); display: grid; gap: 6px; }
.drop input { border: 0; padding: 0; min-height: auto; background: transparent; }

/* Tables inside the portal */
.p-card table.data td a { color: var(--ink); font-weight: 600; }

/* Auth */
.p-auth { max-width: 440px; margin: 24px auto; width: 100%; }
.p-auth .p-card { gap: 16px; }
.p-auth h1 { font-size: 1.8rem; }
.p-auth .seal { color: var(--ink); justify-self: center; }

/* Report generator */
.deck-form { display: grid; gap: 22px; }
.deck-hint { color: var(--muted); font-size: .9rem; }
.deck-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 16px; background: var(--sheet); }
.deck-drop input { border: 0; padding: 0; min-height: auto; background: transparent; }
.deck-design { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .deck-design { grid-template-columns: minmax(0, 1fr); } }
.deck-opt { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; }
.deck-opt input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.deck-opt span { display: grid; gap: 2px; }
.deck-opt small { color: var(--muted); }
.deck-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.deck-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.deck-bar { height: 14px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); overflow: hidden; }
.deck-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.deck-wait { color: var(--muted); }

[hidden] { display: none !important; }