/* The sales cadence builder (template-parts/tool-sales-cadence-builder.php, root .sc; its script
   assets/js/tool-sales-cadence-builder.js), loaded only on /tools/sales-cadence-builder/ after the kit and tool.css.
   Two cards in the product's crisp style (BRANDBOOK section 20: a 1px hairline, radius 12, the card's own ground, no
   shadow, no tint): the settings and the plan, side by side from 1000 px, stacked under it; the guide's example tables
   (.sc-exs) are the same table on the guide's ground. A channel is the kit's own chip, .k-ch-li blue and .k-ch-em
   amber (BRANDBOOK section 9: a text label, never a logo), unstyled here; the primary goes to the control that is on
   and the green dot to the people who accepted. Nothing moves on its own. */

:root{
  --sc-card:var(--k-card,var(--panel));
  --sc-ok:var(--k-ok-ink,var(--ok));
}

.sc{text-align:left}
.sc-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:start}
.sc-card{min-width:0;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--sc-card);color:var(--ink)}
.sc-card-h{padding:12px 14px;border-bottom:1px solid var(--line)}
.sc-card-t{margin:0;font:700 13px/1.3 var(--sans);letter-spacing:0;color:var(--ink2)}
.sc-card-sub{margin:3px 0 0;font:400 12.5px/1.45 var(--sans);color:var(--mute);text-wrap:pretty}

/* ---- the settings ------------------------------------------------------------------------------------------------ */
.sc-form{padding:0}
.sc-f{min-width:0;margin:0;padding:14px 14px 16px;border:0;border-top:1px solid var(--line)}
.sc-card-h+.sc-f{border-top:0}
.sc-f[hidden]{display:none}
/* a legend floats so it sits inside the fieldset's padding as the touches' label does, not in its border */
.sc-l{display:block;float:left;width:100%;margin:0 0 10px;padding:0;font:600 13px/1.3 var(--sans);color:var(--ink2)}
.sc-l+*{clear:both}
.sc-hint{margin:8px 0 0;font:400 12.5px/1.45 var(--sans);color:var(--mute);text-wrap:pretty}
.sc-hint[hidden]{display:none}

/* a radio is the native input, kept for the keyboard and a screen reader, drawn as a row with its dot */
.sc-opts{display:grid;gap:2px}
.sc-opt{position:relative;display:block;cursor:pointer}
.sc-opt input,.sc-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sc-opt span{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border-radius:8px;font:500 14px/1.3 var(--sans);color:var(--k-text,var(--ink))}
.sc-opt span::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:1.5px solid color-mix(in srgb,var(--mute) 70%,transparent);background:var(--sc-card)}
.sc-opt:hover span{background:var(--sunk)}
.sc-opt input:checked+span{color:var(--ink2)}
.sc-opt input:checked+span::before{border:5px solid var(--ai)}
.sc-opt input:focus-visible+span{outline:2px solid var(--blue);outline-offset:1px}

/* the length: a segmented control of three radios */
.sc-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:2px;border-radius:10px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.sc-seg label{position:relative;display:block;cursor:pointer}
.sc-seg span{display:grid;place-items:center;height:34px;padding:0 6px;border-radius:8px;font:500 13.5px/1 var(--sans);color:var(--mute);white-space:nowrap}
.sc-seg label:hover span{color:var(--ink2)}
.sc-seg input:checked+span{background:var(--sc-card);box-shadow:0 0 0 1px var(--line);color:var(--ink2)}
.sc-seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:1px}

/* the touches: the native select, its own arrow */
.sc-sel{position:relative}
.sc-sel select{display:block;box-sizing:border-box;width:100%;height:40px;margin:0;padding:0 36px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--sc-card);font:500 14px/1 var(--sans);color:var(--ink2);-webkit-appearance:none;appearance:none;cursor:pointer}
.sc-sel select:hover{border-color:color-mix(in srgb,var(--mute) 55%,transparent)}
.sc-sel select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.sc-sel svg{position:absolute;top:50%;right:12px;width:16px;height:16px;margin-top:-8px;color:var(--mute);pointer-events:none}

