/* ==========================================================================
   Disha CoverCraft AI — style.css
   Design language: "letterhead studio" — warm ivory paper + ink + brass,
   a serif display face for headings and the actual letter, a quiet grotesque
   for the working UI. The signature element is the paper preview itself:
   a real sheet with a deckle-soft shadow and a wax-seal score badge.
   ========================================================================== */

:root{
  /* ---- palette (light) ---- */
  --paper:      #F6F3EC;
  --surface:    #FFFFFF;
  --surface-2:  #FBF9F4;
  --ink:        #1C2127;
  --ink-soft:   #565F6B;
  --line:       #E1DACB;
  --line-soft:  #ECE7D9;
  --brass:      #B8925A;
  --brass-ink:  #7A5B32;
  --teal:       #3F6659;
  --rose:       #A6483A;

  --accent: var(--brass);
  --accent-ink: var(--brass-ink);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --font-scale: 1;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(28,33,39,.06);
  --shadow-md: 0 6px 20px rgba(28,33,39,.08);
  --shadow-paper: 0 2px 6px rgba(28,33,39,.06), 0 18px 40px -12px rgba(28,33,39,.18);

  --topbar-h: 56px;
  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --paper:      #14171C;
  --surface:    #1B1F26;
  --surface-2:  #20242C;
  --ink:        #ECE9E1;
  --ink-soft:   #9BA3AE;
  --line:       #2B303A;
  --line-soft:  #262B33;
  --shadow-paper: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -12px rgba(0,0,0,.6);
}
[data-accent="teal"]{ --accent: var(--teal); --accent-ink: #274B41; }
[data-accent="rose"]{ --accent: var(--rose); --accent-ink: #7A2F25; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: calc(15px * var(--font-scale));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p{ margin: 0 0 .6em; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:8px 14px; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ============================== TOP BAR ============================== */

.topbar{
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 40;
}
.topbar__left, .topbar__right{ display:flex; align-items:center; gap:8px; }
.topbar__center{ flex:1; display:flex; justify-content:center; }
.brand{ display:flex; align-items:center; gap:8px; margin-left:6px; }
.brand__mark{ color: var(--accent); font-size: 20px; transform: rotate(-8deg); display:inline-block; }
.brand__name{ font-family: var(--font-display); font-weight:600; font-size: 17px; letter-spacing: -.01em; }
.brand__name em{ font-style: italic; color: var(--accent-ink); }

.save-status{ font-size: 12.5px; color: var(--ink-soft); display:flex; align-items:center; gap:6px; }
.save-dot{ width:7px; height:7px; border-radius:50%; background: var(--teal); display:inline-block; }
.save-dot--busy{ background: var(--brass); animation: pulse 1s infinite; }
.save-dot--error{ background: var(--rose); }
@keyframes pulse{ 50%{ opacity:.35; } }

.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; border-radius: 10px;
  border:1px solid transparent; background:transparent; color: var(--ink-soft);
  cursor:pointer; transition: background var(--transition), color var(--transition);
}
.icon-btn:hover{ background: var(--surface-2); color: var(--ink); }
.icon-btn--sm{ width:28px; height:28px; }
.icon-btn--danger:hover{ color: var(--rose); }

.btn{
  font-weight:600; font-size:13.5px; padding:9px 16px; border-radius: 10px;
  border:1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor:pointer; transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active{ transform: translateY(0); }
.btn--primary{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-theme="dark"] .btn--primary{ background: var(--accent); color: #14171C; border-color: var(--accent); }
.btn--secondary{ background: var(--surface-2); }
.btn--ghost{ background: transparent; border-color: transparent; }
.btn--danger{ color: var(--rose); border-color: var(--rose); background: transparent; }
.btn--sm{ padding:6px 12px; font-size:12.5px; }
.btn--lg{ padding:13px 22px; font-size:15px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ============================== APP SHELL ============================== */

.app-shell{
  display:grid;
  grid-template-columns: 250px minmax(0,1fr) minmax(0,1.3fr);
  height: calc(100vh - var(--topbar-h));
}

/* ---------------- sidebar ---------------- */
.sidebar{
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 18px 12px 12px;
  overflow-y:auto;
  display:flex; flex-direction:column;
  transition: margin-left var(--transition), width var(--transition);
}
.sidebar__group-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft);
  padding: 14px 10px 6px;
}
.nav-list{ list-style:none; margin:0; padding:0; }
.nav-item{
  width:100%; text-align:left; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius: 9px; border:none; background:transparent;
  color: var(--ink-soft); font-size: 13.5px; cursor:pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover{ background: var(--surface-2); color: var(--ink); }
.nav-item.active{ background: var(--ink); color: var(--paper); font-weight:600; }
[data-theme="dark"] .nav-item.active{ background: var(--accent); color:#14171C; }
.nav-ico{ font-size:11px; width:16px; text-align:center; opacity:.8; }

.sidebar__progress{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  padding:12px; border-top:1px solid var(--line); margin-top:14px;
}
.sidebar__progress-label{ font-size:11.5px; color:var(--ink-soft); }
.sidebar__progress-value{ font-family: var(--font-display); font-size:17px; font-weight:600; }

.sidebar.is-collapsed{ margin-left:-250px; }

/* ---------------- panels ---------------- */
.panel{ overflow-y:auto; }
.panel--input{ padding: 26px 34px 90px; background: var(--paper); }
.panel--preview{
  background: var(--surface-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
}

.section-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; }
.section-head h2{ font-size: 24px; }
.section-head__sub{ color: var(--ink-soft); font-size:13.5px; margin-top:4px; max-width:52ch; }

/* ---------------- form fields ---------------- */
.field-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:14px 16px; margin-bottom:6px; }
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-size:12.5px; font-weight:600; color: var(--ink-soft); }
.field input, .field select, .field textarea,
[data-listbind]{
  font: inherit; font-size:13.8px; padding:9px 11px; border-radius: 9px;
  border:1px solid var(--line); background: var(--surface); color: var(--ink);
  width:100%; transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus, [data-listbind]:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  outline:none;
}
.field textarea{ resize: vertical; font-family: inherit; }
.field__help{ font-size:11.5px; color: var(--ink-soft); }

.select-chip{
  font-size:12.5px; padding:6px 10px; border-radius:20px; border:1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor:pointer;
}

/* ---------------- cards ---------------- */
.card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding:18px; margin-bottom:16px; box-shadow: var(--shadow-sm);
}
.card__label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin-bottom:6px; }
.card h3{ font-size: 26px; }
.card__sub{ font-size:12.5px; color: var(--ink-soft); margin-top:4px; }
.card--tip{ background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.card--tip p{ font-size:13px; margin:0; }
.card--hero{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.dash-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:16px; }

.checklist{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; }
.checklist__item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; padding:8px 10px; border-radius:8px; cursor:pointer;
  color: var(--ink-soft); font-size:13.5px;
}
.checklist__item:hover{ background: var(--surface-2); }
.checklist__item.is-done{ color: var(--ink); }
.checklist__dot{
  width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:11px; flex-shrink:0;
}
.checklist__item.is-done .checklist__dot{ background: var(--teal); border-color: var(--teal); color:#fff; }

.mini-checklist{ list-style:none; margin:0; padding:0; font-size:13.5px; display:flex; flex-direction:column; gap:5px; color: var(--ink-soft); }

/* ---------------- list cards (experience/education/projects) ---------------- */
.list-stack{ display:flex; flex-direction:column; gap:12px; }
.list-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  transition: opacity var(--transition), transform var(--transition);
}
.list-card.is-dragging{ opacity:.4; }
.list-card__head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line-soft); }
.list-card__head strong{ flex:1; font-size:13.5px; font-weight:600; }
.list-card__head-actions{ display:flex; gap:4px; }
.drag-handle{ cursor:grab; color: var(--ink-soft); }
.list-card__body{ padding:14px; }

