/* ============================================================
   Widgets band — top of the center (bookmark) pane, Favorites tab only.
   Toggled by the "Show Widgets" button in the bookmark-pane header.
   When ON it claims a FIXED top 1/3 of the pane and shows a carousel of
   "decks" (3 slots each, up to 4 decks = 12 widgets). Owned by
   src/widgets/widgets.js. Marker tokens (emerald accent, OKLCH). Own ?v=.
   ============================================================ */

/* ---- the band itself (first child of .content, above .folder-block) ---- */
.widgets-block {
  /* 200px band from the top. flex-shrink 1 so the band's BOX can shrink under the rising
     Activities shutter (the folder-block has a much larger flex-shrink, so it collapses
     first — the shutter covers the bookmark pane, then the widgets). The .widgets content
     inside keeps its full height and is clipped here, so the band is COVERED, not squished.
     NO padding here: a flex item can't shrink below its own padding, so any padding would
     leave a sliver the shutter could never cover. The 10px bottom breathing gap lives on
     .widgets instead (height = band - 10px), so it gets clipped away with everything else. */
  flex: 0 1 var(--widgets-h, 200px);
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.widgets-block[hidden] {
  display: none !important;
}

.widgets {
  /* Keep the widgets at their FULL natural height and pinned to the TOP of the band, even
     while the band's flex-basis shrinks under the rising Activities shutter. The band
     (overflow:hidden) then CLIPS this content from the bottom, so the shutter looks like it
     slides OVER fixed widgets instead of squishing them — same feel as covering the bookmark
     pane. height = band height minus a 10px bottom breathing gap (the band carries no padding
     of its own so it can collapse fully to 0 — see .widgets-block). */
  flex: 0 0 auto;
  height: calc(var(--widgets-h, 200px) - 10px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- the deck: 3 slots in a centered, horizontally-expanding row.
       position: relative so the carousel arrows/dots can overlay it ---- */
.wg-deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;   /* expand on large screens, but stay sane */
  margin: 0 auto;      /* ALWAYS centered */
}

.wg-slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
}
.wg-slot.is-blank {
  visibility: hidden;
}

/* ---- empty slot: dotted container + circled plus ---- */
.wg-add {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.wg-add:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.wg-add-circle {
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
}
.wg-add-label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---- filled slot: a widget card (no header — controls overlay on hover) ---- */
.wg-widget {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* settings + remove float over the top-right corner, revealed on hover only (no space) */
.wg-widget-controls {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  gap: 3px;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wg-widget:hover .wg-widget-controls,
.wg-widget:focus-within .wg-widget-controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wg-widget-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wg-widget-btn svg { display: block; }
.wg-widget-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border-strong);
}
.wg-widget-btn[data-act="remove"]:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}
.wg-widget-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* placeholder body until each widget's real content lands (Phase 4) */
.wg-placeholder {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
}
.wg-placeholder span {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- carousel nav: arrows pinned to the deck's left/right edges (vertically
       centered) + dots pinned bottom-center, all OVERLAID on the deck (no layout
       space) and revealed only while hovering the widgets ---- */
.wg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wg-arrow-prev { left: 6px; }
.wg-arrow-next { right: 6px; }
.wg-deck:hover .wg-arrow,
.wg-arrow:focus-visible { opacity: 1; }
.wg-arrow:hover { color: var(--ink); border-color: var(--border-strong); }
.wg-arrow:disabled { display: none; }   /* hide rather than dim at the ends */

.wg-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.wg-deck:hover .wg-dots,
.wg-dots:focus-within { opacity: 1; }
.wg-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.wg-dot.is-on {
  width: 18px;
  background: var(--accent);
}

/* ---- "Show Widgets" toggle (sits at the right of .block-head) ---- */
.widgets-toggle {
  align-self: center;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.widgets-toggle:hover {
  color: var(--ink);
}
.widgets-toggle .wg-toggle-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.widgets-toggle .wg-switch {
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  position: relative;
  transition: background var(--dur) var(--ease);
}
.widgets-toggle .wg-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
/* On/off changes ONLY the switch — text, border, and background stay put. */
.widgets-toggle[aria-checked="true"] .wg-switch {
  background: var(--accent);
}
.widgets-toggle[aria-checked="true"] .wg-switch::after {
  transform: translateX(12px);
}

/* ---- widget picker modal (reuses app .modal / .btn) ---- */
.wg-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 14px;
}
.wg-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.wg-pick:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.wg-pick-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 2px;
}
.wg-pick-name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}
.wg-pick-desc {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ============================================================
   Per-widget content (each widget file renders into .wg-widget-body)
   ============================================================ */

/* shared bits used by widget settings dialogs */
.wg-row2 { display: flex; gap: 16px; flex-wrap: wrap; }
.wg-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--ink); cursor: pointer; }
.wg-check input { accent-color: var(--accent); }
.wg-link {
  border: 0; background: none; color: var(--accent-text); font-weight: 600;
  font-size: var(--fs-sm); cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm);
}
.wg-link:hover { background: var(--accent-soft); }
.wg-search-row { display: flex; gap: 8px; }
.wg-search-row .field-input { flex: 1 1 auto; }

