/* =============================================================================
   biolbe design base — foundations
   Ported from resource/biolbe.dc.html (the redesign board) + support.js tokens.
   Owns: web fonts, OKLCH design tokens (light/dark chrome + swappable accent),
   base reset, and the shared component primitives used across app screens.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- chrome: dark is the default (matches the board) ----------------------- */
:root,
[data-theme='dark'] {
  --bg: oklch(0.165 0.015 286);
  --surface: oklch(0.205 0.017 286);
  --surface-2: oklch(0.245 0.02 286);
  --elev: oklch(0.27 0.02 286);
  --border: oklch(0.31 0.02 286);
  --fg: oklch(0.97 0.005 286);
  --muted: oklch(0.70 0.015 286);
  --faint: oklch(0.52 0.015 286);
}

[data-theme='light'] {
  --bg: oklch(0.975 0.006 286);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.955 0.008 286);
  --elev: oklch(1 0 0);
  --border: oklch(0.90 0.01 286);
  --fg: oklch(0.24 0.02 286);
  --muted: oklch(0.46 0.02 286);
  --faint: oklch(0.60 0.02 286);
}

/* --- accent: a single fixed accent that matches the logo ------------------ */
:root {
  --accent: oklch(0.58 0.227 271);
  --accent-soft: oklch(0.58 0.227 271 / 0.16);
  --on-accent: oklch(0.99 0.01 286);

  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* radii */
  --r-card: 20px;
  --r-box: 14px;
  --r-input: 11px;
  --r-pill: 999px;

  /* elevation */
  --shadow-card: 0 30px 70px -45px oklch(0.3 0.05 286 / 0.5);
  --shadow-pop: 0 22px 50px -24px oklch(0 0 0 / 0.55);
}

/* --- base reset ----------------------------------------------------------- */
* { box-sizing: border-box; }

html.blb { -webkit-text-size-adjust: 100%; }

body.blb {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.blb ::selection { background: oklch(0.58 0.227 271 / 0.25); }

.blb-scroll {
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}
.blb-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.blb-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

@keyframes blbCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- icons ---------------------------------------------------------------- */
.ico { display: block; flex: none; }
html.blb[data-theme='dark'] .ico-sun { display: none; }
html.blb[data-theme='light'] .ico-moon { display: none; }

/* --- shared primitives ---------------------------------------------------- */

/* buttons (flat selectors — no nesting) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:hover { border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

/* filled buttons: border matches the fill so height equals bordered buttons */
.btn-accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.btn-accent:hover { border-color: var(--accent); filter: brightness(1.06); }

.btn-solid {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
}
.btn-solid:hover { border-color: var(--fg); }

.btn-ghost { background: transparent; }

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 15px;
  color: var(--muted);
}

.btn-block { width: 100%; }

.blb {

  /* pills / chips */
  & .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1;
  }
  & .pill--active {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
  }

  /* cards */
  & .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
  }

  /* segmented control */
  & .seg {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-box);
  }
  & .seg__opt {
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  & .seg__opt[aria-selected='true'] {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* form fields */
  & .field { margin-bottom: 22px; }
  & .field__label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--fg);
    margin-bottom: 9px;
  }
  & .field__hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
  }
  & .input,
  & .select,
  & .textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 13.5px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  & .input:focus,
  & .select:focus,
  & .textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  & .textarea { resize: vertical; font-family: var(--font-mono); line-height: 1.7; }
  & .textarea--code { white-space: pre; }

  /* toggle switch */
  & .switch {
    width: 44px;
    height: 26px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: none;
    position: relative;
    flex: none;
    cursor: pointer;
    transition: background .15s;
  }
  & .switch__dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--r-pill);
    background: var(--fg);
    transition: left .15s, background .15s;
  }
  & .switch[aria-checked='true'] { background: var(--accent); }
  & .switch[aria-checked='true'] .switch__dot { left: 21px; background: var(--on-accent); }

  /* brand mark — the original logo image */
  & .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  & .brand__mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: block;
  }
  & .brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--fg);
  }
}

/* --- modal (shared) ------------------------------------------------------- */
.blb-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* The panel caps its own height and scrolls its body — the overlay itself
     must not scroll, or the fixed head/foot would scroll away with it. */
  overflow: hidden;
  background: oklch(0.1 0.02 286 / 0.5);
  backdrop-filter: blur(3px);
}
.blb-modal[open],
.blb-modal.is-open { display: flex; }

.blb-modal__panel {
  width: 100%;
  max-width: 560px;
  /* Cap to the viewport so head/foot stay fixed and only the body scrolls. */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 40px 80px -30px oklch(0 0 0 / 0.6);
  overflow: hidden;
}
.blb-modal__panel--wide { max-width: 900px; }
.blb-modal__head,
.blb-modal__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
}
.blb-modal__head { border-bottom: 1px solid var(--border); }
.blb-modal__foot { border-top: 1px solid var(--border); background: var(--surface); justify-content: flex-end; }
.blb-modal__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--fg); }
.blb-modal__sub { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 2px; }
.blb-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; }
@media (max-width: 640px) {
  .blb-modal { padding: 12px; align-items: flex-start; }
  .blb-modal__panel { max-height: calc(100vh - 24px); }
  .blb-modal__head, .blb-modal__foot, .blb-modal__body { padding: 16px; }
}

/* --- inline alerts -------------------------------------------------------- */
.blb-alert {
  border-radius: var(--r-input);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.blb-alert--ok { background: oklch(0.62 0.16 152 / 0.16); color: oklch(0.72 0.16 152); }
.blb-alert--err { background: oklch(0.62 0.2 25 / 0.16); color: oklch(0.72 0.2 25); }
.blb-alert:empty { display: none; }

/* --- toasts --------------------------------------------------------------- */
.blb-toasts {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.blb-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  min-width: 200px;
  max-width: 360px;
  border-radius: 12px;
  background: var(--elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  animation: blbToastIn .18s ease;
}
.blb-toast::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}
.blb-toast--ok::before { background: oklch(0.62 0.16 152); }
.blb-toast--err::before { background: oklch(0.62 0.2 25); }
.blb-toast.is-leaving { animation: blbToastOut .18s ease forwards; }
@keyframes blbToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blbToastOut { to { opacity: 0; transform: translateY(12px); } }