/* ==============================================================
   LL SHELL
   Shared chrome for the member portal: top bar, sidebar, profile
   menu, and the handful of controls every page needs.

   Palette matches the Resend email templates — off-white page,
   white cards, dark green headings. Lime is reserved for fills and
   the primary button: it fails contrast as text on white, so it
   never carries words except on a dark green ground.

   Page-specific styles belong in the page, not here.
   ============================================================== */

@font-face {
  font-family: 'Nasalization';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Nasalization-Regular.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matter';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Matter-Regular.woff2') format('woff2'),
       url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Matter-Regular.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --ll-ink:        #0d3d2d;
  --ll-ink-deep:   #062418;
  --ll-lime:       #ccff62;
  --ll-paper:      #f7f7f5;
  --ll-card:       #ffffff;
  --ll-line:       #e5e5e5;
  --ll-line-firm:  #d4d4d4;
  --ll-text:       #171717;
  --ll-text-2:     #404040;
  --ll-text-3:     #737373;
  --ll-text-4:     #a3a3a3;
  --ll-active:     #f3f8ec;
  --ll-warn:       #8a5e10;
  --ll-warn-line:  #c98a1e;
  --ll-bad:        #b3261e;
  --ll-radius:     14px;
  --ll-sidebar:    232px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--ll-paper); }
body {
  font-family: 'Matter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ll-paper);
  color: var(--ll-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ll-ink); }
:focus-visible { outline: 2px solid var(--ll-ink); outline-offset: 2px; }

/* ---------- top bar ---------- */
.ll-top {
  background: linear-gradient(135deg, var(--ll-ink) 0%, var(--ll-ink-deep) 100%);
  height: 60px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.ll-top-left { display: flex; align-items: center; gap: 14px; }
.ll-top img { height: 26px; width: auto; display: block; }
.ll-burger {
  display: none; background: none; border: none; cursor: pointer;
  color: #fff; font-size: 20px; line-height: 1; padding: 4px 6px;
}

.ll-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ll-lime); color: var(--ll-ink);
  border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 14px;
}
.ll-menu {
  position: absolute; top: 54px; right: 16px; width: 258px;
  background: var(--ll-card); border: 1px solid var(--ll-line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(6,36,24,.14);
  padding: 8px; display: none;
}
.ll-menu[data-open="true"] { display: block; }
.ll-menu-id {
  padding: 12px 12px 14px; border-bottom: 1px solid var(--ll-line);
  margin-bottom: 6px;
}
.ll-menu-id strong { display: block; font-size: 15px; color: var(--ll-ink); }
.ll-menu-id span {
  display: block; font-size: 13px; color: var(--ll-text-3);
  margin-top: 2px; word-break: break-all;
}
.ll-menu a, .ll-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px;
  font-family: inherit; font-size: 14px; color: var(--ll-text-2);
  text-decoration: none; background: none; border: none; cursor: pointer;
}
.ll-menu a:hover, .ll-menu button:hover { background: var(--ll-paper); }
.ll-menu hr { border: none; border-top: 1px solid var(--ll-line); margin: 6px 0; }

/* ---------- layout ---------- */
.ll-body { display: grid; grid-template-columns: var(--ll-sidebar) 1fr; align-items: start; }

.ll-side {
  background: var(--ll-card); border-right: 1px solid var(--ll-line);
  height: calc(100vh - 60px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 0;
  position: sticky; top: 60px;
}
.ll-side-group {
  padding: 0 20px 8px; font-size: 12px; color: var(--ll-text-3);
}
.ll-side-group + .ll-side-group,
.ll-side a + .ll-side-group { padding-top: 26px; }

/* Collapsible sections (LLShell.mount({ collapsible: true })). */
.ll-side-sec + .ll-side-sec { margin-top: 2px; }
.ll-side-sec > .ll-side-group { padding-top: 0; }
button.ll-side-group {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left;
  padding: 10px 20px; font-size: 15px; font-weight: 600; color: var(--ll-text);
}
/* Top-level links (Dashboard, Settings) read like section headings. */
.ll-side-top a { font-size: 15px; font-weight: 600; color: var(--ll-text); padding: 10px 20px; }
.ll-side-top + .ll-side-sec, .ll-side-sec + .ll-side-top { margin-top: 2px; }
/* Pages sit indented under their section, a step smaller than the heading. */
.ll-side-sec .ll-side-items a { font-size: 14px; padding: 7px 20px 7px 34px; }
.ll-side-sec .ll-side-items a[aria-current="page"] { padding-left: 31px; }
button.ll-side-group:hover { color: var(--ll-ink); background: var(--ll-paper); }
button.ll-side-group:focus-visible { outline-offset: -2px; }
.ll-side-chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; flex: none; }
.ll-side-sec[data-open="true"] .ll-side-chev { transform: rotate(45deg); }
.ll-side-sec .ll-side-items { padding-bottom: 8px; }
.ll-side-sec:not([data-open="true"]) .ll-side-items { display: none; }
.ll-side-group-tag { margin-left: auto; margin-right: 10px; display: flex; gap: 6px; align-items: center; }
.ll-side-here { width: 6px; height: 6px; border-radius: 50%; background: var(--ll-ink); }
.ll-side-sec[data-open="true"] .ll-side-group-tag { display: none; }
.ll-side a {
  display: block; padding: 9px 20px;
  font-size: 15px; color: var(--ll-text-2); text-decoration: none;
}
.ll-side a:hover { background: var(--ll-paper); }
.ll-side a[aria-current="page"] {
  color: var(--ll-ink); font-weight: 600;
  background: var(--ll-active);
  border-left: 3px solid var(--ll-ink);
  padding-left: 17px;
}
.ll-pill-count {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 20px; margin-left: 6px;
  background: var(--ll-lime); color: var(--ll-ink);
}

