/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT STUDIO · NOTES, CALL LOG & BOOKMARKS   (FEATURE stx-4, 2026-09-02)
   ───────────────────────────────────────────────────────────────────────────
   MACE: "Please Rebuild to enhance and improve the UI/UX to align in high
   level Enterprise design and not generic output. Target feature: Recent
   Notes, Call Notes Logs, Bookmarks."

   WHAT WAS WRONG, STRUCTURALLY
   ────────────────────────────
   All three surfaces were built by concatenating style="" attributes inside
   core_ui.js and se2.js — roughly 60 inline declarations per card. That is why
   they read as "generic": every card re-stated its own padding, radius, font
   size and colour, so nothing shared a scale, and the three surfaces drifted
   from each other and from the studio. It is also why they could not be
   themed at all — an inline declaration outranks every stylesheet, so neither
   enterprise_theme.css nor the MEYS re-point could reach a single one of them.

   The renderers now emit CLASSES and this file owns the appearance. Nothing
   about the data changed: the same note objects, the same localStorage and
   server sync, the same identity, the same load / delete / open handlers.

   THE DESIGN
   ──────────
   · ONE geometry — 10px radius, 9/10.5/12px type, 6px rhythm, 22-24px controls.
   · STATUS IS A RAIL, NOT A FILL. A 2px stripe down the leading edge carries
     the lifecycle colour. It reads instantly down a stacked list and costs no
     horizontal space, where a status pill on every row competed with the
     caller name for the widest thing on the card.
   · SEMANTIC COLOUR IS PRESERVED. Investigating / initial / waiting /
     resolved / closed keep distinct hues — memory.md: brand gets the accent,
     DATA gets balanced semantic colour. Only the DECORATION was de-blued.
   · ACTIONS ARE QUIET UNTIL WANTED. Load / Delete / Open sit at 0 opacity and
     appear on hover or keyboard focus, so a list of notes reads as content
     rather than as a wall of buttons. They stay in the tab order and are fully
     visible on :focus-within — hiding a control from the mouse must never
     hide it from the keyboard, and a touch device gets them unconditionally.

   BOTH RAMPS. Every colour resolves through a --ss-* token so the MEYS layer
   re-points it, and each hue that is NOT token-driven states its own
   light-ramp value: a colour tuned on #0d1117 is not a colour for #ffffff
   (memory.md, measured twice).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────────── */
