/* ============================================================
   SparkBox dashboard — border / separation refinement
   ------------------------------------------------------------
   GOAL (Tom's note): "I don't love how the small thin borders of
   different modules look against each other." The dashboard has
   too many edges fighting each other — and several of them are
   DOUBLED (a 1px CSS border + the 1px ring baked into --elev-1
   sitting on the exact same edge).

   DIRECTION: finish the pattern the codebase already adopted.
   Inside the Home bento, .gauge-card / .running-row / .network-item
   were already migrated to "borderless fill + one soft shadow."
   Only .media-tile and the Apps-page .app-card still carry a second,
   explicit hairline. This file finishes that migration so every
   module separates by ONE intentional edge — never two.

   All values are token-based and resolve correctly in BOTH the dark
   palette and every light variant, because --border / --bg-* /
   --elev-* are redefined per theme. No hardcoded colors.

   Loaded LAST (after style/main/themes.css) so it finishes the
   borderless-nested-panel pattern the codebase already started, by
   collapsing every doubled edge to a single intentional one.
   ============================================================ */

:root {
  /* One tunable hairline used everywhere a module needs an edge.
     Softer than the default --border so adjacent seams read as a
     single calm line instead of a hard cell grid. Theme-derived:
     in dark it's the existing low-alpha white hair; light variants
     override --border-soft to a low-alpha black, so it adapts. */
  --module-hairline: var(--border-soft);

  /* Slightly lifted single-shadow elevation for nested panels:
     ambient depth WITHOUT the inset 1px ring that --elev-1 carries.
     This is what lets a tile sit inside a card with zero doubled
     edge — separation comes from the fill + a soft drop, not a line. */
  --elev-flat: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Light themes: on white surfaces a tone-only well nearly disappears
   (the recessed --bg-0 is only ~3% off the white card). So in light
   mode --elev-flat KEEPS one soft hairline ring — still a single edge,
   never doubled, but visible. Dark mode stays ring-free and calm. */
:root[data-theme^="light"] {
  --elev-flat: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--border);
}

/* ------------------------------------------------------------------
   1. OUTER BENTO CARDS — keep their single ring, soften the internal
      header divider, and make it theme-safe.
      BEFORE: .bento-card-header used hardcoded rgba(255,255,255,0.04),
      a WHITE hairline that vanishes on light backgrounds (one of the
      "borders that look wrong" cases). Use the soft token instead.
   ------------------------------------------------------------------ */
.bento-card-header {
  border-bottom: 1px solid var(--module-hairline);
}

/* ------------------------------------------------------------------
   2. MEDIA STAT TILES (#home-media .media-tile) — the worst
      card-in-card. BEFORE: --bg-2 fill PLUS a full 1px --border,
      nested directly inside .bento-card's own ring → a hard box
      drawn inside another hard box.
      AFTER: match the gauge/running/network pattern already in the
      code — recessed --bg-0 fill, no border, one soft shadow. The
      tile reads as a pressed-in well, separated by tone, not a line.
      (ID specificity 1-1-1, loaded last → wins over main.css:166.)
   ------------------------------------------------------------------ */
#home-media .media-tile {
  background: var(--bg-0);
  border: 1px solid transparent;     /* keep layout box; hairline removed */
  box-shadow: var(--elev-flat);
}
/* Light mode: --bg-0 is barely off-white, so a tone-only well vanishes.
   Use the more-contrasty --bg-2 fill (the original light value) AND the
   light --elev-flat hairline ring — both work together to define the
   tile without the doubled border. */
:root[data-theme^="light"] #home-media .media-tile {
  background: var(--bg-2);
}
#home-media a.media-tile-link:hover {
  background: var(--bg-2);
  border-color: var(--accent-soft);  /* hover reveals ONE accent edge */
}

/* ------------------------------------------------------------------
   3. RUNNING ROWS inside the bento — already borderless, but they
      stack on --elev-1 (which re-adds a ring per row → a ladder of
      hairlines in a scrolling list). Swap to the flat single shadow
      so the list reads as soft separated rows, not a stack of boxes.
   ------------------------------------------------------------------ */
