/* ASEOS Delivery Console styles - served as a file so the page needs no inline <style>. */
/* ============================================================ design tokens: Salesforce Lightning
   The console follows the Salesforce Lightning Design System (SLDS 2): the system font stack at a
   13px base, the SLDS palette (brand #0176d3, text #181818 / #444444, borders #c9c9c9 / #e5e5e5,
   page #f3f3f3), 0.25rem radii, 2rem buttons and inputs, and the SLDS component patterns (card,
   page header, vertical navigation, tabs, data table, badge, alert, path, progress indicator).
   Lightning Experience has no dark theme, so the console has none either.

   Token names are the console's own; the values are SLDS's. ACCENT is the brand colour ("selected,
   current, primary action"); OK, WARN and BAD are SLDS success, warning and error. */
:root{
  color-scheme:light;
  --bg:#f3f3f3; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f3f3;
  --line:#c9c9c9; --line-soft:#e5e5e5;
  --ink:#181818; --ink-2:#444444; --ink-3:#747474;
  --accent:#0176d3; --accent-hover:#014486; --accent-ink:#ffffff;
  --accent-soft:#eef4ff; --accent-line:#aacbff;
  --link:#0b5cab; --link-hover:#014486;
  --ok:#2e844a; --ok-soft:#ebf7e6; --ok-line:#91db8b;
  --info:#0176d3; --info-soft:#eef4ff; --info-line:#aacbff;
  --warn:#8c4b02; --warn-soft:#fef1ee; --warn-line:#fe9339; --warn-fill:#fe9339;
  --bad:#ba0517; --bad-soft:#fef1ee; --bad-line:#fe5c4c; --bad-text:#ea001e;
  --violet:#7526e3; --violet-soft:#f9f0ff; --violet-line:#d78ff0;
  --r:.25rem; --r-lg:.25rem; --r-sm:.125rem; --r-pill:15rem;
  --mono:Consolas,Menlo,Monaco,Courier,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --shadow-sm:0 2px 2px 0 rgba(0,0,0,.10);
  --shadow:0 2px 2px 0 rgba(0,0,0,.10);
  --shadow-lg:0 2px 3px 0 rgba(0,0,0,.16);
  --ring:0 0 3px #0176d3;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:.8125rem;line-height:1.5;-webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale}
a{color:var(--link);text-decoration:none}
a:hover,a:focus{color:var(--link-hover);text-decoration:underline}
h1,h2,h3{margin:0;font-weight:700;line-height:1.25;color:var(--ink)}
code,pre,.mono{font-family:var(--mono)}
code{font-size:.75rem;background:var(--panel-2);border:1px solid var(--line-soft);
     padding:0 .25rem;border-radius:var(--r);color:var(--ink)}
:focus-visible{outline:0;box-shadow:var(--ring)}
.hidden{display:none !important}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.grow{flex:1}
.row{display:flex;align-items:center;gap:.75rem}
.col{display:flex;flex-direction:column;gap:.75rem}
.wrap{flex-wrap:wrap}
.right{margin-left:auto}

/* ============================================================ controls: slds-button, slds-input */
button{font:inherit;font-size:.8125rem;line-height:1.875rem;color:var(--accent);background:var(--bg-2);
       border:1px solid var(--line);padding:0 1rem;border-radius:var(--r);cursor:pointer;font-weight:400;
       white-space:nowrap;transition:background .1s linear,border-color .1s linear,color .1s linear}
button:hover:not(:disabled){background:var(--panel-2);color:var(--accent-hover)}
button:active:not(:disabled){background:var(--line-soft);border-color:var(--line)}
button:focus-visible{outline:0;box-shadow:var(--ring)}
button:disabled{background:#fff;border-color:var(--line);color:#c9c9c9;cursor:default}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
button.primary:active:not(:disabled){background:#032d60;border-color:#032d60}
button.primary:disabled{background:#c9c9c9;border-color:#c9c9c9;color:#fff}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover:not(:disabled){background:var(--panel-2);border-color:transparent}
button.sm{line-height:1.5rem;padding:0 .75rem;font-size:.75rem}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
button.danger:hover:not(:disabled){background:#8e030f;border-color:#8e030f;color:#fff}
input,textarea,select{font:inherit;font-size:.8125rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:0 .75rem;width:100%;min-height:2rem;
  line-height:1.875rem;transition:border .1s linear,background-color .1s linear}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus,select:focus{outline:0;border-color:#1b96ff;background:#fff;box-shadow:var(--ring)}
input:disabled,textarea:disabled,select:disabled{background:var(--panel-2);border-color:var(--line);color:var(--ink-3)}
input[type=checkbox],input[type=radio]{width:1rem;height:1rem;min-height:0;padding:0;accent-color:var(--accent)}
textarea{resize:vertical;min-height:6rem;line-height:1.5;padding:.5rem .75rem}
textarea.doc{min-height:420px;font-family:var(--mono);font-size:.75rem}
label.fld{display:block;font-size:.75rem;color:var(--ink-2);margin-bottom:.125rem;padding-top:.25rem;font-weight:400}

/* ============================================================ surfaces: slds-card, slds-badge, slds-notify */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card .hd{padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.card .hd h2,.card .hd h3{font-size:1rem;font-weight:700}
.card .bd{padding:0 1rem 1rem}
.card .hd + .bd{padding-top:.25rem}
.card > .bd:first-child{padding-top:1rem}
.card .ft{padding:.75rem 1rem;border-top:1px solid var(--line-soft);background:var(--panel);
          border-radius:0 0 var(--r) var(--r)}

.pill{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:var(--r-pill);
      font-size:.75rem;font-weight:700;line-height:normal;white-space:nowrap;
      border:1px solid transparent;background:#e5e5e5;color:var(--ink)}
.pill.ok{background:var(--ok);color:#fff}
.pill.info{background:#e5e5e5;color:var(--ink)}   /* slds-badge (default) */
.pill.warn{background:var(--warn-fill);color:var(--ink)}
.pill.bad{background:var(--bad);color:#fff}
.pill.idle{background:#fff;color:var(--ink);border-color:var(--line)}
.pill.violet{background:var(--violet);color:#fff}
.chip{display:inline-block;padding:0 .5rem;border-radius:var(--r);background:var(--panel-2);
      border:1px solid var(--line-soft);font-family:var(--mono);font-size:.75rem;line-height:1.5rem;color:var(--ink-2)}
.banner{padding:.75rem 1rem;border-radius:var(--r);font-size:.8125rem;margin-bottom:1rem;
        border:1px solid transparent}
.banner.err{background:var(--bad);color:#fff}
.banner.ok{background:var(--ok);color:#fff}
.banner.note{background:var(--panel-2);border-color:var(--line-soft);color:var(--ink)}
.banner.warn{background:var(--warn-fill);color:var(--ink)}
.banner b{color:inherit}
.banner.err a,.banner.ok a{color:#fff;text-decoration:underline}
.banner.warn a{color:var(--ink);text-decoration:underline}
.banner.err code,.banner.ok code{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}

/* ============================================================ app shell: global header + vertical nav */
#app{display:grid;grid-template-columns:15rem 1fr;grid-template-rows:auto 1fr;
     grid-template-areas:"brand top" "nav main";height:100vh}
#brand{grid-area:brand;display:flex;align-items:center;gap:.75rem;padding:0 1rem;
       border-bottom:3px solid var(--accent);border-right:1px solid var(--line-soft);
       background:#fff;height:3.125rem}
#top{grid-area:top;display:flex;align-items:center;gap:.75rem;padding:0 1.5rem;
     border-bottom:3px solid var(--accent);background:#fff;height:3.125rem}
#nav{grid-area:nav;border-right:1px solid var(--line-soft);background:#fff;
     padding:.5rem 0;overflow-y:auto}
#main{grid-area:main;overflow-y:auto;padding:.75rem 1rem 4rem;background:var(--bg)}
.mark{width:2rem;height:2rem;border-radius:var(--r);background:var(--accent);
      display:grid;place-items:center;color:#fff;font-weight:700;font-size:1rem}
.navitem{display:flex;align-items:center;gap:.5rem;padding:0 1rem 0 1.5rem;line-height:2.25rem;
         color:var(--ink);cursor:pointer;font-size:.8125rem;transition:background .1s linear}
.navitem span{color:var(--ink-3);font-size:.8125rem}
.navitem:hover{background:var(--panel-2);color:var(--ink)}
.navitem.on{background:var(--accent-soft);color:var(--ink);font-weight:700;
            box-shadow:inset 4px 0 0 var(--accent)}
.navitem.on span{color:var(--accent)}
.navsec{font-size:.75rem;text-transform:uppercase;letter-spacing:.0625rem;color:var(--ink-2);
        padding:1rem 1rem .5rem 1.5rem;font-weight:400}
/* slds-page-header: a white panel with the record's title */
.page-hd{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap;
         background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
         padding:1rem}
.page-hd h1{font-size:1.125rem;font-weight:700;line-height:1.25}
.sub{color:var(--ink-2);font-size:.8125rem;margin-top:.25rem}

/* ============================================================ stage tracker: slds-progress */
.track{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:.25rem 0}
.stp{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:96px;position:relative}
.stp .dot{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);font-size:.75rem;font-weight:700;
  color:var(--ink-3);z-index:1}
.stp .lbl{font-size:.75rem;color:var(--ink-2);text-align:center}
.stp::before{content:"";position:absolute;top:.6875rem;left:-50%;width:100%;height:.125rem;
  background:var(--line-soft)}
.stp:first-child::before{display:none}
.stp.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.stp.done .lbl{color:var(--ink)}
.stp.done::before{background:var(--accent)}
.stp.now .dot{background:#fff;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.stp.now .lbl{color:var(--ink);font-weight:700}
.stp.now::before{background:var(--accent)}
.stp.blocked .dot{border-color:var(--bad);background:#fff;color:var(--bad)}
.stp.blocked .lbl{color:var(--bad-text)}

/* ============================================================ grids + pickers: slds-card / visual picker */
.grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
       padding:1rem;cursor:pointer;box-shadow:var(--shadow);transition:border-color .1s linear,box-shadow .1s linear}
.pcard:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.pcard h3{font-size:.875rem;margin-bottom:.25rem;color:var(--link)}
.bar{height:.5rem;background:var(--line-soft);border-radius:var(--r-pill);overflow:hidden;margin-top:.75rem}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}

.icard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
       padding:1rem;cursor:pointer;position:relative;box-shadow:var(--shadow);
       transition:border-color .1s linear,box-shadow .1s linear}
.icard:hover{border-color:var(--accent)}
.icard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.icard h3{font-size:.875rem}

.mods{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.mpick{display:flex;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r);
       background:#fff;cursor:pointer;align-items:flex-start;transition:border-color .1s linear}
.mpick:hover{border-color:var(--accent)}
.mpick.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mpick input{margin:.125rem 0 0;flex:none}
.mpick .nm{font-weight:700;font-size:.8125rem}
.mpick .ds{font-size:.75rem;color:var(--ink-2);margin-top:.125rem;line-height:1.5}

/* slds-section__title */
.arehd{display:flex;align-items:center;gap:.75rem;margin:1rem 0 .5rem;background:var(--panel-2);
       border-radius:var(--r);padding:0 .5rem;line-height:1.875rem}
.arehd h3{font-size:1rem;font-weight:400;color:var(--ink)}
.arehd .ln{display:none}

/* ============================================================ misc: slds-table, metrics */
.kv{display:grid;grid-template-columns:150px 1fr;gap:.5rem 1rem;font-size:.8125rem;margin:0}
.kv dt{color:var(--ink-2);font-size:.75rem}
.kv dd{margin:0;font-size:.8125rem;word-break:break-all}
pre.doc{margin:0;padding:1rem;background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow-x:auto;font-size:.75rem;line-height:1.5;max-height:460px;
  white-space:pre-wrap;word-break:break-word;color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:.8125rem;background:#fff}
th{text-align:left;font-size:.75rem;color:var(--ink-2);padding:.25rem .5rem;line-height:1.5rem;
   border-bottom:1px solid var(--line);background:var(--panel-2);font-weight:700;white-space:nowrap}
td{padding:.25rem .5rem;line-height:1.5rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--panel-2)}
.empty{text-align:center;padding:3rem 1.25rem;color:var(--ink-2)}
.empty .big{font-size:2rem;margin-bottom:.5rem;opacity:.45}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.75rem 1rem;
      box-shadow:var(--shadow)}
.stat .n{font-size:1.25rem;font-weight:700;line-height:1.25}
.stat .t{font-size:.75rem;color:var(--ink-2);margin-top:.125rem}
.step-n{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.75rem;font-weight:700;background:#fff;color:var(--ink-3);border:2px solid var(--line)}
.step-n.on{background:#fff;color:var(--accent);border-color:var(--accent)}
.step-n.ok{background:var(--accent);color:#fff;border-color:var(--accent)}


/* ============================================================ generated preview (industry-aware)
   Everything the preview shows is derived from the project specification; the only presentation
   it adds is the industry accent. Scoped under .pv so nothing here reaches the console shell. */
.pv{--pv-accent:var(--accent);--pv-soft:var(--accent-soft);display:grid;
    grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;gap:0;
    border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
    box-shadow:var(--shadow);min-height:640px}
.pv-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:10px 16px;
    background:var(--pv-accent);color:#fff;flex-wrap:wrap}
.pv-top .brand{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.pv-top .chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.pv-top select{width:auto;padding:4px 8px;font-size:12px;background:rgba(255,255,255,.14);
    color:#fff;border-color:rgba(255,255,255,.35)}
.pv-top select option{color:var(--ink)}
.pv-nav{border-right:1px solid var(--line);background:var(--bg-2);padding:12px 10px;overflow-y:auto}
.pv-nav .sec{font-size:.75rem;text-transform:uppercase;letter-spacing:.0625rem;color:var(--ink-3);
    padding:12px 10px 6px;font-weight:700}
.pv-nav .it{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r);
    cursor:pointer;color:var(--ink-2);font-size:13px;font-weight:540}
.pv-nav .it:hover{background:var(--panel-2);color:var(--ink)}
.pv-nav .it.on{background:var(--pv-soft);color:var(--pv-accent);font-weight:640;
    box-shadow:inset 2.5px 0 0 var(--pv-accent)}
.pv-main{padding:18px 22px 28px;overflow:auto;background:var(--bg)}
.pv-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pv-h h2{font-size:17px}
.pv-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:18px}
.pv-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
    cursor:pointer;box-shadow:var(--shadow-sm)}
.pv-tile:hover{border-color:var(--pv-accent)}
.pv-tile .n{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--pv-accent)}
.pv-tile .t{font-size:.75rem;color:var(--ink-2);margin-top:.125rem}
.pv-tile .u{font-size:10.5px;color:var(--ink-3);margin-top:4px}
.pv-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pv-chip{padding:5px 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel);
    font-size:12px;cursor:pointer;color:var(--ink-2)}
.pv-chip.on{background:var(--pv-accent);color:#fff;border-color:transparent}
.pv-chip b{margin-left:4px}
.pv-path{display:flex;gap:2px;margin:10px 0 16px;overflow-x:auto}
.pv-path span{flex:1;min-width:92px;text-align:center;padding:0 .75rem;line-height:2rem;font-size:.8125rem;font-weight:400;
    background:var(--line-soft);color:var(--ink);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.pv-path span.done{background:var(--ok);color:#fff}
.pv-path span.now{background:var(--pv-accent);color:#fff;font-weight:700}
.pv-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.pv-grid .card .bd{padding:14px 16px}
.pv-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:13px}
.pv-kv .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.0625rem;color:var(--ink-3);font-weight:400}
.pv-kv .v{margin-top:2px;word-break:break-word}
.pv-steps{list-style:none;margin:0;padding:0}
.pv-steps li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px;align-items:flex-start}
.pv-steps li:last-child{border-bottom:none}
.pv-steps .n{width:22px;height:22px;border-radius:50%;background:var(--pv-soft);color:var(--pv-accent);
    display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.pv-steps .who{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap}
.pv-form{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.pv-form .full{grid-column:1/-1}
.pv-form label.fld{margin-bottom:4px}
.pv-form .req{color:var(--bad)}
.pv-side{border-top:1px solid var(--line);background:var(--panel-2);padding:12px 16px;font-size:12.5px}
.pv-note{font-size:11.5px;color:var(--ink-3);margin-top:10px}
.pv-empty{padding:36px;text-align:center;color:var(--ink-3)}
@media (max-width:900px){.pv{grid-template-columns:1fr}.pv-nav{display:none}.pv-grid,.pv-form{grid-template-columns:1fr}}

/* ============================================================ the assistant */
.chat{display:flex;flex-direction:column;gap:10px}
.chat .log{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding:4px 2px}
.msg{max-width:92%;padding:.5rem .75rem;border-radius:.5rem;font-size:.8125rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line-soft);color:var(--ink);border-bottom-left-radius:4px}
.msg.ai.refused{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad-text)}
.msg.ai.clarify{border-color:var(--warn-line);background:#fff;color:var(--ink)}
.msg .meta{display:block;font-size:10.5px;color:var(--ink-3);margin-top:5px;}
.msg.user .meta{color:rgba(255,255,255,.75)}
.chat .opts{display:flex;gap:6px;flex-wrap:wrap}
.chat .in{display:flex;gap:8px;align-items:flex-end}
.chat textarea{min-height:44px;max-height:140px}
.chat .ex{display:flex;gap:6px;flex-wrap:wrap}
.chat .ex button{font-size:11.5px;padding:4px 9px}
.chg{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.chg:last-child{border-bottom:none}
.chg .id{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.chg.rev{opacity:.55;text-decoration:line-through}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.sev-high{color:var(--bad);font-weight:700}
.sev-medium{color:var(--warn);font-weight:700}
.sev-low{color:var(--ink-3);font-weight:700}
.findings li{margin:0 0 8px;font-size:13px;line-height:1.45}
.findings .ev{display:block;font-size:12px;color:var(--ink-3);font-style:italic;margin-top:2px}
.findings .sg{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.drop{border:1px dashed var(--line);border-radius:var(--r);padding:18px;text-align:center;color:var(--ink-3);
    background:var(--bg-2);cursor:pointer}
.drop:hover{border-color:var(--accent);color:var(--ink-2)}
.drop input{display:none}
.filelist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.filelist .f{display:flex;gap:10px;align-items:center;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.filelist select{width:auto;padding:3px 8px;font-size:12px}

/* ============================================================ sign in */
#boot{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
#gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
#gate .box{width:100%;max-width:424px}
.tabs{display:flex;gap:0;margin-bottom:1rem;border-bottom:1px solid var(--line-soft)}
.tabs button{flex:1;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;
             line-height:2.5rem;padding:0 .75rem;color:var(--ink-2);margin-bottom:-1px;font-size:.875rem}
.tabs button:hover:not(:disabled){background:transparent;color:var(--ink);border-bottom-color:var(--line)}
.tabs button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}

@media (max-width:860px){
  #app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  #brand,#nav{display:none}
  #main{padding:20px 16px 48px}
  .kv{grid-template-columns:1fr}
}

/* ============================================================ the preview, laid out by the design spec
   Personas, home sections, typed navigation, grouped records, declared states and the design line.
   Scoped under .pv / .pv-* like the rest of the preview; colours come from the theme tokens and the
   design's accent (--pv-accent), so both themes hold. */
.pv.compact .pv-main{padding:14px 18px 22px}
.pv.compact td{padding:8px 10px}
.pv.compact .pv-tile{padding:10px 12px}
.pv.compact .pv-nav .it{padding:6px 10px}
.pv-top .pv-who{display:flex;align-items:center;gap:6px;color:#fff;font-size:12px}
.pv-persona{flex-basis:100%;font-size:12px;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
.pv-persona b{color:#fff}
.pv-nav .it{align-items:flex-start}
.pv-kind{display:table;margin-top:3px;font-size:.625rem;text-transform:uppercase;letter-spacing:.0625rem;font-weight:700;
    padding:0 6px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3);white-space:nowrap;line-height:1.6}
.pv-kind.worklist{color:var(--pv-accent);border-color:var(--pv-accent)}
.pv-dot{font-size:11px}
.pv-dot.ok{color:var(--ok)}
.pv-dot.warn{color:var(--warn)}
.pv-sec{margin-bottom:6px}
.pv-sec>.arehd{margin-top:8px}
.pv-queues{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:12px}
.pv-queue{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
    border-left:3px solid var(--pv-accent);border-radius:var(--r);padding:10px 12px;cursor:pointer;
    box-shadow:var(--shadow-sm)}
.pv-queue:hover{border-color:var(--pv-accent)}
.pv-queue .n{font-size:20px;font-weight:700;color:var(--pv-accent);min-width:28px;text-align:center}
.pv-queue .t{font-weight:620;font-size:13px}
.pv-queue .u{font-size:11.5px;color:var(--ink-3)}
.pv-queue .go{color:var(--ink-3)}
.pv-bar{padding:4px 6px;margin:0 -6px 6px;border-radius:var(--r-sm);cursor:pointer}
.pv-bar:hover{background:var(--panel-2)}
.pv-bars{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--panel-2);margin-top:4px}
.pv-bars i{display:block;height:100%;background:var(--pv-accent)}
.pv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11px;color:var(--ink-3)}
.pv-legend span{display:inline-flex;align-items:center;gap:5px}
.pv-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--pv-accent)}
.pv-mini td{padding:8px 12px}
.pv-tile.static{cursor:default}
.pv-tile.static:hover{border-color:var(--line)}
.pv-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.pv-filters select{width:auto;padding:4px 8px;font-size:12px}
.pv-board{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pv-board .col{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:8px;min-height:120px}
.pv-board .ch{display:flex;justify-content:space-between;font-size:.75rem;text-transform:uppercase;
    letter-spacing:.06em;color:var(--ink-3);font-weight:700;margin-bottom:8px}
.pv-board .rc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;
    margin-bottom:6px;font-size:12.5px;cursor:pointer}
.pv-board .rc:hover{border-color:var(--pv-accent)}
.pv-board .rc .dim{font-size:11.5px}
.pv-hbar{display:grid;grid-template-columns:130px 1fr 34px;gap:10px;align-items:center;font-size:12.5px;
    padding:5px 6px;margin:0 -6px;border-radius:var(--r-sm);cursor:pointer}
.pv-hbar:hover{background:var(--panel-2)}
.pv-hbar .b{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.pv-hbar .b i{display:block;height:100%;background:var(--pv-accent)}
.pv-hbar .v{text-align:right;color:var(--ink-2)}
.pv-grp{margin-top:14px}
.pv-grp .gt{font-size:.75rem;text-transform:uppercase;letter-spacing:.0625rem;color:var(--pv-accent);font-weight:400;
    margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--line-soft)}
.pv-states{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--ink-3)}
.pv-states .pv-chip{padding:3px 9px;font-size:11px}
.pv-state{border:1px dashed var(--line);border-radius:var(--r);padding:30px 20px;text-align:center;
    color:var(--ink-2);background:var(--panel);font-size:13px}
.pv-state.error{border-style:solid;border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}
.pv-state .sk{height:10px;border-radius:99px;background:var(--panel-2);margin:8px auto;max-width:420px}
.pv-state .sk.w85{max-width:360px}
.pv-state .sk.w70{max-width:290px}
.pv-state .cp{margin-top:12px}
.pv-design{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px;color:var(--ink-2);
    margin-top:12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}

/* ============================================================ requirements & traceability */
.rq-sum{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rq-sum .stat{flex:1;min-width:150px}
.stat .s{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.rq-kinds{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px;font-size:12.5px}
.rq-trace{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.rq-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-soft);margin:.25rem 0 .75rem}
.rq-tabs button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;
    box-shadow:none;padding:0 .75rem;line-height:2.5rem;color:var(--ink-2);font-weight:400;margin-bottom:-1px;font-size:.875rem}
.rq-tabs button:hover:not(:disabled){background:transparent;color:var(--ink)}
.rq-tabs button.on{border-bottom-color:var(--accent);color:var(--ink);font-weight:700}
.rq-tabs b{font-size:11.5px;margin-left:4px;color:var(--ink-3)}
.rq-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.rq-filters select{width:auto;padding:5px 9px;font-size:12.5px;margin-left:4px}
.rq-chip{padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-size:12px;
    cursor:pointer;color:var(--ink-2);text-transform:capitalize}
.rq-chip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.rq-chip b{margin-left:4px}
.rq-scroll{max-height:560px;overflow:auto;border:1px solid var(--line-soft);border-radius:var(--r)}
.rq-scroll th{position:sticky;top:0;z-index:1}
.rq-id{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.rq-yes{color:var(--ok);font-weight:700}
.rq-no{color:var(--ink-3)}
tr.rq-detail td{background:var(--panel-2)}
tr.click[aria-expanded="true"] td{background:var(--accent-soft)}
.rq-det{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;font-size:12.5px;padding:4px 0}
.rq-det .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.0625rem;color:var(--ink-3);font-weight:400;margin-bottom:6px}
.rq-det ol{margin:0;padding-left:18px}
.rq-det li{margin-bottom:4px}
.rq-tr{display:grid;grid-template-columns:92px 1fr;gap:6px 12px;margin:0}
.rq-tr dt{color:var(--ink-3)}
.rq-tr dd{margin:0;word-break:break-word}
.rq-tr dd>div{margin-bottom:4px}
.gap-ev{display:block;font-size:12px;color:var(--ink-3);font-style:italic;margin-top:3px}
.pill.crit{background:var(--bad);color:var(--bg-2);border-color:var(--bad)}

/* ============================================================ code follows approval */
.regen{margin-top:8px;font-size:12px;color:var(--ink-2);line-height:1.5}
.regen .row{gap:6px;margin-top:5px}
.banner .regen{color:inherit}
@media (max-width:860px){.rq-det{grid-template-columns:1fr}.pv-hbar{grid-template-columns:96px 1fr 30px}}

/* ============================================================ the preview, as the generated apps look
   The preview is the generated application in miniature, so it follows the same modern Lightning look
   as the React, Angular and React Native targets (targets/lightning_css.py): a white header with the
   app tile in the industry colour, an accent-tinted page band, rounded cards, pill scopes, the path in
   green and dark brand, and Kanban columns. CSS only - the markup the console tests read is unchanged. */
.pv{border-radius:12px;border-color:var(--line-soft);box-shadow:0 1px 2px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04)}
.pv-top{background:#fff;color:var(--ink);border-bottom:1px solid var(--line-soft);padding:10px 16px}
.pv-top .brand{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.pv-top .brand::before{content:"";width:28px;height:28px;border-radius:8px;flex:none;background:var(--pv-accent)}
.pv-top .chip{background:#f3f3f3;border-color:var(--line-soft);color:var(--ink-2)}
.pv-top select{background:#fff;color:var(--ink);border-color:var(--line);border-radius:999px;min-height:2rem;padding:0 .75rem}
.pv-top .pv-who{color:var(--ink-2)}
.pv-persona{color:var(--ink-2)}.pv-persona b{color:var(--ink)}
.pv-nav{background:#fff;border-right-color:var(--line-soft)}
.pv-nav .it{border-radius:8px;color:var(--ink)}
.pv-nav .it.on{background:var(--pv-soft);color:var(--ink);font-weight:700;box-shadow:inset 4px 0 0 var(--pv-accent)}
.pv-main{background:linear-gradient(180deg,color-mix(in srgb,var(--pv-accent) 10%,#f3f3f3) 0,#f3f3f3 200px) no-repeat,#f3f3f3}
.pv-h h2{font-size:1.25rem}
.pv-tile,.pv-queue,.pv-design,.pv-state{border-radius:12px;border-color:var(--line-soft);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pv-tile .n{color:var(--ink);font-size:1.75rem}
.pv-tile:hover,.pv-queue:hover{border-color:var(--line);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.pv-queue{border-left:1px solid var(--line-soft)}
.pv-queue .n{min-width:2rem;height:1.5rem;font-size:.75rem;border-radius:999px;background:var(--pv-accent);color:#fff;display:grid;place-items:center}
.pv-chip{border-radius:999px;border-color:var(--line);color:var(--ink);background:#fff}
.pv-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pv-path span{background:#e5e5e5;color:var(--ink)}
.pv-path span:first-child{border-radius:18px 0 0 18px}.pv-path span:last-child{border-radius:0 18px 18px 0}
.pv-path span.done{background:#2e844a;color:#fff}.pv-path span.now{background:#014486;color:#fff}
.pv .card{border-radius:12px;border-color:var(--line-soft)}
.pv-board .col{background:#eef1f4;border:0;border-top:3px solid var(--line);border-radius:12px}
.pv-board .rc{border-radius:10px;border-color:var(--line-soft);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pv-board .rc:hover{border-color:var(--line);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.pv-steps .n{background:var(--pv-accent);color:#fff}
.pv-kind.worklist{color:var(--ink);border-color:var(--pv-accent)}