/* Adform Naming Tool – shared styles (design unchanged from single-file version) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --ink:     #1B1B2F;
  --accent:  #F08A4B;
  --peach:   #FAE9DE;
  --bg:      #FFFFFF;
  --muted:   #6B6B7B;
  --ghost:   #F1F1F4;
  --canvas:  #F6F6F8;
  --success: #2E9E6B;
  --error:   #D64545;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Poppins", "Montserrat", ui-sans-serif, sans-serif;
  font-size: 15px; line-height: 1.65; font-weight: 400;
  background: var(--canvas); color: var(--ink);
  overflow-x: hidden;
  padding-left: 240px; /* room for the fixed left sidebar */
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.muted { color: var(--muted); font-weight: 400; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }

/* ========= Left sidebar navigation ========= */

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 240px; z-index: 300;
  background: var(--bg); border-right: 1px solid var(--ghost);
  display: flex; flex-direction: column;
  padding: 22px 16px 14px;
  overflow-y: auto;
}
.sb-brand { padding: 0 8px 16px; }
.sb-brand h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em; margin: 0;
}
.sb-brand h1 .dot { color: var(--accent); }
.sb-brand h1 img { max-height: 34px; display: block; }

.sb-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.sb-head {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  text-transform: lowercase; letter-spacing: -0.01em;
  padding: 10px 14px; border-radius: 999px;
  transition: background 0.1s;
}
.sb-head:hover { background: var(--ghost); }
.sb-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-icon { flex: none; display: inline-flex; color: var(--muted); }
.sb-section.current .sb-icon { color: var(--accent); }
.sb-section.current .sb-head {
  background: var(--peach); font-weight: 700;
}
.sb-head-label { flex: 1; text-align: left; }
.sb-caret { flex: none; display: inline-flex; color: var(--muted); transition: transform 0.15s; }
.sb-section.expanded .sb-caret { transform: rotate(90deg); }

/* ========= Page tab bar (a tool's subsections) ========= */
.page-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 6px;
}
.page-tab {
  appearance: none; border: none; cursor: pointer;
  background: var(--bg); color: var(--muted);
  text-decoration: none; display: inline-flex; align-items: center;
  box-shadow: 0 1px 6px rgba(27, 27, 47, 0.05);
  font: inherit; font-size: 13.5px; font-weight: 600;
  text-transform: lowercase; letter-spacing: -0.01em;
  padding: 8px 20px; border-radius: 999px;
  transition: background 0.1s, color 0.1s;
}
.page-tab:hover { background: var(--peach); color: var(--ink); }
.page-tab.active { background: var(--ink); color: var(--bg); font-weight: 700; }
.page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Expanded subitems with a subtle vertical guide line (tree style) */
.sb-sub {
  position: relative;
  margin: 2px 0 8px 21px; padding-left: 13px;
  display: flex; flex-direction: column; gap: 1px;
}
.sb-sub::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--ghost);
}
.sb-section:not(.expanded) .sb-sub { display: none; }

.sb-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 13px; border-radius: 999px;
  text-decoration: none; color: var(--muted);
  font-size: 13.5px; font-weight: 500; text-transform: lowercase; letter-spacing: -0.01em;
  transition: background 0.1s, color 0.1s; cursor: pointer;
}
.sb-item:hover:not(.active):not(.stub) { background: var(--ghost); color: var(--ink); }
.sb-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-item.active {
  background: #fff; color: var(--ink); font-weight: 700;
  box-shadow: 0 2px 8px rgba(27, 27, 47, 0.13);
}
.sb-item.stub { color: var(--muted); opacity: 0.55; cursor: default; }
.sb-soon {
  font-size: 10px; font-weight: 600; text-transform: lowercase;
  background: var(--ghost); color: var(--muted);
  padding: 1px 7px; border-radius: 999px;
}

/* Spinwise mark above the footer line – small and quiet, it should read as a
   colophon, not as a second logo competing with the app brand up top */
.sb-spinwise { padding: 0 12px; margin-top: 12px; }
.sb-spinwise img { width: 86px; height: auto; display: block; opacity: 0.6; }

.sb-meta {
  font-size: 12px; color: var(--muted); line-height: 1.4;
  padding: 12px 12px 2px; margin-top: 12px;
  border-top: 1px solid var(--ghost);
}

