/* Brand values and app chrome for the success tools.
   testimonialbuilder.html is self-contained and keeps its own copy of these
   values in an inline stylesheet rather than linking this file — the two are
   kept in step by hand, which is the cost of leaving that tool independent. */

/* ---------------------------------------------------------------------------
   Two palettes live here, and the split is the point.

   PRINT tokens are AdComp's identity. They are what reaches a client on paper,
   they never change, and they deliberately do NOT adapt to dark mode — a
   printed sheet has no dark mode. Use them only inside `.page`.

   CHROME tokens are the interface Sey works in. They are free to be whatever
   serves her, and they adapt to the viewer's theme.

   The landing page used to draw its headings in --navy, a print token. In dark
   mode that was navy on near-black, about 1.3:1. tests/e2e/contrast.spec.js now
   fails if chrome borrows a print colour again.
--------------------------------------------------------------------------- */

:root{
  /* -- print: fixed, never themed -- */
  --navy:#002470; --navy-deep:#0a1e58; --blue:#0086d9; --green:#6bad00; --teal:#00acc7;
  --pale:#eaf2fb; --grey:#e8eaed; --ink:#1d3667; --rule:#dfe6f0; --quotegrey:#e9eff7;

  /* -- chrome: warm paper rather than cool grey -- */
  --chrome-bg:#fffaf2; --chrome-panel:#ffffff; --chrome-line:#f0e2d2;
  --chrome-ink:#2b2620; --chrome-mute:#6f6559; --chrome-field:#fffcf7;

  /* One action colour, for every control that does something: buttons, links,
     focus rings. Deliberately not any of the section hues below — if
     "clickable" were also "the intro section", she would have to learn which
     pink meant which. */
  --accent:#be185d; --accent-ink:#ffffff; --accent-hover:#9d174d;

  /* One hue per newsletter section. These are wayfinding, not decoration: she
     finds Conferences by colour before she reads the word. Deep enough to
     clear 4.5:1 as label text on the panel; the two pinned bands take a
     neutral, because they are not sections she moves or switches off. */
  --s-intro:#075985;        /* sky      */
  --s-feature:#5b21b6;      /* violet   */
  --s-conferences:#115e59;  /* teal     */
  --s-rating:#854d0e;       /* amber    */
  --s-testimonial:#86198f;  /* fuchsia  */
  --s-didyouknow:#9a3412;   /* orange   */
  --s-custom:#3f6212;       /* lime     */
  --s-feedback:#0f766e;     /* teal-green */
  --s-pinned:#6f6559;       /* neutral  */
}

/* Dark mode inverts the relationship: the same seven hues, but bright against
   a deep ground rather than deep against a bright one. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --chrome-bg:#1b1822; --chrome-panel:#262230; --chrome-line:#3d3648;
    --chrome-ink:#f4eff8; --chrome-mute:#aca2bd; --chrome-field:#171420;
    --accent:#ff6f9c; --accent-ink:#241019; --accent-hover:#ff9ab8;
    --s-intro:#6fc3e8; --s-feature:#b79bff; --s-conferences:#4fd6b8;
    --s-rating:#ffc95c; --s-testimonial:#f08ae0; --s-didyouknow:#ff9e6b;
    --s-custom:#a3d95c; --s-feedback:#5eead4; --s-pinned:#aca2bd;
  }
}
:root[data-theme="dark"]{
  --chrome-bg:#1b1822; --chrome-panel:#262230; --chrome-line:#3d3648;
  --chrome-ink:#f4eff8; --chrome-mute:#aca2bd; --chrome-field:#171420;
  --accent:#ff6f9c; --accent-ink:#241019; --accent-hover:#ff9ab8;
  --s-intro:#6fc3e8; --s-feature:#b79bff; --s-conferences:#4fd6b8;
  --s-rating:#ffc95c; --s-testimonial:#f08ae0; --s-didyouknow:#ff9e6b;
  --s-custom:#a3d95c; --s-feedback:#5eead4; --s-pinned:#aca2bd;
}
*{box-sizing:border-box}
body{margin:0;background:var(--chrome-bg);color:var(--chrome-ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---------- app chrome ---------- */
.app{display:grid;grid-template-columns:392px 1fr;min-height:100vh}
.panel{background:var(--chrome-panel);border-right:1px solid var(--chrome-line);
  padding:22px 24px 0;overflow-y:auto;max-height:100vh}
