/* Simple layout: one column of white cards on a light background. All colours pass WCAG AA contrast. */ :root{ /* light greige page and brown cards with white type, as in the reference; serif headings, Assistant for text */ --paper:#E4E2D4; --surface:#5A514A; --card:#5A514A; --input:#3D3732; --ink:#FFFFFF; --muted:#EAE4DE; --line:#B3ACA6; --soft:#6A625B; --field:#D3CBC4; --accent:#FFFFFF; --accent-soft:#6A625B; --on-accent:#3B342F; --ok:#B8EDCB; --ok-soft:#3E5244; --fair:#FFFFFF; --fair-soft:#6A625B; --warn:#FFDCA6; --warn-soft:#5E4A2C; --bad:#FFBFB7; --bad-soft:#64403B; --stone:#7C736B; --rule:rgba(255,255,255,.13); --font:"Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --serif:"Frank Ruhl Libre","Times New Roman",serif; color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55} #app{max-width:760px;margin:0 auto;padding-block:20px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px} main{display:flex;flex-direction:column;gap:18px} h1,h2,h3{margin:0;font-weight:700;line-height:1.25} h1{font-size:1.5rem} h2{font-size:1.15rem} p{margin:0} .num{font-variant-numeric:tabular-nums} .muted{color:var(--muted)} .small{font-size:.9rem} .ok-text{color:var(--ok)} .bad-text{color:var(--bad)} button,input,textarea,select{font:inherit;color:inherit} input,select,textarea{font-size:17px} button,a,input,select,textarea,label,summary{touch-action:manipulation} [hidden]{display:none!important} /* accessibility helpers */ :focus-visible{outline:3px solid var(--accent);outline-offset:2px} [tabindex="-1"]:focus{outline:none} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:40;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none} .skip:focus{top:calc(8px + env(safe-area-inset-top,0px))} /* building blocks */ .panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0} .empty{text-align:center;color:var(--muted);align-items:center;padding-block:32px} .note{background:var(--accent-soft);border-radius:10px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} .note.warn{background:var(--warn-soft)} .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .row.tight{gap:6px;flex-wrap:nowrap} .between{justify-content:space-between} .stack{display:flex;flex-direction:column;gap:14px;align-items:stretch} .stack>.btn{align-self:flex-start} .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .grow{flex:1;min-width:200px} .page-h{font-size:1.4rem} .ltr-line{direction:ltr;text-align:end} .btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 20px;font-weight:700;cursor:pointer;min-height:44px} .btn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--field)} .btn.danger{background:var(--bad);color:var(--on-accent)} .btn:disabled{opacity:.55;cursor:default} .btn.wide{width:100%} .linkbtn{background:none;border:0;padding:6px 0;color:var(--accent);cursor:pointer;font-weight:700;text-align:start;text-decoration:underline;text-underline-offset:3px} .field{display:flex;flex-direction:column;gap:5px} .field label{font-weight:700;font-size:.95rem} .hint{color:var(--muted);font-size:.85rem} input[type=number],input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],textarea,select{background:var(--surface);border:1px solid var(--field);border-radius:8px;padding:10px 12px;width:100%;min-width:0} ::placeholder{color:var(--muted);opacity:1} input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad);border-width:2px} textarea{resize:vertical;min-height:48px} .short-input{max-width:140px} .check{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .check input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--accent)} .form-err{color:var(--bad);font-weight:700;min-height:1.2em} .form-err:empty{min-height:0} .msg{padding:12px 16px;border-radius:10px;background:var(--ok-soft);color:var(--ok);font-weight:700} .msg.err{background:var(--bad-soft);color:var(--bad)} .copybox{width:100%;min-height:140px} details>summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style-position:inside} details[open]>summary{margin-bottom:6px} /* status */ .pill{display:inline-block;border-radius:999px;padding:3px 12px;font-size:.88rem;font-weight:700;white-space:nowrap} .st-ahead{color:var(--ok);background:var(--ok-soft)} .st-ontrack{color:var(--fair);background:var(--fair-soft)} .st-behind{color:var(--warn);background:var(--warn-soft)} .st-critical{color:var(--bad);background:var(--bad-soft)} .status .big{font-size:1.25rem} .status .big b{font-size:2rem} .bar{height:12px;flex:none;background:var(--soft);border-radius:6px;overflow:hidden} .bar span{display:block;height:100%;background:var(--accent);border-radius:6px} .bar-row{display:flex;align-items:center;gap:8px} .bar-row .bar{flex:1;min-width:60px} .summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:2px} .stat .v{font-size:1.8rem;font-weight:700;line-height:1.1} .stat .k{color:var(--muted);font-size:.9rem} /* tables */ .scroll{overflow-x:auto} table{border-collapse:collapse;width:100%} th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle} th{font-size:.88rem;color:var(--muted);font-weight:700} td.n{font-variant-numeric:tabular-nums;white-space:nowrap} tr.missing td{color:var(--bad)} .c-name{font-weight:700} .c-bar{min-width:180px} .nowrap{white-space:nowrap} /* header and menu */ .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .top>div{min-width:0} nav.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto} nav.tabs button{display:flex;align-items:center;gap:6px;background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap} nav.tabs button[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)} nav.tabs .ico{width:20px;height:20px;flex:none} #flash{position:fixed;z-index:30;inset-inline:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;padding-inline:16px;pointer-events:none} #flash .msg{pointer-events:auto;max-width:520px;box-shadow:0 6px 24px rgba(15,25,50,.18)} .site-foot{text-align:center;font-size:.9rem} .site-foot a{color:var(--accent);font-weight:700} .demo-note{font-size:.85rem;color:var(--muted);text-align:center} .demo-note code{background:var(--soft);padding:1px 6px;border-radius:4px;direction:ltr;display:inline-block} /* sign-in */ .auth{min-height:calc(100vh - 60px);display:grid;place-items:center} .auth-inner{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px} .auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px} .auth-brand img{border-radius:14px} .auth form{display:flex;flex-direction:column;gap:14px} .seg{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:10px;padding:4px;gap:4px} .seg button{border:0;background:transparent;border-radius:7px;padding:10px;font-weight:700;color:var(--muted);cursor:pointer;min-height:44px} .seg button[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)} .pw{position:relative;display:block} .pw input{padding-inline-end:70px} .pw button{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;padding:10px;min-height:40px} .auth-foot{text-align:center} @media (forced-colors:active){.bar span{forced-color-adjust:none;background:Highlight}.btn{border:1px solid ButtonText}} /* ---------- phones ---------- */ @media (max-width:640px){ body{font-size:16px} #app{gap:14px;padding-block:14px calc(92px + env(safe-area-inset-bottom,0px))} main{gap:14px} h1{font-size:1.25rem} .panel{padding:16px} .stack>.btn{align-self:stretch} .summary{gap:8px} .stat{padding:10px} .stat .v{font-size:1.5rem} .stat .k{font-size:.82rem} /* bottom menu, like an app */ nav.tabs{position:fixed;z-index:20;inset-inline:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible; background:var(--surface);border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -2px 12px rgba(15,25,50,.07); padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)} nav.tabs button{flex-direction:column;justify-content:center;gap:3px;min-height:60px;padding:6px 2px;border-bottom:0;border-top:3px solid transparent;font-size:.8rem} nav.tabs button[aria-current="page"]{border-top-color:var(--accent)} nav.tabs .ico{width:24px;height:24px} #flash{bottom:calc(76px + env(safe-area-inset-bottom,0px))} /* tables with class "cards" become one card per row */ table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} table.cards,table.cards tbody{display:block} table.cards tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:end} table.cards td{display:flex;flex-direction:column;gap:3px;border:0;padding:0} table.cards td[data-label]::before{content:attr(data-label);font-size:.8rem;color:var(--muted);font-weight:700} table.cards td.c-name{display:block;grid-column:1/-1;font-size:1.05rem} table.cards td.c-name .pill{margin-inline-start:6px} table.cards td.c-bar{grid-column:1/-1;min-width:0} table.cards td.c-status{display:block;grid-column:1/-1} table.cards td.c-actions{grid-column:1/-1} table.cards td.c-actions .btn{flex:1} table.cards .short-input{max-width:none} /* the class list: name and status on one line, bar and hours below */ table.list tr{grid-template-columns:1fr auto;gap:8px 10px;align-items:center;padding:12px 0} table.list td.c-name{grid-column:1} table.list td.c-status{grid-column:2;grid-row:1;text-align:end} table.list td.c-bar{grid-column:1/-1} } /* accessibility statement page */ .statement{max-width:72ch} .statement ul{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:4px} .statement a{color:var(--accent)} /* header, menu and footer sit on white, like the cards */ .top{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;align-items:center} nav.tabs{background:var(--card);border:1px solid var(--line);border-radius:12px;padding-inline:6px} @media (max-width:640px){ .top{padding:12px 14px} nav.tabs{border-radius:0;border-inline:0;border-bottom:0;padding-inline:0} } /* ---------- the growing tree (decorative; the numbers say the same thing in words) ---------- */ .tree path,.tree circle{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tree .t-ground{stroke:var(--field);stroke-width:1.5} .tree .t-root{stroke-width:1.6} .tree .t-thick{stroke-width:3} .tree .t-leaf,.tree .t-crown{fill:var(--soft)} .tree .t-crown{fill:var(--accent-soft);stroke-width:2} .tree .t-trunk{fill:var(--surface);stroke-width:2} .tree .t-apple circle{fill:var(--surface)} .tree .t-apple path{stroke-width:1.4} .tree .t-bark{stroke-width:1.1;opacity:.55} .tree .t-shadow{fill:var(--soft);stroke:none} .tree .t-grass{stroke:var(--field);stroke-width:1.3} .tree .t-apple .t-leaf{stroke-width:1} .tree .stage{opacity:0;transform:scale(.9);transform-origin:100px 176px;transition:opacity .6s ease,transform .7s ease} .tree .stage.on{opacity:1;transform:none} .tree.still .stage{transition:none} @media (prefers-reduced-motion:reduce){.tree .stage{transition:none}} .status-grid{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;align-items:center} .tree-mini{width:180px;height:auto;display:block} #app{position:relative;z-index:1} /* the tree stands behind the page: about a third of the page wide, rooted at the bottom-left corner */ /* half of the tree stands in the margin, the other half behind the cards */ .tree-bg{--tw:clamp(300px,42vw,820px);position:fixed;z-index:-1;left:max(0px,calc((100vw - 760px) / 2 - var(--tw) / 2));bottom:0;width:var(--tw);pointer-events:none; padding-left:max(8px,env(safe-area-inset-left,0px));padding-bottom:env(safe-area-inset-bottom,0px)} .tree-bg svg{width:100%;height:auto;max-height:94vh;display:block} body:has(nav.tabs) .tree-bg{bottom:0} .status.has-bg-tree .status-grid{grid-template-columns:1fr} .status.has-bg-tree .tree-mini{display:none} /* phones have no free margin, so the tree stands at the end of the page, below everything, touching nothing */ @media (max-width:640px){ .tree-bg{position:static;width:min(94vw,440px);margin:8px auto 0;padding:0} } /* phones: the tree takes about a third of the status card */ @media (max-width:640px){ .status-grid{grid-template-columns:minmax(0,1fr) 36%;gap:10px} .tree-mini{width:100%} } /* quick hour picks and the "done this week" line */ .chips{display:grid;grid-template-columns:repeat(6,minmax(44px,64px));gap:8px} .chip{min-height:48px;border-radius:10px;border:1px solid var(--field);background:var(--surface);color:var(--accent);font-weight:700;font-size:1.1rem;cursor:pointer} .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .report{border:2px solid var(--accent)} .done-week .check-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-weight:700;margin-inline-end:6px} .status .big b{color:var(--accent)} details>summary{min-height:28px} /* text outside the cards sits on a solid backing, so the tree stays behind it */ .demo-note,.site-foot a{background:var(--card);border-radius:8px;padding:4px 10px} .demo-note{align-self:center;max-width:100%} /* people with full access */ .people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .people li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} /* sign in with Google */ .btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--field);font-weight:700} .btn.google .g{width:20px;height:20px;flex:none} .or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)} /* charts */ .chart svg{width:100%;height:auto;display:block;direction:ltr} .chart text{fill:var(--muted);font-size:11px;font-family:var(--font)} .chart .val{fill:var(--ink);font-weight:700} .chart .grid{stroke:var(--line);stroke-width:1} .chart .barv{fill:var(--accent)} .chart .ref{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 4} .chart .reflabel{fill:var(--ink);font-weight:700} .chart .miss{fill:var(--card);stroke:var(--bad);stroke-width:2} .legend{display:flex;flex-wrap:wrap;gap:6px 16px} .legend i{display:inline-block;vertical-align:middle;margin-inline-end:6px} .lg-bar{width:12px;height:12px;border-radius:3px;background:var(--accent)} .lg-ref{width:18px;border-top:2px dashed var(--ink)} .lg-miss{width:10px;height:10px;border-radius:50%;border:2px solid var(--bad)} @media (max-width:640px){.chart text{font-size:13px}} /* where the student should be today, on the progress bar */ .bar{position:relative} .bar .exp{position:absolute;top:0;bottom:0;width:2px;margin-inline-start:-1px;background:var(--ink)} /* reminders and the written report */ .alerts,.report-text{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .alerts li,.report-text li{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)} .alerts li:first-child,.report-text li:first-child{border-top:0;padding-top:0} /* ===== taupe editorial look (overrides the rules above) ===== */ /* page: soft light in the middle, slightly deeper toward the edges, with a fine paper grain */ body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 30%,#EEECE1 0%,var(--paper) 55%,#D8D4C3 100%);background-attachment:fixed} h1,h2,.page-h{font-family:var(--serif);font-weight:500;letter-spacing:.01em} h1{font-size:1.7rem} .panel,.stat,.top,nav.tabs{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(60,50,40,.18)} .note{background:var(--soft);border-radius:10px;border:1px solid var(--line)} .field label,th,.stat .k,.legend,details>summary{letter-spacing:.04em} .btn{background:var(--accent);color:var(--on-accent);border-radius:10px} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--field)} .btn.danger{background:var(--bad);color:#3B1F1B} .btn.google{background:transparent;color:var(--ink);border:1px solid var(--field)} input[type=number],input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],textarea,select{background:var(--input);color:var(--ink);border-color:var(--field);border-radius:10px} .chip{background:transparent;color:var(--ink);border-color:var(--field);border-radius:10px} .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .report{border:1px solid var(--ink)} .seg{background:var(--input);border-radius:12px} .seg button{border-radius:9px;color:var(--muted)} .seg button[aria-current="page"]{background:var(--accent);color:var(--on-accent);box-shadow:none} .linkbtn,.site-foot a,.panel a{color:var(--ink)} .pill{border-radius:999px} .st-ontrack{border:1px solid var(--line)} .skip{background:var(--accent);color:var(--on-accent)} .demo-note,.site-foot a{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px} nav.tabs button[aria-current="page"]{color:var(--ink);border-color:var(--ink)} /* the hours, inside a thin white circle as in the reference image */ .status .big{display:flex;align-items:center;gap:12px} .status .big b{display:inline-grid;place-items:center;width:84px;height:84px;border:1px solid var(--ink);border-radius:50%;font-family:var(--serif);font-weight:500;font-size:2.1rem;color:var(--ink)} /* progress bar: white fill, a dark tick with a white edge where the student should be today */ .bar{background:var(--soft);border-radius:6px} .bar span{background:var(--accent);border-radius:6px} .bar .exp{background:#2B2520;box-shadow:0 0 0 1px #FFFFFF} /* charts */ .chart .barv{fill:var(--accent)} .chart .ref{stroke:var(--warn)} .chart .miss{fill:var(--card);stroke:var(--bad)} .lg-bar{background:var(--accent);border-radius:3px} .lg-ref{border-top-color:var(--warn)} #flash .msg{border:1px solid var(--line)} @media (max-width:640px){ nav.tabs{background:var(--card);border-top:1px solid var(--line);border-radius:0} nav.tabs button[aria-current="page"]{border-top-color:var(--ink)} .status .big b{width:68px;height:68px;font-size:1.7rem} } /* ===== the rocks: they cover the page at the start, fewer with every hour, one left at the end ===== */ #stones{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.7} /* faded 30% so the background stays quiet */ .stone{position:absolute;width:calc(var(--s) * clamp(105px,15vw,270px));height:auto;overflow:visible; transform:translate(-50%,-50%) rotate(var(--r));transition:opacity .9s ease,transform .9s ease;transition-delay:var(--d,0s)} .stone .cracks{fill:none;stroke:rgba(45,36,30,.45);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .stone.gone{opacity:0;transform:translate(-50%,-30%) rotate(var(--r)) scale(.6)} @media (prefers-reduced-motion:reduce){.stone{transition:none}} /* the big back grid: three vertical and five horizontal white lines, over the rocks and under the page */ #grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7} #grid i{position:absolute;background:rgba(255,255,255,.85)} #grid .v{top:0;bottom:0;width:1px} #grid .h{left:0;right:0;height:1px} /* copying */ .copy-block{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%} .msg-preview{margin:0;width:100%;background:var(--input);border:1px solid var(--line);border-inline-start:3px solid var(--ink);border-radius:10px;padding:10px 14px;font-size:.95rem;line-height:1.6;white-space:pre-wrap} .copy-btn{display:inline-flex;align-items:center;gap:8px} .copy-btn .ico{width:18px;height:18px;flex:none} .btn.copied,.btn.ghost.copied{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)} .copy-inline{display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:100%} .copyfall:empty{display:none} .copyfall{display:flex;flex-direction:column;gap:6px;width:100%} .copybox{min-height:120px} /* keyboard focus: a white ring inside a dark one, visible on the light page and on the brown cards alike */ :focus-visible{outline:3px solid #2B2520;outline-offset:2px;box-shadow:0 0 0 2px #FFFFFF} /* C1 (Cloud): login title contrast fix. White #FFF on #E4E2D4 was ~1.3:1; the title now sits on a solid card backing (white on #5A514A, ~8:1), so the tree/stones behind it can't lower contrast in light or dark. */ .auth-brand h1{background:var(--card);color:var(--ink);padding:4px 16px;border-radius:10px} /* notify UI (Cloud): styles GPT's markup - .btn.ghost.notify-btn in rows, .notify-banner > .notify-item on the student screen */ .btn.notify-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--ink);border:1px solid var(--field);border-radius:999px;padding:4px 14px;min-height:34px;font-size:.85rem;white-space:nowrap} .btn.notify-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none} .btn.notify-btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn.notify-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .btn.notify-btn.sent,.btn.notify-btn:disabled{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft);opacity:1} .notify-row{display:flex;justify-content:flex-start} .notify-banner{display:flex;flex-direction:column;gap:10px} .notify-item{display:flex;align-items:flex-start;gap:12px;background:var(--warn-soft);color:#fff;border:1px solid var(--warn);border-radius:12px;padding:12px 16px;animation:notify-in .35s ease} .notify-item::before{content:"🔔";flex:none;font-size:1.2rem;line-height:1.5} .notify-item .notify-text{flex:1;min-width:0;margin:0} .notify-item .notify-text b{color:var(--warn)} .notify-close{flex:none;background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;width:36px;height:36px;border-radius:8px;cursor:pointer} .notify-close:hover{background:rgba(255,255,255,.14)} .notify-close:focus-visible{outline:3px solid var(--accent);outline-offset:1px} @keyframes notify-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.notify-item{animation:none}} .c-notify{width:1%;white-space:nowrap;text-align:start;padding-inline:8px} /* WhatsApp UI (Cloud): a.wa-btn beside .notify-btn in .notify-row; admin phone field .phone-edit */ .notify-row{flex-wrap:wrap;gap:8px;align-items:center} .wa-btn{display:inline-flex;align-items:center;gap:6px;background:#1E4D36;color:#fff;border:1px solid #7FD8A4;border-radius:999px;padding:4px 14px;min-height:34px;font-size:.85rem;font-weight:700;text-decoration:none;white-space:nowrap} .wa-btn svg{width:16px;height:16px;flex:none;fill:#7FD8A4} .wa-btn:hover{background:#7FD8A4;color:#14301F} .wa-btn:hover svg{fill:#14301F} .wa-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .phone-edit{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .phone-edit label{font-weight:700;font-size:.9rem} .phone-edit input[type=tel]{direction:ltr;text-align:left;width:14ch;min-height:38px;padding:6px 10px;background:var(--surface);color:var(--ink);border:1px solid var(--field);border-radius:8px;font:inherit} .phone-edit .btn{min-height:38px;padding:6px 14px} @media (max-width:480px){.wa-btn .wa-label,.btn.notify-btn{font-size:.8rem}.wa-btn,.btn.notify-btn{padding:4px 10px}} /* phone login/signup (Cloud): numbers read LTR; forgot-password note for phone accounts */ input[type=tel],input[dir=ltr]{direction:ltr;text-align:left} input[type=tel]::placeholder{color:var(--line);opacity:1} /* signup phone (Cloud): fixed +972 prefix + national number, LTR inside the RTL form */ .phone-wrap{display:flex;direction:ltr;align-items:stretch} .phone-wrap .phone-prefix{display:flex;align-items:center;padding:0 12px;background:var(--input);color:var(--muted);border:1px solid var(--field);border-inline-end:0;border-radius:8px 0 0 8px;font-weight:700;user-select:none} .phone-wrap input[type=tel]{flex:1;min-width:0;border-radius:0 8px 8px 0} .phone-err{color:var(--bad);font-weight:700;font-size:.9rem;min-height:0} .phone-err:empty{display:none} .field.invalid .phone-wrap input,.field.invalid .phone-prefix,.field.invalid .pw input{border-color:var(--bad)} .wa-add-wrap{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;white-space:normal;max-width:100%} .wa-btn.wa-nophone{opacity:.75;border-style:dashed;cursor:pointer} .wa-add-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;max-width:260px;box-sizing:border-box;white-space:normal} .wa-add-form .phone-wrap{width:100%} .wa-add-form .phone-wrap input{min-width:0;flex:1;width:auto} .wa-add-form label{font-size:.85rem;font-weight:600;width:100%} .wa-add-form .phone-wrap{flex:1 1 150px;min-width:0} .wa-add-form .phone-err{width:100%} .wa-add-form .btn{flex:1 1 0} .wa-add-wrap:has(.wa-add-form){flex-basis:100%} @media (min-width:641px){.notify-row:has(.wa-add-form){min-width:260px}} .c-notify:has(.wa-add-form){white-space:normal} @media (max-width:640px){.c-notify:has(.wa-add-form){width:auto}.notify-row:has(.wa-add-form){width:100%}} .row.notify-row:has(.wa-add-form),.c-notify:has(.wa-add-form){flex-wrap:wrap} /* class pace chart: cumulative hours (white line + soft area) against the required pace (dashed, warm) */ .chart-sum{font-size:1rem;margin-block:6px 10px} .chart .axis{stroke:var(--muted);stroke-width:1} .chart .axt{fill:var(--ink);font-weight:700;font-size:12px} .chart .area{fill:rgba(255,255,255,.12);stroke:none} .chart .act{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .chart .act.pre{stroke-width:2;stroke-dasharray:1 5;opacity:.85} .chart .dot{fill:var(--ink)} .chart .last{fill:var(--ink);stroke:var(--card);stroke-width:2.5} .chart .refdot{fill:var(--warn);stroke:var(--card);stroke-width:2} .chart .reflabel{fill:var(--warn)} .chart .val.big{font-size:14px} .chart .today{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3} .chart .today-t{fill:var(--muted);font-size:11px} .lg-act{width:18px;border-top:3px solid var(--ink)} .lg-pre{width:18px;border-top:2px dotted var(--ink)} @media (max-width:640px){.chart .axt{font-size:13px}.chart .val.big{font-size:15px}} /* 900px pass (Cloud): add-phone form as a tidy 2-row grid; never wider than the cell on phones */ .wa-add-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:300px;min-width:0;margin-top:4px;padding:10px;border:1px solid var(--field);border-radius:10px;background:rgba(0,0,0,.12)} .wa-add-form label,.wa-add-form .phone-wrap,.wa-add-form .phone-err{grid-column:1/-1} .wa-add-form .phone-wrap{display:flex;min-width:0} .wa-add-form .phone-wrap input{flex:1 1 auto;min-width:0;width:100%} .wa-add-form .btn{min-width:0;width:100%;padding:6px 10px} @media (min-width:641px){.notify-row:has(.wa-add-form){min-width:0}.c-notify:has(.wa-add-form){min-width:250px;width:250px}.notify-row:has(.wa-add-form){flex-direction:column;align-items:stretch}.notify-row:has(.wa-add-form)>*{align-self:flex-start}.notify-row:has(.wa-add-form)>.wa-add-wrap{align-self:stretch}} @media (max-width:640px){.wa-add-form{max-width:none}.c-notify:has(.wa-add-form),.notify-row:has(.wa-add-form),.wa-add-wrap:has(.wa-add-form){min-width:0;max-width:100%;box-sizing:border-box}} #detail-h + .ltr-line{background:var(--card);color:var(--ink);border-radius:8px;padding:4px 10px;width:fit-content;margin-inline-start:auto} /* iOS Safari date input overflow fix */ .field,.grid2>*{min-width:0} input[type=date]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;text-align:start;font:inherit;min-height:2.75em;line-height:1.3} input[type=date]::-webkit-date-and-time-value{text-align:start} /* a11y + mobile audit 27.10 (Cloud) */ @media (max-width:640px){ table.list tr{grid-template-columns:minmax(0,1fr) auto} table.list td.c-name,table.list td.c-status{min-width:0} table.list td.c-notify{grid-column:1/-1;min-width:0;width:auto} .alerts .msg-preview{display:none} .alerts li{padding-block:8px} .alerts .copy-block{margin-top:4px} .chips{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px} .wa-btn,.btn.notify-btn,.linkbtn,details>summary,.site-foot a{min-height:44px;box-sizing:border-box} .wa-btn,.btn.notify-btn,.site-foot a{display:inline-flex;align-items:center;justify-content:center} .linkbtn{display:inline-flex;align-items:center} details>summary{display:flex;align-items:center} } @media (max-width:480px){.wa-btn,.btn.notify-btn{padding:8px 12px}} /* student detail on the stones: name + back link on a card chip (same as the contact line) */ #detail-h,div:has(> .linkbtn[data-sel=""]) > .linkbtn{background:var(--card);color:var(--ink);border-radius:8px;padding:4px 10px;width:fit-content} input[type=date]:focus,input[type=date]:focus-visible{outline:3px solid #2B2520;outline-offset:2px;box-shadow:0 0 0 2px #FFFFFF} /* admin data backup (Cloud 27.10) */ .backup-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .backup-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px} .backup-btn svg{width:18px;height:18px;flex:none} .backup-btn[aria-busy=true]{opacity:.7;cursor:progress} .backup-btn:focus-visible{outline:3px solid #2B2520;outline-offset:2px;box-shadow:0 0 0 2px #FFFFFF} @media (max-width:640px){.backup-row{flex-direction:column}.backup-btn{width:100%}} /* hours progress X/60 + left (Cloud 27.10) */ .hours-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:6px 0 2px} .hours-left .hl-done{font-family:var(--serif);font-size:1.6rem;line-height:1.1;color:var(--ink)} .hours-left .hl-left{font-weight:700;color:var(--warn)} .hours-left .hl-week{color:var(--muted);font-size:.95rem} .hl-bar{height:12px;border-radius:6px;background:var(--input);overflow:hidden;margin:6px 0 4px;border:1px solid var(--line)} .hl-bar>i{display:block;height:100%;background:var(--ink);border-radius:6px} td .hours-left{margin:0;gap:2px 8px}td .hours-left .hl-done{font-size:1rem;font-family:var(--font);font-weight:700} @media (max-width:640px){.hours-left{flex-direction:column;gap:2px}td .hours-left{flex-direction:row}} @media (forced-colors:active){.hl-bar>i{background:CanvasText}} .hl-bar{height:14px;border-radius:7px;background:#2B2520;border:1.5px solid var(--line)} .hl-bar>i{border-radius:7px} .hl-bar>i:not([style*="width: 0%"]):not([data-css="width:0%"]){min-width:14px} .hl-bar{width:100%;flex:none;grid-column:1/-1;box-sizing:border-box} /* v44: student card bar full width + visible track */ .status-grid:not(:has(>:nth-child(2))){grid-template-columns:minmax(0,1fr)} .status .hl-bar,.hl-bar{display:block;width:100%;min-height:14px;height:14px;align-self:stretch} /* v45: Amit - no pace marker in the meter */ .bar .exp{display:none} .status .hl-bar{flex:none} /* v47 hours exemption ("פטור משעות", Cloud): styles GPT's markup .exempt-* */ .exempt-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:700;white-space:nowrap;line-height:1.5;border:1.5px solid currentColor;vertical-align:middle} .exempt-badge.exempt-approved{background:var(--ok-soft);color:var(--ok)} .exempt-badge.exempt-pending{background:var(--warn-soft);color:var(--warn)} .exempt-badge.exempt-rejected{background:var(--bad-soft);color:var(--bad)} .exempt-req>summary{min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .exempt-req>summary::before{content:"▸";display:inline-block;transition:transform .15s} .exempt-req[open]>summary::before{transform:rotate(90deg)} .exempt-req>summary::-webkit-details-marker{display:none} .exempt-req{list-style:none} .exempt-req>*+*{margin-top:10px} .exempt-form{gap:12px} .exempt-reasons{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0;display:flex;flex-direction:column;gap:6px} .exempt-reasons legend{font-weight:700;padding:0 6px} .exempt-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:8px;background:var(--input);border:1px solid transparent;cursor:pointer} .exempt-opt:has(input:checked){border-color:var(--ok);background:var(--ok-soft)} .exempt-opt input{width:22px;height:22px;margin:0;accent-color:#FFFFFF;flex:none} .exempt-opt:has(input:focus-visible){outline:3px solid #FFFFFF;outline-offset:2px} .exempt-note-input{width:100%;min-height:88px;resize:vertical;background:var(--input);color:var(--ink);border:1px solid var(--field);border-radius:8px;padding:10px} .exempt-note-input:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px} .exempt-state{border-radius:10px;padding:10px 12px;font-weight:700;border-inline-start:4px solid currentColor} .exempt-state.exempt-pending{background:var(--warn-soft);color:var(--warn)} .exempt-state.exempt-rejected{background:var(--bad-soft);color:var(--bad)} .exempt-card{border-inline-start:6px solid var(--ok)} .exempt-card .exempt-title{font-family:var(--serif);font-size:1.35rem;color:var(--ok);display:flex;align-items:center;gap:8px} .exempt-card .exempt-title::before{content:"✓";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ok-soft);border:1.5px solid var(--ok);font-size:1rem} .exempt-card>*+*{margin-top:6px} .exempt-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .exempt-item{background:var(--input);border:1px solid var(--line);border-radius:10px;padding:10px 12px} .exempt-item .row,.exempt-detail .row{gap:10px;flex-wrap:wrap;align-items:flex-start} .exempt-item .exempt-reason,.exempt-detail .exempt-reason{margin-top:4px} .exempt-note{margin-top:4px;font-style:italic;overflow-wrap:anywhere} .exempt-actions{gap:8px;flex-wrap:wrap} .exempt-actions .btn{min-height:44px;min-width:88px} .exempt-approve{background:var(--ok);color:#1F2B23} .exempt-reject,.exempt-revoke{border-color:var(--bad)!important;color:var(--bad)!important} .exempt-row td{opacity:1} .exempt-row .c-name{color:var(--muted)} .exempt-stat{border-style:dashed} @media (max-width:600px){ .exempt-item .row,.exempt-detail .row{flex-direction:column;align-items:stretch} .exempt-actions{width:100%} .exempt-actions .btn{flex:1} .exempt-form .btn[type=submit]{width:100%} } @media (forced-colors:active){.exempt-badge,.exempt-state{border:1px solid CanvasText}} /* v48 exemption: club name + coach document (Cloud) */ .exempt-club-input{width:100%;min-height:44px;background:var(--input);color:var(--ink);border:1px solid var(--field);border-radius:8px;padding:8px 10px} .exempt-club-input:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px} .exempt-attach{border:1.5px dashed var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px} /* v49 coach document upload (Cloud): styled label button for the sr-only file input */ .exempt-file-label{font-weight:700} .exempt-file-row{gap:10px;flex-wrap:wrap;align-items:center} .exempt-file-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer} .exempt-attach:has(.exempt-file:focus-visible) .exempt-file-btn{outline:3px solid #2B2520;outline-offset:2px;box-shadow:0 0 0 2px #FFFFFF} .exempt-file-name{overflow-wrap:anywhere;color:var(--muted)} .exempt-doc{overflow-wrap:anywhere} .exempt-doc-btn{min-height:44px} @media (max-width:600px){.exempt-file-btn{width:100%}} /* v51 past weeks picker (Cloud): GPT's native