/* ===========================================
   SECTIONS
   =========================================== */

.section-header {
  font-size: var(--text-head);
  font-weight: normal;
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

/* Canonical "page section box", light-background card with padding + bottom
   space. One of these in the codebase. Aliased to the per-page class names
   that were just relabels of this same shape. Templates can use the alias
   name OR add `.content-section` as a co-class. */
/* The canonical panel. Every one of these carries `.raised` in the markup
   now, so the fill and the bevel come from layout.css and this rule is the
   spacing only. The background it used to declare was --surface-overlay,
   which .raised spells --surface-raised; equal on the platform default and a
   theme may set them apart, the same move .card and .buy-card made. */
.content-section,
.import-page .import-form,
.import-page .import-progress,
.library-page .library-section,
.library-page .library-downloads,
.library-page .downloads-hero,
.receipt-page .receipt-box,
.stripe-disclaimer-page .disclaimer-box {
  padding: var(--gap-page);
  margin-bottom: var(--gap-page);
}

/* Variants of the canonical shape that want top-spacing instead of bottom,
   or a tighter --gap-pane padding. */
.library-page .library-downloads,
.receipt-page .receipt-box { margin-bottom: 0; margin-top: var(--gap-pane); }
.import-page .import-progress { padding: var(--gap-pane); margin-bottom: var(--gap-section); }
.stripe-disclaimer-page .disclaimer-box { margin-bottom: var(--gap-pane); }

.form-section {
  margin-bottom: var(--gap-page);
}

.section-group-label {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-muted);
  margin: var(--gap-page) 0 var(--gap-section) 0;
  padding-top: var(--gap-pane);
  border-top: 2px solid var(--border);
}

.form-section h2 {
  font-size: var(--text-subhead);
  font-weight: normal;
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}

details.form-section > summary {
  cursor: pointer;
  list-style: disclosure-closed;
}

details.form-section[open] > summary {
  list-style: disclosure-open;
  margin-bottom: var(--gap-section);
}

details.form-section > summary > h2 {
  display: inline;
}

details.form-section > summary:hover > h2 {
  color: var(--content);
}

/* ===========================================
   NAVIGATION
   =========================================== */

nav {
  margin-bottom: var(--gap-page);
}

.nav-links {
  display: flex;
  gap: var(--gap-page);
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--content);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 0.6;
}

.shortcuts-help-btn {
  font-family: var(--font-mono);
  color: var(--content-muted);
  font-size: var(--text-note);
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 0;
  background: none;
}

.shortcuts-help-btn:hover {
  opacity: 0.6;
}

.breadcrumb {
  font-size: var(--text-note);
  color: var(--content-muted);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-mono);
}

.breadcrumb a {
  color: var(--content);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ===========================================
   HEADER & FOOTER
   =========================================== */

header {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin-bottom: var(--gap-page);
}

footer {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--content-muted);
}

/* Site-wide header.
   The class names are quasi-webview's, not this stylesheet's: the header is a
   `quasi_router::Chrome::band` and `crate::shell::site_header` builds the
   description rather than the markup. A rule here has to match what that
   renderer emits, and `quasi_webview::vocabulary` is the list of what it may. */
.chrome-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-section) var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.chrome-band .chrome-nav {
  margin: 0;
}

/* The places are a `ul` of `li`, which is what a nav of addresses is. The
   markers and the indent go; the row is the layout. */
.chrome-nav ul {
  display: flex;
  gap: var(--gap-pane);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chrome-place {
  color: var(--content);
  text-decoration: none;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.chrome-place:hover {
  opacity: 0.6;
}

/* The cart place is offered on every signed-in page and drawn only when the
   cart holds something. How many items that is is not known when the document
   is rendered, so `core/cart-badge.js` asks `/api/cart/count` and writes the
   answer onto the place as `data-count`; the presence is that answer, rather
   than a class the markup ships hidden and a script takes off.
   The `li` is what hides, not the anchor: an empty item in a flex row still
   pays its gap. */
.chrome-nav li:has(> [data-place="cart"]) {
  display: none;
}

.chrome-nav li:has(> [data-place="cart"][data-count]) {
  display: block;
}

.chrome-brand {
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  text-decoration: none;
  color: var(--content);
}

.chrome-brand:hover {
  opacity: 0.8;
}

/* Header search */
.chrome-search {
  flex: 0 1 220px;
  margin: 0 var(--gap-section);
}

/* The box carries a real `<label>` now, where the hand-written header carried
   an `aria-label`. Hidden rather than dropped: the same name is read out, and a
   description that stopped naming its own question would be a worse
   description for the sake of a stylesheet. */
.chrome-search .form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chrome-search .form-group {
  margin: 0;
}

/* Only what makeover does not already say about a `.field`. The surface, the
   text colour and the focus ring are the design system's, and the drift check
   in `build.rs` fails the build for restating one of them here. The old
   `.header-search input` rules did restate all four; they were written before
   the box was a described field. */
.chrome-search .field {
  width: 100%;
  font-size: var(--text-note);
  font-family: var(--font-mono);
}

/* The disclosure, hidden by default and shown at 768px. The checkbox holds the
   state and the label is the control: `Disclose::Narrow` says the places are
   worth hiding when there is no room, and this is the browser's answer to it. */
.chrome-disclose-state {
  display: none;
}

.chrome-disclose {
  display: none;
  cursor: pointer;
  padding: var(--gap-peer);
  z-index: var(--z-header);
}

.chrome-disclose span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--content);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ===========================================
   LAYOUT UTILITIES
   =========================================== */

.action-buttons {
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}
/* ===========================================
   SPECIFIC COMPONENTS
   =========================================== */

/* Login container.
   The id as well as the class: the four auth pages are described screens now
   (`crate::quasi::auth_pages`) and a description names a region, never a class,
   so the region's id is what a rule can key off. The class stays for the six
   templated pages that still write it. */
#login-container,
.login-container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  background: var(--surface-overlay);
  padding: var(--gap-page);
}
/* Logo */
.logo {
  font-family: var(--font-display);
  color: var(--content);
  font-size: var(--text-head);
}

