/* Pythagoras Construction Analytics — client portal
   ==================================================================
   DIRECTION. The people using this read plan sets all day. The portal retains
   the authority and clarity of a construction document while opening the
   surfaces, simplifying the geometry, and using modern readable typography.

   PALETTE (6)   ink, navy, gold, paper, rule, slate
   TYPE (2)      Manrope             — headings and anything read quickly
                 IBM Plex Mono       — values: sizes, dates, checksums, labels
   SIGNATURE     calm surfaces, restrained rules, real brand artwork
   ================================================================== */

:root {
  --ink: #151D25;
  --navy: #102E4D;
  --navy-deep: #091F35;
  --gold: #BE9B45;
  --gold-deep: #76571E;
  --gold-wash: #F6F1E5;
  --paper: #F8F9F7;
  --rule: #C5CED2;
  --rule-soft: #E5EAEC;
  --slate: #53616B;
  --slate-light: #78858D;
  --green: #2A6B3C;
  --green-wash: #EDF4EE;
  --red: #8A2F26;
  --red-wash: #FAEEEC;

  --serif: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  /* A 30% speed reduction: original durations divided by .70. */
  --motion-fast: .17143s;
  --motion-page: .72s;
  --motion-progress: .28571s;
  --motion-spinner: 1.14286s;
  --ease-enterprise: cubic-bezier(.22, 1, .36, 1);
  --ease-sheet: cubic-bezier(.76, 0, .24, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* A drafting-sheet reveal, shared by document navigation and portal views. */
@view-transition { navigation: auto; }
@keyframes drafting-sheet-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  animation: drafting-sheet-reveal var(--motion-page) var(--ease-sheet) both;
  mix-blend-mode: normal;
  filter:
    drop-shadow(1px 0 0 rgba(190, 155, 69, .58))
    drop-shadow(16px 0 24px rgba(9, 31, 53, .08));
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; filter: none !important; }
}

/* ---------- masthead ---------- */

.masthead { background: #fff; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; }
.masthead-inner { max-width: 1140px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { display: block; height: 64px; width: auto; }

.masthead-nav { display: flex; gap: 2px; flex: 1; }
.nav-link {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); background: none; border: none;
  border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; cursor: pointer;
}
.nav-link:hover { color: var(--navy); border-bottom-color: var(--rule); background: none; }
.nav-link[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); background: none; }

.masthead-right { margin-left: auto; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.masthead-right strong { display: block; font-weight: 500; font-size: 14px; color: var(--navy); }
.masthead-right .addr { display: block; font-family: var(--mono); font-size: 11px; color: var(--slate); }
.masthead-right .role {
  display: block; margin-top: 1px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}
/* Sign out. Deliberately quiet -- it sits under the caller's own name, where
   it is findable when wanted and never competes with the page. */
.masthead-right .signout {
  display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.masthead-right .signout:hover { color: var(--gold-deep); }
.masthead-right .signout:disabled { color: var(--slate-light); cursor: default; }

/* ---------- page ---------- */

.content { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto; padding: 40px 32px 80px; }

.content h1 {
  font-family: var(--serif); font-weight: 600; font-size: 42px; line-height: 1.1;
  margin: 0 0 8px; color: var(--navy); letter-spacing: -.01em;
}
.lede { font-size: 17px; color: var(--slate); margin: 0 0 30px; max-width: 60ch; }
.content p { margin: 0 0 12px; }
.muted { color: var(--slate); }

/* An eyebrow marks what kind of thing you are looking at. */
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); display: block; margin-bottom: 6px;
}

