/* ════════════════════════════════════════════════════════════
   Bergamot Signals — App Components
   Built entirely on tokens.css. Hairlines, not boxes; the pill;
   restrained hover; ink that steps down rather than shouting.
   Class prefix: .sg-
   ════════════════════════════════════════════════════════════ */

/* ── Eyebrow — the brand's signature label voice ─────────────── */
.sg-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
}
.sg-eyebrow .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; vertical-align: 2px;
}

/* ── Top bar — 64px, hairline-closed, calm ───────────────────── */
.sg-bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--app-pad);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.sg-brand { display: flex; align-items: center; gap: 11px; }
.sg-brand img, .sg-brand svg { height: 22px; display: block; }
.sg-brand .leaf { width: 12px; height: 22px; color: var(--accent); }
:root[data-app-theme="light"] .sg-brand .leaf { color: #B0853F; } /* brand gold on paper */
.sg-brand .word {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; letter-spacing: var(--display-tracking); color: var(--fg);
}
.sg-brand .app {
  font-family: var(--font-sans); font-weight: 500; font-size: 9.5px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--dim);
  margin-left: 2px; padding-left: 13px; border-left: 1px solid var(--line);
  line-height: 1.3;
}

.sg-nav { display: flex; align-items: center; gap: var(--sp-2); }
.sg-nav a {
  position: relative;
  font-size: var(--app-sm); font-weight: 500; letter-spacing: var(--nav-tracking);
  color: var(--muted); padding: 7px 12px; border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.sg-nav a:hover { color: var(--fg); background: var(--hover); }
.sg-nav a[aria-current="page"] { color: var(--fg); }
.sg-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 1px; background: var(--accent);
}

/* ── Scope switcher — a quiet menu button ────────────────────── */
.sg-scope {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: var(--app-sm); font-weight: 500; color: var(--fg);
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 14px 7px 16px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.sg-scope:hover { background: var(--hover); border-color: var(--line); }
.sg-scope .org { color: var(--dim); }
.sg-scope svg { width: 14px; height: 14px; color: var(--dim); }

/* ── Buttons — the pill, three weights ───────────────────────── */
.sg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: var(--app-sm); font-weight: 500;
  border-radius: var(--r-pill); cursor: pointer;
  padding: 9px 20px; line-height: 1;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.sg-btn .arr { transition: transform var(--dur-2) var(--ease); }
.sg-btn:hover .arr { transform: translateX(4px); }

.sg-btn-primary {
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.sg-btn-primary:hover { background: transparent; color: var(--accent); }

.sg-btn-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line);
}
.sg-btn-ghost:hover { border-color: var(--fg); }

.sg-btn-quiet {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 9px 12px;
}
.sg-btn-quiet:hover { color: var(--fg); background: var(--hover); }

.sg-btn:focus-visible, .sg-scope:focus-visible, .sg-icon-btn:focus-visible,
.sg-field:focus-visible, .sg-toggle:focus-visible, .sg-tab:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* icon-only — quiet square */
.sg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-ctl);
  background: transparent; border: none; color: var(--dim); cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.sg-icon-btn:hover { color: var(--fg); background: var(--hover); }
.sg-icon-btn svg { width: 16px; height: 16px; }

/* ── Fields ──────────────────────────────────────────────────── */
.sg-field {
  font: inherit; font-size: var(--app-sm); color: var(--fg);
  background: var(--field); border: 1px solid var(--line-2);
  border-radius: var(--r-ctl); padding: 9px 13px; width: 100%;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.sg-field::placeholder { color: var(--dim); }
.sg-field:hover { border-color: var(--line); }
.sg-field:focus { outline: none; border-color: var(--accent); background: transparent; }

.sg-label {
  display: block; font-size: var(--app-xs); font-weight: 500;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 7px;
}
.sg-label .req { color: var(--accent); margin-left: 3px; }
.sg-help { font-size: var(--app-xs); color: var(--dim); margin-top: 7px; }
.sg-error { font-size: var(--app-xs); color: var(--danger); margin-top: 7px; }
.sg-field[aria-invalid="true"] { border-color: var(--danger); }

textarea.sg-field { resize: vertical; min-height: 96px; line-height: 1.55; }

select.sg-field {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23998088' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}

/* form scaffolding — one column, hairline-separated sections */
.sg-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.sg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .sg-form-row { grid-template-columns: 1fr; } }
.sg-form-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  border-top: 1px solid var(--line-2); padding-top: var(--sp-5); margin-top: var(--sp-2);
}
.sg-form-foot .hint { margin-left: auto; font-size: var(--app-xs); color: var(--dim); }

/* choice chips — a checkbox/radio group in the brand's pill voice */
.sg-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-choice { position: relative; display: inline-flex; }
.sg-choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sg-choice span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--app-xs); font-weight: 500; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 6px 14px; line-height: 1.4;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.sg-choice:hover span { color: var(--fg); border-color: var(--line); }
.sg-choice input:checked + span { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.sg-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.sg-search { position: relative; }
.sg-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--dim); pointer-events: none;
}
.sg-search .sg-field { padding-left: 36px; }

