/* ==========================================================================
   ИТ поддръжка „Спойка“ — the IT health check's CSS (the wizard, its
   summary, the send form, the plain page without JavaScript, and the summary
   the staff screen borrows).

   Loaded AFTER assets/css/site.css by the health check, api/plan.php and the
   staff screens. EVERY RULE IS SCOPED UNDER `.spk-planner` and every class is
   `spk-`, so no marketing component reaches a planner control (§32.4 #6) and
   no planner rule reaches a marketing page. Every colour is one of
   site.css's own `:root` tokens.

   THE RULES THIS SHEET KEEPS (APP-SPEC §9):
     - radios and checkboxes keep their natural width; a label wraps beside
       its control and never squeezes to one word per line at 320 px (§32.4 #7);
     - the two ends of a range share ONE class, `.spk-end`, and one size;
     - the summary carries no meter, bar, colour scale or rank: an area is a
       heading and its sentences, all of them alike, in the order the answers
       put them;
     - text on its own ground at 4.5:1 or better;
     - `[hidden]` hides (§25.9: a display rule must not outrank it);
     - no focus at page load (planner.js moves focus only when a button does).
   ========================================================================== */

.spk-planner [hidden] { display: none !important; }
.spk-planner { color: var(--body); font-family: var(--sans); }
.spk-planner .spk-app { min-height: 12rem; }
.spk-planner .spk-step:focus { outline: none; }
.spk-planner .spk-result, .spk-planner .spk-sent, .spk-planner .spk-refused { max-width: 100%; }
.spk-planner .spk-step:focus-visible { outline: 3px solid var(--seal-dk); outline-offset: 4px; }

/* ------------------------------------------------------------ headings */
.spk-planner .spk-h { font-family: var(--serif); color: var(--ink); font-size: clamp(1.35rem, 3.4vw, 1.75rem); line-height: 1.2; margin: 0 0 .8rem; }
.spk-planner .spk-h3 { font-family: var(--serif); color: var(--ink); font-size: 1.2rem; line-height: 1.25; margin: 1.8rem 0 .6rem; }
.spk-planner .spk-h4 { font-family: var(--sans); color: var(--ink); font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 1.2rem 0 .3rem; }

/* ------------------------------------------------------------ progress through the ten questions (never on the summary) */
.spk-planner .spk-progress { height: 6px; background: var(--bone-2); border-radius: 999px; overflow: hidden; margin: 0 0 .5rem; }
.spk-planner .spk-progress-fill { height: 100%; background: var(--seal-dk); border-radius: 999px; }
.spk-planner .spk-count { font-size: .9rem; color: var(--muted); margin: 0 0 1.1rem; }
.spk-planner .spk-kept { font-size: .92rem; color: var(--muted); line-height: 1.5; margin: .2rem 0 1rem; }

/* ------------------------------------------------------------ questions */
.spk-planner .spk-set { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: .9rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
.spk-planner .spk-set--bad { border-color: var(--signal); }
.spk-planner .spk-set > legend { font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.35; padding: 0 .3rem; max-width: 100%; white-space: normal; }
.spk-planner .spk-help { font-size: .92rem; color: var(--muted); line-height: 1.5; margin: .25rem 0 .7rem; }
.spk-planner .spk-choices { display: flex; flex-direction: column; gap: .45rem; }
.spk-planner .spk-choice {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  color: var(--body); line-height: 1.4; min-width: 0;
}
.spk-planner .spk-choice:hover { border-color: var(--line-2); background: var(--bone); }
.spk-planner .spk-choice input { flex: 0 0 auto; width: auto; height: auto; margin: .2rem 0 0; accent-color: var(--seal-dk); }
.spk-planner .spk-choice span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.spk-planner .spk-choice:has(input:checked) { border-color: var(--seal-dk); background: var(--seal-lt); }
.spk-planner .spk-choice:has(input:focus-visible) { outline: 3px solid var(--seal-dk); outline-offset: 2px; }
.spk-planner .spk-check { border: 0; background: transparent; padding: .35rem 0; }
.spk-planner .spk-check:hover { background: transparent; }
.spk-planner .spk-check--bad span { color: var(--signal); }

/* ------------------------------------------------------------ actions */
.spk-planner .spk-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.1rem 0; }
.spk-planner .spk-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------ the opening lines and the fixed notice */
.spk-planner .spk-open { font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0 0 1rem; }
.spk-planner .spk-open strong { color: var(--ink); }
.spk-planner .spk-notice {
  font-size: .95rem; line-height: 1.55; color: var(--warm-ink); background: var(--brass-lt);
  border: 1px solid var(--warm-line); border-left: 4px solid var(--warm-ink); border-radius: var(--r); padding: .75rem .9rem; margin: 1.4rem 0;
}
.spk-planner .spk-notice a { color: var(--warm-ink); }