/* weekends off: a switch (a checkbox with role switch), its words left */
.sc-sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.sc-sw-t{min-width:0}
.sc-sw-t b{display:block;font:600 13px/1.3 var(--sans);color:var(--ink2)}
.sc-sw-t small{display:block;margin-top:3px;font:400 12.5px/1.45 var(--sans);color:var(--mute)}
.sc-sw input{position:absolute;right:0;top:50%;width:40px;height:24px;margin:-12px 0 0;opacity:0;cursor:pointer}
.sc-sw i{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--mute) 35%,transparent);pointer-events:none}
.sc-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(20,21,28,.2)}
.sc-sw input:checked+i{background:var(--ai)}
.sc-sw input:checked+i::after{left:19px}
.sc-sw input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}

/* ---- the plan ---------------------------------------------------------------------------------------------------- */
.sc-out-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;min-height:44px}
.sc-out-t{min-width:0}
.sc-acts{display:flex;align-items:center;gap:6px}
.sc-btn{display:inline-flex;align-items:center;gap:7px;height:38px;margin:0;padding:0 12px;border:0;border-radius:10px;background:transparent;font:500 14px/1 var(--sans);color:var(--k-text,var(--ink));cursor:pointer}
.sc-btn:hover{background:var(--sunk);color:var(--ink2)}
.sc-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sc-btn svg,.sc-csv svg{display:block;flex:none;width:16px;height:16px}
.sc-btn.sc-done{color:var(--sc-ok)}
/* the line a failed copy shows for a few seconds, the whole width under the title and the buttons */
.sc-out-h .sc-msg{flex:1 0 100%;margin:0;color:var(--ink2)}

/* the table: hairline rows, a touch that branches keeps its two rows together */
.sc-tw{min-width:0}
.sc-table{width:100%;border-collapse:collapse;table-layout:fixed;font:400 14px/1.5 var(--sans);color:var(--k-text,var(--ink))}
.sc-table th{padding:10px 12px;border-bottom:1px solid var(--line);font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--mute)}
.sc-table td{padding:11px 12px;vertical-align:top;text-wrap:pretty}
.sc-table tbody tr+tr>td{border-top:1px solid var(--line)}
.sc-table tbody tr.sc-twin>td{border-top:1px dashed color-mix(in srgb,var(--line) 100%,transparent);padding-top:7px}
.sc-table th.sc-day{width:76px}
.sc-table th.sc-chc{width:112px}
.sc-table th.sc-step{width:150px}
.sc-table th.sc-who{width:122px}
.sc-table th:first-child,.sc-table td:first-child{padding-left:16px}
.sc-table th:last-child,.sc-table td:last-child{padding-right:16px}
.sc-day{white-space:nowrap}
.sc-day b{font:600 14px/1.5 var(--sans);color:var(--ink2)}
.sc-day span{margin-left:2px;font:500 12px/1.5 var(--mono);color:var(--mute)}
/* the second row of a touch carries its day for a screen reader only: the eye reads it from the row above */
.sc-twin .sc-day>*{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sc-step{font-weight:600;color:var(--ink2)}
.sc-say{color:var(--k-text,var(--ink))}
.sc-visit .sc-say,.sc-none .sc-say,.sc-none .sc-step{color:var(--mute)}


/* who a row goes to: everyone in the quiet ink, the people who accepted with a green dot, the rest with a grey one */
.sc-who span{display:inline-flex;align-items:center;gap:6px;font:400 13px/1.5 var(--sans);color:var(--mute);white-space:nowrap}
.sc-who-yes,.sc-who-no{font-weight:500}
.sc-who .sc-who-yes{color:var(--ink2)}
.sc-who .sc-who-no{color:var(--k-text,var(--ink))}
.sc-who-yes::before,.sc-who-no::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}
.sc-who-yes::before{background:var(--ok)}
.sc-who-no::before{background:color-mix(in srgb,var(--mute) 60%,transparent)}

