:root {
  --laas-sidebar-width: 250px;
  --laas-navbar-height: 3.25rem;

  /* Data-viz palette — validated categorical slots, light surface. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --seq-200: #9ec5f4;
  --seq-450: #2a78d6;
  --chart-grid: #e1e0d9;
  --chart-baseline: #c3c2b7;
  --chart-muted: #898781;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    /* Same eight hues, stepped for the dark surface. */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --seq-200: #184f95;
    --seq-450: #3987e5;
    --chart-grid: #2c2c2a;
    --chart-baseline: #383835;
  }
}

:root[data-theme="dark"] {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --seq-200: #184f95;
  --seq-450: #3987e5;
  --chart-grid: #2c2c2a;
  --chart-baseline: #383835;
}

/* --- Shell ---------------------------------------------------------------- */
.laas-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--laas-navbar-height));
}

.laas-sidebar {
  width: var(--laas-sidebar-width);
  flex: 0 0 var(--laas-sidebar-width);
  border-right: 1px solid var(--bulma-border, #dbdbdb);
  background: var(--bulma-scheme-main-bis, #fafafa);
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}

.laas-main {
  flex: 1 1 auto;
  min-width: 0;
  /* Room for the fixed assistant bar, which sits over everything else. */
  padding-bottom: 4.5rem;
}

@media screen and (max-width: 1023px) {
  .laas-shell { flex-direction: column; }
  .laas-sidebar {
    width: 100%;
    flex-basis: auto;
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--bulma-border, #dbdbdb);
  }
}

.brand-mark { font-weight: 800; letter-spacing: 0.08em; }
/* Version sits right after the wordmark, greyed back so it reads as a
   footnote to the brand rather than part of it. */
.brand-version {
  color: #8a8a8a;
  font-weight: 400;
  font-size: 0.75em;
  margin-left: 0.35em;
  letter-spacing: 0;
}
.brand-sub { opacity: 0.6; font-size: 0.75rem; margin-left: 0.5rem; }

.avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--bulma-primary, #00d1b2);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Buttons used inside navbar dropdowns should look like plain items. */
.navbar-dropdown .button.is-white {
  border: 0;
  border-radius: 0;
  text-align: left;
  height: auto;
  padding: 0.375rem 1rem;
}

/* --- Cards & stats -------------------------------------------------------- */
.stat-tile {
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: var(--bulma-scheme-main, #fff);
  height: 100%;
}
.stat-tile .stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
  margin-bottom: 0.35rem;
}
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-tile .stat-delta { font-size: 0.8rem; margin-top: 0.25rem; }
.stat-note { font-size: 0.75rem; opacity: 0.7; margin-top: 0.3rem; }
.stat-delta.is-up { color: var(--bulma-success, #48c78e); }
.stat-delta.is-down { color: var(--bulma-danger, #f14668); }

.section-card {
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 8px;
  background: var(--bulma-scheme-main, #fff);
  overflow: hidden;
}
.section-card > .section-card-head {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bulma-border, #dbdbdb);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.section-card > .section-card-body { padding: 1.25rem; }
.section-card > .section-card-body.is-flush { padding: 0; }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  opacity: 0.7;
}

/* --- Calendar ------------------------------------------------------------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--bulma-border, #dbdbdb);
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 6px;
  overflow: hidden;
}
.cal-head {
  background: var(--bulma-scheme-main-bis, #fafafa);
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.cal-cell {
  background: var(--bulma-scheme-main, #fff);
  min-height: 108px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cal-cell.is-outside { background: var(--bulma-scheme-main-bis, #fafafa); opacity: 0.55; }
.cal-cell.is-today { outline: 2px solid var(--bulma-link, #485fc7); outline-offset: -2px; }
.cal-daynum { font-size: 0.75rem; font-weight: 600; opacity: 0.7; }
.cal-event {
  display: block;
  font-size: 0.72rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.cal-event:hover { filter: brightness(1.1); color: #fff; }

/* --- Mail ----------------------------------------------------------------- */
.mail-row { cursor: pointer; }
.mail-row.is-unread { font-weight: 600; }
.mail-row.is-unread td:first-child { border-left: 3px solid var(--bulma-link, #485fc7); }
.mail-body { white-space: pre-wrap; line-height: 1.6; }

/* --- Ledger --------------------------------------------------------------- */
.amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.acct-code { font-variant-numeric: tabular-nums; opacity: 0.7; margin-right: 0.5rem; }
tr.is-unbalanced { background: color-mix(in srgb, #f14668 12%, transparent); }

/* --- Charts --------------------------------------------------------------- */
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-grid-line { stroke: var(--bulma-border, #dbdbdb); stroke-width: 1; }
.chart-axis-text { font-size: 10px; fill: currentColor; opacity: 0.65; }
.chart-tip {
  position: fixed;
  pointer-events: none;
  background: rgba(20, 20, 25, 0.94);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  z-index: 60;
  white-space: nowrap;
}

.bar-track {
  background: var(--bulma-scheme-main-ter, #ededed);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 3px; }

/* --- Assistant ------------------------------------------------------------ */
.tool-entry + .tool-entry { border-top: 1px solid var(--bulma-border, #dbdbdb); }
.tool-entry { padding: 1rem 0; }
.tool-entry:first-child { padding-top: 0; }
.tool-detail > summary { cursor: pointer; }
.tool-detail[open] > summary { margin-bottom: 0.25rem; }

/* --- Misc ----------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.is-clipped-text {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-help { font-size: 0.75rem; opacity: 0.7; }
.auth-hero { min-height: 100vh; display: flex; align-items: center; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
}
.bar-label {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-value { font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* --- Releases ------------------------------------------------------------- */
.release-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
}
.release-card + .release-card { border-top: 1px solid var(--bulma-border, #dbdbdb); }
.release-cover {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bulma-scheme-main-ter, #ededed);
}
.release-cover.is-placeholder {
  /* Sleeve-shaped stand-in so a coverless release still lines up. */
  background:
    radial-gradient(circle at 50% 50%,
      var(--bulma-scheme-main, #fff) 0 6px,
      transparent 6px),
    var(--bulma-scheme-main-ter, #ededed);
}

/* --- Post targets --------------------------------------------------------- */
.target-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
}
.target-choice + .target-choice { border-top: 1px solid var(--bulma-border, #dbdbdb); }

/* --- Assistant bar --------------------------------------------------------
   Fixed to the bottom of the working area, clear of the sidebar on desktop and
   full width once the sidebar stacks. .laas-main carries matching bottom padding
   so the last row of a table is never left underneath it. */
.assistant-bar {
  position: fixed;
  left: var(--laas-sidebar-width);
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 0.5rem 0.75rem;
  background: var(--bulma-scheme-main, #fff);
  border-top: 1px solid var(--bulma-border, #dbdbdb);
  box-shadow: 0 -2px 10px rgba(10, 10, 10, 0.06);
}

@media screen and (max-width: 1023px) {
  .assistant-bar { left: 0; }
}

.assistant-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.assistant-form .input { flex: 1 1 auto; }

.assistant-log {
  max-height: 45vh;
  overflow-y: auto;
  margin-bottom: 0.5rem;
  padding-right: 0.25rem;
}
.assistant-turn + .assistant-turn {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bulma-border, #dbdbdb);
}
.assistant-question { font-weight: 600; }
.assistant-answer { white-space: pre-wrap; }
.assistant-proposal { margin-top: 0.75rem; padding: 0.75rem 1rem; }

/* --- Assistant landing ----------------------------------------------------
   The alternative front page: one big question, and the day underneath it. The
   hero owns the whole window — nothing else visible until you scroll — so the
   arrow at its foot is the only thing saying there is more. Everything below
   reuses .stat-tile, .section-card, .mail-row and .empty-state. */
.home-hero {
  /* The arrow is positioned against this, not laid out in the flow: an auto
     margin would absorb every pixel of free space and shove the question box up
     against the navbar, which is the opposite of what a full-window hero is for. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Cancels .container.is-fluid's py-5 at the top so the hero starts flush under
     the navbar and ends flush with the bottom of the window: the question box
     lands in the middle of the screen, not 1.5rem below it. */
  margin-top: -1.5rem;
  /* The bottom padding is the arrow's parking space, so a tall answer log grows
     down to it and stops rather than sliding underneath. */
  padding: 1.5rem 0 5rem;
  min-height: calc(100vh - var(--laas-navbar-height));
  /* svh, where it exists, is the window minus mobile browser chrome — without it
     the arrow hides behind Safari's toolbar, which is the one place it matters. */
  min-height: calc(100svh - var(--laas-navbar-height));
}
.home-hero-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.home-hero-assistant, .home-hero-notice { width: 100%; max-width: 44rem; }

.home-hero-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-hero-form .input {
  flex: 1 1 auto;
  height: 3.25rem;
  font-size: 1.15rem;
  border-radius: 999px;
  padding-left: 1.25rem;
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.08);
}
.home-hero-form .button { height: 3.25rem; border-radius: 999px; padding: 0 1.5rem; }

/* The answer belongs under the box here, not above it as on the fixed bar. */
.home-hero-assistant .assistant-log {
  max-height: 40vh;
  text-align: left;
  margin: 1rem 0 0;
}
.home-hero-links { margin-top: 1rem; }

/* Pinned to the foot of the hero rather than laid out after the box, so it sits
   in the same place whether the box is empty or has an answer under it. The
   breathing is the affordance — a static grey chevron at the bottom of an empty
   screen reads as decoration, and nobody scrolls. The fade and the drift are two
   animations because the container carries no transform of its own and the arrow
   does; one keyframe block driving both would fight over it. */
.home-scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bulma-text-weak, #7a7a7a);
  animation: home-scroll-fade 2.4s ease-in-out infinite;
}
.home-scroll-hint:hover { color: var(--bulma-link, #485fc7); animation-play-state: paused; }
.home-scroll-arrow {
  width: 2rem;
  height: 2rem;
  animation: home-scroll-drift 2.4s ease-in-out infinite;
}
@keyframes home-scroll-fade  { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes home-scroll-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.4rem); } }

.home-section + .home-section { margin-top: 2.5rem; }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.home-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bulma-text-weak, #7a7a7a);
}

/* A diary rather than a list: the date is a column of its own, and today is
   marked the same way .cal-cell.is-today and .mail-row.is-unread are. */
.home-day {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.home-day + .home-day { border-top: 1px solid var(--bulma-border, #dbdbdb); }
.home-day-date { font-size: 0.85rem; color: var(--bulma-text-weak, #7a7a7a); }
.home-day.is-today .home-day-date { color: var(--bulma-link, #485fc7); font-weight: 600; }
.home-day p + p { margin-top: 0.5rem; }

@media screen and (max-width: 768px) {
  .home-hero-form { flex-direction: column; align-items: stretch; }
  .home-hero-form .input, .home-hero-form .button { width: 100%; }
  .home-day { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- The assistant landing's horizontal menu -------------------------------
   Sits under the hero and pins to the top once you reach it, which is the whole
   reveal: no JavaScript decides when it appears, the scroll position does. Too
   many rows for one screen width, so the strip scrolls sideways rather than
   wrapping — a menu that grows to three lines tall when pinned is worse than
   one you have to nudge. */
.home-rail {
  position: sticky;
  top: 0;
  z-index: 20;
  /* -32px/+32px is .container.is-fluid's own padding: the strip runs edge to
     edge while its links stay lined up with the sections below. */
  margin: 0 -32px 2.5rem;
  padding: 0 32px;
  background: var(--bulma-scheme-main, #fff);
  border-bottom: 1px solid var(--bulma-border, #dbdbdb);
}
/* The strip runs off the right edge on any normal screen. Without this it just
   stops mid-word and reads as broken; the fade says "keep going". Not clickable,
   or it would swallow the chip underneath it. */
.home-rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;
  width: 3rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bulma-scheme-main, #fff));
}
.home-rail-scroll {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
  /* Vertical room for the hover lift, so the chips do not clip against the
     scroll box when they rise. */
  padding: 0.6rem 0;
  /* Room for a finger to swipe on a touchpad without grabbing a link. */
  scroll-padding-inline: 32px;
}
.home-rail-label {
  flex: 0 0 auto;
  margin: 0 0.25rem 0 0.85rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--bulma-border, #dbdbdb);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bulma-text-weak, #7a7a7a);
}
.home-rail-label:first-child { margin-left: 0; padding-left: 0; border-left: none; }

/* Chips, not links. They carry a border and a fill at rest — a row of bare
   anchors reads as a paragraph of blue text, not as something to press — and
   they lift a pixel under the pointer so the whole strip feels like controls. */
.home-rail-link {
  flex: 0 0 auto;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--bulma-border, #dbdbdb);
  border-radius: 999px;
  background: var(--bulma-scheme-main-bis, #fafafa);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--bulma-text, #4a4a4a);
  transition: background-color 90ms ease, border-color 90ms ease,
              color 90ms ease, transform 90ms ease, box-shadow 90ms ease;
}
.home-rail-link:hover {
  background: var(--bulma-scheme-main, #fff);
  border-color: var(--bulma-link, #485fc7);
  color: var(--bulma-link, #485fc7);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.12);
}
/* Pressed sits back down where it started; without this the chip stays lifted
   through the click and the press has no weight to it. */
.home-rail-link:active { transform: translateY(0); box-shadow: none; }
.home-rail-link:focus-visible {
  outline: 2px solid var(--bulma-link, #485fc7);
  outline-offset: 2px;
}
/* The three page sections read as the rail's own tabs; the rest are links out. */
.home-rail-link.is-section {
  font-weight: 600;
  border-color: var(--bulma-link, #485fc7);
  color: var(--bulma-link, #485fc7);
  background: var(--bulma-scheme-main, #fff);
}
.home-rail-link.is-active,
.home-rail-link.is-active:hover {
  background: var(--bulma-link, #485fc7);
  border-color: var(--bulma-link, #485fc7);
  color: var(--bulma-link-invert, #fff);
}

/* Anchors land below the pinned rail rather than underneath it. */
.home-section[id] { scroll-margin-top: 4rem; }

@media (prefers-reduced-motion: reduce) {
  .home-scroll-hint, .home-scroll-arrow { animation: none; }
  .home-scroll-hint { opacity: 0.75; }
  .home-rail-link { transition: none; }
  .home-rail-link:hover { transform: none; }
}