/* The shell's essentials: windows (move, resize, minimise to the dock, maximise, snap), the Dew menu,
   the clock's calendar and notifications, Settings and the card beside a part, What's running,
   shortcuts, feedback and the clipboard list. Colours, sizes and speeds: css/tokens.css. */

/* ---- small shared pieces ---- */
.muted { color: var(--muted); }
p.small, .muted.small { font-size: calc(13px * var(--ts)); }
.ghost.small, .solid.small { padding: 5px 11px; font-size: calc(13px * var(--ts)); }
.linkish {
  background: none; border: 0; padding: 4px 2px; color: var(--accent-text); font-size: calc(13px * var(--ts));
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap;
}
.linkish:hover { text-decoration-thickness: 2px; }
.ghost.danger { border-color: #ff7a6b; color: #ff7a6b; }
.selectable { user-select: text; }

/* ---- windows ---- */
.panel.placed { transform: none; animation: pop-placed var(--mo-fast) ease-out; }
@keyframes pop-placed { from { opacity: 0; transform: scale(.985); } }
.panel:not(.front) { box-shadow: 0 16px 40px var(--shadow); }
.panel:not(.front) > header { opacity: .72; }
.win-btns { display: flex; gap: 6px; margin-left: auto; }
.panel-tools ~ .win-btns { margin-left: 8px; }
.win-btns .close { margin: 0; font-size: calc(20px * var(--ts)); }   /* × is the third of – □ ×: same size, same gap */
.win-btns button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  font-size: calc(15px * var(--ts)); line-height: 1; padding: 0; color: var(--muted);
}
.win-btns button:hover { background: rgba(var(--tint), .08); color: var(--text); }
.win-grip {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 2;
  background: linear-gradient(135deg, transparent 55%, var(--line) 55%, var(--line) 62%, transparent 62%, transparent 74%, var(--line) 74%, var(--line) 81%, transparent 81%);
}
.panel[data-mode="max"] .win-grip { display: none; }
@media (min-width: 761px) {
  .panel > header { cursor: default; user-select: none; }
  .panel > header h2 { cursor: move; }
}
body.dragging-window { user-select: none; cursor: move; }
body.dragging-window iframe { pointer-events: none; }
/* where a dragged window will land (placed by js/panels.js from the same sums as the window) */
#snap-hint {
  position: fixed; z-index: 29; box-sizing: border-box; border-radius: var(--radius);
  border: 2px dashed var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none;
  transition: left var(--mo-fast) ease-out, top var(--mo-fast) ease-out, width var(--mo-fast) ease-out, height var(--mo-fast) ease-out;
}

/* the layouts, from the maximise button: each small screen shows its parts; pick one */
#snap-layouts { padding: 10px 12px 12px; }
#snap-layouts p, #snap-assist p { margin: 0 2px 8px; color: var(--muted); font-size: calc(12px * var(--ts)); }
.lay-grid { display: grid; grid-template-columns: repeat(2, 104px); gap: 10px; }
.lay-screen { position: relative; height: 64px; }
.lay-screen button {
  position: absolute; box-sizing: border-box; margin: 0; padding: 0; border-radius: 6px;
  border: 2px solid var(--glass-strong); background: color-mix(in srgb, var(--text) 14%, transparent);
}
.lay-screen button:hover, .lay-screen button:focus-visible { background: var(--accent); outline: none; }
.lay-screen button.on { background: color-mix(in srgb, var(--accent) 45%, transparent); }
/* opened from the keyboard: each layout shows its number, then the picked one numbers its parts */
#snap-layouts.by-keys .lay-screen::before {
  content: attr(data-n); position: absolute; left: -6px; top: -6px; z-index: 1;
  min-width: 16px; padding: 0 3px; border-radius: 8px; text-align: center;
  font-size: calc(11px * var(--ts)); line-height: 16px; background: var(--text); color: var(--bg);
}
#snap-layouts .lay-screen.picked button::after {
  content: attr(data-n); display: grid; place-items: center; height: 100%;
  font-size: calc(12px * var(--ts)); font-weight: 600; color: var(--text);
}

/* after a snap: the other windows, offered for the space that's left */
#snap-assist {
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  overflow: auto; border: 2px dashed var(--accent-text); animation: none;
}
/* each other window as a small picture with its name, as in Windows' snap assist */
.sa-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 240px)); justify-content: center;
  gap: 14px; width: 100%; padding: 6px;
}
#snap-assist button {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 6px;
  border: 1px solid transparent; background: transparent; border-radius: 12px; text-align: left;
}
.sa-name { padding: 0 4px; font-size: calc(13px * var(--ts)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sa-shot {
  position: relative; display: block; width: 100%; overflow: hidden; border-radius: 8px; pointer-events: none;
  background: var(--glass-strong); box-shadow: 0 8px 24px var(--shadow);
}
.sa-shot .sa-blank { display: block; height: 100%; min-height: 40px; background: rgba(var(--tint), .08); }
#snap-assist button:hover, #snap-assist button:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); outline: none;
}

/* the switcher (Ctrl+`) */
#switcher {
  position: fixed; z-index: 45; left: 50%; top: 40%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 4px; min-width: 260px; max-width: calc(100% - 32px); padding: 8px;
  border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: 0 24px 60px var(--shadow);
  backdrop-filter: blur(18px);
}
#switcher button { text-align: left; border: 0; background: transparent; padding: 9px 14px; border-radius: 10px; }
#switcher button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* minimised windows wait in the dock */
#dock-min { display: flex; gap: 6px; max-width: 34%; overflow-x: auto; scrollbar-width: none; flex: none; }
.min-chip {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--tint), .06); font-size: calc(13px * var(--ts));
}
.min-chip:hover { background: rgba(var(--tint), .12); }

