/* Shared responsive styling for the standalone planning tools. */
:root {
    color-scheme: light;
    --tool-ink: #1d2d48;
    --tool-muted: #66758d;
    --tool-blue: #285bc5;
    --tool-blue-dark: #1d469c;
    --tool-blue-soft: #edf3ff;
    --tool-border: #dce5f2;
    --tool-surface: #fff;
    --tool-bg: #f4f7fc;
    --tool-radius: 16px;
    --tool-shadow: 0 8px 26px rgba(32, 61, 111, .06);
}

html { min-width: 320px; overflow-x: hidden; background: var(--tool-bg); }
body {
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 28px auto 56px;
    padding: 0;
    color: var(--tool-ink);
    background: transparent;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
h1 { color: var(--tool-ink); font-size: clamp(30px, 5vw, 42px); line-height: 1.14; letter-spacing: -.04em; margin: 0 0 8px; }
h2 { letter-spacing: -.025em; }
.subtitle { color: var(--tool-muted); font-size: 15px; line-height: 1.65; margin: 0 0 24px; }
.tool-topline { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:25px; }
.tool-brand { color:var(--tool-ink); font-size:15px; font-weight:750; letter-spacing:-.03em; }
.tool-brand span { color:var(--tool-blue); }
.back-link { display:inline-flex; align-items:center; gap:7px; color:var(--tool-blue); font-size:13px; font-weight:650; text-decoration:none; }
.back-link:hover { color:var(--tool-blue-dark); text-decoration:underline; text-underline-offset:3px; }
.card {
    background:var(--tool-surface); border:1px solid var(--tool-border); border-radius:var(--tool-radius);
    padding:22px; margin-bottom:16px; box-shadow:var(--tool-shadow);
}
label.main-label { display:block; margin:0 0 13px; color:var(--tool-ink); font-size:15px; font-weight:700; }
input[type="date"], input[type="number"], input[type="text"], select, textarea {
    width:100%; min-width:0; min-height:46px; padding:10px 12px; border:1px solid #cfd9e8;
    border-radius:10px; background:#fff; color:var(--tool-ink); font:inherit; font-size:16px;
    box-shadow:0 1px 2px rgba(25,45,80,.03);
}
input:focus, select:focus, textarea:focus { outline:3px solid #dbe7ff; border-color:#8eace9; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > div { flex:1 1 180px; min-width:0; }
.hint { color:var(--tool-muted); font-size:12px; margin-top:6px; }
.class-item, .theme-block, .excl-row {
    border:1px solid var(--tool-border); border-radius:13px; padding:14px; margin-bottom:11px;
    background:#f9fbff; min-width:0;
}
.class-item .class-header { display:flex; gap:10px; align-items:center; margin-bottom:11px; min-width:0; }
.class-item .class-header input[type="text"] { flex:1; min-width:0; font-weight:650; }
.days-checks { display:flex; gap:7px; flex-wrap:wrap; }
.day-check {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:7px 12px;
    border-radius:999px; border:1px solid #d4deec; background:#fff; color:#42516a;
    cursor:pointer; user-select:none; font-size:13px; transition:background .15s,border-color .15s;
}
.day-check:hover { background:#f1f5fd; }
.day-check input { margin:0; accent-color:var(--tool-blue); }
.day-check:has(input:checked) { background:var(--tool-blue-soft); border-color:#9ab5ec; color:var(--tool-blue-dark); }
.theme-block { padding:15px; }
.theme-header { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; min-width:0; }
.theme-header input.theme-name { flex:1 1 260px; min-width:0; font-weight:650; }
.theme-header input.theme-lessons { width:118px; flex:0 0 118px; text-align:center; }
.theme-header .flex-toggle {
    display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 12px; border-radius:10px;
    border:1px solid var(--tool-border); background:#fff; cursor:pointer; font-size:13px; white-space:normal;
}
.theme-header .flex-toggle input { margin:0; accent-color:var(--tool-blue); }
.theme-header .flex-toggle:has(input:checked) { background:var(--tool-blue-soft); border-color:#a8bde7; }
.theme-header .theme-sum { padding:7px 10px; border-radius:8px; background:#edf2fa; color:#45536a; font-size:13px; font-weight:650; white-space:nowrap; }
.hours-list { margin-top:12px; padding:13px; background:#fff; border:1px solid var(--tool-border); border-radius:11px; }
.hours-list.hidden { display:none; }
.hours-list-title { margin-bottom:8px; color:var(--tool-muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.hour-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid #edf1f7; min-width:0; }
.hour-row:last-child { border-bottom:none; }
.hour-row .hour-label { min-width:90px; color:#44536b; font-size:14px; }
.hour-row select { width:190px; max-width:100%; min-width:0; }
.hour-row .hour-tag { color:var(--tool-muted); font-size:12px; }
.excl-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.excl-row input { flex:1 1 180px; min-width:0; }
.excl-row span { color:var(--tool-muted); }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px;
    border:0; border-radius:10px; color:#fff; font-family:inherit; font-size:14px; font-weight:650; line-height:1.3;
    text-align:center; text-decoration:none; cursor:pointer; transition:background .15s,transform .15s;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--tool-blue); }
.btn-primary:hover { background:var(--tool-blue-dark); }
.btn-secondary { background:#eaf1ff; color:var(--tool-blue-dark); border:1px solid #d4e1fb; }
.btn-secondary:hover { background:#dfeaff; }
.btn-danger { min-width:44px; padding:9px 12px; background:#fff0f0; color:#b84d55; border:1px solid #f1d6d8; }
.btn-danger:hover { background:#ffe5e7; }
.btn-success { background:#e8f7ef; color:#23734a; border:1px solid #cbe9d8; }
.btn-success:hover { background:#d9f1e4; }
.error { margin:15px 0; padding:14px 16px; border:1px solid #f2cbcb; border-left:4px solid #d84a4a; border-radius:11px; background:#fff4f4; color:#9e3030; }
.error ul { margin:6px 0 0 20px; padding:0; }
.success { margin:18px 0; padding:18px; border:1px solid #cbe8d5; border-left:4px solid #2b9b5e; border-radius:13px; background:#f0fbf4; }
.success h3 { margin:0 0 8px; color:#247447; }
.success p { margin:6px 0; }
.instructions { margin-bottom:16px; padding:18px 20px; border:1px solid #d7e4fb; border-radius:var(--tool-radius); background:#eef4ff; color:#344968; }
.instructions h2 { margin:0 0 10px; color:#244985; font-size:17px; }
.instructions ol { margin:0; padding-left:22px; }
.instructions li { margin-bottom:7px; line-height:1.55; }
.instructions li:last-child { margin-bottom:0; }
.instructions code { padding:2px 6px; border:1px solid #dce5f1; border-radius:5px; background:#fff; font-family:ui-monospace,monospace; }
.instructions .note { margin-top:13px; padding:12px 14px; border:1px solid #d8e6f8; border-radius:10px; background:#fff; color:#395273; font-size:13px; }
.instructions .example { max-width:100%; padding:10px 12px; border:1px dashed #c9d7ed; border-radius:8px; background:#f8faff; color:#33445e; font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; overflow-x:auto; }
.counter-box { display:flex; align-items:center; gap:12px 22px; flex-wrap:wrap; margin-top:15px; padding:14px 16px; border:1px solid #d8e4f7; border-left:4px solid var(--tool-blue); border-radius:11px; background:#f2f6ff; font-size:13px; }
.counter-box .counter-item { display:flex; align-items:baseline; gap:6px; }
.counter-box .counter-num { color:#244985; font-size:18px; font-weight:750; }
.counter-box.ok { background:#effaf3; border-color:#cfe8d8; border-left-color:#2b9b5e; }
.counter-box.ok .counter-num { color:#237447; }
.counter-box.over { background:#fff3f3; border-color:#f1d1d1; border-left-color:#d84a4a; }
.counter-box.over .counter-num { color:#b33030; }
.counter-box.under { background:#fff9e9; border-color:#f0e2b7; border-left-color:#d3a430; }
.counter-box.under .counter-num { color:#9b740c; }
.result-actions { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.block { max-width:100%; overflow:hidden; border:1px solid var(--tool-border); border-left:4px solid var(--tool-blue); border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(32,61,111,.04); }
.block-header { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:10px 13px; background:#f7f9fd; border-bottom:1px solid #e8edf5; color:var(--tool-muted); font-size:12px; font-weight:700; }
.block-header .block-title { color:var(--tool-ink); white-space:nowrap; }
.block-header .block-actions { display:flex; flex-wrap:wrap; gap:6px; }
.block-body { max-width:100%; padding:12px 14px; overflow-x:auto; font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; }
.copy-one { min-height:36px; padding:7px 11px; border:0; border-radius:7px; background:var(--tool-blue); color:#fff; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.copy-one:hover { background:var(--tool-blue-dark); }
.copy-one.done { background:#278b54; }
form > .btn-primary { min-height:50px; padding:13px 28px !important; font-size:16px !important; }

@media (max-width: 640px) {
    body { width:calc(100% - 24px); margin:14px auto 36px; }
    .tool-topline { margin-bottom:20px; }
    .subtitle { margin-bottom:18px; font-size:14px; }
    .card { padding:16px; margin-bottom:12px; border-radius:14px; }
    .instructions { padding:16px; }
    .instructions .note { padding:10px; }
    .row { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
    .row > div { min-width:0; }
    .class-item, .theme-block { padding:12px; }
    .class-item .class-header { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
    .class-item .class-header .btn-danger { width:44px; }
    .days-checks { gap:6px; }
    .day-check { flex:0 0 auto; min-width:43px; min-height:43px; padding:7px 10px; }
    .excl-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
    .excl-row span { display:none; }
    .excl-row input { width:100%; min-width:0; }
    .excl-row .btn-danger { grid-column:1 / -1; width:100%; }
    .theme-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
    .theme-header input.theme-name { grid-column:1 / -1; width:100%; }
    .theme-header input.theme-lessons { width:100%; min-width:0; }
    .theme-header .flex-toggle { grid-column:1 / -1; width:100%; }
    .theme-header .theme-sum { justify-self:start; }
    .theme-header .btn-danger { justify-self:end; }
    .hour-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px 10px; }
    .hour-row .hour-label { min-width:0; }
    .hour-row select { width:100%; }
    .hour-row .hour-tag { grid-column:1 / -1; margin:0; }
    .counter-box { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px; }
    .counter-box .counter-item { justify-content:space-between; }
    form > .btn-primary { width:100%; }
    .result-actions { display:grid; grid-template-columns:minmax(0,1fr); }
    .result-actions .btn { width:100%; }
    .block-header { gap:7px; padding:9px 10px; }
    .block-header .block-actions { margin-left:auto; }
    .block-body { padding:11px 12px; font-size:13px; }
}

@media (max-width: 360px) {
    body { width:calc(100% - 20px); }
    .card { padding:13px; }
    .instructions { padding:13px; }
    .instructions ol { padding-left:19px; }
    .days-checks { gap:5px; }
    .day-check { min-width:40px; padding:6px 8px; font-size:12px; }
    .block-header .block-actions { width:100%; margin-left:0; }
    .block-header .block-actions .copy-one { flex:1; }
}

/* Stronger visual hierarchy: each stage has its own color and numbered marker. */
:root {
    --tool-ink:#152a4c;
    --tool-muted:#51647f;
    --tool-blue:#1d4ed8;
    --tool-blue-dark:#173fae;
    --tool-blue-soft:#e8f0ff;
    --tool-border:#d4dfef;
    --tool-bg:#edf3fc;
}
html { background:#edf3fc; }
body { color:#152a4c; }
h1 { color:#16396f; }
.tool-topline { padding:11px 15px; border:1px solid #d5e2f5; border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(30,65,130,.06); }
.tool-brand { color:#17396f; font-size:16px; }
.tool-brand span { color:#2871e8; }
.back-link { padding:8px 11px; border-radius:9px; background:#edf3ff; }
.back-link:hover { background:#dce9ff; text-decoration:none; }
h1 { padding-left:15px; border-left:5px solid #2871e8; }
.subtitle { padding-left:20px; }
.instructions { border:1px solid #f0d27d; border-left:5px solid #e3a817; background:linear-gradient(115deg,#fff5d8,#fffdf4); color:#51431c; }
.instructions h2 { color:#865d00; }
.instructions .note { border-color:#bdd6fb; background:#eaf3ff; color:#23477e; }
.instructions .example { border-color:#abc8f2; background:#fff; color:#203d68; }
form#planForm { counter-reset:plan-step; }
form#datesForm { counter-reset:dates-step; }
form#planForm > .card { position:relative; border-left:5px solid var(--section-color); background:linear-gradient(110deg,var(--section-tint),#fff 35%); }
form#planForm > .card:nth-child(1) { --section-color:#2563eb; --section-tint:#eaf2ff; }
form#planForm > .card:nth-child(2) { --section-color:#07978f; --section-tint:#e4f8f5; }
form#planForm > .card:nth-child(3) { --section-color:#df9411; --section-tint:#fff5df; }
form#planForm > .card:nth-child(4) { --section-color:#7651d5; --section-tint:#f1edff; }
form#datesForm > .card { position:relative; border-left:5px solid var(--section-color); background:linear-gradient(110deg,var(--section-tint),#fff 35%); }
form#datesForm > .card:nth-child(1) { --section-color:#2563eb; --section-tint:#eaf2ff; }
form#datesForm > .card:nth-child(2) { --section-color:#07978f; --section-tint:#e4f8f5; }
form#datesForm > .card:nth-child(3) { --section-color:#df9411; --section-tint:#fff5df; }
form#planForm > .card > .main-label { display:flex; align-items:center; gap:11px; min-height:37px; }
form#datesForm > .card > .main-label { display:flex; align-items:center; gap:11px; min-height:37px; }
form#planForm > .card > .main-label::before {
    counter-increment:plan-step; content:counter(plan-step,decimal-leading-zero); flex:0 0 34px; height:34px;
    display:grid; place-items:center; border-radius:10px; background:var(--section-color); color:white; font-size:12px; font-weight:800;
}
form#datesForm > .card > .main-label::before {
    counter-increment:dates-step; content:counter(dates-step,decimal-leading-zero); flex:0 0 34px; height:34px;
    display:grid; place-items:center; border-radius:10px; background:var(--section-color); color:white; font-size:12px; font-weight:800;
}
.class-item { border-color:#c4e9e4; border-left:4px solid #07978f; background:#f1fcfa; }
.day-check { color:#24455f; border-color:#bdd9d5; }
.day-check:has(input:checked) { color:#075f5a; background:#bff2e9; border-color:#07978f; box-shadow:inset 0 0 0 1px #07978f; }
.theme-block { border-color:#d8cef5; border-left:4px solid #7651d5; background:#faf8ff; }
.theme-header .flex-toggle:has(input:checked) { background:#e9e1ff; border-color:#987add; color:#50319f; }
.hours-list { border-color:#d6cef0; background:#fff; }
.hours-list-title { color:#6746b6; }
.excl-row { border-color:#f0d99b; background:#fffaf0; }
.counter-box { border:1px solid #bdd2fa; border-left:5px solid #1d4ed8; background:linear-gradient(105deg,#dce9ff,#f3f7ff); color:#18396e; }
.counter-box .counter-num { color:#123c9a; }
.btn-primary { background:linear-gradient(115deg,#2563eb,#1749c4); box-shadow:0 6px 16px rgba(37,99,235,.22); }
.btn-primary:hover { background:linear-gradient(115deg,#1d4ed8,#153ea8); }
.btn-secondary { background:#dff4f1; color:#08766f; border-color:#b7e5df; }
.btn-secondary:hover { background:#c8eee8; }
.btn-danger { background:#fff0ee; color:#b63f38; border-color:#f1cbc7; }
.block { border-left-color:#1d4ed8; }
.block-header { background:#e9f1ff; }
.copy-one { background:#147f98; }
.copy-one:hover { background:#0c6579; }
form#planForm > .btn-primary { min-height:54px; border-radius:12px; }
form#datesForm > .btn-primary { min-height:54px; border-radius:12px; background:linear-gradient(110deg,#078b93,#087f8c); box-shadow:0 6px 16px rgba(8,127,140,.2); }
@media(max-width:640px) {
    .tool-topline { align-items:center; padding:9px 10px; }
    .tool-brand { font-size:14px; }
    .back-link { padding:8px; font-size:12px; }
    h1 { margin-top:8px; }
    form#planForm > .card { background:linear-gradient(180deg,var(--section-tint),#fff 76px); }
    form#datesForm > .card { background:linear-gradient(180deg,var(--section-tint),#fff 76px); }
    form#planForm > .btn-primary { position:sticky; bottom:8px; z-index:5; box-shadow:0 8px 24px rgba(19,57,132,.28); }
    form#datesForm > .btn-primary { position:sticky; bottom:8px; z-index:5; width:100%; box-shadow:0 8px 24px rgba(8,127,140,.28); }
}

/* Make the result easy to spot after a long form has been submitted. */
.result-notice {
    display:flex;
    align-items:center;
    gap:9px;
    width:fit-content;
    max-width:100%;
    margin:-8px 0 18px 20px;
    padding:10px 14px;
    border:1px solid #a8ded4;
    border-radius:11px;
    background:#e6f8f4;
    color:#075f5a;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}
.result-notice:hover { background:#d7f2ec; }
.result-notice-icon {
    display:grid;
    place-items:center;
    flex:0 0 25px;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#078b79;
    color:#fff;
}
.dates-result { scroll-margin-top:14px; border-color:#8fd5c5; border-top:5px solid #07978f; }
.dates-result:focus { outline:3px solid #b7eee3; outline-offset:3px; }
.result-summary { margin:-8px 0 18px; color:#08766f; font-weight:600; }
@media(max-width:640px) {
    .result-notice { width:100%; margin:0 0 16px; justify-content:center; text-align:center; }
    .dates-result { scroll-margin-top:10px; }
}
@media(prefers-reduced-motion:no-preference) {
    .dates-result { animation:result-arrival 1.3s ease-out 1; }
    @keyframes result-arrival {
        0% { box-shadow:0 0 0 0 rgba(7,151,143,.35),var(--tool-shadow); }
        45% { box-shadow:0 0 0 7px rgba(7,151,143,.18),var(--tool-shadow); }
        100% { box-shadow:var(--tool-shadow); }
    }
}