/*
 * Skipper Local — the engine's screens, dressed in the theme's own tokens.
 *
 * Every colour and face is read from the skipper theme's :root (paper, ink,
 * sea, deep, signal, aqua, sun, warm, head, body) with its own value only as a
 * fallback, so the website seat changes the look in one place and these
 * screens follow. Nothing here is LOIS's. Buttons are one solid colour; text
 * is the theme's deep ink, never black; corners stay square like the theme.
 */

.skx{background:var(--warm,#FFF6EA);color:var(--ink,#0B2B2A);font-family:var(--body,'Figtree',system-ui,sans-serif);
	padding:clamp(40px,8vw,96px) 0 clamp(56px,10vw,120px);min-height:60vh}
.skx__in{max-width:820px}
.skx h1{margin:0 0 18px;color:var(--deep,#06302E)}
.skx h2{font-family:var(--sub,'Barlow Condensed',sans-serif);font-size:clamp(1.4rem,3vw,1.9rem);margin:40px 0 10px;color:var(--deep,#06302E)}
.skx .sk-huge{font-size:clamp(2.4rem,7vw,4.4rem)}
.skx .sk-lead{font-size:clamp(1.05rem,2.2vw,1.25rem);max-width:40em;margin:0 0 22px}
.skx .eyebrow{color:var(--signal-deep,#D62B0C)}

/* What a press said, back on the page. */
.skx-said{background:var(--paper,#FFFCF6);border-left:6px solid var(--aqua,#12C2A0);padding:14px 18px;margin:0 0 28px;font-weight:600}
.skx-note{background:var(--paper,#FFFCF6);border-left:6px solid var(--sun,#FFC24B);padding:14px 18px;margin:0 0 22px}
.skx-owner{background:var(--sea,#0E4A46);color:var(--paper,#FFFCF6);padding:14px 18px;margin:0 0 26px}
.skx-owner a{color:var(--sun,#FFC24B)}

/* A clearly marked placeholder, waiting for Paige's words. */
.skx-placeholder{border:2px dashed var(--sun,#FFC24B);background:rgba(255,194,75,.12);padding:12px 16px;font-style:italic}

/* Forms. Labels are kind and never bold. */
.skx-form{margin:0 0 18px;max-width:40rem}
.skx-label{display:block;margin:18px 0 6px;font-size:.95rem;color:var(--soft,#5A716E)}
.skx-box{display:block;width:100%;font:inherit;font-size:1.05rem;color:var(--ink,#0B2B2A);background:var(--paper,#FFFCF6);
	border:0;border-bottom:2px solid var(--sea,#0E4A46);padding:12px 4px;border-radius:0}
textarea.skx-box{border:2px solid var(--rule,#DCEBE7);border-bottom-color:var(--sea,#0E4A46);padding:12px;line-height:1.55;resize:vertical}
.skx-box:focus{outline:3px solid var(--aqua,#12C2A0);outline-offset:2px}
.skx-hide{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.skx-acts{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.skx-go{display:inline-block;font-family:var(--head,'Barlow Condensed',sans-serif);font-weight:700;font-size:1.1rem;letter-spacing:.04em;
	text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid var(--sea,#0E4A46);
	background:var(--sea,#0E4A46);color:var(--paper,#FFFCF6);padding:12px 22px;border-radius:0}
.skx-go:hover,.skx-go:focus-visible{background:var(--deep,#06302E);border-color:var(--deep,#06302E)}
.skx-go--quiet{background:transparent;color:var(--sea,#0E4A46)}
.skx-go--quiet:hover,.skx-go--quiet:focus-visible{background:var(--sea,#0E4A46);color:var(--paper,#FFFCF6)}
.skx-go:disabled{opacity:.6;cursor:progress}
.skx-small{font-size:.95rem;color:var(--soft,#5A716E)}
.skx-small a{color:var(--sea,#0E4A46)}

/* The sitting: one question, and room to answer it. */
.skx-ask{font-size:clamp(1.15rem,2.6vw,1.45rem);max-width:36em;margin:0 0 8px}

/* His Portrait, as he wrote it. */
.skx-portrait{display:grid;gap:18px;margin:26px 0}
.skx-answer{background:var(--paper,#FFFCF6);border-top:6px solid var(--signal,#FF4E2E);padding:20px 22px}
.skx-answer:nth-child(3n+2){border-top-color:var(--aqua,#12C2A0)}
.skx-answer:nth-child(3n+3){border-top-color:var(--sun,#FFC24B)}
.skx-answer__theme,.skx-card__theme{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--signal-deep,#D62B0C);margin:0 0 6px}
.skx-answer__ask{color:var(--soft,#5A716E);margin:0 0 10px}
.skx-answer__said{font-size:1.1rem;margin:0 0 14px;white-space:normal}
.skx-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;max-width:none}
.skx-who__lab{margin:0 8px 0 0;font-size:.9rem;color:var(--soft,#5A716E)}
.skx-pick{font:inherit;font-size:.92rem;cursor:pointer;border:2px solid var(--rule,#DCEBE7);background:transparent;color:var(--ink,#0B2B2A);padding:7px 12px;border-radius:0}
.skx-pick.is-chosen{background:var(--aqua,#12C2A0);border-color:var(--aqua,#12C2A0);color:var(--deep,#06302E);font-weight:700}
.skx-doors{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}

/* The business door. */
.skx-tiers{display:grid;gap:16px;margin:26px 0}
.skx-tier__name{font-family:var(--head,'Barlow Condensed',sans-serif);font-size:1.5rem;font-weight:700;font-style:normal;margin:0 0 6px}

/* The Skippers, as a business reads them. */
.skx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:26px 0}
.skx-card{background:var(--paper,#FFFCF6);border-top:6px solid var(--signal,#FF4E2E);padding:20px}
.skx-card h2{margin:0 0 8px}

/* Messages. */
.skx-threads{list-style:none;margin:20px 0;padding:0;display:grid;gap:10px}
.skx-threads a{display:block;background:var(--paper,#FFFCF6);padding:16px 18px;text-decoration:none;color:var(--ink,#0B2B2A);border-left:6px solid var(--aqua,#12C2A0)}
.skx-threads b{display:block;font-family:var(--head,'Barlow Condensed',sans-serif);font-size:1.3rem}
.skx-lines{list-style:none;margin:20px 0;padding:0;display:grid;gap:12px}
.skx-line{background:var(--paper,#FFFCF6);padding:14px 16px;max-width:85%;border-left:6px solid var(--rule,#DCEBE7)}
.skx-line--mine{margin-left:auto;border-left-color:var(--aqua,#12C2A0)}
.skx-line p{margin:0 0 6px}
.skx-line time{font-size:.8rem;color:var(--soft,#5A716E)}
.skx-end{margin:30px 0 0}
.skx-end summary{cursor:pointer;color:var(--sea,#0E4A46);font-weight:600}

/* His account. */
.skx-account h2{border-top:2px solid var(--rule,#DCEBE7);padding-top:24px}

@media (max-width:600px){
	.skx-acts{flex-direction:column;align-items:stretch}
	.skx-go{text-align:center}
	.skx-line{max-width:100%}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Briefs: the facts of the work, and the board's narrowing. */
.skx-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;padding:0}
.skx-facts li{background:var(--warm,#FFF6EA);border:2px solid var(--rule,#DCEBE7);padding:4px 10px;font-size:.9rem}
.skx-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 18px;align-items:end;max-width:none;margin:0 0 10px}
.skx-filter .skx-acts{margin:12px 0}
.skx-answer h3{font-family:var(--sub,'Barlow Condensed',sans-serif);font-size:1.5rem;margin:0 0 10px;color:var(--deep,#06302E)}

/* His Visible / Hidden switch. */
.skx-switch{background:var(--paper,#FFFCF6);border-left:6px solid var(--aqua,#12C2A0);padding:16px 20px;margin:0 0 26px}
.skx-switch h2{margin:0 0 6px}