/* ==========================================================================
   In-browser card editor
   ========================================================================== */

.editor-panel{position:sticky; top:92px;}

/* numbered steps */
.ed-step{margin-bottom:30px;}
.ed-step-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.ed-step-num{
  width:23px; height:23px; border-radius:50%; flex-shrink:0;
  background:var(--green); color:#fff;
  font-size:12px; font-weight:700;
  display:grid; place-items:center;
}
.ed-step-head h2{
  font-family:var(--body); font-size:16px; font-weight:700; margin:0;
}

/* text fields */
.ed-fields{display:flex; flex-direction:column; gap:13px;}
.ed-field label{
  display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;
}
.ed-field label .sub{font-weight:400; color:var(--ink-faint);}
.ed-field input[type="text"], .ed-field textarea{
  width:100%; padding:10px 12px;
  font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.ed-field textarea{min-height:66px; resize:vertical; line-height:1.5;}
.ed-field input[type="text"]:focus, .ed-field textarea:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(var(--green-rgb), 0.15);
}

/* the card line the focused box controls */
.card-preview [data-field].is-target{
  background:rgba(var(--c-accent-rgb), 0.15);
  box-shadow:0 0 0 2px rgba(var(--c-accent-rgb), 0.4);
}

.ed-group{margin-bottom:24px;}
.ed-label{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ed-label .hint{font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-faint);}

/* palette presets */
.ed-swatches{display:flex; gap:9px; flex-wrap:wrap;}
.ed-swatch{
  width:36px; height:36px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.ed-swatch span{position:absolute; inset:0;}
.ed-swatch span:nth-child(2){clip-path:polygon(100% 0,100% 100%,0 100%);}
.ed-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--green);}

/* individual colours */
/* minmax(0,1fr), not 1fr: a colour input carries a browser minimum width, and a
   plain 1fr track will not shrink below it - on a 390px screen that pushed the
   Accent swatch out past the edge of the panel. */
.ed-colors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.ed-color{display:flex; flex-direction:column; gap:6px;}
.ed-color span{font-size:12.5px; color:var(--ink-soft);}
.ed-color input[type="color"]{
  width:100%; height:38px; padding:2px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}

/* type + language */
.ed-chips{display:flex; flex-wrap:wrap; gap:8px;}
.ed-chip{
  padding:8px 13px; font-family:var(--body); font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); cursor:pointer;
}
.ed-chip:hover{background:var(--surface-2);}
.ed-chip[aria-pressed="true"]{border-color:var(--green); background:var(--gold-soft); font-weight:600;}

/* long forms (a CV has five groups) collapse into sections */
.ed-group-box{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--surface);}
.ed-group-box summary{
  cursor:pointer; padding:11px 14px; list-style:none;
  font-size:14px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.ed-group-box summary::-webkit-details-marker{display:none;}
.ed-group-box summary::after{content:"+"; color:var(--gold); font-size:18px; line-height:1;}
.ed-group-box[open] summary::after{content:"\2013";}
.ed-group-box[open] summary{border-bottom:1px solid var(--line);}
.ed-group-box .ed-fields{padding:14px;}

/* wide chips carry a second line of explanation */
.ed-chip-wide{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;}
.ed-chip-wide .sub{font-size:11.5px; color:var(--ink-faint); font-weight:400;}
.ed-chip[aria-pressed="true"] .sub{color:var(--ink-soft);}

/* checkbox row */
.ed-toggle{
  display:flex; align-items:center; gap:9px;
  margin-top:16px; font-size:14.5px; cursor:pointer;
}
.ed-toggle input{width:16px; height:16px; accent-color:var(--green); cursor:pointer;}

/* slider row */
.ed-slider{display:flex; align-items:center; gap:12px; margin-top:18px;}
.ed-slider label{font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}
.ed-slider input[type="range"]{flex:1; accent-color:var(--green); cursor:pointer;}
.ed-slider output{
  font-size:13px; color:var(--ink-soft); min-width:42px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* actions */
.ed-actions{display:flex; flex-direction:column; gap:10px; margin-top:26px;}
.ed-actions .btn{justify-content:center;}
.ed-row{display:flex; gap:10px;}
.ed-row .btn{flex:1;}

.ed-status{
  font-size:13.5px; color:var(--green); min-height:20px; margin:10px 0 0;
}
.ed-status:empty{margin:0; min-height:0;}

/* editable text affordance */
.card-preview [data-field]{
  cursor:text; border-radius:2px;
  transition:box-shadow .15s ease, background-color .15s ease;
}
.is-editable [data-field]:hover{
  box-shadow:inset 0 -1px 0 0 rgba(var(--c-accent-rgb), 0.55);
}
.is-editable [data-field]:focus{
  outline:none;
  background:rgba(var(--c-accent-rgb), 0.12);
  box-shadow:0 0 0 2px rgba(var(--c-accent-rgb), 0.45);
}

/* shown when the content had to be scaled down to fit one page */
.ed-fit-note{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--ink);
  background:var(--gold-soft); border:1px solid #e8dcc2;
  border-radius:var(--radius); padding:9px 13px; margin:0 0 14px;
}
.ed-fit-note[hidden]{display:none;}

/* editing banner over the stage */
.stage-hint{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--ink-soft);
  margin:0 0 16px;
}
.stage-hint svg{flex-shrink:0; color:var(--gold);}

/* ---------------------------------------------------------------------------
   Mobile: keep the page in view while you type.

   On a phone the preview sits above the form, so the moment you scroll down to
   a field the thing you are editing is off screen - and a CV form is
   twenty-two fields long. Once you scroll past it the stage sticks to the top
   as a compact strip, small enough to leave room for the form and large enough
   to read the line you are changing.
   ------------------------------------------------------------------------- */
@media (max-width:860px){
  .editor-panel{position:static;}

  /* A sticky element only sticks within its own parent's box, and the stage's
     wrapper is barely taller than the stage itself - so it scrolled away with
     it. display:contents lifts the stage into the grid, whose height is the
     whole page plus form, giving it something to stick through. */
  .detail-grid > div:first-child{display:contents;}

  .detail-stage{
    position:sticky; top:64px; z-index:6;
    transition:padding .18s ease, background-color .18s ease;
  }
  .detail-stage.is-mini{
    padding:10px;
    background:var(--paper);
    border-color:var(--line);
    box-shadow:0 6px 18px rgba(23,36,30,.13);
  }
  /* the aspect ratio is fixed, so setting the height gives the right width */
  .detail-stage.is-mini .card-preview,
  .detail-stage.is-mini .doc-preview{
    height:32vh; width:auto !important; max-width:100%;
  }
  .detail-stage.is-mini .stage-peek{display:block;}
}

.stage-peek{
  display:none; position:absolute; top:10px; right:12px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); background:none; border:0; cursor:pointer; padding:4px;
}
.stage-peek:hover{color:var(--green);}

@media print{
  .stage-peek{display:none !important;}
}

@media print{
  .editor-panel, .stage-hint{display:none !important;}
}