.empty-state{
  border:1.5px dashed var(--line); border-radius: var(--radius); padding:30px 20px; text-align:center;
  color: var(--ink-soft); font-size:13.5px;
}
.empty-state .btn{ margin-top:10px; }

/* ---------------- skills ---------------- */
.skill-cat{ margin-bottom:16px; }
.skill-cat__title{ font-size:12.5px; font-weight:600; color: var(--ink-soft); margin-bottom:8px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  border:1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius:20px; padding:6px 13px; font-size:12.5px; cursor:pointer;
  transition: all var(--transition);
}
.chip:hover{ border-color: var(--accent); }
.chip--on{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
[data-theme="dark"] .chip--on{ background: var(--accent); border-color: var(--accent); color:#14171C; }
.chip--matched{ background: color-mix(in srgb, var(--teal) 18%, var(--surface)); border-color: var(--teal); color: var(--teal); cursor:default; }
.selected-summary{ font-size:13px; color: var(--ink-soft); margin-top:6px; }

/* ---------------- generator ---------------- */
.generator-modes{ margin-bottom:16px; }
.gen-mode-card{ border:1px solid var(--accent); border-radius: var(--radius); padding:16px; background: var(--surface); }
.gen-mode-card__title{ font-weight:700; margin-bottom:4px; }
.gen-mode-card p{ font-size:13px; color: var(--ink-soft); margin:0; }
.generator-actions{ display:flex; gap:10px; margin: 16px 0; flex-wrap:wrap; }
.version-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.version-tab{
  border:1px solid var(--line); background: var(--surface); padding:7px 14px; border-radius:20px;
  font-size:12.5px; cursor:pointer; font-weight:600; color: var(--ink-soft);
}
.version-tab.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-theme="dark"] .version-tab.active{ background: var(--accent); color:#14171C; }

/* ---------------- analysis ---------------- */
.subscore{ margin-bottom:12px; }
.subscore__bar{ height:7px; border-radius:6px; background: var(--line-soft); overflow:hidden; margin-bottom:4px; }
.subscore__fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--teal)); border-radius:6px; }
.subscore__row{ display:flex; justify-content:space-between; font-size:12px; color: var(--ink-soft); }
.suggestion-list{ margin:0; padding-left:18px; font-size:13.5px; display:flex; flex-direction:column; gap:8px; }