.bento-card .running-row {
  box-shadow: var(--elev-flat);
}
.bento-card .running-row:hover {
  box-shadow: var(--elev-flat);
  background: var(--bg-1);
}

/* Gauge sub-tiles: same treatment — they currently carry --elev-1's
   ring inside the System card, doubling against the card edge. */
.bento-system .gauge-card {
  box-shadow: var(--elev-flat);
}
.bento-system .gauge-card:hover {
  box-shadow: var(--elev-flat);
}

/* ------------------------------------------------------------------
   4. APP CARDS (Apps page) — BEFORE: border:1px solid --border AND
      box-shadow:var(--elev-1) (which contains 0 0 0 1px --border) →
      a literally DOUBLED hairline, repeated across a tight 1rem grid
      so every seam between cards is a fat 2px-reading line.
      AFTER: drop the explicit border, keep ONE ring via elev-1. Cards
      now separate by a single clean hairline + the grid gap. Hover
      lifts with a real drop shadow + one accent ring (no border jump).
   ------------------------------------------------------------------ */
.app-card {
  border: 1px solid transparent;     /* preserve box model; ring does the line */
}
.app-card:hover {
  border-color: transparent;
  box-shadow: var(--elev-2);
}
.app-card.enabled {
  /* one violet ring instead of border + ring + soft-ring stack */
  border-color: transparent;
  box-shadow: var(--elev-1), 0 0 0 1px var(--accent);
}
.app-card.required {
  border-color: transparent;
  box-shadow: var(--elev-1), 0 0 0 1px var(--live);
}

/* Give the apps grid a touch more breathing room so cards read as
   distinct objects on the page rather than a dense ruled table. */
.apps-grid { gap: 1.25rem; }

/* ------------------------------------------------------------------
   5. NETWORK ITEMS — already borderless --bg-0 wells, but flat (no
      depth) so they read as painted rectangles. A whisper of the
      flat shadow makes them feel intentionally recessed and matches
      the gauge/tile/row family. Consistency = "premium."
   ------------------------------------------------------------------ */
.network-item {
  box-shadow: var(--elev-flat);
}

/* ------------------------------------------------------------------
   6. MEDIA tiles grid + section rhythm — tighten the gap so tiles
      group as one unit, and normalize section spacing to a single
      scale step so the Media card doesn't feel like loose fragments.
   ------------------------------------------------------------------ */
#home-media .media-tiles { gap: 0.75rem; }

/* ============================================================
   Home status hero + calmer activity feed (design audit 2026-06-10)
   Loaded last so these win. Uses existing theme tokens.
   ============================================================ */
