/*
 * The app shell: page headers, panels, meters, the dashboard, search and settings.
 *
 * Separate from app.css, which is the base layer (reset, type, buttons, forms).
 * This file is the dense-tool layer: hairlines instead of shadows, compact rows,
 * and no card ever floating above anything.
 */

/* ---------------------------------------------------------------- chrome */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

.page-head h1 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.012em;
}

.page-actions {
  display: flex;
  gap: var(--space-2);
}

.page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-8);
}

/* A key, shown rather than hidden in a help page: a dense tool is only fast if
   people learn its shortcuts. */
.kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- panels */

/* A bordered region, not a card: no shadow and no elevation, because nothing
   here floats above anything else. */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.panel-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.panel-meta {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

.panel-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
  line-height: 1.5;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.plan-pro,
.plan-team {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ---------------------------------------------------------------- meters */

.meters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--space-2);
}

.meter-label {
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

.meter-value {
  font-size: var(--text-2xs);
  color: var(--ink);
  margin: 0;
}

/* A real <progress>, not a div pretending to be one: assistive technology reads
   the value out, and the fill needs no inline width, which the CSP forbids. */
.meter-track {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  border: none;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
  appearance: none;
  color: var(--primary);
}

.meter-track::-webkit-progress-bar {
  background: var(--surface-3);
  border-radius: 2px;
}

.meter-track::-webkit-progress-value {
  background: currentcolor;
  border-radius: 2px;
  transition: width var(--duration-slow) var(--ease-out);
}

.meter-track::-moz-progress-bar {
  background: currentcolor;
  border-radius: 2px;
}

/* Colour only once it matters. A bar that turns amber at 40 percent teaches
   people to ignore the colour. */
.meter-warn { color: var(--warning); }
.meter-full { color: var(--danger); }

.meter-plain {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

.meter-plain dd {
  margin: 0;
  color: var(--ink);
}

/* ---------------------------------------------------------------- dashboard */

.dash {
  gap: var(--space-6);
}

.capture {
  display: flex;
  gap: var(--space-2);
}

.capture-input {
  flex: 1;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.capture-input::placeholder { color: var(--ink-faint); }

.capture-input:hover { border-color: var(--border-strong); }

.capture-input:focus {
  outline: none;
  border-color: var(--primary);
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-6);
  align-items: start;
}

.dash-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.dash-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.dash-heading:first-child { margin-top: 0; }

.dash-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-decoration: none;
}

.dash-more:hover { color: var(--primary); }

/* ---------------------------------------------------------------- chart */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
}

.chart-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.chart-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transition: height var(--duration-slow) var(--ease-out);
}

.chart-bar.is-empty {
  height: 2px;
  background: var(--surface-3);
}

/* Fixed steps rather than an inline height: the page is served under a strict
   CSP that refuses style attributes. See ActivityPanel.Height. */
.chart-bar.h-5 { height: 5%; }
.chart-bar.h-10 { height: 10%; }
.chart-bar.h-15 { height: 15%; }
.chart-bar.h-20 { height: 20%; }
.chart-bar.h-25 { height: 25%; }
.chart-bar.h-30 { height: 30%; }
.chart-bar.h-35 { height: 35%; }
.chart-bar.h-40 { height: 40%; }
.chart-bar.h-45 { height: 45%; }
.chart-bar.h-50 { height: 50%; }
.chart-bar.h-55 { height: 55%; }
.chart-bar.h-60 { height: 60%; }
.chart-bar.h-65 { height: 65%; }
.chart-bar.h-70 { height: 70%; }
.chart-bar.h-75 { height: 75%; }
.chart-bar.h-80 { height: 80%; }
.chart-bar.h-85 { height: 85%; }
.chart-bar.h-90 { height: 90%; }
.chart-bar.h-95 { height: 95%; }
.chart-bar.h-100 { height: 100%; }

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- search */

.searchbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.searchbar:focus-within { border-color: var(--primary); }

.searchbar-icon { color: var(--ink-faint); }

.searchbar-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--ink);
  font-size: var(--text-sm);
}

.searchbar-input:focus { outline: none; }

.searchbar-input::placeholder { color: var(--ink-faint); }

