/* =========================================================
   Homeroom look: iPhone-style modes, glass materials, wallpapers and icon styles.
   public/theme.js sets these on <html> before the page paints:
     data-theme     light | dark
     data-material  solid | clear | tinted
     data-wall      bloom | ember | deep | lavender | sage | sky | sand | graphite | yours
     data-icons     default | dark | clear | tinted   (home tiles and widgets, like the Home Screen)
   Every colour the pages use is a token here; components only ever read tokens.
   Load order on every page: /theme.js, /app.css, /look.css, then the app's own CSS.
   ========================================================= */

/* ---------- Solid (iOS system colours). Also the fallback if theme.js didn't run. ---------- */
:root{
  color-scheme:light;
  --bg:#F2F2F7; --bg2:rgba(118,118,128,.12);
  --surface:#FFFFFF; --surface2:#FFFFFF; --surface-strong:#FFFFFF; --menu:rgba(255,255,255,.97);
  --ink:#000000; --muted:#6C6C72; --tertiary:#A1A1A8; --line:rgba(60,60,67,.13); --line2:rgba(60,60,67,.24);
  --accent:#007AFF; --accent-ink:#FFFFFF; --glow:rgba(0,122,255,.25); --on-color:#FFFFFF;
  --good:#1E9B4B; --warn:#B86E00; --bad:#E0352B; --red:#FF3B30;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.06);
  --scrim:rgba(0,0,0,.28);
  --glass:none; --glass-line:var(--line); --edge:0 0 0 0 transparent;
  --bgimg:none; --ember:0,122,255;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rounded:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r:22px;
  /* icon plates for the Clear icon style */
  --ic-clear-bg:rgba(120,120,128,.16); --ic-clear-fg:rgba(0,0,0,.72);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --bg2:rgba(118,118,128,.24);
  --surface:#1C1C1E; --surface2:#2C2C2E; --surface-strong:#1C1C1E; --menu:rgba(30,30,32,.97);
  --ink:#FFFFFF; --muted:#98989F; --tertiary:#6A6A70; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.2);
  --accent:#0A84FF; --accent-ink:#FFFFFF; --glow:rgba(10,132,255,.35);
  --good:#30D158; --warn:#FFB340; --bad:#FF6961; --red:#FF453A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --scrim:rgba(0,0,0,.5);
  --ember:10,132,255;
  --ic-clear-bg:#2C2C2E; --ic-clear-fg:rgba(255,255,255,.9);
}

/* ---------- Clear glass: frosted, see-through surfaces over the wallpaper ---------- */
:root[data-material="clear"]{
  --bg:var(--w0);
  --surface:rgba(255,255,255,.5); --surface2:rgba(255,255,255,.58); --surface-strong:rgba(255,255,255,.8); --menu:rgba(250,250,252,.84);
  --muted:#4C4C55; --line:rgba(30,30,50,.1); --line2:rgba(30,30,50,.2);
  --glass:blur(22px) saturate(1.8); --glass-line:rgba(255,255,255,.55);
  --edge:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.3);
  --shadow:0 1px 2px rgba(20,20,50,.05),0 10px 30px rgba(20,20,50,.1);
  --ic-clear-bg:rgba(255,255,255,.46); --ic-clear-fg:rgba(28,28,40,.66);
}
:root[data-theme="dark"][data-material="clear"]{
  --surface:rgba(30,30,36,.46); --surface2:rgba(44,44,50,.5); --surface-strong:rgba(30,30,36,.78); --menu:rgba(28,28,32,.86);
  --muted:#A9A9B2; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.2);
  --glass-line:rgba(255,255,255,.12);
  --edge:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.35);
  --ic-clear-bg:rgba(255,255,255,.13); --ic-clear-fg:rgba(255,255,255,.94);
}

