/* The Dancenter — apps.dancentergt.com
   Shared tokens and components. Sourced from the dancenter-design system;
   every value here comes from its tokens.css. */

@font-face{font-family:'Hartwell';src:url('/assets/fonts/Hartwell-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hartwell';src:url('/assets/fonts/Hartwell-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hartwell';src:url('/assets/fonts/Hartwell-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --brand-turquesa:#5ED3D0;

  --ink-strong:#000000; --ink:#111111; --ink-soft:#3E3C39; --ink-mid:#5C5A56;
  --ink-muted:#8A8781; --ink-faint:#B8B5B0; --ink-invert:#FFFFFF;

  --bg-page:#FFFFFF; --bg-black:#000000; --bg-band:#F7F6F4; --bg-subtle:#FAF9F7;
  --rule-hair:#EFEDEA; --rule:#E2DFDA; --rule-strong:#D6D3CE; --rule-ink:#111111;

  --warn-soft:#FBEBE2; --warn-line:#EDC6B4; --warn-ink:#86482F;
  --note-soft:#E0ECEB; --note-line:#A8C7C5; --note-ink:#245655;

  --font-text:'Hartwell',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  --fs-w-title:clamp(26px,6.2vw,38px);
  --fs-w-h1:clamp(21px,4.4vw,26px);
  --fs-w-h2:clamp(17px,3.2vw,20px);
  --fs-w-lead:clamp(18px,3.4vw,21px);
  --fs-w-body:clamp(16px,2.8vw,18px);
  --fs-w-note:clamp(14px,2.4vw,15px);
  --fs-w-label:clamp(12px,2.2vw,13px);
  --fs-w-micro:12px;

  --lh-tight:1.15; --lh-body:1.5; --lh-prose:1.6; --lh-cell:1.3;
  --ls-eyebrow:.26em; --ls-caps:.18em; --ls-caps-sm:.14em;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --pad-w-x:clamp(20px,6vw,56px);
  --pad-w-y:clamp(32px,8vw,48px);
  --gap-w-section:clamp(36px,9vw,56px);
  --measure-w:68ch;
  --sheet-w:820px;
  --tap-min:44px;

  --cell-pad-y:7px; --cell-pad-x:12px;
  --bw-hair:1px; --bw-accent:5px;
  --radius-0:0;
  --dash-w-sm:48px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg-page);color:var(--ink);
  font-family:var(--font-text);font-size:var(--fs-w-body);font-weight:var(--fw-regular);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
}
.app{max-width:var(--sheet-w);margin:0 auto;padding:var(--pad-w-y) var(--pad-w-x)}

/* ── Header ── */
.masthead{display:flex;flex-direction:column;gap:var(--sp-6);margin-bottom:var(--gap-w-section)}
.masthead img{height:94px;width:auto;display:block}
.eyebrow{
  font-size:var(--fs-w-label);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--ink-soft);
}
h1{
  font-size:var(--fs-w-title);font-weight:var(--fw-semibold);line-height:var(--lh-tight);
  color:var(--ink-strong);margin:var(--sp-2) 0 0;
}
.lead{
  font-size:var(--fs-w-lead);line-height:var(--lh-prose);color:var(--ink-soft);
  margin:var(--sp-3) 0 0;max-width:var(--measure-w);text-wrap:pretty;
}

/* ── Sections ── */
.step{display:flex;flex-direction:column;gap:var(--sp-5)}
.steps{display:flex;flex-direction:column;gap:var(--gap-w-section)}
.step + .step{border-top:var(--bw-hair) solid var(--rule);padding-top:var(--gap-w-section)}
.dash{display:block;width:var(--dash-w-sm);height:var(--bw-accent);background:var(--brand-turquesa)}
.step-head{display:flex;flex-direction:column;gap:var(--sp-2)}
h2{
  font-size:var(--fs-w-h1);font-weight:var(--fw-semibold);line-height:var(--lh-tight);
  color:var(--ink-strong);margin:0;
}

/* ── Forms ── */
label{
  display:block;font-size:var(--fs-w-label);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--ink-soft);
  margin-bottom:var(--sp-2);
}
.hint{
  display:block;font-size:var(--fs-w-note);font-weight:var(--fw-regular);
  text-transform:none;letter-spacing:normal;color:var(--ink-soft);line-height:var(--lh-body);
}
textarea,input,select{
  display:block;width:100%;font:inherit;font-size:var(--fs-w-body);color:var(--ink);
  background:var(--bg-page);border:var(--bw-hair) solid var(--rule-strong);
  border-radius:var(--radius-0);padding:var(--sp-3) var(--sp-4);
  min-height:var(--tap-min);outline:none;
}
textarea{min-height:132px;resize:vertical;line-height:var(--lh-body)}
select{cursor:pointer}
textarea:focus,input:focus,select:focus{border-color:var(--rule-ink)}
:focus-visible{outline:2px solid var(--ink-strong);outline-offset:2px}
input[type=checkbox]{
  width:auto;min-height:0;padding:0;accent-color:var(--ink-strong);
  inline-size:18px;block-size:18px;
}