.home-status-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--bg-1);
  border-radius: 14px;
  box-shadow: var(--elev-1);
  border-left: 3px solid var(--border-strong);
}
.home-status-hero.hsh-ok   { border-left-color: hsl(142, 71%, 50%); background: linear-gradient(90deg, rgba(34,197,94,0.06), transparent 60%); }
.home-status-hero.hsh-warn { border-left-color: hsl(38, 92%, 55%);  background: linear-gradient(90deg, rgba(245,158,11,0.07), transparent 60%); }
.home-status-hero.hsh-wait { border-left-color: var(--accent); }
.hsh-health { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hsh-icon {
  font-size: 1.6rem; line-height: 1; flex-shrink: 0;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.hsh-ok   .hsh-icon { color: hsl(142, 71%, 60%); background: rgba(34,197,94,0.12); }
.hsh-warn .hsh-icon { color: hsl(38, 92%, 60%);  background: rgba(245,158,11,0.12); }
.hsh-wait .hsh-icon { color: var(--accent-hover); background: var(--accent-soft); }
.hsh-title { font-size: 1.12rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.hsh-sub   { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.hsh-sub-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hsh-sub-link:hover { opacity: 0.85; }
.hsh-cta { text-align: right; flex-shrink: 0; }
.hsh-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 0.9rem; color: #fff;
  background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.hsh-btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }
.hsh-btn-upgrade { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.hsh-btn-icon { font-size: 1rem; }
.hsh-cta-note { font-size: 0.7rem; color: var(--text-muted); margin-top: 5px; max-width: 320px; }

/* ============================================================
   First-steps card (onboarding wave 2026-06-11): dismissible
   "what now" guidance shown after the setup wizard completes.
   ============================================================ */
.first-steps-card {
  position: relative;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--bg-1);
  border-radius: 14px;
  box-shadow: var(--elev-1);
  border-left: 3px solid var(--accent);
}
.first-steps-card.hidden { display: none; }
.first-steps-title { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 12px; padding-right: 32px; }
.first-steps-dismiss {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border-radius: 8px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1.2rem; line-height: 1;
}
.first-steps-dismiss:hover { background: var(--bg-0); color: var(--text); }
.first-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.first-steps-step {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-0); border: 1px solid var(--border-strong);
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.first-steps-step:hover { border-color: var(--accent); transform: translateY(-1px); }
.first-steps-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-hover);
  font-size: 0.78rem; font-weight: 700; margin-bottom: 2px;
}
.first-steps-step-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.first-steps-step-sub { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.first-steps-hint { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.first-steps-hint a { color: var(--accent-hover); font-weight: 600; text-decoration: none; }
.first-steps-hint a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .first-steps-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   App Store "Start with these 3" beginner block
   (onboarding wave 2026-06-11)
   ============================================================ */
.starter-pack {
  position: relative;
  padding: 16px 18px;
  margin: 0 0 16px;
  background: var(--bg-1);
  border-radius: 14px;
  box-shadow: var(--elev-1);
  border-left: 3px solid var(--accent);
}
.starter-pack.hidden { display: none; }
.starter-pack-title { font-size: 1rem; font-weight: 700; color: var(--text); padding-right: 32px; }
.starter-pack-sub { font-size: 0.82rem; color: var(--text-muted); margin: 4px 0 12px; }
.starter-pack-dismiss {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border-radius: 8px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1.2rem; line-height: 1;
}
.starter-pack-dismiss:hover { background: var(--bg-0); color: var(--text); }
.starter-pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.starter-pack-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-0); border: 1px solid var(--border-strong);
}
.starter-pack-card .app-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.starter-pack-name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.starter-pack-blurb { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; flex: 1; }
.starter-pack-card .app-action-btn { margin-top: 4px; }
@media (max-width: 720px) {
  .starter-pack-grid { grid-template-columns: 1fr; }
}

/* A flapping service is the one row worth surfacing — actionable, not alarming */
.activity-flap { background: rgba(245,158,11,0.07); }
.activity-fix-link {
  margin-left: auto; flex-shrink: 0;
  padding: 3px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--accent); background: transparent; color: var(--accent-hover);
  font-size: 0.7rem; font-weight: 700;
}
.activity-fix-link:hover { background: var(--accent-soft); }

@media (max-width: 720px) {
  .home-status-hero { flex-direction: column; align-items: flex-start; }
  .hsh-cta { text-align: left; width: 100%; }
  .hsh-btn { width: 100%; justify-content: center; }
  .hsh-cta-note { max-width: none; }
}

/* Tom AI drawer welcome — lead with the wow, collapsible data notice */
.chat-welcome-lead { font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.chat-welcome-examples { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-example-chip {
  border: 1px solid var(--border-strong); background: var(--bg-0); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font-size: 0.76rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.chat-example-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chat-privacy-details { margin-top: 12px; font-size: 0.8rem; }
.chat-privacy-details > summary { cursor: pointer; color: var(--text-muted); font-weight: 600; list-style: none; padding: 4px 0; }
.chat-privacy-details > summary::-webkit-details-marker { display: none; }
.chat-privacy-details > summary:hover { color: var(--text); }
.chat-privacy-details .chat-privacy-notice { margin-top: 8px; }