/* ─────────────────────────────────────────────────────────────────────────────
    Tutorial – dark theme aligned with Home app
    ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --text:        #cfe8ea;
    --text-muted:  #7ab8be;
    --border:      #1f3e42;
    --bg:          #0d1a1c;
    --bg-subtle:   #122a2d;
    --accent:      #22c4cc;
    --accent-dark: #136b75;
    --code-bg:     #0f2528;
    --radius:      6px;
    --max-w:       760px;
    --font-sans:   "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:   "Ubuntu Mono", "SFMono-Regular", Consolas, monospace;
}

html {
    font-size: 15px;
    scrollbar-gutter: stable;
    scrollbar-color: #1e5c63 #0d1a1c;
}

body {
    scrollbar-color: #1e5c63 #0d1a1c;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d1a1c; }
::-webkit-scrollbar-thumb {
    background: #1e5c63;
    border-radius: 999px;
    border: 2px solid #0d1a1c;
}
::-webkit-scrollbar-thumb:hover { background: #22c4cc; }

/* ── Layout shell ── */
.tut-layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

nav, nav .nav-wrapper {
    background-color: #0a2a2d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    height: 56px;
    line-height: 56px;
}

nav .nav-wrapper {
    padding-right: 18.75px;
}

nav .brand-logo {
    font-family: 'Michroma', sans-serif !important;
    font-weight: 400 !important;
    font-size: 19.5px !important;
    color: #ffffff !important;
    letter-spacing: 0.06em;
    padding-left: 18.75px;
}

nav .brand-logo .brand-sub {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 300 !important;
    font-size: 12.75px !important;
    color: #7ab8be;
    margin-left: 0.4rem;
}

nav ul li a {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13.8px !important;
    color: #7ab8be !important;
    text-transform: none !important;
}

nav ul li a:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.08) !important;
    text-decoration: none !important;
}

nav .brand-logo,
nav .brand-logo .brand-sub,
nav ul li a,
.theme-toggle-btn {
    -webkit-font-smoothing: antialiased;
}

.theme-toggle-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.theme-toggle-btn {
    border: 1px solid rgba(122,184,190,0.45);
    background: transparent;
    color: #7ab8be;
    border-radius: 999px;
    font-size: 11.7px;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.theme-toggle-btn:hover {
    color: #ffffff;
    border-color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.08);
}

.tut-breadcrumb-bar {
    max-width: var(--max-w);
    width: 100%;
    margin: 0 auto;
    padding: 0.75rem 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.tut-breadcrumb-bar a {
    color: var(--text-muted);
    text-decoration: none;
}

.tut-breadcrumb-bar a:hover {
    color: #cfe8ea;
}

.tut-breadcrumb-bar .sep {
    color: #4b7f86;
    margin: 0 0.45rem;
}

.tut-breadcrumb-bar .page-title {
    color: #cfe8ea;
}

.tut-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #0a2a2d;
    border-bottom: 1px solid #154046;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    padding: 0 2rem;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tut-topbar a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: color 0.15s;
}
.tut-topbar a:hover { color: var(--accent); }

.tut-topbar .sep { color: var(--border); font-size: 0.85rem; }