/* ---- the dock's own pieces ---- */
#clock {
  position: relative; border: 0; background: transparent; padding: 6px 10px; border-radius: 999px; margin-right: 0;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
/* "Now running" (js/live-rows.js): a dot on the clock while something is live, and the rows in the pull-down and the running panel */
#clock-live { position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg, transparent); pointer-events: none; }
#live-now:not([hidden]) { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.live-block h3 { margin: 0 0 6px; font-size: calc(13px * var(--ts)); color: var(--muted); font-weight: 600; }
.live-row { padding: 6px 0; }
.live-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.live-icon { flex: none; }
.live-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.live-btn {
  min-width: 44px; min-height: 44px; padding: 4px 12px; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); font-size: calc(13px * var(--ts)); line-height: 1.2; cursor: pointer;
}
.live-btn:hover, .live-btn:focus-visible { background: rgba(var(--tint), .14); outline: none; }
.live-btn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.live-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.live-lbl { white-space: normal; text-align: left; }
#clock:hover, #clock[aria-expanded="true"] { background: rgba(var(--tint), .08); color: var(--text); }
#clock-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-size: calc(10.5px * var(--ts)); font-weight: 700; line-height: 17px; text-align: center;
}
html[data-breathe="off"] #dock::before, html[data-breathe="off"] #dock::after { animation: none; }
body.no-corners .corner { display: none; }
body.dock-autohide:not(.dock-peek):not(:has(#dock :focus, #results:not([hidden]))) #dock {
  transform: translate(-50%, calc(100% + 24px)); opacity: 0;
}

/* ---- popovers: the Dew menu, the clock's calendar and notifications, the card beside a part ---- */
.pop {
  position: fixed; z-index: 45; padding: 10px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: var(--sheen), 0 24px 60px var(--shadow);
  backdrop-filter: blur(18px); animation: pop-up var(--mo-fast) ease-out;
}
@keyframes pop-up { from { opacity: 0; transform: translateY(6px); } }
#dew-menu {
  bottom: calc(var(--dock-h) + 8px); width: 260px; max-height: calc(100% - var(--dock-h) - 24px); overflow: auto;
  left: max(12px, calc(50vw + 6px - min(1100px, 100vw - 320px) / 2));
}
#dew-menu section + section { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
/* a 768-high screen with a mouse: tighter rows, so the last group (Leave) shows without scrolling */
@media (max-height: 820px) and (pointer: fine) {
  #dew-menu .menu-item { padding-block: 5px; }
  #dew-menu section + section { margin-top: 4px; padding-top: 4px; }
}
#dew-menu h4 {
  margin: 4px 10px 2px; color: var(--muted); font-size: calc(11px * var(--ts)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 10px;
}
.menu-item:hover, .menu-item:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.menu-item .ic { width: 22px; display: inline-flex; justify-content: center; color: var(--accent-text); }
/* Dew's drawn icons (js/icons.js): thin lines in the text colour, so every look, light and dark follow */
.dew-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.set-title { display: flex; align-items: center; gap: 10px; }
.set-title .dew-icon { width: 22px; height: 22px; color: var(--accent-text); }

#clock-pop {
  bottom: calc(var(--dock-h) + 8px); width: 320px; max-height: calc(100% - var(--dock-h) - 24px); overflow: auto;
  right: max(12px, calc(50vw - 20px - min(1100px, 100vw - 320px) / 2));
}
/* the Camera (js/camera.js): a dial of three above its dock button, then the viewfinder or the result */
#camera-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--muted); }
#camera-btn:hover, #camera-btn[aria-expanded="true"] { color: var(--text); background: rgba(var(--tint), .12); }
#camera-pop { bottom: calc(var(--dock-h) + 8px); width: 300px; max-height: calc(100% - var(--dock-h) - 24px); overflow: auto; }
.cam-dial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cam-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(var(--tint), .05); color: var(--text); font-size: calc(13px * var(--ts)); line-height: 1.2;
}
.cam-choice:hover, .cam-choice:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.cam-choice .dew-icon { width: 28px; height: 28px; color: var(--accent-text); }
.cam-finder { display: block; width: 100%; max-height: 50vh; max-height: 50dvh; object-fit: contain; border-radius: 10px; background: #000; }
.cam-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.cam-row .btn { width: auto; padding: 8px 14px; }
.cam-row .cam-back { margin-right: auto; }
/* the flash button: a full-size press, lit in the accent while on (the crossed or plain bolt carries the meaning, not the colour) */
.cam-row .cam-flash { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--muted); }
.cam-row .cam-flash:hover, .cam-row .cam-flash:focus-visible { color: var(--text); background: rgba(var(--tint), .12); outline: none; }
.cam-row .cam-flash.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #111); }
.cam-row .cam-flash .dew-icon { width: 22px; height: 22px; }
.cam-flash-note { text-align: right; }
.cam-note { margin: 8px 2px 0; color: var(--muted); font-size: calc(12px * var(--ts)); line-height: 1.4; }
.cam-back { margin-top: 6px; border: 0; background: transparent; color: var(--accent-text); padding: 6px 4px; cursor: pointer; }
#camera-scan { position: fixed; inset: 0; z-index: 140; background: var(--bg, #000); display: flex; flex-direction: column; }
#camera-scan iframe { flex: 1; min-height: 0; width: 100%; border: 0; display: block; }
#camera-scan .btn { align-self: center; width: auto; margin: 6px 0; padding: 8px 18px; }   /* its own strip, never over Earth Scanner's buttons */
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 6px; }
.cal-head b { cursor: pointer; text-transform: capitalize; }
.cal-head button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; line-height: 1; font-size: calc(17px * var(--ts));
}
.cal-head button:hover { background: rgba(var(--tint), .08); }
.cal-grid { width: 100%; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.cal-grid th { color: var(--muted); font-weight: 600; font-size: calc(11.5px * var(--ts)); padding: 4px 0; text-transform: uppercase; }
.cal-grid td { padding: 0; height: 32px; font-size: calc(13.5px * var(--ts)); }
.cal-grid td.out { color: var(--muted); opacity: .5; }
.cal-grid td.today { background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: 50%; }
.cal-grid .wk { color: var(--muted); font-size: calc(11px * var(--ts)); font-weight: 500; width: 30px; border-right: 1px solid var(--line); }
.notice-head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 2px 4px; border-top: 1px solid var(--line); }
#notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#notice-list li[data-part] {
  position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 36px 8px 10px; border-radius: 10px; background: rgba(var(--tint), .05);
}
#notice-list li small { color: var(--muted); font-size: calc(11.5px * var(--ts)); }
#notice-list li.quiet { opacity: .62; }
#notice-list li.empty { color: var(--muted); padding: 10px 4px; font-size: calc(13px * var(--ts)); }
.notice-x {
  position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); line-height: 1;
}
.notice-x:hover { background: rgba(var(--tint), .1); color: var(--text); }

