:root{--ink:#17232d;--muted:#78838d;--subtle:#a4adb4;--line:#e8edf0;--paper:#fff;--soft:#f6f8f9;--accent:#2783a4;--danger:#b34b4b;color-scheme:light}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;font-synthesis:none;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a7cad9;outline-offset:3px}
.site-shell{width:min(100% - 52px,920px);margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:28px;min-height:98px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:baseline;font-size:27px;font-weight:760;letter-spacing:-1.7px;white-space:nowrap}.brand-period{color:#497f90}.brand small{font-size:10px;letter-spacing:1.2px;font-weight:800;color:var(--muted);align-self:flex-start;margin-left:7px;margin-top:8px}.brand-icon{font-size:18px;color:#497f90;letter-spacing:0;margin-right:9px}
.top-nav{display:flex;gap:22px;margin-left:auto}.top-nav a{font-size:13px;color:var(--muted);font-weight:560}.top-nav a[aria-current=page]{color:var(--ink);font-weight:750}.top-nav a:hover{color:var(--ink)}.logout-form{margin:0}.logout-form button{background:none;border:0;color:var(--muted);font-size:12px;padding:9px 0 9px 15px;border-left:1px solid var(--line)}.header-safe{margin-left:auto;color:var(--muted);font-size:12px}
main{flex:1}.hero{padding:64px 0 38px}.eyebrow{margin:0;color:var(--muted);font-weight:760;letter-spacing:2px;font-size:10px;text-transform:uppercase}.hero h1,.login-layout h1{font-size:clamp(41px,7vw,65px);line-height:1.06;font-weight:730;letter-spacing:-3.5px;margin:15px 0 13px}.title-period{color:#478da5}.intro{color:var(--muted);font-size:16px;margin:0;max-width:550px}
.overview-topline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:34px;padding:0 0 16px;border-bottom:1px solid var(--line)}.overview-topline h2{font-size:19px;margin:0;font-weight:720;letter-spacing:-.5px}.overview-topline>span{color:var(--muted);font-size:12px}
.children-overview{display:block}.child-row{--person:#407ca1;--person-bg:#eaf2f6;display:flex;align-items:center;min-height:148px;gap:23px;border-bottom:1px solid var(--line);transition:background .15s}.child-olle{--person:#177b68;--person-bg:#e9f4ef}.child-row:hover{background:#fbfcfc}.child-avatar,.hero-avatar{width:70px;height:70px;flex:0 0 70px;border-radius:22px;background:var(--person-bg);color:var(--person);display:grid;place-items:center;font-size:29px;font-weight:730;letter-spacing:-1px}.child-row-content{min-width:0;display:flex;flex-direction:column;gap:2px}.child-row-content strong{font-size:24px;letter-spacing:-.7px;font-weight:730}.child-row-content>span{color:var(--muted);font-size:13px}.child-row-content .child-preview{color:#586a76;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:440px}.child-row-right{margin-left:auto;display:flex;align-items:center;gap:27px;font-size:13px;color:var(--muted)}.child-row-right>span:last-child{font-size:25px;color:var(--ink)}
.footnote{color:#8b959e;font-size:12px;margin:38px 0 58px;line-height:1.7;max-width:650px}.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:23px 0 33px;font-size:11px;color:#9ca5ac}
.child-signe{--accent:#3b75a0;--accent-bg:#edf4f9}.child-olle{--accent:#18816a;--accent-bg:#e9f5f0}.child-hero{padding-top:32px;padding-bottom:38px}.back-link{display:inline-block;color:var(--muted);font-size:12px;margin-bottom:38px}.back-link:hover{color:var(--ink)}.hero-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.hero-avatar{background:var(--accent-bg);color:var(--accent);height:66px;width:66px;flex-basis:66px;border-radius:50%;font-size:27px}.child-hero h1{margin-top:12px;font-size:clamp(43px,6vw,59px)}.child-hero .title-period{color:var(--accent)}
.week-toolbar{display:flex;justify-content:space-between;align-items:end;gap:12px;border-bottom:1px solid var(--line);padding-bottom:18px}.week-toolbar h2{font-size:28px;line-height:1.2;letter-spacing:-.9px;margin:5px 0 3px}.date-range{font-size:12px;color:var(--muted)}.week-control{display:flex;align-items:center;gap:6px}.week-control a{display:grid;place-items:center;min-width:38px;height:38px;border-radius:10px;background:var(--soft);color:#41515b;font-size:18px}.week-control .week-now{font-size:12px;min-width:55px;font-weight:630}.week-control a:hover{background:#eaf0f3}
.progress-area{margin:28px 0 22px}.progress-titles{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:11px}.progress-titles span:first-child{font-size:15px;font-weight:710}.progress-titles span:last-child{font-size:12px;color:var(--muted)}progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:5px;border:0;border-radius:5px;overflow:hidden;background:#e9edef}progress::-webkit-progress-bar{background:#e9edef;border-radius:5px}progress::-webkit-progress-value{background:var(--accent);border-radius:5px;transition:width .2s}progress::-moz-progress-bar{background:var(--accent);border-radius:5px}
.composer{border:1px solid var(--line);border-radius:12px;margin:26px 0 40px;background:#fff}.composer>summary{display:flex;align-items:center;gap:10px;padding:15px 17px;cursor:pointer;color:var(--ink);font-size:13px;font-weight:650;list-style:none}.composer>summary::-webkit-details-marker{display:none}.composer>summary span{font-size:20px;font-weight:400;color:var(--accent)}.composer[open]>summary{border-bottom:1px solid var(--line)}.editor-form{padding:20px 16px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 14px}.field{display:flex;flex-direction:column;gap:6px;color:#52626f;font-size:12px;font-weight:620}.field-span{grid-column:1/-1}.field input,.field textarea,.field select{width:100%;background:#fff;border:1px solid #dfe6e9;border-radius:9px;padding:11px 12px;min-height:42px;color:var(--ink);font-size:14px;font-weight:450;outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:#88aec0;box-shadow:0 0 0 3px #e6f0f5}.field textarea{resize:vertical}.optional-check{display:flex;align-items:center;gap:9px;font-size:13px;color:#5d6c76;margin:17px 0}.optional-check input{accent-color:var(--accent);width:16px;height:16px}.button{border:0;border-radius:9px;padding:11px 17px;font-size:13px;font-weight:650}.button.primary{background:#20323c;color:white}.button.primary:hover{background:#354b59}.button.large{width:100%;padding:15px 17px;display:flex;justify-content:space-between}
.week-content{margin-bottom:12px}.day-section{margin:39px 0 0}.section-label{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:2px}.section-label h3{font-size:16px;font-weight:740;margin:0;letter-spacing:-.25px}.section-label>span{font-size:12px;color:var(--muted)}.tasks-list{display:block}.task-item{border-bottom:1px solid #f0f2f4}.task-main{display:flex;align-items:flex-start;gap:15px;min-height:76px;padding:19px 0 18px}.toggle-form{flex:0 0 auto;margin-top:2px}.check-wrap{display:block;position:relative;width:24px;height:24px;cursor:pointer}.check-wrap>input{opacity:0;position:absolute;inset:0;width:24px;height:24px;margin:0;cursor:pointer;z-index:1}.custom-check{position:absolute;inset:2px;border:1.7px solid #c2cbd2;border-radius:7px;background:#fff;transition:background .12s,border-color .12s}.check-wrap input:checked+.custom-check{background:var(--accent);border-color:var(--accent)}.check-wrap input:checked+.custom-check:after{content:'✓';position:absolute;inset:-2px;display:grid;place-items:center;color:white;font-weight:800;font-size:14px}.check-wrap input:focus-visible+.custom-check{outline:3px solid #bdd6e1;outline-offset:2px}.task-copy{flex:1;min-width:0}.task-name{font-size:15px;font-weight:660;line-height:1.45;letter-spacing:-.08px}.completed .task-name{text-decoration:line-through;color:#98a2a9}.task-meta{display:flex;flex-wrap:wrap;gap:7px 11px;margin-top:3px;color:#939ea5;font-size:11px}.soft-tag{color:#6f808b;background:#f2f5f6;border-radius:5px;padding:0 6px}.soft-tag.review{background:#fbf1dd;color:#98722b}.task-description{margin:7px 0 0;font-size:12px;color:#73818a;line-height:1.6}.info-mark{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1px solid #8fa3b1;color:#728895;display:grid;place-items:center;font-family:Georgia,serif;font-size:12px;font-style:italic;margin:2px 1px 0}.task-edit{flex:0 0 auto;margin-left:auto;position:relative}.task-edit>summary{cursor:pointer;color:#8c99a2;font-weight:600;letter-spacing:1px;font-size:15px;padding:0 4px;list-style:none}.task-edit>summary::-webkit-details-marker{display:none}.task-edit[open]{flex-basis:100%;position:static}.task-main:has(.task-edit[open]){flex-wrap:wrap}.task-edit[open] .edit-inner{border:1px solid var(--line);padding:8px 0 0;border-radius:10px;margin-top:9px}.task-edit .editor-form{padding:14px}.delete-form{padding:0 14px 14px}.text-button{border:0;background:transparent;padding:5px 0;color:var(--muted);font-size:12px}.text-button.danger{color:var(--danger)}
.info-area{margin:51px 0 0;padding-top:16px;border-top:1px solid var(--line)}.info-area h2{font-size:19px;letter-spacing:-.4px;margin:0}.info-area>p{font-size:12px;color:var(--muted);margin:5px 0 17px}.info-date{font-size:11px;color:var(--muted);margin-top:16px}.empty-state{padding:39px 0 55px;text-align:center;border-bottom:1px solid var(--line)}.empty-mark{display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-size:22px;width:51px;height:51px;border-radius:18px;margin:0 auto 19px}.empty-state h2{font-size:21px;letter-spacing:-.6px;margin:0 0 9px}.empty-state p{font-size:13px;color:var(--muted);max-width:350px;margin:0 auto 18px}.empty-state a{font-size:13px;color:var(--accent);font-weight:680}
.login-layout{max-width:480px;margin:0 auto;padding:98px 0 88px}.login-layout h1{font-size:clamp(42px,7vw,58px);margin:17px 0}.login-layout .intro{max-width:360px}.login-form{margin:51px 0 14px}.login-form .field{margin-bottom:19px}.login-form input{min-height:50px}.muted-note{font-size:12px;color:#9aa6ac}.flash{margin-top:20px;border:1px solid #e6e9e9;background:#f6f8f7;border-radius:10px;color:#425864;padding:12px 16px;font-size:13px}
@media(max-width:650px){.site-shell{width:calc(100% - 38px)}.topbar{gap:15px;min-height:76px;flex-wrap:wrap;padding:10px 0}.brand{font-size:23px}.brand-icon{font-size:15px}.top-nav{gap:15px}.top-nav a{font-size:12px}.logout-form{width:100%;display:flex;justify-content:flex-end}.logout-form button{border:0;padding:0 0 7px}.hero{padding:52px 0 25px}.overview-hero{padding-top:56px}.hero h1{letter-spacing:-2.3px}.overview-topline{margin-top:28px;align-items:start;flex-direction:column;gap:4px}.child-row{min-height:128px;gap:16px}.child-avatar{width:57px;height:57px;flex-basis:57px;border-radius:17px;font-size:24px}.child-row-content strong{font-size:22px}.child-row-content .child-preview{max-width:195px}.child-row-right{gap:8px}.child-hero{padding-top:23px}.back-link{margin-bottom:33px}.child-hero h1{letter-spacing:-2.5px}.hero-avatar{height:56px;width:56px;flex-basis:56px;font-size:23px}.child-hero .intro{font-size:14px}.progress-area{margin-top:29px}.week-toolbar h2{font-size:27px}.week-control a{min-width:34px;height:36px}.week-control .week-now{min-width:50px}.task-main{gap:12px}.task-name{font-size:14px}.field-grid{gap:12px}.login-layout{padding-top:84px}.footnote{margin-bottom:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}


/* Skola 0491 v1.1 – kompakt, mobilförst, behåller befintliga uppgiftsformulär */
.site-shell { max-width: 760px; }
.topbar { min-height: 70px; gap: 21px; }
.brand { font-size: 25px; }
.top-nav { gap: 20px; }
.logout-form button.logout-button { display: grid; place-items: center; width: 32px; height: 36px; padding: 5px; border: 0; color: var(--muted); }
.logout-form button.logout-button:hover { color: var(--ink); }
.logout-icon { display: block; }
.hero.overview-hero { padding: 35px 0 14px; }
.overview-hero h1 { font-size: clamp(36px, 6vw, 48px); margin: 10px 0 8px; letter-spacing: -2.1px; }
.overview-hero .intro { font-size: 15px; max-width: 440px; }
.overview-topline { margin-top: 23px; padding-bottom: 10px; }
.overview-topline h2 { font-size: 17px; }
.child-row { min-height: 93px; gap: 16px; }
.child-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; font-size: 21px; }
.child-row-content strong { font-size: 21px; }
.child-row-content > span { font-size: 12px; }
.child-row-right { gap: 12px; font-size: 12px; white-space: nowrap; }
.child-row-right > span:last-child { font-size: 23px; font-weight: 400; }
.hero.child-hero { padding: 28px 0 18px; }
.child-hero h1 { font-size: clamp(33px, 6vw, 43px); margin: 8px 0 0; letter-spacing: -1.65px; }
.week-toolbar { align-items: center; gap: 10px; padding: 12px 0 17px; }
.week-toolbar h2 { font-size: 25px; margin: 0 0 2px; }
.week-control a { background: transparent; }
.week-control .week-now { background: var(--soft); }
.week-control a:hover { background: var(--soft); }
.progress-area { margin: 19px 0 15px; }
.progress-titles { margin-bottom: 8px; }
.empty-state { padding: 33px 0 9px; border: 0; text-align: left; }
.empty-state h2 { font-size: 18px; letter-spacing: -.35px; margin: 0 0 5px; }
.empty-state p { font-size: 13px; margin: 0; max-width: 480px; line-height: 1.6; }
.composer { margin: 18px 0 28px; border: 0; border-radius: 0; }
.composer > summary { padding: 11px 0; font-size: 13px; color: var(--accent); }
.composer > summary span { font-size: 21px; }
.composer[open] > summary { border-bottom: 1px solid var(--line); }
.composer .editor-form { padding: 19px 0 13px; }
.day-section { margin-top: 24px; }
.info-area { margin-top: 34px; }
.site-footer { display: none; }
@media (max-width: 650px) {
  .site-shell { width: calc(100% - 36px); }
  .topbar { flex-wrap: nowrap; min-height: 66px; gap: 11px; padding: 7px 0; }
  .brand { font-size: 24px; }
  .brand small { font-size: 9px; margin-left: 5px; margin-top: 7px; }
  .top-nav { gap: 13px; margin-left: auto; }
  .top-nav a { font-size: 13px; }
  .logout-form { display: block; width: auto; margin: 0; }
  .logout-form button.logout-button { width: 27px; height: 34px; padding: 4px; }
  .hero.overview-hero { padding: 31px 0 13px; }
  .hero.overview-hero h1 { font-size: 39px; letter-spacing: -1.8px; }
  .overview-topline { margin-top: 17px; flex-direction: row; align-items: baseline; }
  .overview-topline h2 { font-size: 16px; }
  .overview-topline > span { font-size: 11px; text-align: right; }
  .child-row { min-height: 89px; gap: 12px; }
  .child-avatar { width: 45px; height: 45px; flex-basis: 45px; font-size: 20px; }
  .child-row-content strong { font-size: 20px; }
  .child-row-content > span { font-size: 11.5px; }
  .child-row-right { gap: 7px; font-size: 11px; }
  .hero.child-hero { padding: 25px 0 13px; }
  .child-hero h1 { font-size: 35px; letter-spacing: -1.6px; }
  .week-toolbar { padding: 11px 0 15px; }
  .week-toolbar h2 { font-size: 24px; }
  .date-range { font-size: 12px; }
  .week-control a { height: 35px; min-width: 30px; border-radius: 8px; }
  .week-control .week-now { min-width: 47px; }
  .progress-area { margin-top: 19px; }
  .empty-state { padding-top: 26px; }
  .composer { margin: 15px 0 26px; }
}
@media (max-width: 370px) {
  .brand small { display: none; }
  .top-nav { gap: 10px; }
  .overview-topline { flex-direction: column; gap: 3px; }
}