/* ---- Clock ---- */
.wg-clock {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px; text-align: center; color: var(--ink);
}
.wg-clock-label { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.04em; }
.wg-clock-time { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.wg-clock-date { font-size: var(--fs-sm); color: var(--muted); }
.wg-clock-zone { font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; }
.wg-clock-analog { gap: 6px; }
.wg-clock-face { width: min(70%, 130px); height: auto; aspect-ratio: 1; }
.wg-clock-rim { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.wg-clock-tick { fill: var(--faint); }
.wg-clock-hour { stroke: var(--ink); }
.wg-clock-min { stroke: var(--ink); }
.wg-clock-sec { stroke: var(--accent); }
.wg-clock-pin { fill: var(--accent); }
.wg-clock-sub { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Pomodoro ---- */
.wg-pomo {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px; text-align: center;
}
.wg-pomo-phase { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-text); }
.wg-pomo-phase span { color: var(--faint); font-weight: 500; }
.wg-pomo-break .wg-pomo-phase, .wg-pomo-long .wg-pomo-phase { color: var(--muted); }
.wg-pomo-time { font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.wg-pomo-btns { display: flex; gap: 6px; margin-top: 2px; }
.wg-pomo-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.wg-pomo-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.wg-pomo-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.wg-pomo-btn.primary:hover { background: var(--accent-hover); }

/* ---- Weather ---- */
.wg-weather {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px; text-align: center; color: var(--ink);
}
.wg-weather-top { display: flex; align-items: center; gap: 8px; }
.wg-weather-ico { color: var(--accent-text); display: grid; place-items: center; }
.wg-weather-temp { font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-weather-temp span { font-size: 0.5em; font-weight: 600; color: var(--muted); vertical-align: super; }
.wg-weather-cond { font-size: var(--fs-sm); color: var(--ink); }
.wg-weather-place { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.wg-weather-meta { font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; }
.wg-weather-msg { gap: 8px; color: var(--muted); font-size: var(--fs-sm); }
.wg-wx-results { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; max-height: 160px; overflow: auto; }
.wg-wx-opt { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); padding: 7px 10px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.wg-wx-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.wg-wx-hint { font-size: var(--fs-sm); color: var(--muted); padding: 4px 2px; }
.wg-wx-chosen { margin: 4px 0; }
.wg-wx-chip { display: inline-block; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border-radius: var(--r-pill); padding: 4px 12px; }

/* ---- Photos ---- */
.wg-photos { flex: 1 1 auto; position: relative; min-height: 0; }
.wg-photos-img { width: 100%; height: 100%; display: block; object-position: center; background: var(--surface-2); }
.wg-photos-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 5px; }
.wg-photos-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.55); box-shadow: 0 0 2px rgb(0 0 0 / 0.4); }
.wg-photos-dot.on { background: #fff; }
.wg-photos-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.wg-ph-uploadrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wg-ph-upload { cursor: pointer; }
.wg-ph-note { font-size: var(--fs-xs); color: var(--faint); }
.wg-ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; max-height: 220px; overflow: auto; }
.wg-ph-cell { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.wg-ph-cell img { width: 100%; height: 100%; object-fit: cover; }
.wg-ph-missing { width: 100%; height: 100%; display: grid; place-items: center; color: var(--faint); }
.wg-ph-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.wg-ph-del:hover { background: var(--danger); }

/* ---- Countdown ---- */
.wg-cd {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 8px; text-align: center; color: var(--ink);
}
.wg-cd-title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-cd-num { font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.02; }
.wg-cd.is-today .wg-cd-num { color: var(--accent); font-size: clamp(1.5rem, 6vw, 2.1rem); }
.wg-cd.is-past .wg-cd-num { color: var(--muted); }
.wg-cd-unit { font-size: var(--fs-xs); color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
.wg-cd-date { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.wg-cd-empty { gap: 4px; }
.wg-cd-empty-ico { color: var(--faint); }
.wg-cd-empty-txt { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.wg-cd-empty-sub { font-size: var(--fs-xs); color: var(--faint); }

/* ---- Habit / streak ---- */
.wg-habit {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px; text-align: center; color: var(--ink);
}
.wg-habit-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-habit-streak { display: inline-flex; align-items: baseline; gap: 4px; opacity: 0.5; }
.wg-habit-streak.is-live { opacity: 1; }
.wg-habit-flame { font-size: 1.05rem; align-self: center; }
.wg-habit-count { font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.wg-habit-lbl { font-size: var(--fs-xs); color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
.wg-habit-week { display: flex; gap: 5px; }
.wg-habit-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; padding: 2px; cursor: pointer;
}
.wg-habit-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wg-habit-day.is-done .wg-habit-dot { background: var(--accent); border-color: var(--accent); }
.wg-habit-day.is-today .wg-habit-dot { border-color: var(--accent); }
.wg-habit-day:hover .wg-habit-dot { border-color: var(--accent); }
.wg-habit-dow { font-size: 10px; color: var(--faint); }
.wg-habit-mark {
  margin-top: 2px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wg-habit-mark:hover { border-color: var(--border-strong); color: var(--ink); }
.wg-habit-mark.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

/* ---- Mini calendar ---- */
.wg-cal { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; min-height: 0; color: var(--ink); }
.wg-cal-head { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wg-cal-title {
  border: 0; background: none; font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm);
}
.wg-cal-title:hover { background: var(--accent-soft); color: var(--accent-text); }
.wg-cal-nav {
  width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); border-radius: var(--r-sm); cursor: pointer;
  font-size: 15px; line-height: 1;
}
.wg-cal-nav:hover { border-color: var(--border-strong); color: var(--ink); }
.wg-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); }
.wg-cal-dow { text-align: center; font-size: 10px; font-weight: 600; color: var(--faint); text-transform: uppercase; }
.wg-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); flex: 1 1 auto; min-height: 0; }
.wg-cal-day { display: grid; place-items: center; }
.wg-cal-day i {
  display: grid; place-items: center; width: 1.75em; height: 1.75em; font-style: normal;
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--ink); border-radius: 50%;
}
.wg-cal-day.is-today i { background: var(--accent); color: var(--accent-fg); font-weight: 700; }

/* ---- motion-reduced ---- */
@media (prefers-reduced-motion: reduce) {
  .widgets-toggle,
  .widgets-toggle .wg-switch,
  .widgets-toggle .wg-switch::after,
  .wg-add,
  .wg-pick,
  .wg-dot,
  .wg-widget-controls,
  .wg-arrow,
  .wg-dots,
  .wg-habit-dot,
  .wg-habit-mark {
    transition: none;
  }
}