/* how the plan is built: the rule in one paragraph under the table */
.sc-how{padding:14px 16px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--sunk) 60%,var(--sc-card));border-radius:0 0 12px 12px}
.sc-how-h{margin:0;font:700 13px/1.3 var(--sans);color:var(--ink2)}
.sc-how p{margin:6px 0 0;max-width:92ch;font:400 13.5px/1.6 var(--sans);color:var(--k-text,var(--ink));text-wrap:pretty}
.sc-how .sc-hint{color:var(--mute)}

/* ---- the guide's examples: one captioned card per plan -------------------------------------------------------------- */
.sc-exs{display:grid;gap:20px;margin-top:28px}
.sc-ex{margin:0;border:1px solid var(--line);border-radius:12px;background:var(--sc-card);overflow:hidden}
.sc-ex-h{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
.sc-ex-h b{display:block;font:700 13.5px/1.3 var(--sans);color:var(--ink2)}
.sc-ex-h span{display:block;margin-top:3px;font:400 12.5px/1.45 var(--sans);color:var(--mute)}
/* the guide's column is narrower than the builder: the who column gives way to the words */
.sc-exs .sc-table th.sc-step{width:132px}
.sc-exs .sc-table th.sc-who{width:112px}

/* ==== widths ========================================================================================================= */
/* the settings in two columns over the plan: the hairlines are the grid's 1px gaps on the line colour; weekends off
   takes the whole last row while the opener's choice shows, so no cell stands empty */
@media (max-width:1000px){
  .sc-grid{grid-template-columns:minmax(0,1fr)}
  .sc-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;background:var(--line)}
  .sc-form>*{background:var(--sc-card)}
  .sc-form .sc-card-h{grid-column:1/-1;border-bottom:0}
  .sc-form .sc-f{border-top:0}
  .sc-form .sc-f-sw{grid-column:1/-1}
  .sc-form:has([data-sc-open][hidden]) .sc-f-sw{grid-column:auto}
}
/* a phone: the settings in one column, and each row of the plan a small block (day, channel and who on one line, the
   step, then what to say), the column heads read by a screen reader only */
@media (max-width:760px){
  .sc-form{display:block;background:var(--sc-card)}
  .sc-form .sc-card-h{border-bottom:1px solid var(--line)}
  .sc-form .sc-f{border-top:1px solid var(--line)}
  .sc-form .sc-card-h+.sc-f{border-top:0}
  .sc-sel select{font-size:16px}
  .sc-acts{width:100%}
  .sc-acts>*{flex:1 1 0;justify-content:center}
  .sc-table,.sc-table tbody{display:block;width:auto}
  .sc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sc-table tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"day ch who" "step step step" "say say say";align-items:center;gap:6px 10px;padding:12px 14px}
  .sc-table tbody tr+tr{border-top:1px solid var(--line)}
  .sc-table tbody tr.sc-twin{border-top:1px dashed var(--line);grid-template-areas:"ch who who" "step step step" "say say say"}
  .sc-table tbody tr+tr>td,.sc-table tbody tr.sc-twin>td{border-top:0}
  .sc-table td,.sc-table td:first-child,.sc-table td:last-child,.sc-table tbody tr.sc-twin>td{display:block;padding:0}
  .sc-table td.sc-day{grid-area:day}
  .sc-table td.sc-chc{grid-area:ch}
  .sc-table td.sc-who{grid-area:who;justify-self:end}
  .sc-table td.sc-step{grid-area:step;margin-top:2px}
  .sc-table td.sc-say{grid-area:say}
  .sc-twin td.sc-day{position:absolute}
  .sc-how{padding:12px 14px 14px}
  .sc-ex-h{padding:12px 14px}
}