/* The Mitra Wall (webapp/routes_wall.py): a tablet on the kitchen wall, read from across the room and touched with a
   wet finger. Big type, 48 px targets, one colour per person, no amounts outside Money. No inline styles anywhere (the
   app's CSP): the time grid places events with the generated .gs-/.ge-/.slots- classes at the end of this file. */
:root {
  --ground: #FBFAF7; --rail: #F3F1EC; --card: #FFFFFF; --line: #E8E5DE; --line-2: #F1EFEA;
  --ink: #15171C; --ink-2: #2A313B; --muted: #5B6470; --accent: #1F6F4A; --accent-ink: #185C3D; --accent-soft: #DCEFE3;
  --late: #B42318; --late-soft: #FCE8E6; --warn: #875A00; --star: #E3A008; --star-line: #B7791F;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r: 20px; --r-sm: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font: 17px/1.4 var(--sans); }
body.wall { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; overflow: hidden; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- shell: rail on the left (landscape), bar at the bottom (portrait) ---- */
.shell { display: flex; height: 100vh; height: 100dvh; }
.wrail { width: 84px; flex: none; background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 14px 0; }
.wrail .mark { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; text-decoration: none; }
.wrail .mark img { width: 52px; height: 52px; display: block; border-radius: 14px; }
.wrail a.tab { width: 70px; min-height: 60px; border-radius: 15px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: #3E4652; text-decoration: none; font-size: 12px; font-weight: 600; }
.wrail a.tab.on { background: var(--accent-soft); color: var(--accent-ink); }
.wrail a.tab .left { font-size: 11px; font-weight: 700; color: var(--accent-ink); }
.wrail .grow { flex: 1; }
.wrail a.tab.quick { min-height: 54px; color: #5C6660; }
.wmain { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 20px 24px 18px; gap: 14px; overflow: hidden; }
@media (orientation: portrait) {
  .shell { flex-direction: column-reverse; }
  .wrail { width: auto; flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--line);
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .wrail .mark, .wrail .grow { display: none; }
  .wmain { padding-top: calc(20px + env(safe-area-inset-top)); }
}

/* ---- heads, cards, buttons ---- */
.whead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.whead h1 { margin: 0; font: 600 34px/1.1 var(--serif); letter-spacing: -0.01em; }
.whead .clock { font-size: 22px; font-weight: 500; color: #3E4652; }
.whead .date { font-size: 16px; color: var(--muted); }
.whead .grow { flex: 1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.card h2 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.card h2 .n { font-weight: 500; color: var(--muted); }
.btn { min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid #E4E2DC; background: #FFFFFF; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; color: var(--ink); }
.btn.dark { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn.go { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.btn.sq { width: 48px; padding: 0; }
.seg { display: flex; background: #F0EEE8; border-radius: 13px; padding: 4px; }
.seg a { min-height: 42px; padding: 0 16px; border-radius: 10px; display: flex; align-items: center; font-weight: 700; font-size: 15px;
  color: var(--muted); text-decoration: none; }
.seg a.on { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { min-height: 44px; padding: 0 14px 0 5px; border-radius: 999px; border: 1.5px solid #E4E2DC; background: #FFFFFF;
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.chip .n { font-weight: 500; color: #3E4652; }
.chip.on { background: var(--pfill); border-color: var(--pink); }
.chip.cd { padding: 0 14px; border-color: var(--ink); }
.av { width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; color: var(--pink); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.av.fill { background: var(--pfill); }
.av.sm { width: 22px; height: 22px; font-size: 11px; }
.av.lg { width: 52px; height: 52px; font: 700 24px var(--serif); }
.note { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.empty { color: var(--muted); font-size: 15px; padding: 12px 0; }
.late { color: var(--late); font-weight: 700; }

/* person colours: look.PEOPLE in family order; ch = the house */
.c0 { --pc: #2E7D52; } .c1 { --pc: #0F6CBD; } .c2 { --pc: #A14A0A; } .c3 { --pc: #7A3DB8; } .c4 { --pc: #00727D; } .c5 { --pc: #B0164F; }
.ch { --pc: #4B5563; }
.c0, .c1, .c2, .c3, .c4, .c5, .ch { --pfill: color-mix(in srgb, var(--pc) 17%, #FFFFFF); --pink: color-mix(in srgb, var(--pc) 88%, #000000); }

/* ---- week ---- */
.week { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; }
.whd { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.whd .day { padding: 9px 8px 8px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.whd .day.today { background: #F2F8F4; }
.whd .dn { display: flex; align-items: baseline; gap: 8px; }
.whd .dn b { font: 600 20px var(--serif); }
.whd .dn span { font-size: 15px; font-weight: 700; color: #3E4652; border-radius: 999px; padding: 1px 8px; }
.whd .today .dn span { background: var(--accent); color: #FFFFFF; }
.whd .bands { display: flex; flex-direction: column; gap: 4px; min-height: 44px; }
.band { font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--pfill); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.band.bmore { background: #FFFFFF; border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; }
.band.late { box-shadow: inset 3px 0 0 var(--late); color: var(--late); }
.mband { font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 8px; border: 1px dashed #8A8F98; background: #FFFFFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3E4652; display: flex; align-items: center; gap: 5px; }
.mband svg.i { width: 12px; height: 12px; stroke-width: 2.2; }
.mband.late { border-color: var(--late); color: var(--late); }
.mband.pay { border-color: var(--accent); color: var(--accent-ink); }
.dim { opacity: .24; }
.wgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr); }  /* one row = the space left: the hours share it, the wall never scrolls */
.hours { display: grid; position: relative; min-height: 0; }
.hours span { font-size: 12px; color: var(--muted); text-align: right; padding-right: 8px; transform: translateY(-50%); grid-column: 1; }
.col { display: grid; border-left: 1px solid var(--line-2); position: relative; padding: 0 3px; column-gap: 3px; min-height: 0;
  background-image: linear-gradient(to bottom, var(--line-2) 1px, transparent 1px); }
.col.today { background-color: #FAFCFA; }
.ev { grid-column: 1 / -1; margin: 2px 0; border-radius: 10px; background: var(--pfill); padding: 5px 8px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; position: relative; min-height: 0; }
.ev b { font-size: 13px; line-height: 1.25; }
.ev small { font-size: 12px; color: var(--ink-2); }
.ev .who { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 2px; }
.ev.short small { display: none; }
.lanes-2 .ev:not(.col-all) small, .lanes-3 .ev:not(.col-all) small,
.lanes-2 .ev:not(.col-all) .who, .lanes-3 .ev:not(.col-all) .who { display: none; }  /* side by side: the title gets the room */
.lanes-2 .ev:not(.col-all), .lanes-3 .ev:not(.col-all) { padding: 4px 5px; }
.lanes-2 .ev:not(.col-all) b, .lanes-3 .ev:not(.col-all) b { font-size: 12px; hyphens: auto; }
.nowline { grid-column: 1 / -1; align-self: start; height: 0; border-top: 2px solid #C2410C; position: relative; z-index: 2; }
.nowline::before { content: ""; position: absolute; left: -6px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #C2410C; }
.col-all { grid-column: 1 / -1; } .col-l1 { grid-column: 1; } .col-l2 { grid-column: 2; } .col-l3 { grid-column: 3; }
.lanes-1 { grid-template-columns: minmax(0, 1fr); } .lanes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lanes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- today ---- */
.agenda { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.agenda .tev { position: relative; border-radius: 14px; background: var(--pfill); padding: 10px 44px 10px 14px; display: flex;
  flex-direction: column; gap: 2px; min-width: 150px; max-width: 100%; }
.agenda .tev b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; } .agenda .tev small { font-size: 13px; color: var(--ink-2); }
.agenda .tev .who { position: absolute; right: 10px; top: 10px; display: flex; gap: 2px; }
.agenda .tev.past { opacity: .45; }
.agenda .tev.on { box-shadow: 0 0 0 2px var(--accent); }
.nowmark { align-self: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C2410C;
  padding: 4px 10px; border-radius: 999px; border: 2px solid #C2410C; }
.agdone { align-self: center; font-size: 14px; color: var(--ink-2); }  /* every timed event has ended: no Now pill beside the last one */
.tiles3 { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rows .row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.rows .row:first-of-type { border-top: 0; }
.rows .row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rows .row .t b { font-size: 15.5px; font-weight: 600; } .rows .row .t small { font-size: 13px; color: var(--muted); }
.kid { display: flex; align-items: center; gap: 14px; background: var(--pfill); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; text-decoration: none; color: var(--ink); }
.kid .t { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.kid .t b { font: 600 20px var(--serif); } .kid .t small { font-size: 13.5px; color: var(--ink-2); }
.ring { width: 62px; height: 62px; flex: none; }
.ring circle { fill: none; stroke-width: 7; } .ring .bg { stroke: #FFFFFF; } .ring .fg { stroke: var(--pink); stroke-linecap: round; }
.ring text { font: 700 15px var(--sans); fill: var(--ink); }
.stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.stars svg { width: 18px; height: 18px; fill: var(--star); stroke: var(--star-line); stroke-width: 1.4; }
.big { font: 600 24px/1.2 var(--serif); }
.coming { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.coming h2 { margin-bottom: 2px; } .coming h2.sub { margin-top: 12px; }
.crow { display: flex; align-items: baseline; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--pfill); }
.crow .cw { flex: none; width: 92px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); display: flex; flex-direction: column; }
.crow .cw small { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.crow .ct { font-size: 15.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow.money { background: #FFFFFF; border: 1px dashed #8A8F98; } .crow.money.late { border-color: var(--late); }
.cmore { font-size: 14px; font-weight: 700; color: var(--accent-ink); text-decoration: none; padding: 4px 2px; }
.lockcard { background: var(--rail); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }

/* ---- chores (any orientation) ---- */
.kgoal { margin-top: auto; background: #FFFFFF; border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.kgoal .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.kgoal .top b { display: inline-flex; align-items: center; gap: 6px; }
.kgoal .top svg { width: 16px; height: 16px; fill: var(--star); stroke: var(--star-line); stroke-width: 1.4; }
.kgoal .bar { height: 10px; border-radius: 999px; background: var(--pfill); overflow: hidden; }
.kgoal .bar i { display: block; height: 100%; background: var(--pink); border-radius: 999px; }
.krew { background: #FFFFFF; border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.krew .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.krew svg { width: 14px; height: 14px; fill: var(--star); stroke: var(--star-line); stroke-width: 1.4; vertical-align: -2px; }
.rew { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; margin: 0; }
.rew small { color: var(--muted); font-weight: 600; }
.rew button { font: 700 15px var(--sans); border: 0; border-radius: 999px; padding: 8px 16px; min-height: 40px;
  background: var(--accent); color: #FFFFFF; cursor: pointer; }
.kids { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; overflow: auto; }
.kcol { background: var(--pfill); border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.khead { display: flex; align-items: center; gap: 12px; }
.khead .t { flex: 1; display: flex; flex-direction: column; } .khead .t b { font: 600 26px var(--serif); }
.khead .t small { font-size: 14px; color: var(--ink-2); }
.khead .stars { background: #FFFFFF; border-radius: 999px; padding: 6px 12px; font-size: 18px; }
.bar { height: 10px; border-radius: 5px; background: #FFFFFF; overflow: hidden; }
.bar i { display: block; height: 10px; border-radius: 5px; background: var(--pink); }
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.job { margin: 0; }
.job button { width: 100%; min-height: 132px; border-radius: 18px; border: 2px solid #FFFFFF; background: #FFFFFF; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; padding: 10px; position: relative; }
.job button svg.i { width: 44px; height: 44px; stroke-width: 1.6; color: var(--pink); }
.job button b { font-size: 15.5px; text-align: center; line-height: 1.25; }
.job button .worth { position: absolute; top: 10px; left: 12px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.job button .worth svg { width: 12px; height: 12px; fill: var(--star); stroke: none; }
.job button .tick { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C9C5BC;
  background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.job button .tick svg.i { width: 14px; height: 14px; stroke-width: 3.4; color: #FFFFFF; }
.job.done button { background: var(--pink); border-color: var(--pink); color: #FFFFFF; }
.job.done button svg.i { color: #FFFFFF; }
.job.done button .tick { border-color: #FFFFFF; background: rgba(255,255,255,.25); }
.kfoot { margin-top: auto; background: #FFFFFF; border-radius: 16px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); }

/* ---- lists ---- */
.lists { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; overflow: auto; }
.lcol { border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; background: var(--pfill); }
.lcol h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 22px var(--serif); }
.lcol h2 .cnt { margin-left: auto; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--pink); color: #FFFFFF;
  font: 700 13px var(--sans); display: inline-flex; align-items: center; justify-content: center; }
.items { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.item { margin: 0; }
.item button { width: 100%; min-height: 50px; border: 0; border-radius: 13px; background: #FFFFFF; padding: 0 12px; display: flex;
  align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.item button .box { width: 26px; height: 26px; flex: none; border-radius: 8px; border: 2px solid #C9C5BC; display: flex; align-items: center; justify-content: center; }
.item button .box svg.i { width: 15px; height: 15px; stroke-width: 3.2; color: #FFFFFF; }
.item button span.t { flex: 1; font-size: 15.5px; font-weight: 600; }
.item button span.q { font-size: 13px; color: var(--muted); }
.item.done button { opacity: .6; } .item.done button span.t { text-decoration: line-through; }
.item.done button .box { background: var(--pink); border-color: var(--pink); }
.addrow { display: flex; gap: 8px; margin-top: auto; }
.addrow input { flex: 1; min-width: 0; min-height: 50px; border-radius: 13px; border: 1.5px dashed var(--pink); background: rgba(255,255,255,.7);
  padding: 0 12px; font-size: 16px; user-select: text; -webkit-user-select: text; }

/* ---- meals ---- */
.meals { flex: 1; min-height: 0; display: flex; gap: 16px; }
.mgrid { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); grid-template-rows: auto;
  grid-auto-rows: minmax(0, 1fr); gap: 8px; }  /* the day names keep their height; the meal rows share the rest */
.mgrid .dh { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px; }
.mgrid .dh b { font: 600 18px var(--serif); } .mgrid .dh span { font-size: 13px; font-weight: 700; color: #3E4652; border-radius: 999px; padding: 1px 7px; }
.mgrid .dh.today span { background: var(--accent); color: #FFFFFF; }
.mgrid .slot { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #3E4652; display: flex; align-items: center; justify-content: center; }
.mcell { border-radius: 14px; padding: 9px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; overflow: hidden; }
.mcell b { font-size: 14px; line-height: 1.3; } .mcell small { font-size: 12px; color: #3E4652; }
.mcell.empty { border: 1.5px dashed #DAD6CC; background: transparent; }
.s-breakfast { background: #FBF1DA; } .s-lunch { background: #E2F2EF; } .s-dinner { background: #EEE6F8; } .s-snack { background: #FBE6EA; }
.mcell.tonight { outline: 2px solid #5E3396; outline-offset: -2px; }
.recipe { width: 360px; flex: none; display: flex; flex-direction: column; gap: 10px; overflow: auto; box-shadow: 0 10px 30px rgba(21,23,28,.08); }
.recipe .kind { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5E3396; }
.recipe h2.serif { font: 600 28px/1.15 var(--serif); margin: 0; }
.ing { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 3px 0; }
.ing i { width: 9px; height: 9px; border-radius: 50%; background: #B7791F; flex: none; } .ing.pantry i { background: var(--accent); }
.ing small { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--warn); } .ing.pantry small { color: var(--accent-ink); }

/* ---- money ---- */
.mtop { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.figure { font: 600 40px/1 var(--serif); }
.pace { position: relative; height: 14px; border-radius: 7px; background: #EFEDE8; margin: 12px 0; }
.pace i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--accent); }
.pace i.over { background: var(--late); }
.pace b { position: absolute; top: -5px; width: 2px; height: 24px; background: var(--ink); }
.strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; }
.strip .d { border-radius: 12px; border: 1px solid var(--line-2); background: var(--ground); min-height: 86px; padding: 6px; display: flex;
  flex-direction: column; gap: 3px; }
.strip .d.today { border-color: var(--accent); background: #FFFFFF; }
.strip .d small { font-size: 12px; color: var(--muted); } .strip .d b { font-size: 16px; }
.strip .d span { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--ink-2); }
.strip .d span.late { color: var(--late); } .strip .d span.pay { color: var(--accent-ink); }
.mrow { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mrow .top { display: flex; justify-content: space-between; font-size: 14.5px; } .mrow .top b { font-weight: 600; }
.mrow .top span.over { color: var(--late); font-weight: 600; }
.mbar { height: 8px; border-radius: 4px; background: #EFEDE8; overflow: hidden; } .mbar i { display: block; height: 8px; background: var(--accent); }
.mbar i.over { background: var(--late); }
.tiles3m { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
/* money pages: Spending (category x three months), Bills (last month against this one), Regular (three groups) */
.whead .seg { margin-left: 4px; }
.card.warn { border-color: #E9CF95; background: #FFFBF1; }
.mlist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.mscroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sgrid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(96px, 168px)); gap: 12px 20px; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--line-2); }
.mhead { border-top: 0; padding: 0 4px 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sgrid .k::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--kc); }
.sgrid .now { --kc: var(--accent); } .sgrid .prev { --kc: #8FA39A; } .sgrid .ly { --kc: #D9C49A; }
.sgrid .cat b { font-size: 15.5px; font-weight: 600; }
.bars { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.bars i { display: block; height: 6px; border-radius: 3px; min-width: 2px; }
.bars i.now { background: var(--accent); } .bars i.prev { background: #8FA39A; } .bars i.ly { background: #D9C49A; }
.num { font: 600 19px/1.2 var(--serif); text-align: right; color: var(--ink-2); } .num.now { color: var(--ink); }
.mpair { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; }
.sgrid.mhead > :not(:first-child), .bgrid.mhead > :not(:first-child) { text-align: right; }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(88px, 176px)); gap: 12px 16px; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--line-2); }
.bgrid.mhead { border-top: 0; }
.bgrid .t { display: flex; flex-direction: column; min-width: 0; } .bgrid .t b { font-size: 15.5px; font-weight: 600; }
.bgrid .t small, .bgrid .paid small { font-size: 13px; color: var(--muted); }
.bgrid .paid { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.bgrid .paid b { font: 600 18px/1.2 var(--serif); }
.bgrid.waiting .t small { color: var(--warn); font-weight: 600; } .bgrid.new .t small { color: var(--accent-ink); }
.pill.wait { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px;
  font-weight: 700; color: var(--warn); background: #FBF1DA; border: 1px solid #E9CF95; }
.mlist .row small.late, .mlist .row .late { color: var(--late); font-weight: 600; }
.mlist .row .flag { color: var(--warn); font-weight: 600; }
.mlist .row .big { font-size: 19px; }
.soon { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.soon .tag { display: inline-flex; gap: 6px; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 13.5px;
  background: var(--accent-soft); color: var(--accent-ink); }
.tiles3m.reg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlist h2 { margin-bottom: 0; } .gsum { margin: 0 0 4px; font: 600 20px/1.2 var(--serif); }
.g-home h2 { color: #0F6CBD; } .g-loans h2 { color: #A14A0A; } .g-subs h2 { color: #7A3DB8; }
.pinpad { max-width: 420px; margin: auto; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.pinpad h1 { margin: 0; font: 600 34px var(--serif); text-align: center; }
.pinpad select, .pinpad input { min-height: 56px; border-radius: 14px; border: 1px solid #D9D5CC; background: #FFFFFF; padding: 0 14px; font-size: 20px; }
.pinpad input { letter-spacing: .3em; text-align: center; user-select: text; -webkit-user-select: text; }
.alert { background: var(--late-soft); color: var(--late); border-radius: 12px; padding: 10px 14px; margin: 0; font-weight: 600; }

/* ---- resting screen ---- */
body.rest { background: #000000; color: #F3F1EC; }
.restv { height: 100vh; height: 100dvh; padding: clamp(16px, 7vh, 56px) clamp(20px, 7vw, 72px); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; }
.restv .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 600 clamp(16px, 4vh, 24px) var(--serif); }
.restv .top small { font: 400 clamp(12px, 2.8vh, 16px) var(--sans); color: #B9C9BF; }
.restv .mid { display: flex; align-items: flex-end; gap: clamp(20px, 6vw, 60px); flex-wrap: wrap; min-height: 0; }
.restv .time { font: 300 clamp(64px, min(18vw, 32vh), 220px)/.85 var(--serif); letter-spacing: -0.03em; }
.restv .day { font-size: clamp(16px, 4.4vh, 26px); font-weight: 500; color: #DCE6E0; margin-top: 10px; }
.restv .next { flex: 1; min-width: min(300px, 40vw); display: flex; flex-direction: column; gap: clamp(6px, 2vh, 14px); padding-bottom: 8px; }
.restv .next .k { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FD4AC; }
.restv .next .main { font: 600 clamp(18px, 5.6vh, 34px) var(--serif); }
.restv .next .l { display: flex; gap: 14px; align-items: center; font-size: 19px; color: #DCE6E0; }
.restv .next .l span:first-child { width: 90px; color: #B9C9BF; }
.restv .next .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pfill); flex: none; }
.restv .bottom { display: flex; gap: 14px; flex-wrap: wrap; }
.restv .bottom span { display: inline-flex; align-items: center; gap: 10px; padding: clamp(6px, 1.8vh, 12px) clamp(10px, 2.4vh, 18px); border-radius: 16px; background: rgba(243,241,236,.08); font-size: clamp(13px, 2.9vh, 17px); }

/* ---- weather (data/weather.py; nothing shows when there is none) ---- */
.wx { display: flex; align-items: center; gap: 10px; }
.wx svg.i.wxi { width: 46px; height: 46px; stroke-width: 1.6; color: var(--ink-2); }
.wxt { font: 600 40px/1 var(--serif); }
.wxs { display: flex; flex-direction: column; gap: 2px; font-size: 15px; max-width: 260px; }
.wxs b { font-weight: 600; } .wxs small { font-size: 13.5px; color: var(--muted); }
svg.i.l-sun, svg.i.l-partly { color: var(--star-line); }
.whd .dn { flex-wrap: wrap; row-gap: 2px; }
.whd .dn .wxd { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-style: normal;
  font-weight: 600; color: #3E4652; white-space: nowrap; }
.whd .dn .wxd svg.i { width: 16px; height: 16px; stroke-width: 2; }
.restv .timerow { display: flex; align-items: flex-start; gap: 22px; }
.restv .wxr { display: inline-flex; align-items: center; gap: 8px; font: 400 44px/1 var(--serif); color: #DCE6E0; margin-top: 14px; }
.restv .wxr svg.i { width: 40px; height: 40px; stroke-width: 1.5; }
body.rest.night .restv .wxr { color: #AEBBB3; }

/* ---- a tap on an event: the details (wall.js copies the item's hidden .pop into #wpop) ---- */
[data-pop] { cursor: pointer; }
.pop { display: none; }
.wpop { border: 0; border-radius: 22px; padding: 22px 24px 18px; width: min(460px, calc(100vw - 48px)); max-height: 80vh;
  background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(21,23,28,.28); }
.wpop::backdrop { background: rgba(21,23,28,.38); }
.wpop-body { display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: calc(80vh - 110px); }
.wpop-body .pk { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wpop-body .pt { font: 600 26px/1.2 var(--serif); overflow-wrap: anywhere; }
.wpop-body .pwhen { font-size: 17px; color: var(--ink-2); }
.wpop-body .pnote { font-size: 14.5px; color: var(--muted); }
.wpop-body .ppl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wpop-body .pp { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 4px 12px 4px 4px;
  border-radius: 999px; background: var(--rail); }
.wpop-body .plist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wpop-body .plist li { display: flex; gap: 10px; align-items: flex-start; }
.wpop-body .plist li > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpop-body .plist b { font-size: 16px; overflow-wrap: anywhere; } .wpop-body .plist small { font-size: 13.5px; color: var(--muted); }
.wpop-body .pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); flex: none; margin-top: 6px; }
.wpop form { display: flex; justify-content: flex-end; margin: 14px 0 0; }

/* ---- month ---- */
.month { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mrows-4 { grid-template-rows: auto repeat(4, minmax(0, 1fr)); } .mrows-5 { grid-template-rows: auto repeat(5, minmax(0, 1fr)); }
.mrows-6 { grid-template-rows: auto repeat(6, minmax(0, 1fr)); }
.mdow { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.mday { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 7px; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; }
.mday.out { background: transparent; border-style: dashed; } .mday.out .mnum { color: #9AA1AB; }
.mday.today { border: 2px solid var(--accent); background: #F2F8F4; }
.mday .mnum { font: 600 17px var(--serif); align-self: flex-start; padding: 0 4px; border-radius: 999px; }
.mday.today .mnum { background: var(--accent); color: #FFFFFF; padding: 0 9px; }
.mline { font-size: 12.5px; font-weight: 600; line-height: 1.25; padding: 2px 6px; border-radius: 7px; background: var(--pfill);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mline small { font-weight: 700; color: var(--ink-2); font-size: 11.5px; }
.mline.money { background: #FFFFFF; border: 1px dashed #8A8F98; color: #3E4652; }
.mline.money.late { border-color: var(--late); color: var(--late); } .mline.money.pay { border-color: var(--accent); color: var(--accent-ink); }
.mmore { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 6px; }

/* ---- pairing ---- */
.pair { max-width: 560px; margin: 8vh auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; }
.pair h1 { margin: 0; font: 600 40px var(--serif); }
.pair input { min-height: 64px; border-radius: 16px; border: 1px solid #D9D5CC; padding: 0 16px; font-size: 30px; letter-spacing: .2em;
  text-align: center; text-transform: uppercase; user-select: text; -webkit-user-select: text; }

/* the traditional clock (Settings > Phones > Mitra Wall > Wall screen: Traditional) */
.face-analog .restv .mid { align-items: center; justify-content: center; gap: 6vw; flex-wrap: nowrap; }
.aclock { height: min(64vh, 50vw); width: auto; flex: none; color: #F3F1EC; }
.aclock .face { fill: rgba(243,241,236,.05); stroke: currentColor; stroke-width: 2.5; }
.aclock .tk { stroke: #8FA79A; stroke-width: 1.2; } .aclock .tk.major { stroke: currentColor; stroke-width: 3; }
.aclock .num { fill: currentColor; font: 600 17px var(--serif); }
.aclock .hand { stroke: currentColor; stroke-linecap: round; }
.aclock .hh { stroke-width: 6; } .aclock .mh { stroke-width: 4; } .aclock .sh { stroke: #E08A5C; stroke-width: 1.6; }
.aclock .pin { fill: #E08A5C; }
.face-analog .aside { display: flex; flex-direction: column; gap: clamp(8px, 2.6vh, 18px); min-width: min(300px, 36vw); max-width: 40vw; }
.face-analog .aside .day { font-size: clamp(16px, 5vh, 30px); margin: 0; }
.face-analog .aside .next { min-width: 0; }
body.rest.night .aclock { color: #9AA8A0; } body.rest.night .aclock .sh, body.rest.night .aclock .pin { stroke: #7A5A48; fill: #7A5A48; }

/* photos in turn with the clock (wall.js; never at night) */
.stage { position: fixed; inset: 0; background: #000000; z-index: 5; }
.stage .ly { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; display: flex;
  align-items: center; justify-content: center; }
.stage .ly.on { opacity: 1; }
.stage .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage .c2, .stage .c3, .stage .bg, .stage .cap { display: none; }
/* photo styles (Settings > Photos > Photo style): slow zoom, blurred fill, collage, frame and date */
.st-kenburns .ph { object-fit: cover; animation: none 17s linear both; }
.st-kenburns .ph.kb1 { animation-name: kb1; } .st-kenburns .ph.kb2 { animation-name: kb2; }
.st-kenburns .ph.kb3 { animation-name: kb3; } .st-kenburns .ph.kb4 { animation-name: kb4; }
@keyframes kb1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -2%); } }
@keyframes kb2 { from { transform: scale(1.14) translate(3%, 2%); } to { transform: scale(1) translate(0, 0); } }
@keyframes kb3 { from { transform: scale(1.04) translate(-2%, 2%); } to { transform: scale(1.16) translate(2%, -1%); } }
@keyframes kb4 { from { transform: scale(1.16) translate(-2%, -2%); } to { transform: scale(1.04) translate(2%, 1%); } }
@media (prefers-reduced-motion: reduce) { .st-kenburns .ph { animation: none !important; } }
.st-blur .bg { display: block; position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px);
  object-fit: cover; filter: blur(40px) brightness(.55) saturate(1.2); }
.st-collage .ly { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; }
.st-collage .ly.n2 { grid-template-columns: 1fr 1fr; }
.st-collage .ly.n3 { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; }
.st-collage .ph { position: static; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 16px; }
.st-collage .ly.n2 .c2, .st-collage .ly.n3 .c2, .st-collage .ly.n3 .c3 { display: block; }
.st-collage .ly.n3 .ph:not(.c2):not(.c3) { grid-row: 1 / span 2; }
.stage.st-frame { background: #2B2723; }
.st-frame .ly { flex-direction: column; gap: 18px; }
.st-frame .ph { position: static; width: auto; height: auto; max-width: 84vw; max-height: 76vh; background: #FBFAF7; padding: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55); transform: rotate(-1.2deg); }
.st-frame .cap { display: block; min-height: 1.2em; font: italic 500 30px var(--serif); color: #EDE6DA; }
.stage .corner { position: absolute; right: 28px; bottom: 24px; display: flex; gap: 16px; align-items: center; color: #FFFFFF;
  font: 500 34px var(--serif); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.stage .corner span { display: inline-flex; align-items: center; gap: 8px; }
.stage .corner svg.i { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* night: from 10 PM to 6 AM (wall.js) the screens a person is using stay as they are; the wall goes back to the clock
   after NIGHT_IDLE seconds and the clock itself is dimmer (a dark page with soft text, nothing bright in a dark room) */
body.rest.night { background: #000000; }
body.rest.night .restv { color: #9AA8A0; }
body.rest.night .restv .time { color: #C9D2CC; }
body.rest.night .restv .next .main, body.rest.night .restv .day { color: #AEBBB3; }
body.rest.night .restv .next .k { color: #5F9C78; }
body.rest.night .restv .bottom span { background: rgba(243,241,236,.05); }

/* the modular face (Settings > Phones > Mitra Wall > Wall screen: Modular): big time, cards, today's special days */
body.rest.face-modular, body.rest.face-typograph { background: #000000; }
.face-modular .restv { padding: clamp(14px, 6vh, 44px) clamp(18px, 5vw, 52px); gap: clamp(10px, 3.4vh, 24px); justify-content: flex-start; }
.face-modular .restv .top .mdate { font: 600 clamp(14px, 3.8vh, 22px) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #FF9F0A; }
.modgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; }
.modtime { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }
.bigt { display: flex; align-items: flex-start; gap: 12px; line-height: .86; }
.bigt .t { font: 300 clamp(72px, min(22vw, 42vh), 280px)/.86 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bigt .ap { font: 500 clamp(20px, 2.4vw, 30px) var(--sans); color: #9A9BA3; padding-top: 1.2vw; }
.modtime .pills { display: flex; gap: 12px; flex-wrap: wrap; }
.modtime .pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #1A1C21; font-size: 20px; }
.modtime .pill svg.i { width: 22px; height: 22px; color: #64D2FF; }
.modcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.modcards.n-1, .modcards.n-2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(0, auto); align-content: center; }
.modcards.n-3 > :last-child { grid-column: span 2; }
.mcard .sub.more { font-size: 17px; color: #C9CAD0; }
.mcard { background: #16181C; border-radius: clamp(14px, 4vh, 28px); padding: clamp(8px, 2.8vh, 20px) clamp(10px, 2.8vh, 22px); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; overflow: hidden; }
.mcard .k { font-size: clamp(11px, 2.3vh, 14px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FF9F0A; }
.mcard .k.wxk { color: #64D2FF; } .mcard .k.jobk { color: #30D158; } .mcard .k.dink { color: #FF6482; }
.mcard .big { font: 600 clamp(15px, min(2.6vw, 4.6vh), 32px)/1.12 var(--sans); overflow-wrap: anywhere; }
.mcard .sub { font-size: clamp(12px, 3vh, 18px); color: #9A9BA3; }
.mcard .mwx { display: flex; align-items: center; gap: 12px; } .mcard .mwx b { font: 400 clamp(28px, 8vh, 56px)/1 var(--sans); }
.mcard .mwx svg.i { width: clamp(26px, 7vh, 48px); height: clamp(26px, 7vh, 48px); stroke-width: 1.6; }
.rings { display: flex; gap: 16px; flex-wrap: wrap; }
.rings .ring { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; color: #C9CAD0; }
.ring svg { width: clamp(40px, 11vh, 72px); height: clamp(40px, 11vh, 72px); }
.ring .rt, .ring .rv { fill: none; stroke-width: 10; } .ring .rt { stroke: #2A2D33; }
.ring .rv { stroke: #30D158; stroke-linecap: round; } .ring .rv.all { stroke: #64D2FF; }
.ring text { fill: #F2F2F4; font: 600 19px var(--sans); }
.modday { display: flex; align-items: center; gap: 14px; padding: clamp(6px, 2vh, 14px) clamp(12px, 3vh, 22px); border-radius: 22px; background: #121317; font-size: clamp(13px, 3.2vh, 20px); }
.modday svg.i { width: 24px; height: 24px; flex: none; color: #FF9F0A; } .modday .soft { color: #9A9BA3; min-width: 0; }
@media (orientation: portrait) {
  .modgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 40px; }
  .bigt .t { font-size: min(34vw, 22vh, 300px); }
  .modcards { grid-template-rows: repeat(2, minmax(min(160px, 20vh), auto)); }
  .modgrid { gap: clamp(14px, 4vh, 40px); }
  .restv .time { font-size: clamp(64px, 26vw, 220px); }
}

/* the Roman face (Wall screen: Roman): quiet hands, serif numerals at the quarters */
.face-typograph .restv { justify-content: center; padding: 48px 72px; }
.typo { display: flex; align-items: center; justify-content: center; gap: 6vw; color: #EDE6D8; }
.tclock { height: min(74vh, 56vw); width: auto; flex: none; }
.tclock .rim { fill: none; stroke: #24354B; stroke-width: 1; }
.tclock .tk { stroke: #4A5D76; stroke-width: 1.4; stroke-linecap: round; }
.tclock .rn { fill: #8C9BB0; font: 500 13px var(--serif); } .tclock .rn.q { fill: #EDE6D8; font-size: 23px; }
.tclock .hand { stroke: #EDE6D8; stroke-linecap: round; } .tclock .hh { stroke-width: 3; } .tclock .mh { stroke-width: 2; }
.tclock .sh { stroke: #D9B26F; stroke-width: .8; } .tclock .pin { fill: #D9B26F; }
.tside { display: flex; flex-direction: column; gap: clamp(10px, 3.4vh, 24px); min-width: min(280px, 36vw); max-width: 36vw; }
.tside hr { border: 0; height: 1px; background: #24354B; margin: 0; width: 100%; }
.tday { font: 500 clamp(24px, min(5.4vw, 10vh), 72px)/1 var(--serif); } .tdate { font: 400 clamp(18px, min(3.4vw, 6.4vh), 44px)/1.2 var(--serif); color: #D9B26F; }
.tlines { display: flex; flex-direction: column; gap: clamp(4px, 1.4vh, 10px); font-size: clamp(14px, 3.4vh, 21px); }
.tlines .l { display: flex; gap: 14px; } .tlines .l span:first-child { flex: 0 0 140px; white-space: nowrap; color: #8C9BB0; }
.twx { font-size: 20px; color: #B6C0CE; }
@media (orientation: portrait) {
  .typo { flex-direction: column; gap: 48px; }
  .tclock { height: auto; width: min(80vw, 58vh); }
  .tside { max-width: 80vw; width: 80vw; }
}
body.rest.face-typograph { background: #000000; }
body.rest.night.face-modular, body.rest.night.face-typograph { background: #000000; }
body.rest.night.face-modular .restv, body.rest.night .typo { opacity: .6; }

/* the bedroom night clock (Wall screen: Night clock red / amber): black, the time and the date only, nothing bright */
.nightv { display: none; }
body.rest.night.tone-red, body.rest.night.tone-amber { background: #000000; }
body.rest.night.tone-red .restv, body.rest.night.tone-amber .restv { display: none; }
body.rest.night.tone-red .nightv, body.rest.night.tone-amber .nightv { height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-decoration: none; color: #C8281C; }
body.rest.night.tone-amber .nightv { color: #D98A1E; }
.nightv .nt { display: flex; align-items: flex-start; gap: 16px; }
.nightv .nt span:first-child { font: 200 clamp(96px, min(30vw, 52vh), 380px)/.85 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.nightv .ap, .nightv .nd, .nightv .nn { color: #6E1A13; } body.rest.night.tone-amber .nightv :is(.ap, .nd, .nn) { color: #7A4E14; }
.nightv .ap { font: 300 clamp(24px, 3vw, 40px) var(--sans); padding-top: 3vw; }
.nightv .nd { font: 300 26px var(--sans); letter-spacing: .06em; }
.nightv .nn { display: flex; gap: 40px; font: 300 22px var(--sans); margin-top: 20px; }

/* the PC is off, asleep or restarting (wall.js): the wall stays on its last screen with this line */
.woff { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; margin: 0; padding: 10px 18px;
  border-radius: 999px; background: #2B2F36; color: #F3F1EC; font-size: 16px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); }
body.rest.night .woff { background: #111; color: #6E6E68; box-shadow: none; }

/* ---- generated: the time grid's rows (15-minute slots) and placement; rows 1..65 ---- */
.slots-16{grid-template-rows:repeat(16,minmax(0,1fr));background-size:100% calc(400% / 16 * 1)}.slots-20{grid-template-rows:repeat(20,minmax(0,1fr));background-size:100% calc(400% / 20 * 1)}.slots-24{grid-template-rows:repeat(24,minmax(0,1fr));background-size:100% calc(400% / 24 * 1)}.slots-28{grid-template-rows:repeat(28,minmax(0,1fr));background-size:100% calc(400% / 28 * 1)}.slots-32{grid-template-rows:repeat(32,minmax(0,1fr));background-size:100% calc(400% / 32 * 1)}.slots-36{grid-template-rows:repeat(36,minmax(0,1fr));background-size:100% calc(400% / 36 * 1)}.slots-40{grid-template-rows:repeat(40,minmax(0,1fr));background-size:100% calc(400% / 40 * 1)}.slots-44{grid-template-rows:repeat(44,minmax(0,1fr));background-size:100% calc(400% / 44 * 1)}.slots-48{grid-template-rows:repeat(48,minmax(0,1fr));background-size:100% calc(400% / 48 * 1)}.slots-52{grid-template-rows:repeat(52,minmax(0,1fr));background-size:100% calc(400% / 52 * 1)}.slots-56{grid-template-rows:repeat(56,minmax(0,1fr));background-size:100% calc(400% / 56 * 1)}.slots-60{grid-template-rows:repeat(60,minmax(0,1fr));background-size:100% calc(400% / 60 * 1)}.slots-64{grid-template-rows:repeat(64,minmax(0,1fr));background-size:100% calc(400% / 64 * 1)}
.gs-1{grid-row-start:1}.gs-2{grid-row-start:2}.gs-3{grid-row-start:3}.gs-4{grid-row-start:4}.gs-5{grid-row-start:5}.gs-6{grid-row-start:6}.gs-7{grid-row-start:7}.gs-8{grid-row-start:8}.gs-9{grid-row-start:9}.gs-10{grid-row-start:10}.gs-11{grid-row-start:11}.gs-12{grid-row-start:12}.gs-13{grid-row-start:13}.gs-14{grid-row-start:14}.gs-15{grid-row-start:15}.gs-16{grid-row-start:16}.gs-17{grid-row-start:17}.gs-18{grid-row-start:18}.gs-19{grid-row-start:19}.gs-20{grid-row-start:20}.gs-21{grid-row-start:21}.gs-22{grid-row-start:22}.gs-23{grid-row-start:23}.gs-24{grid-row-start:24}.gs-25{grid-row-start:25}.gs-26{grid-row-start:26}.gs-27{grid-row-start:27}.gs-28{grid-row-start:28}.gs-29{grid-row-start:29}.gs-30{grid-row-start:30}.gs-31{grid-row-start:31}.gs-32{grid-row-start:32}.gs-33{grid-row-start:33}.gs-34{grid-row-start:34}.gs-35{grid-row-start:35}.gs-36{grid-row-start:36}.gs-37{grid-row-start:37}.gs-38{grid-row-start:38}.gs-39{grid-row-start:39}.gs-40{grid-row-start:40}.gs-41{grid-row-start:41}.gs-42{grid-row-start:42}.gs-43{grid-row-start:43}.gs-44{grid-row-start:44}.gs-45{grid-row-start:45}.gs-46{grid-row-start:46}.gs-47{grid-row-start:47}.gs-48{grid-row-start:48}.gs-49{grid-row-start:49}.gs-50{grid-row-start:50}.gs-51{grid-row-start:51}.gs-52{grid-row-start:52}.gs-53{grid-row-start:53}.gs-54{grid-row-start:54}.gs-55{grid-row-start:55}.gs-56{grid-row-start:56}.gs-57{grid-row-start:57}.gs-58{grid-row-start:58}.gs-59{grid-row-start:59}.gs-60{grid-row-start:60}.gs-61{grid-row-start:61}.gs-62{grid-row-start:62}.gs-63{grid-row-start:63}.gs-64{grid-row-start:64}.gs-65{grid-row-start:65}
.ge-2{grid-row-end:2}.ge-3{grid-row-end:3}.ge-4{grid-row-end:4}.ge-5{grid-row-end:5}.ge-6{grid-row-end:6}.ge-7{grid-row-end:7}.ge-8{grid-row-end:8}.ge-9{grid-row-end:9}.ge-10{grid-row-end:10}.ge-11{grid-row-end:11}.ge-12{grid-row-end:12}.ge-13{grid-row-end:13}.ge-14{grid-row-end:14}.ge-15{grid-row-end:15}.ge-16{grid-row-end:16}.ge-17{grid-row-end:17}.ge-18{grid-row-end:18}.ge-19{grid-row-end:19}.ge-20{grid-row-end:20}.ge-21{grid-row-end:21}.ge-22{grid-row-end:22}.ge-23{grid-row-end:23}.ge-24{grid-row-end:24}.ge-25{grid-row-end:25}.ge-26{grid-row-end:26}.ge-27{grid-row-end:27}.ge-28{grid-row-end:28}.ge-29{grid-row-end:29}.ge-30{grid-row-end:30}.ge-31{grid-row-end:31}.ge-32{grid-row-end:32}.ge-33{grid-row-end:33}.ge-34{grid-row-end:34}.ge-35{grid-row-end:35}.ge-36{grid-row-end:36}.ge-37{grid-row-end:37}.ge-38{grid-row-end:38}.ge-39{grid-row-end:39}.ge-40{grid-row-end:40}.ge-41{grid-row-end:41}.ge-42{grid-row-end:42}.ge-43{grid-row-end:43}.ge-44{grid-row-end:44}.ge-45{grid-row-end:45}.ge-46{grid-row-end:46}.ge-47{grid-row-end:47}.ge-48{grid-row-end:48}.ge-49{grid-row-end:49}.ge-50{grid-row-end:50}.ge-51{grid-row-end:51}.ge-52{grid-row-end:52}.ge-53{grid-row-end:53}.ge-54{grid-row-end:54}.ge-55{grid-row-end:55}.ge-56{grid-row-end:56}.ge-57{grid-row-end:57}.ge-58{grid-row-end:58}.ge-59{grid-row-end:59}.ge-60{grid-row-end:60}.ge-61{grid-row-end:61}.ge-62{grid-row-end:62}.ge-63{grid-row-end:63}.ge-64{grid-row-end:64}.ge-65{grid-row-end:65}.ge-66{grid-row-end:66}
/* bar widths and marker offsets in whole percent (no inline styles) */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.x-0{left:0%}.x-1{left:1%}.x-2{left:2%}.x-3{left:3%}.x-4{left:4%}.x-5{left:5%}.x-6{left:6%}.x-7{left:7%}.x-8{left:8%}.x-9{left:9%}.x-10{left:10%}.x-11{left:11%}.x-12{left:12%}.x-13{left:13%}.x-14{left:14%}.x-15{left:15%}.x-16{left:16%}.x-17{left:17%}.x-18{left:18%}.x-19{left:19%}.x-20{left:20%}.x-21{left:21%}.x-22{left:22%}.x-23{left:23%}.x-24{left:24%}.x-25{left:25%}.x-26{left:26%}.x-27{left:27%}.x-28{left:28%}.x-29{left:29%}.x-30{left:30%}.x-31{left:31%}.x-32{left:32%}.x-33{left:33%}.x-34{left:34%}.x-35{left:35%}.x-36{left:36%}.x-37{left:37%}.x-38{left:38%}.x-39{left:39%}.x-40{left:40%}.x-41{left:41%}.x-42{left:42%}.x-43{left:43%}.x-44{left:44%}.x-45{left:45%}.x-46{left:46%}.x-47{left:47%}.x-48{left:48%}.x-49{left:49%}.x-50{left:50%}.x-51{left:51%}.x-52{left:52%}.x-53{left:53%}.x-54{left:54%}.x-55{left:55%}.x-56{left:56%}.x-57{left:57%}.x-58{left:58%}.x-59{left:59%}.x-60{left:60%}.x-61{left:61%}.x-62{left:62%}.x-63{left:63%}.x-64{left:64%}.x-65{left:65%}.x-66{left:66%}.x-67{left:67%}.x-68{left:68%}.x-69{left:69%}.x-70{left:70%}.x-71{left:71%}.x-72{left:72%}.x-73{left:73%}.x-74{left:74%}.x-75{left:75%}.x-76{left:76%}.x-77{left:77%}.x-78{left:78%}.x-79{left:79%}.x-80{left:80%}.x-81{left:81%}.x-82{left:82%}.x-83{left:83%}.x-84{left:84%}.x-85{left:85%}.x-86{left:86%}.x-87{left:87%}.x-88{left:88%}.x-89{left:89%}.x-90{left:90%}.x-91{left:91%}.x-92{left:92%}.x-93{left:93%}.x-94{left:94%}.x-95{left:95%}.x-96{left:96%}.x-97{left:97%}.x-98{left:98%}.x-99{left:99%}.x-100{left:100%}

/* portrait (a tablet on its side): Today stacks Needs doing above the other two, the bill strip shows a week a row */
@media (orientation: portrait) {
  .mpair { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); }
  .tiles3m.reg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tiles3m.reg > .g-subs { grid-column: 1 / -1; }
  .whead .seg { order: 9; }
  .tiles3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); }
  .tiles3 > :first-child { grid-column: 1 / -1; }
  .strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.kgoal + .kfoot { margin-top: 0; }

/* ---- more clock faces (S3): flip, word, two cities, kids' day; and the face picker on the resting screen ---- */
.face-word .restv .mid, .face-kidsday .restv .mid { align-items: center; justify-content: center; gap: 6vw; }
.face-word .aside, .face-kidsday .aside { display: flex; flex-direction: column; gap: clamp(8px, 2.6vh, 18px); min-width: min(300px, 36vw); max-width: 40vw; }
.face-word .aside .day, .face-kidsday .aside .day { font-size: clamp(16px, 5vh, 30px); margin: 0; }
.face-word .aside .next, .face-kidsday .aside .next { min-width: 0; }
.flip { display: flex; align-items: center; gap: 12px; perspective: 600px; }
.flip .fd { position: relative; display: inline-flex; justify-content: center; min-width: .78em; padding: 0 .06em; border-radius: 14px;
  background: #22302A; box-shadow: inset 0 -6px 0 rgba(0,0,0,.25); font: 300 clamp(60px, min(15vw, 30vh), 200px)/1.05 var(--serif); color: #F3F1EC; }
.flip .fd::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: #000000; }
.flip .fd.blank { display: none; }
.flip .fd.flip { animation: fdturn .45s ease-out; }
@keyframes fdturn { from { transform: rotateX(-80deg); opacity: .4; } to { transform: rotateX(0); opacity: 1; } }
.flip .fcol { font: 300 clamp(44px, min(10vw, 20vh), 140px)/1 var(--serif); color: #8FA79A; }
.flip .ap { align-self: flex-end; font: 600 clamp(16px, 4.6vh, 28px) var(--sans); color: #B9C9BF; margin-bottom: 16px; }
body.rest.night .flip .fd { background: #121A16; color: #AEBBB3; }
.wordc { display: flex; flex-direction: column; gap: .3em; font: 700 clamp(14px, min(3.6vw, 4.6vh), 46px)/1.1 var(--sans); letter-spacing: .14em; }
.wordc .wr { display: flex; gap: .7em; flex-wrap: wrap; }
.wordc span { color: rgba(243,241,236,.14); transition: color .6s ease; }
.wordc span.on { color: #F3F1EC; text-shadow: 0 0 18px rgba(255,214,140,.35); }
.wordc .wdots { display: flex; gap: 14px; margin-top: 8px; }
.wordc .wdots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(243,241,236,.14); }
.wordc .wdots span.on { background: #F3F1EC; }
body.rest.night .wordc span.on { color: #AEBBB3; text-shadow: none; } body.rest.night .wordc .wdots span.on { background: #AEBBB3; }
.dual { display: flex; gap: 7vw; flex-wrap: wrap; align-items: flex-end; }
.dual .dz { display: flex; flex-direction: column; gap: 6px; }
.dual .dk { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FD4AC; }
.dual .far .dk { color: #FFC857; }
.dual .dt { display: flex; align-items: flex-start; gap: 10px; font: 300 clamp(52px, min(11vw, 24vh), 160px)/.9 var(--serif); letter-spacing: -0.02em; }
.dual .dt .ap { font: 600 24px var(--sans); color: #B9C9BF; margin-top: 12px; }
.dual .dd { font-size: clamp(14px, 3.8vh, 22px); color: #DCE6E0; }
.dayring { height: min(60vh, 42vw); width: auto; flex: none; overflow: visible; }
.face-kidsday .restv .mid, .face-word .restv .mid { flex-wrap: nowrap; }
body.rest .restv .top { padding-right: 64px; }
.dayring path { fill: none; stroke-linecap: round; }
.dayring .dband { stroke-width: 16; opacity: .9; }
.dayring .dband.morning { stroke: #FFC857; } .dayring .dband.afternoon { stroke: #6CC3A0; } .dayring .dband.evening { stroke: #8C9BEA; }
.dayring .dev { stroke: color-mix(in srgb, var(--pc, #F3F1EC) 75%, #FFFFFF); stroke-width: 9; } .dayring .dev.past { opacity: .35; }
.dayring .rt { fill: #B9C9BF; font: 600 9px var(--sans); }
.dayring .moon { fill: #8C9BEA; font: 700 8px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.dayring .now circle { fill: #FFFFFF; stroke: #14201A; stroke-width: 3; } .dayring .now.asleep { opacity: .3; }
.dayring .ct { fill: #F3F1EC; font: 300 30px var(--serif); } .dayring .cp { fill: #B9C9BF; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
body.rest.night .dayring { opacity: .6; }
.facebtn { position: fixed; top: clamp(8px, 3vh, 18px); right: clamp(8px, 3vh, 18px); z-index: 3; width: clamp(40px, 8vh, 52px); height: clamp(40px, 8vh, 52px); border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(243,241,236,.10); color: #DCE6E0; cursor: pointer; }
.facebtn svg.i { width: 26px; height: 26px; }
body.rest.night .facebtn { opacity: .35; }
body.rest.night.tone-red .facebtn, body.rest.night.tone-amber .facebtn { display: none; }
.wface { border: 0; border-radius: 22px; padding: 22px 24px; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: #F3F1EC; color: #14201A; }
.wface::backdrop { background: rgba(0,0,0,.6); }
.wface header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.wface h2 { margin: 0; font: 600 24px var(--serif); }
.wface .fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.wface .fopt { min-height: clamp(44px, 9vh, 64px); border-radius: 14px; border: 2px solid rgba(20,32,26,.15); background: #FFFFFF; font: 600 18px var(--sans); color: inherit; cursor: pointer; }
.wface .fopt.on { border-color: #2E7D57; background: #E3F2EA; }
.wface .muted { color: #5C6660; font-size: 15px; margin: 14px 0 0; }
@media (orientation: portrait) { .dual { flex-direction: column; align-items: flex-start; gap: 28px; } .dayring { height: auto; width: min(80vw, 46vh); } }
@media (orientation: portrait) and (max-width: 900px) {
  .face-word .restv .mid, .face-kidsday .restv .mid, .face-analog .restv .mid { flex-direction: column; align-items: flex-start; gap: 3vh; }
  .face-word .aside, .face-kidsday .aside, .face-analog .aside { min-width: 0; max-width: none; }
  .aclock { height: auto; width: min(80vw, 46vh); }
  .ring svg { width: clamp(32px, 7vh, 72px); height: clamp(32px, 7vh, 72px); }
  .modday .soft { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- the week as a heat map (owner, 2026-10-24): one tile per day, wider (taller standing up) and darker the busier it
   is (.h-0 free .. .h-4 seven things or more, wall_data.heat); everything on it in one list; a tap shows the day in full ---- */
.heat { flex: 1; min-height: 0; display: flex; gap: clamp(6px, 1.4vw, 12px); }
.hday { --hbg: var(--card); flex: 1 1 0; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column;
  gap: clamp(3px, .8vh, 6px); padding: clamp(6px, 1.6vh, 12px); border-radius: 16px; border: 1px solid var(--line);
  background: var(--hbg); overflow: hidden; cursor: pointer; }
.hday.h-1 { --hbg: #E3F1E8; flex-grow: 1.3; } .hday.h-2 { --hbg: #C8E6D3; flex-grow: 1.65; border-color: #B5DCC3; }
.hday.h-3 { --hbg: #A6D6B8; flex-grow: 2.05; border-color: #8DC9A3; } .hday.h-4 { --hbg: #7FC39B; flex-grow: 2.5; border-color: #66B486; }
.hday.today { outline: 3px solid var(--accent); outline-offset: -3px; }
.hday::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0), var(--hbg)); }
.hd-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.hd-top b { font: 600 clamp(15px, 3vh, 20px) var(--serif); } .hd-top .num { font-weight: 700; color: var(--muted); }
.hd-top .wxd { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-style: normal; color: var(--muted); }
.hd-top .wxd svg.i { width: 15px; height: 15px; }
.hd-n { margin-left: auto; min-width: 24px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: rgba(21,23,28,.10); }
.hd-l { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 6px; min-width: 0; font-size: clamp(12px, 2.4vh, 15px); line-height: 1.2; }
.hd-l::before { content: ""; grid-row: 1 / span 2; width: 8px; height: 8px; margin-top: .3em; border-radius: 50%; background: var(--pc, var(--muted)); }
.hd-l .t { grid-column: 2; font-size: .82em; font-weight: 700; color: var(--ink-2); }
.hd-l .x { grid-column: 2; min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hd-l.late .x { color: var(--late); font-weight: 700; } .hd-l.dim { opacity: .35; }
.hd-free { margin: 0; color: var(--muted); font-size: 13px; }
@media (orientation: portrait) {
  .heat { flex-direction: column; }
  .hday { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 10px;
    row-gap: 2px; align-content: start; }
  .hd-top { grid-column: 1; grid-row: 1 / span 12; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
  .hd-n { margin: 4px 0 0; }
  .hd-l, .hd-free { grid-column: 2; }
  .hd-l { grid-template-columns: 8px auto minmax(0, 1fr); }
  .hd-l::before { grid-row: 1; }
  .hd-l .t { grid-column: 2; padding-right: 6px; }
  .hd-l .x { grid-column: 3; grid-row: 1; -webkit-line-clamp: 1; }
}

/* a short screen (a small tablet lying down, e.g. Fire 7 at about 640x375): the header, chips and rail shrink so the page
   itself (the week's tiles, the lists) keeps most of the height */
@media (max-height: 520px) {
  .wmain { padding: 8px 12px; gap: 8px; }
  .whead { gap: 8px; flex-wrap: nowrap; }
  .whead h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .whead .clock { font-size: 16px; white-space: nowrap; } .whead .date { font-size: 13px; white-space: nowrap; }
  .btn { min-height: 34px; padding: 0 10px; border-radius: 10px; } .btn.sq { width: 34px; }
  .seg { padding: 2px; } .seg a { min-height: 30px; padding: 0 10px; font-size: 13px; }
  .chiprow { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .chip { min-height: 30px; font-size: 13px; white-space: nowrap; flex: none; }
  .wrail { width: 64px; padding: 8px 0; gap: 2px; }
  .wrail .mark, .wrail .mark img { width: 38px; height: 38px; margin-bottom: 2px; }
  .wrail a.tab { width: 56px; min-height: 42px; font-size: 11px; }
}