/* Layout: three app screens in the reference style. Dark icon rail at the far left, light workspace, soft colour cards, calendar and inbox side by side. Mike's content, not sample data. */
:root{
  --bg:#ebebef; --paper:#ffffff; --fg:#17181c; --muted:#7a7d87; --line:#e4e5ea; --rail:#17181c; --rail-fg:#9ea1ab;
  --lav:#dcd6fa; --lav-fg:#4b3fa3; --mint:#d6f0e3; --mint-fg:#1f6b48; --pink:#fbd9e4; --pink-fg:#9a2c57; --sun:#f8e7b4; --sun-fg:#7a5a00; --sky:#d9e9fb; --sky-fg:#1d5aa8;
  --ink:#17181c; --ok:#1f8a53; --warn:#b4680a; --bad:#c8102e;
  --font:"Plus Jakarta Sans","Segoe UI",Roboto,sans-serif; --hand:"Caveat","Bradley Hand",cursive;
  --r:18px; --r2:12px;
  /* depth */
  --sh-xs:0 1px 2px rgba(20,22,30,.06), 0 0 0 1px rgba(20,22,30,.04);
  --sh-sm:0 1px 2px rgba(20,22,30,.05), 0 4px 10px rgba(20,22,30,.06), 0 0 0 1px rgba(20,22,30,.03);
  --sh-md:0 2px 4px rgba(20,22,30,.05), 0 10px 24px rgba(20,22,30,.08), 0 0 0 1px rgba(20,22,30,.03);
  --sh-lg:0 4px 8px rgba(20,22,30,.06), 0 24px 60px rgba(20,22,30,.16), 0 0 0 1px rgba(20,22,30,.05);
  --hi:inset 0 1px 0 rgba(255,255,255,.85);
  --hi-soft:inset 0 1px 0 rgba(255,255,255,.55);
  --inset:inset 0 1px 3px rgba(20,22,30,.07), inset 0 0 0 1px rgba(20,22,30,.03);
  --btn-sh:0 1px 1px rgba(20,22,30,.12), 0 4px 10px rgba(20,22,30,.18), inset 0 1px 0 rgba(255,255,255,.14);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#101114; --paper:#1b1c21; --fg:#eceef3; --muted:#9397a3; --line:#2a2c34; --rail:#0a0b0d; --rail-fg:#8b8f9a; --lav:#2e2a52; --lav-fg:#c3b8ff; --mint:#1d3b2c; --mint-fg:#8fe0b6; --pink:#452230; --pink-fg:#ff9fc0; --sun:#3d3313; --sun-fg:#f3d57a; --sky:#1b2f47; --sky-fg:#8fc0ff; --ink:#eceef3; --ok:#5fcf93; --warn:#f2b84e; --bad:#ff6b7a; color-scheme:dark;
  --sh-xs:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05); --sh-md:0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); --sh-lg:0 4px 8px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07); --hi:inset 0 1px 0 rgba(255,255,255,.07); --hi-soft:inset 0 1px 0 rgba(255,255,255,.05); --inset:inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); --btn-sh:0 1px 1px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35) } }
