/*
 * tk_surveys — public (respondent) stylesheet
 *
 * Self-contained; does NOT inherit from Perfex's admin CSS. Kept
 * deliberately minimal (no framework) so the respondent page stays fast
 * to render on mobile. Visual language matches the ScoreApp reference:
 *   - deep black background
 *   - a single centered card
 *   - yellow (#facc15) accents on primary actions and progress
 *   - large, legible type
 */

:root {
    --tk-bg:        #0b0b0d;
    --tk-card:      #16161a;
    --tk-card-b:    #26262c;
    --tk-ink:       #f4f4f5;
    --tk-ink-dim:   #a1a1aa;
    --tk-accent:    #facc15;
    --tk-accent-d:  #eab308;
    --tk-danger:    #f87171;
    --tk-focus:     rgba(250, 204, 21, 0.35);
}

* { box-sizing: border-box; }

.tk-public-html, .tk-public-body {
    margin: 0;
    padding: 0;
    background: var(--tk-bg);
    color: var(--tk-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Body is a flex column so the header stays at the top, the main area
   grows to fill the remaining space (and vertically centres the card
   within itself), and the footer anchors at the bottom. Cleaner than
   the earlier `min-height: calc(100vh - 60px)` hack once we have a
   header of variable height. */
.tk-public-body {
    display: flex;
    flex-direction: column;
}

/* --- Header / logo ---------------------------------------------------- */

.tk-public-header {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 20px 12px;
}

.tk-public-logo {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    /* Modest shadow so the logo separates from the dark background
       when the asset is white-on-transparent. No-op for opaque logos. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Inline SVG fallback renders the same way but wants a slightly taller
   aspect ratio than the uploaded asset probably has, so we let it flex
   against its viewBox while capping width. */
svg.tk-public-logo-fallback {
    max-width: 320px;
    height: auto;
}

.tk-public-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}

.tk-public-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 16px 20px 28px;
    color: var(--tk-ink-dim);
    font-size: 12px;
}

/* --- Card -------------------------------------------------------------- */

.tk-public-card {
    background: var(--tk-card);
    border: 1px solid var(--tk-card-b);
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 680px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.tk-public-heading {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tk-ink);
}

.tk-public-lead {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--tk-ink-dim);
}

.tk-public-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tk-accent);
    margin-bottom: 12px;
}

.tk-public-question-label {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.tk-public-help {
    margin: 0 0 24px;
    color: var(--tk-ink-dim);
    font-size: 15px;
    line-height: 1.5;
}

.tk-public-req {
    color: var(--tk-accent);
    margin-left: 2px;
}

/* --- Form base --------------------------------------------------------- */

.tk-public-form {
    margin-top: 16px;
}

.tk-public-form-stacked .tk-public-field {
    margin-bottom: 16px;
}

.tk-public-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--tk-ink);
    margin-bottom: 8px;
}

.tk-public-input,
.tk-public-textarea,
.tk-public-field input[type="text"],
.tk-public-field input[type="email"] {
    width: 100%;
    background: #0f0f12;
    color: var(--tk-ink);
    border: 1px solid var(--tk-card-b);
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tk-public-textarea {
    resize: vertical;
    min-height: 140px;
}

.tk-public-input:focus,
.tk-public-textarea:focus,
.tk-public-field input:focus {
    outline: none;
    border-color: var(--tk-accent);
    box-shadow: 0 0 0 3px var(--tk-focus);
}

.tk-public-error {
    color: var(--tk-danger);
    font-size: 13px;
    margin: 6px 0 0;
}

.tk-public-inline-error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--tk-danger);
    font-size: 14px;
    margin-bottom: 16px;
}

/* --- Buttons ----------------------------------------------------------- */

.tk-public-actions {
    margin-top: 28px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.tk-public-actions-split {
    justify-content: space-between;
}

.tk-public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 80ms ease, background 120ms ease, color 120ms ease;
}

.tk-public-btn-primary {
    background: var(--tk-accent);
    color: #0b0b0d;
}

.tk-public-btn-primary:hover,
.tk-public-btn-primary:focus {
    background: var(--tk-accent-d);
}

.tk-public-btn-primary:active {
    transform: translateY(1px);
}

.tk-public-btn-ghost {
    background: transparent;
    color: var(--tk-ink-dim);
    border: 1px solid var(--tk-card-b);
}