.tagline {
  font-family: var(--font-mono);
  color: var(--content-muted);
  text-align: center;
}

.centered-page .tagline {
  margin-bottom: var(--gap-bound);
}
/* Skip link */
.skip-link {
  text-align: center;
  margin-top: var(--gap-section);
}

.skip-link a {
  color: var(--primary-dark);
  text-decoration: none;
  font-size: var(--text-note);
  opacity: 0.7;
}

.skip-link a:hover {
  text-decoration: underline;
}

/* Footer link */
.foot-link {
  margin-top: 0.5em;
}

/* The described auth pages have no `.foot-link` wrapper: a description says
   there is a link, and a `div` around it to make it a block is markup with no
   meaning in it. Stacking them is this stylesheet's answer, which is where a
   layout question a description declines belongs. */
#login-container > .link {
  display: block;
  margin-top: 0.5em;
}

/* Status indicators */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--primary-dark);
  margin-right: var(--gap-peer);
}

.status-indicator.active {
  background: var(--success);
}

/* Amount styling */
.amount-in {
  color: var(--success);
}

.amount-out {
  opacity: 0.7;
}

/* File upload */
.file-upload-area {
  background: var(--surface-sunken);
  padding: var(--gap-page);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: var(--gap-section);
}

.file-upload-area:hover,
.file-upload-area.dragover {
  background: var(--border);
}
/* Chart placeholder */
.chart-container {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-section);
}

.chart-header h2 {
  font-size: var(--text-subhead);
  font-weight: normal;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding: 0 var(--gap-peer);
}

.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  cursor: default;
  position: relative;
}

.chart-bar-col[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: var(--primary-light);
  font-size: var(--text-fine);
  font-family: var(--font-mono);
  padding: var(--gap-bound) var(--gap-peer);
  white-space: nowrap;
  z-index: var(--z-dropdown);
  pointer-events: none;
  margin-bottom: var(--gap-bound);
}

.chart-bar {
  width: 100%;
  height: var(--fill, 0%);
  background: var(--primary-dark);
  min-height: 2px;
  transition: opacity 0.15s;
}

.chart-bar-col:hover .chart-bar {
  opacity: 0.8;
}

.chart-bar-label {
  font-size: var(--text-fine);
  opacity: 0.5;
  margin-top: var(--gap-bound);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Time selector */
.time-selector {
  display: flex;
  gap: var(--gap-peer);
}

/* The range buttons are makeover's `.segment`, which is what a segmented
   control is called there, and B3's question about whether this codebase has
   an analogue: it does, and this is it. Fill, bevel, hover, active and focus
   are the generated ones; this rule is geometry and type.

   Selection was a --primary-dark fill with a --primary-light label, which is
   a second thing meaning "chosen" beside the generated `.chosen` (the segment
   presses IN — well fill, inset bevel). Taking the generated one; only the
   name stays local, same as the tabs. */
.time-selector button {
  border: none;
  padding: var(--gap-peer) var(--gap-section);
  font-family: inherit;
  font-size: var(--text-note);
  cursor: pointer;
}

.time-selector button.is-selected {
  background: var(--surface-well, var(--surface-page));
  box-shadow: var(--bevel-inset);
}

/* Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}
.analytics-list {
  list-style: none;
}

.analytics-list li {
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}

.analytics-list li:last-child {
  border-bottom: none;
}

/* Filter controls */
.filter-controls {
  display: flex;
  gap: var(--gap-section);
  margin-bottom: var(--gap-section);
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
}
/* UUID styling */
.uuid {
  font-family: inherit;
  opacity: 0.5;
  font-size: var(--text-note);
}