/* ============================================================
   LEDGER — résumé desk
   Tokens
   ============================================================ */
:root{
  --ink:        #1B2430;
  --ink-soft:   #242F3F;
  --ink-line:   rgba(255,255,255,.09);
  --paper:      #FCFBF7;
  --paper-line: #E4DFD3;
  --brass:      #B8935F;
  --brass-hi:   #D3AD79;
  --teal:       #3E7C74;
  --ink-text:   #E9EAEC;
  --ink-text-dim: #9AA3B2;
  --resume-accent: #2f5d50;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 3px;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; }
input, textarea{ font-family:inherit; font-size:14px; }
::selection{ background: var(--brass); color:#1a1a1a; }

/* ============================================================
   HEADER CHROME
   ============================================================ */
.chrome-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 28px;
  background: linear-gradient(180deg, #1D2634, #1B2430);
  border-bottom: 1px solid var(--ink-line);
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--brass);
  line-height:1;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:.2px; }
.brand-text span{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color: var(--ink-text-dim); }

.header-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

.template-swatches{ display:flex; gap:6px; background:var(--ink-soft); padding:4px; border-radius:6px; border:1px solid var(--ink-line); }
.swatch{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:none; color:var(--ink-text-dim);
  font-size:11.5px; font-weight:600; padding:6px 10px; border-radius:4px;
  transition:.15s;
}
.swatch span{ width:9px; height:9px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.3); }
.swatch--classic span{ background:#8C7355; }
.swatch--modern span{ background:#3E7C74; }
.swatch--technical span{ background:#6B7DB3; }
.swatch:hover{ color:var(--ink-text); }
.swatch.is-active{ background: var(--ink); color:var(--ink-text); box-shadow: inset 0 0 0 1px var(--brass); }

.accent-picker{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-text-dim); }
.accent-picker input[type=color]{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border:none; background:none; border-radius:50%; overflow:hidden; cursor:pointer;
}
.accent-picker input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.accent-picker input[type=color]::-webkit-color-swatch{ border:2px solid var(--ink-line); border-radius:50%; }

.io-actions{ display:flex; gap:8px; }
.btn{ border-radius:5px; border:1px solid transparent; padding:8px 14px; font-size:12.5px; font-weight:600; letter-spacing:.2px; transition:.15s; }
.btn-ghost{ background:transparent; border-color: var(--ink-line); color:var(--ink-text-dim); }
.btn-ghost:hover{ color:var(--ink-text); border-color:rgba(255,255,255,.25); }
.btn-primary{ background:var(--brass); color:#1B1508; border-color:var(--brass); }
.btn-primary:hover{ background:var(--brass-hi); }

.save-indicator{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--ink-soft); border:1px solid var(--ink-line); color:var(--ink-text-dim);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  padding:7px 14px; border-radius:20px; opacity:0; transition: opacity .3s, transform .3s; z-index:60; pointer-events:none;
}
.save-indicator.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   WORKSPACE GRID
   ============================================================ */
.workspace{
  display:grid;
  grid-template-columns: 64px 420px 1fr;
  min-height: calc(100vh - 60px);
}

/* ---- Tab rail: index-card tabs ---- */
.tab-rail{
  background: var(--ink-soft);
  border-right:1px solid var(--ink-line);
  display:flex; flex-direction:column;
  padding-top: 18px;
  gap:2px;
}
.tab{
  background:transparent; border:none; color: var(--ink-text-dim);
  writing-mode: vertical-rl; text-orientation:mixed;
  padding: 16px 0 16px 0;
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:12px; font-weight:600; letter-spacing:1px;
  border-left: 3px solid transparent;
  position:relative;
  transition:.15s;
}
.tab-num{ font-family:var(--font-mono); font-size:9.5px; color: var(--brass); letter-spacing:1px; }
.tab:hover{ color:var(--ink-text); background: rgba(255,255,255,.02); }
.tab.is-active{
  color:#fff;
  border-left-color: var(--brass);
  background: linear-gradient(90deg, rgba(184,147,95,.14), transparent);
}

/* ---- Editor desk ---- */
.editor-desk{
  background: var(--ink);
  padding: 28px 30px 60px;
  overflow-y:auto;
  border-right:1px solid var(--ink-line);
  max-height: calc(100vh - 60px);
}
.panel{ display:none; animation: fadeUp .25s ease; }
.panel.is-active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.panel h2{
  font-family: var(--font-display); font-weight:600; font-size:22px;
  margin: 0 0 4px;
  color:#fff;
}
.panel-hint{ color: var(--ink-text-dim); font-size:12.5px; margin:0 0 20px; line-height:1.5; max-width:36ch; }

.field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px 12px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-text-dim); }
label.full{ grid-column: 1/-1; }
input[type=text], input[type=email], input[type=tel], input[type=month], input[type=url], textarea, select{
  background: var(--ink-soft);
  border:1px solid var(--ink-line);
  color:#fff;
  border-radius: var(--radius);
  padding:9px 10px;
  font-size:13.5px;
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  resize:vertical;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--brass); box-shadow:0 0 0 3px rgba(184,147,95,.15); }
input::placeholder, textarea::placeholder{ color:#5C6577; }

/* ---- Repeating entry cards ---- */
.repeat-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.entry-card{
  background: var(--ink-soft);
  border:1px solid var(--ink-line);
  border-radius:6px;
  padding:16px;
  position:relative;
}
.entry-card .field-grid{ margin-top:10px; }
.entry-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.entry-head .drag-label{ font-family: var(--font-mono); font-size:10px; color:var(--brass); letter-spacing:1px; text-transform:uppercase; }
.entry-remove{
  background:transparent; border:none; color:var(--ink-text-dim); font-size:16px; line-height:1;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.entry-remove:hover{ background: rgba(255,90,90,.15); color:#ff8080; }

.row-inline{ display:flex; gap:10px; align-items:center; }
.row-inline label{ flex:1; }
.checkbox-inline{ display:flex; flex-direction:row; align-items:center; gap:6px; font-size:11px; white-space:nowrap; }
.checkbox-inline input{ width:15px; height:15px; }

.btn-add{
  background:transparent; border:1.5px dashed var(--ink-line); color: var(--brass);
  width:100%; padding:11px; border-radius:6px; font-size:12.5px; font-weight:700; letter-spacing:.3px;
}
.btn-add:hover{ border-color: var(--brass); background: rgba(184,147,95,.06); }

/* ============================================================
   PREVIEW STAGE
   ============================================================ */
.preview-stage{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.03), transparent 40%),
    #12181F;
  display:flex; justify-content:center;
  padding: 40px 30px 80px;
  overflow-y:auto;
  max-height: calc(100vh - 60px);
}
.preview-scale-wrap{ width: 100%; max-width: 800px; }

.preview-page{
  background: var(--paper);
  width: 100%;
  min-height: 1120px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.02);
  border-radius:2px;
  color:#26241E;
  padding: 56px 58px;
}