#part-card { width: 360px; max-height: min(70vh, calc(100% - var(--dock-h) - 20px)); max-height: min(70dvh, calc(100% - var(--dock-h) - 20px)); overflow: auto; padding: 0; }
#part-card > header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
#part-card > header .close { width: 30px; height: 30px; font-size: calc(17px * var(--ts)); }
#part-card .card-rows { padding: 0 16px; }
#part-card .set-row:last-child { border-bottom: 0; }
#part-card > footer { padding: 6px 14px 10px; border-top: 1px solid var(--line); }
#part-card.sheet { left: 8px !important; right: 8px; bottom: calc(var(--dock-h) + 6px); top: auto !important; width: auto; }

/* "Show me where": everything else steps back and a ring circles the part */
#spotlight {
  position: fixed; z-index: 95; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(3, 6, 14, .6); transition: all var(--mo-base) var(--mo-ease);
}
#spotlight span {   /* a block, so ::first-letter works */
  position: absolute; left: 0; bottom: calc(100% + 10px); white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: calc(13px * var(--ts));
}
#spotlight.label-below span { bottom: auto; top: calc(100% + 10px); }
#spotlight span::first-letter { text-transform: uppercase; }
body.spotlighting .panel:not(.spot-keep) { visibility: hidden; }

/* ---- Settings ---- */
#panel-settings { width: min(940px, calc(100% - 48px)); }
#panel-settings:not(.placed) { height: min(680px, calc(100% - var(--dock-h) - 40px)); }
#set-search {
  width: 220px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--tint), .06); color: var(--text); font: inherit; outline: none;
}
#set-search:focus { border-color: var(--accent-text); }
.set-body { display: flex; flex: 1; min-height: 0; }
#set-nav { flex: none; width: 210px; padding: 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; overflow: auto; }
#set-nav button { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 10px; }
#set-nav button:hover { background: rgba(var(--tint), .06); }
#set-nav button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; }
#set-nav .ic { width: 20px; display: inline-flex; justify-content: center; color: var(--muted); }
#set-nav button.on .ic { color: var(--accent-text); }
.set-scroll { flex: 1; min-width: 0; overflow: auto; padding: 4px 24px 24px; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-scroll h3 { margin: 14px 0 4px; font-size: calc(16px * var(--ts)); }
.set-empty { color: var(--muted); }
.set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 13px 0; border-bottom: 1px solid var(--line); border-radius: 6px; }
.set-text { flex: 1 1 13rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }   /* a narrow window puts the control under the words */
.set-text b { font-weight: 600; }
.set-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.set-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.set-text small { color: var(--muted); font-size: calc(13px * var(--ts)); }
.set-group-tag { color: var(--muted); font-size: calc(11px * var(--ts)); text-transform: uppercase; letter-spacing: .05em; }
.set-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.set-row.by-windows .set-text b::after {
  content: "Windows"; margin-left: 8px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--muted); font-size: calc(10.5px * var(--ts)); font-weight: 600; vertical-align: 2px;
}
.set-row.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 55% { background: color-mix(in srgb, var(--accent) 20%, transparent); } }
.set-row select {
  background: rgba(var(--tint), .06); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font: inherit;
}
.set-row select option { background: var(--solid); color: var(--text); }
input.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: 13px; background: rgba(var(--tint), .16); border: 1px solid var(--line);
  transition: background var(--mo-fast);
}
input.switch::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); transition: transform var(--mo-fast) var(--mo-ease);
}
input.switch:checked { background: var(--accent); border-color: transparent; }
input.switch:checked::before { transform: translateX(18px); background: var(--on-accent); }
input.switch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* a rounded square, not a pill: a pill's curve cuts off the corner choices once the row wraps (Settings → Looks,
   William 2026-10-17); on one row the corners still meet in a half circle */
