/* How it's checked (/standards/) only. Every class carries the std- prefix.
   Tokens come from styles.css. */

.std-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Type */
.std-h1{font-size:68px;font-weight:600;letter-spacing:-.03em;line-height:1.04;max-width:16ch;margin:0 0 22px;text-wrap:balance}
.std-h2{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 14px;text-wrap:balance}
.std-lead{font-size:20px;line-height:1.55;max-width:56ch;margin:0;text-wrap:pretty}
.std-intro{font-size:16px;line-height:1.55;color:var(--muted);max-width:64ch;margin:0 0 36px}

/* Sections */
.std-hero{padding-top:96px;padding-bottom:48px}
.std-hero .kicker{margin-bottom:18px}
.std-sec{padding-top:96px;padding-bottom:96px}
.std-sec--first{padding-top:0}
.std-sec .kicker{margin-bottom:12px}
.std-tint{background:color-mix(in oklab,var(--ink) 4%,var(--paper))}

/* 1 · See what it catches */
.std-catch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 64px;align-items:end;margin-bottom:24px}
.std-catch-head .std-h2{margin:0}
.std-catch-head p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}

.std-break{margin:0}
.std-break-cap{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.std-break-frame{background:var(--ink);color:var(--paper);border-radius:6px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}

/* Controls */
.std-break-ctl{display:flex;flex-direction:column;gap:14px;min-width:0}
.std-break-k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate2)}
.std-break-note{margin:0;font-size:14px;line-height:1.5;color:var(--slate2)}
.std-faults{display:flex;flex-direction:column;gap:8px}
.std-faults[hidden]{display:none}
.std-fault{display:flex;gap:10px;align-items:center;width:100%;min-height:44px;text-align:left;font-family:var(--sans);font-size:14px;line-height:1.3;padding:10px 12px;border-radius:3px;border:1px solid color-mix(in oklab,var(--paper) 30%,var(--ink));background:transparent;color:var(--paper);cursor:pointer;transition:background .12s linear,color .12s linear}
.std-fault:hover{background:color-mix(in oklab,var(--paper) 10%,var(--ink))}
.std-fault[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.std-fault-box{font-family:var(--mono);font-size:12px;flex:none}
.std-fault-box::before{content:"[ ]"}
.std-fault[aria-pressed="true"] .std-fault-box::before{content:"[x]"}

.std-status{border-radius:3px;padding:12px 14px;border:1px solid color-mix(in oklab,var(--paper) 30%,var(--ink));font-size:14px;line-height:1.45}
.std-status-t{font-weight:600;margin-bottom:4px}
.std-status-d{font-family:var(--mono);font-size:12px;color:var(--slate2)}
.std-status-d div+div{margin-top:2px}
.std-break.is-held .std-status{background:var(--paper);color:var(--ink)}
.std-break.is-held .std-status-d{color:var(--ink)}

/* The document */
.std-doc{container-type:inline-size;min-width:0;background:var(--paper);color:var(--ink);border-radius:6px;overflow:hidden}
/* The page grows to fit a passing document; only "six more items" pins it
   to one page and clips, so the overflow bar has something to cover. */
.std-doc-page{--std-page:640px;min-height:var(--std-page);padding:20px 16px;display:flex;flex-direction:column}
.std-break.is-overflow .std-doc-page{height:var(--std-page)}
.std-doc-head{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:flex-end;padding-bottom:14px;border-bottom:2px solid var(--slate);flex:none}
.std-doc-org{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.std-doc-title{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.std-doc-date{font-family:var(--mono);font-size:11px;color:var(--muted)}
.std-doc-body{flex:1 1 auto;min-height:0;overflow:hidden;position:relative}

.std-doc-table{display:block;width:100%;border-collapse:collapse;margin-top:10px}
.std-doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.std-doc-table tbody{display:block}
.std-doc-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"owner due" "action action" "quote quote";gap:3px 12px;padding:10px 0;border-top:1px solid var(--hairline);font-size:14px;line-height:1.4}
.std-doc-table th,.std-doc-table td{padding:0;text-align:left;font-weight:400;vertical-align:baseline}
.std-doc-table .std-o{grid-area:owner;font-weight:600}
.std-doc-table .std-a{grid-area:action}
.std-doc-table .std-d{grid-area:due;font-size:12px;color:var(--muted);text-align:right}
.std-doc-table .std-q{grid-area:quote;font-size:12px;color:var(--muted);font-style:italic}
.std-doc-table tr.std-extra{display:none}
.std-break.is-overflow .std-doc-table tr.std-extra{display:grid}

.std-doc-flag{margin-top:12px;padding:10px 12px;background:var(--ice);border-radius:3px;font-size:13px;line-height:1.4;display:flex;flex-wrap:wrap;gap:4px 16px}
.std-doc-flag-k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);padding-top:2px;width:96px;flex:none}
.std-doc-flag-t{flex:1 1 200px}
.std-doc-flag-t i{color:var(--muted)}
.std-doc-parked{margin:8px 0 0;font-size:12px;color:var(--muted)}