.searchbar-input::-webkit-search-cancel-button { display: none; }

.searchbar-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
}

.searchbar-clear:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: var(--text-2xs);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.chip:hover { color: var(--ink); }

.chip-on {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--weight-medium);
}

.search-hint,
.search-count {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.empty-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- settings */

.settings {
  max-width: 620px;
  gap: var(--space-8);
}

.setting-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.setting-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.setting-note {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-width: 60ch;
  line-height: 1.55;
}

/* Sits under the control that failed, not at the top of the page, so the
   message and the button that produced it are read together. */
.setting-error,
.account-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--danger);
  max-width: 60ch;
  line-height: 1.55;
}

.account-error {
  padding: 0 var(--space-2);
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  width: 100%;
  font-size: var(--text-xs);
}

.facts dt { color: var(--ink-muted); }

.facts dd { margin: 0; color: var(--ink); }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Usage and activity are reference, not the reason the app was opened, so on a
     small screen they sit below the notes rather than above them. */
  .dash-side {
    order: 2;
  }
}

@media (max-width: 767px) {
  .page-head,
  .page-body {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .page-head {
    flex-wrap: wrap;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
}

/* ---------------------------------------------------------------- tags */

/* The sidebar has its own .tag-chip inside component-scoped CSS, so these names
   do not collide. This is the editable one. */
.tagbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.tagbar-icon { color: var(--ink-faint); flex: none; }

.tag-chip-on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--space-1) 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tag-remove {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.tag-remove:hover { opacity: 1; }

/* No border until it is focused: an empty box with a frame reads as a required
   field, and tags are optional on every note. */
.tagbar-input {
  flex: 1;
  min-width: 8ch;
  height: 24px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: var(--text-xs);
}

.tagbar-input:focus { outline: none; }

.tagbar-input::placeholder { color: var(--ink-faint); }

.tagbar-error {
  font-size: var(--text-2xs);
  color: var(--danger);
}

/* The tag a search is filtered to, shown so the result count is explainable. */
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  height: 26px;
  padding: 0 var(--space-1) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ---------------------------------------------------------------- audio */

.recorder {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* Red only while sound is being captured. It is the one place in this app that
   uses the colour, which is what makes it mean something. */
.recorder.is-live {
  border-color: var(--recording);
}

.btn-record {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.btn-record:hover:not(:disabled) { border-color: var(--recording); }

.btn-record:disabled { opacity: 0.5; cursor: not-allowed; }

.record-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--recording);
}

.record-dot.pulsing { animation: record-pulse 1.6s var(--ease-out) infinite; }

@keyframes record-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

.recorder-live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.recorder-time {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.recorder-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.recorder-note {
  font-size: var(--text-2xs);
  color: var(--ink-muted);
}

.recorder-warn { color: var(--warning); }

.recorder-status {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* A level meter, not a waveform: it says "the microphone is hearing you", which
   is the only question anyone has while recording. */
.meter-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}

.meter-bar {
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--surface-3);
  transition: background-color 80ms linear;
}

.meter-bar.lit { background: var(--recording); }

.audio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.audio-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.audio-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-muted);
}

.audio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-player {
  width: 100%;
  height: 34px;
}

.audio-meta {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

.audio-dot { margin: 0 4px; }

.audio-error {
  font-size: var(--text-xs);
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .record-dot.pulsing { animation: none; }
}

/* ---------------------------------------------------------------- accents */

.accent-picker {
  display: flex;
  gap: var(--space-2);
}

/* Each swatch shows its own hue, not the current one, so the choice is visible
   before it is made. Same ramp as the tokens, so what you see is what you get. */
.accent-swatch {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.accent-swatch:hover { transform: scale(1.08); }

.accent-swatch.is-active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink);
}

.accent-moss  { background: oklch(0.52 0.13 150); }
.accent-ink   { background: oklch(0.52 0.13 265); }
.accent-tide  { background: oklch(0.52 0.13 230); }
.accent-ember { background: oklch(0.52 0.13 45); }
.accent-rose  { background: oklch(0.52 0.13 12); }
.accent-plum  { background: oklch(0.52 0.13 320); }

.setting-note-spaced { margin-top: var(--space-3); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}