/* dashboard.css — board + widget chrome for the configurable clock dashboard.
   Palette custom properties are set at runtime by MD.theme.applyThemeVars(). */
:root {
  --bg-top: #0a1322; --bg: #060a14; --bg2: #040912;
  --ink: rgba(255,255,255,.76); --dim: rgba(255,255,255,.45); --faint: rgba(255,255,255,.24);
  --accent: #5cd9ff; --accent-soft: rgba(92,217,255,.55); --glow: 0 0 16px rgba(92,217,255,.32);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  overflow: hidden; -webkit-text-size-adjust: 100%;
}

.stage { position: fixed; inset: 0; }
.board { position: absolute; inset: 0; overflow: hidden; }
.board-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* each widget is an absolutely-positioned box; the model drives transform + size.
   No transition in this milestone (layout switches are instant, matching the original);
   motion (M5) will introduce a deliberate transition on an inner .lift element. */
/* Widgets ease into place on drop/swap/layout-change (transform only — never width/height, which
   would scale the fixed-resolution canvas and blur it). The live-dragged widget opts out so it
   tracks the cursor 1:1; boot and resize opt out via body.no-anim; reduced-motion opts out fully. */
.widget {
  position: absolute; top: 0; left: 0; overflow: visible; touch-action: none;
  will-change: transform;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .2s ease;
}
/* .lift carries the M5 bounce (vertical hop + shadow) independently of the host's slot transform */
.lift { position: absolute; inset: 0; will-change: transform, filter; }
/* canvas bleeds past the host box (size + offset set in widgets.js measure()) so dial
   shadows/glow are not clipped; pointer-events off so board-background taps fall through. */
.widget-canvas { position: absolute; display: block; pointer-events: none; }
/* drift bounce: lift off, shadow swells, then land with a small overshoot */
@keyframes md-hop {
  0%   { transform: translateY(0);     filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .30)); }
  45%  { transform: translateY(-15px); filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .55)); }
  100% { transform: translateY(0);     filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0)); }
}
.widget.hopping .lift { animation: md-hop .6s cubic-bezier(.34, 1.2, .5, 1); }
@media (prefers-reduced-motion: reduce) { .widget.hopping .lift { animation: none; } }
.widget:focus { outline: none; }
.widget:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* picked up: follows the cursor with no easing, lifted off the board with a soft shadow */
.widget.dragging { z-index: 50 !important; cursor: grabbing; transition: filter .15s ease; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); }
body.no-anim .widget { transition: none; }
@media (prefers-reduced-motion: reduce) { .widget { transition: none; } }

/* edit mode: reveal each widget as a movable object */
body.editing .widget { cursor: grab; }
body.editing .widget::after {
  content: ""; position: absolute; inset: 6%; border: 1px dashed var(--faint); border-radius: 50%;
  pointer-events: none;
}
body.free-mode.editing .widget { cursor: move; }

/* resize grip — only meaningful (and shown) in free mode, on hover or in edit mode */
.handle {
  position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; z-index: 51;
  border: 1px solid var(--accent-soft); border-radius: 3px; cursor: nwse-resize; display: none;
  background: color-mix(in srgb, var(--bg2) 70%, var(--accent) 30%);
}
body.free-mode .widget:hover .handle,
body.free-mode.editing .handle { display: block; }

/* snap-target ghost shown while dragging in a snap layout — glides between seats as you move */
.ghost { position: absolute; top: 0; left: 0; border: 1.5px dashed var(--accent-soft); border-radius: 50%; pointer-events: none; z-index: 40; opacity: .8; transition: transform .14s ease, opacity .14s ease; }
@media (prefers-reduced-motion: reduce) { .ghost { opacity: .9; transition: none; } }

/* control panel (auto-hides; persistent for keyboard users) */
.control-panel {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  z-index: 6;
  display: grid; gap: 4px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
body.controls-visible .control-panel,
body.keyboard-controls .control-panel:focus-within { opacity: 1; transform: translateY(0); pointer-events: auto; }
.picker {
  display: flex; gap: 3px; padding: 3px;
  border: 1px solid var(--faint); border-radius: 4px;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.theme-picker, .action-picker, .saved-picker { width: max-content; }
.saved-picker:empty { display: none; }
.picker button {
  min-height: 28px; padding: 0 9px; border: 1px solid transparent; border-radius: 2px;
  background: transparent; color: var(--dim); font: 700 9px/1 "JetBrains Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.picker button:hover { color: var(--ink); }
.picker button[aria-pressed="true"] {
  border-color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); text-shadow: var(--glow);
}
.picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 420px) { .picker button { padding-inline: 6px; font-size: 7px; letter-spacing: .025em; } }
@media (prefers-reduced-motion: reduce) { .control-panel { transition: none; } }

/* "drag to rearrange" discoverability hint — unobtrusive, auto-fades, dismissible.
   Matches the panel chrome; hidden via [hidden] until shown, then fades out or is dismissed. */
.hint {
  position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(6px);
  z-index: 6; display: flex; align-items: center; gap: 8px;
  max-width: min(92vw, 560px); padding: 6px 8px 6px 12px;
  border: 1px solid var(--faint); border-radius: 6px;
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  color: var(--dim); font: 600 10px/1.3 "JetBrains Mono", monospace; letter-spacing: .02em;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.hint.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.hint kbd {
  display: inline-block; padding: 0 4px; border: 1px solid var(--faint); border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  font: inherit; font-weight: 700; line-height: 1.5;
}
.hint-close {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer;
}
.hint-close:hover { color: var(--ink); }
.hint-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .hint { transition: none; } }

/* back-to-gallery affordance */
.help {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 6;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--dim); text-decoration: none; font-weight: 700; font-size: 18px;
  border: 1px solid var(--faint); border-radius: 4px;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
}
.help:hover { color: var(--accent); }
.help:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* readout retained for parity/debug but visually hidden */
.readout, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}