.section-heading {
  font-family: var(--serif); font-weight: 600; font-size: 27px; color: var(--navy);
  margin: 46px 0 2px; display: flex; align-items: baseline; gap: 10px;
}
.section-heading .count { font-family: var(--mono); font-size: 13px; color: var(--slate-light); font-weight: 400; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.loading { display: flex; align-items: center; gap: 12px; padding: 48px 0; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--rule); border-top-color: var(--gold);
  animation: spin var(--motion-spinner) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- project title block ---------- */

.titleblock {
  position: relative; background: #fff; border: 1px solid var(--navy);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 26px 0 8px;
}
.tb-cell { padding: 14px 18px; border-right: 1px solid var(--rule); min-width: 0; }
.tb-cell:last-child { border-right: 0; }
.tb-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); display: block; margin-bottom: 5px;
}
.tb-value { font-family: var(--mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.tb-value.is-name { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--navy); }

/* The status cell reads as a stamp. */
.tb-cell.tb-status { background: var(--gold-wash); }
.tb-cell.tb-status.is-ready { background: var(--green-wash); }
.tb-cell.tb-status .tb-value { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.tb-cell.tb-status.is-ready .tb-value { color: var(--green); }

/* ---------- register: the sheet index ---------- */

.register { border: 1px solid var(--rule); background: #fff; }
.register-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--rule); background: #FDFDFB;
}
.register-head .tb-label { margin: 0; }

.entry {
  display: flex; align-items: baseline; gap: 16px; padding: 13px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.entry:last-child { border-bottom: 0; }
/* Name over meta, always — these are spans and buttons, so the stacking has to
   be stated rather than inherited from the tag. */
.entry-main { flex: 1; min-width: 0; }
.entry-name { display: block; font-weight: 500; color: var(--navy); overflow-wrap: anywhere; }
.entry-meta { display: block; font-family: var(--mono); font-size: 12px; color: var(--slate); margin-top: 3px; }
.entry-size { font-family: var(--mono); font-size: 13px; color: var(--slate); white-space: nowrap; }
.entry-hash {
  font-family: var(--mono); font-size: 10px; color: var(--slate-light);
  overflow-wrap: anywhere; display: block; margin-top: 3px;
}

/* A register holds entries. Anything else placed in one — a note, an upload
   control — still needs the gutter the entries have. */
.register > p { padding: 13px 18px; margin: 0; }
.register > .dropzone-actions { justify-content: flex-start; padding: 0 18px 18px; margin-top: 4px; }

/* A panel is one thing under consideration, rather than a list of like things. */
.panel { border: 1px solid var(--rule); background: #fff; padding: 20px 22px; margin-bottom: 16px; }
.panel + .panel { margin-top: 16px; }

.stack > * + * { margin-top: 14px; }

/* ---------- status pill (lists) ---------- */

.status-pill {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; white-space: nowrap;
  border: 1px solid var(--rule); color: var(--slate); background: #fff;
}
.status-draft { border-color: var(--rule); color: var(--slate); }
.status-submitted, .status-in_review { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-wash); }
.status-report_ready, .status-approved { border-color: var(--green); color: var(--green); background: var(--green-wash); }

/* ---------- buttons ---------- */

.btn, .file-label {
  display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 10px 20px; border: 1px solid var(--navy); background: var(--navy); color: #fff;
  cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.btn:hover, .file-label:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--rule); }
.btn-secondary:hover { background: var(--paper); border-color: var(--slate-light); color: var(--navy); }
.btn-danger { background: #fff; color: var(--red); border-color: var(--rule); }
.btn-danger:hover { background: var(--red-wash); border-color: var(--red); color: var(--red); }
.btn-small { font-size: 12px; padding: 6px 12px; }

.link-btn {
  background: none; border: none; padding: 0; color: var(--navy);
  font: inherit; font-weight: 500; cursor: pointer; text-align: left;
}
.link-btn:hover { color: var(--gold-deep); text-decoration: underline; }
.link-btn.back {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 18px; display: inline-block;
}

/* ---------- empty states: an invitation, not a dead end ---------- */

.empty { border: 1px dashed var(--rule); background: #fff; padding: 46px 32px; text-align: center; margin-top: 20px; }
.empty h3 { font-family: var(--serif); font-weight: 600; font-size: 25px; color: var(--navy); margin: 0 0 6px; }
.empty p { color: var(--slate); margin: 0 auto 6px; max-width: 54ch; }
.empty .next { margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--slate-light); }

/* ---------- upload ---------- */

.dropzone {
  border: 1px dashed var(--rule); background: #fff; padding: 34px 28px;
  text-align: center; margin: 22px 0 8px; transition: border-color var(--motion-fast), background var(--motion-fast);
}
.dropzone.is-dragging { border-color: var(--gold); background: var(--gold-wash); }
.dropzone h3 { font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--navy); margin: 0 0 4px; }
.dropzone-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.progress {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px auto auto; gap: 14px;
  align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--rule-soft);
  background: #fff; font-size: 14px;
}
.progress-name { overflow-wrap: anywhere; }
.progress-track { height: 4px; background: var(--rule-soft); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--gold); transition: width var(--motion-progress); }
.progress.is-done .progress-fill { background: var(--green); }
.progress.is-failed .progress-fill { background: var(--red); }
.progress-note { font-family: var(--mono); font-size: 11px; color: var(--slate); white-space: nowrap; }

.actionbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.actionbar .muted { font-size: 14px; flex: 1; min-width: 240px; }

/* ---------- forms ---------- */

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: grid; gap: 5px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.text-input, .select-input, textarea {
  font-family: var(--sans); font-size: 15px; letter-spacing: normal; text-transform: none;
  color: var(--ink); padding: 10px 12px; border: 1px solid var(--rule); background: #fff;
}
.text-input:focus, .select-input:focus, textarea:focus { border-color: var(--gold-deep); }
.inline-form .text-input { min-width: 320px; flex: 1; }

.notice { border-left: 2px solid var(--gold); background: var(--gold-wash); padding: 13px 16px; margin-top: 16px; font-size: 14px; }
.notice.is-good { border-left-color: var(--green); background: var(--green-wash); }
.error-text { color: var(--red); font-size: 14px; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 22px; margin: 16px 0; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--rule); background: #fff; margin-top: auto; }
.footer-inner {
  max-width: 1140px; margin: 0 auto; padding: 18px 32px; display: flex;
  align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--slate);
}
.footer-tick { width: 18px; height: 1px; background: var(--gold); }
.footer-spacer { flex: 1; }
.linkedin-link {
  width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 auto;
  text-decoration: none; transition: opacity var(--motion-fast);
}
.linkedin-link img { display: block; width: 26px; height: auto; }
.linkedin-link:hover { opacity: .78; }

/* ---------- request access page ---------- */

