/* Signed-in app — Signal Tubes, app density.
   Same faces and --hl-* values as the public site (signal_home.css).
   Font files live in app/assets/fonts; the built stylesheet is served from
   /assets/application.css, so urls are relative to /assets. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/geist-500-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/geist-500-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Beats the OS dark-theme block in tokens.css (that selector is :root + :not). */
html.hl-app[data-theme="dark"] {
  --hl-abyss: #07090d;
  --hl-panel: #0f141c;
  --hl-panel-lift: #151c27;
  --hl-panel-hover: #121924;
  --hl-signal: #5eead4;
  --hl-signal-mid: #2dd4bf;
  --hl-steel: #a8b2c1;
  --hl-highlight: #e8eef7;
  --hl-muted: #7b8697;
  --hl-rose: #f43f5e;
  --hl-rose-deep: #be123c;
  --hl-ink: #0b1220;
  --hl-warn: #fbbf24;
  --hl-err: #fb7185;
  --hl-info: #93c5fd;
  --hl-line: rgba(168, 178, 193, 0.14);
  --hl-line-strong: rgba(168, 178, 193, 0.28);
  --hl-font-display: "Geist", "Inter", system-ui, sans-serif;
  --hl-font-body: "Inter", system-ui, sans-serif;
  --hl-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hl-r-sm: 6px;
  --hl-r-md: 10px;
  --hl-r-lg: 14px;

  --surface: var(--hl-abyss);
  --surface-muted: var(--hl-panel);
  --surface-raised: var(--hl-panel);
  --surface-hover: var(--hl-panel-hover);
  --surface-inverted: var(--hl-highlight);
  --text-inverted: var(--hl-ink);
  --overlay: rgb(0 0 0 / 0.62);
  --border: var(--hl-line);
  --border-strong: var(--hl-line-strong);
  --text: var(--hl-steel);
  --text-muted: var(--hl-muted);
  --text-subtle: var(--hl-muted);
  --accent: var(--hl-signal);
  --accent-hover: var(--hl-signal-mid);
  --accent-contrast: var(--hl-ink);
  --accent-subtle: rgba(94, 234, 212, 0.1);
  --success: var(--hl-signal);
  --success-subtle: rgba(94, 234, 212, 0.1);
  --warning: var(--hl-warn);
  --warning-subtle: rgba(251, 191, 36, 0.1);
  --danger: var(--hl-err);
  --danger-subtle: rgba(251, 113, 133, 0.1);
  --danger-contrast: var(--hl-highlight);
  --info: var(--hl-info);
  --info-subtle: rgba(147, 197, 253, 0.1);
  --ring: var(--hl-signal);
  --shadow-card: none;
  --shadow-pop: 0 12px 40px rgb(0 0 0 / 0.45);

  color-scheme: dark;
  background: var(--hl-abyss);
  color: var(--hl-steel);
  font-family: var(--hl-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html.hl-app h1,
html.hl-app h2,
html.hl-app h3,
html.hl-app .hl-display {
  font-family: var(--hl-font-display);
  color: var(--hl-highlight);
  letter-spacing: -0.015em;
}

html.hl-app h1 { font-size: 20px; font-weight: 600; line-height: 1.25; }
html.hl-app h2 { font-size: 15px; font-weight: 600; }
html.hl-app h3 { font-size: 13.5px; font-weight: 600; }

html.hl-app code,
html.hl-app pre,
html.hl-app .font-mono,
html.hl-app .hl-mono {
  font-family: var(--hl-font-mono);
}

html.hl-app :focus-visible {
  outline: 2px solid var(--hl-signal);
  outline-offset: 2px;
}

html.hl-app .hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--hl-r-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
html.hl-app .hl-btn-sm { height: 26px; padding: 0 8px; font-size: 12px; }
html.hl-app .hl-btn-primary { background: var(--hl-rose); color: var(--hl-ink) !important; }
html.hl-app .hl-btn-primary:hover { background: var(--hl-rose-deep); color: var(--hl-ink) !important; }
html.hl-app .hl-btn-line {
  background: var(--hl-panel);
  color: var(--hl-highlight);
  border-color: var(--hl-line-strong);
}
html.hl-app .hl-btn-line:hover { background: var(--hl-panel-lift); }
html.hl-app .hl-btn-signal { background: var(--hl-signal); color: var(--hl-ink); }
html.hl-app .hl-btn-signal:hover { background: var(--hl-signal-mid); }
html.hl-app .hl-btn-ghost { background: transparent; color: var(--hl-steel); }
html.hl-app .hl-btn-ghost:hover { background: var(--hl-panel-lift); color: var(--hl-highlight); }
html.hl-app .hl-btn-danger {
  background: transparent;
  color: var(--hl-err);
  border-color: rgba(251, 113, 133, 0.45);
}
html.hl-app .hl-btn-danger:hover { background: rgba(251, 113, 133, 0.08); }
html.hl-app .hl-btn:disabled,
html.hl-app .hl-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

html.hl-app .hl-sidebar {
  width: 232px;
  background: var(--hl-panel);
  border-right: 1px solid var(--hl-line);
}
html.hl-app .hl-nav-label {
  font-family: var(--hl-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hl-muted);
  padding: 0 10px;
  margin: 14px 0 4px;
}
html.hl-app .hl-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--hl-r-sm);
  color: var(--hl-steel);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
html.hl-app .hl-nav-link:hover { background: var(--hl-panel-hover); color: var(--hl-highlight); }
html.hl-app .hl-nav-link[aria-current="page"] {
  background: rgba(94, 234, 212, 0.1);
  color: var(--hl-signal);
  box-shadow: inset 2px 0 0 var(--hl-signal);
}
html.hl-app .hl-nav-link svg { width: 16px; height: 16px; flex: none; }
html.hl-app .hl-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--hl-signal);
  color: var(--hl-ink);
  font-family: var(--hl-font-mono);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.hl-app .hl-roadmap {
  margin-left: auto;
  font-family: var(--hl-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hl-muted);
  border: 1px solid var(--hl-line-strong);
  border-radius: 999px;
  padding: 1px 6px;
}
html.hl-app .hl-live {
  font-family: var(--hl-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hl-ink);
  background: var(--hl-signal);
  border-radius: 999px;
  padding: 1px 6px;
}
html.hl-app dialog {
  color: var(--hl-steel);
  background: var(--hl-panel);
  max-width: calc(100vw - 24px);
}
html.hl-app dialog::backdrop { background: rgba(7, 9, 13, 0.72); }
html.hl-app .hl-mobile-back { display: none; }
html.hl-app .hl-topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hl-line);
  background: var(--hl-abyss);
}
html.hl-app .hl-search-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--hl-r-sm);
  border: 1px solid var(--hl-line-strong);
  background: var(--hl-panel);
  color: var(--hl-muted);
  font-size: 12.5px;
  min-width: 180px;
}
html.hl-app .hl-kbd {
  margin-left: auto;
  font-family: var(--hl-font-mono);
  font-size: 11px;
  border: 1px solid var(--hl-line-strong);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--hl-steel);
}
html.hl-app .hl-crumb { color: var(--hl-muted); font-size: 13px; }
html.hl-app .hl-crumb a { color: var(--hl-steel); text-decoration: none; }
html.hl-app .hl-crumb a:hover { color: var(--hl-signal); }
html.hl-app .hl-crumb [aria-current="page"] { color: var(--hl-highlight); }