.seg { display: inline-flex; padding: 2px; border-radius: calc(16px * var(--ts) + 2px); border: 1px solid var(--line); background: rgba(var(--tint), .04); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-size: calc(13.5px * var(--ts)); }
.seg button:hover { background: rgba(var(--tint), .08); }
.seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* the looks Filter (LP11, js/look-filter.js): one button, the Colour and Style chips folded under it; the chips wrap, never cut */
.lf { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-width: 100%; }
.lf-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.lf-btn[aria-expanded="true"] { border-color: var(--accent-text); }
.lf-n { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: calc(12px * var(--ts)); font-weight: 600; text-align: center; }
.lf-panel { display: flex; flex-direction: column; gap: 8px; }
.lf-panel[hidden] { display: none; }
.lf-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf-h { font-size: calc(11.5px * var(--ts)); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lf-seg { max-width: 100%; }
.lf-seg button { white-space: nowrap; }
.seg .seg-label.lf-others { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.swatches { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); padding: 0; }
.sw.on { outline: 2px solid var(--text); outline-offset: 2px; }
.sw-pick { width: 30px; height: 26px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.slider { display: inline-flex; align-items: center; gap: 10px; }
.slider input { width: min(200px, 46vw); accent-color: var(--accent); cursor: pointer; }
.slider output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.slider output.word { min-width: 7.5em; text-align: left; }   /* a word ("Darker"), wide enough that the slider stays put */
.set-row input.time {
  background: rgba(var(--tint), .06); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; font: inherit;
  color-scheme: dark;
}
html[data-theme="light"] .set-row input.time { color-scheme: light; }
#set-about-extra #last-update { width: 100%; margin: 14px 0 0; }
#set-about-extra #last-update-check { margin: 8px 0 0; min-height: 44px; }
#set-about-extra #last-update-check[hidden] { display: none; }

/* ---- What's running, shortcuts, feedback, clipboard ---- */
.essentials { padding: 8px 22px 20px; overflow: auto; }
.essentials h3 { margin: 12px 0 6px; font-size: calc(14px * var(--ts)); color: var(--muted); font-weight: 600; }
.run-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.run-tools { margin-left: auto; display: flex; gap: 6px; }
dl.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 8px 0 0; align-items: baseline; }
dl.keys dt {
  font: 600 calc(12.5px * var(--ts)) ui-monospace, Consolas, monospace; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: rgba(var(--tint), .06); justify-self: start;
}
dl.keys dd { margin: 0; }
#panel-feedback { width: min(400px, calc(100% - 48px)); }
.fb { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.fb > * { flex-shrink: 0; } /* the window scrolls; nothing in it gets squeezed */
.fb .seg { align-self: flex-start; }
#fb-text {
  width: 100%; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(var(--tint), .06); color: var(--text); font: inherit; outline: none;
}
#fb-text:focus { border-color: var(--accent-text); }
#fb-send { align-self: flex-start; }
.fb-status { margin: 0; min-height: 1em; font-size: calc(13px * var(--ts)); }
.fb-status.warn { color: var(--warn); }
.fb-other { border-top: 1px solid var(--line); padding-top: 10px; font-size: calc(13px * var(--ts)); color: var(--muted); }
.fb-other summary { cursor: pointer; width: fit-content; }
.fb-other[open] summary { margin-bottom: 8px; }
.fb-other > button, .fb-other > span { display: block; margin: 0 0 6px; }
.fb-other b { color: var(--text); }
/* the clipboard: a tile per copy; picture or text above, the corner says what it is and what opens it */
.panel.clip-panel { width: min(760px, calc(100% - 48px)); }
.clip-ask { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: rgba(var(--tint), .05); }
.clip-ask p { margin: 0; flex: 1; font-size: calc(13.5px * var(--ts)); }
.clip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 40%), 1fr)); gap: 10px; }
.clip-tile-wrap { position: relative; min-width: 0; }
.clip-tile {
  width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 0; text-align: left; border: 1px solid var(--line);
  background: rgba(var(--tint), .04); border-radius: 12px; overflow: hidden; font: inherit; color: inherit; cursor: pointer;
}
.clip-tile:hover, .clip-tile:focus-visible { background: rgba(var(--tint), .1); border-color: var(--accent); }
.clip-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(var(--tint), .06); }
.clip-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.clip-text {
  align-self: start; justify-self: stretch; padding: 8px 10px 30px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: calc(12.5px * var(--ts)); line-height: 1.35; max-height: 100%; overflow: hidden;
}
.clip-mark { font-size: 44px; line-height: 1; }
.clip-badge {
  position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 12px);
  padding: 3px 7px 3px 4px; border-radius: 8px; background: var(--solid); border: 1px solid var(--line);
  font-size: calc(11.5px * var(--ts)); font-weight: 600; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.clip-badge img { width: 20px; height: 20px; flex: none; }
.clip-badge span { overflow: hidden; text-overflow: ellipsis; }
.clip-count { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: calc(11.5px * var(--ts)); font-weight: 600; }
.clip-name { padding: 0 10px; font-size: calc(12.5px * var(--ts)); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-note { padding: 0 10px; font-size: calc(11.5px * var(--ts)); color: var(--warn); }
.clip-tile > :last-child { margin-bottom: 8px; }
.clip-tile > .clip-pic:last-child { margin-bottom: 0; }
.clip-tile.missing .clip-pic { opacity: .45; }
.clip-x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--solid); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0;
}
.clip-tile-wrap:hover .clip-x, .clip-x:focus-visible { opacity: 1; }
@media (hover: none) { .clip-x { opacity: 1; } .clip-text { padding-right: 34px; } }
.clip-list li.empty { grid-column: 1 / -1; color: var(--muted); font-size: calc(13px * var(--ts)); }

/* ---- small screens: everything that pops up becomes a sheet above the dock ---- */
@media (max-width: 760px) {
  #dew-menu, #clock-pop, #camera-pop { left: 8px !important; right: 8px; width: auto; bottom: calc(var(--dock-h) + 6px); }
  #dock-min { max-width: 30%; }
  .min-chip { max-width: 90px; padding: 5px 9px; }
  .win-btns .win-max, .win-grip { display: none; }
  #panel-settings, #panel-settings:not(.placed) { width: calc(100% - 16px); height: auto; }   /* a sheet like every other window */
  #panel-settings > header { flex-wrap: wrap; }
  #panel-settings .panel-tools { order: 3; flex-basis: 100%; margin-left: 0; }
  #panel-settings .panel-tools ~ .win-btns { margin-left: auto; }   /* the window buttons at the right end, not after the title */
  #set-search { width: 100%; }
  .set-body { flex-direction: column; }
  #set-nav { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 6px 8px; scrollbar-width: none; }
  #set-nav button { white-space: nowrap; padding: 7px 10px; }
  /* more groups wait to the right: the row fades out there instead of cutting a word in half */
  #set-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 32px; }
  .set-scroll { padding: 2px 14px 18px; }
  .set-row { flex-wrap: wrap; gap: 8px 12px; }
  .set-end { justify-content: flex-start; }
  #panel-feedback { width: calc(100% - 16px); }
  #first-run { flex-wrap: wrap; }
}