/* ── Theme toggle — sun / moon, a pill of two ────────────────── */
.sg-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; padding: 3px; cursor: pointer; gap: 2px;
}
.sg-toggle span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--dim);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sg-toggle span svg { width: 13px; height: 13px; }
.sg-toggle span[data-on="true"] { background: var(--active); color: var(--fg); }

/* ── Chips & badges ──────────────────────────────────────────── */
.sg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--app-xs); font-weight: 500; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 3.5px 11px; line-height: 1.4;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
a.sg-chip:hover, button.sg-chip:hover { color: var(--fg); border-color: var(--line); }
.sg-chip[data-on="true"] { color: var(--accent); border-color: var(--accent); }

.sg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--app-xs); font-weight: 500;
  border-radius: var(--r-pill); padding: 3px 10px;
}
.sg-badge-ok     { color: var(--ok);     background: var(--ok-dim); }
.sg-badge-warn   { color: var(--warn);   background: var(--warn-dim); }
.sg-badge-danger { color: var(--danger); background: var(--danger-dim); }
.sg-badge-quiet  { color: var(--muted);  background: var(--hover); }

/* ── Score — the editorial number. Tabular, tiered by ink. ───── */
.sg-score {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: var(--app-sm); font-weight: 600; color: var(--dim);
  min-width: 2.6em;
}
.sg-score::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); align-self: center; flex: none;
}
.sg-score[data-tier="high"]    { color: var(--accent); }
.sg-score[data-tier="high"]::before { background: var(--accent); }
.sg-score[data-tier="notable"] { color: var(--fg); }
.sg-score[data-tier="notable"]::before { background: var(--muted); }

/* ── Tabs — hairline-underlined, never boxed ─────────────────── */
.sg-tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line-2); }
.sg-tab {
  font: inherit; font-size: var(--app-sm); font-weight: 500; color: var(--muted);
  background: none; border: none; cursor: pointer;
  padding: 10px 2px; margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sg-tab:hover { color: var(--fg); }
.sg-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.sg-tab .sg-count { color: var(--dim); font-weight: 400; margin-left: 6px; font-size: var(--app-xs); }

/* ── Menu / popover ──────────────────────────────────────────── */
.sg-menu {
  min-width: 240px; background: var(--raise);
  border: 1px solid var(--line-2); border-radius: var(--r-menu);
  box-shadow: var(--shadow-menu); padding: 6px;
}
.sg-menu .hd {
  font-size: var(--app-xs); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); padding: 8px 12px 6px;
}
.sg-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: var(--app-sm); color: var(--fg); text-align: left;
  background: none; border: none; border-radius: var(--r-ctl);
  padding: 8px 12px; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.sg-menu-item:hover { background: var(--hover); }
.sg-menu-item .sub { color: var(--dim); font-size: var(--app-xs); margin-left: auto; }
.sg-menu-item[aria-current="true"] { color: var(--accent); }

/* ── List row — the feed's unit. Hairline top/bottom; on hover
   the row drifts 6px right behind an accent wash (the site's
   ServiceRow gesture, at tool scale). ─────────────────────────── */
.sg-rows { border-top: 1px solid var(--line-2); }
.sg-row {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: baseline; gap: var(--row-gap);
  padding: var(--row-y) 10px;
  border-bottom: 1px solid var(--line-2);
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease);
}
a.sg-row { cursor: pointer; }
.sg-row:hover { transform: translateX(6px); background: var(--hover); }
.sg-row .ttl {
  font-size: var(--app-title); font-weight: 500; color: var(--fg);
  line-height: var(--leading-tight);
}
.sg-row .ttl .new {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; vertical-align: 2px;
}
.sg-row .meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-size: var(--app-xs); color: var(--dim); margin-top: 4px;
}
.sg-row .meta .src { color: var(--muted); }
.sg-row .acts {
  display: flex; gap: 2px; align-self: center;
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.sg-row:hover .acts, .sg-row:focus-within .acts { opacity: 1; }

/* date group header inside a feed */
.sg-group {
  display: flex; align-items: baseline; gap: 14px;
  padding: var(--sp-6) 10px var(--sp-3);
}
.sg-group .rule { flex: 1; height: 1px; background: var(--line-2); align-self: center; }

/* ── Empty state — declarative, not cute ─────────────────────── */
.sg-empty { text-align: center; padding: var(--sp-8) var(--sp-5); }
.sg-empty .ttl {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--app-display-2); letter-spacing: var(--display-tracking);
  color: var(--fg);
}
.sg-empty .ttl em { font-style: italic; color: var(--accent); }
.sg-empty p { color: var(--muted); font-size: var(--app-sm); max-width: 44ch; margin: 10px auto 0; }

/* ── Page scaffolding helpers ────────────────────────────────── */
.sg-shell { max-width: var(--app-max); margin: 0 auto; padding: 0 var(--app-pad); }
.sg-reading { max-width: var(--measure); margin: 0 auto; padding: 0 var(--app-pad); }

/* lucide defaults — thin, muted, utility-only */
.lucide { stroke-width: 1.5; }