/* ------------------------------------------------------------ the areas to talk about — all alike, no rank drawn */
.spk-planner .spk-block { margin: 1.2rem 0; }
.spk-planner .spk-areas { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.spk-planner .spk-area { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .3rem 1rem .6rem; }
.spk-planner .spk-area-h { font-family: var(--sans); color: var(--ink); font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: .7rem 0 .3rem; }
.spk-planner .spk-area p { color: var(--body); line-height: 1.55; margin: .4rem 0; }
.spk-planner .spk-cloud { color: var(--cool-ink); }
.spk-planner .spk-first-h { font-weight: 700; color: var(--ink); margin: .7rem 0 .2rem; }
.spk-planner .spk-first { margin: 0 0 .2rem; padding-left: 1.2rem; }
.spk-planner .spk-first li { margin: .25rem 0; line-height: 1.5; }
.spk-planner .spk-quiet { color: var(--body); line-height: 1.55; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .8rem 1rem; }

/* ------------------------------------------------------------ the sector's own duties */
.spk-planner .spk-sector-note, .spk-planner .spk-gdpr { color: var(--body); line-height: 1.55; background: var(--cool-lt); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .9rem; margin: .5rem 0; }
.spk-planner .spk-sector-note { color: var(--cool-ink); border-left: 4px solid var(--char-2); }

/* ------------------------------------------------------------ the plans */
.spk-planner .spk-table-wrap { overflow-x: auto; }
.spk-planner .spk-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 1rem; }
.spk-planner .spk-table th, .spk-planner .spk-table td { text-align: left; vertical-align: top; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
.spk-planner .spk-table th { color: var(--muted); font-weight: 600; width: 42%; font-size: .95rem; }
.spk-planner .spk-table td { color: var(--ink); }
.spk-planner .spk-table tbody + tbody .spk-plan-head th, .spk-planner .spk-table tbody + tbody .spk-plan-head td { border-top: 2px solid var(--line-2); }
.spk-planner .spk-table .spk-plan-head th, .spk-planner .spk-table .spk-plan-head td { background: var(--bone); color: var(--ink); font-weight: 700; font-size: 1rem; }
.spk-planner .spk-table .spk-net th, .spk-planner .spk-table .spk-net td { color: var(--ink); }
.spk-planner .spk-table .spk-tax th, .spk-planner .spk-table .spk-tax td { color: var(--muted); }
.spk-planner .spk-table .spk-total th, .spk-planner .spk-table .spk-total td { color: var(--ink); font-weight: 700; }
.spk-planner .spk-table .spk-covers td { color: var(--body); font-size: .95rem; line-height: 1.45; }
/* BOTH ENDS OF EVERY RANGE: ONE CLASS, ONE SIZE */
.spk-planner .spk-end { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1em; color: var(--brass-dk); white-space: nowrap; }
.spk-planner .spk-onboard { margin: .2rem 0; }
.spk-planner .spk-licences { margin-top: .6rem; }
@media (max-width: 520px) {
  .spk-planner .spk-table th, .spk-planner .spk-table td { display: block; width: auto; border-bottom: 0; padding: .4rem .7rem; }
  .spk-planner .spk-table th { padding-bottom: 0; }
  .spk-planner .spk-table tr { display: block; border-bottom: 1px solid var(--line); }
}

/* ------------------------------------------------------------ the notes from the answers */
.spk-planner .spk-note { color: var(--body); line-height: 1.55; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--char-2); border-radius: var(--r); padding: .6rem .9rem; margin: .5rem 0; }

/* ------------------------------------------------------------ the disclosure list and the answers */
.spk-planner .spk-disclosure { margin: 0; padding-left: 1.15rem; }
.spk-planner .spk-disclosure li { margin: .4rem 0; line-height: 1.55; }
.spk-planner .spk-disclosure strong { color: var(--ink); }
.spk-planner .spk-disclosure a, .spk-planner .spk-help a { color: var(--seal-dk); }
.spk-planner .spk-answers { margin: 1.2rem 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem 1rem; }
.spk-planner .spk-answers summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.spk-planner .spk-answers dl, .spk-planner .spk-answers-list { margin: .6rem 0 0; }
.spk-planner .spk-answers dt, .spk-planner .spk-answers-list dt { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.spk-planner .spk-answers dd, .spk-planner .spk-answers-list dd { margin: .1rem 0 0; color: var(--ink); }

/* ------------------------------------------------------------ refusals */
.spk-planner .spk-refused .spk-refusal { margin: 0 0 1rem; }
.spk-planner .spk-refusal { font-size: 1.02rem; line-height: 1.6; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-left: 4px solid var(--signal); border-radius: var(--r); padding: .8rem 1rem; }
.spk-planner .spk-alert { color: var(--ink); background: var(--signal-lt); border: 1px solid var(--signal); border-radius: var(--r); padding: .65rem .85rem; margin: .8rem 0; }

/* ------------------------------------------------------------ the send form */
.spk-planner .spk-send { margin: 1.6rem 0 0; padding: 1.1rem 1.1rem .4rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg); }
.spk-planner .spk-send .spk-h3 { margin-top: 0; }
.spk-planner .spk-grid { display: grid; grid-template-columns: 1fr; gap: .2rem 1rem; }
@media (min-width: 640px) { .spk-planner .spk-grid { grid-template-columns: 1fr 1fr; } }
.spk-planner .spk-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .8rem; min-width: 0; }
.spk-planner .spk-field label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.spk-planner .spk-field input { font: inherit; color: var(--body); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: .55rem .65rem; width: 100%; box-sizing: border-box; }
.spk-planner .spk-field input:focus-visible { outline: 3px solid var(--seal-dk); outline-offset: 1px; }
.spk-planner .spk-field--bad input { border-color: var(--signal); }
.spk-planner .spk-field--bad label { color: var(--signal); }
.spk-planner .spk-field .spk-help { margin: 0; }
.spk-planner .spk-lead { color: var(--ink); line-height: 1.55; margin: 1rem 0 .4rem; }
/* THE HONEYPOT: out of sight and out of the tab order, never display:none (some bots skip those) */
.spk-planner .spk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ sent */
.spk-planner .spk-sent .spk-ref { font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .02em; }

/* ------------------------------------------------------------ the plain page */
.spk-planner .spk-plain { margin: 1rem 0; }
.spk-page .spk-demo-notice { margin-top: 2rem; }