/* Tala Growth Engine — app styles built on the Tala brand system.
   Tokens/fonts come from brand/tokens.css (verbatim copy of /brand-system/tokens.css —
   update by re-copying, never by editing here). Only approved palette colours are used;
   Tala Green and Off White are the only text colours (brand-spec.md §4). */

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--tala-font-sans);
  font-size:13px;
  line-height:var(--tala-body-line-height);
  color:var(--tala-color-tala-green);
  background:var(--tala-color-off-white);
}

/* Header — Tala Green ground, white wordmark top-left (brand-spec.md §5.5) */
header{
  display:flex;align-items:center;gap:28px;
  padding:14px 24px;
  background:var(--tala-color-tala-green);
  color:var(--tala-color-off-white);
}
.brand{display:flex;align-items:baseline;gap:14px}
.brand img{height:16px;display:block}
.brand .app-label{
  font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tala-subtitle-tracking);
  font-size:11px;opacity:.85;
}
nav{display:flex;gap:2px;align-items:center}
/* Grouped dropdown nav (Max, 13 Aug): Leads / Accounts / Analytics /
   Retail / Marketing. Hover or keyboard focus opens the panel; the top
   item underlines when any child tab is active. CSS only, no JS. */
.nav-drop{position:relative;display:flex}
.nav-top{display:inline-flex;align-items:center;gap:5px}
.caret{font-size:9px;opacity:.6;line-height:1}
.nav-menu{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  min-width:184px;padding:6px 0;
  background:var(--tala-color-tala-green);
  border:1px solid rgba(240,237,231,.22);border-top:none;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 16px;border-bottom:none}
.nav-menu a.on,.nav-menu a:hover{border-bottom:none;background:rgba(240,237,231,.12)}
nav a{
  color:var(--tala-color-off-white);opacity:.7;text-decoration:none;
  padding:7px 14px;
  font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tala-subtitle-tracking);font-size:11px;
}
nav a.on,nav a:hover{opacity:1;border-bottom:1px solid var(--tala-color-off-white)}
.refresh{margin-left:auto;font-size:11px;opacity:.6;text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking)}

main{padding:32px 24px 64px;max-width:1240px;margin:0 auto}
/* Data-dense tabs get the full window, symmetric padding; wide tables scroll
   inside their own container (#grid) so the PAGE never scrolls sideways. */
main.wide{max-width:none}
#grid{overflow-x:auto;background:#fff;border:1px solid var(--tala-color-cappucino)}
#grid table{border:0;min-width:900px}

/* Column typing: narrow columns stay narrow and aligned; long text gets the room.
   Grid headers may wrap ('Call Connected?' must never dictate a column's width). */
#grid th{white-space:nowrap;position:relative;white-space:normal;vertical-align:bottom;line-height:1.35}
#grid .c-num{text-align:right}
#grid th.c-num{text-align:right}
#grid .c-bool{text-align:center}
#grid td.c-date{white-space:nowrap}
#grid td.c-long{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#grid td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.z{opacity:.25}
#grid td{vertical-align:top}

/* Headings — Nanum Myeongjo, uppercase, never bold (brand-spec.md §3) */
h1{
  font-family:var(--tala-font-serif);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--tala-heading-tracking);line-height:var(--tala-heading-line-height);
  font-size:32px;margin:.2em 0 .8em;
}
h2{
  font-family:var(--tala-font-serif);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--tala-heading-tracking);
  font-size:20px;margin:1.6em 0 .6em;
}

/* Stat cards — Off White on Cappucino-tinted panels; accents stay in palette */
.cards{display:flex;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.card{
  background:#fff;border:1px solid var(--tala-color-cappucino);
  padding:14px 18px;min-width:140px;
  font-size:11px;text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);font-weight:500;
}
.card span{
  display:block;font-family:var(--tala-font-serif);
  font-size:28px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--tala-color-tala-green);margin-bottom:2px;
}
.card.good{border-left:3px solid var(--tala-color-olive)}
.card.a{border-left:3px solid var(--tala-color-cappucino)}
.card.warn{border-left:3px solid var(--tala-color-orange)}