.tut-topbar .page-title {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

.tut-topbar .brand {
    font-family: 'Michroma', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.tut-main {
    flex: 1;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.tut-main.tut-main-wide {
    max-width: 1200px;
    padding: 1.875rem 1.875rem 2.8125rem;
}

.tut-hero {
    background: linear-gradient(135deg, #071a1c 0%, #0f3a3f 50%, #136b75 100%);
    border-radius: 10px;
    padding: 1.75rem 2.5rem 1.5rem;
    margin-bottom: 3rem;
    color: #fff;
    border: 1px solid rgba(34,166,179,0.18);
}

.tut-hero h1 {
    font-size: 2rem;
    font-weight: 500;
    color: #4dd9e8;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-top: 0;
}

.tut-hero .hero-subtitle {
    font-size: 1.05rem;
    opacity: 0.88;
    max-width: 600px;
    margin-top: 0;
    margin-bottom: 1.8rem;
    color: #a8d8dc;
    font-weight: 300;
}

/* ── Typography ── */
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.35em; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
h3 { font-size: 1.05rem; font-weight: 600; }

p  { margin-top: 0.75em; }

a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Page header (title block) ── */
.tut-page-header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.tut-page-header h1 { color: var(--text); color: #0a2a2d;}
.tut-page-header .subtitle { margin-top: 0.4rem; color: var(--text-muted); font-size: 0.92rem; color: #0f3a3f;}

/* ── Tutorial list ── */
.tut-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.5rem; }

.tut-main.tut-main-wide .tut-list {
    margin-top: 0;
}

.tut-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    background: var(--bg-subtle);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tut-list-item:hover {
    border-color: var(--accent);
    background: #16343a;
    box-shadow: 0 2px 10px rgba(34,196,204,0.16);
    text-decoration: none;
}

.tut-list-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    color: var(--accent);
}

.tut-list-body { flex: 1; min-width: 0; }
.tut-list-title { font-weight: 600; font-size: 0.97rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tut-list-desc  { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tut-pill {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
}

/* ── Step cards ── */
.tut-steps { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.75rem; }

.tut-step {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.tut-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    background: var(--bg-subtle);
    border-bottom: 1px solid transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-sans);
    transition: background 0.15s;
}
.tut-step.open .tut-step-header { border-bottom-color: var(--border); }

/* Step state colour coding */
.tut-step-header:hover { background: #18363a; }
.tut-step.state-none  .tut-step-header { background: #122a2d; }
.tut-step.state-done  .tut-step-header { background: #153925; }
.tut-step.state-help  .tut-step-header { background: #3b3015; }
.tut-step.state-none  .tut-step-header:hover { background: #18363a; }
.tut-step.state-done  .tut-step-header:hover { background: #1a4a31; }
.tut-step.state-help  .tut-step-header:hover { background: #4a3b17; }

.tut-step-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.tut-step-title { font-size: 1rem; font-weight: 600; color: var(--text); flex: 1; }

/* Header status icons */
.tut-step-status {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.tut-status-done,
.tut-status-help {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    line-height: 1;
}
.tut-status-done {
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}
.tut-status-help {
    font-size: 0.9rem;
}
.tut-status-done.visible { opacity: 1; }
.tut-status-help.visible { opacity: 1; }

/* Chevron indicator */
.tut-step-chevron {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.tut-step.open .tut-step-chevron { transform: rotate(-135deg); }

/* Collapsible body */
.tut-step-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 1.1rem;
    transition: max-height 0.75s ease, opacity 0.55s ease, padding 0.75s ease;
}
.tut-step.open .tut-step-body {
    max-height: 2000px;   /* large enough for any content */
    opacity: 1;
    padding: 1rem 1.1rem 0;
}

.tut-step-desc {
    font-size: 0.92rem;
    color: #a8d8dc;
    line-height: 1.7;
}

/* ── Markdown-rendered content inside .tut-step-desc ── */

/* Headings */
.tut-step-desc h1,
.tut-step-desc h2,
.tut-step-desc h3,
.tut-step-desc h4 {
    margin-top: 1.2em;
    margin-bottom: 0.4em;
    color: var(--text);
}

/* Paragraphs & lists */
.tut-step-desc p  { margin-top: 0.6em; }
.tut-step-desc ul,
.tut-step-desc ol { margin: 0.6em 0 0.6em 1.5em; }
.tut-step-desc li { margin-bottom: 0.25em; }

/* Inline code */
.tut-step-desc code {
    font-family: var(--font-mono);
    font-size: 0.83em;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1em 0.4em;
}

/* Fenced / block code – wrapper added by JS copy-button logic */
.tut-step-desc pre {
    position: relative;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 1em 0;
}
.tut-step-desc pre code {
    display: block;
    padding: 1rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    line-height: 1.6;
    color: #d4d4d4;
    background: none;
    border: none;
    border-radius: 0;
    white-space: pre;
}
/* Copy button */
.tut-copy-btn {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    padding: 2px 9px;
    font-size: 0.72rem;
    font-family: var(--font-sans);
    font-weight: 500;
    color: #aaa;
    background: #2d2d2d;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    user-select: none;
    line-height: 1.6;
}
.tut-copy-btn:hover  { color: #fff; background: #3a3a3a; }
.tut-copy-btn.copied { color: #4caf50; border-color: #4caf50; }

/* Tables */
.tut-step-desc table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.88rem;
}
.tut-step-desc th,
.tut-step-desc td {
    border: 1px solid var(--border);
    padding: 0.45em 0.75em;
    text-align: left;
}
.tut-step-desc th {
    background: var(--bg-subtle);
    font-weight: 600;
    color: var(--text);
}
.tut-step-desc tr:nth-child(even) td { background: #0f2427; }

/* Blockquotes */
.tut-step-desc blockquote {
    margin: 1em 0;
    padding: 0.6em 1rem;
    border-left: 4px solid var(--accent);
    background: #0f2a30;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: #9ec6ca;
    font-style: italic;
}
.tut-step-desc blockquote p { margin: 0; }

/* Horizontal rule */
.tut-step-desc hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5em 0;
}

/* ── Vote row ── */
.tut-vote-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.tut-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tut-vote-btn:hover  { border-color: var(--accent); color: var(--accent); }
.tut-vote-btn.voted  { border-color: #4caf50; color: #6cd070; background: #173925; }

.tut-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tut-help-btn:hover  { border-color: #e09000; color: #e09000; }
.tut-help-btn.active { border-color: #f2b233; color: #f2b233; background: #3b3015; }

.tut-vote-count { font-size: 0.8rem; color: var(--text-muted); }

/* ── Progress bar (optional) ── */
.tut-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 1.75rem;
    overflow: hidden;
}
.tut-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── Questions ── */
.tut-question-group .tut-step-header { background: #2a2038; }
.tut-question-group .tut-step-header:hover { background: #34264a; }
.tut-question-group.state-done .tut-step-header { background: #153925; }
.tut-question-group.state-done .tut-step-header:hover { background: #1a4a31; }

.tut-question {
    padding: 0.75rem 0;
}

.tut-question-statement {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.75rem;
}
.tut-question-statement p { margin: 0; }

.tut-question-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -0.3rem 0 0.6rem;
    font-style: italic;
}

.tut-choices {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tut-choice-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tut-choice-btn:hover { border-color: #9b6fd4; background: #2a2038; }

/* Radio / checkbox indicator dot */
.tut-choice-indicator {
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid var(--border);
    background: var(--bg);
    transition: border-color 0.15s, background 0.15s;
}
.tut-choice-btn.single .tut-choice-indicator { border-radius: 50%; }
.tut-choice-btn.multi  .tut-choice-indicator { border-radius: 3px; }

.tut-choice-btn.selected {
    border-color: #7c4dbd;
    background: #35264c;
    color: #d7c4ff;
    font-weight: 500;
}
.tut-choice-btn.selected .tut-choice-indicator {
    border-color: #7c4dbd;
    background: #7c4dbd;
}

.tut-question-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

/* ── Empty / info states ── */
.tut-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
    font-size: 0.95rem;
}

/* ── Footer ── */
.tut-footer {
    padding: 1.25rem;
    border-top: 1px solid #154046;
    background: #0a2a2d;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: auto;
}

.tut-footer .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.tut-footer .footer-left {
    text-align: left;
}

.tut-footer .footer-theme-toggle {
    margin-left: auto;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .tut-topbar { padding: 0 1rem; }
    .tut-main   { padding: 1.5rem 1rem 3rem; }
    h1 { font-size: 1.5rem; }

    .tut-footer .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .tut-footer .footer-theme-toggle {
        margin-left: 0;
    }
}

body[data-theme="light"] {
    background: #f2f7f9;
    color: #15373b;
}

body[data-theme="light"] {
    scrollbar-color: #8db5bb #eef5f6;
}

body[data-theme="light"] ::-webkit-scrollbar-track {
    background: #eef5f6;
}

body[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #8db5bb;
    border-color: #eef5f6;
}

body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #669ca4;
}

body[data-theme="light"] .tut-main,
body[data-theme="light"] p,
body[data-theme="light"] li,
body[data-theme="light"] td,
body[data-theme="light"] th,
body[data-theme="light"] label,
body[data-theme="light"] span {
    color: #1d4349;
}

body[data-theme="light"] nav,
body[data-theme="light"] nav .nav-wrapper {
    background-color: #e7f1f3 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

body[data-theme="light"] nav .brand-logo {
    color: #0e2f33 !important;
}

body[data-theme="light"] nav .brand-logo .brand-sub,
body[data-theme="light"] nav ul li a,
body[data-theme="light"] .tut-breadcrumb-bar,
body[data-theme="light"] .tut-breadcrumb-bar a,
body[data-theme="light"] .tut-pill,
body[data-theme="light"] .tut-vote-count,
body[data-theme="light"] .tut-empty {
    color: #34656b !important;
}

body[data-theme="light"] nav ul li a:hover {
    color: #0e2f33 !important;
    background-color: rgba(19,107,117,0.10) !important;
    text-decoration: none !important;
}

body[data-theme="light"] .theme-toggle-btn {
    color: #2b5960;
    border-color: rgba(52,101,107,0.45);
}

body[data-theme="light"] .theme-toggle-btn:hover {
    color: #0e2f33;
    border-color: rgba(14,47,51,0.45);
    background: rgba(19,107,117,0.12);
}

body[data-theme="light"] .tut-hero {
    background: linear-gradient(135deg, #d8edf0 0%, #c6e7eb 48%, #9ed7de 100%);
    color: #0f3135;
    border: 1px solid rgba(19,107,117,0.2);
}

body[data-theme="light"] .tut-hero h1,
body[data-theme="light"] .tut-hero .hero-subtitle {
    color: #0f3135 !important;
}

body[data-theme="light"] .tut-list-item,
body[data-theme="light"] .tut-step,
body[data-theme="light"] .tut-step-body,
body[data-theme="light"] .tut-vote-row,
body[data-theme="light"] .tut-choice-btn,
body[data-theme="light"] .tut-footer {
    background: #ffffff;
}

body[data-theme="light"] .tut-step,
body[data-theme="light"] .tut-list-item,
body[data-theme="light"] .tut-choice-btn,
body[data-theme="light"] .tut-question-divider,
body[data-theme="light"] .tut-footer {
    border-color: #c9e2e6;
}

body[data-theme="light"] .tut-choice-indicator {
    background: #ffffff;
    border-color: #9fc6cc;
}

body[data-theme="light"] .tut-step-title,
body[data-theme="light"] .tut-list-title,
body[data-theme="light"] .tut-choice-btn,
body[data-theme="light"] .tut-question-statement,
body[data-theme="light"] .tut-step-desc {
    color: #15373b !important;
}

body[data-theme="light"] .tut-list-desc,
body[data-theme="light"] .tut-step-num,
body[data-theme="light"] .tut-question-hint,
body[data-theme="light"] .tut-vote-count,
body[data-theme="light"] .tut-empty,
body[data-theme="light"] .tut-pill,
body[data-theme="light"] .sr-sum-label,
body[data-theme="light"] .sr-card-respondents {
    color: #2f5a61 !important;
}

body[data-theme="light"] .tut-step-header,
body[data-theme="light"] .tut-step.state-none .tut-step-header,
body[data-theme="light"] .tut-question-group .tut-step-header {
    background: #eef6f8;
}

body[data-theme="light"] .tut-step.state-done .tut-step-header,
body[data-theme="light"] .tut-question-group.state-done .tut-step-header {
    background: #e8f7eb;
}

body[data-theme="light"] .tut-step.state-help .tut-step-header {
    background: #fff7e8;
}

body[data-theme="light"] .tut-step-desc pre {
    border-color: #c9dbe0;
}

body[data-theme="light"] .tut-copy-btn {
    background: #2e3c41;
}