/* ---- shared resume typography ---- */
.r-name{ font-family:var(--font-display); font-weight:700; font-size:32px; margin:0; color:#1c1c1c; letter-spacing:.2px; }
.r-title{ font-family:var(--font-body); font-weight:600; font-size:14.5px; color: var(--resume-accent); margin:4px 0 0; letter-spacing:.3px; text-transform:uppercase; }
.r-contact{ font-family: var(--font-mono); font-size:11px; color:#4b4b46; margin-top:10px; display:flex; flex-wrap:wrap; gap:4px 14px; }
.r-section-title{
  font-family:var(--font-display); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1.4px;
  color: var(--resume-accent); margin:22px 0 10px; padding-bottom:5px; border-bottom:1.4px solid var(--resume-accent);
}
.r-section-title:first-of-type{ margin-top:24px; }
.r-summary{ font-size:13px; line-height:1.65; color:#3b3a35; margin:0; }
.r-entry{ margin-bottom:14px; }
.r-entry:last-child{ margin-bottom:0; }
.r-entry-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.r-entry-title{ font-weight:700; font-size:13.5px; color:#1c1c1c; }
.r-entry-sub{ font-size:12.5px; color: var(--resume-accent); font-weight:600; }
.r-entry-date{ font-family:var(--font-mono); font-size:11px; color:#6b6a63; white-space:nowrap; }
.r-entry-loc{ font-size:11.5px; color:#6b6a63; }
.r-bullets{ margin:6px 0 0; padding-left:16px; }
.r-bullets li{ font-size:12.5px; line-height:1.55; color:#3b3a35; margin-bottom:3px; }
.r-skills-group{ margin-bottom:8px; font-size:12.5px; line-height:1.6; }
.r-skills-cat{ font-weight:700; color:#1c1c1c; }
.r-skills-items{ color:#3b3a35; }
.r-empty-note{ color:#a9a49a; font-style:italic; font-size:12px; }

/* ---- Template: Classic (centered serif letterhead) ---- */
.template-classic .r-header{ text-align:center; border-bottom: 2px solid var(--resume-accent); padding-bottom:16px; }
.template-classic .r-contact{ justify-content:center; }
.template-classic .r-entry-head{ }

/* ---- Template: Modern (two column w/ accent sidebar) ---- */
.template-modern{ padding:0; display:grid; grid-template-columns: 230px 1fr; }
.template-modern .r-sidebar{ background: var(--resume-accent); color:#fff; padding:48px 26px; }
.template-modern .r-sidebar .r-name{ color:#fff; font-size:24px; }
.template-modern .r-sidebar .r-title{ color:#fff; opacity:.85; }
.template-modern .r-sidebar .r-contact{ flex-direction:column; color:#fff; opacity:.9; gap:8px; margin-top:16px; }
.template-modern .r-sidebar .r-section-title{ color:#fff; border-bottom-color: rgba(255,255,255,.4); font-size:12px; }
.template-modern .r-sidebar .r-skills-cat{ color:#fff; }
.template-modern .r-sidebar .r-skills-items{ color:rgba(255,255,255,.85); }
.template-modern .r-main{ padding:48px 40px; }
.template-modern .r-main .r-section-title:first-child{ margin-top:0; }

/* ---- Template: Technical (compact, monospace accents) ---- */
.template-technical{ padding:44px 50px; }
.template-technical .r-name{ font-family:var(--font-mono); font-size:26px; font-weight:700; }
.template-technical .r-title{ font-family:var(--font-mono); text-transform:none; letter-spacing:0; }
.template-technical .r-section-title{ font-family:var(--font-mono); border-bottom-style:dashed; font-size:12px; }
.template-technical .r-header{ border-bottom:1px dashed #b9b3a2; padding-bottom:14px; }
.template-technical .r-skills-items{ font-family:var(--font-mono); font-size:12px; }
.template-technical .r-entry-date{ font-weight:600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px){
  .workspace{ grid-template-columns: 56px 380px 1fr; }
}
@media (max-width: 920px){
  .workspace{ grid-template-columns: 1fr; }
  .tab-rail{ flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--ink-line); padding: 8px; }
  .tab{ writing-mode:horizontal-tb; padding:10px 14px; border-left:none; border-bottom:3px solid transparent; flex-shrink:0; }
  .tab.is-active{ border-bottom-color: var(--brass); border-left-color:transparent; }
  .editor-desk, .preview-stage{ max-height:none; }
  .field-grid{ grid-template-columns:1fr; }
  .header-actions{ gap:10px; }
  .chrome-header{ flex-wrap:wrap; gap:12px; }
}

/* ============================================================
   PRINT — only the paper survives
   ============================================================ */
@media print{
  @page{ size: Letter; margin: 0; }
  body *{ visibility:hidden; }
  .preview-page, .preview-page *{ visibility:visible; }
  .preview-page{
    position:absolute; top:0; left:0; width:100%; min-height:auto;
    box-shadow:none; border-radius:0; margin:0; padding: 46px 52px;
  }
  .template-modern{ padding:0; }
}