/* Tables — header Tala Green/Off White, Cappucino dividers (brand-spec.md §8.3) */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--tala-color-cappucino)}
th{
  background:var(--tala-color-tala-green);color:var(--tala-color-off-white);
  text-align:left;padding:9px 12px;position:relative;white-space:nowrap;
  font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
td{padding:9px 12px;border-top:1px solid var(--tala-color-cappucino);vertical-align:top}
.sub{opacity:.6;font-size:11px}
.score{font-weight:600;text-align:right}
.pill{
  display:inline-block;border:1px solid var(--tala-color-tala-green);border-radius:999px;
  padding:1px 10px;font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);
}
.empty{opacity:.55;text-align:center;padding:28px}

/* Buttons — pill/outline pattern (brand-spec.md §8.3, email/document context) */
.btn{
  display:inline-block;background:transparent;color:var(--tala-color-tala-green);
  border:1px solid var(--tala-color-tala-green);border-radius:999px;
  padding:7px 18px;cursor:pointer;
  font-family:var(--tala-font-sans);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);
}
.btn:hover{background:var(--tala-color-tala-green);color:var(--tala-color-off-white)}

/* Footer — TALA  |  GROWTH ENGINE  |  YEAR convention (brand-spec.md §8.1) */
footer{
  padding:18px 24px;font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);opacity:.55;
}

/* Toolbar — search, filters, field picker */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar input[type=search]{
  font-family:var(--tala-font-sans);font-size:12px;
  padding:7px 12px;min-width:240px;
  border:1px solid var(--tala-color-cappucino);background:#fff;
  color:var(--tala-color-tala-green);
}
.toolbar select{
  font-family:var(--tala-font-sans);font-size:11px;
  padding:6px 8px;border:1px solid var(--tala-color-cappucino);
  background:#fff;color:var(--tala-color-tala-green);max-width:180px;
}
.toolbar #count{white-space:nowrap}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Multi-select filter dropdowns — tick several values (Red AND Amber, two ICPs) */
.mf{position:relative;display:inline-block}
.mf-btn{
  font-family:var(--tala-font-sans);font-size:11px;
  padding:6px 10px;border:1px solid var(--tala-color-cappucino);
  background:#fff;color:var(--tala-color-tala-green);cursor:pointer;white-space:nowrap;
}
.mf-btn.on{border-color:var(--tala-color-tala-green);font-weight:600}
.mf-panel{
  position:absolute;left:0;top:110%;z-index:45;min-width:190px;max-height:300px;overflow-y:auto;
  background:#fff;border:1px solid var(--tala-color-cappucino);
  padding:10px 12px;box-shadow:0 8px 24px rgba(26,52,49,.12);
}
.mf-panel label{display:block;font-size:11px;padding:3px 0;cursor:pointer;white-space:nowrap}
.mf-panel input{margin-right:7px;accent-color:var(--tala-color-tala-green)}
.mf-clear{
  margin-top:8px;font-family:var(--tala-font-sans);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);
  background:transparent;border:0;color:var(--tala-color-tala-green);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:0;
}
.mf-panel[hidden]{display:none}