:root[data-theme="dark"]{ --sh-xs:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05); --sh-md:0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); --sh-lg:0 4px 8px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07); --hi:inset 0 1px 0 rgba(255,255,255,.07); --hi-soft:inset 0 1px 0 rgba(255,255,255,.05); --inset:inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); --btn-sh:0 1px 1px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); --bg:#101114; --paper:#1b1c21; --fg:#eceef3; --muted:#9397a3; --line:#2a2c34; --rail:#0a0b0d; --rail-fg:#8b8f9a; --lav:#2e2a52; --lav-fg:#c3b8ff; --mint:#1d3b2c; --mint-fg:#8fe0b6; --pink:#452230; --pink-fg:#ff9fc0; --sun:#3d3313; --sun-fg:#f3d57a; --sky:#1b2f47; --sky-fg:#8fc0ff; --ink:#eceef3; --ok:#5fcf93; --warn:#f2b84e; --bad:#ff6b7a; color-scheme:dark }
*{box-sizing:border-box}
.theme{display:inline-flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
.theme button{font:inherit;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.theme button.on{background:var(--ink);color:var(--paper)}
.theme button:focus-visible{outline:2px solid var(--sky-fg);outline-offset:2px}
.msg .av.ag{background:var(--sky);color:var(--sky-fg)} .msg .av.ag.lav{background:var(--lav);color:var(--lav-fg)} .msg .av.ag.mint{background:var(--mint);color:var(--mint-fg)} .msg .av.ag.pink{background:var(--pink);color:var(--pink-fg)} .msg .av.ag.sun{background:var(--sun);color:var(--sun-fg)}
.list .it .av.ag{background:var(--sky);color:var(--sky-fg)} .list .it .av.ag.lav{background:var(--lav);color:var(--lav-fg)} .list .it .av.ag.mint{background:var(--mint);color:var(--mint-fg)} .list .it .av.ag.pink{background:var(--pink);color:var(--pink-fg)} .list .it .av.ag.sun{background:var(--sun);color:var(--sun-fg)}
.list .it .st{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.st.work{background:var(--sun);color:var(--sun-fg)} .st.done{background:var(--mint);color:var(--mint-fg)} .st.wait{background:var(--lav);color:var(--lav-fg)} .st.idle{background:var(--bg);color:var(--muted)}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.45;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px 56px}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.02em}
h2{font-size:22px;font-weight:700}
h3{font-size:16px;font-weight:700}
h4{font-size:13px;font-weight:700}
p{margin:0;max-width:62ch}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lede{color:var(--muted);font-size:17px}
.hand{font-family:var(--hand);font-size:21px;color:var(--muted);line-height:1.15}
.hand.red{color:var(--bad)}
.cap{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;margin-top:10px}

/* app frame */
.app{background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.12);display:grid;grid-template-columns:64px 1fr;min-height:560px}
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0}
.rail .logo{width:34px;height:34px;border-radius:10px;background:#fff;color:#17181c;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.rail i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--rail-fg);font-style:normal;font-size:16px}
.rail i.on{background:#2b2d35;color:#fff}
.rail .sp{flex:1}
.ws{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar .title{font-weight:700;font-size:16px}
.tabs{display:flex;gap:4px;margin-left:auto;background:var(--bg);border-radius:999px;padding:4px}
.tabs span{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.tabs span.on{background:var(--paper);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--bg);color:var(--fg);white-space:nowrap}
.chip.dark{background:var(--ink);color:var(--paper)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#8a7a5a,#3a3a3a)}
.body{padding:20px 22px;display:grid;gap:16px;min-width:0}
.card{background:var(--paper);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3 .sub{font-weight:500;color:var(--muted);font-size:13px;margin-left:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--paper);white-space:nowrap}
.btn.soft{background:var(--bg);color:var(--fg)}
.btn.big{font-size:15px;padding:13px 24px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.lav{background:var(--lav);color:var(--lav-fg)} .pill.mint{background:var(--mint);color:var(--mint-fg)} .pill.pink{background:var(--pink);color:var(--pink-fg)} .pill.sun{background:var(--sun);color:var(--sun-fg)} .pill.sky{background:var(--sky);color:var(--sky-fg)}

/* home layout */
.home{grid-template-columns:270px 1fr 300px}
.profile{align-items:flex-start}
.profile .big{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#8a7a5a,#3a3a3a)}
.profile .name{font-weight:800;font-size:18px}
.profile .role{color:var(--muted);font-size:13px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.stat{background:var(--bg);border-radius:var(--r2);padding:10px 12px;display:flex;flex-direction:column}
.stat .k{font-size:11px;color:var(--muted);font-weight:600}
.stat .v{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.details{display:flex;flex-direction:column;gap:10px;width:100%;font-size:13px}
.details .d{display:flex;flex-direction:column;gap:1px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.details .d span{color:var(--muted);font-size:11px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:150px;min-width:0}
.tile.lav{background:var(--lav);color:var(--lav-fg)} .tile.mint{background:var(--mint);color:var(--mint-fg)} .tile.pink{background:var(--pink);color:var(--pink-fg)}
.tile .date{font-size:11px;font-weight:700;opacity:.8}
.tile .t{font-weight:800;font-size:16px;line-height:1.2}
.tile .s{font-size:12.5px;opacity:.85}
.tile .bar{height:6px;border-radius:999px;background:rgba(255,255,255,.55);overflow:hidden;margin-top:auto}
.tile .bar b{display:block;height:100%;background:currentColor;opacity:.8}
.tile .foot{display:flex;justify-content:space-between;font-size:11px;font-weight:700}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--paper)}
.drop b{font-size:15px}
.drop span{color:var(--muted);font-size:13px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:12px}
.cal .h{color:var(--muted);font-weight:700;text-align:center;font-size:11px;padding-bottom:4px}
.cal .d{background:var(--bg);border-radius:10px;min-height:62px;padding:6px;display:flex;flex-direction:column;gap:3px;font-variant-numeric:tabular-nums}
.cal .d .n{font-weight:700;font-size:11px;color:var(--muted)}
.cal .d.today .n{color:var(--fg)}
.cal .d.today{outline:2px solid var(--ink)}
.cal .ev{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.lav{background:var(--lav);color:var(--lav-fg)} .ev.mint{background:var(--mint);color:var(--mint-fg)} .ev.pink{background:var(--pink);color:var(--pink-fg)} .ev.sun{background:var(--sun);color:var(--sun-fg)} .ev.sky{background:var(--sky);color:var(--sky-fg)}
.inbox{display:flex;flex-direction:column;gap:10px}
.msg{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px;border-radius:var(--r2);background:var(--bg)}
.msg.new{background:var(--lav)}
.msg .av{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.msg .av.me{background:linear-gradient(135deg,#8a7a5a,#3a3a3a)}
.msg .tx{display:flex;flex-direction:column;gap:2px;font-size:12.5px;min-width:0}
.msg .tx b{font-size:12.5px}
.msg .tx small{color:var(--muted);font-size:11px}
.msg .tx .btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.msg .tx .btns .btn{padding:5px 10px;font-size:11px}

/* messages screen */
.msgs{grid-template-columns:300px 1fr}
.list{display:flex;flex-direction:column;gap:6px}
.list .it{display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:10px;border-radius:var(--r2);align-items:center;font-size:13px}
.list .it.on{background:var(--bg)}
.list .it .av{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.list .it .tx{display:flex;flex-direction:column;min-width:0}
.list .it .tx small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .it .t{font-size:11px;color:var(--muted)}
.thread{display:flex;flex-direction:column;gap:12px;min-height:380px}
.bub{max-width:78%;padding:11px 14px;border-radius:16px;font-size:13.5px;display:flex;flex-direction:column;gap:8px}
.bub.them{background:var(--bg);border-top-left-radius:4px;align-self:flex-start}
.bub.me{background:var(--ink);color:var(--paper);border-top-right-radius:4px;align-self:flex-end}
.bub small{opacity:.7;font-size:11px}
.bub .btns{display:flex;gap:6px;flex-wrap:wrap}
.bub .btns .btn{padding:6px 12px;font-size:12px}
.bub.me .btn{background:var(--paper);color:var(--ink)}
.compose{margin-top:auto;display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:999px;padding:10px 16px;color:var(--muted);font-size:13px}

/* issue screen */
.issue{grid-template-columns:1fr 1fr}
.email{display:flex;flex-direction:column;gap:8px;font-size:13px}
.email .hdr{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;color:var(--muted);background:var(--bg);border-radius:var(--r2);padding:10px 12px}
.email .hdr b{color:var(--fg)}
.email .prev{color:var(--muted);line-height:1.5}
.slides{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.slide{aspect-ratio:4/5;border-radius:8px;display:flex;align-items:flex-end;padding:7px;font-weight:800;font-size:10px;line-height:1.15;color:#fff;background:#2b2f3a}
.slide.photo{background:linear-gradient(160deg,#5b6472,#1f2937)} .slide.cream{background:#f1e9d6;color:#2b2f3a} .slide.yellow{background:#f2c94c;color:#2b2f3a}
.slide .hl{background:#f2c94c;color:#2b2f3a;padding:0 3px}
.pieces{display:flex;flex-direction:column;gap:8px}
.piece{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--bg);border-radius:var(--r2);padding:10px 12px;font-size:13px}
.piece .when{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;min-width:64px}
.piece .when b{font-size:13px}
.piece .when span{font-size:11px;color:var(--muted)}
.piece .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.piece .tx small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piece .acts{display:flex;gap:6px}
.piece .acts .btn{padding:6px 10px;font-size:11px}
.approvebar{grid-column:1 / -1;background:var(--paper);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.approvebar .hint{color:var(--muted);font-size:13px}

footer{font-size:13px;color:var(--muted)}

/* ---- depth pass: shadows, highlights, gradients. Later rules win. ---- */
body{background:radial-gradient(1200px 600px at 20% -10%, rgba(220,214,250,.35), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(214,240,227,.35), transparent 55%), var(--bg)}
.app{box-shadow:var(--sh-lg);border:0;background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #fff), var(--bg))}
.rail{background:linear-gradient(180deg, #23252c, var(--rail) 40%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06), 4px 0 18px rgba(0,0,0,.12)}
.rail .logo{box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.08)}
.rail i.on{background:linear-gradient(180deg,#34373f,#262830);box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35)}
.topbar{box-shadow:0 1px 0 var(--line), 0 6px 16px rgba(20,22,30,.05);position:relative;z-index:1}
.tabs{box-shadow:var(--inset)}
.tabs span.on{box-shadow:0 1px 2px rgba(20,22,30,.12), 0 2px 6px rgba(20,22,30,.08), var(--hi)}
.chip{box-shadow:var(--inset)}
.chip.dark{box-shadow:var(--btn-sh);background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 85%, #fff), var(--ink))}
.avatar{box-shadow:0 0 0 2px var(--paper), 0 2px 6px rgba(20,22,30,.25)}
.card{box-shadow:var(--sh-sm), var(--hi);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{box-shadow:var(--sh-md), var(--hi);transform:translateY(-1px)}
.btn{box-shadow:var(--btn-sh);background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 82%, #fff), var(--ink));transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 2px rgba(20,22,30,.12), 0 8px 18px rgba(20,22,30,.22), inset 0 1px 0 rgba(255,255,255,.18)}
.btn.soft{background:linear-gradient(180deg, var(--paper), var(--bg));color:var(--fg);box-shadow:var(--sh-xs), var(--hi)}
.btn.soft:hover{box-shadow:var(--sh-sm), var(--hi)}
.btn.big{box-shadow:0 2px 3px rgba(20,22,30,.15), 0 10px 24px rgba(20,22,30,.28), inset 0 1px 0 rgba(255,255,255,.16)}
.stat{box-shadow:var(--inset)}
.profile .big{box-shadow:0 6px 16px rgba(20,22,30,.25), inset 0 1px 0 rgba(255,255,255,.25)}
.tile{box-shadow:var(--sh-sm), var(--hi-soft);position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%, rgba(0,0,0,.04));pointer-events:none}
.tile::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-50px;top:-60px;background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);pointer-events:none}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-md), var(--hi-soft)}
.tile .bar{box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.tile .bar b{box-shadow:0 1px 2px rgba(0,0,0,.15)}
.drop{box-shadow:var(--inset);background:linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 70%, var(--paper)))}
.cal .d{box-shadow:var(--inset)}
.cal .d.today{outline:0;box-shadow:0 0 0 2px var(--ink), var(--sh-sm);background:var(--paper)}
.cal .ev{box-shadow:0 1px 1px rgba(20,22,30,.08), var(--hi-soft)}
.msg{box-shadow:var(--inset)}
.msg.new{box-shadow:var(--sh-sm), var(--hi-soft)}
.msg .av,.list .it .av{box-shadow:0 2px 5px rgba(20,22,30,.18), var(--hi-soft)}
.list .it.on{box-shadow:var(--inset)}
.bub.them{box-shadow:var(--sh-xs), var(--hi)}
.bub.me{box-shadow:0 4px 14px rgba(20,22,30,.25), inset 0 1px 0 rgba(255,255,255,.12);background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 85%, #fff), var(--ink))}
.compose{box-shadow:var(--inset)}
.email .hdr,.piece{box-shadow:var(--inset)}
.slide{box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.12)}
.approvebar{box-shadow:var(--sh-md), var(--hi)}
.pill{box-shadow:var(--hi-soft), 0 1px 1px rgba(20,22,30,.06)}
.theme{box-shadow:var(--sh-xs)}
.theme button.on{box-shadow:var(--btn-sh)}
@media (prefers-reduced-motion:reduce){ .card,.tile,.btn{transition:none} .card:hover,.tile:hover,.btn:hover{transform:none} }

@media (max-width:1000px){ .home{grid-template-columns:1fr 1fr} .home .card.right{grid-column:1 / -1} .msgs{grid-template-columns:1fr} .msgs .card.listc{order:2} .issue{grid-template-columns:1fr} }
@media (max-width:640px){ .home{grid-template-columns:1fr} .tiles{grid-template-columns:1fr} .app{grid-template-columns:1fr} .rail{flex-direction:row;padding:10px} .rail .sp{display:none} .tabs{display:none} .cal{grid-template-columns:repeat(4,1fr)} .cal .h:nth-child(n+5){display:none} .slides{grid-template-columns:repeat(3,1fr)} .bub{max-width:100%} }

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} img{max-width:100%}

/* app mode: the Home screen is the whole window */
html,body{height:100%}
body{padding:0;margin:0;background:var(--bg)}
.app{border-radius:0;box-shadow:none;border:0;min-height:100vh}
.rail{padding-top:max(14px,env(safe-area-inset-top,0px))}
.body{padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}

[hidden]{display:none!important}