html.hl-app .hl-stat {
  background: var(--hl-panel);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-r-md);
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
  text-decoration: none;
  color: inherit;
}
html.hl-app .hl-stat:hover { background: var(--hl-panel-hover); }
html.hl-app .hl-stat-label {
  font-size: 12px;
  color: var(--hl-muted);
}
html.hl-app .hl-stat-value {
  font-family: var(--hl-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--hl-highlight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
html.hl-app .hl-delta {
  font-family: var(--hl-font-mono);
  font-size: 11px;
}
html.hl-app .hl-delta-good { color: var(--hl-signal); }
html.hl-app .hl-delta-bad { color: var(--hl-err); }
html.hl-app .hl-spark { display: block; margin-top: auto; }
html.hl-app .hl-spark polyline {
  fill: none;
  stroke: var(--hl-signal);
  stroke-width: 1.5;
}
html.hl-app .hl-spark-err polyline { stroke: var(--hl-err); }

html.hl-app .hl-card {
  background: var(--hl-panel);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-r-md);
}
html.hl-app .hl-code {
  background: #0a0e14;
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-r-md);
  padding: 12px 14px;
  font-family: var(--hl-font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--hl-steel);
  overflow-x: auto;
  white-space: pre-wrap;
}
html.hl-app .hl-k { color: var(--hl-signal); }
html.hl-app .hl-s { color: #c4b5fd; }
html.hl-app .hl-n { color: var(--hl-warn); }
html.hl-app .hl-c { color: var(--hl-muted); }

html.hl-app .hl-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--hl-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hl-muted);
}
html.hl-app .hl-field input,
html.hl-app .hl-field textarea,
html.hl-app .hl-field select,
html.hl-app input[type="text"],
html.hl-app input[type="email"],
html.hl-app input[type="password"],
html.hl-app input[type="search"],
html.hl-app input[type="url"],
html.hl-app input[type="number"],
html.hl-app textarea,
html.hl-app select {
  background: var(--hl-abyss);
  color: var(--hl-highlight);
  border-color: var(--hl-line-strong);
}
html.hl-app .hl-input {
  width: 100%;
  max-width: 420px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--hl-r-sm);
  border: 1px solid var(--hl-line-strong);
  background: var(--hl-abyss);
  color: var(--hl-highlight);
  font-size: 13.5px;
}
html.hl-app .hl-input-error { border-color: var(--hl-err); }
html.hl-app .hl-help { margin-top: 4px; font-size: 12px; color: var(--hl-muted); }
html.hl-app .hl-help-err { color: var(--hl-err); }
html.hl-app .hl-help-ok { color: var(--hl-signal); }

