/* Kitchen wall home (design B2): dark glass cards over the screensaver photos.
   Everything is scoped to body.on-wall; the phone UI does not use this file. */
.wall-bg, .wall-head { display: none; }
body.on-wall {
  --wh-card: rgba(18, 22, 30, .58); --wh-line: #ffffff14; --wh-accent: #36c2ff; --wh-warm: #ffc94d;
  --wh-sans: "Figtree", "Inter", system-ui, "DejaVu Sans", sans-serif;
  background: #0e1116 !important; color: #f5f7fa; font-family: var(--wh-sans);
}
body.on-wall .wall-bg { display: block; position: fixed; inset: 0; z-index: 0; background: #0e1116; }
body.on-wall .wall-bg i { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 2.5s ease; isolation: isolate;
  background: var(--img, none) center / contain no-repeat; }
body.on-wall .wall-bg i::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--img, none) center / cover no-repeat;
  filter: blur(40px) brightness(.55) saturate(1.1); }
body.on-wall .wall-bg i.on { opacity: 1; }
body.on-wall .wall-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000a 0%, #0006 40%, #0008 100%); }
body.on-wall.wall-screen .wall-bg::after { background: #0c0f14ee; backdrop-filter: blur(24px); }

body.on-wall #app { position: relative; z-index: 1; display: block !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: hidden; }
body.on-wall .top, body.on-wall .tabs, body.on-wall #add-bar, body.on-wall .add-slip, body.on-wall .apps-btn { display: none !important; }
body.on-wall #list-view { height: 100%; padding: 0 !important; margin: 0 !important; overflow: hidden; }

/* ---- grid ---- */
.wh-grid { height: 100%; display: grid; grid-template-columns: 560px minmax(0, 1fr) 640px; gap: 22px; padding: 26px 28px; box-sizing: border-box; }
.wh-grid * { box-sizing: border-box; }
.wh-col { display: flex; flex-direction: column; gap: 22px; min-height: 0; min-width: 0; }
.wh-card { background: var(--wh-card); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--wh-line);
  border-radius: 26px; padding: 22px 26px; min-height: 0; overflow: hidden; position: relative; color: #f5f7fa; }
.wh-card > header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wh-card h2 { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: -.01em; font-family: var(--wh-sans); color: #fff; }
.wh-sub { margin-left: auto; font-size: 17px; opacity: .65; }
.wh-count { font-size: 20px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: #ffffff1f; }
.wh-count:empty { display: none; }
.wh-muted { opacity: .6; font-size: 22px; }
.wh-empty { list-style: none; opacity: .7; font-size: 22px; padding: 10px 4px; line-height: 1.35; }
.wh-groups > .wh-empty { column-span: all; }
.wh-empty b { display: block; font-size: 28px; opacity: 1; margin-bottom: 6px; }

/* ---- clock + weather ---- */
.wh-clock { padding: 6px 6px 0; text-shadow: 0 2px 16px #0008; flex: none; }
.wh-time { font-size: 150px; line-height: .95; font-weight: 300; letter-spacing: -.04em; }
.wh-time small { font-size: 36px; font-weight: 500; letter-spacing: 0; margin-left: 10px; opacity: .8; }
.wh-date { display: inline-flex; align-items: center; gap: 14px; font: inherit; font-size: 32px; margin-top: 8px; padding: 8px 10px 8px 0; border: 0; background: none; color: #fff; cursor: pointer; text-shadow: inherit; }
.wh-date i { font-style: normal; display: inline-flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 700; padding: 6px 8px 6px 14px; border-radius: 999px; background: #ffffff26; text-shadow: none; }
.wh-date:active { transform: scale(.97); }
.wh-wx { display: flex; align-items: center; gap: 18px; margin-top: 22px; min-height: 88px; }
.wh-wx b { font-size: 64px; font-weight: 400; display: block; line-height: 1; }
.wh-wx b sup { font-size: 30px; vertical-align: top; margin-left: 2px; opacity: .8; }
.wh-wx span { font-size: 22px; display: block; margin-top: 4px; }
.wh-wx small { font-size: 18px; opacity: .75; display: block; margin-top: 2px; }
.wh-stale { display: block; font-style: normal; font-size: 16px; color: #ffd27a; margin-top: 4px; }
.wh-fc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 20px; text-align: center; }
.wh-fc div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-radius: 16px; background: rgba(18, 22, 30, .45); backdrop-filter: blur(10px); }
.wh-fc span { font-size: 18px; font-weight: 700; opacity: .85; }
.wh-fc b { font-size: 24px; font-weight: 600; } .wh-fc em { font-style: normal; font-size: 18px; opacity: .6; }

/* ---- calendar ---- */
.wh-cal { flex: 1; }
.wh-cal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wh-cal li:not(.wh-empty) { display: grid; grid-template-columns: 10px 130px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 6px; }
.wh-cal .dot { width: 10px; height: 46px; border-radius: 6px; }
.wh-cal .when b { display: block; font-size: 22px; } .wh-cal .when span { font-size: 17px; opacity: .65; }
.wh-cal .what b { display: block; font-size: 26px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-cal .what span { font-size: 17px; opacity: .65; }

/* ---- shopping list ---- */
.wh-list { flex: 1; display: flex; flex-direction: column; }
.wh-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 999px; border: 0;
  background: #ffffff17; color: #fff; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; }
.wh-pill b { background: #ff9f5a; color: #2a1300; border-radius: 999px; padding: 1px 9px; font-size: 16px; }
.wh-add { flex: none; }
.wh-addform { display: flex; gap: 12px; margin: 0; }
.wh-addform input { flex: 1; min-width: 0; height: 72px; font: inherit; font-size: 26px; padding: 0 24px; border-radius: 20px;
  border: 2px solid #ffffff22; outline: none; background: #ffffff14; color: #fff; }
.wh-addform input::placeholder { color: #ffffff88; }
.wh-addform input:focus { border-color: var(--wh-accent); background: #ffffff1f; }
.wh-addform button { height: 72px; padding: 0 34px; font: inherit; font-size: 26px; font-weight: 800; border: 0; border-radius: 20px;
  background: var(--wh-accent); color: #04131c; cursor: pointer; }
.wh-chips { display: flex; flex-wrap: nowrap; gap: 10px; margin: 14px 0 8px; overflow: hidden; mask-image: linear-gradient(90deg, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); }
.wh-chips button { flex: none; height: 50px; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 19px; font-weight: 600; border: 0;
  background: #ffffff17; color: #e8eef5; cursor: pointer; }
.wh-chips button:active, .wh-pill:active, .wh-addform button:active { transform: scale(.96); }
.wh-groups { columns: 2; column-gap: 24px; margin-top: 10px; overflow: hidden; flex: 1; min-height: 0; }
.wh-grp { break-inside: avoid; margin-bottom: 18px; }
.wh-grp h3 { margin: 0 0 4px; font-size: 27px; font-weight: 800; color: #fff; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--wh-sans); }
.wh-aisle { font-size: 18px; font-weight: 800; padding: 3px 10px; border-radius: 10px; background: #36c2ff2b; color: #8fdcff; }
.wh-list .wh-row { display: flex !important; align-items: center; gap: 14px; min-height: 58px; padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; grid-template-columns: none !important; }
.wh-list .wh-box { flex: none; width: 34px !important; height: 34px !important; min-width: 0 !important; border-radius: 50% !important; border: 3px solid #8fdcff !important;
  background: transparent !important; opacity: .7; padding: 0 !important; cursor: pointer; }
.wh-list .wh-name { flex: 1; min-width: 0; font-size: 27px; line-height: 1.15; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; cursor: pointer; padding: 6px 0; }
.wh-list .wh-name span { font-size: 19px; opacity: .6; }
.wh-list .wh-edit { flex: none; width: 36px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: #ffffff55; font-size: 22px; cursor: pointer; }
.wh-list .wh-row.buying { opacity: .35; } .wh-list .wh-row.buying .wh-box { background: #8fdcff !important; }
.wh-list .wh-row.pulse { animation: wh-pulse .8s; }
@keyframes wh-pulse { 50% { background: #36c2ff33 !important; } }
.wh-groups.wh-dense .wh-row { min-height: 46px; } .wh-groups.wh-dense .wh-name { font-size: 24px; } .wh-groups.wh-dense .wh-grp h3 { font-size: 23px; }

/* ---- tiles: one row of small squares ---- */
.wh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: none; }
.wh-tile { aspect-ratio: 1 / 1; max-height: 150px; border: 1px solid var(--wh-line); border-radius: 22px; background: var(--wh-card); backdrop-filter: blur(18px);
  color: #fff; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; cursor: pointer; min-width: 0; }
.wh-tile:active { transform: scale(.96); }
.wh-tile .ti { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #ffffff17; }
.wh-tile b { font-size: 22px; line-height: 1; }
.wh-tile > span:not(.ti) { font-size: 15px; opacity: .72; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wh-tile-lights.active .ti { background: var(--wh-warm); color: #4a3200; box-shadow: 0 0 26px #ffc94d66; }
#wh-tile-music.active .ti { background: var(--wh-accent); color: #04131c; }
.wh-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: none; margin-top: -8px; }
.wh-mini button { height: 52px; border-radius: 999px; border: 1px solid var(--wh-line); background: var(--wh-card); backdrop-filter: blur(18px); color: #fff;
  font: inherit; font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }

/* ---- notes ---- */
.wh-notes { flex: 1; display: flex; flex-direction: column; }
.wh-noteform { display: flex; gap: 12px; margin: 0 0 16px; flex: none; }
.wh-noteform input { flex: 1; min-width: 0; height: 64px; font: inherit; font-size: 24px; padding: 0 22px; border-radius: 18px; border: 2px solid #ffffff22;
  outline: none; background: #ffffff14; color: #fff; }
.wh-noteform input::placeholder { color: #ffffff88; }
.wh-noteform input:focus { border-color: var(--wh-warm); }
.wh-noteform button { height: 64px; padding: 0 30px; border: 0; border-radius: 18px; font: inherit; font-size: 24px; font-weight: 800; background: var(--wh-warm); color: #3a2a00; cursor: pointer; }
.wh-stickies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 14px 16px; flex: 1; min-height: 0;
  align-content: start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 6px 14px; margin: 0 -6px;
  scrollbar-width: thin; scrollbar-color: #ffffff44 transparent; }
.wh-stickies.n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wh-stickies .wh-empty { grid-column: 1 / -1; }
.wh-sticky { --tilt: 0deg; --age-tilt: 0deg; --paper: #fff27a; position: relative; margin: 0; min-height: 96px; padding: 18px 14px 10px; border-radius: 2px;
  background: var(--paper); color: #2a2016; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 2px 6px 12px #0007; transform: rotate(calc(var(--tilt) + var(--age-tilt))); }
.wh-sticky:nth-child(4n+1) { --tilt: -1deg; } .wh-sticky:nth-child(4n+2) { --tilt: .8deg; } .wh-sticky:nth-child(4n+3) { --tilt: .3deg; } .wh-sticky:nth-child(4n) { --tilt: -.6deg; }
.wh-sticky.s0 { --paper: #fff27a; } .wh-sticky.s1 { --paper: #ffc98a; } .wh-sticky.s2 { --paper: #b9f0a8; } .wh-sticky.s3 { --paper: #a9d8ff; }
.wh-sticky::after { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 20px; transform: translateX(-50%) rotate(-3deg);
  background: #ffffffa8; box-shadow: 0 1px 2px #0003; }
.wh-sticky .wh-nbody { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.2; display: block; white-space: normal !important; overflow-wrap: anywhere; color: #2a2016; }
.wh-stickies.n9 .wh-sticky .wh-nbody { font-size: 18px; }
.wh-sticky .wh-nmeta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #4a3a26; }
.wh-sticky .wh-nmeta span { flex: 1; min-width: 0; opacity: .85; }
.wh-sticky .wh-ndel { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #0000001a; color: #2a2016; font-size: 22px; line-height: 1; cursor: pointer; }
.wh-sticky .note-stale { color: #8a3b12; font-weight: 800; }
/* Aging: fresh and glossy -> yellowed, creased, dog-eared -> torn and curling by ~2 weeks. */
.wh-sticky.note-age-0 { background-image: linear-gradient(180deg, #ffffff80 0 12px, transparent 34px); box-shadow: 0 0 0 2px #ffffffaa, 2px 8px 18px #0008; }
.wh-sticky.note-age-0::before { content: "new"; position: absolute; top: 6px; right: 8px; font: 800 11px/1 var(--wh-sans); letter-spacing: .06em; text-transform: uppercase;
  background: #2e7d32; color: #fff; padding: 3px 6px; border-radius: 8px; }
.wh-sticky.note-age-1 { background-image: linear-gradient(180deg, #ffffff40 0 12px, transparent 34px); }
.wh-sticky.note-age-2 { --age-tilt: .6deg; filter: sepia(.3) saturate(.85);
  background-image: linear-gradient(225deg, #785a2847 0, #fffadce6 14px, transparent 15px), linear-gradient(160deg, transparent 48%, #7a5a2a1f 50%, transparent 52%); }
.wh-sticky.note-age-3 { --age-tilt: 1.4deg; filter: sepia(.55) saturate(.7) brightness(.95);
  background-image: linear-gradient(225deg, #6e501e59 0, #faf0cdf2 22px, transparent 23px), linear-gradient(160deg, transparent 47%, #7a5a2a33 50%, transparent 53%),
    linear-gradient(70deg, transparent 60%, #7a5a2a26 62%, transparent 64%), repeating-linear-gradient(17deg, #785a280d 0 2px, transparent 2px 9px);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.wh-sticky.note-age-3::after, .wh-sticky.note-age-4::after { top: 0; background: #fff8e070; transform: translateX(-50%) rotate(-7deg); }
.wh-sticky.note-age-4 { --age-tilt: 2.6deg; filter: sepia(.8) saturate(.6) brightness(.9); box-shadow: 5px 12px 18px #000a;
  background-image: radial-gradient(ellipse 40px 26px at 22% 70%, #8c5f2840, transparent 70%), radial-gradient(ellipse 30px 20px at 78% 30%, #8c5f2833, transparent 70%),
    linear-gradient(225deg, #64461966 0, #f5e8c3f2 26px, transparent 27px), linear-gradient(160deg, transparent 46%, #7a5a2a40 50%, transparent 54%),
    linear-gradient(60deg, transparent 58%, #7a5a2a33 61%, transparent 64%), repeating-linear-gradient(-31deg, #6e501e12 0 1px, transparent 1px 10px);
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 22% 0, 31% 3%, 40% 1%, 50% 3%, 58% 0, 67% 2%, 75% 0, calc(100% - 26px) 1%, 100% 26px, 99% 30%, 100% 42%, 98.5% 55%,
    100% 68%, 99% 82%, 100% 96%, 94% 100%, 86% 96%, 78% 100%, 69% 96%, 60% 99%, 51% 95%, 42% 100%, 33% 96%, 24% 99%, 15% 95%, 7% 100%, 0 96%, 1% 85%, 0 72%, 1.5% 58%, 0 44%, 1% 30%, 0 16%); }
.wh-sticky.note-age-3, .wh-sticky.note-age-4 { margin-top: 4px; }

/* ---- screens (Lights, Music, Cameras, History, Ask, Add a phone) ---- */
body.on-wall.wall-screen .wall-head { display: flex; position: relative; z-index: 3; align-items: center; gap: 24px; padding: 22px 30px 0; height: 98px; box-sizing: border-box; }
.wall-home-btn { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 30px 0 22px; border-radius: 999px; border: 0; font: inherit;
  font-size: 28px; font-weight: 800; background: #fff; color: #0e1116; cursor: pointer; }
.wall-head h1 { margin: 0; font-size: 46px; font-weight: 650; color: #fff; font-family: var(--wh-sans); }
.wall-head-clock { margin-left: auto; font-size: 28px; opacity: .75; color: #fff; }
body.on-wall.wall-screen #app { height: calc(100% - 98px) !important; }
body.on-wall.wall-screen #app > .view:not([hidden]) { height: 100%; overflow: auto; padding: 20px 30px 28px !important; margin: 0 !important; box-sizing: border-box; max-width: none !important; }
body.on-wall.wall-screen #ask-view:not([hidden]), body.on-wall.wall-screen #history-view:not([hidden]) { max-width: 1400px !important; margin: 0 auto !important; height: auto; max-height: 100%; }
.wh-screen-empty { max-width: 900px; margin: 80px auto; text-align: center; padding: 48px; border-radius: 26px; background: #ffffff0e; border: 1px solid var(--wh-line); color: #fff; }
.wh-screen-empty b { display: block; font-size: 40px; margin-bottom: 14px; } .wh-screen-empty span { font-size: 24px; opacity: .75; line-height: 1.4; }
.wh-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 22px; }
.wh-spk { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto auto auto; gap: 18px 24px; padding: 24px; border-radius: 26px; background: #ffffff0e; border: 1px solid var(--wh-line); color: #fff; }
.wh-spk.playing { background: #36c2ff1a; border-color: #36c2ff55; }
.wh-spk-art { width: 150px; height: 150px; border-radius: 20px; background: #ffffff14 center / cover; display: grid; place-items: center; grid-row: span 2; }
.wh-spk-meta h2 { margin: 0; font-size: 34px; color: #fff; } .wh-spk-model { display: block; font-size: 18px; opacity: .6; margin-bottom: 10px; }
.wh-spk-meta b { display: block; font-size: 26px; } .wh-spk-meta > span:last-child { font-size: 20px; opacity: .7; }
.wh-spk-ctl { display: flex; gap: 14px; align-items: center; }
.wh-spk-ctl button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: #ffffff1c; color: #fff; display: grid; place-items: center; cursor: pointer; }
.wh-spk-ctl button.big { width: 88px; height: 88px; background: #fff; color: #0e1116; }
.wh-spk-ctl button:disabled { opacity: .3; cursor: default; }
.wh-vol { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 70px; align-items: center; gap: 18px; font-size: 20px; }
.wh-vol input { width: 100%; height: 48px; accent-color: var(--wh-accent); }
.wh-vol output { text-align: right; font-weight: 700; }

/* Lights screen: existing Hue controls, restyled dark. */
body.on-wall #lights-view { background: transparent !important; }
body.on-wall #lights-view .room-card { background: #ffffff0e !important; border: 1px solid var(--wh-line) !important; border-radius: 26px !important; color: #fff !important; box-shadow: none !important; transform: none !important; }
body.on-wall #lights-view .room-card .cello { display: none !important; }
body.on-wall #lights-view .room-head h2, body.on-wall #lights-view .bulb-name, body.on-wall #lights-view .room-all,
body.on-wall #lights-view .hue-label, body.on-wall #lights-view output, body.on-wall #lights-view .hint, body.on-wall #lights-view .lights-msg { color: #fff !important; font-family: var(--wh-sans) !important; }
body.on-wall #lights-view .bulb { background: #ffffff0b !important; border: 1px solid var(--wh-line) !important; border-radius: 20px !important; box-shadow: none !important; color: #fff !important; }
body.on-wall #lights-view .bulb.is-on { background: #ffc94d1c !important; border-color: #ffc94d44 !important; }
body.on-wall #lights-view .bulb.unreachable, body.on-wall #lights-view .room-card:has(.hue-switch[data-room-on][disabled]) { opacity: .45; filter: grayscale(1); }
body.on-wall #lights-view .bulb-badge { background: #ffffff1c !important; color: #fff !important; }
body.on-wall #lights-view .hue-switch { background: #ffffff2b !important; border: 0 !important; }
body.on-wall #lights-view .hue-switch.on { background: var(--wh-accent) !important; }
body.on-wall #lights-view .hue-switch span { background: #fff !important; }
body.on-wall #lights-view .hue-mode { background: #ffffff1c !important; border: 0 !important; }
body.on-wall #lights-view .hue-mode button { color: #fff !important; background: transparent !important; }
body.on-wall #lights-view .hue-mode button.on { background: #fff !important; color: #0e1116 !important; }
body.on-wall #lights-view input[type=range] { accent-color: var(--wh-warm); }
body.on-wall.wall-screen #pair-view .pair-card { margin: 0 auto; }

/* Today hour by hour */
.wh-hourly { color: #fff; }
.wh-hr-chart { height: 340px; } .wh-hr-chart svg { width: 100%; height: 100%; overflow: visible; }
.wh-hr-chart text { fill: #fff; font: 700 26px var(--wh-sans); }
.wh-hr-cols { display: grid; gap: 0; margin-top: 10px; }
.wh-hr-cols > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; border-radius: 18px; font-size: 18px; }
.wh-hr-cols > div.now { background: #ffffff14; }
.wh-hr-cols b { font-size: 22px; } .wh-hr-cols span { opacity: .8; }
.wh-hourly .rain { color: #8fdcff; font-weight: 700; opacity: 1; }
.wh-hr-key { margin-top: 18px; font-size: 18px; opacity: .7; text-align: center; }

/* ================= Cork theme (owner prefers the cork board) =================
   Home: cork texture, cards are pinned paper, notes are real sticky notes.
   In-page screens (Lights, Music, Cameras, Hourly) keep the dark panel. */
body.on-wall { background-color: #c4a06a !important; background-image: url("/img/cork.jpg") !important; background-size: 960px !important; color: #241c14; }
body.on-wall .wall-bg { background: transparent; pointer-events: none; }
body.on-wall .wall-bg i, body.on-wall .wall-bg::after { display: none; }
body.on-wall.wall-screen .wall-bg { background: #11151bf2; }
body.on-wall.wall-screen .wall-bg::after { display: none; }

body.on-wall:not(.wall-screen) .wh-card { background: #fffdf6; color: #241c14; border: 0; border-radius: 3px; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 4px 10px 20px rgba(40, 24, 10, .38); overflow: visible; }
body.on-wall:not(.wall-screen) .wh-card::before { content: ""; position: absolute; top: -8px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #c62828 60%, #7f1515); box-shadow: 1px 3px 4px #0006; z-index: 2; }
body.on-wall:not(.wall-screen) .wh-card h2 { color: #241c14; font-family: "Fraunces", Georgia, serif; }
body.on-wall:not(.wall-screen) .wh-count { background: #241c14; color: #fffdf6; }
body.on-wall:not(.wall-screen) .wh-sub, body.on-wall:not(.wall-screen) .wh-muted, body.on-wall:not(.wall-screen) .wh-empty { color: #5a4a36; opacity: 1; }
body.on-wall:not(.wall-screen) .wh-cal { transform: rotate(-.4deg); }
body.on-wall:not(.wall-screen) .wh-list { transform: rotate(.25deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 57px, #c9dbe9 57px 58px); background-position: 0 236px; }

/* clock on a paper slip */
body.on-wall:not(.wall-screen) .wh-clock { background: #fffdf6; border-radius: 3px; padding: 18px 24px 20px; box-shadow: 4px 10px 20px rgba(40, 24, 10, .38);
  text-shadow: none; color: #241c14; transform: rotate(-.6deg); position: relative; }
body.on-wall:not(.wall-screen) .wh-clock::before { content: ""; position: absolute; top: -8px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fc3ff, #1f5fbf 60%, #123a78); box-shadow: 1px 3px 4px #0006; }
body.on-wall:not(.wall-screen) .wh-time { font-size: 128px; }
body.on-wall:not(.wall-screen) .wh-date { color: #241c14; font-size: 30px; }
body.on-wall:not(.wall-screen) .wh-date i { background: #241c14; color: #fffdf6; }
body.on-wall:not(.wall-screen) .wh-wx { margin-top: 12px; }
body.on-wall:not(.wall-screen) .wh-wx b { font-size: 56px; }
body.on-wall:not(.wall-screen) .wh-stale { color: #a3501a; }
body.on-wall:not(.wall-screen) .wh-fc div { background: #f3ecdc; backdrop-filter: none; }
body.on-wall:not(.wall-screen) .wh-fc { margin-top: 14px; }

/* list */
body.on-wall:not(.wall-screen) .wh-pill { background: #f1e9d8; color: #241c14; }
body.on-wall:not(.wall-screen) .wh-addform input { background: #fff; color: #241c14; border: 2px solid #d9ccb4; }
body.on-wall:not(.wall-screen) .wh-addform input::placeholder { color: #8a7a62; }
body.on-wall:not(.wall-screen) .wh-addform input:focus { border-color: #1f6fb8; }
body.on-wall:not(.wall-screen) .wh-addform button { background: #1f6fb8; color: #fff; }
body.on-wall:not(.wall-screen) .wh-chips button { background: #f1e9d8; color: #3a2e20; }
body.on-wall:not(.wall-screen) .wh-chips { mask-image: linear-gradient(90deg, #000 90%, transparent); }
body.on-wall:not(.wall-screen) .wh-grp h3 { color: #241c14; font-family: "Fraunces", Georgia, serif; }
body.on-wall:not(.wall-screen) .wh-aisle { background: #1f6fb81f; color: #1b5d9b; }
body.on-wall:not(.wall-screen) .wh-list .wh-name { color: #241c14; }
body.on-wall:not(.wall-screen) .wh-list .wh-box { border-color: #6d5c45 !important; opacity: 1; }
body.on-wall:not(.wall-screen) .wh-list .wh-row.buying .wh-box { background: #6d5c45 !important; }
body.on-wall:not(.wall-screen) .wh-list .wh-edit { color: #8a7a62; }
body.on-wall:not(.wall-screen) .wh-cal .when span, body.on-wall:not(.wall-screen) .wh-cal .what span { color: #5a4a36; opacity: 1; }

/* square buttons, like index cards */
body.on-wall:not(.wall-screen) .wh-tile { background: #fffdf6; color: #241c14; border: 0; border-radius: 4px; backdrop-filter: none; box-shadow: 3px 8px 14px rgba(40, 24, 10, .35); }
body.on-wall:not(.wall-screen) .wh-tile:nth-child(1) { transform: rotate(-1deg); } body.on-wall:not(.wall-screen) .wh-tile:nth-child(3) { transform: rotate(.8deg); }
body.on-wall:not(.wall-screen) .wh-tile .ti { background: #f1e9d8; }
body.on-wall:not(.wall-screen) .wh-tile > span:not(.ti) { color: #5a4a36; opacity: 1; }
body.on-wall:not(.wall-screen) .wh-mini button { background: #fffdf6; color: #241c14; border: 0; backdrop-filter: none; box-shadow: 2px 6px 12px rgba(40, 24, 10, .3); }

/* Notes: no card, stickies straight on the cork */
body.on-wall:not(.wall-screen) .wh-notes { background: transparent; box-shadow: none; padding: 0; }
body.on-wall:not(.wall-screen) .wh-notes::before { display: none; }
body.on-wall:not(.wall-screen) .wh-notes > header { background: #fffdf6; align-self: flex-start; padding: 8px 18px; border-radius: 3px; box-shadow: 2px 6px 12px rgba(40, 24, 10, .3); transform: rotate(-1deg); margin-bottom: 10px; }
body.on-wall:not(.wall-screen) .wh-notes h2 { font-size: 30px; }
body.on-wall:not(.wall-screen) .wh-noteform input { background: #fffdf6; color: #241c14; border: 2px solid #d9ccb4; box-shadow: 2px 6px 12px rgba(40, 24, 10, .25); }
body.on-wall:not(.wall-screen) .wh-noteform input::placeholder { color: #8a7a62; }
body.on-wall:not(.wall-screen) .wh-noteform button { background: #241c14; color: #fff56e; }
body.on-wall:not(.wall-screen) .wh-stickies { scrollbar-color: #0005 transparent; padding-top: 14px; }
body.on-wall .wh-sticky { --paper: #fff56e; box-shadow: 3px 7px 12px rgba(40, 24, 10, .34); filter: none; }
body.on-wall .wh-sticky.s1 { --paper: #ffd08a; } body.on-wall .wh-sticky.s2 { --paper: #c6f0a2; } body.on-wall .wh-sticky.s3 { --paper: #ffc2d6; }
body.on-wall .wh-sticky .wh-nbody { font-family: "Caveat", "Patrick Hand", "Comic Neue", var(--wh-sans); }
/* original aging: fresh glossy -> yellowed -> creased, dog-eared -> torn, curling, wiggling by ~2 weeks */
body.on-wall .wh-sticky.note-age-0 { background: var(--paper); background-image: linear-gradient(115deg, #fff0 30%, #ffffff8c 45%, #fff0 60%), linear-gradient(180deg, #ffffffb3 0 14px, var(--paper) 38px);
  background-size: 250% 100%, 100% 100%; animation: note-glint 6s ease-in-out 1s 3; box-shadow: 3px 7px 12px rgba(40, 24, 10, .34); }
body.on-wall .wh-sticky.note-age-1 { background: var(--paper); background-image: linear-gradient(180deg, #ffffff73 0 14px, var(--paper) 38px); }
body.on-wall .wh-sticky.note-age-2 { --age-tilt: .5deg; background: #f3e39a; filter: none;
  background-image: linear-gradient(225deg, rgba(120,90,40,.28) 0, rgba(255,250,220,.9) 14px, transparent 15px), linear-gradient(180deg, #ffffff40 0 14px, #f3e39a 38px);
  box-shadow: 3px 8px 14px rgba(40,24,10,.36); }
body.on-wall .wh-sticky.note-age-3 { --age-tilt: 1.2deg; background: #e8d79a; filter: none;
  background-image: linear-gradient(225deg, rgba(110,80,30,.35) 0, rgba(250,240,205,.95) 22px, transparent 23px), linear-gradient(160deg, transparent 47%, #7a5a2a2e 50%, transparent 53%),
    repeating-linear-gradient(17deg, rgba(120,90,40,.05) 0 2px, transparent 2px 9px), repeating-linear-gradient(-31deg, rgba(120,90,40,.04) 0 1px, transparent 1px 12px), linear-gradient(180deg, #ecdca2, #e2cf8e);
  box-shadow: 4px 10px 16px rgba(40,24,10,.4); }
body.on-wall .wh-sticky.note-age-4 { --age-tilt: 2.4deg; background: #dcc888; filter: none;
  background-image: radial-gradient(ellipse 40px 26px at 22% 70%, rgba(140,95,40,.22), transparent 70%), radial-gradient(ellipse 30px 20px at 78% 30%, rgba(140,95,40,.18), transparent 70%),
    linear-gradient(225deg, rgba(100,70,25,.4) 0, rgba(245,232,195,.95) 26px, transparent 27px), linear-gradient(160deg, transparent 46%, #7a5a2a38 50%, transparent 54%),
    repeating-linear-gradient(17deg, rgba(110,80,30,.08) 0 2px, transparent 2px 8px), repeating-linear-gradient(-31deg, rgba(110,80,30,.07) 0 1px, transparent 1px 10px), linear-gradient(180deg, #e0cd90, #cfb877);
  box-shadow: 5px 12px 18px rgba(40,24,10,.45); transform-origin: 50% 0; animation: note-stale-wiggle 30s ease-in-out infinite; }
body.on-wall .wh-sticky.note-age-0::before { top: auto; bottom: 8px; right: 50px; }
.wh-echo { grid-template-rows: auto; } .wh-echo .wh-spk-art { grid-row: auto; }
.wh-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #ff6b6b; margin-right: 10px; vertical-align: 1px; }
.wh-dot.on { background: #5bd17a; }

/* Temporary flight tile: a pinned card that floats over the board while a flight is active. */
.wh-grid { position: relative; }
.wh-flights { position: absolute; z-index: 30; top: 40px; left: 22px; display: flex; flex-direction: column; gap: 18px; pointer-events: none; }
.wh-flight { position: relative; width: 560px; padding: 26px 26px 14px; background: #fffdf6; color: #2a2016; border-radius: 4px;
  transform: rotate(-.8deg); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3); font-family: inherit; }
.wh-flight::before { content: ""; position: absolute; top: -10px; left: 50%; width: 26px; height: 26px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, #c62828 60%, #7a1010); box-shadow: 0 3px 5px rgba(0,0,0,.45); }
.wh-flight header { display: flex; align-items: baseline; gap: 10px; font-size: 22px; }
.wh-flight header .pl { font-size: 26px; }
.wh-flight header .id { font-weight: 700; color: #6b5a44; }
.wh-flight header em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 17px; padding: 4px 12px; border-radius: 99px; background: #e8e1d2; }
.wh-flight.st-airborne header em, .wh-flight.st-taxiing header em { background: #1e6fd9; color: #fff; }
.wh-flight.st-landed header em { background: #2e8b3d; color: #fff; }
.wh-flight.st-cancelled header em, .wh-flight.st-diverted header em { background: #c62828; color: #fff; }
.wh-flight .route { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 14px; margin-top: 14px; }
.wh-flight .route > div:not(.bar) { display: flex; flex-direction: column; font-size: 14px; color: #5a4a36; }
.wh-flight .route .to { text-align: right; }
.wh-flight .route strong { font-size: 38px; line-height: 1; color: #2a2016; }
.wh-flight .bar { position: relative; height: 8px; border-radius: 4px; background: #e2d9c6; }
.wh-flight .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: #1e6fd9; }
.wh-flight .bar .plane { position: absolute; top: 50%; transform: translate(-50%, -54%); font-size: 26px; color: #1e6fd9; }
.wh-flight .sub { margin: 14px 0 0; font-size: 24px; font-weight: 750; }
.wh-flight .src { margin: 6px 0 0; font-size: 12px; color: #8a7a64; }

/* Tap-through: the card itself takes taps; tapping it slides it away for 5 s. */
.wh-flight { pointer-events: auto; cursor: pointer; transition: opacity .35s ease, transform .35s ease; }
.wh-flight.peek { opacity: 0; transform: translateX(-110%) rotate(-.8deg); pointer-events: none; }

/* Cameras screen (Blink) */
.wh-cams-head { display: flex; gap: 28px; align-items: center; color: #fff; font-size: 22px; margin: 6px 4px 18px; opacity: .9; }
.wh-cams-head .wh-cams-upd { margin-left: auto; opacity: .7; }
.wh-cams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.wh-cam { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; padding: 18px; border-radius: 26px; background: #ffffff0e; border: 1px solid var(--wh-line); color: #fff; }
.wh-cam-img { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #0006; display: grid; place-items: center; }
.wh-cam-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-cam-img em { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: 16px; padding: 3px 9px; border-radius: 10px; background: #000a; }
.wh-cam-img > span { opacity: .6; font-size: 20px; }
.wh-cam-meta { display: flex; flex-direction: column; gap: 8px; font-size: 21px; }
.wh-cam-meta h2 { margin: 0 0 4px; font-size: 30px; }
.wh-batt.low { color: #ffb4a8; font-weight: 700; }
.wh-cam-meta button { margin-top: auto; align-self: flex-start; font: inherit; font-size: 19px; padding: 10px 18px; border-radius: 14px; border: 1px solid var(--wh-line); background: #ffffff1a; color: #fff; }
.wh-cam-meta button:disabled { opacity: .6; }

/* Cameras tile: compact battery rows */
.wh-tile.has-cams .ti { display: none; }
.wh-tile.has-cams { gap: 4px; padding-top: 10px; padding-bottom: 10px; }
.wh-tile.has-cams b { font-size: 17px; }
.wh-tile.has-cams > #wh-cams-st { display: flex; flex-direction: column; gap: 3px; width: 86%; opacity: 1; white-space: normal; overflow: visible; }
.wh-cr { display: flex; align-items: center; justify-content: space-between; font-size: 14px; line-height: 1.15; }
.wh-cr em { font-style: normal; font-weight: 600; }
.wh-cr s { text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #c0392b; padding: 1px 6px; border-radius: 6px; }
.wh-bat { display: inline-flex; gap: 2px; padding: 2px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; margin-right: 3px; vertical-align: middle; }
.wh-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px; background: currentColor; border-radius: 0 1px 1px 0; }
.wh-bat u { width: 6px; height: 8px; border-radius: 1px; background: transparent; }
.wh-bat u.f { background: #2e9d52; }
.wh-bat.low u.f { background: #d0453a; }
/* Cameras screen: offline + live */
.wh-cam.off { opacity: .6; }
.wh-cam[data-golive] { cursor: pointer; }
.wh-cam-play { position: absolute; left: 8px; top: 8px; font-size: 17px; font-weight: 700; padding: 4px 10px; border-radius: 10px; background: #c0392bdd; }
.wh-cam-why { font-size: 17px; color: #ffb4a8; }
.wh-live { display: flex; flex-direction: column; gap: 14px; height: 100%; color: #fff; }
.wh-live-bar { display: flex; align-items: center; gap: 24px; }
.wh-live-bar h2 { margin: 0; font-size: 32px; } .wh-live-bar span { font-size: 22px; opacity: .85; }
.wh-live-bar button { margin-left: auto; font: inherit; font-size: 24px; font-weight: 700; padding: 12px 34px; border-radius: 16px; border: 0; background: #c0392b; color: #fff; }
.wh-live-video { flex: 1; min-height: 420px; border-radius: 20px; overflow: hidden; background: #000; display: grid; place-items: center; }
.wh-live-video img { width: 100%; height: 100%; object-fit: contain; }
.wh-live-video span { font-size: 24px; opacity: .7; }

.wh-live-wait { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wh-spin { width: 56px; height: 56px; border-radius: 50%; border: 6px solid #ffffff33; border-top-color: #fff; animation: wh-spin 1s linear infinite; }
@keyframes wh-spin { to { transform: rotate(360deg); } }

/* music picker */
.wh-spk-ctl .wh-pick-btn { width: auto; border-radius: 36px; padding: 0 22px; font: 600 20px/1 inherit; }
.wh-picker { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.wh-stns { display: flex; flex-wrap: wrap; gap: 10px; }
.wh-stn { border: 0; border-radius: 14px; padding: 12px 16px; background: #ffffff22; color: #fff; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; max-width: 300px; }
.wh-stn b { font-size: 19px; } .wh-stn span { font-size: 14px; opacity: .75; }
.wh-rsearch { display: flex; gap: 10px; }
.wh-rsearch input { flex: 1; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 0; }
.wh-rsearch button { font-size: 19px; padding: 0 20px; border-radius: 12px; border: 0; background: #ffffff33; color: #fff; }
.wh-pick-msg { font-size: 18px; opacity: .85; }
.wh-srcs { display: flex; gap: 8px; }
.wh-src { border: 0; border-radius: 22px; padding: 10px 20px; font-size: 19px; background: #ffffff1a; color: #fff; }
.wh-src.on { background: #36c2ff; color: #002; font-weight: 700; }
.wh-spc { text-decoration: none; background: #1db954; }
.wh-stn[disabled] { opacity: .45; }
.wh-spk { grid-template-columns: 150px minmax(0, 1fr); }
.wh-spk-ctl { flex-wrap: wrap; }
.wh-spk-ctl .wh-pick-btn { height: 56px; white-space: nowrap; font-size: 18px; }
.wh-spk > .wh-picker, .wh-spk > .wh-vol { grid-column: 1 / -1; min-width: 0; }