/* ==========================================================================
   Brightoar — page-specific styles. Loaded AFTER site.css on: labs, process,
   about, contact, privacy, terms, accessibility, ai-disclosure and 404.
   Sections: 1 tokens · 2 to-be-confirmed marks · 3 step variants · 4 labs ·
   5 process · 6 about · 7 contact form · 8 legal prose · 9 404 · 10 responsive
   No inline styles anywhere (strict CSP). Motion stops under reduced motion
   because site.css forces `transition:none` there.
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root{
  --error:#b3261e;            /* 6.5:1 on white: error text and borders */
  --warn-bg:rgba(231,169,13,.16);
  --warn-line:#8a6100;
  --field-line:#737577;       /* >= 3:1 border for form controls */
}

/* Helper missing from site.css */
.muted-strong{color:var(--muted-strong)}

/* 2. Placeholders that still need confirming ------------------------------ */
mark.tbc{background:rgba(231,169,13,.18);color:var(--ink);padding:1px 5px;border-radius:5px;border-bottom:1px dashed var(--warn-line);font-style:normal;overflow-wrap:anywhere}

/* 3. Step variants (3 or 5 items; below 1024px they inherit site.css) ------ */
@media (min-width:1024px){
  .steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps-5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .steps-5>.step{grid-column:span 2}
  .steps-5>.step:nth-child(4),.steps-5>.step:nth-child(5){grid-column:span 3}
}

/* 4. Labs ----------------------------------------------------------------- */
.labs-grid .lab-card{height:100%}
.labs-grid .lab-card p{overflow-wrap:break-word}
.labs-grid .lab-mock{height:216px;display:grid;grid-template-rows:auto 1fr;gap:10px;align-content:start}
.lab-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:var(--muted-strong)}
.lab-bar .chip{min-height:22px;padding:1px 9px;font-size:12px}
.lab-body{display:grid;gap:8px;align-content:start;min-width:0}