/* the name-and-look switch at the top of the system menu (js/essentials.js brandSwitch):
   the system's text logo beside its symbol, the Dew | Meridian switch right next to it */
#dew-menu .brand-switch { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px 6px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 6px; color: var(--head-colour); line-height: 0; }
.brand-lockup .globe, .brand-lockup .leaf { width: 22px; height: 22px; flex: none; }
.brand-lockup .wordmark { height: 10px; width: auto; }
.wordmark .wm-hi { color: var(--accent-text); }
#dew-menu .brand-switch .seg { border-color: var(--rim); box-shadow: var(--sheen); flex-wrap: nowrap; flex: none; }
#dew-menu .brand-switch .seg button { padding: 4px 9px; font-size: calc(12.5px * var(--ts)); color: var(--muted); }
#dew-menu .brand-switch .seg button.on { color: var(--on-accent); }
/* BRAND-1: the switch is a menu row now, so its two sides are touch size and its lockup may shrink, never the switch */
#dew-menu .menu-brand { padding: 4px 6px 6px 10px; flex-wrap: nowrap; }
#dew-menu .menu-brand .brand-lockup { min-width: 0; overflow: hidden; }
#dew-menu .menu-brand .seg button { min-height: 36px; min-width: 44px; white-space: nowrap; }

/* the system ball (the AI launcher): just the symbol, filling the ball, with the text logo on a band
   across it. Meridian: the amber globe is the ball. Dew: the Dew ball with its leaf. */
#assistant { overflow: hidden; }   /* its size: --ball on #dock (css/dew.css) */
#assistant .ball-symbol { position: absolute; inset: 0; display: grid; place-items: center; }
#assistant .ball-symbol .leaf { width: 70%; height: 70%; margin: -6% 0 0 4%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
#assistant .ball-symbol .globe { width: 100%; height: 100%; display: block; }
#assistant .ball-name {
  position: absolute; left: 0; right: 0; top: 60%; display: flex; justify-content: center; padding: 3px 0;
  background: transparent; color: #f4f7ff; line-height: 0;   /* no band: the letters are seen against the ball itself */
}
#assistant .ball-name .wordmark { height: 10px; width: auto; }
/* Dew: the solid DEW and the outlined OS (js/wordmark.js) read on the ball's bright gradient by a soft shadow */
html:not([data-brand="meridian"]) #assistant .ball-name .wordmark { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
html[data-brand="meridian"] #assistant { background: transparent; border-color: transparent; }
html[data-brand="meridian"] #assistant .ball-name { background: rgba(11, 16, 14, .82); color: #e9e4d3; top: 54%; }
html[data-brand="meridian"] #assistant .ball-name .wordmark { height: 7.5px; }
html[data-brand="meridian"] #assistant .ball-name .wm-hi { color: #ffb020; }
@media (max-width: 760px) {
  #assistant .ball-name .wordmark { height: 9px; }
  html[data-brand="meridian"] #assistant .ball-name .wordmark { height: 6.5px; }
}