html.hl-app .hl-settings {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
html.hl-app .hl-settings-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--hl-r-sm);
  color: var(--hl-steel);
  text-decoration: none;
  font-size: 13.5px;
}
html.hl-app .hl-settings-nav a[aria-current="page"] {
  background: rgba(94, 234, 212, 0.1);
  color: var(--hl-signal);
}
html.hl-app .hl-switch {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--hl-panel-lift);
  border: 1px solid var(--hl-line-strong);
  position: relative;
  flex: none;
}
html.hl-app .hl-switch[aria-checked="true"] { background: var(--hl-signal-mid); }
html.hl-app .hl-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--hl-ink);
}
html.hl-app .hl-switch[aria-checked="true"] i { left: 18px; }

html.hl-app .hl-meter {
  height: 4px;
  border-radius: 999px;
  background: var(--hl-panel-lift);
  overflow: hidden;
}
html.hl-app .hl-meter span {
  display: block;
  height: 100%;
  background: var(--hl-signal);
}

html.hl-app .hl-inbox-list {
  width: 360px;
  flex: none;
  border-right: 1px solid var(--hl-line);
  background: var(--hl-abyss);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.hl-app .hl-empty {
  text-align: center;
  padding: 48px 16px;
}
html.hl-app .hl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  text-align: left;
}
html.hl-app .hl-step {
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-r-md);
  padding: 12px;
}
html.hl-app .hl-step b {
  display: block;
  font-family: var(--hl-font-mono);
  font-size: 11px;
  color: var(--hl-signal);
  margin-bottom: 4px;
}

html.hl-app tbody tr:hover { background: var(--hl-panel-hover); }

/* Older screens still carry light-theme utility classes. Recolor them
   inside the app so a missed view does not flash white. */
html.hl-app .bg-white { background-color: var(--hl-panel) !important; }
html.hl-app .text-gray-900,
html.hl-app .text-gray-800 { color: var(--hl-highlight) !important; }
html.hl-app .text-gray-700,
html.hl-app .text-gray-600,
html.hl-app .text-gray-500 { color: var(--hl-steel) !important; }
html.hl-app .text-gray-400,
html.hl-app .text-gray-300 { color: var(--hl-muted) !important; }
html.hl-app .border-gray-200,
html.hl-app .border-gray-300,
html.hl-app .divide-gray-200,
html.hl-app .divide-gray-300 { border-color: var(--hl-line) !important; }
html.hl-app .bg-gray-50,
html.hl-app .bg-gray-100 { background-color: var(--hl-panel-lift) !important; }
html.hl-app .ring-gray-300 { --tw-ring-color: var(--hl-line-strong) !important; }
html.hl-app .bg-indigo-600,
html.hl-app .bg-indigo-500 {
  background-color: var(--hl-rose) !important;
  color: var(--hl-ink) !important;
}
html.hl-app .text-indigo-600,
html.hl-app .text-indigo-700,
html.hl-app .text-indigo-500 { color: var(--hl-signal) !important; }
html.hl-app .bg-indigo-50 { background-color: rgba(94, 234, 212, 0.1) !important; }
html.hl-app .bg-red-50 { background-color: rgba(251, 113, 133, 0.1) !important; }
html.hl-app .text-red-800,
html.hl-app .text-red-700,
html.hl-app .text-red-500,
html.hl-app .text-red-400 { color: var(--hl-err) !important; }
html.hl-app .bg-green-50 { background-color: rgba(94, 234, 212, 0.1) !important; }
html.hl-app .text-green-800,
html.hl-app .text-green-700,
html.hl-app .text-green-500,
html.hl-app .text-green-400 { color: var(--hl-signal) !important; }

@media (max-width: 1023px) {
  html.hl-app .hl-settings { grid-template-columns: 1fr; }
  html.hl-app .hl-inbox-list { width: 100%; border-right: 0; }
  html.hl-app .hl-inbox-list.hl-mobile-hide,
  html.hl-app .hl-inbox-detail.hl-mobile-hide { display: none !important; }
  html.hl-app .hl-mobile-back {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 20;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hl-line);
    background: var(--hl-abyss);
    color: var(--hl-signal);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  html.hl-app .hl-steps { grid-template-columns: 1fr; }
  html.hl-app .hl-search-btn { min-width: 0; }
  html.hl-app .hl-btn,
  html.hl-app .hl-nav-link,
  html.hl-app .hl-search-btn { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html.hl-app *,
  html.hl-app *::before,
  html.hl-app *::after {
    animation: none !important;
    transition: none !important;
  }
}