.tk-public-btn-ghost:hover {
    color: var(--tk-ink);
    border-color: var(--tk-ink-dim);
}

/* --- Progress bar ------------------------------------------------------ */

.tk-public-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.tk-public-progress {
    flex: 1 1 auto;
    height: 6px;
    background: #24242b;
    border-radius: 999px;
    overflow: hidden;
}

.tk-public-progress-fill {
    height: 100%;
    background: var(--tk-accent);
    transition: width 250ms ease;
}

.tk-public-progress-label {
    font-size: 12px;
    color: var(--tk-ink-dim);
    white-space: nowrap;
}

/* --- Option pickers (single / multi / yes-no) ------------------------- */

.tk-public-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.tk-public-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--tk-card-b);
    border-radius: 12px;
    background: #111114;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}

.tk-public-option:hover {
    border-color: var(--tk-ink-dim);
}

.tk-public-option.is-selected {
    border-color: var(--tk-accent);
    background: rgba(250, 204, 21, 0.08);
}

/* Native radio/checkbox styled away — we use the label as the hit target. */
.tk-public-option input[type="radio"],
.tk-public-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--tk-accent);
    margin: 0;
}

.tk-public-option-label {
    font-size: 16px;
    line-height: 1.3;
}

/* --- Slider ------------------------------------------------------------ */

.tk-public-slider-wrap {
    padding: 20px 4px 8px;
}

.tk-public-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #24242b;
    border-radius: 999px;
    outline: none;
}

.tk-public-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tk-accent);
    cursor: grab;
    border: 4px solid #0b0b0d;
    box-shadow: 0 0 0 1px var(--tk-accent);
}
.tk-public-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tk-accent);
    cursor: grab;
    border: 4px solid #0b0b0d;
    box-shadow: 0 0 0 1px var(--tk-accent);
}

.tk-public-slider-value {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-top: 18px;
    color: var(--tk-accent);
}

.tk-public-slider-endpoints {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--tk-ink-dim);
    font-size: 13px;
}

/* --- NPS --------------------------------------------------------------- */

.tk-public-nps {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 6px;
    margin-top: 8px;
}

@media (max-width: 600px) {
    .tk-public-nps { grid-template-columns: repeat(6, 1fr); }
}

.tk-public-nps-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1px solid var(--tk-card-b);
    border-radius: 10px;
    background: #111114;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.tk-public-nps-button input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tk-public-nps-button:hover {
    border-color: var(--tk-ink-dim);
}

.tk-public-nps-button.is-selected,
.tk-public-nps-button input:checked + * {
    border-color: var(--tk-accent);
    background: rgba(250, 204, 21, 0.12);
    color: var(--tk-accent);
}

.tk-public-nps-endpoints {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--tk-ink-dim);
    font-size: 13px;
}

/* --- Thank-you --------------------------------------------------------- */

.tk-public-thankyou {
    text-align: center;
}

.tk-public-thankyou-icon {
    color: var(--tk-accent);
    margin-bottom: 18px;
}

/* --- Error ------------------------------------------------------------- */

.tk-public-error .tk-public-heading {
    color: var(--tk-danger);
}

/* --- Small screens ----------------------------------------------------- */

@media (max-width: 540px) {
    .tk-public-card     { padding: 28px 22px; border-radius: 12px; }
    .tk-public-heading  { font-size: 24px; }
    .tk-public-question-label { font-size: 20px; }
    .tk-public-main     { padding: 24px 16px; }
    .tk-public-slider-value { font-size: 34px; }
    /* Shrink the logo so it fits on narrow handsets without horizontal
       scroll and doesn't overpower the small card below it. */
    .tk-public-header   { padding: 20px 16px 8px; }
    .tk-public-logo     { max-width: 240px; }
    svg.tk-public-logo-fallback { max-width: 200px; }
}

/* --- Scored results (Phase 6) ----------------------------------------- */

.tk-public-results {
    text-align: center;
}

.tk-public-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 12px;
}

.tk-public-score-hero {
    margin: 0 auto 20px;
}

.tk-public-score-pct {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--tk-accent);
}

.tk-public-score-raw {
    color: #9ca3af;
    margin-top: 8px;
    font-size: 14px;
}

.tk-public-band-content {
    color: #cbd5e1;
    line-height: 1.6;
    margin: 16px auto 0;
    max-width: 560px;
}

