/* Season 0 (season/page.php, 11-07 dev pilot). 11-07 redesign (the user: "Can we improve the UI to feel more modern?"):
   the map as a hero and a path of tickets with a skills panel; the room as floating panels (ticket · code with a test
   console · chat); results with score rings. The colors are the app's modern tokens (assets/modern.css, light and
   dark); the skills' own colors are here. */
body.sn-page {
  --sk-ask: #c06700; --sk-ask-soft: #fff0dc; --sk-direct: #2559d6; --sk-direct-soft: #e7eefe; --sk-verify: #0c8a61; --sk-verify-soft: #ddf4eb;
  --sk-protect: #c1335a; --sk-protect-soft: #fde6ed; --sk-performance: #6b45d6; --sk-performance-soft: #efe9fd;
}
html[data-theme="dark"] body.sn-page {
  --sk-ask: #f5a54a; --sk-ask-soft: #3a2914; --sk-direct: #7aa2ff; --sk-direct-soft: #1c2747; --sk-verify: #45cf98; --sk-verify-soft: #13342a;
  --sk-protect: #f27a9b; --sk-protect-soft: #3c1a26; --sk-performance: #a88bff; --sk-performance-soft: #2a2148;
}
.sn-page .main { padding: 0; max-width: none; }
.sn { color: var(--m-text); }
.sn h1, .sn h2, .sn h3 { color: var(--m-ink); letter-spacing: -.02em; }
.sn .icon { width: 18px; height: 18px; flex: none; }
.sn code { font-family: var(--m-mono); }