/* ---------- Tinted glass: the same glass, tinted with your colour ---------- */
:root[data-material="tinted"]{
  --bg:var(--w0);
  --surface:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.56)); --surface2:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.64));
  --surface-strong:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.84)); --menu:color-mix(in srgb,var(--accent) 8%,rgba(250,250,252,.88));
  --muted:#474752; --line:color-mix(in srgb,var(--accent) 18%,rgba(30,30,50,.1)); --line2:color-mix(in srgb,var(--accent) 25%,rgba(30,30,50,.18));
  --bg2:color-mix(in srgb,var(--accent) 14%,rgba(118,118,128,.1));
  --glass:blur(22px) saturate(1.9); --glass-line:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.55));
  --edge:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.25));
  --shadow:0 1px 2px rgba(20,20,50,.05),0 10px 30px color-mix(in srgb,var(--accent) 14%,rgba(20,20,50,.08));
  --ic-clear-bg:rgba(255,255,255,.46); --ic-clear-fg:rgba(28,28,40,.66);
}
:root[data-theme="dark"][data-material="tinted"]{
  --surface:color-mix(in srgb,var(--accent) 22%,rgba(22,22,28,.52)); --surface2:color-mix(in srgb,var(--accent) 16%,rgba(36,36,42,.56));
  --surface-strong:color-mix(in srgb,var(--accent) 14%,rgba(24,24,30,.84)); --menu:color-mix(in srgb,var(--accent) 12%,rgba(26,26,32,.9));
  --muted:#ADADB8; --line:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.08)); --line2:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.16));
  --bg2:color-mix(in srgb,var(--accent) 20%,rgba(118,118,128,.2));
  --glass-line:color-mix(in srgb,var(--accent) 25%,rgba(255,255,255,.1));
  --edge:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.05));
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.35);
  --ic-clear-bg:rgba(255,255,255,.13); --ic-clear-fg:rgba(255,255,255,.94);
}

/* ---------- Wallpapers (glass only): w0 is the base, w1-w4 the colour fields, wl the glass arc ----------
   Set on <html> by theme.js, or on any element (the swatches in Settings) to show that wallpaper there. */