/* Mobile hamburger + overlay (shown below 900px only) */
.nav-hamburger {
  position: fixed; top: 14px; left: 14px; z-index: 320;
  width: 42px; height: 42px; border-radius: 12px;
  border: none; cursor: pointer;
  background: var(--ink); color: var(--bg);
  display: none; align-items: center; justify-content: center;
}
.nav-overlay {
  position: fixed; inset: 0; z-index: 290; display: none;
  background: rgba(27, 27, 47, 0.4);
}

main { max-width: 1080px; margin: 0 auto; padding: 28px 32px 48px; }
.panel { display: none; position: relative; }
.panel.active { display: block; }

/* Page header: a fixed-height band at the top of each panel.
   Controls sit left (order 1, flex 1); watermark sits right (order 2, margin-left auto).
   Both are flex children – no absolute positioning, no z-index tricks, zero overlap.
   Shell.adjustWatermarks() reduces watermark font-size if it overflows, hiding below 48 px.
   All future pages get the header via this helper; do not hand-roll watermarks. */
.page-header {
  display: flex;
  align-items: center;
  min-height: 120px;
  gap: 16px;
  overflow: hidden;
  margin-bottom: 4px;
}
.page-header-controls {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  order: 1;
  min-width: 0;
}
.page-header .watermark {
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  white-space: nowrap;
  color: #E3E3EA;
  pointer-events: none;
  user-select: none;
}
/* Strip the separator styling from filter bars when they live inside the header band */
.page-header-controls .ov-filter-bar,
.page-header-controls .tr-filter-bar {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Sections are white; the accent moved into their titles (was: peach card,
   ink title). The page canvas behind them is a light gray so they read as cards. */
.card {
  position: relative; z-index: 1;
  background: var(--bg); border: none;
  box-shadow: 0 2px 14px rgba(27, 27, 47, 0.06);
  border-radius: 24px; padding: 32px; margin-bottom: 20px;
}
.card h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; margin: 0 0 12px; color: var(--accent); }
.card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; margin: 22px 0 8px; }
.cat-h { display: flex; align-items: center; gap: 8px; }
.cat-icon { flex: none; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

/* ========= Section info icon =========
   Tool-wide rule: a section's explanation belongs in the icon beside its
   heading, not in a paragraph under it. Built with Shell.infoIcon /
   Shell.sectionHeading – never a title="" attribute, which is unstyleable and
   slow to appear. The tooltip is anchored to the icon's LEFT edge and opens
   rightward, because headings sit at the left of a card; an icon placed at the
   right of a wide container would need the mirrored variant. */
/* tag-qualified so it outranks `.card h2`'s bottom margin */
h2.sec-h, h3.sec-h, h4.sec-h { display: flex; align-items: center; gap: 0; margin: 0; }

.info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 17px; height: 17px; margin-left: 8px; padding: 0;
  appearance: none; border: none; border-radius: 50%; cursor: help;
  background: var(--ghost); color: var(--muted);
  transition: background .12s, color .12s;
}
.info-glyph {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px; font-weight: 700; font-style: italic; line-height: 1;
  text-transform: none; letter-spacing: 0;
}
.info:hover, .info:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.info:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.info-tip {
  position: absolute; left: -7px; top: calc(100% + 10px); z-index: 60;
  /* never wider than the screen; Shell.positionInfoTip then slides it into view */
  width: max-content; max-width: min(340px, calc(100vw - 32px));
  background: var(--ink); color: var(--bg);
  font-family: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.55;
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  padding: 11px 14px; border-radius: 13px;
  box-shadow: 0 8px 26px rgba(27, 27, 47, .22);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.info-tip::before {
  content: ''; position: absolute; left: var(--tip-arrow, 13px); top: -5px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid var(--ink);
}
.info:hover .info-tip,
.info:focus-visible .info-tip { opacity: 1; visibility: visible; transform: translateY(0); }

.info-tip strong { color: var(--bg); font-weight: 700; }
.info-tip .mono  { font-size: 11.5px; background: rgba(255, 255, 255, .13); border-radius: 5px; padding: 1px 5px; }
.info-tip p { margin: 0 0 7px; }
.info-tip p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .info, .info-tip { transition: none; }
}

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px;
  color: var(--muted); text-transform: lowercase; letter-spacing: 0;
}