/* ── Buttons ── */
button,.wa,.file-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding:var(--sp-3) var(--sp-5);
  font:inherit;font-size:var(--fs-w-label);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps-sm);text-decoration:none;
  color:var(--ink);background:transparent;
  border:var(--bw-hair) solid var(--rule-ink);border-radius:var(--radius-0);cursor:pointer;
}
button:hover,.wa:hover,.file-btn:hover{background:var(--bg-subtle)}
.primary{background:var(--bg-black);color:var(--ink-invert);border-color:var(--rule-ink)}
.primary:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.primary:focus-visible{outline-color:var(--ink-invert);outline-offset:-4px}
button:disabled{background:var(--bg-subtle);color:var(--ink-faint);border-color:var(--rule);cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ── Tokens found in the template ── */
.tokens{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.token{
  padding:var(--sp-1) var(--sp-2);background:var(--bg-subtle);
  border:var(--bw-hair) solid var(--rule);border-radius:var(--radius-0);
  font-size:var(--fs-w-note);font-weight:var(--fw-medium);color:var(--ink-soft);
}
.error{display:none;font-size:var(--fs-w-note);color:var(--warn-ink);margin-top:var(--sp-3)}
.error.show{display:block}

/* ── Saved templates ── */
.saved{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  padding-top:var(--sp-5);border-top:var(--bw-hair) solid var(--rule-hair);
}
.saved select{flex:1 1 var(--measure-w);min-width:0}

/* ── Mode tabs ── */
.modes{display:flex;gap:var(--sp-6);border-bottom:var(--bw-hair) solid var(--rule)}
.mode{
  min-height:var(--tap-min);padding:0 0 var(--sp-3);border:0;border-bottom:var(--bw-accent) solid transparent;
  background:transparent;color:var(--ink-soft);
  font-size:var(--fs-w-label);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps-sm);
}
.mode:hover{background:transparent;color:var(--ink-strong)}
.mode.is-active{color:var(--ink-strong);border-bottom-color:var(--brand-turquesa)}

/* ── Variables ── */
.variables{display:flex;flex-direction:column;gap:var(--sp-4)}
.variable{border:var(--bw-hair) solid var(--rule);background:var(--bg-page);padding:var(--sp-4)}
.variable textarea{min-height:96px}
.variable-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.variable-name{font-size:var(--fs-w-h2);font-weight:var(--fw-semibold);color:var(--ink-strong)}
.rows{
  font-size:var(--fs-w-label);font-weight:var(--fw-medium);text-transform:uppercase;
  letter-spacing:var(--ls-caps-sm);color:var(--ink-soft);
}
.variable.optional{background:var(--bg-subtle)}
.phone-grid{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.phone-grid input{flex:0 0 96px}
.phone-grid textarea{flex:1 1 var(--measure-w);min-width:0}
.phone-target{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.phone-target label{margin:0;flex:0 0 96px}
.phone-target select{flex:1 1 var(--measure-w);min-width:0}
.variable .hint{margin-top:var(--sp-3)}

/* ── Table paste ── */
.table-panel{display:flex;flex-direction:column;gap:var(--sp-5)}
.table-panel textarea{min-height:132px;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.check{
  display:flex;align-items:center;gap:var(--sp-3);margin:0;min-height:var(--tap-min);
  font-size:var(--fs-w-note);font-weight:var(--fw-medium);text-transform:none;
  letter-spacing:normal;color:var(--ink-soft);cursor:pointer;
}
.map{display:flex;flex-direction:column;gap:var(--sp-2)}
.map-row{display:flex;align-items:center;gap:var(--sp-3)}
.map-col{
  flex:1 1 0;min-width:0;padding:var(--sp-2) var(--sp-3);background:var(--bg-band);
  font-size:var(--fs-w-note);font-weight:var(--fw-medium);color:var(--ink-soft);
  line-height:var(--lh-cell);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.map-arrow{flex:0 0 auto;color:var(--ink-soft);font-size:var(--fs-w-note)}
.map select{flex:1 1 0;min-width:0;font-size:var(--fs-w-note);padding:var(--sp-2) var(--sp-3)}

/* ── Grid editor ── */
.grid-panel{display:flex;flex-direction:column;gap:var(--sp-5)}
.grid-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;border-top:var(--bw-hair) solid var(--rule-ink)}
thead th{
  padding:var(--cell-pad-y) var(--cell-pad-x);text-align:left;white-space:nowrap;
  font-size:var(--fs-w-label);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps-sm);color:var(--ink-soft);
  border-bottom:var(--bw-hair) solid var(--rule-strong);
}
tbody tr:nth-child(even){background:var(--bg-band)}
tbody th,tbody td{border-bottom:var(--bw-hair) solid var(--rule-hair)}
tbody th{
  padding:var(--cell-pad-y) var(--cell-pad-x);text-align:left;
  font-size:var(--fs-w-label);font-weight:var(--fw-medium);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
tbody td{padding:0}
/* Borderless in the cell: the table's own rules carry the structure, and the
   focus ring still marks the active field. */
tbody td input{
  border:0;background:transparent;min-height:var(--tap-min);
  padding:var(--cell-pad-y) var(--cell-pad-x);font-size:var(--fs-w-note);
}
tbody td input:focus{background:var(--bg-page)}
.row-del{
  min-height:var(--tap-min);min-width:var(--tap-min);padding:0;
  border:0;background:transparent;color:var(--ink-soft);font-size:var(--fs-w-body);
}
.row-del:hover{background:transparent;color:var(--warn-ink)}
.file-btn{position:relative;overflow:hidden;margin-bottom:0}
.file-btn:focus-within{outline:2px solid var(--ink-strong);outline-offset:2px}
.file-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;min-height:0}
.import-note{color:var(--ink-soft)}
.import-note.is-warn{color:var(--warn-ink)}

/* ── Results ── */
.results-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--sp-4)}
.count{
  font-size:var(--fs-w-label);font-weight:var(--fw-medium);text-transform:uppercase;
  letter-spacing:var(--ls-caps-sm);color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.messages{display:flex;flex-direction:column;gap:var(--sp-4)}
.message{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:var(--sp-4);padding:var(--sp-4);
  background:var(--bg-page);border:var(--bw-hair) solid var(--rule);
}
.message > div:first-child{flex:1 1 var(--measure-w);min-width:0}
.message-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.message-num{
  font-size:var(--fs-w-label);font-weight:var(--fw-semibold);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.badge{
  padding:var(--sp-1) var(--sp-2);background:var(--warn-soft);
  border:var(--bw-hair) solid var(--warn-line);color:var(--warn-ink);
  font-size:var(--fs-w-label);font-weight:var(--fw-semibold);line-height:var(--lh-cell);
}
.message-text{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-soft);line-height:var(--lh-prose)}
.message-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.sent{
  display:flex;align-items:center;gap:var(--sp-2);margin:0;min-height:var(--tap-min);
  font-size:var(--fs-w-note);font-weight:var(--fw-medium);text-transform:none;
  letter-spacing:normal;color:var(--ink-soft);cursor:pointer;
}
.message.is-sent{background:var(--bg-subtle);border-color:var(--rule-hair)}
.message.is-sent .sent{color:var(--note-ink)}
.message.is-missing{border-color:var(--warn-line)}
.empty{
  padding:var(--sp-10) var(--sp-5);background:var(--bg-subtle);
  border:var(--bw-hair) solid var(--rule);text-align:center;
  color:var(--ink-soft);font-size:var(--fs-w-note);
}

/* ── Toast ── */
.toast{
  position:fixed;left:50%;bottom:var(--sp-5);transform:translate(-50%,var(--sp-4));
  opacity:0;pointer-events:none;
  padding:var(--sp-3) var(--sp-5);background:var(--bg-black);color:var(--ink-invert);
  border-radius:var(--radius-0);
  font-size:var(--fs-w-note);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps-sm);
  transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Directory ───────────────────────────────────────────────────────────── */
.back{
  display:inline-block;font-size:var(--fs-w-label);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps-sm);color:var(--ink-soft);
  text-decoration:none;min-height:var(--tap-min);line-height:var(--tap-min);
}
.back:hover{color:var(--ink-strong)}

.apps{display:flex;flex-direction:column;border-top:var(--bw-hair) solid var(--rule-ink)}
.app-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:var(--sp-2) var(--sp-5);padding:var(--sp-5) 0;
  border-bottom:var(--bw-hair) solid var(--rule);text-decoration:none;
}
.app-row:hover{background:var(--bg-subtle)}
.app-name{
  font-size:var(--fs-w-h1);font-weight:var(--fw-semibold);color:var(--ink-strong);
  line-height:var(--lh-tight);
}
.app-desc{
  flex:1 1 var(--measure-w);min-width:0;
  font-size:var(--fs-w-note);color:var(--ink-soft);line-height:var(--lh-body);
}