/* Tutorial Check-In (drijezie.com/tutorials/) — site 9.175.6 */
.tsi { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; color: var(--ink, #1c2437); }
.tsi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tsi-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.1; margin: 0.25rem 0 0.6rem; color: var(--ink, #1c2437); }
.tsi-eyebrow { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #5b3fd6); }
.light-band .tsi-lede { max-width: 64ch; margin: 0; font-size: 1.05rem; color: var(--ink-2, #3a4463); }
.light-band .tsi-today { margin: 0.9rem 0 0; font-weight: 600; color: var(--ink, #1c2437); }
.light-band .tsi-who { margin: 0.2rem 0 0; color: var(--ink-2, #3a4463); }
.tsi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 1.25rem; margin-top: 1.75rem; align-items: start; }
@media (max-width: 900px) { .tsi-grid { grid-template-columns: minmax(0, 1fr); } }
.tsi-side { display: grid; gap: 1.25rem; }
.tsi-card { background: var(--surface, #fff); border: 1px solid var(--line, #e3e6ef); border-radius: 16px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.06); }
@media (max-width: 520px) { .tsi { padding: 1.5rem 0.9rem 3rem; } .tsi-card { padding: 1.1rem; border-radius: 14px; } }
.tsi-card h2 { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 700; color: var(--ink, #1c2437); }
.tsi-panel h3 { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 700; color: var(--ink, #1c2437); }
.light-band .tsi-panel p { margin: 0 0 0.75rem; color: var(--ink-2, #3a4463); }
.light-band .tsi-muted, .tsi-muted { color: var(--muted, #5d6679); font-weight: 400; }
.tsi-session { margin: 0 0 1.25rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--line, #e3e6ef); }
.light-band .tsi-label { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #5d6679); }
.light-band .tsi-session-title { margin: 0.2rem 0 0; font-size: 1.35rem; font-weight: 700; color: var(--ink, #1c2437); }
.light-band .tsi-session-time { margin: 0.1rem 0 0.6rem; color: var(--ink-2, #3a4463); }
.tsi-state { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: #eef0f6; color: #3a4463; }
.tsi-state[data-state="open"] { background: rgba(14, 138, 107, 0.13); color: #0a6b53; }
.tsi-state[data-state="upcoming"] { background: rgba(183, 121, 31, 0.14); color: #7d500f; }
.tsi-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.65rem 1.3rem; border-radius: 12px; border: 1px solid var(--line-strong, #cbd2e1); background: var(--surface, #fff); color: var(--ink, #1c2437); font-weight: 600; font-size: 1rem; cursor: pointer; }
.tsi-btn--primary { background: var(--accent, #5b3fd6); border-color: var(--accent, #5b3fd6); color: #fff; }
.tsi-btn:disabled { opacity: 0.6; cursor: progress; }
.tsi-btn:focus-visible, .tsi-purpose input:focus-visible + span, .tsi-field textarea:focus-visible, .tsi-field input:focus-visible { outline: 3px solid var(--accent, #5b3fd6); outline-offset: 2px; }
.tsi-fieldset { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.tsi-fieldset legend { margin-bottom: 0.6rem; font-weight: 600; color: var(--ink, #1c2437); }
.tsi-purposes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5rem; }
.tsi-purpose { position: relative; display: block; cursor: pointer; }
.tsi-purpose input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tsi-purpose span { display: flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0.55rem 0.8rem; border: 1px solid var(--line-strong, #cbd2e1); border-radius: 12px; background: var(--paper, #fbfbfd); color: var(--ink, #1c2437); font-weight: 500; }
.tsi-purpose span::before { content: ""; flex: 0 0 18px; height: 18px; border: 2px solid var(--line-strong, #aab3c5); border-radius: 5px; background: #fff; }
.tsi-purpose input:checked + span { border-color: var(--accent, #5b3fd6); background: rgba(91, 63, 214, 0.08); }
.tsi-purpose input:checked + span::before { border-color: var(--accent, #5b3fd6); background: var(--accent, #5b3fd6); box-shadow: inset 0 0 0 3px #fff; }
.tsi-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; }
.tsi-field label { font-weight: 600; color: var(--ink, #1c2437); }
.light-band .tsi-help { margin: 0; font-size: 0.88rem; color: var(--muted, #5d6679); }
.tsi-field textarea, .tsi-field input { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line-strong, #cbd2e1); border-radius: 10px; background: #fff; color: var(--ink, #1c2437); font: inherit; font-size: 1rem; }
.light-band .tsi-big { font-size: 1.15rem; font-weight: 600; color: var(--ink, #1c2437); }
.light-band .tsi-notice { padding: 0.75rem 0.9rem; border-radius: 10px; background: rgba(183, 121, 31, 0.1); color: #6b460e; }
.light-band .tsi-result { padding: 0.75rem 0.9rem; border-radius: 10px; background: #eef0f6; color: #2b3450; }
.tsi-done-verified .tsi-result { background: rgba(14, 138, 107, 0.12); color: #0a5c47; }
.tsi-done-rejected .tsi-result { background: rgba(192, 71, 59, 0.1); color: #8e3128; }
.light-band .tsi-error { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(192, 71, 59, 0.1); color: #8e3128; font-weight: 500; }
.tsi-link { color: var(--accent, #5b3fd6); font-weight: 600; text-decoration: underline; }
.light-band .tsi-next { font-weight: 600; color: var(--ink, #1c2437); }
.tsi-perks { list-style: none; margin: 0.8rem 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.tsi-perks li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-2, #3a4463); font-size: 0.93rem; }
.tsi-perk-ico { flex: 0 0 1.5rem; font-size: 1.1rem; line-height: 1.3; }
.tsi-progress { padding-top: 0.8rem; border-top: 1px solid var(--line, #e3e6ef); }
.light-band .tsi-progress p { margin: 0 0 0.2rem; color: var(--ink, #1c2437); }
.tsi-history { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.tsi-history-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line, #e3e6ef); font-size: 0.9rem; color: var(--ink-2, #3a4463); }
.tsi-history-item:last-child { border-bottom: 0; }
.tsi-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #eef0f6; color: #3a4463; }
.tsi-status[data-status="pending"] { background: rgba(183, 121, 31, 0.14); color: #7d500f; }
.tsi-status[data-status="verified"] { background: rgba(14, 138, 107, 0.13); color: #0a6b53; }
.tsi-status[data-status="rejected"] { background: rgba(192, 71, 59, 0.1); color: #8e3128; }