.panel h1{font-family:Montserrat,sans-serif;font-size:17px;font-weight:700;margin:0 0 2px;letter-spacing:-.01em}
.panel .sub{font-size:13.5px;color:var(--chrome-mute);margin:0 0 20px;line-height:1.45}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:22px -24px 0;position:sticky;bottom:0;
  background:var(--chrome-panel);padding:14px 24px;border-top:1px solid var(--chrome-line);
  box-shadow:0 -8px 16px -12px rgba(0,0,0,.22)}
.btn{font:inherit;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--chrome-mute);border-color:var(--chrome-line)}
.btn.ghost:hover{color:var(--chrome-ink)}
.stage{padding:28px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;max-height:100vh}
.scaler{transform-origin:top center}

/* ---------- editing panel (Task 9) ----------
   Values matched to success/testimonialbuilder.html's inline stylesheet — same
   sibling tool, same chrome custom properties, no new colours introduced. */

/* ---------- the section spine ----------
   Each .group carries a 3px bar in its own colour. Stacked, they form one
   continuous spine down the panel, and a section that is switched off fades
   its bar to a quarter — so the spine tells her which sections are in this
   month's issue before she reads a single label.

   The colour appears here and on the label, and nowhere else. No fills, no
   tinted backgrounds: it is wayfinding, and it stops being useful the moment
   it becomes decoration. */
.group{
  position:relative;
  border-top:1px solid var(--chrome-line);
  padding:16px 0 16px 13px;
}
.group:first-of-type{border-top:0}
.group::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; border-radius:2px;
  background:var(--section,var(--chrome-line));
}
.group:has(.switch input:not(:checked))::before{opacity:.25}

.group[data-group="masthead"]    {--section:var(--s-pinned)}
.group[data-group="intro"]       {--section:var(--s-intro)}
.group[data-group="conferences"] {--section:var(--s-conferences)}
.group[data-group="rating"]      {--section:var(--s-rating)}
.group[data-group="feature"]     {--section:var(--s-feature)}
.group[data-group="testimonial"] {--section:var(--s-testimonial)}
.group[data-group="didyouknow"]  {--section:var(--s-didyouknow)}
.group[data-group="custom"]      {--section:var(--s-custom)}
.group[data-group="feedback"]    {--section:var(--s-feedback)}
.group[data-group="footer"]      {--section:var(--s-pinned)}

/* Beats the bare `.eyebrow` in newsletter.css, which stays --blue because it
   also styles the eyebrow printed on the page. Same class, two jobs, and the
   page's job is the one that must not change. */
.panel .eyebrow{color:var(--section,var(--chrome-mute))}

/* Section name on the left, up/down arrows right-aligned. */
.grouphead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.grouphead .eyebrow{margin:0}                 /* .eyebrow's own bottom margin is for page copy, not this row */

/* Checkbox + label as one clickable row, label vertically centred against the box. */
.switch{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer}
.switch input{margin:0;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.switch .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The up/down pair. Dimmed rather than hidden when its block is off, so the
   row doesn't jump — she can still see it's there, just inert until switched on. */
.moves{display:flex;flex:0 0 auto;gap:2px}
.switch:has(input:not(:checked)) + .moves{opacity:.35}
.moves .rowbtn{padding:2px 5px;text-decoration:none;font-size:13px;line-height:1;border-radius:4px}
.moves .rowbtn:hover{background:var(--chrome-field)}

.side{
  font: inherit;
  font-size: 11.5px;
  padding: 2px 4px;
  margin-left: 8px;
  color: var(--chrome-ink);
  background: var(--chrome-field);
  border: 1px solid var(--chrome-line);
  border-radius: 4px;
}

/* Borderless blue text button, same pattern as the testimonial builder's
   "Use as headline quote" / "Remove logo" rows. */
.rowbtn{background:none;border:0;padding:0;margin-top:5px;font:inherit;font-size:12px;
  color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rowbtn:hover{color:var(--chrome-ink)}
.rowbtn.danger{color:var(--chrome-mute)}
.rowbtn.danger:hover{color:var(--accent)}

.fields{display:flex;flex-direction:column}
.fields[hidden]{display:none}                 /* a display rule above would otherwise win over [hidden] */

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;margin:0 0 5px;color:var(--chrome-ink)}
.field input[type=text],.field textarea{width:100%;font:inherit;font-size:13.5px;padding:8px 10px;
  background:var(--chrome-field);color:var(--chrome-ink);
  border:1px solid var(--chrome-line);border-radius:6px;resize:vertical}
.field textarea{line-height:1.45}

.drop{border:1.5px dashed var(--chrome-line);border-radius:8px;padding:14px;text-align:center;
  font-size:12.5px;color:var(--chrome-mute);cursor:pointer;background:var(--chrome-field)}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--accent)}
