/* ADTINI'S OWN SURFACE. Every value is read off the dashboard screenshots --
   the workflow table, the forecast product rows and the Regenerate Forecast
   modal -- so these pages can be held against a screenshot rather than
   approximated. Shared by the quote list and the forecast page. */
:root{
  --navy:#123A63;
  --navy-2:#0E2E4F;
  --blue:#1C5BC4;
  --blue-lt:#2E86DE;
  --orange:#E2761B;
  --gold:#E9A93C;
  --fill:#F1F2F4;
  --line:#E3E6EA;
  --text:#1A2330;
  --muted:#667084;
  --page:#F4F5F7;
  --card:#FFFFFF;
  --rail:#1B5FC1;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}

/* ---- adtini's own left rail -------------------------------------------- */
nav.rail{position:fixed;top:0;left:0;bottom:0;width:54px;background:var(--rail);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;z-index:60}
nav.rail a{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:#E8F0FB;text-decoration:none;font-size:16px}
nav.rail svg{width:20px;height:20px;fill:currentColor}
nav.rail a:hover{background:rgba(255,255,255,.14);color:#fff}
nav.rail a.mark{background:var(--gold);color:#3A2508}
nav.rail a.mark.on{background:var(--orange);color:#fff}
/* the + opens the product choice, so it is a button with a menu beside it */
.railnew{position:relative;display:flex}
.railbtn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:#E8F0FB;background:none;border:0;cursor:pointer;padding:0}
.railbtn svg{width:20px;height:20px;fill:currentColor}
.railbtn:hover{background:rgba(255,255,255,.14);color:#fff}
/* THE FLYOUT IS NOT A RAIL ICON. nav.rail a forces a 38px square and pale
   blue text, and the menu's links sit inside nav.rail -- so they came out as
   greyed-out icon boxes with the labels crushed against them. */
.newmenu.railmenu{
  top:0;left:calc(100% + 10px);right:auto;min-width:210px;padding:6px;
}
nav.rail .newmenu a{
  width:auto;height:auto;border-radius:10px;justify-content:flex-start;
  color:var(--text);font-size:13.5px;font-weight:600;padding:10px 12px;gap:10px;
}
nav.rail .newmenu a:hover,nav.rail .newmenu a:focus{
  background:var(--gold);color:#3A2508;
}
nav.rail .newmenu svg{width:18px;height:18px;flex:0 0 18px;fill:currentColor}
@media(max-width:700px){
  .newmenu.railmenu{top:calc(100% + 6px);left:0}
}
body{padding-left:54px}
@media (max-width:700px){
  nav.rail{flex-direction:row;width:100%;height:46px;bottom:auto;padding:4px 8px;gap:4px;
    overflow-x:auto}
  body{padding-left:0;padding-top:46px}
}
body{
  background:var(--page);
  color:var(--text);
  font-family:Poppins,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
}
a{color:inherit}

/* ---- the quote-builder chrome these pages still live inside ------------- */
header.app{background:#0B2440;color:#fff;padding:12px 20px 0}
header.app .bar{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
header.app h1{
  font-size:16px;font-weight:600;letter-spacing:0;margin:0;
}
header.app .sub{color:#9BB2CB;font-size:12px}
nav.tabs{display:flex;gap:2px;margin-top:10px}
nav.tabs a{
  color:#B9CBE0;text-decoration:none;font-size:12.5px;font-weight:600;
  padding:8px 15px;border-radius:7px 7px 0 0;
}
nav.tabs a.on{background:var(--page);color:var(--navy)}

/* ---- adtini page head --------------------------------------------------- */
.pagehead{
  background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:16px 26px;
}
.pagehead h2{font-size:21px;font-weight:600;margin:0}
.pagehead h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em}
.burger{font-size:19px;color:var(--muted);cursor:pointer;line-height:1}
.wrap{max-width:none;margin:0;padding:20px 26px 70px}
.crumbs{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--navy);font-weight:600}
.crumbs .crumbc{color:var(--text);font-weight:600}
.sitelink{
  display:inline-flex;align-items:center;align-self:center;gap:5px;
  margin:0;padding:5px 12px;border-radius:999px;line-height:1;
  background:var(--fill);border:1px solid var(--line);
  font-size:12.5px;color:var(--blue);text-decoration:none;white-space:nowrap;
}
.sitelink::before{content:"\2197";font-size:11px}
.sitelink:hover{background:var(--card);border-color:var(--blue);text-decoration:none}
.lnkbtn{background:none;border:0;padding:0;font:inherit;color:var(--blue);
  cursor:pointer;text-decoration:underline}
.lnkbtn:hover{color:var(--navy)}
/* A term built from a proposed seed carries the seed's mark. */
.col li.exp>span:first-child,.kv tr.exp td:first-child{
  border-left:2px dashed var(--muted);padding-left:7px}
.col li.exp>span:first-child{margin-left:-9px}

/* ---- controls row (workflow page) -------------------------------------- */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.search{
  position:relative;flex:0 1 390px;min-width:220px;
}
.search input{
  width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px 12px 40px;font-family:inherit;font-size:13.5px;
}
.search span{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;
}
.btn-cat{
  background:var(--blue);color:#fff;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;padding:12px 18px;
  display:inline-flex;align-items:center;gap:8px;
}
.seg{
  margin-left:auto;display:inline-flex;border:1px solid var(--line);
  border-radius:999px;background:var(--card);overflow:hidden;
}
.seg button{
  font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  background:none;border:0;color:var(--text);padding:9px 18px;
}
.seg button.on{background:#EAF2FE;color:var(--blue);font-weight:600}

/* Quote the client for the other product, from the page that already has
   their details. */
h3.products{display:flex;align-items:center;gap:10px}
.btn2.addprod{font-size:11.5px;padding:6px 14px;border-radius:999px}

/* ---- table -------------------------------------------------------------- */
.tablecard{background:var(--card);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,40,70,.08)}
.scroller{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:1080px}
thead th{
  background:var(--navy);color:#fff;text-align:left;
  font-size:12.5px;font-weight:600;padding:13px 8px;white-space:nowrap;
}
thead th:first-child,tbody td:first-child{padding-left:14px}
thead th:last-child,tbody td:last-child{padding-right:14px}
tbody td{border-bottom:1px solid #EDF0F3;padding:11px 8px;font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFBFC}
td.lnk a{color:var(--text);text-decoration:underline;font-weight:500}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.rowicons{display:flex;gap:9px;color:var(--blue-lt);font-size:14px}
.rowicons span{cursor:pointer}

.tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:22px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.tag sup{font-size:9px;margin-left:3px;line-height:1;vertical-align:super;opacity:.85}
.tag.seo{background:#F3B0C3;color:#4A2230}
.tag.orm{background:#7E6BD6}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.who{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:5px 16px;font-size:12.5px;font-weight:500;min-width:96px;
}
.due{
  display:inline-flex;border-radius:999px;padding:5px 14px;
  font-size:12.5px;font-weight:500;background:#D6F2E0;
}
.due.warn{background:#FBEBC2}

.pager{
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:14px 18px;font-size:12.5px;color:var(--muted);
}
.pager select{
  border:1px solid var(--line);border-radius:10px;padding:6px 26px 6px 10px;
  font-family:inherit;font-size:12.5px;background:var(--card);appearance:none;
}
.pager .arrows{display:flex;gap:12px;color:var(--text);font-size:13px}
.pager .arrows span{cursor:pointer}

/* ---- forecast product rows ---------------------------------------------- */
h3.products{margin:0 0 16px;font-size:22px;font-weight:600}
.prod{margin-bottom:26px}
.prod > h4{
  margin:0 0 0;font-size:19px;font-weight:600;
  display:flex;align-items:center;gap:9px;
}
.prod > h4 u{text-decoration-thickness:1px;text-underline-offset:3px}
.prod > h4 .mag{color:#3FC3F4;font-size:14px;cursor:pointer}
.ptabs{display:flex;margin:10px 0 0;border-radius:10px 10px 0 0;overflow:hidden;width:max-content}
.ptabs button{
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:var(--navy);color:#fff;border:0;padding:11px 30px;
  border-bottom:3px solid transparent;
}
.ptabs button.on{border-bottom-color:var(--gold)}
.pbody{
  background:var(--card);border-radius:0 14px 14px 14px;
  box-shadow:0 1px 3px rgba(16,40,70,.08);
}
.prow{display:flex;align-items:center;gap:14px;padding:16px 18px;flex-wrap:wrap}
.prow .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{
  border:0;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;padding:10px 22px;color:#fff;white-space:nowrap;
}
.btn.preview{background:var(--blue);border-radius:999px}
/* The expansion's own button: a pill the size of the Yes/No beside it, on the
   right of its label like every other row. width:100% wrapped the label into
   four lines. */
.btn.kbexpand{flex:0 0 auto;background:var(--blue);color:#fff;border:0;
  border-radius:999px;font-size:12px;font-weight:600;padding:8px 18px}
.btn.kbexpand:disabled{opacity:.6;cursor:default}
.btn.gemini{background:var(--gold)}
.btn.claude{background:#D2691E}
.btn.adtini{background:var(--navy)}
.spark{color:var(--gold);font-size:15px}

/* history table inside a product row */
.hist table{min-width:900px}
.hist thead th{background:#E9ECEF;color:var(--text);font-weight:600;font-size:12px;text-align:center}
.hist tbody td{font-size:12.5px;text-align:center}
.btn-pub{
  background:var(--blue);color:#fff;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;padding:7px 14px;
}
.chev{color:var(--muted);cursor:pointer}
.btn-del{
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:999px;cursor:pointer;font-family:inherit;font-size:13px;
  line-height:1;padding:5px 10px;
}
.btn-del:hover{background:#FDECEC;border-color:#E9B9B9;color:#B3261E}

.note{max-width:1760px;margin:0 auto;padding:14px 26px 0;color:var(--muted);font-size:12.5px}

@media (max-width:820px){
  .seg{margin-left:0;width:100%;overflow-x:auto}
  .wrap{padding:16px}
}

/* ---- Regenerate Forecast modal ----------------------------------------- */
.scrim{
  position:fixed;inset:0;background:rgba(10,26,45,.55);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow:auto;
}
.scrim[hidden]{display:none}
.sheet{
  background:var(--card);border-radius:14px;overflow:hidden;width:100%;
  max-width:1180px;box-shadow:0 18px 50px rgba(11,36,64,.35);
}
.sheet > .top{
  background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:13px 16px;
}
.sheet > .top .x{
  background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.9;
}
.sheet > .top h2{flex:1;text-align:center;margin:0;font-size:16px;font-weight:600}
.toppills{display:flex;align-items:center;gap:9px}
.pill{
  border:0;border-radius:999px;cursor:pointer;font-family:inherit;font-size:12px;
  font-weight:600;padding:6px 13px;display:inline-flex;align-items:center;gap:6px;
}
.pill.solid{background:var(--blue-lt);color:#fff}
.pill.ghost{background:rgba(255,255,255,.22);color:#fff}
.pill.icon{background:none;color:#fff;padding:4px;font-size:15px}

form{padding:18px 22px 22px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.wide{grid-column:1 / -1}
form label,.lab{font-size:12.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.i{
  /* INLINE-FLEX, NOT INLINE. Width and height do nothing on an inline box, so
     the badge collapsed to a faint mark anywhere its label was not itself a
     flex container -- which is every label outside a <form>, including the
     keyword builder's toggles. */
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:15px;height:15px;border-radius:50%;background:var(--blue-lt);color:#fff;
  font-size:10px;font-weight:700;line-height:1;text-align:center;flex:0 0 auto;
  cursor:help;font-family:Georgia,serif;font-style:italic;
}
/* A DATE FIELD IS A FIELD. Typed selectors meant the flight dates came out
   in the browser's own white box beside the tool's grey ones. */
form input[type=text],form input[type=number],form input[type=date],
form textarea,form select,.box{
  width:100%;background:var(--fill);border:1px solid transparent;border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:13px;color:var(--text);min-height:41px;
}
form textarea{min-height:74px;resize:vertical}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--blue-lt);outline-offset:-1px}
.box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text}
.chip{
  background:var(--navy-2);color:#fff;border-radius:7px;font-size:11.5px;
  font-weight:500;padding:4px 8px;display:inline-flex;align-items:center;gap:6px;
}
.chip b{cursor:pointer;font-weight:600;opacity:.75}
/* a seed the tool proposed, not one the planner typed */
.chip.sug{background:var(--fill);color:var(--text);border:1px dashed var(--muted)}
.chip.sug b{opacity:.85}
/* The mark the field is named for. ::before rather than markup: every chip is
   read back by its first child text node, so a glyph inside it would be read
   as part of the term. */
.chip.sug::before{content:"\2726";color:var(--blue);font-size:10px;margin-right:5px}
.yn{display:inline-flex;align-self:flex-start;background:var(--fill);border-radius:999px;padding:3px}
.yn button{
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border:0;
  background:none;color:var(--muted);border-radius:999px;padding:5px 15px;
}
.yn button.on{background:var(--blue);color:#fff}
.quad{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 22px}
.geohead{color:var(--blue);font-size:12.5px;font-weight:600;margin:2px 0 0}
.checks{display:flex;flex-wrap:wrap;gap:16px;margin:2px 0 4px}
.checks label{font-weight:500;font-size:12.5px;gap:7px;cursor:pointer}
.checks input{accent-color:var(--blue);width:15px;height:15px}
.dl{color:var(--blue);font-size:12.5px;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;padding-top:22px}
.foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:6px 22px 20px}
.foot .btn{border-radius:10px;padding:11px 20px}
.btn.save{background:var(--blue)}
.btn.go{background:var(--orange)}
@media (max-width:820px){
  .grid,.quad{grid-template-columns:1fr}
  .sheet > .top h2{text-align:left}
  .toppills .pill.ghost{display:none}
}

/* ---- keyword builder + config, inside the modal ------------------------- */
/* #paneScan was never in this list, so the brand scan was the one pane in the
   modal with no padding: the side panel sat on the sheet's left edge and the
   page-one and locations tables ran into both. */
#paneKw,#paneCfg,#paneScan{padding:20px 26px 10px}
.kbwrap{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}
@media(max-width:900px){.kbwrap{grid-template-columns:1fr}}
.kbside,.kbmain{background:var(--fill);border-radius:14px;padding:16px}
.kbside h4,.kbmain h4{margin:0 0 4px;font-size:14px;font-weight:600}
.kbside .box{background:var(--card)}
.paneltop{display:flex;align-items:center;gap:12px}
.paneltop h4{flex:1}
.hint{margin:0 0 12px;color:var(--muted);font-size:12.5px}
.kbrow{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
.kbrow .f{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.kbrow label{margin:0;white-space:nowrap}
.kbrow .f{display:flex;flex-direction:column;gap:6px}
.kbrow label{font-size:12.5px;font-weight:600}
.kbrow select{background:var(--card);border:0;border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:13px;width:100%}
.btn.build{background:var(--blue);width:100%;border-radius:10px;padding:12px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.col{background:var(--card);border-radius:12px;padding:12px}
.col h5{margin:0 0 8px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.col li{font-size:12.5px;display:flex;gap:6px;align-items:baseline}
.col li .v{color:var(--muted);font-size:11.5px;margin-left:auto;white-space:nowrap}
/* Where the build spent its time. Folded, because it is read after a slow
   build and never otherwise. */
.tmg{margin-top:12px;font-size:11px;color:var(--muted)}
.tmg summary{cursor:pointer;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.tmg div{margin-top:5px;line-height:1.6}
.widen{margin-top:14px;background:#FDF3E2;border-radius:12px;padding:14px 16px;font-size:12.5px}
.widen b{display:block;margin-bottom:8px}
.widen table{min-width:0;width:100%}
.widen td{padding:3px 0;border:0;font-size:12.5px}
.widen td:last-child{text-align:right;color:var(--muted)}
.pill.pressed{background:var(--orange)}
#paneCfg .grid{grid-template-columns:1fr 1fr}

/* ---- quote results, inside a product row -------------------------------- */
.legacy{margin-left:auto;align-self:center;font-size:11.5px;color:#9FB3CC;
  letter-spacing:.02em;padding-right:4px}
.legacy a{display:inline;padding:0 4px;color:#CFE0F2;text-decoration:underline}
.rowmsg{font-size:12.5px;color:var(--muted)}
.rowmsg.err{color:#B3261E}
.qres{border-top:1px solid var(--line);font-size:13px}
.qres > summary{list-style:none;cursor:pointer;padding:13px 18px;font-weight:600;
  color:var(--navy);display:flex;align-items:center;gap:8px}
.qres > summary::-webkit-details-marker{display:none}
.qres > summary::before{content:"\25B8";color:var(--muted);font-size:11px;transition:transform .15s}
.qres[open] > summary::before{transform:rotate(90deg)}
/* the quote and its strategies ride on the summary line, not below it */
.qsum{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  margin-left:18px;font-weight:500}
.qsumq{color:var(--text)}
.qsums{display:flex;gap:6px;flex-wrap:wrap}
.qsums b{background:var(--navy-2);color:#fff;border-radius:7px;font-size:11.5px;
  font-weight:500;padding:3px 8px;white-space:nowrap}
@media(max-width:700px){.qsum{margin-left:0;width:100%}}
.qbody{padding:0 18px 18px}
.qtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.qtile{background:var(--fill);border-radius:12px;padding:12px 14px}
.qtile small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
/* The partner figure, small and under the price it belongs to. Never bold and
   never the same size -- it is a reference, and the tile's job is still the
   number the client is quoted. (2026-09-17) */
.qtile u{display:block;margin-top:3px;font-size:11px;font-weight:600;
  text-decoration:none;color:var(--muted);letter-spacing:.01em}
.qtile b{font-size:22px;font-weight:600;color:var(--navy);line-height:1.25;
  letter-spacing:-.01em}
.qfold{background:var(--fill);border-radius:12px;margin-bottom:10px;overflow:hidden}
.qfold > summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:12.5px;font-weight:600}
.qfold > summary::-webkit-details-marker{display:none}
.qfold > summary::before{content:"\25B8";color:var(--muted);font-size:10px;
  display:inline-block;width:14px;transition:transform .15s}
.qfold[open] > summary::before{transform:rotate(90deg)}
.qfold > *:not(summary){margin:0 14px 14px}
table.kv{width:calc(100% - 28px);border-collapse:collapse;background:var(--card);
  border-radius:10px;overflow:hidden;font-size:12.5px;min-width:0}
table.kv th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line)}
table.kv td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.kv tr:last-child td{border-bottom:0}
table.kv td:first-child{color:var(--muted);width:42%;word-break:break-word}
table.kv td:nth-child(2){color:var(--text);word-break:break-word}
.shotimg{display:block;max-width:100%;border-radius:10px;border:1px solid var(--line)}

/* ---- pricing config, inside the modal ----------------------------------- */
#paneCfg{max-height:62vh;overflow-y:auto;padding-bottom:26px}
.cfgsec{margin-bottom:18px}
.cfgsec > h4{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--navy)}
.cfgsec > .hint{margin:0 0 12px}
.cfggrp{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.cfggrp > summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--navy);display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cfggrp > summary::-webkit-details-marker{display:none}
.cfggrp > summary i{font-style:normal;background:var(--fill);color:var(--muted);
  font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.cfgrow{display:flex;align-items:center;gap:12px;margin:6px 0}
.cfgrow label{flex:1;margin:0;font-size:12.5px;font-weight:600;display:block}
.cfgrow label span{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
form .cfgrow input[type=text]{flex:0 0 112px;width:112px;min-height:36px;padding:8px 12px}
.cfgrow label{max-width:none}
.tierrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;
  font-size:12.5px;color:var(--muted)}
form .tierrow input[type=number]{flex:0 0 84px;width:84px;min-height:34px;padding:6px 10px}
.btn-open{background:var(--blue);color:#fff;border:0;border-radius:999px;
  padding:5px 12px;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer}

/* ---- what goes where ---------------------------------------------------- */
/* The reputation quote's own build: four columns, and the two money ones read
   down the page rather than wrapping mid-figure. */
/* table-layout is fixed above, so the money columns are sized here rather than
   left to the content -- an unbroken "$6,435 ($585.00/rev)" pushed the client
   price off the card. */
table.send.orm td:first-child{width:27%}
table.send.orm td:nth-child(2){color:var(--muted);width:39%}
table.send.orm th:nth-child(3),table.send.orm th:nth-child(4),
table.send.orm td:nth-child(3),table.send.orm td:nth-child(4){
  width:17%;text-align:right;font-variant-numeric:tabular-nums}
table.send.orm tr.sum td{border-top:1px solid var(--line)}
/* THE WORKING, INDENTED UNDER ITS OWN LINE. Printed as a nested table so each
   step sits under the line it belongs to rather than as a fifth column nobody
   could read. The width rules above are descendant selectors, so the nested
   cells have to take themselves back. (2026-09-18, Kiri) */
table.send.orm tr.bld > td{padding:0 12px 10px 12px;border:0}
table.send.orm tr.bld table{width:100%;border-collapse:collapse;
  table-layout:auto;font-size:11.5px;background:none}
table.send.orm tr.bld table td{width:auto;padding:2px 0;border:0;
  color:var(--muted);text-align:left}
table.send.orm tr.bld table td:first-child{width:27%;padding-left:15px;
  position:relative}
table.send.orm tr.bld table td:first-child::before{content:"\21B3";
  position:absolute;left:0;opacity:.45}
/* The step reads beside its name, not across the card from it -- right-aligned
   it sat under the client-price column with a hand's width of nothing between
   the two halves of the same sentence. */
table.send.orm tr.bld table td:last-child{text-align:left;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:normal}
table.send{width:calc(100% - 28px);border-collapse:collapse;background:var(--card);
  border-radius:10px;overflow:hidden;font-size:12.5px}
table.send th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line)}
table.send thead th:nth-child(3),table.send thead th:nth-child(4){width:84px;text-align:center}
/* NO SINGLE VALUE MAY BLOW OUT THE TABLE. A base64 data URI is one
   unbreakable token; before the value side learned not to print one, a
   captured SERP stretched this table to 3.5 million pixels and broke the
   open quote's layout. Belt and braces, because the next long token will
   not be a screenshot. (2026-09-17) */
table.send{table-layout:fixed}
table.send td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:top;
  overflow-wrap:anywhere;word-break:break-word}
table.send td:nth-child(3),table.send td:nth-child(4){text-align:center;color:var(--blue)}
table.send td:first-child{width:34%;font-weight:600}
table.send td:first-child span{display:block;font-weight:400;color:var(--muted);
  font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
table.send tr.sec th{background:var(--fill);font-size:11px;color:var(--navy);
  letter-spacing:.05em;padding:8px 12px}
table.send tr.gap td:nth-child(2){color:#B3261E}
table.send tr:last-child td{border-bottom:0}
.sendfoot{margin:8px 14px 0 !important}

/* ---- quote list: the row is edited in place ----------------------------- */
.pagehead .btn-create{margin-left:auto;background:var(--gold);color:#3A2508;
  text-decoration:none;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:999px}
.pagehead .btn-create:hover{background:var(--orange);color:#fff}
select.sel{appearance:none;border:0;font-family:inherit;font-size:12px;font-weight:600;
  border-radius:999px;padding:6px 22px 6px 12px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 12px,calc(100% - 8px) 12px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
select.who{min-width:96px}
select.stat{background-color:var(--fill);color:var(--navy);min-width:150px}
input.cell{border:1px solid transparent;background:none;border-radius:8px;padding:6px 8px;
  font-family:inherit;font-size:13px;color:var(--text);width:100%;min-width:150px}
input.cell:hover{border-color:var(--line);background:var(--card)}
input.cell:focus{outline:2px solid var(--blue-lt);outline-offset:-1px;background:var(--card)}
input.cell.ord{width:86px;font-variant-numeric:tabular-nums}
.strat{display:inline-block;background:var(--fill);color:var(--navy);font-size:11px;
  font-weight:600;border-radius:999px;padding:3px 9px}

/* row icons on the quote list */
.rowicons a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;text-decoration:none;font-size:12px;font-weight:700;
  background:var(--fill);color:var(--blue)}
.rowicons a:hover{background:var(--blue);color:#fff}
.rowicons a.spark{background:#FDF0DB;color:var(--orange);font-size:14px}
.rowicons a.spark:hover{background:var(--orange);color:#fff}
.rowicons .off{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;font-size:12px;font-weight:700;color:#C3CAD4;background:var(--fill)}
.prod h4 .when{font-size:12.5px;font-weight:500;color:var(--muted);margin-left:6px}
/* Remove this quote. Sits at the far right of the card's own heading, because
   the thing being removed is the card. Muted until hover: a delete that draws
   the eye gets clicked by accident. */
.prod h4 .rmq{float:right;width:24px;height:24px;border:0;border-radius:7px;cursor:pointer;
  font-size:15px;line-height:1;color:#C3CAD4;background:var(--fill);padding:0}
.prod h4 .rmq:hover{background:#FDE7E7;color:#B4232A}

/* ---- the planner's view of a quote -------------------------------------- */
.pview{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;
  margin-bottom:12px}
.pv{background:var(--fill);border-radius:12px;padding:11px 14px}
.pv small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.pv b{font-size:13.5px;font-weight:600;color:var(--navy)}
.pvserp{margin-bottom:12px}

/* the keyword list and the capture, side by side under the quote */
.pvsplit{display:grid;grid-template-columns:3fr 1fr;gap:12px;align-items:start;margin-bottom:12px}
.pvsplit{align-items:start}
@media(max-width:900px){.pvsplit{grid-template-columns:1fr}}
.pvkw,.pvserp{background:var(--fill);border-radius:12px;padding:12px 14px}
.pvkw h5,.pvserp h5{margin:0 0 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between}
.pvscroll{max-height:260px;overflow-y:auto}
.pvkw table.kv{width:100%}
.pvserp img{width:100%;border-radius:8px;border:1px solid var(--line)}

/* the legacy builder sits at the foot of the rail */
nav.rail a.legacy{margin-top:auto;color:#9FB3CC}
@media(max-width:700px){nav.rail a.legacy{margin-top:0;margin-left:auto}}

/* the keyword list and the capture are one row, so they match height */
.pvsplit{align-items:stretch}
.pvkw,.pvserp{display:flex;flex-direction:column;min-height:0}
.pvkw .pvscroll{flex:1;min-height:0;overflow-y:auto}
.pvserp a,.pvserp img{display:block}
.pvserp{overflow:hidden}
.pvserp a{border-radius:8px;display:block}
.pvserp img{width:100%;height:auto;display:block}
.pagehead .build{margin-left:auto;font-size:11px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.pagehead .build + .btn-create{margin-left:14px}

/* the keyword list is as tall as the capture beside it, and scrolls */
.pvsplit{align-items:stretch}
.pvkw{max-height:none}
.pvkw .pvscroll{overflow-y:auto}

/* THE CAPTURE IS A LANDSCAPE EXHIBIT. The proposal was built around a 16:9
   frame, so the capture reads the same here as it does there -- a full-height
   PNG in a quarter-width column is a column of thumbnail, not an exhibit.
   Top of the page, which is where the query and the local pack sit. */
.pvsplit{grid-template-columns:1.5fr 1fr}
@media(max-width:900px){.pvsplit{grid-template-columns:1fr}}
.pvserp{align-self:stretch}
.pvserp .shotwrap{
  aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:8px;
  border:1px solid var(--line);background:var(--card);
}
.pvserp .shotwrap.empty{
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12.5px;background:var(--card);
}
.pvserp .shotwrap img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  border:0;border-radius:0;
}
/* THE LIST IS AS TALL AS THE CAPTURE, AND SCROLLS. height:0 keeps the keyword
   panel out of the row-height calculation, so the 16:9 capture sets the height
   and min-height:100% stretches the list to match it. */
.pvsplit{align-items:stretch}
.pvkw{height:0;min-height:100%;overflow:hidden}
.pvkw .pvscroll{flex:1;min-height:0;overflow-y:auto;max-height:none}
.pvserp{align-self:stretch}

/* a run expands in place: the row IS the expander, no second header above it */
.histrow{cursor:pointer}
.histrow:hover{background:var(--fill)}
.histrow.on{background:var(--fill);font-weight:600}
.histx{color:var(--muted);font-size:10px;margin-right:6px;display:inline-block;width:8px}
.histopen > td{padding:0 0 14px !important;background:var(--card)}
.histopen .qbody{padding:0 18px}

/* recapture sits on the panel heading; the download sits in the fold */
.pvmini{
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border:0;background:none;color:var(--blue);
  cursor:pointer;padding:0 0 0 10px;
}
.pvmini:hover{text-decoration:underline}
.pvmini:disabled{color:var(--muted);cursor:default;text-decoration:none}
/* the window moves over the capture; the frame does not move */
.pan{display:inline-flex;gap:2px;margin-left:10px}
.panb{
  font-family:inherit;font-size:9px;line-height:1;border:1px solid var(--line);
  background:var(--card);color:var(--navy);cursor:pointer;border-radius:6px;
  padding:3px 6px;
}
.panb:hover{background:var(--fill)}
.pvserp h5{align-items:center}
.qdl{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap}
/* what you do with a finished quote, where the quote is */
.qacts{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.btn2{
  border:1px solid var(--line);border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;padding:9px 20px;color:var(--navy);
  background:var(--card);white-space:nowrap;
}
.btn2:hover{background:var(--fill)}
.btn2:disabled{color:var(--muted);cursor:default}
.qacts .btn{background:var(--navy)}
.qacts .hint{color:var(--muted)}
.sharein{
  font-family:inherit;font-size:12px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;min-width:330px;color:var(--text);
}
.volwide{cursor:help}
.serpmsg:empty{display:none}
.volwide{font-style:normal;font-size:11px;color:var(--muted);margin-left:7px}
.unplaced{color:#B3261E}
.unplaced b{font-weight:600}
.rkmsg{font-weight:500;color:var(--muted)}

/* THE QUOTE IS NOT A TABLE CELL. It renders inside one, so `.hist tbody td`
   centred every tile, card and keyword row in the expanded run. */
.histopen > td{text-align:left;font-size:13px}
.histopen .qbody{padding:14px 18px 0}
.histopen .qtiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.histopen table th,.histopen table td{text-align:left}
.histopen .qtile,.histopen .pv{text-align:left}

/* a hover that says what a field is for */
.i{position:relative}
.i:hover::after{
  content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);
  transform:translateX(-50%);z-index:80;width:max-content;max-width:280px;
  background:var(--navy-2);color:#fff;font-family:Poppins,sans-serif;font-style:normal;
  font-size:12px;font-weight:400;line-height:1.45;padding:8px 10px;border-radius:8px;
  box-shadow:0 6px 18px rgba(10,35,60,.22);white-space:normal;text-align:left}
.i:hover::before{
  content:"";position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--navy-2);z-index:80}
/* type-ahead picker: the panel is a child of .box so a click on it never
   leaves the field, which is what keeps the box open across several picks */
.box{position:relative}
.picks{
  position:absolute;left:0;top:calc(100% + 4px);width:100%;z-index:90;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(18,58,99,.14);max-height:208px;overflow:auto;padding:4px;
}
.pick{padding:7px 10px;border-radius:7px;font-size:13px;color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick b{font-weight:700;color:var(--blue)}
.pick.on{background:var(--fill)}
.pick:hover{background:var(--fill)}
.picknone{padding:8px 10px;font-size:12.5px;color:var(--muted)}
.pickcar{margin-left:auto;color:var(--muted);font-size:11px;cursor:pointer;
  padding:2px 4px;user-select:none;line-height:1}
.pickcar:hover{color:var(--text)}

/* new quote: pick the product first */
.newq{position:relative;margin-left:14px}
.newq .btn-create{border:0;cursor:pointer;font-family:inherit}
.newmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:280px;
  background:var(--card);border-radius:14px;padding:8px;
  box-shadow:0 14px 34px rgba(10,35,60,.20)}
.newmenu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600}
.newmenu a svg{width:20px;height:20px;fill:currentColor;flex:0 0 20px}
.newmenu a:hover,.newmenu a:focus{background:var(--gold);color:#3A2508;outline:none}

/* the builder's toggles read as label + choice on one line */
.kbrow .f{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
.kbrow .f label{margin:0;white-space:normal;text-align:left;flex:1}
.kbrow .yn{flex:0 0 auto}

/* THE BRAND SCAN'S FIELDS ARE TEXT, NOT TOGGLES. The row rule above was
   written for the keyword builder, where every .kbrow .f holds a Yes/No pill
   -- so the scan's two inputs were laid out label-left, input-right and got
   squeezed to a third of the panel. And the modal's input styling is scoped to
   `form`, which the scan pane is not inside, so they rendered as bare browser
   boxes next to fields that are rounded and filled everywhere else. */
.kbrow.stack .f{flex-direction:column;align-items:stretch;gap:6px}
.kbrow.stack .f label{flex:0 0 auto}
.kbrow input[type=text],.kbrow input[type=number]{
  width:100%;background:var(--card);border:1px solid transparent;border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:13px;color:var(--text);min-height:41px;
}
.kbrow input:focus{outline:2px solid var(--blue-lt);outline-offset:-1px}
/* FOUR ACROSS DOES NOT FIT. The sheet is 1180px and the scan's side panel
   takes 380 of it, so four columns are ~190px each and a term like "holy city
   heating and air" wraps to three lines next to its number. Two across gives
   each panel ~370px, which is the width the keyword builder's columns get. */
.cols.quad4{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.cols.quad4{grid-template-columns:1fr}}
.col .none{margin:0;color:var(--muted);font-size:12.5px}
.col li > span:first-child{min-width:0;overflow-wrap:anywhere}

/* ---- the reputation snapshot ------------------------------------------- */
/* Ported back from the legacy Reputation page: findings, tags, the page-one
   and locations tables, and the auto-suggest facsimile. */
/* A GRID TRACK DOES NOT SHRINK BELOW ITS CONTENT UNLESS YOU SAY SO. .kbmain
   is the 1fr track of .kbwrap, and min-width:auto let the page-one and
   locations tables push it wider than the sheet -- which clips, because the
   sheet is overflow:hidden. Ratings and the star columns were off-screen. */
.kbside,.kbmain{min-width:0}
.scsm{font-size:11.5px;padding:4px 10px;border-radius:999px;flex:0 0 auto}
/* step 1 is the pill top right, where the SEO row's Keyword Builder sits */
#scProg:empty,#scWarn:empty,#scLocs:empty{display:none}
/* adtini already has these two; the demo tool carries them for its own record */
.demofold > summary{cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--muted);list-style:none;padding:9px 0 2px}
.demofold > summary::-webkit-details-marker{display:none}
.demofold > summary::before{content:'\25B8 ';font-size:10px}
.demofold[open] > summary::before{content:'\25BE '}
.demofold > .grid{margin-top:10px}
#scLocs .sctbl{background:var(--fill);margin-top:0}
/* THE SNAPSHOT WHERE THE KEYWORD LIST GOES. One column, so the panels stack
   and scroll rather than squeezing two across a column half the sheet wide. */
/* the quote body sits in a history <td>, which centres its text */
.scfold,.scfold .scw,.scfold .col li{text-align:left}
.scfold .pvscroll{display:grid;gap:10px;align-content:start}
.scfold .cols.quad4{grid-template-columns:1fr;gap:10px}
.scfold .col,.scfold .sctbl{background:var(--card)}
.scfold .sctbl{margin-top:0;padding:10px 12px}
.scfold .scw{font-size:12px;padding:8px 10px}
.scfold .sclx{pointer-events:none;opacity:.55}
.scfold h5 span{font-weight:600;text-transform:none;letter-spacing:0;
  font-size:11px;color:var(--muted)}
#scWarn{display:grid;gap:8px;margin:0 0 12px}
#scWarn:empty{margin:0}
.scw{background:#FDF3E2;border:1px solid #E8C98A;border-radius:10px;
  padding:9px 12px;font-size:12.5px;line-height:1.5;color:var(--text)}
.scw.bad{background:#FDECEA;border-color:#E0A49C;color:#7A2318}
.scw a{color:inherit;font-weight:600}
.scq{color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.45}
/* one tag shape for owned / 3rd party / tactic / term class */
.tg{display:inline-block;font-style:normal;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border-radius:5px;
  padding:2px 5px;margin-left:6px;background:var(--fill);color:var(--muted);
  vertical-align:middle}
.tg.bad{background:#FDECEA;color:#9B2C1C}
.tg.own{background:#E7F0FB;color:var(--blue)}
.tg.ok{background:#E8F5EC;color:#1E6B39}
.tg.act{background:#FDF3E2;color:#8A5A12}
.sctbl{background:var(--card);border-radius:12px;padding:12px;margin-top:12px}
.scth{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);display:flex;justify-content:space-between;gap:12px;
  margin-bottom:8px}
.scth span{font-weight:600;text-transform:none;letter-spacing:0;font-size:11.5px}
.scth2{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  margin:0 0 8px}
.scth2 > *{flex:0 0 auto}
.scth2{white-space:nowrap}
.scth2 select{background:var(--card);border:0;border-radius:8px;padding:5px 8px;
  font-family:inherit;font-size:12px;color:var(--text);width:auto;min-width:130px}
/* min-width:0 resets the global table{min-width:1080px}, which is there for
   the workflow table and pushed these two 330px past the sheet. */
.sctbl table{width:100%;min-width:0;border-collapse:collapse;font-size:12.5px}
.sctbl th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;
  padding:0 6px 5px;border-bottom:1px solid var(--line)}
.sctbl td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top;
  overflow-wrap:anywhere}
.sctbl tr:last-child td{border-bottom:0}
.sctbl .n{text-align:right;white-space:nowrap}
.sctbl th.n{text-align:right}
.sctbl .sclx{accent-color:var(--blue);width:15px;height:15px;margin:1px 0 0}
/* the auto-suggest facsimile: Google's own row shape, from live data */
.col li.ac{gap:8px;align-items:center}
.col li.ac .mag{font-size:10px;opacity:.5;flex:0 0 auto}
.col li.ac.neg{color:#9B2C1C}
.col li.ac.neg .mag{opacity:.8}

/* the built list is editable */
.col li{position:relative;padding-right:14px}
.col li .kwrm{position:absolute;right:0;top:0;color:#B3261E;font-weight:700;cursor:pointer;
  opacity:0;font-size:13px;line-height:1.2}
.col li:hover .kwrm,.col li .kwrm:focus{opacity:1}
.col li .v.wide{color:var(--orange);cursor:help}
input.kwadd{width:100%;margin-top:10px;background:var(--fill);border:0;border-radius:9px;
  padding:7px 10px;font-family:inherit;font-size:12.5px}
input.kwadd:focus{outline:2px solid var(--blue-lt);outline-offset:-1px}
label.dl{cursor:pointer;color:var(--blue);font-weight:600;font-size:13px;display:inline-block}
label.dl:hover{text-decoration:underline}
.widen .btn{padding:8px 14px;font-size:12.5px;border-radius:999px}
.widen .hint{display:inline}