/* jhacal-basic-setup.css - First-Run Basic Setup "building" UI */
/* =====================================================================
   JHACAL Basic Setup - the 7-floor "building" onboarding surface.

   Phase 1 (static skeleton): the tapered building silhouette, three
   "rooms" per floor (Set up · Refined · Optimised), traffic-light THIN
   BORDERS (no per-tile lamp), a floor heading that turns green only when
   all three rooms are done, and a glyph/text cue paired with every
   colour so colour is never the sole signal.

   Traffic-light states (Pete-locked 2026-06-02):
     - to-do   : neutral border (calm - NOT red). Red is reserved.
     - started : --jhacal-gold      (#f6c177)  amber/part-done
     - done    : --jhacal-green-earth(#6a994e)  earthy sage/moss complete
     - at-risk : --color-danger      (#ea868f)  red - at-risk ONLY (e.g. no backup)
     - suggested (heading accent) : --color-info (#17a2b8) teal - NOT gold
     - not-needed : dimmed, no traffic-light border

   Layering: overlay z-index 15000 - above the launcher menu (8000/9000),
   BELOW the shared Settings modal (20000) so a room's deep-link renders
   the modal on top of the building.
   ===================================================================== */

/* ── Overlay + backdrop ─────────────────────────────────────────────── */
.jbs-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(16, 19, 22, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top)) 10px
           max(16px, env(safe-area-inset-bottom)) 10px;
}
.jbs-overlay.open { display: flex; }

/* ── Panel ──────────────────────────────────────────────────────────── */
.jbs-panel {
  width: 100%;
  max-width: 560px;
  margin: auto;
  max-height: calc(100vh - 28px);
  background: var(--bg-1, #1f2328);
  color: var(--text-1, #f6f7f9);
  border: 1px solid var(--border, #3d444d);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-lg, 0 24px 70px rgba(0,0,0,0.6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.jbs-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border, #3d444d);
  background: var(--bg-2, #272b31);
}
.jbs-header-text { flex: 1 1 auto; min-width: 0; }
.jbs-title {
  margin: 0;
  font-size: var(--font-size-xl, 1.3rem);
  font-weight: 700;
  line-height: 1.2;
}
.jbs-subtitle {
  margin: 4px 0 0;
  font-size: var(--font-size-sm, 0.88rem);
  color: var(--text-2);
  line-height: 1.35;
}
.jbs-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.jbs-close:hover { border-color: var(--accent); }
.jbs-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Skip / finish-later bar (always visible - speaking is never gated) ── */
.jbs-skipbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: var(--font-size-sm, 0.88rem);
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.jbs-skip-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-1);
  padding: 6px 12px;
  font-size: var(--font-size-sm, 0.88rem);
  cursor: pointer;
  min-height: 36px;
}
.jbs-skip-btn:hover { border-color: var(--accent); }
.jbs-skip-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Building body ──────────────────────────────────────────────────── */
.jbs-building {
  display: flex;
  flex-direction: column;   /* floors authored top (7) → bottom (1) = building */
  align-items: center;
  gap: 8px;
  padding: 16px 12px 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, var(--bg-1, #1f2328) 0%, var(--bg-2, #272b31) 100%);
}

/* A "floor" = heading + three rooms. The tapered silhouette comes from a
   per-floor width set inline by the JS (--jbs-floor-w), widest at floor 1
   (ground), narrowest at the top floor - cosmetic taper, all 3 rooms kept. */
.jbs-floor {
  width: var(--jbs-floor-w, 100%);
  max-width: 100%;
  background: var(--bg-3, #313740);
  border: 1px solid var(--border, #3d444d);
  border-radius: var(--radius-md, 10px);
  padding: 8px 8px 9px;
  box-sizing: border-box;
  transition: width var(--transition-base, 0.2s ease);
}

/* ── Floor heading ──────────────────────────────────────────────────── */
.jbs-floor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 7px;
}
.jbs-floor-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2);
}
.jbs-floor-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-1);
}
.jbs-floor-emoji { margin-right: 5px; }

/* Whole-floor-done: heading goes green (set by JS adding .floor-done). */
.jbs-floor.floor-done .jbs-floor-name { color: var(--jhacal-green-earth); }
.jbs-floor.floor-done .jbs-floor-num {
  border-color: var(--jhacal-green-earth);
  color: var(--jhacal-green-earth);
}