.ring-svg .ring-fg{ transition: stroke-dashoffset .6s ease; }
.ring-text{ font-size: 15px; font-weight:700; fill: var(--ink); font-family: var(--font-body); }

/* ---------------- templates ---------------- */
.template-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap:12px; }
.template-card{
  border:1.5px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding:12px; text-align:left; cursor:pointer; transition: border-color var(--transition), transform var(--transition);
  min-width:0;
}
.template-card:hover{ transform: translateY(-2px); }
.template-card.is-active{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.template-card__preview{ height:70px; border-radius:6px; background: var(--paper); border:1px solid var(--line); padding:10px; display:flex; flex-direction:column; gap:6px; margin-bottom:8px; position:relative; overflow:hidden; }
.template-card__preview div{ height:6px; background: var(--line); border-radius:2px; }
.template-card__preview div:first-child{ width:42%; background: var(--tpl-swatch, var(--accent)); }
.template-card__name{ font-weight:700; font-size:12.8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.template-card__desc{ font-size:11.5px; color: var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.template-grid-heading{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin: 18px 0 8px; }
.template-grid-heading:first-child{ margin-top:0; }

/* ---------------- customization panel ---------------- */
.customize-card{ margin-top:22px; }
.customize-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:14px 16px; }
.color-field{ display:flex; flex-direction:column; gap:5px; }
.color-field label{ font-size:12.5px; font-weight:600; color: var(--ink-soft); }
.color-field__row{ display:flex; align-items:center; gap:8px; }
.color-field input[type="color"]{
  width:38px; height:34px; padding:2px; border-radius:8px; border:1px solid var(--line); background: var(--surface); cursor:pointer;
}
.color-field__hex{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); }
.range-field{ display:flex; flex-direction:column; gap:5px; }
.range-field label{ font-size:12.5px; font-weight:600; color: var(--ink-soft); display:flex; justify-content:space-between; }
.range-field input[type="range"]{ width:100%; accent-color: var(--accent); }
.customize-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------- saved letters ---------------- */
.saved-list{ display:flex; flex-direction:column; gap:10px; }
.saved-item{ display:flex; justify-content:space-between; align-items:center; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:13px 16px; }
.saved-item__actions{ display:flex; gap:6px; }

/* ---------------- export ---------------- */
.export-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-top:16px; }
.export-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  cursor:pointer; font-size:12.5px; color: var(--ink-soft); transition: border-color var(--transition), transform var(--transition);
}
.export-tile:hover{ border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.export-tile span{ font-family: var(--font-mono); font-weight:700; font-size:13px; color: var(--ink); }

/* ============================== PREVIEW PANEL ============================== */

.preview-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.preview-toolbar__group{ display:flex; align-items:center; gap:6px; }
.zoom-level{ font-size:12px; color: var(--ink-soft); width:38px; text-align:center; }

.score-strip{ display:flex; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); overflow-x:auto; }
.score-pill{ display:flex; align-items:center; gap:6px; background: var(--surface); border:1px solid var(--line); border-radius:20px; padding:5px 12px 5px 6px; font-size:12px; white-space:nowrap; }
.score-pill__ring{ display:inline-flex; }
.score-pill__ring svg .ring-text{ font-size:9px; }
.score-pill__label{ color: var(--ink-soft); }
.score-pill__val{ font-weight:700; }

