/* ══════════════════════════════════════════════════════════════════════════
   parent-homework-v3.css — Prace domowe w apce rodzica/ucznia (2026-09-09)
   Prefiks `hw3-` (sprawdzone: wolny). Tokeny z parent.html (--cream/--ink/--g1…).
   Ekrany: karta na pulpicie · lista #view-prace · wynik na JEDNYM ekranie ·
   własne polecenie (zdjęcia) · Postępy #view-postepy.
   Mobile-first: 44 px cele, inputy 16 px, safe-area, 100dvh, zero scrolla poziomego.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Karta na pulpicie ─────────────────────────────────────────── */
.hw3-home{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.hw3-card{position:relative;background:linear-gradient(180deg,#fff,var(--cream,#FFFDF7));border:1px solid var(--line,#EDE8DF);border-radius:22px;padding:14px 15px 15px;box-shadow:0 2px 8px rgba(26,23,19,.06),0 14px 30px -22px rgba(26,23,19,.3);overflow:hidden;animation:hw3Up .42s cubic-bezier(.22,1,.36,1) both}
@keyframes hw3Up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hw3-card+.hw3-card{animation-delay:.06s}
.hw3-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--g1,#F9C843),var(--g2,#F07020))}
.hw3-card.late::before{background:linear-gradient(90deg,#F0A020,var(--red,#C53030))}
.hw3-card.done::before{background:linear-gradient(90deg,#34C77B,var(--green,#1A9E4A))}
.hw3-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hw3-tag{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:linear-gradient(135deg,var(--g1,#F9C843),var(--g2,#F07020));color:#3a1c00;white-space:nowrap}
.hw3-tag.late{background:linear-gradient(135deg,#F0A020,var(--red,#C53030));color:#fff}
.hw3-tag.wait{background:var(--ink08,rgba(26,23,19,.08));color:var(--ink60,#6a6358)}
.hw3-tag.ok{background:linear-gradient(135deg,#34C77B,var(--green,#1A9E4A));color:#fff}
.hw3-due{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink60,#6a6358);font-variant-numeric:tabular-nums;white-space:nowrap}
.hw3-due.late{color:var(--red,#C53030)}
.hw3-bud{display:flex;gap:11px;align-items:flex-end}
.hw3-bud .av{width:72px;height:72px;flex:none;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:transparent}
.hw3-bud .av video,.hw3-bud .av img{width:100%;height:100%;object-fit:contain;display:block}
.hw3-bub{flex:1;min-width:0;background:#fff;border:1px solid var(--line,#EDE8DF);border-radius:16px 16px 16px 5px;padding:9px 12px;font-size:13px;line-height:1.45;color:var(--ink,#1A1713);box-shadow:0 4px 14px -10px rgba(26,23,19,.35)}
.hw3-bub small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink50,#8A8580);margin-bottom:3px}
.hw3-title{margin:12px 0 3px;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:19px;line-height:1.2;letter-spacing:-.2px;color:var(--ink,#1A1713)}
.hw3-meta{font-size:12px;color:var(--ink50,#8A8580);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hw3-meta .sep{opacity:.45}
.hw3-dots{display:flex;gap:4px;margin:12px 0 0}
.hw3-dots i{flex:1;height:6px;border-radius:99px;background:var(--ink08,rgba(26,23,19,.08));transition:background .3s}
.hw3-dots i.ok{background:linear-gradient(90deg,#34C77B,var(--green,#1A9E4A))}
.hw3-dots i.bad{background:linear-gradient(90deg,#F0A020,var(--red,#C53030))}
.hw3-dots i.part{background:linear-gradient(90deg,var(--g1,#F9C843),var(--g2,#F07020))}
.hw3-cta{margin-top:12px;width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--g1,#F9C843),var(--g2,#F07020));color:#3a1c00;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(240,112,32,.75);transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s;-webkit-tap-highlight-color:transparent}
.hw3-cta:active{transform:scale(.97)}
.hw3-cta.ghost{background:#fff;border:1px solid var(--line,#EDE8DF);color:var(--ink,#1A1713);box-shadow:none;font-weight:700}
.hw3-more{display:block;width:100%;margin-top:2px;padding:11px;border:0;background:transparent;color:var(--g3,#E8580A);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;border-radius:12px}
.hw3-more:active{background:var(--ink08,rgba(26,23,19,.06))}

/* ── Lista prac (#view-prace) ───────────────────────────────────── */
.hw3-head{padding:4px 0 12px}
.hw3-head h2{margin:0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.3px;color:var(--ink,#1A1713)}
.hw3-head p{margin:5px 0 0;font-size:13px;color:var(--ink50,#8A8580);line-height:1.5}
.hw3-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.hw3-strip .c{background:#fff;border:1px solid var(--line,#EDE8DF);border-radius:15px;padding:11px 10px;text-align:center;position:relative;overflow:hidden}
.hw3-strip .c::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--g1,#F9C843),var(--g2,#F07020));opacity:.9}
.hw3-strip .c.red::before{background:linear-gradient(90deg,#F0A020,var(--red,#C53030))}
.hw3-strip .c.green::before{background:linear-gradient(90deg,#34C77B,var(--green,#1A9E4A))}
.hw3-strip .v{font-family:'DM Serif Display',Georgia,serif;font-size:24px;line-height:1.05;color:var(--ink,#1A1713);font-variant-numeric:tabular-nums}
.hw3-strip .l{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink50,#8A8580);margin-top:3px}
.hw3-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50,#8A8580);margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.hw3-sec .n{background:var(--ink08,rgba(26,23,19,.08));border-radius:99px;padding:1px 7px;font-size:10.5px}
.hw3-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line,#EDE8DF);border-radius:17px;padding:12px 13px;margin-bottom:9px;cursor:pointer;transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s;-webkit-tap-highlight-color:transparent}
.hw3-item:active{transform:scale(.985)}
.hw3-item.att{border-color:color-mix(in srgb,var(--g2,#F07020) 34%,var(--line,#EDE8DF));box-shadow:0 8px 20px -16px rgba(240,112,32,.6)}
.hw3-ring{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink,#1A1713);background:conic-gradient(var(--hw3-c,var(--g2,#F07020)) calc(var(--hw3-p,0)*1%),var(--ink08,rgba(26,23,19,.08)) 0)}
.hw3-ring i{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:12px}
.hw3-item .t{flex:1;min-width:0}
.hw3-item .t b{display:block;font-size:14px;font-weight:700;color:var(--ink,#1A1713);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw3-item .t span{display:block;font-size:11.5px;color:var(--ink50,#8A8580);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw3-item .chev{color:var(--ink30,rgba(26,23,19,.3));flex:none}
.hw3-react{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:99px;margin-top:5px}
.hw3-react.bravo{background:rgba(26,158,74,.12);color:var(--green,#1A9E4A)}
.hw3-react.good{background:rgba(249,200,67,.22);color:#8a5a00}
.hw3-react.needs_work{background:rgba(197,48,48,.1);color:var(--red,#C53030)}
.hw3-empty{padding:38px 20px;text-align:center;border:1.5px dashed var(--line,#EDE8DF);border-radius:20px;background:linear-gradient(180deg,#fff,transparent)}
.hw3-empty img{width:88px;height:88px;object-fit:contain;margin-bottom:6px}
.hw3-empty b{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:20px;color:var(--ink,#1A1713);margin-bottom:4px}
.hw3-empty p{margin:0;font-size:12.5px;color:var(--ink50,#8A8580);line-height:1.5}
.hw3-skel{height:70px;border-radius:17px;background:linear-gradient(90deg,#fff 25%,#f4efe6 37%,#fff 50%);background-size:400% 100%;animation:hw3Shim 1.4s linear infinite;margin-bottom:9px}
@keyframes hw3Shim{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── Pełnoekranowy panel (szczegóły / własne polecenie / wynik) ── */
.hw3-sheet{position:fixed;inset:0;z-index:9998;background:var(--cream,#FFFDF7);display:flex;flex-direction:column;animation:hw3In .28s cubic-bezier(.22,1,.36,1) both;padding-top:var(--p-safe-top,0px);padding-bottom:var(--p-safe-bottom,0px)}
@keyframes hw3In{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hw3-sheet.closing{animation:hw3Out .2s ease both}
@keyframes hw3Out{to{opacity:0;transform:translateY(10px)}}
.hw3-sh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line,#EDE8DF);background:rgba(255,253,247,.94);backdrop-filter:blur(8px)}
.hw3-sh h3{flex:1;min-width:0;margin:0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:18px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw3-x{width:38px;height:38px;flex:none;border:0;border-radius:12px;background:var(--ink08,rgba(26,23,19,.07));color:var(--ink60,#6a6358);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hw3-x:active{transform:scale(.94)}
.hw3-sb{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px}
.hw3-sf{padding:12px 14px calc(12px + var(--p-safe-bottom,0px));border-top:1px solid var(--line,#EDE8DF);background:#fff;display:flex;gap:8px}
.hw3-sf .hw3-cta{margin:0}
.hw3-block{background:#fff;border:1px solid var(--line,#EDE8DF);border-radius:18px;padding:14px;margin-bottom:12px}
.hw3-block h4{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink50,#8A8580)}
.hw3-note{background:var(--cream,#FFFDF7);border:1px solid var(--line,#EDE8DF);border-left:3px solid var(--g2,#F07020);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;color:var(--ink,#1A1713)}
.hw3-tasklist{display:flex;flex-direction:column;gap:7px}
.hw3-task{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line,#EDE8DF);border-radius:13px;background:#fff}
.hw3-task .no{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--ink08,rgba(26,23,19,.07));color:var(--ink60,#6a6358)}
.hw3-task.ok .no{background:rgba(26,158,74,.14);color:var(--green,#1A9E4A)}
.hw3-task.wrong .no{background:rgba(197,48,48,.1);color:var(--red,#C53030)}
.hw3-task.partial .no{background:rgba(249,200,67,.24);color:#8a5a00}
.hw3-task .t{flex:1;min-width:0;font-size:13px}
.hw3-task .t small{display:block;color:var(--ink50,#8A8580);font-size:11px;margin-top:2px}

/* zdjęcia własnego polecenia */
.hw3-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.hw3-photo{position:relative;aspect-ratio:3/4;border-radius:13px;overflow:hidden;border:1px solid var(--line,#EDE8DF);background:var(--ink08,rgba(26,23,19,.05))}
.hw3-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hw3-photo button{position:absolute;top:5px;right:5px;width:26px;height:26px;border:0;border-radius:8px;background:rgba(26,23,19,.62);color:#fff;font-size:13px;display:grid;place-items:center;cursor:pointer}
.hw3-addphoto{aspect-ratio:3/4;border:1.5px dashed var(--line-strong,#DDD6CA);border-radius:13px;background:#fff;color:var(--ink50,#8A8580);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hw3-addphoto:active{transform:scale(.97)}

/* ── Wynik: JEDEN ekran (mierzone 390×844 i 375×667) ───────────── */
.hw3-res{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,var(--cream,#FFFDF7),#fff);display:flex;flex-direction:column;padding:calc(8px + var(--p-safe-top,0px)) 16px calc(10px + var(--p-safe-bottom,0px));animation:hw3In .3s cubic-bezier(.22,1,.36,1) both;overflow:hidden}
.hw3-res .top{display:flex;align-items:center;justify-content:center;position:relative;min-height:34px;flex:none}
.hw3-res .top .hw3-x{position:absolute;right:0;top:0}
.hw3-res .buddy{height:clamp(74px,15dvh,120px);display:grid;place-items:center;margin:2px 0 2px;flex:none}
.hw3-res .buddy video,.hw3-res .buddy img{height:100%;width:auto;object-fit:contain;display:block}
.hw3-res h2{margin:0;text-align:center;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(20px,5vw,25px);letter-spacing:-.3px;color:var(--ink,#1A1713);flex:none}
.hw3-res .sub{margin:3px 0 0;text-align:center;font-size:12.5px;color:var(--ink50,#8A8580);flex:none}
.hw3-score{margin:10px auto 8px;width:clamp(96px,26vw,116px);height:clamp(96px,26vw,116px);border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--hw3-c,var(--g2,#F07020)) calc(var(--hw3-p,0)*1%),var(--ink08,rgba(26,23,19,.09)) 0);box-shadow:0 10px 26px -16px rgba(240,112,32,.7)}
.hw3-score i{width:calc(100% - 16px);height:calc(100% - 16px);border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-family:'DM Serif Display',Georgia,serif;font-size:clamp(24px,7vw,31px);color:var(--ink,#1A1713);font-variant-numeric:tabular-nums}
.hw3-score i small{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:var(--ink50,#8A8580)}
.hw3-chips{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;flex:none}
.hw3-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:99px;background:#fff;border:1px solid var(--line,#EDE8DF);color:var(--ink70,rgba(26,23,19,.7));white-space:nowrap}
.hw3-chip.ok{background:rgba(26,158,74,.1);border-color:transparent;color:var(--green,#1A9E4A)}
.hw3-chip.gold{background:rgba(249,200,67,.2);border-color:transparent;color:#8a5a00}
.hw3-chip.bad{background:rgba(197,48,48,.09);border-color:transparent;color:var(--red,#C53030)}
.hw3-res .taskdots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:11px 0 0;flex:none}
.hw3-tdot{width:32px;height:32px;border-radius:11px;border:0;display:grid;place-items:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer;background:var(--ink08,rgba(26,23,19,.07));color:var(--ink60,#6a6358);-webkit-tap-highlight-color:transparent;transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
.hw3-tdot:active{transform:scale(.9)}
.hw3-tdot.ok{background:rgba(26,158,74,.14);color:var(--green,#1A9E4A)}
.hw3-tdot.wrong{background:rgba(197,48,48,.11);color:var(--red,#C53030)}
.hw3-tdot.partial{background:rgba(249,200,67,.26);color:#8a5a00}
.hw3-tdot.on{box-shadow:0 0 0 2px var(--g2,#F07020)}
.hw3-res .why{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;margin:9px 0 0;padding:0 1px}
.hw3-why{background:#fff;border:1px solid var(--line,#EDE8DF);border-radius:15px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:var(--ink,#1A1713)}
.hw3-why b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink50,#8A8580);margin-bottom:4px}
.hw3-res .acts{display:flex;gap:8px;margin-top:9px;flex:none}
.hw3-res .acts .hw3-cta{margin:0;flex:1;min-height:48px}

/* ── Postępy (#view-postepy) ────────────────────────────────────── */
.hw3-weeks{display:flex;align-items:flex-end;gap:6px;height:104px;padding:6px 2px 0}
.hw3-week{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.hw3-week .bar{width:100%;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--g1,#F9C843),var(--g2,#F07020));min-height:4px;transition:height .6s cubic-bezier(.34,1.4,.64,1)}
.hw3-week .bar.zero{background:var(--ink08,rgba(26,23,19,.08))}
.hw3-week .lb{font-size:9.5px;color:var(--ink50,#8A8580);font-variant-numeric:tabular-nums;white-space:nowrap}
.hw3-skill{display:grid;grid-template-columns:1fr 66px 38px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ink08,rgba(26,23,19,.06))}
.hw3-skill:last-child{border:0}
.hw3-skill .n{font-size:12.5px;font-weight:600;color:var(--ink,#1A1713);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw3-skill .n small{display:block;font-size:10.5px;color:var(--ink50,#8A8580);font-weight:600}
.hw3-bar{height:7px;border-radius:99px;background:var(--ink08,rgba(26,23,19,.08));overflow:hidden}
.hw3-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34C77B,var(--green,#1A9E4A))}
.hw3-skill.mid .hw3-bar i{background:linear-gradient(90deg,var(--g1,#F9C843),var(--g2,#F07020))}
.hw3-skill.weak .hw3-bar i{background:linear-gradient(90deg,#F0A020,var(--red,#C53030))}
.hw3-skill .p{font-size:12.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink,#1A1713)}
.hw3-word{display:flex;gap:11px;align-items:flex-start}
.hw3-word .av{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}

@media (prefers-reduced-motion:reduce){.hw3-card,.hw3-sheet,.hw3-res,.hw3-item{animation:none!important;transition:none!important}}

/* E15 / B1c: blok „Prace domowe od korepetytora" na ekranie startowym Szkoły (skóra P7: .szp7-lab jak sąsiednie sekcje) */
.hw3-szkola{padding:0 2px}
.hw3-szkola:empty{display:none}
.hw3-szkola .hw3-home{margin:0 0 6px}

/* Slowo korepetytora na ekranie wyniku — trzy linie, zeby wynik zostal na jednym ekranie. */
.hw3-res .hw3-fb{margin:0 16px 12px;padding:10px 12px;border-left:3px solid var(--g2,#F07020);background:var(--cream,#FFFDF7);border-radius:0 12px 12px 0;font-size:13.5px;line-height:1.55;color:var(--ink70,#5a544c);text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}