/* 4a. Style catalog: the picked tile follows data-stage (0-5) */
.mk-style{--pick:#f2b3c6}
.mk-style[data-stage="0"]{--pick:#ebeced}
.mk-style[data-stage="1"]{--pick:#3b3f44}
.mk-style[data-stage="2"]{--pick:#f2b3c6}
.mk-style[data-stage="3"]{--pick:#8a18a8}
.mk-style[data-stage="4"]{--pick:#cfe3ff}
.mk-style[data-stage="5"]{--pick:#d6f0d3}
.mk-style .swatches{height:70px;grid-template-rows:repeat(2,minmax(0,1fr))}
.mk-style .swatches i{transition:outline-color var(--dur) var(--ease),transform var(--dur) var(--ease-bounce);outline:2px solid transparent;outline-offset:2px}
.mk-style[data-stage="0"] .swatches i:nth-child(1),
.mk-style[data-stage="1"] .swatches i:nth-child(2),
.mk-style[data-stage="2"] .swatches i:nth-child(3),
.mk-style[data-stage="3"] .swatches i:nth-child(4),
.mk-style[data-stage="4"] .swatches i:nth-child(5),
.mk-style[data-stage="5"] .swatches i:nth-child(6){outline-color:var(--brand);transform:scale(1.04)}
.pv{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:14px 30px;gap:6px;padding:8px;border-radius:10px;background:#fff;border:1px solid var(--line-soft)}
.pv b{border-radius:5px;background:var(--pick);transition:background-color var(--dur-slow) var(--ease)}
.pv .pv-head{grid-column:1/-1}
.pv .pv-side{opacity:.55}

/* 4b. Signal watcher: rows 1-2 scanned, row 3 flagged, then the alert */
.sig-feed{display:grid;gap:8px}
.mk-sig .feed-post{padding:6px 10px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mk-sig .feed-post i,.mk-sig .feed-post b{transition:background-color var(--dur) var(--ease)}
.mk-sig.st-1 .feed-post:nth-child(1),
.mk-sig.st-2 .feed-post:nth-child(2){border-color:var(--line)}
.mk-sig.st-1 .feed-post:nth-child(1) i,.mk-sig.st-1 .feed-post:nth-child(1) b,
.mk-sig.st-2 .feed-post:nth-child(2) i,.mk-sig.st-2 .feed-post:nth-child(2) b{background:#b3b6ba}
.mk-sig.st-3 .feed-post:nth-child(3){border-color:rgba(243,26,124,.55);box-shadow:0 0 0 3px var(--brand-tint)}
.mk-sig.st-3 .feed-post:nth-child(3) i{background:var(--brand)}
.mk-sig.st-3 .feed-post:nth-child(3) b{background:rgba(243,26,124,.35)}
.sig-alert{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-bounce)}
.sig-alert svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-sig.st-4 .sig-alert{opacity:1;transform:none}

/* 4c. Daily briefing: sources light up, then the summary lines fill in */
.bf-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--muted-strong)}
.bf-src{display:flex;gap:5px}
.bf-src i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color var(--dur) var(--ease)}
.mk-brief.st-1 .bf-src i:nth-child(-n+4),
.mk-brief.st-2 .bf-src i:nth-child(-n+8),
.mk-brief.st-3 .bf-src i:nth-child(-n+12),
.mk-brief.st-4 .bf-src i:nth-child(-n+16){background:var(--brand)}
.bf-line{display:flex;align-items:center;gap:8px;opacity:.4;transition:opacity var(--dur) var(--ease)}
.bf-line::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.bf-line b{display:block;height:8px;border-radius:4px;background:var(--line);transform:scaleX(.15);transform-origin:0 50%;transition:transform var(--dur-slow) var(--ease)}
.bf-line .w1{width:92%}
.bf-line .w2{width:78%}
.bf-line .w3{width:86%}
.bf-line .w4{width:60%}
.mk-brief.st-1 .bf-line.l1,.mk-brief.st-2 .bf-line.l2,.mk-brief.st-3 .bf-line.l3,.mk-brief.st-4 .bf-line.l4{opacity:1}
.mk-brief.st-1 .bf-line.l1 b,.mk-brief.st-2 .bf-line.l2 b,.mk-brief.st-3 .bf-line.l3 b,.mk-brief.st-4 .bf-line.l4 b{transform:none}

/* 4d. Voice assistant: voice note, local transcription, text reply, audio reply */
.vc{gap:6px}
.vc-row{display:flex;opacity:0;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-bounce)}
.vc-out{justify-content:flex-end}
.vc-bubble{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:5px 12px;border-radius:14px;background:#fff;border:1px solid var(--line-soft);color:var(--ink)}
.vc-out .vc-bubble{background:var(--ink);color:#fff;border-color:var(--ink)}
.vc-play{flex:none;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.vc-wave{display:inline-flex;align-items:center;gap:3px;height:16px}
.vc-wave i{width:3px;height:9px;border-radius:2px;background:currentColor;opacity:.8}
.vc-wave i:nth-child(3n){height:14px}
.vc-wave i:nth-child(4n){height:6px}
.vc-wave i:nth-child(5n){height:12px}
.vc-reply .vc-bubble{display:grid;gap:4px;min-width:110px}
.vc-reply .vc-bubble b{display:block;height:6px;border-radius:3px;background:var(--line)}
.vc-reply .vc-bubble b+b{width:60%}
.vc-tag{display:inline-flex;align-items:center;gap:6px;justify-self:end;font-size:12px;font-weight:600;color:var(--muted-strong);opacity:0;transition:opacity var(--dur) var(--ease)}
.vc-tag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-voice.st-1 .vc-out,.mk-voice.st-3 .vc-reply,.mk-voice.st-4 .vc-audio{opacity:1;transform:none}
.mk-voice.st-2 .vc-tag{opacity:1}

/* 4e. Department agents: work is handed along, then a person approves */
.ag-flow{display:flex;align-items:center;gap:4px}
.ag-node{flex:none;padding:8px 7px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted-strong);font-size:11px;font-weight:600;line-height:1.2;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ag-link{flex:1 1 6px;min-width:6px;height:2px;border-radius:2px;background:var(--line);transition:background-color var(--dur) var(--ease)}
.mk-agents.st-1 .ag-node.n1,.mk-agents.st-2 .ag-node.n2,.mk-agents.st-3 .ag-node.n3,.mk-agents.st-4 .ag-node.n4{background:var(--ink);border-color:var(--ink);color:#fff}
.mk-agents.st-2 .ag-link.k1,.mk-agents.st-3 .ag-link.k2,.mk-agents.st-4 .ag-link.k3{background:var(--brand)}
.ag-gate{display:grid;justify-items:start;margin-top:10px}
.ag-gate>*{grid-area:1/1;opacity:0;transition:opacity var(--dur) var(--ease)}
.mk-agents.st-3 .ag-pending{opacity:1}
.mk-agents.st-4 .ag-pending{opacity:0}
.mk-agents.st-4 .ag-ok{opacity:1}

/* 4f. Lighter version below 768px (labs.js adds .is-lite): fewer moving parts */
.lab-mock.is-lite .bf-src{display:none}
.lab-mock.is-lite .swatches i{transition:none}

/* 5. Process -------------------------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:center}
.split .section-head{margin-bottom:0}
.sec-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sec-list .card{display:grid;gap:12px;align-content:start;font-size:15px;color:var(--muted-strong)}
.sec-list .card strong{display:block;color:var(--ink);font-size:17px;line-height:1.3;margin-bottom:4px}
.where-p a{display:inline-flex;align-items:center;min-height:44px}

/* 6. About ---------------------------------------------------------------- */
.about-company{max-width:720px}

/* 7. Contact form --------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start}
.contact-intro{display:grid;gap:16px;position:sticky;top:calc(var(--header-h) + 24px)}
.contact-intro p{color:var(--muted-strong)}
.form-card{padding:clamp(22px,3vw,36px)}
.form{display:grid;gap:20px}
.form-title{margin:0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field label{font-size:15px;font-weight:600;line-height:1.3}
.field .req{color:var(--muted-strong);font-weight:500}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea{display:block;width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--field-line);border-radius:12px;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.field-error{color:var(--error);font-size:14px;font-weight:500;line-height:1.4}
.field-error:empty{display:none}
.field-error::before{content:attr(data-prefix);font-weight:600}
.check{position:relative;min-height:44px}
.check input{position:absolute;left:0;top:10px;width:24px;height:24px;margin:0;accent-color:var(--ink);cursor:pointer}
.check label{display:flex;align-items:center;min-height:44px;padding:8px 0 8px 40px;font-size:15px;font-weight:500;line-height:1.35;cursor:pointer}
.check .field-error{margin-top:2px;padding-left:40px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--ink);font-size:15px;font-weight:500;line-height:1.45}
.form-note svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.form-actions{display:flex;flex-wrap:wrap;gap:12px}
.form-summary{padding:12px 16px;border-radius:12px;border:2px solid var(--error);color:var(--error);font-size:15px;font-weight:600;line-height:1.4}
.form-summary:empty{display:none}
.form-status{border-radius:12px;font-size:15px;font-weight:600;line-height:1.4}
.form-status:not(:empty){padding:14px 16px;background:var(--ok-bg);color:var(--ok-ink)}
.form-status.is-error:not(:empty){background:var(--bg);border:2px solid var(--error);color:var(--error)}
.form button[type="submit"]:disabled{opacity:.6;cursor:progress}

/* 8. Legal prose ---------------------------------------------------------- */
.draft-banner{background:var(--warn-bg);border-bottom:2px solid var(--warn-line);color:var(--ink)}
.draft-banner .container{display:flex;align-items:center;gap:12px;min-height:56px;padding-block:12px}
.draft-banner svg{flex:none;width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.draft-banner p{font-size:16px;font-weight:600;letter-spacing:.01em}
.legal-meta{font-size:15px;color:var(--muted-strong)}
.legal-section{padding-top:clamp(8px,2vw,24px)}
.legal-layout{display:grid;gap:28px}
.prose-legal{max-width:70ch;gap:14px;font-size:16px;line-height:1.65;overflow-wrap:break-word}
.prose-legal h2{margin-top:22px;font-size:24px;line-height:1.25}
.prose-legal h3{margin-top:8px;color:var(--ink);font-size:18px;font-weight:600;line-height:1.3}
.prose-legal>h2:first-child{margin-top:0}
.prose-legal ul{display:grid;gap:8px;padding-left:1.3em;list-style:disc}
.prose-legal li::marker{color:var(--ink)}
.prose-legal strong{color:var(--ink);font-weight:600}
.prose-legal a{text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--brand)}
.table-wrap{max-width:100%;overflow-x:auto}
.toc{padding:6px 16px 10px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-soft)}
.toc summary{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;cursor:pointer}
.toc ul{display:grid;gap:0;margin:0}
.toc a{display:flex;align-items:center;min-height:44px;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none}
.toc a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand)}

/* 9. 404 ------------------------------------------------------------------ */
.btn-list{display:flex;flex-wrap:wrap;gap:12px}
.btn-list li{display:flex}

/* 10. Responsive ---------------------------------------------------------- */
@media (min-width:900px){
  .legal-layout.has-toc{grid-template-columns:minmax(0,270px) minmax(0,70ch);gap:56px;align-items:start}
  .toc{position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 32px);overflow:auto}
}
@media (max-width:1023px){
  .sec-list{grid-template-columns:1fr}
}
@media (max-width:899px){
  .split,.contact-grid{grid-template-columns:1fr}
  .contact-intro{position:static}
}
@media (max-width:767px){
  .form-grid{grid-template-columns:1fr}
  .form-actions .btn{width:100%}
  .btn-list li,.btn-list .btn{width:100%}
  .prose-legal h2{font-size:22px}
}

/* Reduced motion: nothing hidden, everything in its final state (labs.js also
   writes the final stage). site.css already removes animation and transition. */
@media (prefers-reduced-motion:reduce){
  .sig-alert,.vc-row{opacity:1;transform:none}
  .vc-tag,.ag-ok{opacity:1}
  .ag-pending{opacity:0}
}