/* a name the person typed (js/brand.js): we never drew those letters, so the ball shows plain bold text */
#assistant .ball-name.wordmark-typed { line-height: 1.1; font: 800 9px/1.1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.brand-lockup .wordmark-typed { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Feedback: what goes with it (js/feedback-send.js) ---- */
/* Support Dew (js/support.js): three amounts, then the wallet's own sheet */
#support-pick, #version-ask, #ad-stop-ask { width: min(360px, calc(100vw - 32px)); padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: #0f1626; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#support-pick::backdrop, #version-ask::backdrop, #ad-stop-ask::backdrop { background: rgba(3,5,10,.6); }
#support-pick h2, #version-ask h2, #ad-stop-ask h2 { margin: 0 0 6px; font-size: calc(17px * var(--ts)); }
#support-pick p, #version-ask p, #ad-stop-ask p { margin: 0 0 14px; color: var(--muted); font-size: calc(13px * var(--ts)); }
.sp-amounts { display: flex; gap: 8px; margin-bottom: 12px; }
#support-pick button, #version-ask button, #ad-stop-ask button { font: inherit; font-weight: 700; border-radius: 8px; padding: 10px 12px; min-height: 40px; cursor: pointer; }
.sp-give { flex: 1; border: 0; background: var(--accent, #4a8cff); color: #fff; }
.sp-later { width: 100%; border: 1px solid var(--line); background: transparent; color: var(--text); }
/* the rename sheet (js/names.js): the logo, the candidate names, your own, and the one button that sends */
.rename-sheet { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(var(--kv-height, 100dvh) - 32px); overflow: auto; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--solid, #0f1626); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.rename-sheet::backdrop { background: rgba(3,5,10,.6); }
.rename-logo-slot { display: flex; justify-content: center; margin-bottom: 8px; }
.rename-logo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--tint), .08); font-size: 26px; font-weight: 800; overflow: hidden; }
.rename-logo .leaf { width: 70%; height: 70%; } .rename-logo .globe { width: 100%; height: 100%; }
.rename-sheet h2 { margin: 0 0 10px; font-size: calc(17px * var(--ts)); text-align: center; overflow-wrap: anywhere; }
.rename-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.rename-sheet button { font: inherit; font-weight: 700; border-radius: 8px; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.rename-pick { border: 1px solid var(--line); background: transparent; color: var(--text); }
.rename-pick.on { border-color: var(--accent, #4a8cff); box-shadow: inset 0 0 0 1px var(--accent, #4a8cff); }
.rename-own label { display: grid; gap: 4px; font-size: calc(13px * var(--ts)); color: var(--muted); margin-bottom: 12px; }
.rename-own input { font: inherit; min-height: 40px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); }
.rename-count { width: 100%; border: 0; background: var(--accent, #4a8cff); color: #fff; }
.rename-line, .rename-status { margin: 8px 0 0; font-size: calc(12px * var(--ts)); color: var(--muted); }
.rename-close { width: 100%; margin-top: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); }
/* the phone's own apps, when Dew is the Android app (js/phone-apps.js) */
#phone-apps { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(var(--kv-height, 100dvh) - 48px); padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #0f1626; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#phone-apps[open] { display: flex; flex-direction: column; gap: 10px; }
#phone-apps::backdrop { background: rgba(3,5,10,.6); }
#phone-apps h2:focus { outline: none; }
#phone-apps h2 { margin: 0; font-size: calc(17px * var(--ts)); }
.pa-filter { font: inherit; padding: 10px 12px; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); }
.pa-note { margin: 0; color: var(--muted); font-size: calc(12.5px * var(--ts)); }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; overflow-y: auto; min-height: 0; flex: 1; }
.pa-app { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; min-height: 88px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: calc(12px * var(--ts)); cursor: pointer; -webkit-touch-callout: none; user-select: none; }
.pa-app:hover, .pa-app:focus-visible { background: rgba(255,255,255,.08); }
.pa-app img { width: 48px; height: 48px; flex: none; }
.pa-app span { flex: none; line-height: 1.2; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#phone-apps button.pa-home, #phone-apps button.pa-close { font: inherit; font-weight: 700; border-radius: 8px; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.pa-home { border: 0; background: var(--accent, #4a8cff); color: #fff; }
.pa-close { border: 1px solid var(--line); background: transparent; color: var(--text); }
/* the dock's Phone apps button: words beside the icon where there is room, the icon alone on a phone */
body.phone-app #back { display: inline-flex; align-items: center; gap: 6px; }
body.phone-app #back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
@media (max-width: 760px) {
  body.phone-app #back { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
  body.phone-app #back .back-words { display: none; }
}
/* going back a version (js/versions.js): Not now first, the step that closes Dew on the right */
.sa-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fb-corner { margin: 0; font-size: calc(12.5px * var(--ts)); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.fb-tag { margin: -4px 0 0; font-size: calc(12.5px * var(--ts)); color: var(--muted); }
.fb-tag::before { content: "🏷️ "; }
/* "Feedback about this" (js/feedback-send.js): what it is about, and the "Sends also" items, each a button that leaves it out */
.fb-about { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-weight: 600; }
.fb-about[hidden], .fb-also[hidden] { display: none; }
.fb-also { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rim); background: rgba(var(--tint), .06); color: var(--text); font-size: calc(12.5px * var(--ts)); }
.fb-chip:hover { background: rgba(var(--tint), .12); }
.fb-chip.off { color: var(--muted); text-decoration: line-through; background: transparent; }
.fb-attach { display: flex; flex-wrap: wrap; gap: 8px; }
/* the shared pick part (kit/pick-picture) marks its host position: relative; a panel stays fixed */
.panel.kpp-host { position: fixed; }
.fb-media { display: flex; flex-direction: column; gap: 10px; }
.fb-thumb { margin: 0; border: 1px solid var(--rim); border-radius: 12px; overflow: hidden; background: rgba(var(--tint), .04); }
.fb-thumb img, .fb-thumb video { display: block; width: 100%; max-height: 190px; object-fit: contain; background: #000; }
.fb-thumb figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; }
.fb-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-edit { display: flex; flex-direction: column; gap: 8px; }
.fb-edit p { margin: 0; }
.fb-edit-area { position: relative; line-height: 0; }
.fb-edit-area canvas { width: 100%; height: auto; border-radius: 10px; cursor: crosshair; touch-action: none; }
.fb-sel { position: absolute; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; }
.fb-edit .solid { align-self: flex-start; }
/* the marks editor (js/mark-editor.js): the picture and a transparent canvas of the same size over it */
.fb-edit-area .fb-mark-top { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; touch-action: none; }
.fb-edit-area .fb-mark-base { display: block; }
.fb-marktools, .fb-markcols, .fb-markacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-markbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; }
.fb-markbtn[aria-pressed="true"], .fb-swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-markbtn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.fb-swatch { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--rim); background: var(--sw); color: transparent; display: inline-flex; align-items: center; justify-content: center; }
.fb-swatch svg { width: 22px; height: 22px; stroke-width: 3; }
.fb-swatch[aria-pressed="true"] { color: #000; }
.fb-swatch[data-colour="blue"][aria-pressed="true"] { color: #fff; }
.fb-markacts button { min-height: 44px; }
.fb-markacts button:disabled { opacity: .45; }
.fb-edit-area .fb-mark-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fb-keyhint { margin: 4px 0 0; }
.fb-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fb-markbtn, .fb-swatch { transition: none; } }
/* recording: a small bar at the top, and a circle wherever someone clicks */
.fb-recbar {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: var(--sheen), 0 10px 30px var(--shadow);
  font-size: calc(13px * var(--ts));
}
.fb-recdot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; animation: fb-blink 1s steps(2) infinite; }
@keyframes fb-blink { 50% { opacity: .25; } }
.fb-rectime { font-variant-numeric: tabular-nums; color: var(--muted); }
.fb-click {
  position: fixed; z-index: 95; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  border: 3px solid #ffd23f; background: rgba(255, 210, 63, .25); animation: fb-ring .7s ease-out forwards;
}
@keyframes fb-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---- the Feedback Hub (js/feedback-hub.js) ---- */
#panel-feedback-hub { width: min(1180px, calc(100% - 48px)); }
.hub { flex: 1; overflow: auto; padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.hub-label { display: block; font-size: calc(11px * var(--ts)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hub-top { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.hub-chosen, .hub-inv, .hub-rel { border: 1px solid var(--rim); border-radius: 14px; padding: 12px; background: rgba(var(--tint), .035); box-shadow: var(--sheen); }
.hub-chosen { display: flex; flex-direction: column; gap: 6px; }
.hub-chosen p { margin: 0; }
.hub-art { font-size: 34px; line-height: 1; }
.hub-base, .hub-field select, .hub-field input {
  width: 100%; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--solid); color: var(--text); font: inherit;
}
.hub-packs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hub-inv.over, .hub-rel.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.hub-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--tint), .05); color: var(--text); font: inherit; font-size: calc(12.5px * var(--ts)); cursor: grab; white-space: nowrap;
}
.hub-inv .hub-chip { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.hub-x { color: var(--muted); }
.hub-relhead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.hub-relhead .hub-label { margin: 0; }
.hub-range { flex: 1; min-width: 120px; max-width: 320px; accent-color: var(--accent); }
.hub-bar { display: flex; align-items: center; gap: 10px; }
.hub-order { margin-right: auto; }
.hub-menu { position: relative; }
.hub-menu summary { list-style: none; cursor: pointer; display: inline-block; }
.hub-menu summary::-webkit-details-marker { display: none; }
.hub-pop {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: 250px; display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: var(--sheen), 0 18px 40px var(--shadow);
}
.hub-more .hub-pop { left: auto; right: 0; }
.hub-pop p { margin: 0; }
.hub-field { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--ts)); color: var(--muted); }
.hub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.hub-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hub-col h3 { margin: 0 0 2px; font-size: calc(14px * var(--ts)); font-family: var(--font-head); text-transform: var(--head-case); letter-spacing: var(--head-track); color: var(--head-colour); }
.hub-feature h3::before { content: "💡 "; }
.hub-bug h3::before { content: "🐞 "; }
.hub-item { display: flex; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint), .035); }
.hub-thumb {
  position: relative; flex: none; width: 96px; height: 64px; padding: 0; border-radius: 8px; border: 1px solid var(--line); overflow: hidden;
  background: rgba(var(--tint), .06); display: grid; place-items: center; font-size: 22px; cursor: zoom-in;
}
.hub-thumb img, .hub-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-thumb.none { opacity: .55; cursor: default; }
/* "Feedback about this": the part's outline over the picture, the line naming the part, the project's keepers (Feedback Hub, RF4) */
.hub-thumb.outlined img { object-fit: contain; }
.hub-outline { position: absolute; box-sizing: border-box; border: 2px solid #ffd23f; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); pointer-events: none; }
.hub-outline[hidden] { display: none; }
.hub-about { margin: 0; font-size: calc(12.5px * var(--ts)); font-weight: 600; overflow-wrap: anywhere; }
.hub-keepers { margin: 0; }
.hub-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 1px 4px #000; }
.hub-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hub-words { margin: 0; overflow-wrap: anywhere; }
.hub-meta { margin: 0; font-size: calc(12px * var(--ts)); color: var(--muted); }
.hub-badge { display: inline-block; padding: 0 7px; border-radius: 999px; border: 1px solid var(--rim); font-size: calc(11px * var(--ts)); color: var(--muted); }
.hub-badge.on { border-color: var(--ok); color: var(--ok); }
.hub-badge.warn { border-color: var(--warn); color: var(--warn); width: fit-content; }
.hub-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* full size, and the fix stub: over the hub */
.hub-over { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.hub-light-frame { position: relative; max-width: 100%; }
.hub-light-frame img, .hub-light-frame video { display: block; max-width: 100%; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); border-radius: 10px; }
.hub-light-frame > .close { position: absolute; top: -14px; right: -14px; margin: 0; background: var(--glass-strong); }
.hub-light-cap { margin: 8px 0 0; color: #fff; max-width: 760px; text-align: center; }
.hub-dots { position: absolute; inset: 0; pointer-events: none; }
.hub-dot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #ffd23f; background: rgba(255, 210, 63, .25); }
.hub-fix-card {
  position: relative; width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 18px 20px; border-radius: var(--radius);
  background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: var(--sheen), 0 24px 60px var(--shadow);
}
.hub-fix-card > .close { position: absolute; top: 12px; right: 12px; }
.hub-fix-card h3 { margin: 0 40px 8px 0; font-family: var(--font-head); text-transform: var(--head-case); letter-spacing: var(--head-track); }
.hub-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
/* the login */
.hub-login { width: min(360px, 100%); margin: 40px auto; display: flex; flex-direction: column; gap: 10px; }
.hub-login h3, .hub-login p { margin: 0; }
.hub-login input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--solid); color: var(--text); font: inherit; }
.hub-lock { font-size: 34px; }
.hub-login .solid { align-self: flex-start; }
/* Feedback Hub: tabs, and the Names view */
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; }   /* four tabs wrap to two rows on a phone; names show whole (words-fit-their-space) */
.hub-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; cursor: pointer; }
.hub-tab.on { border-color: var(--rim); color: var(--text); background: rgba(var(--tint), .08); }
.hub-name-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hub-name-row { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint), .035); min-width: 0; }
.hub-name-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hub-name-art { font-size: 22px; }
.hub-name-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.hub-name { overflow-wrap: anywhere; }
.hub-name.lead { color: var(--text); }
.hub-name-mark { display: inline-grid; place-items: center; min-width: 1.6em; border-radius: 6px; border: 1px solid var(--line); font-size: .8em; }
.hub-came { margin: 6px 0 0; }
.hub-names { display: flex; flex-direction: column; gap: 10px; }
.hub-names p { margin: 0; }
/* Decisions tab (Feedback Hub project, hub/decisions.js): the open board rows beside the feedback */
.hub-decisions { display: flex; flex-direction: column; gap: 10px; }
.hub-dec-cats { flex-wrap: wrap; }
.hub-dec, .hub-dec-fb { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint), .035); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hub-dec p, .hub-dec-fb p { margin: 0; overflow-wrap: anywhere; }
.hub-dec-q { color: var(--text); }
.hub-dec-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-dec-note { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; color: var(--text); background: rgba(var(--tint), .05); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
@media (max-width: 760px) {
  #panel-feedback-hub { width: calc(100% - 16px); }
  .hub { padding: 12px; }
  .hub-top, .hub-cols { grid-template-columns: 1fr; }
  .hub-thumb { width: 76px; height: 54px; }
}

/* ---- The ad maker (js/ad-maker.js): the steps on the left, the ad as it will look on the right ---- */
#panel-ads { width: min(980px, calc(100% - 48px)); }
.am-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.am-form { overflow: auto; padding: 6px 22px 22px; }
.am-side { overflow: auto; padding: 16px 18px; border-left: 1px solid var(--line); }
.am-step { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.am-step:last-child { border-bottom: 0; }
.am-step h3, .am-side h3 { margin: 0 0 10px; font-size: calc(15px * var(--ts)); }
.am-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: calc(13px * var(--ts)); color: var(--muted); }
.am-field input:not([type=range]):not([type=checkbox]), .am-field textarea, .am-field select {
  font: inherit; font-size: calc(14px * var(--ts)); color: var(--text); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint), .06); }
