/* The `hidden` attribute is UA-level `display:none`, and ANY author `display`
   declaration outranks it -- so `.ask{display:flex}` below kept the panel on
   screen after `panel.hidden = true`. The X fired, the state changed, and
   nothing moved. One rule, before everything, so no future `display` can
   silently defeat a hidden attribute again. */
[hidden]{display:none!important}

*{box-sizing:border-box}
body{margin:0;background:#0f1216;color:#e8eaed;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 80px}
h1{font-size:24px;margin:0 0 4px}
h2{font-size:13px;margin:30px 0 10px;color:#9fb3c8;text-transform:uppercase;letter-spacing:.08em}
.sub{color:#8b98a5;font-size:14px;margin-bottom:22px}
a{color:#7cb0ff}
label{display:block;font-size:13px;color:#9fb3c8;margin:16px 0 6px;font-weight:600}
input,textarea,select{width:100%;background:#161b22;border:1px solid #262e38;color:#e8eaed;border-radius:9px;padding:12px;font:inherit;font-size:16px}
textarea{min-height:82px;resize:vertical}
.hint{color:#66727e;font-size:12.5px;margin-top:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:10px;font:inherit;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none}
.btn--primary{background:#2563eb;color:#fff;width:100%;margin-top:22px}
.btn--small{min-height:36px;padding:6px 12px;font-size:13px;background:#1b2129;border-color:#2b3541;color:#cfd8e3}
.card{background:#161b22;border:1px solid #222a34;border-radius:12px;padding:15px;margin:11px 0}
.card h3{margin:0 0 6px;font-size:16.5px}
.meta{color:#66727e;font-size:12.5px}
.field{margin-top:9px;font-size:14.5px}
.field b{color:#9fb3c8;font-weight:600}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.s-new{background:#2d3748;color:#cbd5e0}
.s-looking{background:#78350f;color:#fde68a}
.s-doing{background:#14532d;color:#86efac}
.s-not_doing{background:#4c1d24;color:#fca5a5}
.s-later{background:#1e3a5f;color:#93c5fd}
.note{background:#1b2129;border-left:3px solid #ffb020;padding:12px 14px;border-radius:0 9px 9px 0;font-size:14px;color:#c7d0da;margin:16px 0}
.ok{border-left-color:#3ddc84}
.foot{color:#66727e;font-size:12.5px;margin-top:36px;line-height:1.7}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.empty{color:#66727e;padding:22px 0}
.back{display:inline-block;color:#7cb0ff;text-decoration:none;font-size:14px;font-weight:600;margin-bottom:10px}
.back:hover{text-decoration:underline}

/* Brand. Colours sampled from the logo file itself, never guessed off a screenshot:
   coral #f16164 and blue #3b4fa2 are the two real inks in it. */
:root{--evo-coral:#f16164;--evo-blue:#3b4fa2}
.brand{display:block;margin:0 0 14px}
.brand img{width:220px;height:auto;max-width:62%}
h1{border-bottom:2px solid var(--evo-coral);padding-bottom:9px}
.btn--primary{background:var(--evo-coral)}
a{color:#8fa6ea}

/* The meter. Counted from the steps, so it falls as readily as it rises. */
.meter{height:11px;background:#0e1319;border:1px solid #262e38;border-radius:99px;overflow:hidden;margin:12px 0 7px}
.meter__fill{height:100%;border-radius:99px;transition:width .35s ease}
.meter__fill--low{background:var(--evo-coral)}
.meter__fill--half{background:linear-gradient(90deg,var(--evo-coral),#8fa6ea)}
.meter__fill--done{background:#3ddc84}
.step{display:block;padding:7px 2px;font-size:14.5px;color:#cfd8e3;cursor:pointer;border-bottom:1px solid #1b2129}
.step:last-of-type{border-bottom:none}
.step input{width:auto;margin-right:9px;vertical-align:-1px}
.step--done{color:#66727e;text-decoration:line-through}

/* --- 2026-08-27: the project's SHAPE. Operator: "make it so when someone is on here they can
   truly see the project and it's shape ... the main page should feel and work the same." Every
   rule below is layout for a section that appears on EVERY project, so the page is learned once. */
.topmeter{background:#161b22;border:1px solid #222a34;border-radius:12px;padding:14px 15px;margin:0 0 18px}
.topmeter__head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#9fb3c8;font-weight:600}
.topmeter__pct{font-size:24px;font-weight:700;color:#e6edf3}
.topmeter .meter{margin:9px 0 6px}
h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:#7cb0ff;margin:30px 0 10px;font-weight:700}
.purpose{background:#161b22;border:1px solid #222a34;border-left:3px solid var(--evo-blue);border-radius:0 12px 12px 0;padding:15px;font-size:15px;line-height:1.6;color:#c7d0da}
/* The one slot whose CONTENT differs per project while its frame does not. */
.spotlight{background:#1b1620;border:1px solid #3a2b33;border-left:3px solid var(--evo-coral);border-radius:0 12px 12px 0;padding:15px;font-size:15px;line-height:1.6;color:#e4d6dc;margin:11px 0}
.spotlight b{color:#ffb3b5}
.decisions{list-style:none;counter-reset:d;padding:0;margin:0}
.decisions__item{counter-increment:d;position:relative;background:#161b22;border:1px solid #222a34;border-radius:12px;padding:14px 15px 14px 52px;margin:9px 0}
.decisions__item::before{content:counter(d);position:absolute;left:14px;top:13px;width:24px;height:24px;border-radius:99px;background:var(--evo-blue);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.decisions__text{font-size:15px;color:#e6edf3;font-weight:600;line-height:1.45}
.charts{display:flex;flex-wrap:wrap;gap:14px}
.chart{display:flex;align-items:center;gap:13px;background:#161b22;border:1px solid #222a34;border-radius:12px;padding:14px;flex:1 1 300px}
.legend__title{font-size:13px;font-weight:700;color:#9fb3c8;margin-bottom:7px}
.legend__row{font-size:13.5px;color:#c7d0da;padding:2px 0}
.legend__row b{color:#e6edf3;margin-left:3px}
.legend__dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:0}
.files{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.file{display:flex;flex-direction:column;gap:4px;width:130px;background:#161b22;border:1px solid #222a34;border-radius:10px;padding:9px;text-decoration:none;color:#cfd8e3;font-size:12.5px}
.file:hover{border-color:#3a4553}
.file__thumb{width:100%;height:78px;object-fit:cover;border-radius:6px;background:#0e1319}
.file__icon{display:flex;align-items:center;justify-content:center;height:78px;border-radius:6px;background:#0e1319;color:#66727e;font-weight:700;font-size:12px;letter-spacing:.08em}
.file__name{word-break:break-word;line-height:1.3}
input[type=file]{width:100%;padding:11px;background:#0e1319;border:1px solid #262e38;border-radius:9px;color:#cfd8e3;font:inherit;font-size:14px}

/* The purpose accordion. Native <details> — opens without script, keyboard-operable for free. */
.acc{background:#161b22;border:1px solid #222a34;border-radius:12px;margin:10px 0 0}
.acc__sum{cursor:pointer;padding:13px 15px;font-size:13.5px;font-weight:600;color:#7cb0ff;list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;box-sizing:border-box}
.acc__sum::-webkit-details-marker{display:none}
.acc__sum::before{content:"▸";font-size:12px;transition:transform .18s ease}
.acc[open] .acc__sum::before{transform:rotate(90deg)}
.acc__sum:hover{color:#a8ccff}
.acc__body{padding:2px 15px 15px;border-top:1px solid #222a34}
.acc__body h4{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:#9fb3c8}
.acc__body h4:first-child{margin-top:12px}
.acc__body p{margin:0 0 9px;font-size:14.5px;line-height:1.62;color:#c7d0da}
/* The per-project brainstorm link sits with the section it belongs to, not in global navigation. */
.sublink{display:inline-block;margin:2px 0 0;color:#7cb0ff;text-decoration:none;font-size:13.5px;font-weight:600}
.sublink:hover{text-decoration:underline}

/* Comments on a decision. Indented under it so the thread reads as belonging to that decision. */
.dcomments{margin:10px 0 0;border-left:2px solid #2b3541;padding-left:11px}
.dcomment{padding:7px 0;border-bottom:1px solid #1b2129}
.dcomment:last-child{border-bottom:none}
.dcomment__text{font-size:14px;line-height:1.55;color:#c7d0da}

/* --- 2026-08-27: the working tools. Decision map, timeline, people, whiteboard. --- */
/* The map is a FLOW, not a node canvas — readable at any width, reads like the argument it is. */
.map__row{display:flex;gap:0;flex-direction:column;margin:0 0 6px}
.map__node{display:flex;gap:11px;align-items:flex-start;background:#161b22;border:1px solid #222a34;border-radius:12px;padding:13px 15px}
.map__num{flex:0 0 auto;width:25px;height:25px;border-radius:99px;background:var(--evo-blue);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.map__text{font-size:14.5px;color:#e6edf3;font-weight:600;line-height:1.45}
.map__rests{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;color:#8b98a5;background:#0e1319;border:1px solid #262e38;border-radius:99px;padding:2px 8px;vertical-align:1px}
.map__work{margin:0 0 0 27px;border-left:2px solid #2b3541;padding:6px 0 6px 14px}
.map__step{font-size:14px;color:#cfd8e3;padding:4px 0;display:flex;gap:8px;align-items:baseline}
.map__step--done{color:#66727e;text-decoration:line-through}
.map__tick{color:#3ddc84;font-size:12px}
.map__step--done .map__tick{color:#66727e}
.map__none{font-size:13px;color:#66727e;padding:4px 0;font-style:italic}
.map__orphans{margin-top:16px;background:#1b1620;border:1px solid #3a2b33;border-radius:12px;padding:13px 15px}
.map__orphanhead{font-size:13.5px;font-weight:700;color:#ffb3b5;margin-bottom:7px}
/* Timeline: what is DONE, what is NEXT, what is waiting. */
.tl{margin:0 0 16px}
.tl__goal{font-size:13.5px;font-weight:700;color:#9fb3c8;margin:0 0 8px}
.tl__item{position:relative;padding:7px 0 7px 22px;font-size:14.5px;color:#cfd8e3;border-left:2px solid #2b3541;margin-left:5px}
.tl__dot{position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:99px;background:#2b3541;border:2px solid #0d1117}
.tl__item--done{color:#66727e}
.tl__item--done .tl__dot{background:#3ddc84}
.tl__item--next{color:#e6edf3;font-weight:600}
.tl__item--next .tl__dot{background:var(--evo-coral);box-shadow:0 0 0 4px rgba(241,97,100,.18)}
.tl__item--wait{color:#8b98a5}
.tl__tag{margin-left:9px;font-size:10.5px;font-weight:700;letter-spacing:.07em;background:var(--evo-coral);color:#fff;border-radius:99px;padding:2px 8px}
/* People */
.people{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.person{display:flex;align-items:center;gap:9px;background:#161b22;border:1px solid #222a34;border-radius:99px;padding:6px 14px 6px 6px}
.person__av{width:30px;height:30px;border-radius:99px;background:var(--evo-blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.person__name{font-size:14px;color:#e6edf3;display:flex;flex-direction:column;line-height:1.25}
/* Whiteboard */
.stickies{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.sticky{flex:1 1 210px;max-width:340px;background:#161b22;border:1px solid #222a34;border-top:3px solid #7c8794;border-radius:9px;padding:11px 13px}
.sticky--question{border-top-color:#60a5fa}
.sticky--risk{border-top-color:var(--evo-coral)}
.sticky--win{border-top-color:#3ddc84}
.sticky__tone{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b98a5;margin-bottom:5px}
.sticky__text{font-size:14.5px;line-height:1.5;color:#e6edf3;margin-bottom:6px;white-space:pre-wrap}
.sticky__gone{margin-top:7px;font-size:12.5px;font-weight:600;color:#3ddc84}
select{width:100%;padding:12px;background:#0e1319;border:1px solid #262e38;border-radius:9px;color:#cfd8e3;font:inherit;font-size:15px;margin-bottom:4px}
.whoami{font-size:12.5px;color:#8b98a5;background:#161b22;border:1px solid #222a34;border-radius:99px;padding:7px 14px;margin:0 0 14px;display:inline-block}
.whoami b{color:#cfd8e3}
.whoami a{color:#7cb0ff;text-decoration:none}
.whoami a:hover{text-decoration:underline}
.auditlog{border-left:2px solid #2b3541;padding-left:13px}
.auditrow{padding:8px 0;border-bottom:1px solid #1b2129}
.auditrow:last-child{border-bottom:none}
.auditrow__what{font-size:13px;font-weight:700;color:#7cb0ff;font-family:ui-monospace,monospace}
.auditrow__who{font-size:13.5px;color:#cfd8e3;margin-left:7px}

/* ⭐ EVO UNDERWAY tagline — the product's message, directly under the brand on every page.
   Sized and coloured to sit BELOW the logo in the reading order without competing with the page
   <h1>: this is the thing people absorb, not the thing they act on. Muted, letter-spaced, and it
   wraps rather than truncating on a phone — the first client reads this board on phones in a
   building, not at a desk. */
.tagline {
  margin: -.35rem 0 1.15rem;
  font-size: .95rem;
  font-style: italic;
  letter-spacing: .02em;
  color: #9aa4b2;
  line-height: 1.35;
}
@media (max-width: 480px) { .tagline { font-size: .88rem; margin-bottom: .9rem; } }

/* GROUP QUESTIONS (A402).
   The AI is visually separable from the people on purpose: its interpretation and its opinion are
   bordered and tinted, the human answers are not. Somebody skimming must never mistake the model's
   view for a colleague's — that is the whole reason the opinion is withheld until you have answered. */
.qa__interp { border-left: 3px solid #60a5fa; }
.qa__answer { border-top: 1px solid #232833; padding: .6rem 0; }
.qa__answer--mine { border-left: 3px solid #3ddc84; padding-left: .6rem; }
.qa__body { white-space: pre-wrap; margin: .15rem 0 .3rem; }
.qa__ai { border-left: 3px solid #a78bfa; margin-top: .8rem; }
.qa__ai b { display: block; margin-bottom: .3rem; }

/* ═══ A408 — TABS · WHAT NEEDS YOU · ACCORDIONS ═══════════════════════════════════════════════
   Operator, 2026-08-31: "people need to deal with very little data up front ... for them to read
   the whole page in at one time it takes too long and it gets them off target."

   Everything here is in service of one rule: on arrival a person should see the tabs, the one thing
   that needs them, and a short list of labels. Nothing else competes. */

/* The tab strip. Sticky, because "locked" means it is still there when you have scrolled — the
   whole value of a pop-up is that consulting a chart never costs you your place, and a strip that
   scrolls away makes you go and find it first.
   Horizontally scrollable rather than wrapping: on a phone, wrapped tabs become two rows and eat
   the space the actual content needs. */
.tabs{position:sticky;top:0;z-index:40;display:flex;gap:.4rem;overflow-x:auto;
      /* Full-bleed across `.wrap`'s 16px padding. Without the negative margins the bar is 32px
         narrower than the page and content scrolls up through the gutters either side of it,
         which reads as a rendering fault rather than as a fixed bar. */
      margin:0 -16px .9rem;padding:.5rem 16px;background:#0f1216;
      border-bottom:1px solid #232833;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;background:#151a21;color:#cfd6e2;border:1px solid #262e38;border-radius:99px;
     padding:.42rem .85rem;font-size:.85rem;cursor:pointer;white-space:nowrap}
.tab:hover{border-color:var(--evo-coral);color:#fff}
.tab:active{transform:translateY(1px)}

/* The pop-ups. `dialog` gives Escape, focus trapping and an inert page for free. */
dialog.pop{width:min(860px,94vw);max-height:88vh;padding:0;border:1px solid #2a3340;border-radius:12px;
           background:#12161c;color:#e6eaf2;overflow:hidden}
dialog.pop::backdrop{background:rgba(0,0,0,.66)}
.pop__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
          padding:.7rem .9rem;border-bottom:1px solid #232833;position:sticky;top:0;background:#12161c}
.pop__body{padding:.9rem;overflow:auto;max-height:calc(88vh - 3.2rem)}

/* WHAT NEEDS YOU. The one loud thing on the page, and it is loud on purpose — it is the only
   region that is allowed to demand attention, which is what makes the rest able to stay quiet. */
.needs{border:1px solid #3a2f2f;border-left:4px solid var(--evo-coral);background:#171214;
       border-radius:10px;padding:.9rem 1rem;margin:0 0 1.1rem}
.needs--clear{border-color:#24352b;border-left-color:#3ddc84;background:#111614}
.needs__k{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#f0a6a8;
          display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.needs--clear .needs__k{color:#7fd6a2}
.needs__due{font-size:.72rem;letter-spacing:0;text-transform:none;color:#cfd6e2;
            border:1px solid #3a2f2f;border-radius:99px;padding:.05rem .5rem}
.needs__q{font-size:1.12rem;line-height:1.42;margin:.45rem 0 .7rem}
.needs__sub{color:#aab3c2;margin-top:.35rem}
.needs__ai{border-left:3px solid #60a5fa;padding-left:.6rem;margin:0 0 .7rem;color:#c3cbd8;font-size:.92rem}
.needs__form textarea{width:100%;box-sizing:border-box}
.needs__more{margin-top:.6rem;font-size:.84rem;color:#8f99a8}

/* The accordions. One line each until opened. `list-style:none` + our own caret because the
   native triangle sits at a different offset in every browser and this list must look like a list. */
.acc{border-bottom:1px solid #1e242c}
.acc>summary{cursor:pointer;padding:.72rem .2rem;list-style:none;display:flex;align-items:center;
             gap:.55rem;font-weight:600;color:#dfe5ee}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"";flex:0 0 auto;width:0;height:0;
  border-left:5px solid #6b7688;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease}
.acc[open]>summary::before{transform:rotate(90deg)}
.acc>summary:hover{color:#fff}
.acc__n{font-weight:400;font-size:.78rem;color:#8f99a8;background:#151a21;border:1px solid #262e38;
        border-radius:99px;padding:.02rem .45rem}
.acc__body{padding:.2rem .2rem 1rem}

@media (max-width:480px){
  .tab{font-size:.8rem;padding:.38rem .7rem}
  .needs__q{font-size:1.02rem}
  dialog.pop{width:96vw;max-height:92vh}
  .pop__body{max-height:calc(92vh - 3.2rem)}
}

/* ═══ A410 — THE STEP DRIVER ═══════════════════════════════════════════════════════════════════
   Operator: "it should pull the person along the process ... go through the questions one at a
   time with him so that it gets done."
   One ask on screen, its action under it, and Help within reach but not in the way. */
.drv{border:1px solid #2a3340;border-left:4px solid #8fa6ea;background:#12161c;
     border-radius:10px;padding:.95rem 1rem;margin:0 0 1rem}
.drv--clear{border-left-color:#3ddc84}
.drv__k{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#8fa6ea;
        display:flex;align-items:center;gap:.6rem}
.drv--clear .drv__k{color:#7fd6a2}
.drv__n{letter-spacing:0;text-transform:none;color:#8f99a8;border:1px solid #262e38;
        border-radius:99px;padding:.02rem .5rem;font-size:.72rem}
.drv__goal{color:#8f99a8;font-size:.86rem;margin:.35rem 0 .1rem}
.drv__ask{font-size:1.12rem;line-height:1.45;margin:.15rem 0 .75rem}
.drv__sub{color:#aab3c2;margin-top:.35rem}
/* Help sits BESIDE the ask, quiet until wanted. A person who knows the answer must not have to
   read past an explanation to give it; a person who does not must not have to hunt. */
.drv__helpbtn{margin:0 0 .7rem}
.drv__help{border-left:3px solid #a78bfa;padding:.5rem .7rem;margin:0 0 .8rem;
           background:#151726;border-radius:0 6px 6px 0;color:#c9d1de;font-size:.93rem;
           white-space:pre-wrap}
.drv__form textarea,.drv__form input[type=text]{width:100%;box-sizing:border-box;margin-bottom:.5rem}
.drv__form input[type=file]{display:block;margin:0 0 .6rem;color:#cfd6e2}
.drv__more{margin-top:.7rem;font-size:.84rem;color:#8f99a8}
@media (max-width:480px){ .drv__ask{font-size:1.02rem} }

/* The product name, in words. It lived only in the logo's alt text until 2026-08-31 — visible to
   nobody whose images load. Sized to read as the name rather than compete with the page's own h1. */
/* Mark and name on ONE line (operator, 2026-08-31). `align-items:center` rather than baseline —
   the logo is an image with its own internal padding, so baseline alignment sits the text low. */
.brand{display:flex;align-items:center;gap:.7rem;margin:0 0 14px;text-decoration:none}
.brand img{flex:0 0 auto}
.brand__name{font-size:1.32rem;font-weight:700;letter-spacing:.01em;color:#e8eaed;line-height:1.1}
.brand:hover .brand__name{color:#fff}
/* On a narrow phone the 220px mark plus the name will not fit; the mark shrinks rather than the
   name wrapping mid-word, because the name is the thing that has to stay readable. */
@media (max-width:480px){
  .brand{gap:.55rem}
  .brand img{width:150px}
  .brand__name{font-size:1.08rem}
}

/* A414 — the door and the written guide, next to the ask. */
.drv__do{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .8rem}
.drv__door{text-decoration:none}
.drv__guide{font-size:.88rem;color:#8fa6ea;text-decoration:underline}
.drv__guide:hover{color:#fff}
@media (max-width:480px){ .drv__do{gap:.5rem} .drv__door{width:100%;text-align:center} }

/* A415 — "Not now". Putting a step off is a legitimate move, so it gets a real, tappable control
   (48px like every other button, because this is used on a phone) — but a QUIET one. It sits under
   the primary action, not beside it: a person who can do the step should never have to pick past an
   escape hatch to reach the thing they came to do. Ghost, not grey-disabled — a control that looks
   switched off is one people do not try, and that is how they end up typing "I'll do this later"
   into an answer box instead. */
.btn--quiet{background:transparent;border-color:#2b3541;color:#93a0b1;width:100%;margin-top:.55rem;
  font-weight:500}
.btn--quiet:hover{border-color:#3a4756;color:#cfd8e3}
.drv__defer{font-size:.92rem}
/* The all-put-off state. Amber, deliberately NOT the green of drv--clear: nothing here is finished,
   it is postponed, and the colour must not congratulate somebody for an empty queue they created by
   deferring. */
.drv--later{border-left-color:#e0a458}
.drv--later .drv__k{color:#e0a458}

/* ⛵ EVO UNDERWAY product mark (operator, 2026-09-01: "make the symbol for that product a
   sailboat"). The old mark was the wide Evo Pro Tech wordmark at 220px; this one is square,
   so it needs its own rule or the 62% max-width above shrinks it to nothing on a phone. */
.brand__mark { width: 56px; height: 56px; max-width: none; flex: 0 0 auto; }
@media (max-width: 480px) { .brand__mark { width: 44px; height: 44px; } }

/* 2026-09-03 — the masthead: Evo Pro Tech small and top-left, Underway large and centred.
   Operator: "the evo logo at the top of the page on the left then the underway logo larger in
   the center."
   The house mark is taken OUT OF FLOW (absolute) so the product mark centres on the PAGE rather
   than on the space left over beside it — centring it in a flex row would push it visibly right
   of true centre, which is the kind of half-centred that looks like an accident. */
.masthead{position:relative;display:flex;justify-content:center;align-items:flex-start;
          min-height:64px;margin:0 0 18px;padding-top:4px}
.masthead__house{position:absolute;left:0;top:0;width:132px;max-width:34%;height:auto;opacity:.9}
.masthead__product{display:block;line-height:0}
.masthead__product img{width:320px;max-width:100%;height:auto}

/* On a phone the two would overlap, so the house mark returns to the flow and the pair stacks. */
@media (max-width:560px){
  .masthead{flex-direction:column;align-items:center;gap:12px}
  .masthead__house{position:static;width:118px;max-width:44%}
  .masthead__product img{width:250px}
}

/* ASK — the question dock.
   Fixed to the corner rather than placed in the column, because the board is one
   760px column and a real sidebar would either squeeze it or vanish on a phone.
   The dock is the same object at every width: a button that opens a panel.
   Anchored BOTTOM-RIGHT and above the safe-area inset, so it clears the iOS home
   indicator instead of sitting under it. */
.ask-open{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;
  min-height:52px;padding:13px 20px;border:none;border-radius:99px;cursor:pointer;
  background:var(--evo-coral);color:#fff;font:inherit;font-weight:700;font-size:15px;
  box-shadow:0 6px 22px rgba(0,0,0,.45)}
.ask-open:hover{filter:brightness(1.07)}

.ask{position:fixed;right:0;bottom:0;z-index:50;width:min(420px,100vw);
  max-height:min(80vh,640px);display:flex;flex-direction:column;
  background:#12171d;border:1px solid #262e38;border-radius:14px 14px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.5)}
@media(min-width:520px){.ask{right:16px;bottom:16px;border-radius:14px}}
.ask__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid #222a34}
.ask__head b{font-size:15px}
.ask__close{background:none;border:none;color:#8b98a5;font-size:24px;line-height:1;
  cursor:pointer;padding:4px 8px;min-height:44px;min-width:44px}
.ask__log{flex:1;overflow-y:auto;padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.ask__hello{color:#8b98a5;font-size:13.5px;line-height:1.6}
.ask__msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:14.5px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere}
.ask__msg--you{align-self:flex-end;background:var(--evo-blue);color:#fff;border-bottom-right-radius:4px}
.ask__msg--bot{align-self:flex-start;background:#1b2129;color:#dbe3ec;border-bottom-left-radius:4px}
/* An answer the assistant could not ground gets a visible edge. It is not an
   error style — the sentence is honest and useful — it is a marker that a person
   is now involved, so nobody mistakes "I don't know" for a dead end. */
.ask__msg--unsure{border-left:3px solid #ffb020}
.ask__flag{font-size:12px;color:#ffb020;margin-top:6px}
.ask__foot{padding:11px 15px;border-top:1px solid #222a34}
.ask__foot textarea{min-height:60px;font-size:16px}
.ask__note{color:#66727e;font-size:11.5px;margin-top:8px;line-height:1.5}

/* A human answer outranks the assistant's, and the styling has to say so at a
   glance: the person's reply is the bright one and carries a name; the
   assistant's is kept below it, dimmed, because what it said is evidence about
   it and deleting that would delete the only record of how it behaved. */
.ask__msg--human{background:#14301f;color:#dff3e6;border-left:3px solid #3ddc84}
.ask__by{font-size:11.5px;color:#7fcf9f;margin-top:6px}
.ask__msg--superseded{opacity:.5;font-size:13.5px}