.request-form { display: grid; gap: 16px; max-width: 520px; margin-top: 26px; }
.request-form label { display: grid; gap: 5px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.request-form input, .request-form select {
  font-family: var(--sans); font-size: 15px; letter-spacing: normal; text-transform: none;
  color: var(--ink); padding: 10px 12px; border: 1px solid var(--rule); background: #fff;
}
.request-form input:focus, .request-form select:focus { border-color: var(--gold-deep); }
.req { color: var(--gold-deep); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 820px) {
  .masthead-inner { flex-wrap: wrap; gap: 10px; padding: 12px 20px; }
  .masthead-nav { order: 3; flex: 0 0 100%; overflow-x: auto; }
  .masthead-right { margin-left: 0; text-align: left; }
  .brand-logo { height: 48px; }
  .content { padding: 26px 20px 56px; }
  .content h1 { font-size: 31px; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .tb-cell { border-bottom: 1px solid var(--rule); }
  .progress { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .inline-form .text-input { min-width: 0; }
  .footer-inner { padding: 14px 20px; }
}

/* ---------------------------------------------------------------------------
   The audit view. A bound document: contents rail, one continuous read,
   generous margins. Deliberately heavier than the rest of the portal — this is
   the thing the client paid for, and it should not look like a settings page.
   --------------------------------------------------------------------------- */
.audit{
  display:grid; grid-template-columns:190px 1fr;
  border:1px solid var(--rule); background:#fff; margin:26px 0 30px;
}
.au-contents{
  border-right:1px solid var(--rule); padding:34px 0 34px 26px;
  align-self:start; position:sticky; top:18px;
}
.au-contents .au-k{margin-bottom:12px}
.au-contents a{
  display:block; font-size:13px; color:var(--slate); text-decoration:none;
  padding:7px 0; border-bottom:1px solid var(--rule-soft);
}
.au-contents a:last-child{border-bottom:0}
.au-contents a.on{color:var(--navy); font-weight:600}
.au-contents a:hover{color:var(--gold-deep)}

.au-body{padding:0 42px}
.au-sec{padding:38px 0; border-top:1px solid var(--rule-soft)}
.au-sec.au-first{border-top:0}
.au-sec > h3{
  font-family:var(--serif); font-weight:600; font-size:27px; color:var(--navy);
  margin:0 0 5px; letter-spacing:-.008em;
}
.au-lede{font-size:14px; color:var(--slate); margin:0 0 24px; line-height:1.6; max-width:66ch}

.au-verdict{text-align:center; padding:14px 0 4px}
.au-score-lead{
  font-family:var(--serif); font-weight:600; font-size:82px; line-height:1;
  color:var(--navy); margin:0; letter-spacing:-.02em;
}
.au-score-lead.is-warn{color:var(--gold-deep)}
.au-score-lead.is-bad{color:#A6402F}
.au-score-lead span{font-size:.3em; color:var(--slate-light); margin-left:6px; letter-spacing:0}
.au-words{
  font-family:var(--serif); font-weight:600; font-size:29px; line-height:1.22;
  color:var(--navy); margin:16px auto 0; max-width:30ch; letter-spacing:-.012em;
}
.au-sub{font-size:14px; color:var(--slate); line-height:1.6; margin:12px auto 0; max-width:62ch}

.au-strip{
  display:flex; margin-top:30px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.au-cell{flex:1; padding:17px 0; text-align:center; border-right:1px solid var(--rule-soft)}
.au-cell:last-child{border-right:0}
.au-k{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate-light);
}
.au-cell .au-k{margin-bottom:6px}
.au-v{font-family:var(--serif); font-size:27px; font-weight:600; color:var(--ink)}
.au-v-name{font-family:var(--sans); font-size:15px; font-weight:500}

.au-ranked{border-top:1px solid var(--rule)}
.au-rank{
  display:flex; align-items:center; gap:16px; padding:15px 0;
  border-bottom:1px solid var(--rule-soft);
}
.au-n{font-family:var(--mono); font-size:10px; color:var(--slate-light); width:20px; flex:none}
.au-nm{font-size:14px; font-weight:500; width:220px; flex:none}
.au-bar{flex:1; height:6px; background:var(--rule-soft); position:relative; min-width:60px}
.au-bar i{position:absolute; inset:0 auto 0 0; background:var(--navy); display:block}
.au-bar i.is-warn{background:var(--gold)}
.au-bar i.is-bad{background:#A6402F}
.au-score{font-family:var(--mono); font-size:11px; color:var(--slate); width:26px; text-align:right; flex:none}
.au-amt{font-family:var(--mono); font-size:12px; color:var(--ink); width:118px; text-align:right; flex:none}

.au-findings{border-top:1px solid var(--rule)}
.au-find{display:flex; gap:18px; padding:19px 0; border-bottom:1px solid var(--rule-soft)}
.au-fn{font-family:var(--mono); font-size:10px; color:var(--gold-deep); width:26px; flex:none; padding-top:4px}
.au-fb{flex:1}
.au-fb h4{font-size:15px; font-weight:600; margin:0 0 6px; line-height:1.4; color:var(--ink)}
.au-fb p{margin:0 0 9px; font-size:13.5px; color:var(--slate); line-height:1.65; max-width:70ch}
.au-quote{font-style:italic}
.au-cite{
  display:flex; flex-wrap:wrap; gap:7px 14px; align-items:center;
  font-family:var(--mono); font-size:10.5px; color:var(--slate-light); letter-spacing:.04em;
}
.au-side{font-weight:600; letter-spacing:.08em; padding:2px 7px; border:1px solid}
.au-side.carry{color:#A6402F; border-color:#E2BDB6}
.au-side.recover{color:var(--gold-deep); border-color:var(--gold); background:var(--gold-wash)}
.au-find .au-amt{padding-top:3px}
/* A number withheld, with its reason, in place of the number (engine audits, migration 0023). */
.au-withheld{font-family:var(--serif); font-size:20px; color:var(--slate); line-height:1.45; margin:18px auto 6px; max-width:52ch}
.au-why{flex:1; font-size:12.5px; color:var(--slate-light); min-width:60px}
.au-amt-why{font-family:var(--sans); font-size:11.5px; color:var(--slate-light); line-height:1.4; width:180px}
.au-sev{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:1px 6px; border:1px solid var(--rule); color:var(--slate); margin-bottom:6px}
.au-sev.sev-high{color:#A6402F; border-color:#E2BDB6}
.au-sev.sev-medium{color:var(--gold-deep); border-color:var(--gold)}
.au-fb h5{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--gold-deep); margin:12px 0 5px; font-weight:600}
.au-quotes{margin:0 0 9px; padding-left:18px}
.au-quotes li{font-size:12.5px; color:var(--slate); line-height:1.55; margin:0 0 5px; max-width:74ch}
.au-prose{font-size:14px; color:var(--ink); line-height:1.65; margin:0 0 12px; max-width:70ch}
.au-preview{margin-top:18px; border:1px solid var(--rule-soft)}

.au-locked{
  border:1px solid var(--rule); background:var(--gold-wash);
  padding:26px 24px; text-align:center; margin-top:24px;
}
.au-locked h4{font-family:var(--serif); font-size:21px; font-weight:600; color:var(--navy); margin:0 0 7px}
.au-locked p{font-size:13.5px; color:var(--slate); margin:0 auto 16px; line-height:1.6; max-width:56ch}

.au-deliver{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:22px 0 34px; border-top:1px solid var(--rule);
}
.au-g{flex:1; font-family:var(--mono); font-size:10.5px; color:var(--slate-light); letter-spacing:.05em}

@media (max-width:860px){
  .audit{grid-template-columns:1fr}
  .au-contents{
    border-right:0; border-bottom:1px solid var(--rule); position:static;
    padding:20px 22px; display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center;
  }
  .au-contents a{border-bottom:0; padding:2px 0}
  .au-contents .au-k{width:100%; margin-bottom:4px}
  .au-body{padding:0 22px}
  .au-score-lead{font-size:60px}
  .au-words{font-size:23px}
  .au-nm{width:130px}
  .au-amt{width:92px}
  .au-strip{flex-wrap:wrap}
  .au-cell{flex:1 1 50%; border-bottom:1px solid var(--rule-soft)}
}

/* ---------------------------------------------------------------------------
   Choosing a report for a set. This is the only place in the product where a
   client agrees to owe money, so the price is set at display size and the
   chosen card is unambiguous rather than subtle.
   --------------------------------------------------------------------------- */
.tier-pick{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:1px; background:var(--rule-soft); border:1px solid var(--rule); margin-bottom:22px;
}
.tier-opt{
  background:#fff; border:0; text-align:left; cursor:pointer; padding:18px 18px 20px;
  font-family:var(--sans); transition:background var(--motion-fast);
}
.tier-opt:hover{background:var(--gold-wash)}
.tier-opt.is-on{background:var(--gold-wash); box-shadow:inset 0 0 0 2px var(--gold)}
.tier-opt:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.tier-name{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:7px;
}
.tier-price{
  display:block; font-family:var(--serif); font-size:32px; font-weight:600;
  color:var(--navy); line-height:1; letter-spacing:-.015em;
}
.tier-price em{
  font-family:var(--sans); font-size:12px; font-weight:500; font-style:normal;
  color:var(--slate-light); letter-spacing:0;
}
.tier-blurb{
  display:block; font-size:12px; color:var(--slate); line-height:1.55; margin-top:10px;
}

/* A notice is a statement of fact the client needs, not a warning. */
.notice{border:1px solid var(--rule); background:var(--paper); padding:17px 19px}
.notice p{margin:0; font-size:13px; color:var(--slate); line-height:1.6; max-width:74ch}
.notice p + p{margin-top:9px}
.check-line{display:flex; gap:10px; align-items:flex-start; font-size:13px; cursor:pointer}
.check-line input{margin:2px 0 0; width:15px; height:15px; flex:none; accent-color:var(--navy)}

/* Hover a tier and it says exactly what it includes, drawn from the same
   server list the pricing page uses, so the two cannot drift. Opens upward so
   it is never cut off by the bottom of the page. */
.tier-opt{position:relative}
.tier-includes{
  display:none; position:absolute; left:0; bottom:calc(100% + 6px); z-index:6; width:280px;
  background:#fff; border:1px solid var(--gold); padding:12px 14px 10px; text-align:left;
  box-shadow:0 8px 22px rgba(19,41,75,.14); cursor:default;
}
.tier-includes-h{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px;
}
.tier-includes-row{
  display:block; font-size:12px; color:var(--slate); line-height:1.5; padding:2px 0 2px 14px;
  position:relative;
}
.tier-includes-row::before{content:"\2713"; position:absolute; left:0; color:var(--gold-deep)}
.tier-opt:hover .tier-includes, .tier-opt:focus-visible .tier-includes{display:block}
/* A code fixes the tier: the others step back until the code is removed. */
.tier-pick.is-locked .tier-opt{cursor:default; opacity:.5}
.tier-pick.is-locked .tier-opt.is-on{opacity:1}

/* Campaign code entry. Quiet by default — most arrivals have no code, and a
   visible empty field invites the thought that they are missing a discount. */
.code-details{border:1px solid var(--rule); background:#fff; padding:12px 16px; margin:0 0 22px}
.code-details > summary{cursor:pointer; font-size:14px; font-weight:500; color:var(--navy); list-style:none}
.code-details > summary::-webkit-details-marker{display:none}
.code-details > summary::after{content:"?"; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:8px; border:1px solid var(--rule); border-radius:50%;
  font-family:var(--mono); font-size:10px; color:var(--slate)}
.code-details[open] > summary::after{content:"\00d7"}
.code-details > summary:hover{color:var(--gold-deep)}
.code-heading{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--navy); margin:0}
.code-open .code-row{margin-top:10px}
.code-row{display:flex; gap:10px; align-items:stretch; margin-top:12px}
.code-row .text-input{flex:1; min-width:0; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.code-details .muted{font-size:12.5px; margin:10px 0 0}
.code-applied{margin:0 0 22px}
.code-applied a{color:var(--gold-deep); margin-left:8px}
.code-mono{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--navy)}
/* Staff: issuing a code is one row of fields. */
.code-form{display:grid; grid-template-columns:110px 1.4fr 1fr 1fr 1.2fr 150px auto; gap:8px; margin:0 0 16px}
.code-form .text-input, .code-form .select-input{min-width:0; font-size:13.5px; padding:8px 10px}

@media (max-width:620px){
  .tier-pick{grid-template-columns:1fr}
  .tier-price{font-size:26px}
  .code-form{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){ .code-form{grid-template-columns:1fr 1fr 1fr} }

/* Alerts. Severity is colour-coded because the first job of this list is to be
   scannable at a glance by somebody who opened it because they got an email. */
.sev{
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  padding:2px 7px; border:1px solid; margin-right:9px; vertical-align:middle;
}
.sev-critical{color:#fff; background:#A6402F; border-color:#A6402F}
.sev-error{color:#A6402F; border-color:#E2BDB6}
.sev-warn{color:var(--gold-deep); border-color:var(--gold); background:var(--gold-wash)}
.alert-row{align-items:flex-start}
.alert-detail{
  margin:8px 0 0; font-family:var(--mono); font-size:10.5px; line-height:1.65;
  color:var(--slate); background:var(--paper); border:1px solid var(--rule-soft);
  padding:9px 11px; white-space:pre-wrap; max-width:74ch; overflow-x:auto;
}
.check-field{padding:16px 20px; border-bottom:1px solid var(--rule)}
.check-field input[type=checkbox]{width:16px; height:16px; accent-color:var(--navy)}
.btn-small{font-size:11px; padding:6px 12px}

/* ---------------------------------------------------------------------------
   Audit authoring. This is the operator writing the thing the client paid
   for, so the form reads as a document being drafted, not a settings page.
   --------------------------------------------------------------------------- */
.audit-form{border:1px solid var(--rule); background:#fff; padding:22px 24px; margin-top:14px}
.af-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
.af-grid label{display:grid; gap:5px}
.af-grid label > span{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate);
}
.af-wide{grid-column:1 / -1}
.af-sub{
  font-family:var(--serif); font-weight:600; font-size:21px; color:var(--navy);
  margin:26px 0 8px;
}
.af-track{gap:14px}
.af-inline{display:grid; gap:4px; width:110px; flex:none}
.af-inline > span{
  font-family:var(--mono); font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate-light);
}
.af-finding{border:1px solid var(--rule); background:var(--paper); padding:16px 18px; margin-bottom:14px}
.af-finding-head{display:flex; align-items:center; margin-bottom:12px}
.af-finding textarea.text-input{resize:vertical}
@media (max-width:720px){ .af-grid{grid-template-columns:1fr} .af-inline{width:84px} }

/* The client's steer. Suggested tags because a blank box gets a blank answer. */
.focus-tags{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px}
.focus-tag{
  border:1px solid var(--rule); background:#fff; border-radius:2px;
  padding:7px 12px; font-family:var(--sans); font-size:12.5px; color:var(--slate);
  cursor:pointer; transition:border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}
.focus-tag:hover{border-color:var(--gold); color:var(--gold-deep); background:var(--gold-wash)}
.focus-tag.is-on{border-color:var(--navy); background:var(--navy); color:#fff}
#focus-note{width:100%; resize:vertical; margin-bottom:4px}