/* ═══════════════════════════════════════════════════════════════════════════
 * signitur — EDITOR SHELL (index.html)
 * Sep 5. Brings the editor's chrome into the dashboard's language: the dark
 * rail on the left (the sidebar, flush to the edge), a light workspace with
 * two surfaces (controls · preview), pill controls, hairline + layered-shadow
 * depth, system type. Panel INTERNALS are touched only where they carried the
 * old blue or a tone that fails contrast. The rendered signature inside
 * #mockWrap is never styled from here — email doctrine: it carries its own
 * inline styles and must keep looking like real output.
 * Loads LAST on index.html, after editor-brand.css. Deleting the <link> reverts.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rail-w: 236px;
  --rail-bg: #1A110A; --rail-line: rgba(255, 255, 255, .07);
  --rail-ink: #FBF7F3; --rail-ink-2: #A69384;
  --work-bg: #F7F5F2; --surface: #FFFFFF; --hairline: rgba(30, 18, 9, .09);
  --ink-1: #161110;
  --lift-1: 0 1px 2px rgba(30, 18, 9, .05), 0 1px 1px rgba(30, 18, 9, .03);
  --lift-2: 0 4px 12px rgba(30, 18, 9, .07), 0 1px 3px rgba(30, 18, 9, .05);
  --ease: cubic-bezier(.32, .72, 0, 1);
  /* app.css neutrals the panel internals read — pointed at the dashboard's */
  --bg: #F7F5F2; --line: rgba(30, 18, 9, .09);
  --ink: #161110; --ink-2: #6B615A; --ink-3: #9C918A;
  --shadow: var(--lift-1); --card-r: 16px;
}

body {
  color: var(--ink-1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  /* the dashboard's ground: flat tone + the same 22px dot grid, no blue washes */
  background: radial-gradient(circle, rgba(30, 18, 9, .07) 1px, transparent 1px) -1px -1px / 22px 22px, var(--work-bg);
}
button, input, select, textarea { font-family: inherit; }

/* ── shell: rail flush left, two surfaces on the ground ──────────────── */
#app { padding: 0; gap: 16px; }
#sidebar {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  border: 0; border-right: 1px solid var(--rail-line); border-radius: 0; box-shadow: none;
  background: var(--rail-bg); color: var(--rail-ink);
  padding: 20px 12px 12px;
}
#panel, #preview {
  margin: 16px 0; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--lift-1);
}
#preview { margin-right: 16px; }

/* ── rail: brand row ─────────────────────────────────────────────────── */
.brand { padding: 0 8px 20px; gap: 10px; }
.brand-logo-link img { height: 24px; }
.adm-lbl { color: var(--rail-ink-2); }
#sidebar .switch .knob { background: rgba(255, 255, 255, .16); }
#sidebar .switch .knob::after { background: var(--rail-ink); box-shadow: none; }
#sidebar .switch input:checked + .knob { background: var(--o-btn-a, #FB8221); box-shadow: none; }
#sidebar .switch input:checked + .knob::after { background: #FFFFFF; }
#sidebar .switch input:focus-visible + .knob { box-shadow: 0 0 0 3px rgba(251, 130, 33, .45); }

/* ── rail: tabs, as the dashboard's nav pills ────────────────────────── */
#tabs { gap: 1px; }
.tab {
  gap: 10px; padding: 8px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--rail-ink-2);
  font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: -.006em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tab:hover { background: rgba(255, 255, 255, .05); color: var(--rail-ink); }
