/* Smart Auditor workspace: what the real screens add to the prototype's design system.
   tokens.css, styles.css and auditor.css are the prototype's files, unchanged; everything new
   lives here and uses their tokens. */

[hidden] { display: none !important; }

/* --- shell --------------------------------------------------------------------------------- */
.sa-brand-name { font-size: var(--fs-md); color: var(--ink-strong); }
.sa-acct { display: flex; align-items: center; gap: var(--sp-2); }
.sa-emp small { display: block; font-size: var(--fs-xs); opacity: .8; }
.sa-logout { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); box-shadow: none; }
.sa-logout:hover { border-color: var(--gold-400); color: var(--gold-200); }

/* --- generic helpers ----------------------------------------------------------------------- */
.sa-plain { list-style: none; margin: 0; padding: 0; }
.sa-gap { margin-block-start: var(--sp-3); }
.sa-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.sa-sub-h { font-size: var(--fs-md); margin: var(--sp-1) 0 var(--sp-3); }
.sa-actions-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-4); }
.sa-inline { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.sa-tight { --card-pad: 14px 16px; }
.sa-flush { margin: 0 0 var(--sp-2); }
.sa-calc { margin-block-start: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); overflow-x: auto; }
.sa-calc small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-block-end: 2px; }
.sa-calc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-700); white-space: pre-wrap; direction: ltr; unicode-bidi: isolate; }
.sa-check-msg { display: block; margin-block-start: 2px; color: var(--ink-500); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.sa-check-calc { list-style: none; padding-inline-start: 34px; margin-block: -4px 6px; }
.sa-check-calc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-500); direction: ltr; unicode-bidi: isolate; }
.sa-check-val .btn { margin-inline-start: var(--sp-2); }
.sa-check-label { display: flex; gap: var(--sp-2); align-items: flex-start; cursor: pointer; }
.sa-check-label input { inline-size: auto; flex: 0 0 auto; margin-block-start: 3px; accent-color: var(--gold-600); }
.sa-check-label em { color: var(--err); font-style: normal; }
.sa-checks li[data-act] { cursor: pointer; }

/* --- login --------------------------------------------------------------------------------- */
.sa-login { display: grid; place-items: center; min-block-size: 60vh; }
.sa-login-card { inline-size: min(440px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); }
.sa-login-head { display: flex; gap: var(--sp-3); align-items: center; }
.sa-login-head > svg { inline-size: 36px; block-size: 36px; color: var(--gold-600); flex: 0 0 auto; }
.sa-login-head h1 { margin: 0; font-size: var(--fs-xl); }
.sa-login-head p { margin: 2px 0 0; }
.sa-login-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.sa-login-form .btn { justify-content: center; }
.sa-login-note { margin: 0; font-size: var(--fs-sm); }

/* --- results: "hold" is new (waiting for a deadline) --------------------------------------- */
.rq-badge.ai-hold { background: var(--st-paused-bg); color: var(--st-paused-fg); }
.rq-badge.ai-hold .sc-dot { background: var(--st-paused); }
.sa-pill--paused { background: var(--st-paused-bg); color: var(--st-paused-fg); border-color: transparent; font-style: normal; }
.sa-hold-count { color: var(--st-paused-fg); font-weight: var(--fw-semibold); }
.sa-hold-count svg { inline-size: 14px; block-size: 14px; }

/* --- pipeline sub-steps -------------------------------------------------------------------- */
.sa-subs { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-sub { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--sp-2); align-items: start; font-size: var(--fs-sm); }
.sa-sub .sa-ico { inline-size: 20px; block-size: 20px; }
.sa-sub .sa-ico svg { inline-size: 12px; block-size: 12px; }
.sa-sub b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); }
.sa-sub small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-block-start: 1px; }
.sa-sub.is-todo b { color: var(--ink-400); font-weight: var(--fw-medium); }
.sa-spin svg { animation: sa-spin 1.2s linear infinite; }
.sa-wait { color: var(--st-paused-fg); }
@keyframes sa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-spin svg { animation: none; } }
.sa-done-row { gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-block-start: var(--sp-3); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line-2); }

/* --- report -------------------------------------------------------------------------------- */
.sa-brief-reco { display: flex; flex-wrap: wrap; gap: 6px var(--sp-2); align-items: center; margin: var(--sp-2) 0; }
.sa-reco-items { margin: var(--sp-2) 0 0; padding-inline-start: 20px; color: var(--ink-700); font-size: var(--fs-sm); }
.sa-decision.is-hold { --dec-accent: var(--st-paused); }

.sa-period { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--surface); }
.sa-period.is-open { border-color: color-mix(in srgb, var(--st-paused) 45%, transparent); background: var(--st-paused-bg); }
.sa-period-eq { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.sa-period-eq > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 110px; }
.sa-period-eq small { color: var(--ink-500); font-size: var(--fs-xs); }
.sa-period-eq b { font-size: var(--fs-lg); color: var(--ink-strong); }
.sa-period-eq > span { color: var(--ink-400); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.sa-period-now { margin: var(--sp-3) 0 var(--sp-1); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sa-period-why { margin: 0; font-size: var(--fs-sm); }

.sa-records { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.sa-records li { display: flex; gap: 6px; align-items: center; }
.sa-records li.is-active { color: var(--ai-reject-fg); font-weight: var(--fw-semibold); }
.sa-records .sa-ico { inline-size: 18px; block-size: 18px; }
.sa-records .sa-ico svg { inline-size: 10px; block-size: 10px; }

/* --- evidence: page image with the highlighted line ---------------------------------------- */
.sa-pageimg { margin: var(--sp-3) 0 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.sa-pageimg-h { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--ink-500); background: var(--surface); }
.sa-pageimg-h b { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-700); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-pageimg-h svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.sa-pageimg-frame { direction: ltr; max-block-size: 520px; overflow: auto; }
.sa-pageimg-sheet { position: relative; }
.sa-pageimg.is-big .sa-pageimg-frame { max-block-size: 72vh; }
.sa-pageimg-frame img { display: block; inline-size: 100%; block-size: auto; background: var(--surface); }
.sa-hlbox { position: absolute; border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); border-radius: 3px; pointer-events: none; }
.sa-hlbox.is-bad { border-color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); }
.sa-quote { margin-block-start: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-inline-start: 3px solid var(--gold-400); background: var(--gold-50); border-radius: var(--r-sm); }
.sa-quote small { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-block-end: 2px; }
.sa-quote q { quotes: none; color: var(--ink-strong); font-size: var(--fs-sm); }
.sa-ev-msg { margin: var(--sp-2) 0 0; color: var(--ink-700); font-size: var(--fs-sm); }
.sa-evlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sa-evlinks .sa-link { display: flex; gap: var(--sp-2); align-items: center; inline-size: 100%; text-align: start; font-size: var(--fs-sm); padding: 4px 0; }
.sa-evlinks .sa-link small { margin-inline-start: auto; color: var(--ink-500); white-space: nowrap; }
.sa-evlinks .sa-link.is-current { font-weight: var(--fw-bold); }
.sa-evlinks .sa-ico { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.sa-evlinks .sa-ico svg { inline-size: 10px; block-size: 10px; }
.sa-ws-side .sa-sources { grid-template-columns: 1fr; }
.sa-ev-pagebar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); flex-wrap: wrap; }

@media print {
  .sa-bar, .sa-decision-bar, .sa-ws-side, .sa-hero-actions, .sa-dec-btns { display: none !important; }
  .sa-acc-item { break-inside: avoid; }
}