.nbx {
  --nbx-r: 10px;
  --nbx-gap: 6px;
  --nbx-ink: var(--ss-text, #e6edf3);
  --nbx-dim: var(--ss-muted, #8b949e);
  --nbx-line: var(--ss-border, #30363d);
  --nbx-surface: color-mix(in srgb, var(--ss-surface2, #161b22) 74%, transparent);
  --nbx-hover: var(--ss-surface3, #21262d);
  --nbx-rail: var(--ss-muted, #8b949e);
  font-family: var(--ss-font, 'Inter', system-ui, sans-serif);
}

/* Lifecycle hues. `.is-*` is set from the note's own caseStatus using the SAME
   word rules the renderer already applied — this file re-skins that decision,
   it does not re-make it. */
.nbx-card.is-investigating { --nbx-rail: var(--ss-accent, #58a6ff); }
.nbx-card.is-initial       { --nbx-rail: var(--ss-warn, #d29922); }
.nbx-card.is-waiting       { --nbx-rail: #a25ddc; }
.nbx-card.is-resolved      { --nbx-rail: var(--ss-green, #3fb950); }
.nbx-card.is-closed        { --nbx-rail: var(--ss-muted, #7d8590); }

/* ── the card ───────────────────────────────────────────────────────────── */
.nbx-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px 8px 13px;
  border: 1px solid var(--nbx-line);
  border-radius: var(--nbx-r);
  background: var(--nbx-surface);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease;
}
/* The status rail. content:"" — it is a stripe, never a label. */
.nbx-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--nbx-rail);
}
.nbx-card:hover { border-color: var(--ss-border2, #3d444d); background: var(--nbx-hover); }
.nbx-card.is-clickable { cursor: pointer; }
.nbx-card:focus-visible { outline: 2px solid var(--ss-accent, #58a6ff); outline-offset: 1px; }

.nbx-row { display: flex; align-items: center; gap: var(--nbx-gap); min-width: 0; }
.nbx-row + .nbx-row { margin-top: 3px; }
.nbx-grow { flex: 1 1 auto; min-width: 0; }

.nbx-name {
  font-size: 12px; font-weight: 650; letter-spacing: -.01em;
  color: var(--nbx-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nbx-case {
  flex: 0 0 auto;
  font-family: var(--ss-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 600;
  color: var(--nbx-dim);
}
.nbx-sub {
  font-size: 10.5px; line-height: 1.45; color: var(--nbx-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* stx-4 · MUST CLIP, NOT JUST REFUSE TO WRAP. Measured in the 144px rail:
   the flex line squeezed this box to 4px while `white-space:nowrap` kept
   painting the full timestamp outside it, straight across the status chip.
   The boxes never overlapped — only the ink did, which is why the geometry
   assertions were happy and the screenshot was not. */
.nbx-time {
  font-size: 9.5px; color: var(--nbx-dim);
  white-space: nowrap; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
/* A status chip cannot be allowed to eat a narrow rail either. */
.nbx-chip.state { max-width: 46%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.nbx-log .nbx-chip.state { max-width: none; display: inline-flex; }

/* ── chips ──────────────────────────────────────────────────────────────── */
.nbx-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.nbx-chip > i { font-size: 8px; }
/* Duration is a MEASUREMENT, so it is monospace and neutral. It used to be red
   on every single row, which read as an error state on a perfectly normal call. */
.nbx-chip.dur {
  font-family: var(--ss-mono, ui-monospace, monospace);
  color: var(--nbx-dim);
  border-color: var(--nbx-line);
  background: color-mix(in srgb, var(--ss-surface3, #21262d) 60%, transparent);
}
.nbx-chip.state {
  color: var(--nbx-rail);
  border-color: color-mix(in srgb, var(--nbx-rail) 34%, transparent);
  background: color-mix(in srgb, var(--nbx-rail) 12%, transparent);
}

/* ── quiet actions ──────────────────────────────────────────────────────── */
.nbx-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.nbx-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--nbx-line);
  border-radius: 6px;
  background: transparent;
  color: var(--nbx-dim);
  font-family: inherit; font-size: 9.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  opacity: 0;
  transition: opacity .14s ease, color .14s ease, border-color .14s ease, background .14s ease;
}
.nbx-card:hover .nbx-btn,
.nbx-card:focus-within .nbx-btn,
.nbx-btn:focus-visible { opacity: 1; }
.nbx-btn:hover { color: var(--nbx-ink); border-color: var(--ss-border2, #3d444d); background: var(--nbx-hover); }
.nbx-btn.go:hover { color: var(--ss-accent, #58a6ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
.nbx-btn.danger:hover { color: var(--ss-red, #f85149); border-color: color-mix(in srgb, var(--ss-red, #f85149) 40%, transparent); }
/* A pointer-only reveal must never hide a control from a device with no hover. */
@media (hover: none) { .nbx-btn { opacity: 1; } }

/* ── the rail list ──────────────────────────────────────────────────────── */
.nbx-list { display: flex; flex-direction: column; gap: 5px; }
.nbx-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 10.5px; line-height: 1.6;
  color: var(--nbx-dim);
}
.nbx-empty > i { display: block; font-size: 16px; margin-bottom: 6px; opacity: .5; }

/* ── panel head ─────────────────────────────────────────────────────────── */
.nbx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.nbx-head-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nbx-dim);
}
.nbx-head-t > i { font-size: 10px; }
.nbx-link {
  border: 1px solid var(--nbx-line); border-radius: 6px;
  background: transparent; color: var(--nbx-dim);
  font-family: inherit; font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; cursor: pointer; white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.nbx-link:hover { color: var(--ss-accent, #58a6ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }

/* ── stat tiles (Call Notes Log) ────────────────────────────────────────── */
.nbx-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.nbx-stat {
  flex: 1 1 96px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 13px;
  border: 1px solid var(--nbx-line);
  border-radius: var(--nbx-r);
  background: var(--nbx-surface);
}
.nbx-stat-n {
  font-size: 19px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--nbx-tone, var(--nbx-ink));
}
.nbx-stat-l { font-size: 8.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--nbx-dim); }
.nbx-stat.tone-total  { --nbx-tone: var(--nbx-ink); }
.nbx-stat.tone-invest { --nbx-tone: var(--ss-accent, #58a6ff); }
.nbx-stat.tone-wait   { --nbx-tone: #a25ddc; }
.nbx-stat.tone-res    { --nbx-tone: var(--ss-green, #3fb950); }

/* ── the log grid ───────────────────────────────────────────────────────── */
.nbx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 9px; }
.nbx-log { padding: 12px 14px 12px 16px; }
.nbx-log .nbx-name { font-size: 13px; white-space: normal; }
/* Facts as a definition grid: the labels align down the column, which is what
   makes a stack of cards scannable. Previously each label was a fixed-width
   span, so a longer label pushed its own value out of alignment. */
.nbx-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin-top: 9px; }
.nbx-facts dt {
  font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--nbx-dim); padding-top: 2px;
}
.nbx-facts dd { margin: 0; font-size: 11px; line-height: 1.5; color: var(--nbx-ink); word-break: break-word; }

/* ── bookmarks ──────────────────────────────────────────────────────────── */
.nbx-tools { display: flex; gap: 5px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.nbx-select {
  flex: 1 1 90px; min-width: 0; height: 24px;
  background: var(--nbx-surface); border: 1px solid var(--nbx-line); border-radius: 6px;
  color: var(--nbx-ink); font-family: inherit; font-size: 10px; padding: 0 6px;
}
.nbx-tool {
  height: 24px; padding: 0 8px;
  border: 1px solid var(--nbx-line); border-radius: 6px;
  background: transparent; color: var(--nbx-dim);
  font-family: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.nbx-tool:hover { color: var(--nbx-ink); border-color: var(--ss-border2, #3d444d); }
.nbx-tool.add:hover    { color: var(--ss-green, #3fb950); border-color: color-mix(in srgb, var(--ss-green, #3fb950) 40%, transparent); }
.nbx-tool.danger:hover { color: var(--ss-red, #f85149);   border-color: color-mix(in srgb, var(--ss-red, #f85149) 40%, transparent); }
.nbx-src { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--nbx-src, var(--nbx-dim)); }
.nbx-folder { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; color: var(--nbx-dim); }

/* ── LIGHT RAMP ─────────────────────────────────────────────────────────────
   Only the hues that are NOT token-driven need restating: the waiting purple
   (#a25ddc measures 3.6:1 on white and fails AA) and the surface wash.
   Everything else resolves through --ss-* and follows the theme on its own. */
html[data-ss-theme="light"] .nbx {
  --nbx-surface: color-mix(in srgb, var(--ss-surface2, #f6f8fa) 60%, transparent);
}
html[data-ss-theme="light"] .nbx-card.is-waiting { --nbx-rail: #6b3fa0; }   /* 7.4:1 on white */
html[data-ss-theme="light"] .nbx-stat.tone-wait  { --nbx-tone: #6b3fa0; }

/* ── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nbx-card, .nbx-btn, .nbx-link, .nbx-tool { transition: none; }
}

/* ── the Call Notes Log overlay's CONTENT chrome ────────────────────────────
   The overlay itself (fixed inset:0, backdrop, z-index tier) stays in the
   shell's own style attribute on purpose: memory.md records an overlay whose
   placement was "tidied" into a stylesheet and promptly lost to the app's
   fixed chrome. This styles what is INSIDE it, nothing about where it sits. */
.nbx-modal-scroll {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.nbx-modal { width: 100%; max-width: 880px; }
.nbx-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.nbx-modal-t h2 {
  margin: 0 0 2px;
  font-size: 20px; font-weight: 750; letter-spacing: -.02em;
  color: var(--nbx-ink);
}
.nbx-modal-acts { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.nbx-search {
  width: 210px; height: 28px;
  background: var(--nbx-surface);
  border: 1px solid var(--nbx-line); border-radius: 7px;
  padding: 0 10px;
  color: var(--nbx-ink); font-family: inherit; font-size: 11.5px;
  outline: none;
}
.nbx-search::placeholder { color: var(--nbx-dim); }
.nbx-search:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent); }
.nbx-modal-acts .nbx-tool { height: 28px; font-size: 11px; padding: 0 11px; }
.nbx-modal .nbx-stats { margin-bottom: 16px; }