select, input[type="text"], textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 14px; border: none; border-radius: 14px; background-color: var(--ghost);
}

/* ========= Dropdowns (platform rule) =========
   Every <select> uses the shared look – never the browser/device default:
   ghost pill, ink text, custom accent caret. Page styles may change a
   select's background-COLOR or width, but must never set the `background`
   shorthand (it would wipe the caret) and must never restore appearance. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23F08A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
  cursor: pointer;
  transition: background-color 0.1s;
}
select:hover { background-color: var(--peach); }
select:disabled { opacity: .5; cursor: default; }
select:focus, input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; border-radius: 18px; }
input.invalid { outline: 2px solid var(--error); background: var(--ghost); }
.err-msg { color: var(--error); font-size: 12px; margin-top: 4px; }

.checklist {
  max-height: 190px; overflow: auto; border: none;
  border-radius: 14px; padding: 8px; background: var(--ghost);
}
.checklist label { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; font-size: 13px; border-radius: 8px; cursor: pointer; }
.checklist label:hover { background: var(--bg); }
.checklist input { flex: none; accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }

.btn {
  appearance: none; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--ghost); color: var(--ink);
  border: none; border-radius: 999px; padding: 9px 20px;
}
.btn:hover { color: var(--accent); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--accent); color: var(--bg); }
.btn.small { padding: 4px 14px; font-size: 13px; }
.btn.danger { color: var(--error); }
.btn.danger:hover { background: rgba(214, 69, 69, 0.1); color: var(--error); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.flash-ok { background: rgba(46, 158, 107, 0.15); color: var(--success); }
.btn.primary.flash-ok { background: var(--success); color: var(--bg); }
.btn.flash-bad { background: rgba(214, 69, 69, 0.15); color: var(--error); }

.icon-btn {
  appearance: none; border: none; cursor: pointer; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
}
.icon-btn:hover { opacity: .85; }
.icon-btn:disabled { opacity: .4; cursor: default; }

.row-del, .row-move {
  appearance: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ghost); color: var(--muted); font-size: 13px; line-height: 1;
}
.row-del:hover { color: var(--error); background: rgba(214, 69, 69, 0.1); }
.row-move:hover { color: var(--accent); background: var(--ghost); }
.row-move:disabled { opacity: .35; cursor: default; }
.row-move:disabled:hover { color: var(--muted); background: var(--ghost); }
.edit-table .row-move, .edit-table .row-del { margin-left: 4px; }

#storage-banner {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: rgba(214, 69, 69, 0.12); color: var(--ink);
  font-size: 13px; font-weight: 500; padding: 12px 32px;
}
#storage-banner[hidden] { display: none; }

.save-status { font-size: 13px; color: var(--success); font-weight: 500; margin: 0 0 14px; }
.save-status.warn { color: var(--error); font-weight: 600; }

.preview-pill {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); border-radius: 999px;
  padding: 8px 8px 8px 28px; min-height: 58px;
  margin: 6px 0 12px;
}
.preview { flex: 1; font-size: 18px; color: var(--bg); word-break: break-all; }
.preview .empty { color: var(--peach); font-size: 14px; font-weight: 400; }

.counter { font-size: 13px; color: var(--muted); }
.counter.warn { color: var(--accent); font-weight: 700; }
.counter.over { color: var(--error); font-weight: 700; }

.toggle { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; user-select: none; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: none; border-bottom: 1px solid var(--ghost); padding: 10px 12px; text-align: left; vertical-align: top; }
th { color: var(--ink); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
/* Data-table row hover – subtle ghost highlight on every table in the app */
tbody tr { transition: background-color 0.1s; }
tbody tr:hover { background: var(--ghost); }