.std-doc-over{display:none;position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--paper);border-top:1px dashed var(--ink);align-items:center;justify-content:center;font-family:var(--mono);font-size:12px}
.std-break.is-overflow .std-doc-over{display:flex}

.std-doc-foot{flex:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;min-height:24px}
.std-pass{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:12px;color:var(--muted)}
.std-badge{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;background:var(--mint);color:var(--green);border-radius:3px;padding:3px 8px}
.std-held{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 8px;border-radius:3px}
.std-break.is-held .std-pass{display:none}
.std-break.is-held .std-held{display:inline-block}
.std-doc-n{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* A field each mistake changes: the original, or the broken version */
.std-bad{display:none}
.std-f .std-bad{outline:1px dashed var(--ink);outline-offset:3px}
.std-break.is-owner .std-f-owner .std-ok,
.std-break.is-quote .std-f-quote .std-ok,
.std-break.is-overflow .std-f-overflow .std-ok{display:none}
.std-break.is-owner .std-f-owner .std-bad,
.std-break.is-quote .std-f-quote .std-bad,
.std-break.is-overflow .std-f-overflow .std-bad{display:inline}

@container (min-width:560px){
  .std-doc-page{--std-page:520px;padding:24px 28px}
  .std-doc-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block}
  .std-doc-table tr{grid-template-columns:96px minmax(0,1fr) 120px minmax(0,1.25fr);grid-template-areas:"owner action due quote";gap:16px;padding:9px 0;font-size:13px}
  .std-doc-table thead tr{grid-template-areas:none;border-top:none;padding:10px 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .std-doc-table .std-d{font-size:13px;text-align:left}
}

@media (min-width:1080px){
  .std-break-frame{grid-template-columns:320px minmax(0,1fr);padding:24px}
  .std-break-frame .std-doc-page{--std-page:480px}
  .std-status{margin-top:auto}
}

/* 2 · Seven things */
.std-seven{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.std-seven li{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.std-seven-n{font-family:var(--mono);font-size:13px;color:var(--slate)}
.std-seven-t{font-size:17px;line-height:1.45}

/* 3 · Tested the way you'll use it */
.std-sec .std-h2.std-narrow{max-width:24ch}
.std-tests{border-top:1px solid var(--ink)}
.std-test{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;padding:20px 0;border-bottom:1px solid var(--hairline)}
.std-test h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.35;margin:0}
.std-test p{margin:0;font-size:16px;line-height:1.55}

/* 4 · Check it instead */
.std-ink{background:var(--ink);color:var(--paper)}
.std-ink .kicker{color:var(--slate2)}
.std-ink-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px}
.std-ink-grid .std-h2{margin:0}
.std-ink-body{display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.55}
.std-ink-body p{margin:0}
.std-ink-body .std-ink-sub{color:var(--slate2)}

/* 5 · Technical */
.std-techsec{padding-top:72px;padding-bottom:72px}
details.how.std-tech>summary{padding:18px 0;border-bottom:1px solid var(--hairline)}
details.how.std-tech[open]>summary{border-bottom-color:transparent}
.std-tech-s{display:flex;flex-direction:column;gap:4px}
.std-tech-t{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--ink)}
.std-tech-in{padding-top:16px;display:flex;flex-direction:column;gap:48px}
.std-tech-h{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 12px}
.std-tech-p{font-size:15px;line-height:1.55;color:var(--muted);max-width:72ch;margin:0 0 24px}
.std-quote{margin:0;padding:0 0 0 20px;border-left:2px solid var(--slate);max-width:72ch;font-size:18px;line-height:1.55;text-wrap:pretty}
.std-tech .spec .body{font-size:15px}
.std-tech-link{font-size:15px;margin:16px 0 0}

/* Phone and tablet */
@media (max-width:1024px){
  .std-seven{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .std-h1{font-size:40px}
  .std-h2{font-size:28px}
  .std-lead{font-size:17px}
  .std-hero{padding-top:56px;padding-bottom:32px}
  .std-sec{padding-top:56px;padding-bottom:56px}
  .std-sec--first{padding-top:0}
  .std-techsec{padding-top:48px;padding-bottom:48px}
  .std-catch-head,.std-ink-grid,.std-test{grid-template-columns:minmax(0,1fr)}
  .std-seven{grid-template-columns:minmax(0,1fr)}
  .std-quote{font-size:17px}
}