.tk-public-band-content p { margin: 0 0 12px; }
.tk-public-band-content p:last-child { margin-bottom: 0; }

.tk-public-cta-row {
    margin: 24px 0 0;
}

/* Category breakdown cards */
.tk-public-categories {
    margin-top: 24px;
}

.tk-public-subheading {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.tk-public-category-row {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 18px;
    text-align: left;
}

.tk-public-category-row + .tk-public-category-row {
    margin-top: 12px;
}

.tk-public-category-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.tk-public-category-pct {
    font-size: 22px;
    font-weight: 700;
    color: var(--tk-accent);
}

.tk-public-category-raw {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 4px;
}

.tk-public-category-band-name {
    margin-top: 10px;
    font-weight: 600;
}

.tk-public-category-band-content {
    margin-top: 8px;
    color: #cbd5e1;
    line-height: 1.55;
}

/* --- Content block (interleaved HTML slide) --------------------------- */

.tk-public-block-body {
    color: #e5e7eb;
    line-height: 1.6;
    margin-top: 12px;
}

.tk-public-block-body p { margin: 0 0 14px; }
.tk-public-block-body p:last-child { margin-bottom: 0; }
.tk-public-block-body h1,
.tk-public-block-body h2,
.tk-public-block-body h3 { margin: 24px 0 10px; }
.tk-public-block-body ul,
.tk-public-block-body ol { padding-left: 22px; margin: 0 0 14px; }
.tk-public-block-body img { max-width: 100%; height: auto; border-radius: 8px; }
.tk-public-block-body a { color: var(--tk-accent); }

/* ============================================================================
 * ScoreApp-style landing page (per-survey configurable)
 * ============================================================================ */

.tk-public-landing {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 0;
}

.tk-public-landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Left column — pitch copy */

.tk-public-landing-copy {
    color: var(--tk-ink);
}

.tk-public-landing-headline {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

.tk-public-landing-body {
    color: var(--tk-ink-dim);
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 20px;
}
.tk-public-landing-body p { margin: 0 0 14px; }
.tk-public-landing-body p:last-child { margin-bottom: 0; }
.tk-public-landing-body strong { color: var(--tk-ink); }
.tk-public-landing-body a { color: var(--tk-accent); }

.tk-public-landing-bullets {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.tk-public-landing-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tk-ink);
}
.tk-public-bullet-check {
    flex-shrink: 0;
    color: var(--tk-accent);
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
}
.tk-public-bullet-text {
    flex: 1 1 auto;
}

/* Right column — form card */

.tk-public-landing-form-wrap {
    display: flex;
    justify-content: center;
}

.tk-public-landing-form-card {
    width: 100%;
    max-width: 460px;
    background: #f3f4f6;
    color: #111;
    border-radius: 14px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.tk-public-landing-form-heading {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 20px;
    color: #111;
}

.tk-public-landing-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tk-public-landing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tk-public-landing-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tk-public-landing-field input:focus {
    outline: none;
    border-color: var(--tk-accent);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2);
}
.tk-public-landing-field input::placeholder {
    color: #9ca3af;
}

.tk-public-landing-error {
    color: var(--tk-danger);
    font-size: 13px;
    margin: 6px 0 0;
}

.tk-public-landing-cta {
    background: var(--tk-accent);
    color: #111;
    border: 0;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: filter 120ms ease, transform 80ms ease;
    font-family: inherit;
}
.tk-public-landing-cta:hover {
    filter: brightness(1.05);
}
.tk-public-landing-cta:active {
    transform: translateY(1px);
}

/* Medium screens — tighten gutter but keep two columns */
@media (max-width: 960px) {
    .tk-public-landing-grid { gap: 40px; }
    .tk-public-landing-headline { font-size: 34px; }
}

/* Small screens — stack vertically. Card lands below copy. */
@media (max-width: 720px) {
    .tk-public-landing-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: stretch;
    }
    .tk-public-landing-headline { font-size: 28px; }
    .tk-public-landing-form-card { padding: 24px 22px 22px; }
    .tk-public-landing-row { grid-template-columns: 1fr; }
}

/* The two-column landing is wider than the default .tk-public-card
   (680px), so make sure .tk-public-main lets it breathe. The existing
   main container caps children to ~100% width of its padding zone
   already — we just widen max-width slightly on desktop so the grid
   fills the available space without butting into the card system. */
body:has(.tk-public-landing) .tk-public-main {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
}