/* Action cards are live filters */
.cards .card{cursor:pointer;user-select:none}
.cards .card.sel{outline:2px solid var(--tala-color-tala-green);outline-offset:-2px}
.card.red{border-left:3px solid #9c3325}

.fields-wrap{position:relative}
.fields-panel{
  position:absolute;right:0;top:110%;z-index:40;
  background:#fff;border:1px solid var(--tala-color-cappucino);
  padding:16px 20px;width:min(720px,calc(100vw - 60px));
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:2px 18px;
  box-shadow:0 8px 24px rgba(26,52,49,.12);
}
.fields-panel label{display:block;font-size:11px;padding:3px 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fields-panel input{margin-right:7px;accent-color:var(--tala-color-tala-green)}

.pager{display:flex;align-items:center;gap:14px;margin-top:14px}

/* Lead detail modal */
.modal{position:fixed;inset:0;background:rgba(26,52,49,.45);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:32px}
.modal-card{
  background:var(--tala-color-off-white);color:var(--tala-color-tala-green);
  max-width:680px;width:100%;max-height:82vh;overflow-y:auto;padding:28px 32px;
}
.modal-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.modal-head h2{margin:0}
.modal-card dl{display:grid;grid-template-columns:190px 1fr;gap:6px 16px;margin:12px 0 0;font-size:12px}
.modal-card dt{
  font-weight:500;text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);
  font-size:10px;opacity:.65;padding-top:2px;
}
.modal-card dd{margin:0;word-break:break-word}
.modal[hidden],.fields-panel[hidden]{display:none}

/* Long-text fields in the detail view (summaries, notes) */
.longtext{white-space:normal;line-height:1.55;max-width:60ch}

/* Lead brief — structured, brand hierarchy: eyebrow heading, hairline rules,
   tight paragraphs, real list for the questions */
.brief{max-width:64ch}
.brief-sec{border-top:1px solid var(--tala-color-cappucino);padding:10px 0 2px}
.brief-sec:first-child{border-top:0;padding-top:0}
.brief-h{
  font-weight:600;font-size:10px;text-transform:uppercase;
  letter-spacing:var(--tala-subtitle-tracking);
  color:var(--tala-color-tala-green);margin-bottom:5px;
}
.brief p{margin:0 0 8px;line-height:1.6;font-size:12.5px}
.brief ol{margin:2px 0 8px 18px;padding:0}
.brief ol li{margin:0 0 6px;line-height:1.5;font-size:12.5px}
/* Full-screen detail modal */
.modal-card.full{max-width:96vw;height:92vh;max-height:92vh}
.modal-card.full dl{grid-template-columns:220px 1fr}
.modal-card.full .longtext{max-width:none}
td a,.modal-card dd a{color:var(--tala-color-tala-green);text-decoration:underline;text-underline-offset:2px}

.rag-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle}
.rag-dot.rag-green{background:var(--tala-color-tala-green)}
.rag-dot.rag-amber{background:#d9a514}
.rag-dot.rag-red{background:#9c3325}
.rag-dot.rag-new{background:#b8b2a7}
.rag-dot.rag-archived{background:transparent;border:1px solid #b8b2a7}

/* Analytics: CSS bar charts + layout */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:8px}
.bar{position:relative;background:var(--tala-color-porcelain,#f4f1ea);height:20px;min-width:60px}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--tala-color-tala-green);opacity:.85}
.bar b{position:relative;font-size:10.5px;font-weight:500;line-height:20px;padding-left:8px;color:var(--tala-color-tala-green);mix-blend-mode:normal}
.bar i.rag-bar-green{background:var(--tala-color-tala-green)}
.bar i.rag-bar-amber{background:#d9a514}
.bar i.rag-bar-red{background:#9c3325}
.bar i.rag-bar-new{background:#b8b2a7}
.bar b{text-shadow:0 0 4px #fff,0 0 4px #fff}
table.trend td{padding:6px 12px}
h2{margin-top:28px}

/* Login gate */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--tala-color-tala-green)}
.login-card{background:var(--tala-color-tala-green);text-align:center;padding:40px}
.login-logo{height:34px;margin-bottom:6px}
.login-label{color:#fff;opacity:.7;font-size:11px;text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);margin-bottom:26px}
.login-card input{display:block;width:260px;margin:0 auto 12px;padding:10px 12px;border:1px solid var(--tala-color-cappucino);background:#fff;font-family:var(--tala-font-sans);font-size:13px}
.login-card .btn{width:260px;background:#fff}
.login-error{color:#e8b7ae;font-size:12px;margin-top:12px}

/* Collapsible sections (Meetings tab) — summary carries the h2, chevron shows state */
details.acc summary{cursor:pointer;list-style:none;user-select:none}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary h2{display:inline;margin:0}
details.acc{margin:26px 0 6px}
details.acc summary h2::before{content:'\25B8';display:inline-block;margin-right:10px;
  font-family:var(--tala-font-sans);font-size:13px;opacity:.45;
  transition:transform .15s ease;vertical-align:2px}
details.acc[open] summary h2::before{transform:rotate(90deg)}
details.acc > :not(summary){margin-top:10px}

/* Column-header help bubbles (hover for plain-English definition).
   CSS bubbles via data-tip, not the native title attribute — instant, styled,
   and actually visible (native tooltips need a long hover and are easy to miss). */
th .qm{display:inline-block;width:13px;height:13px;line-height:12px;text-align:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);color:rgba(255,255,255,.75);
  font-size:9px;font-weight:500;margin-left:5px;cursor:help;text-transform:none;
  vertical-align:middle;position:static}
/* The bubble anchors to the header CELL (th is position:relative), so every
   tooltip opens in exactly the same spot: flush under its own column. */
.qm[data-tip]::after{
  content:attr(data-tip);display:none;position:absolute;top:calc(100% + 1px);left:0;
  width:250px;padding:9px 11px;z-index:60;
  background:var(--tala-color-tala-green);color:var(--tala-color-off-white);
  font-size:11.5px;font-weight:400;line-height:1.5;text-align:left;text-transform:none;
  letter-spacing:0;white-space:normal;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.qm[data-tip]:hover::after{display:block}
/* right-align the last two columns' bubbles so they stay on screen */
th:last-child .qm[data-tip]::after,th:nth-last-child(2) .qm[data-tip]::after{left:auto;right:0}

/* Lead detail: freshness stamp + on-demand refresh (services/rag read-time model) */
.freshness{display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font-size:12px;color:var(--tala-color-warm-grey,#8a857c)}
.btn-small{display:inline-block;background:transparent;color:var(--tala-color-tala-green);
  border:1px solid var(--tala-color-tala-green);border-radius:999px;padding:3px 12px;cursor:pointer;
  font-family:var(--tala-font-sans);font-weight:600;font-size:10px;
  text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking)}
.btn-small:hover:not(:disabled){background:var(--tala-color-tala-green);color:var(--tala-color-off-white);border-color:var(--tala-color-tala-green)}
.btn-small:disabled{opacity:.55;cursor:default}

/* ==========================================================================
   Shared component layer (UI cleanup, Aug 2026). Every page composes these
   instead of carrying its own inline styles — see templates/_ui.html for the
   matching Jinja macros. Palette + type come from brand/tokens.css only.
   ========================================================================== */

/* KPI scoreboard — ONE row of equal tiles with an optional vs-prior-window
   delta. Unlike .cards (flex, content-sized, wraps unevenly), this is a grid:
   every tile the same width, never two ragged rows. */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.kpi{
  background:#fff;border:1px solid var(--tala-color-cappucino);
  padding:14px 16px;position:relative;
  font-size:11px;text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);font-weight:500;
}
.kpi .kpi-num{
  display:block;font-family:var(--tala-font-serif);
  font-size:28px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--tala-color-tala-green);margin-bottom:2px;
}
.kpi .kpi-sub{opacity:.6;margin-top:3px;text-transform:none;letter-spacing:0;font-size:11px;font-weight:400}
.kpi.a{border-left:3px solid var(--tala-color-cappucino)}
.kpi.good{border-left:3px solid var(--tala-color-olive)}
.kpi.warn{border-left:3px solid var(--tala-color-orange)}
.kpi.red{border-left:3px solid #9c3325}
/* Delta: arrow = direction of change, colour = whether that's good news
   (falling "needs a human" renders ▼ in green via .ok / .bad). */
.kpi-delta{position:absolute;top:12px;right:14px;font-size:10px;font-weight:600;letter-spacing:.04em}
.kpi-delta.ok{color:var(--tala-color-olive)}
.kpi-delta.bad{color:#9c3325}
.kpi-delta.flat{opacity:.35}

/* Generic hover definition on light backgrounds — same bubble as the table
   header th[data-tip], anchored to the element itself. Long explanatory prose
   lives HERE, not in paragraphs under every section. */
.tip{position:relative;cursor:help}
.tip[data-tip]:hover::after{
  content:attr(data-tip);display:block;position:absolute;left:0;top:calc(100% + 3px);z-index:80;
  width:300px;white-space:normal;text-transform:none;letter-spacing:0;
  background:var(--tala-color-tala-green);color:var(--tala-color-off-white);
  font-size:11.5px;font-weight:400;line-height:1.5;padding:10px 12px;
  box-shadow:0 4px 14px rgba(26,52,49,.25);text-align:left;
}
.tip.tip-right[data-tip]:hover::after{left:auto;right:0}

/* Tab bar — horizontal section navigation replacing vertically stacked
   sections/accordions. Panels are .tabpanel siblings; gc-ui.js wires any
   .tabbar[data-tabkey] automatically and remembers the open tab. */
.tabbar{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--tala-color-cappucino);margin:6px 0 18px}
.tabbar button{
  appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:9px 14px;cursor:pointer;
  font-family:var(--tala-font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tala-subtitle-tracking);
  color:var(--tala-color-tala-green);opacity:.55;
}
.tabbar button:hover{opacity:.85}
.tabbar button.on{opacity:1;font-weight:600;border-bottom-color:var(--tala-color-tala-green)}
.tabbar button .n{
  display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;
  border:1px solid var(--tala-color-cappucino);font-size:9.5px;line-height:15px;
}
.tabbar button.on .n{background:var(--tala-color-tala-green);color:var(--tala-color-off-white);border-color:var(--tala-color-tala-green)}
.tabpanel[hidden]{display:none}

/* Semantic text highlights — replaces ad-hoc inline colour styles in cells */
.ok-text{color:var(--tala-color-olive);font-weight:600}
.bad-text{color:#9c3325;font-weight:600}
.warn-text{color:#b8860b;font-weight:600}

/* Pill variants — colour comes from a class, never an inline style */
a.pill{text-decoration:none}
.pill.on{background:var(--tala-color-tala-green);border-color:var(--tala-color-tala-green);color:var(--tala-color-off-white)}
.pill.p-warn{border-color:#b8860b;color:#b8860b}
.pill.p-bad{border-color:#9c3325;color:#9c3325}
.pill.p-dim{opacity:.65}
.pill.p-pilot{border-color:var(--tala-color-orange);color:var(--tala-color-orange)}
.btn-small.on{background:var(--tala-color-tala-green);color:var(--tala-color-off-white);border-color:var(--tala-color-tala-green)}

/* Mini cards — side-by-side insight panels (monthly trend, top flags) */
.mini-cards{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.mini-card{flex:1;min-width:260px;border:1px solid var(--tala-color-cappucino);border-radius:8px;padding:10px 12px;background:#fff}
.mini-card .mc-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mini-card .mc-sub{opacity:.6;font-size:11px;margin:1px 0 6px}

/* 1-5 score dots + graded score text (call scoring) */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px;background:#eee8db}
.dot.d-good{background:var(--tala-color-tala-green)}
.dot.d-bad{background:#9c3325}
.dot.d-mid{background:var(--tala-color-cappucino)}

/* Score review modal internals */
.dim-row{display:grid;grid-template-columns:190px 90px 1fr;gap:10px;align-items:center;padding:5px 0;border-bottom:1px dotted var(--tala-color-cappucino);font-size:12.5px}
.flag-row{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:2.5px 0;font-size:12px}
.flag-row .flagbar{display:block;height:3px;border-radius:2px;background:#9c3325;opacity:.35}
.csm-headline{display:flex;gap:26px;align-items:baseline;margin-bottom:12px}
.csm-headline .csm-score{font-size:34px;font-weight:800}
.csm-box{border:1px solid var(--tala-color-cappucino);border-radius:7px;padding:8px 12px;margin:0 0 12px;font-size:12.5px}
.rowlink{cursor:pointer}
.prewrap{white-space:pre-line}
.kpi[hidden]{display:none}

/* Structural column widths (data-independent) */
.w-90{width:90px}.w-16p{width:16%}.w-30p{width:30%}.w-34p{width:34%}

/* Sub-section heading — every template was inlining this exact style */
h3{font-size:13px;font-weight:600;margin:16px 0 6px}
.mt-0{margin-top:0}

/* Form fields — the one input style every editor was re-inlining */
.field{font-family:var(--tala-font-sans);font-size:12px;padding:8px 10px;
  border:1px solid var(--tala-color-cappucino);background:#fff;color:var(--tala-color-tala-green)}
.field-sm{font-family:var(--tala-font-sans);font-size:11px;padding:3px;
  border:1px solid var(--tala-color-cappucino);background:#fff;color:var(--tala-color-tala-green)}
.w-full{width:100%}.minw-280{min-width:280px}.minw-300{min-width:300px}.maxw-220{max-width:220px}
.mt-2{margin-top:2px}.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}
.nowrap{white-space:nowrap}

/* Inline panels: editor boxes and the preview pane */
.panel-box{background:#fff;border:1px solid var(--tala-color-cappucino);padding:18px 20px;max-width:760px;margin-top:10px}
.pane{background:#fff;border:1px solid var(--tala-color-cappucino);max-width:760px}
.pane-head{padding:12px 16px;border-bottom:1px solid var(--tala-color-cappucino)}
.pane-frame{width:100%;height:560px;border:0}

/* Confirm gate callout */
.gate-box{background:#fff;border:2px solid var(--tala-color-tala-green);padding:12px 16px;margin:6px 0 10px}

/* Inline checkbox picker (Cc other…) */
.pick-list{max-height:140px;overflow:auto;border:1px solid var(--tala-color-cappucino);padding:4px 6px;margin:2px 0;background:#fff}
.pick-list label{display:block;font-size:11px;white-space:nowrap;cursor:pointer}
.linklist a{margin-right:14px}

/* Table row separators (grouped tables) */
tr.row-sep td{border-top:2px solid var(--tala-color-tala-green)}
tr.row-total td{border-top:2px solid var(--tala-color-tala-green);font-weight:600}

/* Marketing Hub / waterfall components */
.panel-wide{background:#fff;border:1px solid var(--tala-color-cappucino);padding:18px 20px}
.field-mono{font-family:ui-monospace,monospace;font-size:11px;padding:10px 12px;
  border:1px solid var(--tala-color-cappucino);background:#fff;color:var(--tala-color-tala-green)}
.w-52{width:52px}.w-80{width:80px}.w-86{width:86px}.w-140{width:140px}.w-220{width:220px}
.minw-240{min-width:240px}.minw-260{min-width:260px}.minw-360{min-width:360px}.maxw-720{max-width:720px}
.mr-10{margin-right:10px}.self-center{align-self:center}
.orange-text{color:var(--tala-color-orange);font-weight:600}
.pill.p-good{border-color:var(--tala-color-tala-green);color:var(--tala-color-tala-green)}
.pill.p-orange{border-color:var(--tala-color-orange);color:var(--tala-color-orange)}
.pill.p-done{background:var(--tala-color-cappucino)}
.pill.p-todo{opacity:.5}
.pill.p-bad-fill{background:#9c3325;border-color:#9c3325;color:#fff}
.kpi-num.sm{font-size:16px;line-height:34px}
.ellipsis-label{display:block;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.icon-btn{border:none;background:none;cursor:pointer;padding:0;width:16px;font-size:12px;opacity:.55}
.icon-dim{width:16px;text-align:center;opacity:.3;display:inline-block}
.runrow{display:flex;align-items:center;gap:6px;padding:3px 0}
.grow-link{display:block;flex:1}
.logo-thumb{max-height:28px;max-width:140px;display:block;margin-bottom:4px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
details > summary{cursor:pointer}

/* Section header: title + optional short context on one line, standard
   rhythm — no more style="margin-top:18px" sprinkled on h2s. */
.section-head{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;flex-wrap:wrap}
.section-head h2{margin:0}

/* Column definitions on header hover (the ? bubbles are gone) */
th[data-tip]:hover::after{
  content:attr(data-tip);display:block;position:absolute;left:0;top:100%;z-index:80;
  width:300px;white-space:normal;text-transform:none;letter-spacing:0;
  background:var(--tala-color-tala-green);color:var(--tala-color-off-white);
  font-size:11px;font-weight:400;line-height:1.5;padding:10px 12px;
  box-shadow:0 4px 14px rgba(26,52,49,.25);text-align:left}
th[data-tip]{cursor:help}

/* ---- proposals approval gate (Max, 25 Aug: tidy grid, uniform controls) */
.prop-gate td{vertical-align:top;padding-top:14px;padding-bottom:14px}
.prop-gate .ta-r{text-align:right}
.prop-logo{width:150px;height:52px;border:1px solid var(--tala-color-cappucino);
  background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:6px}
.prop-logo img{max-width:140px;max-height:44px;object-fit:contain}
.prop-logo span{font-family:var(--tala-font-serif);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tala-color-tala-green);
  padding:0 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prop-acts{white-space:nowrap}
.prop-acts .btn-small{display:block;width:88px;text-align:center;margin:0 0 6px}
.chip{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 10px;border:1px solid var(--tala-color-cappucino);border-radius:20px;
  color:var(--tala-color-red-brown)}
.chip-ok{border-color:var(--tala-color-tala-green);color:var(--tala-color-tala-green);
  background:color-mix(in srgb, var(--tala-color-tala-green) 8%, transparent)}