.badge { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.pass { background: rgba(46, 158, 107, 0.14); color: var(--success); }
.badge.fail { background: rgba(214, 69, 69, 0.14); color: var(--error); }
.badge.legacy { background: rgba(240, 138, 75, 0.16); color: var(--accent); white-space: nowrap; }
.badge.mismatch { background: rgba(240, 138, 75, 0.14); color: var(--accent); }

.filter-pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-pill {
  appearance: none; background: var(--ghost); border: none; border-radius: 999px;
  padding: 6px 16px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer; transition: background .1s, color .1s;
}
.filter-pill:hover { background: var(--peach); color: var(--ink); }
.filter-pill.active { background: var(--ink); color: var(--bg); font-weight: 700; }

.codebox {
  background: var(--ghost); border: none; border-radius: 14px;
  padding: 12px 16px; font-size: 12px; word-break: break-all; white-space: pre-wrap;
  color: var(--ink); margin: 4px 0 8px;
}

.edit-table input {
  background: transparent; border-radius: 10px; padding: 6px 10px;
}
.edit-table input:hover { background: var(--ghost); }
.edit-table input:focus { background: var(--ghost); }
.edit-table td { padding: 4px 6px; }

#logo-preview img { max-height: 40px; display: block; border-radius: 8px; }
#favicon-preview img { width: 40px; height: 40px; display: block; border-radius: 8px; background: var(--bg); object-fit: contain; }

#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 50; max-width: 380px; }
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg); border-left: 4px solid var(--accent);
  border-radius: 14px; padding: 12px 14px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(27, 27, 47, .10);
}
.toast.warn { border-left-color: var(--accent); }
.toast.error { border-left-color: var(--error); }
.toast-x { appearance: none; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--muted); padding: 0 2px; }
.toast-x:hover { color: var(--ink); }

/* Per-field color coding: odd fields (brand/lifecycle/window) in --accent,
   even fields (geo/audience/promo) in --ink – swapped to --bg inside the dark pill. */
.f-brand, .f-lifecycle, .f-window { color: var(--accent); font-weight: 600; }
.f-geo, .f-audience, .f-promo { color: var(--ink); font-weight: 600; }
.f-delim { color: var(--muted); font-weight: 400; }
.preview-pill .f-geo, .preview-pill .f-audience, .preview-pill .f-promo { color: var(--bg); }

/* Banner base names have their own field order, so they get their own positional
   tokens rather than reusing the line-item ones. Same alternating accent/ink rhythm. */
.f-b1, .f-b3, .f-b5 { color: var(--accent); font-weight: 600; }
.f-b2, .f-b4, .f-b6 { color: var(--ink); font-weight: 600; }
.preview-pill .f-b2, .preview-pill .f-b4, .preview-pill .f-b6 { color: var(--bg); }

/* ========= Responsive: sidebar collapses behind a hamburger ========= */
@media (max-width: 900px) {
  body { padding-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(27, 27, 47, 0.22);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-overlay { display: block; }
  .nav-hamburger { display: inline-flex; }
  main { padding: 64px 20px 32px; }
  #storage-banner { padding: 12px 20px; }
}

/* Wide tables scroll inside their OWN box rather than pushing the page
   sideways. The class was in the markup on four pages but had never been
   defined, so every wide table overflowed the viewport instead. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table { min-width: max-content; }

/* ========= Instant chart tooltips (platform rule) =========
   Chart data points carry data-tip; shared/nav.js shows this tooltip with
   zero delay and follows the pointer. Never use <title> or title="" on
   chart elements – both wait on the browser's hover delay. */
.chart-tip {
  position: fixed; z-index: 9000; pointer-events: none; display: none;
  background: var(--bg); border-radius: 11px; padding: 8px 12px;
  font-size: 12px; line-height: 1.5; white-space: pre-line; max-width: 280px;
  box-shadow: 0 4px 14px rgba(27, 27, 47, .12), 0 0 0 1px rgba(27, 27, 47, .07);
}
.chart-tip-label { font-weight: 600; color: var(--ink); display: block; }
.chart-tip-detail { color: var(--muted); display: block; white-space: pre-line; }
.chart-tip-detail:empty { display: none; }
/* Rows in a multi-series tip: a colour swatch, the series name, then the value
   pushed right so the numbers line up in a column. */
.chart-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.chart-tip-row + .chart-tip-row { margin-top: 3px; }
.chart-tip-key { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.chart-tip-name { color: var(--muted); }
.chart-tip-val { margin-left: auto; font-weight: 600; color: var(--ink);
                 font-variant-numeric: tabular-nums; padding-left: 14px; }

/* Highlight while the tip is up, driven by data-hl (class set by the shared
   handler) – never :hover transforms, which change geometry under the cursor
   and make the hit-test oscillate. */
svg rect.tip-hl { opacity: 1 !important; filter: brightness(1.45); }
svg circle.tip-hl { stroke: var(--accent); stroke-width: 8; stroke-opacity: .28; }