.ll-main { padding: 36px 40px 80px; max-width: 920px; width: 100%; }

/* ---------- page heading ---------- */
.ll-h1 {
  font-family: 'Nasalization', sans-serif;
  font-size: 28px; line-height: 1.2; color: var(--ll-ink);
  margin-bottom: 6px;
}
.ll-sub { color: var(--ll-text-3); font-size: 15px; margin-bottom: 28px; }

/* ---------- cards ---------- */
.ll-card {
  background: var(--ll-card); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius); padding: 26px 28px;
  margin-bottom: 28px;
}
.ll-card--list { padding: 4px 28px 8px; }
.ll-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 20px 0 14px; border-bottom: 1px solid var(--ll-line);
}
.ll-card-head h2 { font-size: 16px; font-weight: 600; color: var(--ll-ink); }
.ll-card-head p { font-size: 14px; color: var(--ll-text-3); }

.ll-figure {
  font-family: 'Nasalization', sans-serif;
  font-size: 44px; line-height: 1; color: var(--ll-ink);
}

/* ---------- controls ---------- */
.ll-btn {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 11px 20px; border: 1px solid transparent;
  background: var(--ll-lime); color: var(--ll-ink);
}
.ll-btn--quiet {
  background: var(--ll-card); color: var(--ll-text-2);
  border-color: var(--ll-line-firm); font-weight: 400; padding: 10px 15px;
}
.ll-btn--quiet:hover:not(:disabled) { border-color: var(--ll-text-3); color: var(--ll-text); }
/* Faded lime still reads bright. A disabled button should look inert,
   not like a dimmed version of the thing you want to press. */
.ll-btn:disabled {
  background: var(--ll-card); color: var(--ll-text-4);
  border-color: var(--ll-line); cursor: not-allowed;
}

.ll-input {
  background: var(--ll-card); color: var(--ll-text);
  border: 1px solid var(--ll-line-firm); border-radius: 8px;
  padding: 11px 13px; font-family: inherit; font-size: 15px;
  min-width: 0;
}
.ll-input::placeholder { color: var(--ll-text-4); }

.ll-tag {
  display: inline-block; font-size: 12px; padding: 2px 9px;
  border-radius: 20px; margin-left: 8px; vertical-align: 1px;
}
.ll-tag--you { background: var(--ll-lime); color: var(--ll-ink); font-weight: 600; }
.ll-tag--wait { border: 1px solid var(--ll-warn-line); color: var(--ll-warn); }
.ll-tag--plain { border: 1px solid var(--ll-line-firm); color: var(--ll-text-3); }

.ll-note { font-size: 14px; color: var(--ll-text-3); line-height: 1.6; max-width: 76ch; }
.ll-note + .ll-note { margin-top: 10px; }
.ll-note--bad { color: var(--ll-bad); }
.ll-state { padding: 80px 0; color: var(--ll-text-3); font-size: 15px; }
.ll-hidden { display: none !important; }

/* ---------- page to page ----------
   Same-site navigations between pages that load this stylesheet use a
   view transition: the header and sidebar are carried across as they
   are and only the page content changes. Chrome, Edge and Safari 18.2+;
   other browsers just load the page normally. */
@view-transition { navigation: auto; }
.ll-top  { view-transition-name: ll-top; }
.ll-side { view-transition-name: ll-side; }
::view-transition-group(ll-top), ::view-transition-group(ll-side),
::view-transition-old(ll-top), ::view-transition-new(ll-top),
::view-transition-old(ll-side), ::view-transition-new(ll-side) { animation: none; }
::view-transition-old(ll-top), ::view-transition-old(ll-side) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  .ll-body { grid-template-columns: 1fr; }
  .ll-burger { display: block; }
  .ll-side {
    position: fixed; top: 60px; left: 0; bottom: 0; width: 260px; height: auto;
    z-index: 15; transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 30px rgba(6,36,24,.18);
  }
  .ll-side[data-open="true"] { transform: translateX(0); }
  .ll-main { padding: 28px 20px 72px; }
  .ll-card, .ll-card--list { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.ll-brand { display: inline-flex; align-items: center; line-height: 0; }
.ll-context {
  margin-left: 12px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #0d3d2d; background: #ccff62;
}

/* ---------- page states ---------- */
.ll-state-title { font-size: 20px; font-weight: 600; color: #0d3d2d; margin: 0 0 8px; }
.ll-state-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-top: 18px;
}
.ll-state-link {
  font-size: 14px; color: #0d3d2d; padding: 6px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* States shown before the shell mounts: a centred card, no sidebar column. */
body.ll-standalone .ll-body,
body.ll-standalone .ll-main {
  display: block; width: 100%; max-width: none; margin: 0; padding: 0; min-height: 0;
}
body.ll-standalone .ll-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
}
body.ll-standalone #state-error {
  width: 100%; max-width: 420px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--ll-line); border-radius: 14px;
  padding: 36px 32px 30px;
  box-shadow: 0 1px 2px rgba(13, 61, 45, .04), 0 8px 24px rgba(13, 61, 45, .06);
}
body.ll-standalone #error-text { color: var(--ll-text-3); font-size: 15px; overflow-wrap: anywhere; }
body.ll-standalone .ll-state-mark { display: block; width: 44px; height: 44px; margin: 0 auto 18px; }
body.ll-standalone .ll-state-actions { flex-direction: column; align-items: stretch; margin-top: 24px; }