.drop.busy{opacity:.6;pointer-events:none}

/* One .cardrow per conference. Stacked inputs rather than a compact row --
   "name" / "city" / "dates" read better top to bottom than squeezed side by
   side in a 392px panel. A top rule between cards, none before the first,
   matching the .group rhythm above. */
.cardrow{padding-top:10px;margin-top:10px;border-top:1px solid var(--chrome-line)}
.cardrow:first-child{padding-top:0;margin-top:0;border-top:0}
.cardrow input{width:100%;font:inherit;font-size:13.5px;padding:8px 10px;margin-bottom:6px;
  background:var(--chrome-field);color:var(--chrome-ink);
  border:1px solid var(--chrome-line);border-radius:6px}
.cardrow .rowbtn{margin-top:0}

.hint{display:block;font-size:12px;color:var(--chrome-mute)}

.appearance{margin:2px 0 12px;font-size:12.5px}
.appearance summary{cursor:pointer;color:var(--chrome-mute);font-weight:600;list-style:none}
.appearance summary::before{content:"\25B8  ";font-size:10px}
.appearance[open] summary::before{content:"\25BE  "}
.stylerow{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 0}
.stylerow label{display:flex;align-items:center;gap:6px;color:var(--chrome-ink)}
.stylerow select{font:inherit;font-size:11.5px;padding:2px 4px;color:var(--chrome-ink);
  background:var(--chrome-field);border:1px solid var(--chrome-line);border-radius:4px}
.stylerow .edge input{margin:0;accent-color:var(--accent);cursor:pointer}

.photofit{margin-top:10px;border:1px solid var(--chrome-line);border-radius:8px;padding:10px 12px;font-size:12.5px}
.photofit input[type=range]{width:110px;accent-color:var(--accent)}
.photofit output{min-width:3em;color:var(--chrome-mute)}

/* Reserves its line so a message appearing/disappearing never shifts the
   buttons below it. Wraps onto its own row inside the now-wrapping .actions. */
.status{flex:1 0 100%;min-height:1.3em;margin:0 0 2px;font-size:12px;line-height:1.3;color:var(--chrome-mute)}

/* Not emitted by buildPanel() yet — reserved for a "last published" line, to
   match pdfs.php's publish/overwrite language when that lands in the panel. */
.published{font-size:12px;line-height:1.4;color:var(--chrome-mute)}
.published a{color:var(--accent)}

/* ---------- open/duplicate dialog (Task 9b) ---------- */
.dlg{border:1px solid var(--chrome-line);border-radius:10px;padding:22px 24px;
     background:var(--chrome-panel);color:var(--chrome-ink);max-width:460px;width:90vw}
.dlg::backdrop{background:rgba(20,12,24,.5)}
.dlg h2{font-family:Montserrat,sans-serif;font-size:16px;margin:0 0 14px;color:var(--chrome-ink)}
#issuelist{list-style:none;padding:0;margin:0 0 12px}
#issuelist li{padding:10px 0;border-bottom:1px solid var(--chrome-line);font-size:13.5px}
#issuelist li:last-child{border-bottom:0}
#issuelist b{display:block;font-family:Montserrat,sans-serif}
#issuelist .when{color:var(--chrome-mute);font-size:12px}
#issuelist .rowacts{display:block;margin-top:4px}
#issuelist .rowacts .rowbtn + .rowbtn{margin-left:14px}
.dlgmsg{font-size:12.5px;color:var(--chrome-mute);min-height:1.3em;margin:0 0 12px}

/* ---------- print ----------
   The chrome resets prevent the sheet from staying in the app grid's second
   column, scaled to the screen, inside a scrolling stage: Chrome's preview
   then shows the middle of the page with scroll bars (feedback N11).
   Mirrors testimonialbuilder.html's own print block. Page-specific styling
   (box-shadow, margin) lives in newsletter.css's print block. */
@media print{
  body{background:#fff;margin:0}
  .app{display:block}
  .panel,.actions{display:none!important}
  .stage{padding:0;max-height:none;overflow:visible;display:block}
  .scaler{transform:none!important;height:auto!important;width:816px!important}
}