.paper-stage{ flex:1; overflow:auto; padding: 30px; display:flex; justify-content:center; align-items:flex-start; }

.paper{
  /* Defaults — overridden inline per-template/customization via ccApplyTemplateClass */
  --tpl-primary: #1c2127; --tpl-secondary: #b8925a; --tpl-accent: #3f6659;
  --tpl-font-heading: var(--font-display); --tpl-font-body: var(--font-body);
  --tpl-font-size: 15.5px; --tpl-line-height: 1.75;
  --tpl-max-width: 640px; --tpl-min-height: 780px; --tpl-padding: 56px 60px;

  width: 100%; max-width: var(--tpl-max-width); min-height: var(--tpl-min-height);
  background: #FFFDF9; color: #1B1E22;
  padding: var(--tpl-padding); box-shadow: var(--shadow-paper);
  font-family: var(--tpl-font-heading); font-size: var(--tpl-font-size); line-height: var(--tpl-line-height);
  transform-origin: top center; transition: transform var(--transition);
  outline: none;
}
[data-theme="dark"] .paper{ background:#FBF8F1; color:#1B1E22; } /* paper itself always stays "paper" colored even in dark UI */
.paper__header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 28px; font-family: var(--tpl-font-body); font-size:13px; color:#4A5058; }
.paper__from strong{ color: var(--tpl-primary); }
.paper__to{ margin-bottom:18px; font-family: var(--tpl-font-body); font-size:13px; }
.paper__salutation{ margin-bottom:14px; }
.paper__signoff{ margin-top:22px; }
.paper__sign-name{ color: var(--tpl-primary); font-weight:600; }
.paper__signoff--script .paper__sign-name{ font-family: "Caveat", cursive; font-size:1.7em; font-weight:600; display:inline-block; margin-top:4px; }
.paper__signoff--typed-line{ padding-top:10px; border-top:1px solid var(--tpl-secondary); width:220px; }
.paper__placeholder{ color:#9AA0A8; font-family: var(--tpl-font-body); font-size:14px; text-align:center; margin-top:120px; }
.paper p{ margin: 0 0 14px; }

/* header-style variants */
.header-centered .paper__header{ flex-direction:column; align-items:center; text-align:center; gap:4px; }
.header-centered .paper__to{ text-align:center; }
.header-stacked .paper__header{ flex-direction:column; align-items:flex-start; gap:6px; }

/* template families — content identical, only the skin differs.
   Family-level look layers on top of the CSS custom properties above,
   so user customization (colors/type/margins) always still applies. */
.template-modern{ font-family: var(--tpl-font-body); border-top: 5px solid var(--tpl-secondary); }
.template-minimal{ font-family: var(--tpl-font-body); }
.template-minimal .paper__header{ border-bottom: 1px solid var(--line-soft); padding-bottom:12px; }
.template-executive{ letter-spacing:.01em; }
.template-executive .paper__header{ font-family: var(--tpl-font-heading); font-size:14px; }
.template-creative{ font-family: var(--tpl-font-body); border-left: 6px solid var(--tpl-accent); }
.template-creative .paper__salutation{ color: var(--tpl-accent); font-weight:700; }
.template-corporate{ font-family: "Times New Roman", serif; font-size: calc(var(--tpl-font-size) - 1px); }
.template-classic .paper__salutation{ color: var(--tpl-primary); }

.compare-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.compare-col__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.compare-paper{ max-width:none; min-height:0; transform:none; font-size:12.5px; padding:24px; max-height:420px; overflow:auto; }

/* ============================== TOAST / MODAL ============================== */

.toast-container{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background: var(--ink); color: var(--paper); padding:10px 18px; border-radius:10px; font-size:13px;
  opacity:0; transform: translateY(10px); transition: all var(--transition); box-shadow: var(--shadow-md);
}
.toast--show{ opacity:1; transform:translateY(0); }
.toast--success{ background: var(--teal); }
.toast--error{ background: var(--rose); }

.modal-backdrop{
  position:fixed; inset:0; background: rgba(20,20,20,.5); display:none; align-items:center; justify-content:center;
  z-index:300; padding:24px;
}
.modal-backdrop.is-open{ display:flex; }
.modal{ background: var(--surface); border-radius: var(--radius); width:min(920px, 100%); max-height:85vh; overflow:auto; box-shadow: var(--shadow-md); }
.modal__head{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); }
.modal__body{ padding:20px; }

/* ============================== mobile FABs ============================== */

.mobile-preview-fab, .mobile-generate-fab{ display:none; }
#closePreviewMobile{ display:none; } /* only meaningful on the mobile slide-up preview; re-enabled below at <=900px */

/* ============================== RESPONSIVE ============================== */

@media (max-width: 1180px){
  .app-shell{ grid-template-columns: 220px minmax(0,1fr) minmax(0,1fr); }
  .dash-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px){
  .app-shell{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; position:relative; overflow:hidden; }
  .sidebar{
    position:fixed; top: var(--topbar-h); left:0; bottom:0; width:250px; z-index:50;
    transform: translateX(-100%); box-shadow: var(--shadow-md);
  }
  .sidebar:not(.is-collapsed){ transform: translateX(0); }
  .sidebar.is-collapsed{ margin-left:0; }
  .panel--input{ padding: 20px 18px 110px; }

  .panel--preview{
    position:fixed; top: var(--topbar-h); left:0; right:0; bottom:0; z-index:60;
    transform: translateY(100%); transition: transform var(--transition);
  }
  body.preview-open-mobile .panel--preview{ transform: translateY(0); }
  .mobile-preview-fab{
    display:block; position:fixed; right:16px; bottom:82px; z-index:45;
    background: var(--ink); color: var(--paper); border:none; padding:10px 16px;
    border-radius:24px; font-size:13px; font-weight:600; box-shadow: var(--shadow-md);
  }
  .mobile-generate-fab{
    display:block; position:fixed; left:16px; right:16px; bottom:16px; z-index:45;
    background: var(--accent); color:#14171C; border:none; padding:14px; font-weight:700;
    border-radius:14px; box-shadow: var(--shadow-md); font-size:14.5px;
  }
  .topbar__center{ display:none; }
  #closePreviewMobile{ display:inline-flex; }
  .topbar__right .btn--sm{ display:none; }
  .paper{ padding: 34px 26px; }
}

@media (max-width: 420px){
  .brand__name{ font-size:14.5px; }
}

/* ============================== PRINT ============================== */

@media print{
  /* #1 fix: Chrome/Edge/Firefox strip background colors and gradients by
     default when printing unless told otherwise. This is the actual reason
     the selected template's paper tint and accent styling disappeared. */
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html, body{ height:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:#fff !important; }

  .topbar, .sidebar, .panel--input,
  .preview-toolbar, .score-strip,
  .mobile-preview-fab, .mobile-generate-fab,
  .toast-container, .modal-backdrop, .skip-link{
    display:none !important;
  }

  .app-shell{ display:block !important; height:auto !important; overflow:visible !important; }

  .panel--preview{
    display:block !important; position:static !important; height:auto !important;
    overflow:visible !important; border:none !important; background:#fff !important; width:100% !important;
    transform:none !important;
  }

  .paper-stage{
    position:static !important; overflow:visible !important; height:auto !important;
    padding:0 !important; display:block !important; background:#fff !important;
  }

  /* #2 fix: only cancel what actually breaks a printed page (drop shadow,
     on-screen zoom scale, re-center now that flex-centering is gone).
     Everything else — background color, border accents, padding/margins,
     paper size, font — must NOT be touched here, since those are already
     applied per-template/per-customization as inline CSS variables on
     #paperSheet. The previous version forced border:none, padding:0.6in,
     max-width:none, and background:#fff on .paper itself, which is what
     was wiping out the chosen template's look. */
  /* Physical page size/margin now comes from the dynamically-injected
     #ccPageSetupStyle rule (see ccApplyPageSetup in script.js), built from
     the chosen Paper Size / Orientation / Margins. Letting .paper fill
     100% of that printable area (instead of keeping its on-screen preview
     max-width) is what makes it sit correctly centered on the page. */
  .paper{
    box-shadow: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Bug fix: .paper's on-screen min-height (sized to look like a full
     page inside the preview panel) was still active during print. On the
     real physical page — especially combined with @page margins — that
     forced a near-full-page-tall empty box before/around the actual
     letter text, which is what pushed content onto an unwanted 2nd sheet.
     Removing it lets the letter take only the height its own text needs. */

  .paper__header, .paper__to, .paper p, .paper__signoff{
    break-inside: avoid; page-break-inside: avoid;
  }
}

.preview-footnote{ font-size:.75rem; color: var(--ink-faint); text-align:center; display:flex; gap:6px; align-items:center; justify-content:center; }