.tab.active { background: rgba(255, 255, 255, .09); color: var(--rail-ink); font-weight: 600; }
.tab-ic {
  width: 18px; height: 18px; border-radius: 0;
  background: transparent; color: inherit; opacity: .85; box-shadow: none;
}
.tab-ic svg { width: 16px; height: 16px; }
.tab.active .tab-ic { background: transparent; color: var(--o-btn-a, #FB8221); box-shadow: none; opacity: 1; }

.dash-link {
  margin: 10px 4px 0; padding: 7px 12px; border-radius: 999px;
  color: var(--rail-ink-2); font-weight: 500; font-size: 12.5px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.dash-link:hover { background: rgba(255, 255, 255, .05); color: var(--rail-ink); }

/* ── rail: the admin block, boxed like the dashboard's account ───────── */
.sidebar-foot.admin-only {
  border: 1px solid var(--rail-line); border-radius: 12px;
  background: rgba(255, 255, 255, .02); padding: 14px 10px 10px;
}
.admin-tag {
  background: linear-gradient(90deg, #FB8221, #FA962B); color: #FFFFFF; box-shadow: none;
  letter-spacing: .12em; font-weight: 700;
}
#sidebar .foot-label { color: var(--rail-ink-2); }
#folderSelect, #sigSelect {
  background: rgba(255, 255, 255, .06); color: var(--rail-ink);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 6px 8px;
}
#folderSelect option, #sigSelect option { background: #fff; color: #161110; }
.sig-actions button {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08);
  color: var(--rail-ink-2); border-radius: 8px;
}
.sig-actions button:hover { background: rgba(255, 255, 255, .1); color: var(--rail-ink); border-color: rgba(255, 255, 255, .14); }
#sigDel:hover { background: rgba(255, 80, 80, .18); color: #FFB4B4; border-color: rgba(255, 120, 120, .3); }

/* ── controls panel ──────────────────────────────────────────────────── */
#panelInner { padding: 24px 24px 60px; }
.panel-title h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sec-chip { background: #FFF3E7; color: #F4761B; border-radius: 8px; }
.sec-chip.big { border-radius: 10px; }
.section { border-top-color: var(--hairline); }
.pill { background: #FFF3E7; color: #F4761B; }
.hint, .switch-txt, .foot-label { color: var(--ink-2); }   /* --ink-3 is 2.88:1 on white */
#mockWrap .g-icons, #mockWrap .g-time, #mockWrap .m-sender small, #mockWrap .g-sender small { color: var(--ink-2); }
.row-label { letter-spacing: -.006em; }

.txt, .sel {
  border-color: var(--hairline); border-radius: 10px; background: #F7F5F2; color: var(--ink-1);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.txt:focus, .sel:focus {
  outline: none; background: #fff;
  border-color: #F4761B; box-shadow: 0 0 0 3px rgba(251, 130, 33, .18);
}
.mini, .color { border-color: var(--hairline); border-radius: 8px; }
.mini.on { background: var(--ink-1); border-color: var(--ink-1); }
.chip { border-color: var(--hairline); border-radius: 10px; }
.chip.selected { border-color: #F4761B; box-shadow: 0 0 0 3px rgba(251, 130, 33, .2); }
.chip::after, .icon-cell .check { background: #F4761B; }   /* burnt orange under the white check */
.icon-cell:hover { background: #F7F5F2; }
.icon-cell.on { color: var(--ink-1); background: #FFF3E7; }
.switch .knob { background: #DDD7D2; }
.switch input:checked + .knob { background: var(--o-btn-a, #FB8221); box-shadow: none; }
.switch input:focus-visible + .knob { box-shadow: 0 0 0 3px rgba(251, 130, 33, .45); }

.preset { border-radius: 10px; background: var(--ink-1); }
.btn-chip { border-radius: 10px; border-color: var(--hairline); }
.btn-chip.selected { border-color: #F4761B; box-shadow: 0 0 0 3px rgba(251, 130, 33, .18); }
.btn-chip i { color: #F4761B; }
.btn-editor { border-radius: 12px; border-color: var(--hairline); }
.drop-zone { border-color: rgba(30, 18, 9, .18); background: #FAF8F6; border-radius: 12px; }
.drop-zone:hover, .drop-zone.drag { border-color: #FA962B; background: #FFF3E7; }
.file-chip { background: #F7F5F2; border-radius: 10px; }
.file-chip .ok { color: #F4761B; }

.layout-card { border-color: var(--hairline); border-radius: 14px; }
.layout-card:hover { border-color: rgba(30, 18, 9, .16); box-shadow: var(--lift-2); }
.layout-card.selected {
  border-color: #FA962B; background: #FFF9F2;
  box-shadow: 0 0 0 3px rgba(251, 130, 33, .2), var(--lift-2);
}
.layout-card.selected::after {
  background: #F4761B;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .7), 0 8px 20px rgba(244, 118, 27, .35);
}
.ai-badge { background: var(--rail-bg); color: #FFB56B; box-shadow: none; }   /* the rail's own colours */
.lay-label { color: var(--ink-2); }

/* ── buttons: the dashboard's glowing pill + its quiet ghost ─────────── */
.primary {
  border-radius: 999px; background: linear-gradient(90deg, #FB8221, #FA962B); color: #FFFFFF;
  font-weight: 600; letter-spacing: -.006em;
  box-shadow: 0 0 0 1px rgba(251, 130, 33, .5), 0 6px 22px rgba(251, 130, 33, .28);
  transition: transform .1s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease);
}
.primary:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(251, 130, 33, .65), 0 8px 28px rgba(251, 130, 33, .4); }
.primary.big { padding: 12px 22px; font-size: 14px; }
.ghost-btn {
  border-radius: 999px; border-color: var(--hairline); background: var(--surface);
  color: var(--ink-1); font-weight: 500; font-size: 13px; box-shadow: var(--lift-1);
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.ghost-btn:hover { background: #FFF3E7; border-color: rgba(251, 130, 33, .5); color: #F4761B; }
#quickSave.attention { border-color: #FB8221; color: #F4761B; box-shadow: 0 0 0 3px rgba(251, 130, 33, .25); }

/* ── preview ─────────────────────────────────────────────────────────── */
.preview-head { padding: 20px 24px 12px; }
.preview-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sel-pill { border-radius: 999px; border-color: var(--hairline); box-shadow: var(--lift-1); padding: 3px 8px 3px 12px; }
.sel.bare { font-weight: 500; font-size: 13px; }
.seg { border: 0; border-radius: 999px; background: rgba(30, 18, 9, .06); padding: 4px; box-shadow: none; }
.seg button { border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: 12.5px; color: #5B514A; }
.seg button.active { background: #fff; color: var(--ink-1); font-weight: 600; box-shadow: var(--lift-1); }
#mockWrap { padding: 16px 24px; }
.preview-foot { padding: 12px 24px; }
#preview footer, .foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: #F4761B; }
.foot-links i { color: var(--ink-3); }

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  #sidebar { width: 72px; flex-basis: 72px; padding: 14px 8px; }
  .brand { padding: 0 0 14px; }
  .tab { justify-content: center; padding: 8px 0; }
}
@media (max-width: 740px) {
  #app { padding: 0; gap: 8px; }
  #sidebar {
    width: 100%; border-right: 0; border-bottom: 1px solid var(--rail-line);
    border-radius: 0; padding: 8px 12px; flex-wrap: wrap;   /* the admin controls may take their own row */
  }
  #panel, #preview { margin: 0 8px; }
  .brand { padding: 0; gap: 8px; }
  .brand-logo-link img { height: 18px; }
  /* back-link collapses to its chevron; the admin block drops its box */
  .dash-link { margin: 0 0 0 auto; padding: 8px; }
  .dash-link span { display: none; }
  .sidebar-foot.admin-only { border: 0; background: none; padding: 0; margin-left: 0; flex: 1 1 100%; justify-content: flex-end; }
  #mobileNav { background: var(--surface); border-top: 1px solid var(--hairline); }
  .m-tab { color: var(--ink-2); }
  .m-tab.active { color: #F4761B; }
}

/* section-header upsell (owner, Sep 6): "Upgrade to animate" beside Brand Logo on the free plan */
.sec-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 0; border-radius: 999px; background: linear-gradient(90deg, #FB8221, #FA962B); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -.006em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(251, 130, 33, .4), 0 4px 14px rgba(251, 130, 33, .26);
  transition: transform .1s var(--ease), filter .18s var(--ease);
}
.sec-cta:hover { filter: brightness(1.05); }
.sec-cta:active { transform: scale(.975); }
.sec-cta svg { width: 12px; height: 12px; }

/* MOBILE PASS (owner, Sep 6): the panel/preview cards took 100% + their 8px side margins
   and poked 8px past a phone screen; let them size to the column instead. */
@media (max-width: 740px) {
  #app { overflow-x: hidden; }
  #panel, #preview { width: auto; min-width: 0; max-width: calc(100% - 16px); box-sizing: border-box; }
  #panelInner { overflow-x: hidden; }
}