/* Buttons, pills, cards, avatars */
.sn .sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .1s, border-color .15s; }
.sn a.sn-btn { text-decoration: none; }
.sn .sn-btn:active { transform: translateY(1px); }
.sn .sn-btn .icon { width: 16px; height: 16px; }
.sn .sn-btn-primary { background: var(--m-accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(40, 30, 120, .25); }
.sn .sn-btn-primary:hover { background: var(--m-accent-hover); }
.sn .sn-btn-ghost { background: var(--m-surface); color: var(--m-ink); border: 1px solid var(--m-border-strong); box-shadow: var(--m-shadow-sm); }
.sn .sn-btn-ghost:hover { border-color: var(--m-muted); }
.sn .sn-btn-text { color: var(--m-muted); padding: 0 8px; }
.sn .sn-btn-text:hover { color: var(--m-ink); }
.sn .sn-btn:disabled { opacity: .7; cursor: default; }
.sn .sn-btn.loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sn-spin .7s linear infinite; }
.sn .sn-btn.loading .icon { display: none; }
@keyframes sn-spin { to { transform: rotate(360deg); } }
.sn .sn-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text); transition: background .15s; }
.sn .sn-icon-btn:hover { background: var(--m-sunken); }
.sn .sn-icon-btn .icon { width: 17px; height: 17px; }
.sn-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--m-border); background: var(--m-sunken); color: var(--m-text); font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.sn-pill-soft { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; }
.sn-pill-good { border-color: transparent; background: var(--m-good-soft); color: var(--m-good); }
.sn-key { font-family: var(--m-mono); font-size: 12px; font-weight: 700; color: var(--m-muted); letter-spacing: .02em; }
.sn-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 16px; box-shadow: var(--m-shadow-sm); }
.sn-skill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.sn-skill .icon { width: 13px; height: 13px; }
.sn-skill.sk-ask, .sn-skill-icon.sk-ask { background: var(--sk-ask-soft); color: var(--sk-ask); }
.sn-skill.sk-direct, .sn-skill-icon.sk-direct { background: var(--sk-direct-soft); color: var(--sk-direct); }
.sn-skill.sk-verify, .sn-skill-icon.sk-verify { background: var(--sk-verify-soft); color: var(--sk-verify); }
.sn-skill.sk-protect, .sn-skill-icon.sk-protect { background: var(--sk-protect-soft); color: var(--sk-protect); }
.sn-skill.sk-performance, .sn-skill-icon.sk-performance { background: var(--sk-performance-soft); color: var(--sk-performance); }
.sn-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 12.5px; font-weight: 700; }
.sn-avatar .icon { width: 17px; height: 17px; }
.sn-avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.sn-avatar-sm .icon { width: 12px; height: 12px; }
.sn-avatar-lg { width: 52px; height: 52px; }
.sn-avatar-lg .icon { width: 24px; height: 24px; }
.sn-avatar-client { background: #ffe2c6; color: #8f4300; }
.sn-avatar-ai { background: linear-gradient(135deg, #7a68f2, #45b2e6); color: #fff; }
.sn-avatar-me { background: var(--m-accent-soft); color: var(--m-accent); }
.sn-avatar-lead { background: #dff0fd; color: #0b5c8f; }
html[data-theme="dark"] .sn-avatar-client { background: #4a2b12; color: #ffbe82; }
html[data-theme="dark"] .sn-avatar-lead { background: #13324a; color: #8fd0ff; }

/* The map */
.sn-map { max-width: 1140px; margin: 0 auto; padding: 28px 24px 64px; }
.sn-hero { position: relative; overflow: hidden; padding: 34px 38px 30px; border-radius: 22px; background: linear-gradient(130deg, #26246a 0%, #3c47b5 48%, #2a8db4 100%); color: #fff; box-shadow: var(--m-shadow); }
.sn-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; pointer-events: none; }
.sn-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.sn-hero h1 { position: relative; margin: 8px 0 8px; color: #fff; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -.03em; }
.sn-lead { position: relative; max-width: 560px; margin: 0; color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.6; }
.sn-progress { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.sn-progress-bar { display: flex; gap: 6px; }
.sn-progress-bar span { width: 42px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.sn-progress-bar .started { background: rgba(255, 255, 255, .55); }
.sn-progress-bar .done { background: #fcd34d; }
.sn-progress-bar .accepted { background: #6ee7b7; }
.sn-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 26px; }
.sn-path { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sn-tcard { position: relative; display: flex; gap: 16px; }
.sn-tcard::before { content: ""; position: absolute; left: 19px; top: 54px; bottom: -14px; width: 2px; background: var(--m-border-strong); }
.sn-tcard:last-child::before { display: none; }
.sn-tcard.accepted::before { background: var(--m-good); opacity: .5; }
.sn-node { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-top: 14px; border: 2px solid var(--m-border-strong); border-radius: 50%; background: var(--m-surface); color: var(--m-muted); font-weight: 700; }
.sn-node .icon { width: 17px; height: 17px; }
.sn-tcard.open .sn-node, .sn-tcard.started .sn-node { border-color: var(--m-accent); color: var(--m-accent); box-shadow: 0 0 0 5px var(--m-accent-soft); }
.sn-tcard.done .sn-node { border-color: var(--m-warn); background: var(--m-warn-soft); color: var(--m-warn); }
.sn-tcard.accepted .sn-node { border-color: var(--m-good); background: var(--m-good); color: #fff; }
.sn-tcard.locked .sn-node { background: var(--m-sunken); }
.sn-tbody { flex: 1; min-width: 0; padding: 16px 18px; border: 1px solid var(--m-border); border-radius: 16px; background: var(--m-surface); box-shadow: var(--m-shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; }
.sn-tcard:not(.locked) .sn-tbody:hover { transform: translateY(-1px); box-shadow: var(--m-shadow); }
.sn-tcard.open .sn-tbody, .sn-tcard.started .sn-tbody { border-color: color-mix(in srgb, var(--m-accent) 35%, var(--m-border)); }
.sn-tcard.locked .sn-tbody { background: var(--m-sunken); box-shadow: none; }
.sn-tcard.locked .sn-tbody > * { opacity: .7; }
.sn-tmeta, .sn-issue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sn-state { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--m-muted); }
.sn-state.open { color: var(--m-accent); }
.sn-state.started { color: var(--m-warn); }
.sn-state.done { color: var(--m-warn); }
.sn-state.accepted { color: var(--m-good); }
.sn-tbody h2 { margin: 6px 0 2px; font-size: 18px; }
.sn-teaser { margin: 0 0 12px; color: var(--m-muted); font-size: 14px; line-height: 1.5; }
.sn-tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sn-skills-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--m-muted); font-size: 13px; }
.sn-locked .icon { width: 15px; height: 15px; }
.sn-side { position: sticky; top: calc(var(--appbar, 56px) + 16px); display: grid; gap: 14px; }
.sn-side h2 { margin: 0 0 14px; font-size: 15px; }
.sn-profile { padding: 18px 18px 16px; }
.sn-profile ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.sn-profile li { display: grid; grid-template-columns: 28px 98px 1fr 28px; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--m-ink); }
.sn-profile li.none { opacity: .55; }
.sn-profile li strong { text-align: right; font-variant-numeric: tabular-nums; }
.sn-skill-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.sn-skill-icon .icon { width: 15px; height: 15px; }
.sn-meter { height: 6px; border-radius: 99px; background: var(--m-sunken); overflow: hidden; box-shadow: inset 0 0 0 1px var(--m-border); }
.sn-meter span { display: block; width: 0; height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
[data-skill="ask"] .sn-meter span { background: var(--sk-ask); }
[data-skill="direct"] .sn-meter span { background: var(--sk-direct); }
[data-skill="verify"] .sn-meter span { background: var(--sk-verify); }
[data-skill="protect"] .sn-meter span { background: var(--sk-protect); }
[data-skill="performance"] .sn-meter span { background: var(--sk-performance); }
.sn-side-note { margin: 12px 0 0; color: var(--m-muted); font-size: 13px; }
.sn-how { padding: 18px; }
.sn-how ol { display: grid; gap: 10px; margin: 0; padding: 0 0 0 20px; font-size: 13.5px; line-height: 1.5; }
.sn-how strong { color: var(--m-ink); }
.sn .sn-exam { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--m-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sn .sn-exam:hover { border-color: var(--m-accent); box-shadow: var(--m-shadow); }
.sn .sn-exam-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--m-accent-soft); color: var(--m-accent); }
.sn .sn-exam > span:nth-child(2) { display: grid; flex: 1; }
.sn .sn-exam strong { font-size: 14px; }
.sn .sn-exam small { color: var(--m-muted); font-size: 12.5px; }
.sn .sn-exam > .icon { color: var(--m-muted); }

/* The room */
.sn-room { display: flex; flex-direction: column; height: calc(100vh - var(--appbar, 56px)); height: calc(100dvh - var(--appbar, 56px)); }
.sn-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--m-surface); border-bottom: 1px solid var(--m-border); }
.sn-bar-text { flex: 0 1 auto; min-width: 0; }
.sn-crumbs { display: flex; align-items: center; gap: 7px; margin: 0; overflow: hidden; color: var(--m-muted); font-size: 12.5px; white-space: nowrap; }
.sn-bar-text h1 { margin: 1px 0 0; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.sn-bar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sn-saved { display: inline-flex; align-items: center; gap: 4px; color: var(--m-muted); font-size: 12.5px; }
.sn-saved .icon { width: 14px; height: 14px; color: var(--m-good); }
.sn-tabs { display: none; }
.sn-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sn-left, minmax(270px, 26%)) 10px minmax(0, 1fr) 10px var(--sn-right, minmax(310px, 29%)); padding: 10px; }
/* The bars between the panels and above the console (11-07, the user: "I can't resize the windows"): season.js layout,
   kept in this browser; double-click resets. */
.sn-resizer, .sn-hresizer { display: grid; place-items: center; touch-action: none; }
.sn-resizer { cursor: col-resize; }
.sn-hresizer { flex: none; height: 8px; cursor: row-resize; background: var(--m-code-panel); border-top: 1px solid var(--m-code-line); }
.sn-resizer span { width: 4px; height: 40px; border-radius: 2px; background: var(--m-border-strong); transition: background .15s, height .15s; }
.sn-hresizer span { width: 40px; height: 3px; border-radius: 2px; background: var(--m-code-line); transition: background .15s; }
.sn-resizer:hover span, .sn-resizer.dragging span, .sn-resizer:focus-visible span { height: 64px; background: var(--m-accent); }
.sn-hresizer:hover span, .sn-hresizer.dragging span, .sn-hresizer:focus-visible span { background: var(--m-accent); }
.sn-resizer:focus-visible, .sn-hresizer:focus-visible { outline: none; }
.sn-grid.dragging { cursor: col-resize; user-select: none; }
.sn-grid.dragging-h { cursor: row-resize; user-select: none; }
.sn-grid.dragging .sn-panel, .sn-grid.dragging-h .sn-panel { pointer-events: none; }
.sn-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--m-border); border-radius: 16px; background: var(--m-surface); box-shadow: var(--m-shadow-sm); }
.sn-ticket { display: block; overflow-y: auto; padding: 20px 20px 24px; }
/* Folding the ticket (11-07): a button in its corner; folded, a strip with "Ticket" to open it again. */
/* A review ticket starts from Try it (11-07): the console fills the panel, and the button can't be off-screen. */
.sn-code.try-first .sn-files, .sn-code.try-first .sn-hresizer { display: none; }
.sn-code.try-first .sn-console { flex: 1; height: auto; max-height: none; }
/* What to do next (11-07): in the bar between the ticket's name and its buttons (11-08, the user: "taking up too much
   vertical space. Can we put it between Cheaper long rentals and Stuck button?"); under them, the width of the screen,
   where the panes come as tabs. */
/* The words take the box's width and its button comes after them, so a wide button doesn't squeeze them into a column. */
.sn-guide { flex: 1 1 360px; min-width: 0; max-width: 860px; margin: 0 auto; padding: 7px 12px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-accent-soft); color: var(--m-ink); font-size: 13.5px; line-height: 1.4; }
.sn-guide > .icon { display: none; }
.sn .sn-guide-go { display: inline-flex; vertical-align: middle; height: 28px; margin: 1px 0 0 8px; padding: 0 12px; font-size: 13px; }
/* Guided (11-08): the step card in Next's place, its number, what to do (bold) and why (muted); the switch at the top of
   the Ticket pane; the result's line in place of the scores. */
.sn-guide.guided { border-color: var(--m-accent); }
.sn-step-n { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--m-accent); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.sn-step-why { color: var(--m-muted); }
.sn-guided-box { display: grid; gap: 4px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-accent-soft); }
.sn-guided-box[hidden] { display: none; }
.sn-guided-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.sn-guided-switch input { width: 16px; height: 16px; accent-color: var(--m-accent); }
.sn-guided-box small { color: var(--m-muted); font-size: 12.5px; line-height: 1.4; }
.sn-guided-note { grid-column: 1 / -1; margin: 6px 0 0; color: var(--m-muted); font-size: 14px; }
/* The Client Round (11-08): the clock in the bar (red in the last five minutes), its card on the map, the verdict line. */
.sn-timer { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--m-border); border-radius: 999px; background: var(--m-surface); color: var(--m-ink); font: 700 15px var(--m-mono); font-variant-numeric: tabular-nums; }
.sn-timer[hidden] { display: none; }
.sn-timer.low { border-color: #e5484d; color: #e5484d; }
[data-sn-rounds] { display: contents; } /* its cards sit in the side column's grid like the others */
.sn-round-card { display: grid; gap: 6px; padding: 18px; border-color: var(--m-accent); }
.sn-round-card h2 { margin: 0; font-size: 18px; }
.sn-round-kicker { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--m-accent); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sn-round-kicker .icon { width: 14px; height: 14px; }
.sn-round-title { margin: 0; }
.sn-round-verdict { color: var(--m-accent); font-weight: 700; }
.sn-round-card .sn-btn { justify-self: start; margin-top: 6px; }
.sn-round-card .sn-side-note { margin: 2px 0 0; }
.sn-round-result { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; }
/* The first-open choice (11-08): two cards, the suggested one marked. */
.sn-choose { width: min(560px, calc(100vw - 32px)); }
.sn-choose h2 { margin: 0 0 14px; font-size: 20px; }
.sn-choose-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sn .sn-choose-option { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px; border: 1.5px solid var(--m-border); border-radius: 14px; background: var(--m-surface); color: var(--m-ink); font: inherit; text-align: left; cursor: pointer; }
.sn .sn-choose-option:hover, .sn .sn-choose-option:focus-visible { border-color: var(--m-accent); }
.sn .sn-choose-option.suggested { border-color: var(--m-accent); background: var(--m-accent-soft); }
.sn-choose-option strong { font-size: 17px; }
.sn-choose-option > span:last-child { color: var(--m-muted); font-size: 14px; line-height: 1.45; }
.sn-choose-tag { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--m-accent); color: #fff; font-size: 11.5px; font-weight: 700; }
.sn-choose-tag[hidden] { display: none; }
.sn-choose-note { margin: 12px 0 0; color: var(--m-muted); font-size: 13px; }
@media (max-width: 520px) { .sn-choose-options { grid-template-columns: 1fr; } }
/* Where it has the room, the button sits at the box's right, beside the words. */
@media (min-width: 1200px) {
  .sn-guide { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; }
  .sn-guide-text { flex: 1; min-width: 0; }
  .sn .sn-guide-go { margin: 0; height: 30px; }
  .sn-step-n { margin-right: 0; }
}
@media (max-width: 900px) {
  .sn-bar { flex-wrap: wrap; }
  .sn-guide { order: 3; flex: 1 1 100%; max-width: none; margin: 0 -10px -8px; border: 0; border-top: 1px solid var(--m-border); border-radius: 0; }
}
.sn-rmore { margin-top: 8px; color: var(--m-muted); font-size: 13.5px; }
.sn-rmore summary { cursor: pointer; }
.sn-resizer { position: relative; }
.sn .sn-fold { position: absolute; top: 16px; left: 50%; z-index: 2; display: grid; place-items: center; width: 22px; height: 34px; margin-left: -11px; border: 1px solid var(--m-border); border-radius: 8px; background: var(--m-surface); color: var(--m-muted); box-shadow: var(--m-shadow-sm); cursor: pointer; }
.sn .sn-fold:hover, .sn .sn-fold:focus-visible { border-color: var(--m-accent); color: var(--m-accent); }
.sn .sn-fold .icon { width: 13px; height: 13px; }
.sn .sn-unfold { display: none; }
.sn-grid.ticket-folded { grid-template-columns: 46px 10px minmax(0, 1fr) 10px var(--sn-right, minmax(310px, 29%)); }
.sn-grid.ticket-folded .sn-ticket { padding: 0; overflow: hidden; }
.sn-grid.ticket-folded .sn-ticket > :not(.sn-unfold) { display: none; }
.sn-grid.ticket-folded [data-sn-resizer="left"] { visibility: hidden; }
.sn .sn-grid.ticket-folded .sn-unfold { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 14px 0; color: var(--m-muted); font-size: 13px; font-weight: 650; }
.sn .sn-grid.ticket-folded .sn-unfold:hover, .sn .sn-grid.ticket-folded .sn-unfold:focus-visible { background: var(--m-sunken); color: var(--m-ink); }
.sn .sn-unfold span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
.sn .sn-unfold .icon { width: 18px; height: 18px; }
.sn-statement h2 { margin: 8px 0 10px; font-size: 21px; line-height: 1.25; }
.sn-statement > .sn-skill { margin: 0 6px 4px 0; }
.sn-from { display: flex; gap: 12px; margin: 16px 0 6px; padding: 14px; border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-sunken); }
.sn-from-body { min-width: 0; }
.sn-from-name { margin: 0 0 3px; color: var(--m-ink); font-size: 13.5px; font-weight: 700; }
.sn-from-name small { color: var(--m-muted); font-size: 12px; font-weight: 500; }
.sn-from-text { margin: 0; color: var(--m-ink); font-size: 15px; line-height: 1.55; }
.sn-issue-body p, .sn-issue-body li, .sn-pr-by p { font-size: 14.5px; line-height: 1.65; }
.sn-issue-body ul { padding-left: 20px; }
.sn-issue-body blockquote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--m-accent); border-radius: 0 10px 10px 0; background: var(--m-accent-soft); }
.sn-statement code, .sn-result code { padding: 1px 5px; border: 1px solid var(--m-border); border-radius: 5px; background: var(--m-sunken); font-size: 12.5px; }
.sn-pr { margin-top: 16px; padding: 14px; border: 1px solid var(--m-border); border-radius: 14px; }
.sn-pr-head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--m-ink); font-size: 14.5px; }
.sn-pr-stats { margin: 4px 0 6px; color: var(--m-muted); font-size: 12.5px; }
.sn-pr-by p { margin: 0 0 6px; }
.sn-plus-n { color: var(--m-good); font-family: var(--m-mono); font-weight: 700; }
.sn-tip { display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--m-accent-soft); color: var(--m-accent-ink); font-size: 13.5px; line-height: 1.5; }
.sn-verdict { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--m-border); }
.sn-verdict h3 { margin: 0; font-size: 15px; }
.sn-verdict textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--m-border-strong); border-radius: 12px; background: var(--m-surface); color: var(--m-ink); font-size: 14px; line-height: 1.5; resize: vertical; }
.sn-verdict textarea:focus, .sn-comment-form textarea:focus, .sn-try-code:focus { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-soft); }
.sn-segment { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-sunken); }
.sn .sn-segment button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: 9px; color: var(--m-muted); font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s; }
.sn .sn-segment button .icon { width: 15px; height: 15px; }
.sn .sn-segment [aria-checked="true"], .sn .sn-segment [aria-selected="true"] { background: var(--m-surface); color: var(--m-ink); box-shadow: var(--m-shadow-sm); }
.sn .sn-verdict .sn-segment button { padding: 7px 8px; gap: 5px; font-size: 13px; white-space: nowrap; }
.sn .sn-segment [data-verdict="changes"][aria-checked="true"] { color: var(--m-bad); }
.sn .sn-segment [data-verdict="approve"][aria-checked="true"] { color: var(--m-good); }