/* "Suggested for you" floor accent (Program Finder, phase 2). Teal, not gold. */
.jbs-floor.floor-suggested .jbs-floor-name { color: var(--color-info); }
.jbs-floor-suggest-tag {
  flex: 0 0 auto;
  display: none;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-info);
  border: 1px solid var(--color-info);
  border-radius: 999px;
  padding: 1px 7px;
}
.jbs-floor.floor-suggested .jbs-floor-suggest-tag { display: inline-block; }

/* ── Rooms row ──────────────────────────────────────────────────────── */
.jbs-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* A room = a launchpad button. Thin state-colour border carries the state;
   a glyph + text cue is paired with the colour (not colour-only). */
.jbs-room {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
  padding: 7px 7px 8px;
  text-align: left;
  background: var(--bg-1, #1f2328);            /* light interior in light theme → green border clears >=3:1 */
  border: 2px solid var(--border, #3d444d);   /* default = to-do (neutral) */
  border-radius: var(--radius-sm, 6px);
  color: var(--text-1);
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color var(--transition-fast, 0.12s ease),
              transform var(--transition-fast, 0.12s ease);
}
.jbs-room:hover { transform: translateY(-1px); }
.jbs-room:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jbs-room:active { transform: translateY(0); }

/* Static (phase 1): rooms are display-only until launchpads are wired
   (step 2) - render inert so there are no dead taps. */
.jbs-room.is-static { cursor: default; }
.jbs-room.is-static:hover { transform: none; }

.jbs-room-tier {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.jbs-room-title {
  font-size: var(--font-size-sm, 0.88rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-1);
}
.jbs-room-cue {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-2);
}
.jbs-room-cue .jbs-cue-glyph { font-size: 0.85rem; line-height: 1; }

/* ── State styling (border + glyph/text cue, paired) ───────────────────
   Phase 1 renders every room .is-todo. Later phases swap the class. */
.jbs-room.is-todo    { border-color: var(--border); }
.jbs-room.is-todo    .jbs-room-cue { color: var(--text-3); }

.jbs-room.is-started { border-color: var(--jhacal-gold); }
.jbs-room.is-started .jbs-room-cue { color: var(--jhacal-gold-dark); }

.jbs-room.is-done    { border-color: var(--jhacal-green-earth); }
.jbs-room.is-done    .jbs-room-cue { color: var(--jhacal-green-earth); }

.jbs-room.is-atrisk  { border-color: var(--color-danger); }
.jbs-room.is-atrisk  .jbs-room-cue { color: var(--color-danger); font-weight: 700; }

.jbs-room.is-notneeded {
  border-color: var(--border);
  opacity: 0.4;
  cursor: default;
}
.jbs-room.is-notneeded:hover { transform: none; }

/* ── Legend ─────────────────────────────────────────────────────────── */
.jbs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-2, #b9c0c7);
  background: var(--bg-2, #272b31);
}
.jbs-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.jbs-legend-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 2px solid var(--border);
  box-sizing: border-box;
}
.jbs-legend-swatch.is-started { border-color: var(--jhacal-gold); }
.jbs-legend-swatch.is-done    { border-color: var(--jhacal-green-earth); }
.jbs-legend-swatch.is-atrisk  { border-color: var(--color-danger); }

/* ── iPhone-first: tighten on narrow viewports ─────────────────────────
   The 3-rooms-across building metaphor is preserved on phones; we just
   trim padding + font so three rooms fit comfortably ~360px wide. */
@media (max-width: 430px) {
  .jbs-panel { border-radius: 14px; }
  .jbs-building { padding: 14px 8px 18px; }
  .jbs-floor { padding: 7px 6px 8px; }
  .jbs-rooms { gap: 5px; }
  .jbs-room { min-height: 70px; padding: 6px 5px 7px; }
  .jbs-room-title { font-size: 0.8rem; }
  .jbs-room-tier { font-size: 0.6rem; }
}

/* Very narrow (small phones): keep 3 across but allow the title to wrap. */
@media (max-width: 340px) {
  .jbs-room { min-height: 76px; }
  .jbs-room-title { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jbs-room, .jbs-floor { transition: none; }
  .jbs-room:hover { transform: none; }
}


/* ── Guided Program Finder (g523) ───────────────────────────────────── */
.jbs-finder-overlay{position:fixed;inset:0;z-index:16000;display:flex;align-items:flex-start;justify-content:center;background:rgba(16,19,22,0.94);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(12px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom)) 10px;}
.jbs-finder-panel{width:100%;max-width:680px;margin:auto;max-height:calc(100vh - 28px);background:var(--bg-1,#1f2328);color:var(--text-1,#f6f7f9);border:1px solid var(--border,#3d444d);border-radius:var(--radius-xl,16px);box-shadow:var(--shadow-lg,0 24px 70px rgba(0,0,0,0.6));display:flex;flex-direction:column;overflow:hidden;}
.jbs-finder-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--border,#3d444d);background:var(--bg-2,#272b31);}
.jbs-finder-title{margin:0;font-size:1.2rem;font-weight:700;}
.jbs-finder-sub{margin:4px 0 0;font-size:0.85rem;color:var(--text-2,#b9c0c7);line-height:1.4;}
.jbs-finder-close{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--border,#3d444d);border-radius:10px;background:var(--bg-3,#313740);color:var(--text-1,#f6f7f9);font-size:1.4rem;line-height:1;cursor:pointer;}
.jbs-finder-qs{padding:12px 16px 4px;display:flex;flex-direction:column;gap:10px;}
.jbs-finder-q{display:flex;flex-direction:column;gap:6px;}
.jbs-finder-qlabel{font-size:0.9rem;font-weight:600;}
.jbs-finder-chips{display:flex;flex-wrap:wrap;gap:6px;}
.jbs-chip{border:1px solid var(--border,#3d444d);background:var(--bg-3,#313740);color:var(--text-1,#f6f7f9);border-radius:999px;padding:6px 14px;font-size:0.85rem;cursor:pointer;font-family:inherit;min-height:36px;}
.jbs-chip.sel{border-color:var(--color-info,#17a2b8);background:var(--color-info,#17a2b8);color:#fff;font-weight:600;box-shadow:0 0 0 2px rgba(23,162,184,.35);}
/* [g630 item 12b] once a question has any answer, unselected chips dim so chosen vs not-chosen reads at a glance */
.jbs-finder-chips.jbs-answered .jbs-chip:not(.sel){opacity:.55;}
.jbs-prog-grid{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px 16px 16px;background:linear-gradient(180deg,var(--bg-1,#1f2328),var(--bg-2,#272b31));}
.jbs-prog{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px;border-radius:10px;background:var(--bg-3,#313740);border:2px solid var(--border,#3d444d);color:var(--text-1,#f6f7f9);font-family:inherit;cursor:pointer;transition:border-color .12s ease,transform .12s ease,opacity .12s ease;}
.jbs-prog:hover{transform:translateY(-1px);}
.jbs-prog:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 3px rgba(110,168,254,.5));}
.jbs-prog-icon{font-size:1.4rem;}
.jbs-prog-name{font-size:0.95rem;font-weight:700;}
.jbs-prog-desc{font-size:0.78rem;color:var(--text-2,#b9c0c7);line-height:1.3;}
.jbs-prog-why{font-size:0.74rem;line-height:1.3;margin-top:3px;color:var(--text-2,#b9c0c7);}
.jbs-prog-rec{border-color:var(--jhacal-green-earth,#6a994e);box-shadow:0 0 0 2px var(--jhacal-green-earth,#6a994e),0 0 14px rgba(106,153,78,.35);background:rgba(106,153,78,.08);}
.jbs-prog-rec .jbs-prog-why{color:var(--jhacal-green-earth,#6a994e);font-weight:600;}
.jbs-prog-grey{opacity:0.28;filter:saturate(.6);}
.jbs-prog-grey .jbs-prog-why{color:var(--text-3,#98a1ac);}
.jbs-finder-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--border,#3d444d);background:var(--bg-2,#272b31);}
.jbs-finder-use{flex:1 1 100%;border:none;border-radius:10px;background:var(--jhacal-green-earth,#6a994e);color:#10140f;font-weight:700;padding:12px;font-size:0.92rem;cursor:pointer;min-height:44px;}
.jbs-finder-all,.jbs-finder-reset{flex:1 1 auto;border:1px solid var(--border,#3d444d);border-radius:10px;background:var(--bg-3,#313740);color:var(--text-1,#f6f7f9);padding:12px 14px;font-size:0.88rem;cursor:pointer;min-height:44px;}
@media (max-width:430px){.jbs-prog-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}