:root{ --w0:#DCE3FF; --w1:#7FA7FF; --w2:#C3A2FF; --w3:#FFB0D8; --w4:#8EE2FF; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"]{ --w0:#0B1030; --w1:#2F55D4; --w2:#6A3BD1; --w3:#B0307A; --w4:#1C7FB8; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="bloom"]{ --w0:#DCE3FF; --w1:#7FA7FF; --w2:#C3A2FF; --w3:#FFB0D8; --w4:#8EE2FF; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="bloom"],:root[data-theme="dark"] [data-wall="bloom"]{ --w0:#0B1030; --w1:#2F55D4; --w2:#6A3BD1; --w3:#B0307A; --w4:#1C7FB8; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="ember"]{ --w0:#FFE3D0; --w1:#FF8A3D; --w2:#FFC37A; --w3:#FF6A4D; --w4:#FFD8B0; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="ember"],:root[data-theme="dark"] [data-wall="ember"]{ --w0:#1A0B05; --w1:#E25A12; --w2:#8A2E0A; --w3:#C2410C; --w4:#4A1A08; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="deep"]{ --w0:#D3E0F5; --w1:#4D7CC9; --w2:#7FA3DB; --w3:#2F5FAE; --w4:#A9C4EC; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="deep"],:root[data-theme="dark"] [data-wall="deep"]{ --w0:#050B1E; --w1:#1E3A8A; --w2:#0F2A6B; --w3:#2A4FB8; --w4:#0A1A44; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="lavender"]{ --w0:#ECE6FF; --w1:#C4B4FF; --w2:#E3C4FF; --w3:#B3C1FF; --w4:#F6D8F2; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="lavender"],:root[data-theme="dark"] [data-wall="lavender"]{ --w0:#120E22; --w1:#5B48B5; --w2:#7A4CA8; --w3:#3D3E99; --w4:#5A2E6B; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="sage"]{ --w0:#E3EDE3; --w1:#A4C6A0; --w2:#CDE2C2; --w3:#88B396; --w4:#E9F0D2; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="sage"],:root[data-theme="dark"] [data-wall="sage"]{ --w0:#0B140F; --w1:#2F5A3C; --w2:#3F6B4A; --w3:#1F4A35; --w4:#2D3F22; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="sky"]{ --w0:#E6F2FF; --w1:#9CCEFF; --w2:#CDE7FF; --w3:#AEE0F4; --w4:#FFFFFF; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="sky"],:root[data-theme="dark"] [data-wall="sky"]{ --w0:#07121D; --w1:#2A6EA8; --w2:#1C4E7A; --w3:#2C7A9A; --w4:#14324F; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="sand"]{ --w0:#F6ECD9; --w1:#EAC68A; --w2:#F4DCAE; --w3:#E0B373; --w4:#FFF3DD; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="sand"],:root[data-theme="dark"] [data-wall="sand"]{ --w0:#140F06; --w1:#8A6421; --w2:#6B4A14; --w3:#A0772A; --w4:#3A2A0E; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="graphite"]{ --w0:#E8E8ED; --w1:#C4C4CC; --w2:#D8D8DE; --w3:#B2B2BB; --w4:#F7F7F9; --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="graphite"],:root[data-theme="dark"] [data-wall="graphite"]{ --w0:#000000; --w1:#2C2C30; --w2:#1C1C1F; --w3:#3A3A40; --w4:#121214; --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }
[data-wall="yours"]{ --w0:color-mix(in srgb,var(--accent) 12%,#F4F5FA); --w1:color-mix(in srgb,var(--accent) 70%,white); --w2:color-mix(in srgb,var(--accent) 45%,#C9A8FF); --w3:color-mix(in srgb,var(--accent) 50%,#FFB4D6); --w4:color-mix(in srgb,var(--accent) 30%,white); --wl:rgba(255,255,255,.55); --wink:#1C1C1E }
:root[data-theme="dark"][data-wall="yours"],:root[data-theme="dark"] [data-wall="yours"]{ --w0:color-mix(in srgb,var(--accent) 14%,#06070C); --w1:color-mix(in srgb,var(--accent) 70%,black); --w2:color-mix(in srgb,var(--accent) 45%,#2A1450); --w3:color-mix(in srgb,var(--accent) 45%,#501432); --w4:color-mix(in srgb,var(--accent) 30%,black); --wl:rgba(255,255,255,.16); --wink:rgba(255,255,255,.92) }

/* soft colour fields, blurred once into one calm image */
:root:not([data-material="solid"]){
  --bgimg:
    radial-gradient(60% 46% at 12% 6%,color-mix(in srgb,var(--w1) 70%,transparent),transparent 74%),
    radial-gradient(50% 50% at 96% 26%,color-mix(in srgb,var(--w2) 60%,transparent),transparent 74%),
    radial-gradient(70% 50% at 24% 100%,color-mix(in srgb,var(--w3) 55%,transparent),transparent 74%),
    radial-gradient(50% 44% at 92% 92%,color-mix(in srgb,var(--w4) 55%,transparent),transparent 74%),
    var(--w0);
}
html{background:var(--bg)}
body{background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bgimg)}
:root:not([data-material="solid"]) body::before{inset:-80px;filter:blur(40px)}

/* ---------- Type: Apple's system font, iOS sizes ---------- */
body{font-family:var(--body);letter-spacing:-.005em}
.hello h2{font-weight:700;letter-spacing:-.022em}
.logo{font-weight:700;letter-spacing:-.02em}
.sec-head h3,.appwin h4,.editor h4,.members h4{font-weight:700;letter-spacing:-.015em}
.brand h1{font-weight:800;letter-spacing:-.04em}

/* ---------- Top bar runs edge to edge; numbers use SF Rounded like iOS widgets ---------- */
.top{margin-left:calc(-1 * max(16px,env(safe-area-inset-left)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right)));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));transition:background-color .2s,box-shadow .2s}
/* clear at the top of the page, frosted once you scroll (app.js adds .stuck), like an iOS large-title bar */
.top:not(.stuck){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.top.stuck{box-shadow:0 .5px 0 var(--line)}
.clock .t,.workshop .big{font-family:var(--rounded);font-weight:700;letter-spacing:-.01em}
.streak{font-family:var(--rounded);font-weight:600;border-style:solid;border-color:var(--glass-line);background:var(--surface);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
#embers{opacity:.35}

/* ---------- Glass chrome: frosted surfaces with a bright top edge ---------- */
.card,.w,.sheet,.menu,.install,.announce,.search-btn,.iconbtn{border-color:var(--glass-line);box-shadow:var(--edge),var(--shadow)}
.top{background:color-mix(in srgb,var(--bg) 35%,transparent)}
:root[data-material="solid"] .top{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
.chip{background:var(--surface);border-color:var(--glass-line)}
.btn{border-radius:14px;box-shadow:0 4px 14px var(--glow)}
.btn.ghost{background:var(--surface2)}
.tabs{border-radius:12px}
.tabs .pill{box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.av-badge,.badge-n{background:var(--red);color:var(--on-color)}
.install .share{color:var(--accent)}
/* the admin panel stays solid so its tables and charts read clearly */
.sheet:has(>.admin){background:var(--surface-strong);-webkit-backdrop-filter:none;backdrop-filter:none}
:root:not([data-theme="dark"]) .sheet:has(>.admin){--surface:#FFFFFF;--surface2:#F2F2F7;--surface-strong:#FFFFFF;--menu:#FFFFFF;background:#FFFFFF}
:root[data-theme="dark"] .sheet:has(>.admin){--surface:#1C1C1E;--surface2:#2C2C2E;--surface-strong:#1C1C1E;--menu:#1C1C1E;background:#1C1C1E}

/* ---------- Sheets: a grabber like iOS ---------- */
@media (max-width:560px){
  .sheet{border-radius:28px 28px 0 0;position:relative}
  .sheet{padding-top:6px}
  .sheet::before{content:"";position:sticky;top:0;display:block;width:36px;height:5px;border-radius:3px;margin:8px auto 14px;background:var(--line2);z-index:2}
  .scrim.pal .sheet::before{display:none}
}

/* ---------- Home tiles behave like Home Screen apps at every size: an icon and its name on the
   wallpaper, no card around them. Tap opens, press and hold to arrange, tap empty space for Done. ---------- */
.grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:22px 8px;perspective:none}
.tile,.tile.add{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;padding:4px 0 0;gap:8px;justify-content:flex-start;transform:none}
.tile::before{display:none}
.tile:hover{box-shadow:none;border-color:transparent}
.tile .ic{width:72px;height:72px;border-radius:17px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 14px -8px rgba(0,0,0,.35);transition:transform .15s ease-out,filter .15s}
.tile .ic svg{width:36px;height:36px}
.tile:active .ic{transform:scale(.9);filter:brightness(.92)}
@media (hover:hover){ .tile:hover .ic{transform:scale(1.04)} }
.tile .nm{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink)}
:root:not([data-material="solid"]) .tile .nm .t{text-shadow:0 1px 2px color-mix(in srgb,var(--bg) 70%,transparent)}
.tile.add .ic{background:var(--surface);color:var(--muted);box-shadow:var(--edge);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
.tile.add .nm{color:var(--muted)}
/* the minus badge to remove an app sits on the icon's corner while arranging */
.tile .x{top:-4px;left:calc(50% - 44px);width:24px;height:24px;border:0;background:var(--surface-strong);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25);font-size:15px}
.tile .fav{top:-2px;right:calc(50% - 46px)}
/* iPhone: four across, like the Home Screen */
@media (max-width:560px){
  .grid{grid-template-columns:repeat(4,1fr);gap:20px 4px}
  .tile .ic{width:62px;height:62px;border-radius:15px}
  .tile .ic svg{width:31px;height:31px}
  .tile .nm{font-size:12px}
  .tile .x{left:calc(50% - 39px)}
  .tile .fav{right:calc(50% - 40px)}
}
@media (max-width:350px){ .tile .ic{width:56px;height:56px;border-radius:13px} }

/* ---------- Icon styles (home tiles, the app window, the palette and widgets) ---------- */
:root[data-icons="dark"] :is(.tile:not(.add) .ic,.appwin .hero .ic,.palette li .mi,.look-prev .lp-ics span){
  background:linear-gradient(180deg,#2E2E31,#19191B);color:color-mix(in srgb,var(--c,var(--accent)) 82%,white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 14px -6px rgba(0,0,0,.55)}
:root[data-icons="clear"] :is(.tile:not(.add) .ic,.appwin .hero .ic,.palette li .mi,.look-prev .lp-ics span){
  background:var(--ic-clear-bg);color:var(--ic-clear-fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18),0 6px 16px -8px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
:root[data-theme="dark"][data-icons="clear"] :is(.tile .ic,.appwin .hero .ic,.look-prev .lp-ics span) svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
:root[data-icons="tinted"] :is(.tile:not(.add) .ic,.appwin .hero .ic,.palette li .mi,.look-prev .lp-ics span){
  background:color-mix(in srgb,var(--accent) 24%,#FFFFFF);color:color-mix(in srgb,var(--accent) 85%,black);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
:root[data-theme="dark"][data-icons="tinted"] :is(.tile:not(.add) .ic,.appwin .hero .ic,.palette li .mi,.look-prev .lp-ics span){
  background:color-mix(in srgb,var(--accent) 30%,#0F0F13);color:color-mix(in srgb,var(--accent) 60%,white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 14px -8px rgba(0,0,0,.6)}

/* widgets follow the icon style, the way Home Screen widgets do */
:root[data-icons="dark"] .widgets .w{
  --surface:rgba(22,22,25,.9); --ink:#F5F5F7; --muted:#A1A1A6; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
  --bg2:rgba(255,255,255,.1); --surface2:rgba(255,255,255,.07);
  background:var(--surface);color:var(--ink);border-color:rgba(255,255,255,.08);color-scheme:dark}
:root[data-icons="clear"] .widgets .w{--c:var(--ink);--accent:var(--ink);--accent-ink:var(--bg)}
:root[data-icons="tinted"] .widgets .w{
  --c:var(--accent);
  background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
:root[data-theme="dark"][data-icons="tinted"] .widgets .w{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}

/* ---------- Appearance settings ---------- */
.look-prev{position:relative;height:150px;border-radius:20px;overflow:hidden;background:var(--bgimg);border:1px solid var(--glass-line);box-shadow:var(--edge)}
:root[data-material="solid"] .look-prev{background:var(--bg)}
.look-prev .lp-card{position:absolute;left:14px;right:14px;bottom:14px;height:64px;border-radius:18px;background:var(--surface);border:1px solid var(--glass-line);box-shadow:var(--edge),var(--shadow);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);display:flex;align-items:center;gap:12px;padding:0 14px}
.look-prev .lp-ics{position:absolute;left:14px;top:14px;display:flex;gap:10px}
.look-prev .lp-ics span{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--c);color:var(--on-color)}
.look-prev .lp-ics span svg{width:21px;height:21px}
.look-prev .lp-line{height:9px;border-radius:5px;background:var(--line2)}
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px}
.walls button{aspect-ratio:4/5;border-radius:14px;border:2px solid transparent;padding:0;position:relative;overflow:hidden;box-shadow:0 0 0 1px var(--line2);background:var(--w0)}
.walls button i{position:absolute;inset:-14px;filter:blur(8px);background:
  radial-gradient(60% 45% at 18% 14%,var(--w1),transparent 72%),radial-gradient(55% 55% at 92% 30%,var(--w2),transparent 72%),
  radial-gradient(75% 50% at 30% 96%,var(--w3),transparent 72%),radial-gradient(55% 45% at 90% 88%,var(--w4),transparent 72%),var(--w0)}
.walls button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.walls button span{position:absolute;left:0;right:0;bottom:4px;font-size:10.5px;font-weight:600;color:var(--wink);text-align:center}
.look-row{display:grid;gap:8px}
.look-row>b{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.icon-styles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.icon-styles button{border:1px solid var(--line2);background:var(--surface2);border-radius:14px;padding:10px 4px 8px;display:grid;justify-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);min-height:44px}
.icon-styles button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 1px var(--accent)}
.icon-styles .sw{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.icon-styles .sw svg{width:18px;height:18px}
.icon-styles .s-default{background:var(--accent);color:#fff}
.icon-styles .s-dark{background:linear-gradient(180deg,#2E2E31,#19191B);color:color-mix(in srgb,var(--accent) 82%,white)}
.icon-styles .s-clear{background:var(--ic-clear-bg);color:var(--ic-clear-fg);box-shadow:inset 0 0 0 1px var(--line2)}
.icon-styles .s-tinted{background:color-mix(in srgb,var(--accent) 24%,#FFFFFF);color:color-mix(in srgb,var(--accent) 85%,black)}
:root[data-theme="dark"] .icon-styles .s-tinted{background:color-mix(in srgb,var(--accent) 30%,#0F0F13);color:color-mix(in srgb,var(--accent) 60%,white)}
.icon-styles .s-auto{background:linear-gradient(135deg,var(--accent) 50%,#1C1C1E 50%);color:#fff}

/* =========================================================
   Homeroom kit: the one look every app uses. Rules:
   - ONE colour for anything you can tap: --accent (the person's colour). App colours only on app icons.
   - Status colours (--good --warn --bad --red) only where they mean something.
   - A person's own colours (list, calendar, company) only as small dots, bars or chips, never big fills.
   - Three layers only: wallpaper/page, grouped surface (--surface, radius --r-group), rows inside it
     separated by hairlines (--line). No borders on inner rows, no dashed borders, no gradients, no
     coloured shadows, no decorative emoji in headers or buttons.
   - Type: --fs-large 34 bold for each screen's title, --fs-headline 17 semibold, body 17, --fs-sub 15,
     group headers --fs-foot 13 uppercase muted. Apple system font only.
   ========================================================= */
:root{
  --r-group:22px; --r-ctl:12px; --r-pill:999px; --h-ctl:44px;
  --fs-large:34px; --fs-title2:22px; --fs-headline:17px; --fs-body:17px; --fs-sub:15px; --fs-foot:13px;
  --fill:var(--bg2); --field:var(--surface2); --menu-solid:var(--surface-strong); --track:var(--bg2);
  --btn2-bg:color-mix(in srgb,var(--accent) 13%,transparent); --btn2-ink:var(--accent);
  --seg-thumb:var(--surface-strong); --seg-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
}
:root[data-theme="dark"]{ --seg-thumb:#636366; --seg-shadow:0 3px 8px rgba(0,0,0,.3); --btn2-bg:color-mix(in srgb,var(--accent) 22%,transparent) }
:root[data-theme="dark"]:not([data-material="solid"]){ --seg-thumb:rgba(255,255,255,.2) }
:root[data-material="solid"]{ --field:var(--bg2) }
:root[data-theme="dark"][data-material="solid"]{ --field:#2C2C2E; --menu-solid:#2C2C2E }

/* buttons: filled accent capsule, tinted capsule, plain text */
.btn{border-radius:var(--r-pill);min-height:var(--h-ctl);padding:11px 20px;font-weight:600;font-size:var(--fs-body);background:var(--accent);color:var(--accent-ink);box-shadow:none;border:0}
.btn:hover{transform:none;box-shadow:none;filter:brightness(1.05)}
.btn:active{transform:scale(.97);filter:brightness(.92)}
.btn.ghost,.btn.secondary{background:var(--btn2-bg);color:var(--btn2-ink);border:0}
.btn.small{min-height:36px;padding:7px 14px;font-size:var(--fs-sub)}
/* on touch screens every button is at least 44px tall */
@media (hover:none){ .btn.small,.lbl{min-height:var(--h-ctl)} }
.iconbtn{display:grid;place-items:center;padding:0;flex:none;width:var(--h-ctl);height:var(--h-ctl);border-radius:50%;border:0;background:var(--surface);color:var(--accent);box-shadow:var(--edge),0 1px 3px rgba(0,0,0,.06);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
.iconbtn svg{width:20px;height:20px}
.iconbtn.primary,.iconbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* segmented control */
.seg,.seg3{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border-radius:var(--r-ctl);background:var(--fill)}
.seg button,.seg3 button{border:0;background:none;min-height:40px;border-radius:10px;font-weight:600;font-size:var(--fs-sub);color:var(--ink);padding:0 8px;box-shadow:none}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"],.seg button.on,
.seg3 button[aria-pressed="true"]{background:var(--seg-thumb);color:var(--ink);box-shadow:var(--seg-shadow)}

/* switch */
.swt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--h-ctl);cursor:pointer;position:relative}
.swt input{position:absolute;opacity:0;pointer-events:none}
.swt i{width:51px;height:31px;border-radius:16px;background:var(--fill);position:relative;flex:none;transition:background .2s}
.swt i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 4px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.04);transition:transform .2s}
.swt input:checked+i{background:var(--accent)}
.swt input:checked+i::after{transform:translateX(20px)}
.swt input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}

/* form fields */
.fld{display:grid;gap:6px;min-width:0;font-weight:500}
.fld>span:first-child{font-size:var(--fs-foot);font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.fld input,.fld select,.fld textarea{width:100%;min-height:var(--h-ctl);border:0;border-radius:var(--r-ctl);background:var(--field);color:var(--ink);padding:11px 14px;font:inherit;font-size:16px;outline:none;box-shadow:inset 0 0 0 1px var(--line)}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--accent)}
.fld .hint{font-size:var(--fs-foot);font-weight:400;color:var(--muted)}

/* pop-up menus */
.dd-menu{background:var(--menu);color:var(--ink);border:0;border-radius:16px;padding:6px;box-shadow:0 0 0 .5px var(--line2),0 18px 50px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8)}
.dd-menu li{border-radius:10px;font-weight:500;font-size:var(--fs-body)}

.seg button[aria-checked="true"],.seg3 button[aria-checked="true"]{background:var(--seg-thumb);color:var(--ink);box-shadow:var(--seg-shadow)}
.chip[aria-checked="true"]{background:var(--accent);color:var(--accent-ink)}
.btn.ghost.danger-t{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.emo-more{color:var(--accent)!important;font-weight:600!important}

/* sheet header: title in the middle, Cancel / Done as text buttons */
.sh-top{display:flex;align-items:center;gap:12px;min-height:var(--h-ctl)}

/* grouped lists, for any app to use: <div class="hr-group"><div class="hr-row">… */
.hr-ghead{font-size:var(--fs-foot);font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:22px 16px 7px}
.hr-group{background:var(--surface);border-radius:var(--r-group);overflow:hidden;box-shadow:var(--edge);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
.hr-row{display:flex;align-items:center;gap:12px;min-height:var(--h-ctl);padding:11px 16px;position:relative}
.hr-row+.hr-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--line2)}
button.hr-row,a.hr-row{width:100%;border:0;background:none;color:var(--ink);text-align:left;font:inherit;text-decoration:none;cursor:pointer}
button.hr-row:active,a.hr-row:active{background:var(--fill)}
/* groups inside a sheet sit on a plain fill: no second layer of glass */
.sheet .hr-group{background:var(--fill);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hr-large{font-size:var(--fs-large);font-weight:700;letter-spacing:-.022em;line-height:1.15;margin:4px 0 12px}

/* floating tab bar (phones only), like iOS 26: a glass capsule above the bottom edge.
   Markup: <div class="hr-tabbar" role="tablist" aria-label="…"><button role="tab" aria-selected="true"><svg/><span>Label</span></button>…</div>
   Put it outside any animated (transformed) container. Wider screens keep the app's top .seg instead;
   on phones the app hides its .seg and pads its page by --hr-tabbar-space. Sheets and toasts sit above it. */
:root{ --hr-tabbar-h:62px; --hr-tabbar-bottom:max(12px, calc(env(safe-area-inset-bottom,0px) - 8px)); --hr-tabbar-space:0px }
.hr-tabbar{display:none}
@media (max-width:560px){
  :root{ --hr-tabbar-space:calc(var(--hr-tabbar-h) + var(--hr-tabbar-bottom) + 24px) }
  .hr-tabbar{display:flex;gap:2px;position:fixed;z-index:30;left:16px;right:16px;bottom:var(--hr-tabbar-bottom);max-width:440px;margin-inline:auto;
    height:var(--hr-tabbar-h);padding:4px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--edge),var(--shadow);
    -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
  :root[data-material="solid"] .hr-tabbar{background:var(--menu);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
  .hr-tabbar button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border:0;border-radius:var(--r-pill);background:none;color:var(--muted);padding:0 4px;font:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:color .2s,background-color .2s}
  .hr-tabbar button svg{width:24px;height:24px;flex:none}
  .hr-tabbar button span{font-size:11px;font-weight:600;line-height:1.1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hr-tabbar button[aria-selected="true"]{color:var(--accent);background:var(--btn2-bg)}
  .hr-tabbar button:active{background:var(--fill)}
  .hr-tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* toasts float above the bar */
  body:has(.hr-tabbar) .toast{bottom:calc(var(--hr-tabbar-bottom) + var(--hr-tabbar-h) + 12px)}
}

/* home page in the kit */
.chip{border:0;background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--edge);min-height:34px}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.w h3,.hr-ghead{color:var(--muted)}
.streak{border:0;box-shadow:var(--edge);color:var(--muted)}
.hello h2 em{color:inherit}
.logo i{background:var(--accent)}
.tile.add{border-style:solid;border-width:1px}
.empty{border-style:solid}

/* home page details in the kit */
.w-link{color:var(--accent);font-weight:600;font-size:var(--fs-sub)}
.avatar{color:var(--accent-ink);box-shadow:none}
/* live apps need no marker; apps still being built get a small muted dot */
.tile .dot.live{display:none}
.tile .dot.soon{background:var(--tertiary)}
/* favourite stars only while arranging, or when an app is a favourite on a computer */
.tile .fav{display:none}
.grid.editing .tile .fav{display:block;opacity:1}
@media (hover:hover){ .tile:hover .fav,.tile .fav[aria-pressed="true"]{display:block} }
.tile .fav[aria-pressed="true"]{color:var(--warn)}
.w .w-head .mi,.app-w .w-head .mi{box-shadow:none}

/* ---------- Comfort settings ---------- */
/* these selectors are deliberately stronger than the mode × material rules above so they always win */
@media (prefers-reduced-transparency:reduce){
  :root[data-theme][data-material]:not([data-material="solid"]){--surface:var(--surface-strong);--surface2:var(--surface-strong);--glass:none}
  :root[data-theme][data-material]:not([data-material="solid"]) body::before{filter:none}
}
@media (prefers-contrast:more){
  :root[data-theme="light"][data-material]{--muted:#3A3A40;--line:rgba(0,0,0,.25);--line2:rgba(0,0,0,.4)}
  :root[data-theme="dark"][data-material]{--muted:#D0D0D6;--line:rgba(255,255,255,.3);--line2:rgba(255,255,255,.45)}
  :root[data-theme][data-material]:not([data-material="solid"]){--surface:var(--surface-strong);--surface2:var(--surface-strong)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-theme][data-material]:not([data-material="solid"]){--surface:var(--surface-strong);--surface2:var(--surface-strong);--menu:var(--surface-strong)}
}