/* The code panel: dark, with the file list, tabs, the editor and the console */
.sn-code { border-color: #1c2336; background: var(--m-code-bg); }
.sn-codetabs { display: flex; gap: 2px; padding: 6px 8px 0; background: var(--m-code-panel); border-bottom: 1px solid var(--m-code-line); }
.sn-codetabs[hidden], .sn-files[hidden], .sn-diff[hidden], .sn-results[hidden], .sn-try[hidden] { display: none; }
.sn .sn-codetabs button { padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--m-code-muted); font-size: 13px; font-weight: 600; }
.sn .sn-codetabs button[aria-pressed="true"] { border-bottom-color: var(--m-accent); color: #fff; }
.sn-files { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sn-tabsbar { display: flex; align-items: stretch; min-height: 38px; background: var(--m-code-panel); border-bottom: 1px solid var(--m-code-line); }
.sn-ftabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sn-ftab { display: flex; align-items: center; border-right: 1px solid var(--m-code-line); border-top: 2px solid transparent; color: var(--m-code-muted); font: 12.5px var(--m-mono); }
.sn-ftab.on { background: var(--m-code-bg); border-top-color: var(--m-accent); color: #fff; }
.sn .sn-ftab button:first-child { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 6px 0 12px; }
.sn-ftab small { font-size: 10.5px; opacity: .55; }
.sn .sn-ftab .sn-ftab-x { padding: 0 10px 0 4px; height: 100%; opacity: .5; }
.sn .sn-ftab .sn-ftab-x:hover { opacity: 1; }
.sn .sn-ftab.changed button:first-child::after, .sn .sn-fitem.changed::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f5b54c; }
.sn .sn-fitem.changed::after { margin-left: auto; }
.sn-filepick { display: none; }
.sn-codebody { flex: 1; min-height: 0; display: flex; }
.sn-explorer { flex: 0 0 190px; overflow: auto; padding: 4px 0 12px; background: var(--m-code-panel); border-right: 1px solid var(--m-code-line); color: var(--m-code-text); font: 12.5px var(--m-mono); }
.sn-explorer-head { margin: 8px 14px 6px; color: var(--m-code-muted); font: 700 10.5px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sn-explorer ul { margin: 0 0 4px; padding: 0; list-style: none; }
.sn-fdir { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; padding: 0 10px; color: var(--m-code-muted); }
.sn-fdir .icon { width: 13px; height: 13px; transform: rotate(90deg); }
.sn .sn-fitem { display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); margin: 0 6px; padding: 5px 10px; border-radius: 7px; color: #c7cee2; text-align: left; }
.sn .sn-explorer ul.in .sn-fitem { padding-left: 24px; }
.sn .sn-fitem:hover { background: var(--m-code-raised); }
.sn .sn-fitem.on { background: #232c47; color: #fff; }
.sn .sn-fitem.ro { color: #77829b; }
.sn .sn-fitem.ro.on { color: #c7cee2; }
.sn-ficon { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: #8892aa; }
.sn-ficon.py { background: linear-gradient(135deg, #4b8bd8 50%, #f2cb3d 50%); }
.sn-editor { flex: 1; min-width: 0; min-height: 160px; }
.sn-console { display: flex; flex-direction: column; flex: none; height: var(--sn-console, 34%); min-height: 76px; max-height: calc(100% - 140px); background: var(--m-code-panel); color: var(--m-code-text); }
.sn-console-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sn-segment-dark { flex: none; border-color: var(--m-code-line); background: #0b0f19; }
.sn .sn-segment-dark button { flex: none; padding: 5px 11px; color: var(--m-code-muted); font-size: 12.5px; }
.sn-segment-dark [aria-selected="true"] { background: var(--m-code-raised); color: #fff; box-shadow: none; }
.sn-run-status { flex: 1; min-width: 0; overflow: hidden; color: var(--m-code-muted); font-size: 12.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sn-run-status.sn-error { color: #ffb4a8; }
.sn-count { font-weight: 700; }
.sn-count.good { color: #5fe0a2; }
.sn-count.bad { color: #ffa5a5; }
.sn .sn-btn-run { height: 32px; padding: 0 14px; background: var(--m-accent); color: #fff; font-size: 13px; }
.sn .sn-btn-run:hover { background: var(--m-accent-hover); }
.sn .sn-btn-run .icon { width: 14px; height: 14px; }
.sn .sn-btn-dark { height: 32px; padding: 0 12px; background: var(--m-code-raised); color: #fff; font-size: 13px; }
.sn-results, .sn-try { flex: 1; min-height: 0; overflow: auto; padding: 2px 12px 12px; font-size: 13px; }
.sn-console-empty { margin: 4px 2px 6px; color: var(--m-code-muted); }
.sn-console-empty code { color: var(--m-code-text); }
.sn-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 10px; }
.sn-hidden-note { flex-basis: 100%; margin: -2px 0 0; color: var(--m-code-muted); font-size: 12px; }
.sn-hidden-label { color: var(--m-code-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sn-squares { display: flex; flex-wrap: wrap; gap: 4px; }
.sn-squares span { width: 14px; height: 14px; border-radius: 4px; background: var(--m-code-raised); border: 1px solid var(--m-code-line); }
.sn-squares-n span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--m-code-muted); font-size: 11px; font-weight: 700; }
.sn-squares .good { background: rgba(52, 199, 123, .16); border-color: rgba(52, 199, 123, .4); color: #5fe0a2; }
.sn-squares .bad { background: rgba(255, 99, 99, .14); border-color: rgba(255, 99, 99, .4); color: #ffa5a5; }
.sn-mutbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 10px; }
.sn-mutbar strong { color: #fff; font-size: 13.5px; }
.sn-mutbar small { color: var(--m-code-muted); }
.sn-tests { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sn-tests li { display: flex; gap: 8px; padding: 5px 8px; border-radius: 8px; }
.sn-tests li.bad { background: rgba(255, 99, 99, .07); }
.sn-tests strong { color: #e6eaf4; font-family: var(--m-mono); font-size: 12.5px; font-weight: 600; }
.sn-tests small { color: var(--m-code-muted); }
.sn-tests .sn-mark { margin-top: 2px; }
.sn-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; }
.sn-mark .icon { width: 13px; height: 13px; }
.sn-tests .good .sn-mark { color: #5fe0a2; background: rgba(52, 199, 123, .14); }
.sn-tests .bad .sn-mark { color: #ffa5a5; background: rgba(255, 99, 99, .14); }
.sn-err { margin: 3px 0 0; color: #ffbcb0; font: 12px/1.5 var(--m-mono); white-space: pre-wrap; }
.sn-err small { color: var(--m-code-muted); }
.sn-printed { margin: 4px 0 0; padding: 6px 8px; border-radius: 6px; background: #0b0f19; color: var(--m-code-text); font: 12px var(--m-mono); white-space: pre-wrap; }
.sn-try-code { box-sizing: border-box; width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--m-code-line); border-radius: 10px; background: #0b0f19; color: var(--m-code-text); font: 13px/1.5 var(--m-mono); tab-size: 4; resize: vertical; }
.sn-try-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.sn-try-status { color: var(--m-code-muted); font-size: 12.5px; }
.sn-try-status.sn-error { color: #ffb4a8; }
.sn-try-out { margin: 0; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: #0b0f19; color: var(--m-code-text); font: 12.5px/1.5 var(--m-mono); white-space: pre-wrap; }
.sn-try-out.bad { color: #ffbcb0; }

/* Try it: the shop through small forms (season.js tryIt) */
.sn-try { align-content: start; }
.sn-try-modes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sn .sn-try-modes button { padding: 4px 11px; border: 1px solid var(--m-code-line); border-radius: 99px; color: var(--m-code-muted); font-size: 12.5px; font-weight: 600; }
.sn .sn-try-modes button:hover { color: #fff; }
.sn .sn-try-modes [aria-selected="true"] { border-color: var(--m-accent); background: color-mix(in srgb, var(--m-accent) 22%, transparent); color: #fff; }
.sn-try-form { display: grid; gap: 8px; justify-items: start; }
.sn-try-form[hidden], .sn-try-code-box[hidden] { display: none; }
.sn-try-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.sn-try-fields label { display: grid; gap: 3px; color: var(--m-code-muted); font-size: 11.5px; font-weight: 600; }
.sn-try-fields select, .sn-try-fields input:is([type="datetime-local"], [type="number"], [type="text"], [type="date"], [type="time"], :not([type])) { height: 32px; padding: 0 8px; border: 1px solid var(--m-code-line); border-radius: 8px; background: #0b0f19; color: var(--m-code-text); font: 13px system-ui, sans-serif; color-scheme: dark; }
.sn-try-fields select:focus, .sn-try-fields input:focus { outline: none; border-color: var(--m-accent); }
.sn-try-fields small { color: var(--m-code-muted); font-size: 11px; font-weight: 500; }
.sn-try-label { margin: 2px 0 0; color: var(--m-code-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sn-try-rows { display: grid; gap: 6px; }
.sn .sn-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; align-self: center; margin-top: 14px; color: var(--m-code-text); font-size: 12.5px; }
.sn .sn-row-x { align-self: center; width: 28px; height: 28px; margin-top: 14px; border-color: var(--m-code-line); background: transparent; color: var(--m-code-muted); }
.sn .sn-row-x:hover { background: var(--m-code-raised); color: #fff; }
.sn .sn-text-btn { padding: 2px 0; color: #a99cff; font-size: 12.5px; font-weight: 600; }
.sn .sn-text-btn:hover { color: #fff; }
.sn-try-note { margin: 0; color: var(--m-code-muted); font-size: 12.5px; }
.sn-tries { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.sn-tries li { padding: 8px 10px; border: 1px solid var(--m-code-line); border-left-width: 3px; border-radius: 10px; background: #0f1422; }
.sn-tries li.good { border-left-color: #3fc28a; }
.sn-tries li.bad { border-left-color: #ff8f8f; }
.sn-try-what { color: var(--m-code-muted); font-size: 12px; }
.sn-try-said { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sn-try-said strong { color: #fff; font-size: 14px; }
.sn-try-said .icon { width: 15px; height: 15px; color: #ff9a9a; }
.sn-tries details summary { margin-top: 4px; color: var(--m-code-muted); font-size: 11.5px; cursor: pointer; }
.sn-tries details pre { margin: 6px 0; padding: 8px 10px; overflow: auto; border-radius: 8px; background: var(--m-code-bg); font: 12px/1.5 var(--m-mono); }
.sn-tries .sn-try-out { margin-top: 6px; }

/* LW-2: the pull request (dark, like the code) */
.sn-diff { flex: 1; overflow: auto; padding: 12px; color: var(--m-code-text); }
.sn-diff-hint { display: flex; align-items: center; gap: 7px; margin: 0 2px 10px; color: var(--m-code-muted); font-size: 12.5px; }
.sn-diff-hint .icon { width: 15px; height: 15px; }
.sn-dfile { margin-bottom: 14px; border: 1px solid var(--m-code-line); border-radius: 12px; overflow: hidden; }
.sn-dfile h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; background: var(--m-code-panel); border-bottom: 1px solid var(--m-code-line); color: #e6eaf4; font: 600 12.5px var(--m-mono); letter-spacing: 0; }
.sn-dfile .sn-pill-good { background: rgba(52, 199, 123, .14); color: #5fe0a2; font-family: system-ui, sans-serif; }
.sn-dfile .sn-plus-n { margin-left: auto; color: #5fe0a2; }
.sn-dfile table { width: 100%; border-collapse: collapse; font: 12.5px/1.65 var(--m-mono); }
.sn-dl { cursor: pointer; background: rgba(52, 199, 123, .06); }
.sn-dl:hover { background: rgba(125, 110, 243, .18); }
.sn-dl.noted { background: rgba(125, 110, 243, .12); }
.sn-ln { width: 1%; padding: 0 10px; color: #5f6a84; text-align: right; user-select: none; }
.sn-plus { width: 1%; padding: 0 4px; color: #5fe0a2; user-select: none; }
.sn-src { padding: 0 10px 0 4px; white-space: pre; }
.sn-src code { background: none; border: 0; padding: 0; font: inherit; color: var(--m-code-text); }
.sn-comment, .sn-comment-form { margin: 6px 12px 10px 44px; padding: 10px 12px; border: 1px solid #2d3756; border-radius: 12px; background: var(--m-code-raised); color: var(--m-code-text); font-family: system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; white-space: normal; }
.sn-comment { display: flex; align-items: flex-start; gap: 10px; }
.sn-comment > div { flex: 1; min-width: 0; }
.sn-comment p { margin: 0; }
.sn-comment .sn-who { color: var(--m-code-muted); }
.sn .sn-uncomment { width: 28px; height: 28px; border-color: transparent; background: none; color: var(--m-code-muted); }
.sn .sn-uncomment:hover { background: #2a3350; color: #fff; }
.sn-comment-form textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid #2d3756; border-radius: 10px; background: #0b0f19; color: var(--m-code-text); font: inherit; resize: vertical; }
.sn-comment-form div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.sn .sn-comment-form .sn-btn { height: 32px; font-size: 13px; }
.sn .sn-comment-form .sn-btn-ghost { background: transparent; border-color: #2d3756; color: var(--m-code-text); }

/* Changes: diffs since the ticket started, or the AI teammate's change to keep or undo (season.js renderChanges) */
.sn-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 99px; background: var(--m-code-raised); color: var(--m-code-text); font-size: 11px; font-weight: 700; }
.sn-tab-count[hidden] { display: none; }
.sn-tab-count.ai { background: var(--m-accent); color: #fff; }
.sn-codetabs button[hidden] { display: none; }
.sn-diff table.ace-algocademy { background: transparent; }
.sn-d-add { background: rgba(52, 199, 123, .12); }
.sn-d-del { background: rgba(255, 99, 99, .12); }
.sn-d-add .sn-sign { color: #5fe0a2; }
.sn-d-del .sn-sign { color: #ff9a9a; }
.sn-d-del .sn-src { opacity: .85; }
.sn-sign { width: 1%; padding: 0 4px; user-select: none; text-align: center; }
.sn-d-fold td { padding: 3px 12px; background: var(--m-code-panel); color: var(--m-code-muted); font: 11.5px var(--m-mono); }
.sn-minus-n { color: #ff9a9a; font-family: var(--m-mono); font-weight: 700; }
.sn-dfile h3 .sn-minus-n { margin-left: 6px; }
.sn-ai-change { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--m-accent) 55%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--m-accent) 14%, var(--m-code-bg)); }
.sn-ai-change-text { display: grid; flex: 1; min-width: 180px; }
.sn-ai-change-text strong { color: #fff; font-size: 13.5px; }
.sn-ai-change-text code { color: #fff; font-size: 12.5px; }
.sn-ai-change-text small { color: var(--m-code-muted); font-size: 12px; }
.sn-ai-change .sn-btn { height: 32px; font-size: 13px; }
.sn .sn-ai-change .sn-btn-ghost { background: transparent; border-color: #36406a; color: var(--m-code-text); }

/* Stuck? (season.js hints): a panel under the button */
.sn-stuck-wrap { position: relative; }
.sn .sn-stuck-wrap .sn-btn-ghost .sn-tab-count { background: var(--m-accent-soft); color: var(--m-accent); }
.sn-hints { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; display: grid; gap: 10px; width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 640px); overflow: auto; padding: 14px 16px 16px; border: 1px solid var(--m-border); border-radius: 16px; background: var(--m-surface); box-shadow: var(--m-shadow-lg); animation: sn-up .18s ease-out; }
.sn-hints[hidden] { display: none; }
.sn-hints header { display: flex; align-items: center; justify-content: space-between; }
.sn-hints header strong { color: var(--m-ink); font-size: 15px; }
.sn-hints .sn-icon-btn { width: 30px; height: 30px; border: 0; }
.sn-hints-intro, .sn-hints-wait { margin: 0; color: var(--m-muted); font-size: 13.5px; line-height: 1.5; }
.sn-hints-wait { padding: 10px 12px; border-radius: 10px; background: var(--m-warn-soft); color: var(--m-warn); }
.sn-hints-intro[hidden], .sn-hints-wait[hidden] { display: none; }
.sn-hint-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sn-hint-list li { padding: 10px 12px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-sunken); }
.sn-hint-list p { margin: 0; color: var(--m-ink); font-size: 14px; line-height: 1.55; }
.sn-hint-list p code { padding: 1px 5px; border-radius: 5px; background: var(--m-surface); font-size: 12.5px; }
.sn-hint-list .sn-hint-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--m-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sn-hint-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--m-accent); color: #fff; font-size: 11px; }
.sn .sn-hint-try { height: 32px; margin-top: 8px; font-size: 13px; }
.sn-hints footer { display: flex; justify-content: flex-end; }
.sn-hints footer [hidden] { display: none; }
/* About the project, at the top of the ticket */
.sn-about { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-sunken); }
.sn-about summary { display: flex; align-items: center; gap: 8px; color: var(--m-ink); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.sn-about summary::-webkit-details-marker { display: none; }
.sn-about summary .icon { width: 16px; height: 16px; color: var(--m-accent); }
.sn-about summary::after { content: "▾"; margin-left: auto; color: var(--m-muted); font-size: 12px; }
.sn-about:not([open]) summary::after { content: "▸"; }
.sn-about p { margin: 8px 0 6px; color: var(--m-text); font-size: 13.5px; line-height: 1.55; }
.sn-about ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--m-muted); font-size: 13px; }
.sn .sn-about .sn-text-btn { padding: 0; color: var(--m-accent); font: 600 12.5px var(--m-mono); }
.sn .sn-about .sn-text-btn:hover { text-decoration: underline; color: var(--m-accent); }
.sn-hints-used { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--m-muted); font-size: 13px; }
.sn-hints-used .icon { width: 15px; height: 15px; }

/* The chats */
.sn-chat-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--m-border); }
.sn .sn-chat-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px; color: var(--m-muted); font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s; }
.sn .sn-chat-tabs button[hidden] { display: none; }
.sn .sn-chat-tabs button:hover { color: var(--m-ink); }
.sn .sn-chat-tabs button[aria-selected="true"] { background: var(--m-sunken); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-border); }
.sn-log { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding: 16px 14px; }
.sn-log[hidden] { display: none; }
.sn-msg { display: flex; align-items: flex-start; gap: 9px; }
.sn-msg.me { justify-content: flex-end; }
.sn-bubble { min-width: 0; padding: 9px 13px; font-size: 14px; line-height: 1.55; }
.sn-msg.them .sn-bubble { max-width: calc(100% - 43px); border: 1px solid var(--m-border); border-radius: 4px 16px 16px 16px; background: var(--m-sunken); color: var(--m-ink); }
.sn-msg.me .sn-bubble { max-width: 85%; border-radius: 16px 16px 4px 16px; background: var(--m-accent); color: #fff; }
.sn-msg.me .sn-who { display: none; }
.sn-who { margin: 0 0 2px; color: var(--m-muted); font-size: 11.5px; font-weight: 700; }
.sn-bubble p { margin: 0 0 6px; }
.sn-bubble p:last-child { margin-bottom: 0; }
.sn-bubble p code { padding: 1px 5px; border-radius: 5px; background: rgba(120, 130, 160, .16); font-size: 12.5px; }
.sn-msg.me p code { background: rgba(255, 255, 255, .2); }
.sn-block { margin: 8px 0; overflow: hidden; border: 1px solid var(--m-code-line); border-radius: 10px; background: var(--m-code-bg); }
.sn-block-bar { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; background: var(--m-code-panel); border-bottom: 1px solid var(--m-code-line); color: var(--m-code-muted); font: 11.5px var(--m-mono); }
.sn-block-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn .sn-apply { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: var(--m-accent); color: #fff; font: 600 12px system-ui, sans-serif; }
.sn .sn-apply .icon { width: 12px; height: 12px; }
.sn .sn-apply.done { background: var(--m-good); }
.sn .sn-copy { padding: 3px 8px; border-radius: 6px; color: var(--m-code-muted); font: 12px system-ui, sans-serif; }
.sn .sn-copy:hover { background: var(--m-code-raised); color: #fff; }
.sn-block pre { max-height: 340px; margin: 0; overflow: auto; padding: 10px 12px; background: var(--m-code-bg); color: var(--m-code-text); font: 12.5px/1.55 var(--m-mono); }
.sn-block pre code { font: inherit; }
.sn-block-bar small { color: var(--m-code-muted); font: 11.5px system-ui, sans-serif; white-space: nowrap; }
.sn-block-bar .sn-ficon { flex: none; }
.sn-in-file { display: inline-flex; align-items: center; gap: 3px; color: #5fe0a2 !important; font-weight: 600 !important; }
.sn-in-file .icon { width: 12px; height: 12px; }
.sn-file-block details summary { padding: 6px 10px; color: var(--m-code-muted); font: 12px system-ui, sans-serif; cursor: pointer; list-style: none; }
.sn-file-block details summary::-webkit-details-marker { display: none; }
.sn-file-block details summary::before { content: "▸ "; }
.sn-file-block details[open] summary::before { content: "▾ "; }
.sn-file-block details[open] summary { border-bottom: 1px solid var(--m-code-line); }
.sn-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.sn-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--m-muted); animation: sn-dot 1.1s infinite ease-in-out; }
.sn-dots i:nth-child(2) { animation-delay: .15s; }
.sn-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sn-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sn-chat-empty { display: grid; justify-items: center; gap: 8px; margin: auto; padding: 24px; color: var(--m-muted); text-align: center; }
.sn-chat-empty p { max-width: 240px; margin: 4px 0 0; color: var(--m-text); font-size: 14px; }
.sn-chat-empty small { font-size: 12.5px; }
.sn-say { padding: 10px 12px 8px; border-top: 1px solid var(--m-border); }
.sn-composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--m-border-strong); border-radius: 14px; background: var(--m-surface); transition: border-color .15s, box-shadow .15s; }
.sn-composer:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-soft); }
.sn-composer textarea { flex: 1; min-height: 24px; max-height: 160px; padding: 6px 0; border: 0; outline: 0; background: transparent; color: var(--m-ink); font-size: 14px; line-height: 1.5; resize: none; }
.sn .sn-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--m-accent); color: #fff; transition: background .15s; }
.sn .sn-send:hover { background: var(--m-accent-hover); }
.sn .sn-send .icon { width: 16px; height: 16px; }
/* The AI teammate's replies left (11-07): a quiet line from 10 down, a card at none. */
.sn-replies { margin: 0 2px 7px; color: var(--m-muted); font-size: 12.5px; }
.sn-chat-note { margin: 0 2px 7px; color: var(--m-muted); font-size: 12.5px; }
.sn-replies.out { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-sunken); color: var(--m-text); line-height: 1.5; }
.sn-replies.out p { margin: 0; }
.sn-replies-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sn .sn-send:disabled { opacity: .45; cursor: not-allowed; }
.sn-hint { margin: 6px 2px 0; color: var(--m-muted); font-size: 11.5px; }
/* Voice: the microphone in the composer, reading aloud in the chat's header (season.js). */
.sn .sn-mic { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--m-muted); transition: background .15s, color .15s; }
.sn .sn-mic:hover { background: var(--m-sunken); color: var(--m-ink); }
.sn .sn-mic[hidden] { display: none; }
.sn .sn-mic .icon { width: 18px; height: 18px; }
.sn .sn-mic.on { background: var(--m-bad-soft); color: var(--m-bad); box-shadow: 0 0 0 calc(2px + var(--lvl, 0) * 8px) color-mix(in srgb, var(--m-bad) 22%, transparent); transition: box-shadow .08s linear; }
.sn .sn-mic.starting { animation: sn-pulse 1s ease-in-out infinite; }
.sn .sn-mic.busy { opacity: .6; cursor: wait; }
.sn .sn-mic[data-time]::after { content: attr(data-time); position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 1px 7px; border-radius: 6px; background: var(--m-bad); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
@keyframes sn-pulse { 50% { opacity: .45; } }
.sn .sn-voice { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 11px; border-radius: 99px; color: var(--m-muted); font-size: 12.5px; font-weight: 600; }
.sn .sn-voice:hover { color: var(--m-ink); }
.sn .sn-voice .icon { width: 16px; height: 16px; }
.sn .sn-voice[aria-pressed="false"] .sn-voice-waves { opacity: .3; }
.sn .sn-voice[aria-pressed="true"] { background: var(--m-accent-soft); color: var(--m-accent); }
.sn-msg.reading .sn-bubble { box-shadow: 0 0 0 2px var(--m-accent); }

/* The result */
.sn-result { max-width: 980px; margin: 0 auto; padding: 28px 24px 64px; }
.sn-rhero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px; border-radius: 20px; }
.sn-rhero.good { background: linear-gradient(135deg, var(--m-good-soft), var(--m-surface) 62%); }
.sn-rhero.partial { background: linear-gradient(135deg, var(--m-warn-soft), var(--m-surface) 62%); }
.sn-to-finish { margin: 6px 0 0; font-size: 15px; }
.sn-stage { width: min(460px, calc(100vw - 32px)); }
.sn-stage-eyebrow { margin: 0 0 4px; color: var(--m-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sn-stage h2 { margin: 0 0 14px; font-size: 21px; }
.sn-stage-dots { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 6px; }
.sn-stage-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--m-border); transition: background .2s; }
.sn-stage-dots span.on { background: var(--m-accent, #5b3fd6); }
.sn-stage-said { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--m-sunken); font-size: 16px; line-height: 1.5; }
.sn-stage-note { margin: 0 0 16px; color: var(--m-muted); font-size: 14px; }
.sn-sent-back { display: inline-block; margin: 0 0 4px; padding: 1px 8px; border-radius: 999px; background: var(--m-warn-soft); font-size: 12px; font-weight: 700; }
.sn-confirm-left { margin: 0 0 10px; padding-left: 20px; font-size: 15px; }
.sn-confirm-left li { margin: 4px 0; }
.sn-rbadge { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; }
.sn-rbadge .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.good > .sn-rbadge { background: var(--m-good); box-shadow: 0 0 0 6px color-mix(in srgb, var(--m-good) 18%, transparent); }
.partial > .sn-rbadge { background: var(--m-warn); box-shadow: 0 0 0 6px color-mix(in srgb, var(--m-warn) 18%, transparent); }
.sn-rhead h1 { margin: 4px 0 2px; font-size: 26px; }
.sn-headline { margin: 0; font-size: 15px; font-weight: 700; }
.good .sn-headline { color: var(--m-good); }
.partial .sn-headline { color: var(--m-warn); }
.sn-rings { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sn-ring-item { position: relative; display: grid; justify-items: center; gap: 2px; width: 70px; }
.sn-ring { width: 60px; height: 60px; }
.sn-ring circle { fill: none; stroke-width: 5; }
.sn-ring circle:first-child { stroke: var(--m-border); }
.sn-ring circle:last-child { stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2, .8, .2, 1); }
.sn-ring.zero circle:last-child { display: none; }
.sn-ring.sk-ask circle:last-child { stroke: var(--sk-ask); }
.sn-ring.sk-direct circle:last-child { stroke: var(--sk-direct); }
.sn-ring.sk-verify circle:last-child { stroke: var(--sk-verify); }
.sn-ring.sk-protect circle:last-child { stroke: var(--sk-protect); }
.sn-ring.sk-performance circle:last-child { stroke: var(--sk-performance); }
.sn-ring-item strong { position: absolute; top: 19px; color: var(--m-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.sn-ring-item span { color: var(--m-muted); font-size: 11.5px; font-weight: 600; }
.sn-lead-note { display: flex; gap: 14px; margin: 14px 0 0; padding: 18px 20px; }
.sn-lead-note cite { color: var(--m-muted); font-size: 12.5px; font-style: normal; font-weight: 700; }
.sn-lead-note p { margin: 3px 0 0; color: var(--m-ink); font-size: 15px; line-height: 1.6; }
.sn-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px; margin-top: 14px; }
.sn-rcard { padding: 18px 20px; }
.sn-rcard.wide { grid-column: 1 / -1; }
.sn-rcard h3 { margin: 0 0 12px; font-size: 15px; }
.sn-rtext { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.sn-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sn-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--m-ink); }
.sn-list li > span:last-child { display: grid; gap: 2px; }
.sn-list small { color: var(--m-muted); font-size: 12.5px; }
.sn-list small.good { color: var(--m-good); font-weight: 600; }
.sn-list small.bad { color: var(--m-bad); font-weight: 600; }
.sn-list em { color: var(--m-bad); font-size: 12.5px; font-style: normal; }
.sn-rcard .sn-mark.good { background: var(--m-good-soft); color: var(--m-good); }
.sn-rcard .sn-mark.bad { background: var(--m-bad-soft); color: var(--m-bad); }
.sn-rcard .sn-mark:not(.good):not(.bad) { background: var(--m-accent-soft); color: var(--m-accent); }
.sn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sn-tiles li { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: var(--m-ink); }
.sn-tiles .icon { width: 15px; height: 15px; }
.sn-tiles .good { background: var(--m-good-soft); }
.sn-tiles .good .icon { color: var(--m-good); }
.sn-tiles .bad { background: var(--m-bad-soft); }
.sn-tiles .bad .icon { color: var(--m-bad); }
.sn-warn, .sn-repro { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; }
.sn-warn { color: var(--m-bad); }
.sn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.sn .sn-result > .sn-exam { margin-top: 18px; }

/* The hand-in dialog, the toast */
.sn-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--m-border); border-radius: 18px; background: var(--m-surface); color: var(--m-text); box-shadow: var(--m-shadow-lg); }
.sn-dialog::backdrop { background: rgba(12, 15, 22, .45); backdrop-filter: blur(3px); }
.sn-dialog h2 { margin: 0 0 8px; font-size: 19px; }
.sn-dialog p { margin: 0; color: var(--m-muted); font-size: 14.5px; line-height: 1.55; }
.sn-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.sn-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px; background: #1b2030; color: #fff; font-size: 14px; line-height: 1.45; box-shadow: var(--m-shadow-lg); transform: translateX(-50%); animation: sn-up .25s ease-out; }
.sn-toast.bad { box-shadow: inset 3px 0 0 #ff7b7b, var(--m-shadow-lg); }
.sn-toast[hidden] { display: none; }
/* A visitor at a limit, and the result's sign-up card (11-13, season.php sn_guest). */
.sn-guest-wall { position: fixed; left: 50%; bottom: 24px; z-index: 61; width: min(520px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 14px; background: #1b2030; color: #fff; font-size: 15px; line-height: 1.45; box-shadow: var(--m-shadow-lg); transform: translateX(-50%); animation: sn-up .25s ease-out; }
.sn-guest-wall p { margin: 0 0 12px; }
.sn-guest-wall div { display: flex; gap: 10px; align-items: center; }
.sn-guest-wall .sn-btn-text { color: #fff; }
.sn-guest-wall[hidden] { display: none; }
.sn-guest-keep { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; }
.sn-guest-keep p { margin: 0; }
@keyframes sn-up { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .sn *, .sn *::before { animation: none !important; transition: none !important; } }

@media (max-width: 1000px) {
  .sn-map-grid { grid-template-columns: 1fr; }
  .sn-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
  .sn-tabs { display: flex; gap: 3px; margin: 8px 10px 0; padding: 3px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-sunken); }
  .sn .sn-tabs button { flex: 1; padding: 7px 10px; border-radius: 9px; color: var(--m-muted); font-size: 14px; font-weight: 600; }
  .sn .sn-tabs button[aria-selected="true"] { background: var(--m-surface); color: var(--m-ink); box-shadow: var(--m-shadow-sm); }
  .sn-grid { display: block; padding: 8px 10px 10px; }
  .sn-resizer, .sn-hresizer { display: none; }
  .sn-grid.ticket-folded .sn-ticket > :not(.sn-unfold) { display: revert; }
  .sn .sn-grid.ticket-folded .sn-unfold { display: none; }
  .sn-grid.ticket-folded .sn-ticket { padding: 16px; overflow-y: auto; }
  .sn-console { height: auto; max-height: 50%; }
  .sn-pane { display: none; height: 100%; }
  .sn-pane.on { display: flex; }
  .sn-ticket.on { display: block; }
  .sn-explorer, .sn-ftabs { display: none; }
  .sn-filepick { display: block; flex: 1; margin: 5px 8px; padding: 5px 8px; border: 1px solid var(--m-code-line); border-radius: 8px; background: var(--m-code-bg); color: var(--m-code-text); font: 13px var(--m-mono); }
  .sn-bar { gap: 10px; padding: 8px 10px; }
  .sn-saved { display: none; }
  .sn-crumbs > span:first-child, .sn-crumbs > span:nth-child(2) { display: none; }
  .sn-bar-text h1 { font-size: 16px; }
  .sn-map, .sn-result { padding: 16px 14px 48px; }
  .sn-hero { padding: 24px 20px 22px; border-radius: 18px; }
  .sn-hero-art { opacity: .55; }
  .sn-hero-bike { display: none; }
  .sn-progress-bar span { width: 30px; }
  .sn-tcard { gap: 10px; }
  .sn-node { width: 32px; height: 32px; margin-top: 16px; font-size: 14px; }
  .sn-tcard::before { left: 15px; top: 50px; }
  .sn-rhero { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .sn-rings { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* Build with AI's two options, above the map (11-07): the agency (Build's /build/app/) and AI coding practice, here. */
.sn .sn-tracks { display: flex; width: fit-content; gap: 2px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--m-border); border-radius: 999px; background: var(--m-surface); }
.sn .sn-track { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--m-muted); text-decoration: none; white-space: nowrap; }
.sn a.sn-track:hover, .sn a.sn-track:focus-visible { color: var(--m-ink); background: var(--m-sunken); }
.sn .sn-track-on { background: var(--m-ink); color: var(--m-surface); }
@media (max-width: 640px) { .sn .sn-track { padding: 6px 10px; font-size: 13px; } }
/* A phone (11-08, the user's iPhone 14: Stuck? lay over the ticket's tag and title; after a send-back, Stop here pushed
   Deliver off the screen and made the page scroll sideways; then "the stuck button being on a new line occupies too much
   space"). Stuck? is its bulb and Deliver to Marta is Deliver, so both fit beside the name; with Stop here too, the
   buttons take a second row. The hints open across the screen. The tests' count gets a line of its own under Run tests
   instead of being cut off. */
@media (max-width: 640px) {
  .sn-bar { flex-wrap: wrap; gap: 8px; }
  .sn-bar-text { flex: 1 1 110px; }
  .sn-bar-text h1 { font-size: 15px; }
  .sn-bar-right { gap: 8px; margin-left: auto; }
  .sn-stuck-label, .sn-submit-to { display: none; }
  .sn-hints { position: fixed; top: calc(var(--appbar, 56px) + 60px); right: 12px; left: 12px; width: auto; }
  .sn-console-bar { flex-wrap: wrap; row-gap: 4px; }
  .sn-run-status { order: 3; flex: 1 1 100%; text-align: left; white-space: normal; }
  .sn-run-status:empty { display: none; }
  .sn-console-bar .sn-btn-run { margin-left: auto; }
}
/* The seasons, beside the two options (11-07), once there's more than one. */
.sn .sn-map-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.sn .sn-map-top .sn-tracks { margin: 0; }
.sn .sn-seasons { display: flex; gap: 8px; overflow-x: auto; }
.sn .sn-season-link { display: flex; flex-direction: column; padding: 6px 12px; border: 1px solid var(--m-border); border-radius: 10px; background: var(--m-surface); color: var(--m-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.sn .sn-season-link b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sn .sn-season-link.on { border-color: var(--m-accent); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-accent); }
/* A review's summary and verdict in the Submit review dialog (11-07). */
.sn-dialog .sn-verdict { margin: 0 0 12px; padding: 0; border: 0; }
.sn-restart { margin: 14px 0 0; font-size: 13px; }
.sn-working { display: block; margin-top: 6px; color: var(--m-muted); font-size: 12.5px; }