/* Tool pages: stats, music, timers, focus, money, converter, weather, AI, vault, and more. */

.page { display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 12px; }
body.mode-app .page { max-width: 1000px; }
.page > h3 { margin: 0; font-size: var(--t-title); font-weight: 700; }
.sub { color: var(--muted); font-size: var(--t-card); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* forms */
.input, .select { height: 34px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 12px; outline: 0; font-size: var(--t-body); min-width: 0; color: var(--text); }
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus { box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5); }
.select { padding-right: 6px; }
.select option { background: #1c1c1e; color: #f5f5f7; }
textarea.input { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.input[type="password"], .input[type="text"], .input[type="url"], .input[type="number"], .input[type="search"] { user-select: text; -webkit-user-select: text; }
.btn { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--fill-hover); font-size: var(--t-body); font-weight: 500; white-space: nowrap; transition: filter 0.15s ease, transform 0.12s ease; }
.btn:hover { filter: brightness(1.2); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.danger { background: rgba(255, 69, 58, 0.18); color: var(--danger); }
.btn.small { height: 28px; padding: 0 10px; font-size: var(--t-card); border-radius: 8px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--fill); gap: 2px; }
.seg button { border: 0; border-radius: 8px; background: transparent; padding: 5px 12px; font-size: var(--t-card); color: var(--muted); white-space: nowrap; }
.seg button.on { background: #fff; color: #000; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
body.mode-main .tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tile { background: var(--fill); border-radius: 14px; padding: 12px 13px; min-width: 0; position: relative; }
.tile h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tile .val { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.tile .val small { font-size: var(--t-card); font-weight: 500; color: var(--muted); margin-left: 3px; }
.tile.wide { grid-column: span 2; }
.tile.click:hover { background: var(--fill-hover); }

/* ring gauge */
.gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring { --p: 0; --c: var(--accent); position: relative; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); transition: background 0.4s ease; }
.gauge .num { position: absolute; top: 0; left: 0; width: 74px; height: 74px; display: grid; place-items: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge .cap { font-size: var(--t-small); color: var(--muted); }
.gauge .holder { position: relative; width: 74px; height: 74px; }
.spark { width: 100%; height: 34px; display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.spark polyline.b { stroke: var(--blue); }

/* list rows */
.lrows { display: flex; flex-direction: column; gap: 6px; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--fill); min-width: 0; animation: pop 0.25s var(--ease) both; }
.lrow:hover { background: var(--fill-hover); }
.lrow .main { flex: 1; min-width: 0; }
.lrow .t { font-size: var(--t-body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .s { font-size: var(--t-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .acts { display: flex; gap: 6px; flex: none; }
.lrow .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.amt.in { color: var(--ok); }
.amt.out { color: var(--danger); }

.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; }
.usage-row { display: grid; grid-template-columns: 140px 1fr 64px; align-items: center; gap: 12px; font-size: var(--t-card); }
.usage-row .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-row .d { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* timers */
.card.timer { padding: 10px 11px; justify-content: space-between; }
.card.timer .t-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.card.timer .t-name { font-size: var(--t-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.timer .t-kind { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: var(--fill-hover); color: var(--muted); flex: none; }
.card.timer .t-time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.6px; line-height: 1; }
body.mode-main .card.timer .t-time { font-size: 21px; }
.card.timer.running .t-time { color: var(--accent); }
.card.timer.over { box-shadow: 0 0 0 2px var(--accent) inset; animation: ring 0.6s ease 5; }
.card.timer.over .t-time { color: var(--accent); }
@keyframes ring { 50% { background: rgba(255, 154, 74, 0.2); } }
.t-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.t-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.3s linear; }
.t-btns { display: flex; gap: 5px; }
.t-btn { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--fill-hover); display: grid; place-items: center; padding: 0; color: var(--text); }
.t-btn:hover { background: rgba(255, 255, 255, 0.22); }
.t-btn.on { background: #fff; color: #000; }
.t-btn.go { background: var(--ok); color: #000; }
.t-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-btn.go svg, .t-btn.on svg { fill: currentColor; }

/* focus (pomodoro) */
.pomo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pomo .ring { width: 150px; height: 150px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); }
.pomo .holder { position: relative; width: 150px; height: 150px; flex: none; }
.pomo .center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.pomo .center b { display: block; font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -0.8px; }
.pomo .center span { font-size: var(--t-small); color: var(--muted); }
body.mode-main .pomo .ring, body.mode-main .pomo .holder { width: 104px; height: 104px; }
body.mode-main .pomo .center b { font-size: 22px; }
body.mode-main .pomo { gap: 16px; flex-wrap: nowrap; }
body.mode-main .pomo .side { gap: 8px; align-items: flex-start; }
.pomo .side { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.dots i.on { background: var(--accent); }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-small); color: var(--muted); }
.field .input, .field .select { width: 100%; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: var(--t-card); }
.check-row input { accent-color: var(--accent); width: 15px; height: 15px; }

/* music */
/* a centred player: the art on top, then the song, progress and buttons */
.music { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; width: 100%; text-align: center; }
.music .m-info { width: 100%; max-width: 380px; align-items: stretch; }
.music .m-info .row { justify-content: center; }
.music .m-info .grow { min-width: 0; }
.music .m-btns { justify-content: center; }
.art { width: 150px; height: 150px; flex: none; border-radius: 16px; background: var(--fill); object-fit: cover; display: grid; place-items: center; font-size: 40px; color: var(--muted); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
body.mode-main .art { width: 118px; height: 118px; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.m-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.m-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mode-main .m-title { font-size: 15px; }
.m-artist { color: var(--muted); font-size: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: var(--accent); }
.m-times { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.m-btns { display: flex; align-items: center; gap: 8px; }
.m-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fill-hover); display: grid; place-items: center; padding: 0; }
.m-btn.big { width: 44px; height: 44px; background: #fff; color: #000; }
.m-btn:hover { filter: brightness(1.15); }
.m-btn svg { width: 15px; height: 15px; fill: currentColor; }
.m-btn.vol svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-left: auto; }
.eq i { width: 4px; border-radius: 2px; background: var(--accent); height: 20%; }
.eq.on i { animation: eq 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -0.2s; } .eq i:nth-child(3) { animation-delay: -0.5s; } .eq i:nth-child(4) { animation-delay: -0.1s; }
.eq i:nth-child(5) { animation-delay: -0.7s; } .eq i:nth-child(6) { animation-delay: -0.35s; } .eq i:nth-child(7) { animation-delay: -0.6s; }
@keyframes eq { from { height: 14%; } to { height: 100%; } }

/* AI chat */
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.bubble { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: var(--t-body); line-height: 1.45; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; animation: pop 0.2s var(--ease) both; }
.bubble.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bubble.bot { align-self: flex-start; background: var(--fill); border-bottom-left-radius: 4px; }
.bubble.err { background: rgba(255, 69, 58, 0.16); color: #ff8a82; }
.bubble.wait { color: var(--muted); }

/* weather */
.wx-now { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wx-icon { font-size: 54px; line-height: 1; }
.wx-temp { font-size: 46px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.wx-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.wx-day { background: var(--fill); border-radius: 12px; padding: 10px; text-align: center; font-size: var(--t-card); }
.wx-day .e { font-size: 24px; display: block; margin: 4px 0; }

/* swatches and anchors (settings) */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-btn { width: 96px; border: 2px solid transparent; border-radius: 14px; background: var(--fill); padding: 6px; text-align: center; font-size: var(--t-small); }
.swatch-btn i { display: block; height: 34px; border-radius: 9px; margin-bottom: 6px; }
.swatch-btn.on { border-color: var(--blue); }
/* Thirty small themes, ten to a row, with no names shown. */
.swatches.ten { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.swatch-btn.mini { display: block; width: 100%; padding: 3px; border-radius: 9px; }
.swatch-btn.mini i { display: block; width: 100%; height: 20px; margin: 0; border-radius: 6px; }
.d-where { cursor: pointer; word-break: break-all; opacity: 0.75; font-size: 12px; }
.anchor-grid { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 30px); gap: 5px; flex: none; }
.anchor-grid button { border: 0; border-radius: 8px; background: var(--fill-hover); color: var(--muted); font-size: 14px; padding: 0; }
.anchor-grid button:hover { color: var(--text); }
.anchor-grid button.on { background: var(--accent); color: var(--on-accent); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--fill); }
.setting .l b { display: block; font-size: var(--t-body); font-weight: 600; }
.setting .l span { font-size: var(--t-small); color: var(--muted); }
.switch { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.18); padding: 0; flex: none; transition: background 0.2s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

.notice { padding: 10px 12px; border-radius: 12px; background: rgba(10, 132, 255, 0.12); color: #7db8ff; font-size: var(--t-card); line-height: 1.45; }
.notice.warn { background: rgba(255, 159, 10, 0.12); color: #ffb54a; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 0; border-radius: 999px; padding: 5px 11px; background: var(--fill); font-size: var(--t-card); }
.chip:hover { background: var(--fill-hover); }
.chip.on { background: #fff; color: #000; }

/* image editor */
.ed-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-stage { background: repeating-conic-gradient(#1c1c1e 0% 25%, #232326 0% 50%) 0 0 / 18px 18px; border-radius: 14px; padding: 10px; display: grid; place-items: center; overflow: auto; max-height: calc(100vh - 190px); }
.ed-stage canvas { max-width: 100%; height: auto; display: block; cursor: crosshair; touch-action: none; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.ed-color { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--fill); padding: 3px; }

/* ---- overlay window: break time, blocked site, eyedropper ---- */
body.mode-overlay .shell { display: none; }
body.mode-overlay { background: transparent; }
.ov { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; text-align: center; padding: 30px; user-select: none; }
.ov.break { background: rgba(0, 0, 0, 0.95); }
.ov-card { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: fade 0.4s ease both; }
.ov-card .big { font-size: 78px; font-weight: 700; letter-spacing: -2px; font-variant-numeric: tabular-nums; line-height: 1; }
.ov-card h1 { margin: 0; font-size: 30px; letter-spacing: -0.6px; }
.ov-card p { margin: 0; font-size: 17px; color: #c7c7cc; line-height: 1.5; }
.ov-card .face { width: 64px; height: 64px; border-radius: 20px; }
.ov-card .face i { width: 8px; height: 14px; }
.ov-btns { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.ov-btns .btn { height: 42px; padding: 0 22px; font-size: 14px; }


/* header and layout details */
body.mode-app .page-title { flex: none; margin-right: 12px; }
body.mode-app .search { max-width: 380px; background: var(--fill); border-radius: 10px; padding: 0 12px; }
body.mode-main .tiles.one-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; padding-bottom: 6px; }
.lrow.click { cursor: default; }
.lrow .fav { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
body.mode-main .page { padding-bottom: 4px; }

/* ---- warning bar ---- */
.lrow.first { box-shadow: 0 0 0 1.5px var(--accent) inset; }

/* ---- mic, sounds, voice, project ---- */
.mic-big { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-radius: 16px; background: rgba(52, 199, 89, 0.16); color: var(--ok); text-align: left; transition: background 0.2s ease, color 0.2s ease; }
.mic-big.muted { background: rgba(255, 69, 58, 0.16); color: var(--danger); }
.mic-big svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mic-big b { display: block; font-size: 16px; }
.mic-big i { font-style: normal; font-size: var(--t-small); opacity: 0.8; }
.slider { flex: 1; min-width: 90px; accent-color: var(--accent); }
.card.sound { height: auto; min-height: 112px; align-items: flex-start; gap: 6px; }
.sound-play { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 14px; padding: 0; }
.sound-play:hover { filter: brightness(1.1); }
.rec-time, .proj-time { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.btn.key { min-width: 120px; font-variant-numeric: tabular-nums; }
.btn.bad { box-shadow: 0 0 0 1.5px var(--danger) inset; }

/* ---- palettes, calculator, text, QR ---- */
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pal-swatch { position: relative; width: 84px; height: 64px; border-radius: 12px; display: flex; align-items: flex-end; padding: 6px 7px; font-size: 11px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pal-swatch button { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 10px; padding: 0; display: none; }
.pal-swatch:hover button { display: block; }
.color-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); font-variant-numeric: tabular-nums; }
.calc-in { font-size: 18px; height: 44px; }
.calc-out { font-size: 26px; font-weight: 700; text-align: right; min-height: 34px; font-variant-numeric: tabular-nums; }
.calc-out.bad { color: var(--muted); }
.keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 380px; }
.keypad button { height: 34px; border: 0; border-radius: 10px; background: var(--fill-hover); font-size: 15px; }
.keypad button:hover { filter: brightness(1.2); }
.keypad button.op { background: var(--fill); color: var(--accent); }
.keypad button.eq { grid-column: span 4; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.tr-out { padding: 12px; border-radius: 12px; background: var(--fill); min-height: 60px; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
.qr-stage { display: grid; place-items: center; padding: 12px; border-radius: 14px; background: var(--fill); min-height: 120px; }
.qr-stage canvas { width: 210px; height: 210px; image-rendering: pixelated; border-radius: 8px; }

/* ---- temp cleaning ---- */
.sweep-track { position: relative; height: 90px; border-radius: 16px; background: var(--fill); overflow: hidden; }
.dust i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #8e8e93; opacity: 0.9; }
.broom { position: absolute; left: -64px; top: 50%; transform: translateY(-50%) scaleX(-1); font-size: 40px; }
.sweep-track.sweeping .broom { animation: sweep 1.6s ease-in-out both; }
.sweep-track.sweeping .dust i { animation: swept 0.5s ease-in both; }
.sweep-track.done .dust i { opacity: 0; }
@keyframes sweep { from { left: -64px; } to { left: 100%; } }
@keyframes swept { 0% { opacity: 0.9; transform: none; } 100% { opacity: 0; transform: translateX(110px) scale(0.2); } }
.btn.big { height: 44px; padding: 0 26px; font-size: 15px; }
.clean-total { font-size: 34px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; min-height: 42px; }

/* ---- overlay: the ruler ---- */
.ov.ruler { background: rgba(0, 0, 0, 0.14); display: block; padding: 0; cursor: crosshair; }
.ov.ruler svg { position: absolute; inset: 0; }
.ov.ruler .guide { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; stroke-dasharray: 4 4; }
.ov.ruler .measure { stroke: var(--accent); stroke-width: 2; }
.ov.ruler .pt { fill: var(--accent); stroke: #000; stroke-width: 1; }
.ruler-label { position: absolute; padding: 5px 10px; border-radius: 8px; background: rgba(28, 28, 30, 0.96); font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.ov-hint { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(28, 28, 30, 0.95); font-size: 12px; pointer-events: none; }

/* ================= v0.4: pages that fit the dock, new pages and new looks ================= */

/* a page that fills the dock without scrolling; the dashboard window just lets it grow */
.page.fit { gap: 8px; }
body.mode-main .page.fit { height: 100%; min-height: 0; padding-bottom: 0; }
.lrows.scroll { overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px; }
body.mode-app .lrows.scroll, body.mode-popup .lrows.scroll { overflow: visible; flex: none; }
.lrow.slim { padding: 6px 10px; gap: 10px; border-radius: 10px; animation: none; }
.lrow.slim .t { font-size: 12.5px; }
.chip-row.one-line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.chip-row.one-line .chip { flex: none; white-space: nowrap; }
.chip-row.one-line::-webkit-scrollbar { display: none; }
.chip-row.one-line.grow { flex: 1; }
.tpage { gap: 8px; }

/* gauges can be any size: --d is the ring's size */
.ring, .gauge .num, .gauge .holder { width: var(--d, 74px); height: var(--d, 74px); }

/* ---- Stats: two lines of three ---- */
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 0; }
body.mode-app .stats-grid { grid-template-rows: repeat(2, minmax(150px, auto)); }
.stats-grid .tile { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 8px 12px; }
.stats-grid .tile.gauge { flex-direction: row; align-items: center; gap: 12px; --d: 56px; }
body.mode-app .stats-grid .tile.gauge { --d: 90px; }
.stats-grid .gauge .cap { white-space: pre-line; text-align: left; font-size: var(--t-small); line-height: 1.3; }
.stats-grid .val { font-size: 19px; }
.stats-grid .spark { height: 26px; }

/* ---- Music ---- */
.mute-pill.muted { background: rgba(255, 69, 58, 0.25); color: var(--danger); }

/* ---- Usage ---- */
.usage-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.mini-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile.mini { padding: 7px 11px; }
.tile.mini h4 { margin: 0 0 2px; }
.tile.mini .val { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; min-height: 0; }
.usage-cols .tile { padding: 8px 11px; overflow-y: auto; min-height: 0; }
.usage-cols .tile h4 { margin-bottom: 2px; }
.usage-cols .usage-row, .money-cols .usage-row { grid-template-columns: 78px 1fr 44px; gap: 8px; margin: 5px 0; }
body.mode-app .usage-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
body.mode-app .usage-cols .usage-row { grid-template-columns: 140px 1fr 64px; margin: 8px 0; }

/* ---- Currency: eight boxes in a line, two lines in view ---- */
.fx-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; max-height: calc(66px * 2 + 8px); overflow-y: auto; padding-right: 3px; align-content: start; }
.fx-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 66px; border-radius: 12px; background: var(--fill); transition: background 0.15s ease, transform 0.15s ease; min-width: 0; }
.fx-box:hover { background: var(--fill-hover); transform: translateY(-1px); }
.fx-box b { font-size: 11.5px; }
.fx-amt { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.fx-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 8px; padding: 0; display: none; }
.fx-box:hover .fx-x { display: block; }
.flag { width: 24px; height: 17px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); flex: none; }
.flag.none { display: inline-grid; place-items: center; background: var(--fill-hover); font-size: 9px; font-weight: 700; color: var(--muted); }
.flag-slot { display: inline-flex; width: 24px; align-items: center; }

/* ---- Money ---- */
.money-chip { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: 10px; color: var(--muted); }
.money-chip b { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.money-chip b.in { color: var(--ok); }
.money-chip b.out { color: var(--danger); }
.money-cols { display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; flex: 1; min-height: 0; }
.money-cols.one { grid-template-columns: 1fr; }
.money-cols .tile.where { padding: 8px 11px; overflow-y: auto; min-height: 0; }
.money-cols .tile .usage-row { grid-template-columns: 56px 1fr 56px; gap: 6px; }
body.mode-app .money-cols { flex: none; min-height: 220px; }

/* ---- Weather ---- */
.wx-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.wx-now { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; background: var(--fill); border-radius: 14px; padding: 8px 14px; }
.wx-icon { font-size: 36px; line-height: 1; }
.wx-temp { font-size: 34px; letter-spacing: -1px; font-weight: 700; line-height: 1; }
.wx-info { display: flex; flex-direction: column; min-width: 0; }
.wx-info b { font-size: 13px; }
.wx-info .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wx-day { padding: 6px 2px; font-size: 11px; background: var(--fill); border-radius: 10px; text-align: center; }
.wx-day .e { font-size: 18px; margin: 2px 0; }
.wx-dn { color: var(--muted); }
body.mode-app .wx-icon { font-size: 54px; }
body.mode-app .wx-temp { font-size: 46px; }
body.mode-app .wx-day { padding: 12px 4px; font-size: 12.5px; }
body.mode-app .wx-day .e { font-size: 26px; }

/* ---- Passwords ---- */
.pw-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw-form textarea { grid-column: 1 / -1; }
.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px; }
body.mode-app .pw-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); overflow: visible; flex: none; }
.pw-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 11px; border-radius: 12px; background: var(--fill); min-width: 0; }
.pw-card:hover { background: var(--fill-hover); }
.pw-card .main { flex: 1 1 0; min-width: 0; }
.pw-card .t { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-card .s { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; -webkit-user-select: text; }
.pw-card .acts { display: flex; gap: 4px; flex: 1 1 100%; justify-content: flex-start; }
.pw-card .fav { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.drop-hint { border: 1.5px dashed var(--fill-hover); border-radius: 12px; padding: 7px 12px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* ---- Clocks and the time converter: cities as cards, seven in a line ---- */
.clk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.clk-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 8px; border-radius: 12px; background: var(--fill); min-width: 0; min-height: 88px; transition: background 0.15s ease; }
.clk-card:hover { background: var(--fill-hover); }
.clk-city { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk-time { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; }
.clk-sec { display: block; font-size: 10px; font-weight: 500; color: var(--accent); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.clk-day { font-size: 9.5px; color: var(--muted); line-height: 1.25; white-space: pre-line; }
.clk-x { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 8px; padding: 0; display: none; }
.clk-card:hover .clk-x { display: block; }
body.mode-app .clk-time { font-size: 24px; }
body.mode-app .clk-card { min-height: 104px; }

/* ---- Palettes ---- */
.pal-page { flex-direction: row; gap: 14px; align-items: flex-start; }
.pal-side { display: flex; flex-direction: column; gap: 6px; width: 150px; flex: none; }
.pal-item { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 7px 9px; border: 1.5px solid transparent; border-radius: 12px; background: var(--fill); transition: background 0.15s ease, border-color 0.15s ease; }
.pal-item:hover { background: var(--fill-hover); }
.pal-item.on { border-color: var(--accent); }
.pal-item b { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-strip { display: flex; width: 100%; height: 18px; border-radius: 6px; overflow: hidden; }
.pal-strip i { flex: 1; }
.pal-strip i.none { background: repeating-linear-gradient(45deg, var(--fill-hover) 0 4px, transparent 4px 8px); }
.pal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pal-name { font-size: 15px; font-weight: 700; background: transparent; width: 220px; }
.pal-name:focus { background: var(--fill); }
.pal-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.pal-swatch { width: auto; height: 68px; }
.pal-swatch.add { border: 1.5px dashed var(--fill-hover); background: transparent; color: var(--muted); font-size: 24px; justify-content: center; align-items: center; padding: 0; box-shadow: none; }
.pal-swatch.add:hover { color: var(--text); background: var(--fill); }

/* ---- QR code and short link, side by side ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.split-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.split-pane h3 { margin: 0; font-size: 13px; }
.qr-row { display: flex; gap: 10px; align-items: flex-start; }
.qr-stage { padding: 6px; width: 118px; height: 118px; min-height: 0; flex: none; }
.qr-stage canvas { width: 104px; height: 104px; }
.qr-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
body.mode-popup .split { grid-template-columns: 1fr; }

/* ---- Calculator: one line ---- */
.calc-line { display: flex; align-items: center; gap: 10px; }
.calc-line .input { height: 40px; font-size: 16px; }
.calc-out { font-size: 20px; min-height: 0; min-width: 110px; }
.cmd-in { height: 34px; font-size: 14px; flex: none; }

/* ---- Timers ---- */
.card.timer { gap: 4px; }
.t-state { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.card.timer.running .t-state { color: var(--accent); }
.card.timer.over .t-state { color: var(--accent); font-weight: 700; }

/* ---- Voice notes inside Notes ---- */
.card.voice-lead { gap: 4px; }
.rec-btn { width: 34px; height: 34px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.25); transition: border-radius 0.2s ease; }
.card.voice-lead:hover .rec-btn { box-shadow: 0 0 0 6px rgba(255, 69, 58, 0.3); }
.card.voice-lead.rec { border-style: solid; border-color: #ff453a; background: rgba(255, 69, 58, 0.1); }
.card.voice-lead.rec .rec-btn { border-radius: 9px; animation: rec-pulse 1.2s ease-in-out infinite; }
.rec-clock { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); } }
.card.voice .v-top { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wavebars { display: flex; align-items: center; gap: 2px; height: 34px; }
.wavebars i { flex: 1; background: var(--muted); border-radius: 2px; opacity: 0.8; }
.card.voice.playing { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.card.voice.playing .wavebars i { background: var(--accent); opacity: 1; animation: wave-play 0.7s ease-in-out infinite alternate; }
.card.voice.playing .wavebars i:nth-child(3n) { animation-delay: -0.25s; }
.card.voice.playing .wavebars i:nth-child(3n + 1) { animation-delay: -0.5s; }
@keyframes wave-play { from { transform: scaleY(0.45); } to { transform: scaleY(1.1); } }

/* ---- Ask Tidy ---- */
.aipanel { align-items: stretch; padding: 12px 16px 14px; gap: 8px; z-index: 6; }
.ai-top { display: flex; align-items: center; gap: 8px; }
.ai-top .select { height: 32px; }
.ai-head { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--fill); }
.ai-keybox { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.ai-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.ai-hello { margin: auto; text-align: center; color: var(--muted); font-size: var(--t-card); line-height: 1.5; }
.ai-hello b { display: block; color: var(--text); font-size: 16px; margin-bottom: 2px; }
.ai-form { display: flex; align-items: flex-end; gap: 8px; background: var(--fill); border-radius: 14px; padding: 5px 5px 5px 14px; }
.ai-form textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; max-height: 84px; font-size: var(--t-body); line-height: 1.4; padding: 6px 0; user-select: text; -webkit-user-select: text; }
.ai-form .add { width: 30px; height: 30px; border-radius: 50%; }
.ai-form .add svg { width: 14px; height: 14px; }

/* ---- Ruler: points, lines, a side panel ---- */
.ov.ruler .measure.dashed { stroke-dasharray: 5 4; opacity: 0.7; }
.ov.ruler .measure { fill: none; }
.rl-dots, .rl-labels { position: absolute; inset: 0; pointer-events: none; }
.rl-dot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #000; }
.rl-seg { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 8px; background: rgba(28, 28, 30, 0.96); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.rl-panel { position: absolute; top: 56px; right: 18px; width: 340px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 10px 12px; border-radius: 14px; background: rgba(28, 28, 30, 0.97); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); cursor: default; font-size: 12px; }
.rl-panel:empty { display: none; }
.rl-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; }
.rl-row { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 2px 10px; font-variant-numeric: tabular-nums; padding: 6px 0; border-top: 1px solid var(--line); }
.rl-row .rl-ratio { grid-column: 2 / -1; color: var(--accent); }
.rl-row.sub { grid-template-columns: 1fr auto; color: var(--muted); }
.rl-row.total { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 6px 8px; }

/* ================= v0.5: widgets, custom services, focus window, peek ================= */

/* Widgets: cards in a grid, like home-screen widgets */
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-right: 2px; }
body.mode-app .wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.wcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border-radius: 16px; background: var(--fill); min-width: 0; min-height: 0; overflow: hidden; }
.w-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.w-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.w-grow { flex: 1; min-width: 0; }
.w-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-sub.bad { color: var(--danger); white-space: normal; }
.w-big { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-music { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--fill)), var(--fill)); }
.w-art { width: 46px; height: 46px; border-radius: 10px; background: var(--fill-hover); display: grid; place-items: center; overflow: hidden; flex: none; font-size: 20px; }
.w-art img { width: 100%; height: 100%; object-fit: cover; }
.w-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.w-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.5s linear; }
.w-times { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-play { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: #000; font-size: 13px; padding: 0; }
.w-ctl { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--fill-hover); color: var(--text); font-size: 12px; padding: 0; }
.w-cal-card { grid-row: span 2; }
.w-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.w-dow { color: var(--muted); font-size: 10px; padding-bottom: 2px; }
.w-day { position: relative; padding: 4px 0; border-radius: 8px; }
.w-day.blank { visibility: hidden; }
.w-day.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.w-day .dot { position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); }
.w-list { display: flex; flex-direction: column; gap: 6px; }
.w-li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.w-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; padding: 0; flex: none; }
.w-check:hover { border-color: var(--ok); }
.w-stack { display: flex; flex-direction: column; gap: 6px; }
.w-note, .w-call { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
.w-call { background: rgba(52, 199, 89, 0.14); }
.w-badge { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--accent); font-size: 12px; flex: none; }
.w-notify { grid-column: span 2; }
.w-dialcard { grid-column: span 2; }
.w-dial { display: flex; align-items: flex-end; gap: 3px; height: 38px; overflow: hidden; padding-top: 6px; }
.w-dial i { flex: 1; min-width: 2px; height: 10px; border-radius: 1px; background: var(--muted); opacity: 0.45; cursor: pointer; }
.w-dial i.major { height: 18px; opacity: 0.8; }
.w-dial i.on { background: var(--accent); height: 30px; opacity: 1; }
.w-clocks { grid-column: span 3; }
.w-clk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.w-clk-row .clk-card { min-height: 0; }
.w-shelf { grid-column: span 2; }
.w-shelf-row { display: flex; gap: 6px; overflow-x: auto; }
.w-shelf-row img { width: 74px; height: 58px; flex: none; object-fit: cover; border-radius: 10px; background: #fff; cursor: pointer; }

/* Custom services */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; overflow-y: auto; flex: 1; min-height: 0; }
.w-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.w-tile { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); min-width: 0; font-size: 10.5px; color: var(--muted); }
.w-tile b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Focus Window: a dimmer over the screen that lets clicks through */
.ov.focus { background: transparent; display: block; padding: 0; }
.ov.eyedrop { background: rgba(0, 0, 0, 0.12); cursor: crosshair; display: block; padding: 0; }
.ov.eyedrop .hint { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(28, 28, 30, 0.95); color: #fff; font-size: 13px; pointer-events: none; }
.loupe { position: absolute; left: 0; top: 0; padding: 6px; border-radius: 14px; background: rgba(28, 28, 30, 0.96); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); pointer-events: none; text-align: center; }
.loupe-px { display: block; width: 154px; height: 154px; border-radius: 8px; image-rendering: pixelated; outline: 1px solid rgba(255, 255, 255, 0.6); }
.loupe-hex { margin-top: 6px; padding: 4px 8px; border-radius: 8px; font: 600 13px ui-monospace, Consolas, monospace; color: #fff; }
.focus-dim { position: absolute; background: rgba(0, 0, 0, 0.62); }


/* the closed pill fades when there is nothing to say */
body.collapsed.idle .shell { opacity: 0.4; transition: opacity 0.4s ease; }
body.collapsed.idle .shell:hover { opacity: 1; }

/* one line of days with arrows (Todo, Project) */
/* Todo: one line of days. Quiet chips, the chosen day is white, today has an accent line, days with todos a dot. */
.day-strip { display: flex; align-items: center; gap: 6px; padding: 4px 2px 12px; }
.day-track { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.day-track::-webkit-scrollbar { display: none; }
.day-chip { flex: none; width: 52px; border: 0; border-radius: 14px; padding: 7px 0 6px; background: rgba(255, 255, 255, 0.07); color: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.day-chip:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
.day-chip .dw { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.day-chip b { font-size: 16px; font-weight: 600; }
.day-chip .dm { font-size: 10px; color: var(--muted); min-height: 11px; }
.day-chip.today { box-shadow: inset 0 -2px 0 var(--accent); }
.day-chip.today .dw { color: var(--accent); }
.day-chip.has b { position: relative; }
.day-chip.has b::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.day-chip.on { background: #fff; color: #000; }
.day-chip.on .dw, .day-chip.on .dm { color: #555; }
.day-arrow { flex: none; width: 26px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: inherit; font-size: 18px; line-height: 1; }
.day-arrow:hover { background: rgba(255, 255, 255, 0.14); }

/* usage bars */
.u-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: 4px; }
.u-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.u-col i { display: block; width: 100%; max-width: 22px; border-radius: 3px; background: var(--accent); }
.u-col span { font-size: 9px; color: var(--muted); white-space: nowrap; height: 11px; }

/* month calendar */
.cal-page { display: flex; flex-direction: row; gap: 14px; }
.cal-left { flex: 1.2; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: 10px; text-align: center; color: var(--muted); }
.cal-day { border: 0; border-radius: 8px; padding: 5px 0; background: transparent; font-size: var(--t-card); }
.cal-day:hover { background: var(--fill-hover); }
.cal-day.today { color: #ff9a4a; font-weight: 700; }
.cal-day.has::after { content: ''; display: block; width: 4px; height: 4px; margin: 1px auto -3px; border-radius: 50%; background: currentColor; }
.cal-day.on { background: #fff; color: #000; }

/* Ask Tidy as a tab: no frame of its own, a slim top line, the chat takes the room, the box sits at the bottom. */
.aipanel.in-tab { padding: 2px 4px 4px; gap: 6px; min-height: 0; }
.aipanel.in-tab .ai-head { padding: 0; background: none; gap: 4px; }
.aipanel.in-tab .ai-top .select { max-width: 190px; }
.aipanel.in-tab #ai-close { display: none; }
.aipanel.in-tab .ai-keybox { padding: 8px 10px; border: 0; border-radius: 12px; background: var(--fill); }
.aipanel.in-tab .ai-log { padding: 2px 2px 0; }
.aipanel.in-tab .ai-form { flex: none; }
.aipanel.in-tab .ai-form textarea { min-height: 20px; }

/* Controls tab: toggles, sound, volume, now playing, and a compact grid of shortcuts with real icons. */
.ctl-page { gap: 6px; }
.ctl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ctl-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 10px; border: 0; border-radius: 14px; background: var(--fill); color: var(--text); font: inherit; text-align: left; }
button.ctl { cursor: pointer; transition: background 0.15s ease; }
button.ctl:hover { background: var(--fill-hover); }
.ctl.on { background: var(--fill); }
.ctl-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ctl-text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-text span { font-size: var(--t-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl.on .ctl-text span { color: var(--text); opacity: 0.75; }
.ctl-caret { color: var(--muted); flex: none; }
.ctl .switch { flex: none; }
.ctl-ico { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--text); }
.ctl.on .ctl-ico { background: rgba(255, 255, 255, 0.18); }
.ctl-svg { display: grid; place-items: center; width: 16px; height: 16px; }
.ctl-svg svg { width: 16px; height: 16px; display: block; }
.ctl-img { width: 16px; height: 16px; object-fit: cover; border-radius: 4px; }
.ctl-vol { justify-content: flex-start; padding: 6px 10px; }
.ctl-vol input { flex: 1; min-width: 0; accent-color: var(--accent); }
.ctl-pct { width: 36px; flex: none; text-align: right; font-size: var(--t-card); color: var(--muted); font-variant-numeric: tabular-nums; }
.ctl-mute { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--text); padding: 0; }
.ctl-mute svg { width: 15px; height: 15px; display: block; }
.ctl-mute.muted { background: rgba(255, 69, 58, 0.25); color: var(--danger); }
.ctl-media { padding: 7px 10px; }
.ctl-media-btns { display: flex; align-items: center; gap: 6px; flex: none; }
.ctl-media .m-btn { width: 30px; height: 30px; }
.ctl-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ctl-grid5[hidden], .ctl-form-box[hidden] { display: none; }
.ctl-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 2px 5px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; cursor: pointer; transition: background 0.15s ease; }
.ctl-tile:hover { background: var(--fill-hover); }
.ctl-tile .ctl-ico { width: 30px; height: 30px; border-radius: 9px; }
.ctl-tile .ctl-svg, .ctl-tile .ctl-svg svg { width: 18px; height: 18px; }
.ctl-tile .ctl-img { width: 30px; height: 30px; border-radius: 9px; }
.ctl-tile.add { background: transparent; border: 1px dashed var(--line); }
.ctl-tile.add .ctl-ico { background: transparent; }
.ctl-lbl { max-width: 100%; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ctl-form { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--fill); }
.ctl-form-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ctl-tile-preview { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.1); }
.ctl-tile-preview svg { width: 18px; height: 18px; display: block; }
.ctl-tile-preview img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.ctl-form-sub { font-size: var(--t-small); color: var(--muted); }
.ctl-form .input { width: 100%; }
.ctl-icon-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.ctl-icon-pick { height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--text); display: grid; place-items: center; padding: 0; cursor: pointer; }
.ctl-icon-pick svg { width: 17px; height: 17px; display: block; }
.ctl-icon-pick[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ctl-form-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- Dock pages: Today, Stats, Clipboard. Rings sweep when the value changes; cards fade in one by one. ---- */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --c { syntax: '<color>'; inherits: false; initial-value: #ff9a4a; }
.ring { transition: --p 0.9s cubic-bezier(0.22, 1, 0.36, 1), --c 0.4s ease; }
@keyframes dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dash-card { background: var(--fill); border-radius: 14px; padding: 9px 11px; min-width: 0; display: flex; flex-direction: column; gap: 6px; animation: dash-in 0.5s var(--ease) both; animation-delay: var(--d, 0ms); }
.dash-card.click { cursor: pointer; }
.dash-card.click:hover { background: var(--fill-hover); }
.td-sub { font-size: var(--t-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.td-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.td-row b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.td-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.td-step { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; background: var(--fill-hover); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; }
.td-step:hover { background: rgba(255, 255, 255, 0.16); }
.today-page, .st-page, .clip-page { gap: 8px; }

/* Today */
.td-grid { display: grid; grid-template-columns: 0.9fr 1.15fr 1fr; gap: 8px; align-items: start; }
.td-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.td-pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 8px; align-items: stretch; }
.td-clock { align-items: center; text-align: center; padding: 10px 8px 12px; }
.td-hour, .td-min { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.td-dots { display: flex; gap: 5px; }
.td-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: td-blink 1s steps(2, start) infinite; }
.td-dots i + i { animation-delay: 0.5s; }
@keyframes td-blink { 50% { opacity: 0.15; } }
.td-meta { font-size: var(--t-small); color: var(--muted); }
.td-wx { align-items: center; text-align: center; }
.td-wx-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent); }
.td-wx-icon svg { width: 30px; height: 30px; display: block; }
.td-wx-temp { font-size: 22px; font-weight: 700; }
.td-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.td-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 9px; font-size: 10px; color: var(--muted); }
.td-day b { font-size: 12px; color: var(--text); font-weight: 600; }
.td-day.on { background: var(--accent); color: var(--on-accent); }
.td-day.on b { color: var(--on-accent); }
.td-next { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(255, 255, 255, 0.05); min-width: 0; }
.td-next b { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.td-timer { flex-direction: row; align-items: center; gap: 10px; }
.td-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.td-ring { position: relative; flex: none; width: 88px; height: 88px; }
.td-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.td-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 7; }
.td-fg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.td-readout { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-inputs { display: flex; gap: 6px; }
.td-box { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); }
.td-num { width: 34px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: right; }
.td-box span { font-size: 11px; color: var(--muted); }
.td-presets { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-start; }
.td-presets .chip { height: 24px; padding: 0 8px; font-size: 11px; }
.td-btns { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; width: 100%; }
.td-start, .td-reset { flex: none; height: 28px; padding: 0 14px; border: 0; border-radius: 10px; font: inherit; font-weight: 600; background: var(--fill-hover); color: var(--text); }
.td-start { background: var(--accent); color: var(--on-accent); }
.td-start.on { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.td-todos { display: flex; flex-direction: column; gap: 2px; max-height: 176px; overflow-y: auto; } .td-todos .todo-row { gap: 8px; padding: 5px 2px; align-items: center; } .td-todos .todo-check { width: 18px; height: 18px; margin-top: 0; } .td-todos .todo-text { font-size: 12.5px; } .td-todos .todo-sub { font-size: 10px; margin-top: 0; } .td-todos .todo-del { width: 20px; height: 20px; }
.td-badge { font-size: 11px; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-variant-numeric: tabular-nums; }
.td-empty { font-size: var(--t-small); color: var(--muted); padding: 6px 2px; }
.td-add-row { display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.td-add { flex: 1; min-width: 0; height: 26px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
.td-go { width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.td-go svg { width: 14px; height: 14px; display: block; }

/* Stats */
.st-page { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; align-items: start; }
.st-main, .st-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-rings, .st-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-card { align-items: center; text-align: center; padding: 9px 8px; }
.st-ring { position: relative; width: 74px; height: 74px; }
.st-ring .ring { width: 74px; height: 74px; }
.st-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-title { font-size: 12px; font-weight: 600; }
.st-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.st-chip { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); white-space: nowrap; }
.st-mini { padding: 8px 10px; gap: 2px; }
.st-val { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-apps-card, .st-speed { gap: 7px; }
.st-apps { display: flex; flex-direction: column; gap: 6px; }
.st-app { display: grid; grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 11px; }
.st-letter { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, 0.12); }
.st-aname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-track { height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.st-track i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.6s var(--ease); }
.st-aval { color: var(--muted); font-variant-numeric: tabular-nums; }
.st-speed-row { display: flex; justify-content: space-between; gap: 8px; }
.st-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Clipboard */
/* one line: search takes half, the four filters and the gear take the other half */
.clip-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.clip-top .clip-search { flex: 1 1 0; min-width: 0; width: auto; }
.clip-filters { flex: 1 1 0; min-width: 0; display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.clip-filters .chip { padding: 0 8px; font-size: 11.5px; }
.clip-gear { margin-left: auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--text); }
.clip-gear svg { width: 14px; height: 14px; display: block; }
.clip-body-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; min-height: 0; }
.clip-list { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; min-width: 0; }
.clip-group { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 4px 6px 2px; }
.clip-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; }
.clip-row:hover { background: var(--fill-hover); }
.clip-row.on { background: color-mix(in srgb, var(--accent) 30%, var(--fill)); }
.clip-row svg { width: 14px; height: 14px; flex: none; color: var(--muted); display: block; }
.clip-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-ago { flex: none; font-size: 10px; color: var(--muted); }
.clip-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 150px; padding: 9px 10px; border-radius: 14px; background: var(--fill); overflow: hidden; }
.clip-pre { flex: 1; min-height: 0; margin: 0; overflow-y: auto; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 12px; line-height: 1.45; }
.clip-pic { min-height: 0; display: grid; place-items: center; }
.clip-pic img { max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 8px; }
.clip-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 11px; }
.clip-info dt { color: var(--muted); }
.clip-info dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.clip-hint { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.clip-hint kbd { font: inherit; font-size: 10px; padding: 1px 5px; border-radius: 5px; background: var(--fill); color: var(--text); }
.clip-hint-move { margin-left: auto; }

/* Controls: now-playing card */
.cm-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border-radius: 14px; background: var(--fill); }
.cm-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm-art { width: 58px; height: 58px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.1); font-size: 22px; }
.cm-art img { width: 100%; height: 100%; object-fit: cover; }
.cm-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cm-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-artist { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-bar { height: 3px; margin-top: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.15); }
.cm-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.5s linear; }
.cm-times { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-btns { display: flex; align-items: center; gap: 8px; }
.cm-btns .spacer { flex: 1; }
.cm-nav { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: var(--text); }
.cm-nav svg { width: 14px; height: 14px; display: block; }
.cm-play { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.cm-play svg { width: 16px; height: 16px; display: block; }
.cm-vol { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--text); font-size: 15px; line-height: 1; }
.cm-mute { height: 26px; padding: 0 9px; border: 0; border-radius: 999px; display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.12); color: var(--text); font: inherit; font-size: 11px; }
.cm-mute svg { width: 13px; height: 13px; display: block; }
.cm-mute.muted { background: rgba(255, 69, 58, 0.3); color: #fff; }

/* Apps: app rows with their own icons, starred and recent first. */
.ap-page { gap: 8px; }
.ap-search { width: 100%; }
.ap-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-chip { display: inline-flex; align-items: center; gap: 5px; }
.ap-chip .ctl-svg, .ap-chip .ctl-svg svg { width: 13px; height: 13px; }
.ap-list { display: flex; flex-direction: column; gap: 1px; max-height: 190px; overflow-y: auto; min-width: 0; }
.ap-head { padding: 6px 6px 2px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ap-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.ap-row:hover, .ap-row:focus-visible { background: var(--fill-hover); }
.ap-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 700; color: var(--muted); }
.ap-icon .ctl-svg, .ap-icon .ctl-svg svg { width: 15px; height: 15px; }
.ap-img { width: 100%; height: 100%; object-fit: contain; }
.ap-name { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-type { flex: none; font-size: 10.5px; color: var(--muted); }
.ap-star { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; display: grid; place-items: center; background: transparent; color: var(--muted); }
.ap-star:hover { background: var(--fill-hover); }
.ap-star.on { color: #ffd60a; }
.ap-star .ctl-svg, .ap-star .ctl-svg svg { width: 15px; height: 15px; }

/* Wallpaper: a strip of picture cards; one click sets the wallpaper. */
.wp-page { gap: 6px; }
.wp-top { display: flex; align-items: center; gap: 8px; }
.wp-seg { flex: 1; min-width: 0; }
.wp-bar { display: flex; align-items: center; gap: 8px; }
.wp-strip { display: flex; align-items: center; gap: 10px; min-height: 104px; padding: 6px 4px 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.wp-more { flex: none; width: 1px; height: 1px; }
.wp-card { position: relative; flex: none; width: 150px; height: 96px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--fill); scroll-snap-align: center; transition: transform 0.25s var(--ease), box-shadow 0.25s ease, opacity 0.2s ease; animation: dash-in 0.4s var(--ease) both; }
.wp-card:hover { transform: translateY(-3px) scale(1.03); }
.wp-card.on { box-shadow: 0 0 0 2px var(--accent); }
.wp-card.busy { opacity: 0.6; }
.wp-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; text-align: left; font-size: 10.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); }
.wp-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; font-weight: 600; }

/* Settings rows: items share one line; they wrap only when the window is too narrow for them. */
.srow { display: flex; gap: 10px; align-items: stretch; }
.srow > * { flex: 1 1 190px; min-width: 0; }
.swatches.seven { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.lrows.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* A note or clip is open: only its back button is left at the top. */
body:has(.detail:not(.hidden)) #search-box, body:has(.detail:not(.hidden)) .tabs { display: none !important; }

/* The closed-dock settings: small, title only. */
.srow.compact .setting { padding: 7px 10px; }
.srow.compact .setting .l span { display: none; }
.chip-row.compact .chip { height: 24px; padding: 0 9px; font-size: 11px; }