.am-field textarea { resize: vertical; }
.am-field output { color: var(--text); font-weight: 650; }
.am-row { display: flex; gap: 16px; flex-wrap: wrap; }
.am-row > .am-field { flex: 1 1 180px; }
.am-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.am-things, .am-places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.am-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.am-chip.on { border-color: var(--accent); background: rgba(var(--tint), .1); font-weight: 650; }
.am-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 8px; border-radius: 10px; border: 1px solid var(--line); font-size: calc(13.5px * var(--ts)); }
.am-check.off { opacity: .55; }
.am-check small { color: var(--muted); }
.am-pic { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.am-pic img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.am-pic-add { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; margin: 0 0 12px; cursor: pointer; }
.am-note { margin: 0 0 12px; color: var(--muted); font-size: calc(12.5px * var(--ts)); }
.am-reach, .am-quote { margin: 4px 0 8px; font-weight: 650; }
.am-more { margin: 4px 0 8px; }
.am-more summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.am-next, .am-publish { min-height: 44px; padding: 10px 22px; margin-top: 4px; }
.am-publish:disabled { opacity: .5; cursor: not-allowed; }
.am-problems { margin: 0 0 12px; padding-left: 20px; font-size: calc(13.5px * var(--ts)); }
.am-problems li { margin: 3px 0; }
.am-problems li.ok { list-style: "✓  "; color: var(--muted); }
.am-problems li.wait { list-style: "⏳  "; color: var(--muted); }
.am-prev { display: grid; grid-template-columns: 64px 1fr; gap: 10px 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--tint), .05); margin: 0 0 8px; }
.am-prev-art { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 30px; overflow: hidden; }
.am-prev-art img { width: 100%; height: 100%; object-fit: cover; }
.am-prev-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: calc(13px * var(--ts)); overflow-wrap: anywhere; }
.am-prev-words small { color: var(--muted); }
.am-prev-label { align-self: flex-start; font-size: calc(11px * var(--ts)); font-weight: 700; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.am-prev-btn { grid-column: 1 / -1; justify-self: end; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 650; font-size: calc(13px * var(--ts)); }
.am-mine summary { cursor: pointer; font-weight: 650; padding: 8px 0; }
.am-mine ul { list-style: none; margin: 0; padding: 0; }
.am-mine li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(13px * var(--ts)); }
.am-mine li span { color: var(--muted); }
.am-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.am-acts button { min-height: 34px; padding: 4px 12px; }
@media (max-width: 760px) {
  .am-body { grid-template-columns: 1fr; overflow: auto; }
  .am-form, .am-side { overflow: visible; }
  .am-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* Win+D's first press: a short note in the bottom-left corner, where the Windows key sits
   (js/win-programs.js). Clicks pass through it (nothing-covers-what-you-press.md). */
#corner-hint {
  position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 9000; pointer-events: none; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--glass-strong); color: var(--text); backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  font-size: calc(14px * var(--ts, 1)); line-height: 1.3;
}
#corner-hint .ch-key {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--line); border-bottom-width: 3px; background: rgba(var(--tint), .08); font-size: 18px;
}
#corner-hint.go { animation: corner-hint-in var(--mo-base, .2s) ease-out; }
@keyframes corner-hint-in { from { opacity: 0; transform: translate(-8px, 8px); } to { opacity: 1; transform: none; } }
/* the order of the search fields (SP1, js/search-order-ui.js): one line each, dragged or moved by the arrows */
.so-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.so-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--tint), .05); cursor: grab; }
.so-row.dragging { opacity: .5; }
.so-mark { width: 1.4em; text-align: center; color: var(--muted); }
.so-name { flex: 1; min-width: 0; }
.so-row button { min-width: 36px; min-height: 36px; padding: 0 8px; }

/* OD1: the windows the "Try on …" pill opens. The Install window is taller than the screen, and "All downloads" scrolls
   it to the files, which used to carry the header with its ✕ out of sight. Now the header stays and the words scroll
   under it; the ✕ is a finger's width (no-accidental-taps.md); js/offer-close.js adds Esc, a press outside, focus back. */
#panel-install { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
#panel-install > header, #panel-download > header { position: sticky; top: 0; z-index: 3; flex: none; background: var(--glass-strong); backdrop-filter: blur(18px); }
#panel-install .win-btns, #panel-download .win-btns { align-items: center; }
#panel-install .win-btns .close, #panel-download .win-btns .close { width: 44px; height: 44px; }