/* mockup.css: only what the draft mock-up adds on top of the site's own
   arcaeon.css (copied in unchanged). Tokens only, no new colours. */

/* the draft banner, on every page, on screen and on paper */
.mock-banner{background:var(--paper);color:var(--paper-ink);border-bottom:3px solid var(--bad-paper);
  text-align:center;padding:10px var(--gutter);font:600 var(--fs-2)/1.3 var(--font-display);
  letter-spacing:.08em;text-transform:uppercase}
.mock-banner span{display:block;font:400 var(--fs-1)/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--paper-soft)}

/* status: the gold tag */
.status-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;margin:0 0 var(--sp-2)}
.status-row .fine{margin:0}

/* reviewer notes: for the owner's read, never site copy */
.mock-note{border:1px dashed var(--gold);border-radius:var(--r-ctl);padding:var(--sp-2);margin:var(--sp-3) 0 0;
  font-size:var(--fs-2);color:var(--ink-soft);max-width:40em}
.mock-note b{color:var(--gold)}
.mock-note ul{margin:var(--sp-1) 0 0;padding-left:1.2em}

/* grids of cards */
.cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cards .card h3{margin-top:var(--sp-1)}
.page-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.page-list li{background:var(--navy);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-2) var(--sp-3)}
.page-list a{font:600 var(--fs-4)/1.3 var(--font-display)}
.page-list p{margin:var(--sp-1) 0 0}

/* pricing: the hourly limit sits on the line right under its headline */
.p-pricing h2.limit-head{margin-bottom:var(--sp-h)}
.p-pricing .limit-line{font:500 var(--fs-4)/1.3 var(--font-display);color:var(--ink);margin:0 0 var(--sp-4)}

/* the light: colour, a word and a shape, never colour alone */
.chip-amber{color:var(--attention)}
.chip-amber::before{border-radius:0;transform:rotate(45deg)}
.verdict-card{border-left-width:4px}
.verdict-card.v-green{border-left-color:var(--ok)}
.verdict-card.v-amber{border-left-color:var(--attention)}
.verdict-card.v-red{border-left-color:var(--bad)}
.reasons{margin:var(--sp-1) 0 0;padding-left:1.2em}
.reasons li{margin:var(--sp-h) 0}

/* lists of what something proves and does not */
.yes-no{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.yes-no ul{margin:0;padding-left:1.2em}
.yes-no li{margin:var(--sp-1) 0}

/* the big claim line */
.claim{font:600 var(--fs-5)/1.25 var(--font-display);color:var(--gold);max-width:22em;margin:0 0 var(--sp-2)}

/* cancel: a small text link low on the account page, then one confirming press */
details.confirm{margin-top:var(--sp-2)}
/* owner, 31 October: on the account page the cancel is a small text link in the
   card's lower right corner, not a big button. Plain words, underlined,
   --ink-soft (normal secondary contrast), 44 px tall, the site's focus ring. */
details.confirm-corner{margin-top:var(--sp-3);text-align:right}
details.confirm-corner .confirm-box{text-align:left}
summary.link-cancel{align-items:center;min-height:var(--touch);padding:0 var(--sp-h);cursor:pointer;
  font:400 var(--fs-2)/1.3 var(--font-body);color:var(--ink-soft);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
summary.link-cancel:hover{color:var(--ink)}
summary.link-cancel:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus);border-radius:var(--r-ctl);color:var(--ink)}
details.confirm>summary{list-style:none;display:inline-flex}
details.confirm>summary::-webkit-details-marker{display:none}
details.confirm[open]>summary{display:none}
details.confirm .confirm-box{border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:var(--sp-2);background:var(--navy-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}

/* fill-in certification */
.cert{font-size:var(--fs-3)}
.cert ol{padding-left:1.3em}
.cert li{margin:var(--sp-2) 0}
.blank{display:inline-block;min-width:9em;border-bottom:1px solid currentColor;line-height:1.1}
.blank.wide{min-width:14em}
.sign-row{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));margin-top:var(--sp-4)}
.sign-row p{border-top:1px solid currentColor;padding-top:var(--sp-h);margin:0;font-size:var(--fs-2)}

/* the print view: the site's one light surface, printed as is */
.print-sheet{max-width:46em;margin:0 auto}
.print-sheet dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:var(--sp-1) var(--sp-3);margin:0}
.print-sheet dt{color:var(--paper-soft)}
.print-sheet dd{margin:0;min-width:0}
.print-sheet h2{font-size:var(--fs-4);margin:var(--sp-3) 0 var(--sp-1)}
.print-sheet .chip-ok{color:var(--ok-paper)}
@media (max-width:719px){.print-sheet dl{grid-template-columns:1fr;gap:2px 0}.print-sheet dd{margin-bottom:var(--sp-1)}}
@media print{
  .mock-banner{border-bottom:2px solid #000;color:#000;background:#fff}
  .no-print,.site-head,.site-foot,.skip-link{display:none !important}
  .receipt{background:#fff !important;color:#000 !important;border:1px solid #999 !important}
  .print-sheet dt,.receipt .meta{color:#333 !important}
  body{background:#fff !important}
}

.verdict-card .ring{margin-bottom:var(--sp-2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* cards in a grid sit level; the site's stacked-card margin is for columns only */
.cards>.card+.card{margin-top:0}
.hero-grid .btn+.btn{margin-left:var(--sp-1)}
@media (max-width:519px){.hero-grid .btn+.btn{margin:var(--sp-1) 0 0}}
.theme-toggle{white-space:nowrap}
/* plan cards: the cancel link sits in the true lower right corner even when cards differ in height */
.cards>.card:has(>details.confirm-corner){display:flex;flex-direction:column}
.cards>.card>details.confirm-corner{margin-top:auto;padding-top:var(--sp-3)}