/* Basic layout structure */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.d-flex {
  display: flex;
  flex: 1;
}

/* ─── Top Bar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.topbar-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease;
}

.topbar-toggle:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Left toggle — tinted with the current section's color */
.topbar-toggle-section {
  background-color: var(--section-color, #001738);
  color: #ffffff;
}

.topbar-toggle-section:hover,
.topbar-toggle-section:focus {
  background-color: color-mix(in srgb, var(--section-color, #001738) 88%, black);
  color: #ffffff;
}

.topbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-breadcrumbs {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar-breadcrumbs::-webkit-scrollbar { display: none; }

.topbar-breadcrumbs .breadcrumb {
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 0.9rem;
}

.topbar-breadcrumbs .breadcrumb-item a {
  color: #6c757d;
}
.topbar-breadcrumbs .breadcrumb-item a:hover {
  color: var(--section-color, #0d6efd);
}
.topbar-breadcrumbs .breadcrumb-item.active {
  color: #001738;
  font-weight: 500;
}
.topbar-breadcrumbs .breadcrumb-item i {
  color: var(--section-color, #6c757d);
}

/* Section-tinted accent bar under the topbar */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--section-color, transparent);
  opacity: 0.7;
  transition: background 0.3s ease;
  pointer-events: none;
}

/* ─── Left Sidebar (section sub-pages) ──────────────────────── */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background-color: rgba(248, 249, 250, 0.98);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  transition: transform 0.3s ease, visibility 0.3s ease;
  position: fixed;
  top: 68px;
  left: 12px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 1030;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.sidebar-hidden {
  transform: translateX(calc(-100% - 24px));
  visibility: hidden;
}

.sidebar-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  min-height: 56px;
  border-radius: 16px 16px 0 0;
}

.sidebar-title {
  color: #001738;
  font-size: 1.25rem;
}

.sidebar-body {
  flex-grow: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-body::-webkit-scrollbar {
  width: 5px;
}

.sidebar-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-body::-webkit-scrollbar-thumb {
  background: #888;
}

.sidebar-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #dee2e6;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-radius: 0 0 16px 16px;
}

.sidebar .nav-link {
  color: #475569;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.1rem;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: #001738;
}

/* Group headings inside a section's sidenav: a label, not a control. */
.sidebar .nav-heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4, #8a8474);
  padding: 0.9rem 0.9rem 0.25rem;
}
.sidebar .nav-heading:first-child {
  padding-top: 0.25rem;
}

.sidebar .nav-link.active {
  color: var(--section-color, #001738);
  font-weight: 600;
  background-color: color-mix(in srgb, var(--section-color, #0d6efd) 10%, transparent);
}

.sidebar-title i {
  color: var(--section-color, #001738);
}

.sidebar h5 {
  color: var(--section-color, #001738);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding: 0 0.9rem;
}

/* ─── Right Sidebar (Section Switcher — Google Apps grid) ───── */
.section-switcher {
  width: 320px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.99);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  max-height: 560px;
  transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
  position: fixed;
  top: 68px;
  right: 12px;
  border-radius: 20px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 1030;
  overflow: hidden;
}

.section-switcher-hidden {
  transform: translateX(calc(100% + 24px)) scale(0.96);
  opacity: 0;
  visibility: hidden;
}

.section-switcher-header {
  padding: 1.25rem 1.25rem 0.75rem;
  display: flex;
  align-items: flex-start;
  background: transparent;
  border: none;
}

.section-switcher-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #001738;
  letter-spacing: -0.01em;
}

/* The header's home link: the house icon sits where "Apps" stood. */
.section-switcher-home {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.section-switcher-home i {
  font-size: 1.1rem;
  color: var(--section-color, #20261d);
}
.section-switcher-home:hover .section-switcher-title {
  text-decoration: underline;
}

.section-switcher-subtitle {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.section-switcher-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0.25rem 0.75rem 1.25rem;
}

/* ─── Apps Grid ──────────────────────────────────────────────── */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
}

.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.25rem 0.85rem;
  border-radius: 14px;
  text-decoration: none;
  color: #334155;
  position: relative;
  transition: background-color 0.18s ease, transform 0.18s ease;
  --tile-color: #001738;
}

.app-tile:hover {
  background-color: rgba(0, 0, 0, 0.035);
  transform: translateY(-1px);
}

.app-tile:active {
  transform: translateY(0) scale(0.98);
}

.app-tile-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--tile-color) 12%, transparent);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.app-tile:hover .app-tile-icon-wrap {
  background-color: color-mix(in srgb, var(--tile-color) 18%, transparent);
  transform: scale(1.05);
}

.app-tile-icon-wrap i {
  font-size: 1.5rem;
  color: var(--tile-color);
  line-height: 1;
}

.app-tile-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active app: subtle indicator dot below the icon */
.app-tile-active .app-tile-label {
  color: var(--tile-color);
  font-weight: 600;
}

.app-tile-active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--tile-color);
}

/* ─── Content area (always full width; sidebars are overlays) ─ */
.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 0px);
  width: 100%;
  margin-left: 0;
}

body:not(:has(.sidebar)) .content-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.container {
  flex: 1 0 auto;
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
}

/* ─── Page header (section-themed) ───────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.page-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--section-color, #001738) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-header-icon i {
  font-size: 1.4rem;
  color: var(--section-color, #001738);
}

.page-header-text {
  flex: 1;
  min-width: 0;
}

.page-header-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #001738;
  margin: 0;
  letter-spacing: -0.01em;
}

.page-header-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 2px 0 0;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* ─── Subtle button (for Back / Cancel) ──────────────────────── */
/* More visible than btn-outline-secondary, less heavy than btn-secondary. */
.btn-subtle {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  font-weight: 500;
}
.btn-subtle:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
  color: #111827;
}
.btn-subtle:active,
.btn-subtle:focus {
  background-color: #d1d5db;
  border-color: #6b7280;
  color: #111827;
  box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.25);
}

.card-hover:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Field group for dl-style key/value pairs */
.detail-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.detail-list dt {
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}

.detail-list dd {
  margin: 0;
  color: #111827;
  font-size: 0.95rem;
  align-self: center;
}

/* User avatar */
.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.user-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.6rem;
  border-radius: 20px;
}

/* ─── Backdrop overlay (shared, used by both sidebars) ───────── */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1025;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* ─── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 991px) {
  .container {
    padding: 1rem 15px;
  }

  .topbar {
    padding: 0.5rem 0.75rem;
  }

  .topbar-logo img {
    height: 28px !important;
  }

  .sidebar {
    left: 8px;
    top: 64px;
    height: calc(100vh - 72px);
    width: min(280px, calc(100vw - 16px));
  }

  .section-switcher {
    right: 8px;
    top: 64px;
    height: calc(100vh - 72px);
    width: min(240px, calc(100vw - 16px));
  }
}

/* Turbo frame loading indicator */
turbo-frame[busy] {
  opacity: 0.6;
}

/* ─── Sign-in page ───────────────────────────────────────────── */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.login-card {
  width: 400px;
  max-width: 100%;
  padding: 2rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.login-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-brand-name {
  margin-top: 0.75rem;
  font-weight: 600;
  color: #001738;
  letter-spacing: -0.01em;
}

/* ─── The plant's paper (2026-08-04) ─────────────────────────────
   The cockpit on the plant box set the family look: warm paper surfaces, ink
   text, green/rust/gold accents. This block re-skins the existing structure —
   navbar, sidebars, switcher, cards, tables — without moving any of it. The
   variable names and values are the plant's own (plant_sync layout.css). */
:root {
  color-scheme: light;
  --deck:  #e7e0d0;   /* the page */
  --panel: #f2ede1;   /* a card, a bar */
  --rail:  #e9e3d3;   /* a card header, a raised control */
  --well:  #ded6c3;   /* recessed: inputs, table heads, code */
  --edge:   #dcd3bf;
  --edge-2: #c9bfa8;
  --ink:   #20261d;
  --ink-2: #3b4335;
  --ink-3: #565e4d;
  --ink-4: #8a917e;
  --green: #2f6b3f;  --green-ink: #234e30;
  --rust:  #a8431d;  --rust-ink:  #7d3115;
  --gold:  #927524;  --gold-ink:  #6e5719;
}

body { background: var(--deck); color: var(--ink-2); }

.topbar {
  background-color: rgba(242, 237, 225, 0.97);
  border-bottom-color: var(--edge-2);
  box-shadow: 0 2px 8px rgba(32, 38, 29, 0.06);
}
.breadcrumb-item, .breadcrumb-item.active { color: var(--ink-3); }
.breadcrumb-item a { color: var(--green-ink); }

.sidebar, .section-switcher { background: var(--panel); border-color: var(--edge-2); }
.sidebar-header, .section-switcher-header { border-bottom: 1px solid var(--edge); }
.sidebar .nav-link { color: var(--ink-2); }
.sidebar .nav-link:hover { background: var(--rail); color: var(--ink); }
.sidebar .nav-link.active { background: var(--well); color: var(--ink); }
.section-switcher-title { color: var(--ink); }
.section-switcher-subtitle { color: var(--ink-3); }

.section-switcher-footer {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  color: var(--ink-2);
}

.card { background: var(--panel); border-color: var(--edge); }
.card-header { background: var(--rail); border-bottom-color: var(--edge); color: var(--ink); }
.card-body { color: var(--ink-2); }

.table { color: var(--ink-2); border-color: var(--edge); --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--edge); }
.table-light, .table thead.table-light th { background: var(--well); color: var(--ink-3); }
.table-hover > tbody > tr:hover > * { background: var(--rail); }

/* background-COLOR, never the `background` shorthand: the only thing that says
   a <select> is a dropdown is the caret Bootstrap paints as a background-image
   on .form-select, and the shorthand resets that image to none. This file loads
   after the built bootstrap, so the shorthand here flattened every select in
   the app, silently. Guarded by test/assets/stylesheets_test.rb. */
code, .form-control, .form-select { background-color: var(--well); color: var(--ink); border-color: var(--edge-2); }
.form-control:focus, .form-select:focus {
  background-color: var(--well); color: var(--ink);
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 107, 63, 0.15);
}

a { color: var(--green-ink); }
.text-muted { color: var(--ink-3) !important; }

.btn-primary { background: var(--green); border-color: var(--green-ink); }
.btn-primary:hover, .btn-primary:focus { background: var(--green-ink); border-color: var(--green-ink); }
.btn-dark, .topbar .btn-dark { background: var(--ink); border-color: var(--ink); color: var(--deck); }
.btn-outline-secondary { color: var(--ink-3); border-color: var(--edge-2); }
.btn-outline-secondary:hover { background: var(--rail); color: var(--ink); border-color: var(--edge-2); }
.btn-outline-danger { color: var(--rust-ink); border-color: var(--rust); }
.btn-outline-danger:hover { background: var(--rust); border-color: var(--rust); color: #fff; }

.badge.bg-success { background-color: var(--green) !important; }
.badge.bg-danger { background-color: var(--rust) !important; }
.badge.bg-warning { background-color: var(--gold) !important; color: #fff; }

/* ── paper, part two: the hard-coded stragglers the sweep found ──
   Everything Bootstrap now generates from the remapped SCSS palette; these are
   the rules in THIS file (and a few components) that carried their own navy,
   slate and white and out-specified or ignored the first theme block. */
a:hover { color: var(--green); }

.topbar-breadcrumbs .breadcrumb-item a { color: var(--green-ink); }
.topbar-breadcrumbs .breadcrumb-item a:hover { color: var(--green); }
.topbar-breadcrumbs .breadcrumb-item.active { color: var(--ink); }
.topbar-breadcrumbs .breadcrumb { --bs-breadcrumb-divider-color: var(--ink-4); }

.sidebar-header, .sidebar-footer { background-color: var(--panel); border-color: var(--edge); }
.sidebar-title { color: var(--ink); }
.sidebar { box-shadow: 0 10px 26px rgba(32, 38, 29, 0.18); }
.sidebar-body::-webkit-scrollbar-track { background: var(--rail); }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--edge-2); }

.section-switcher { box-shadow: 0 10px 26px rgba(32, 38, 29, 0.18); }
.app-tile, .app-tile-label { color: var(--ink-2); }
.app-tile:hover { background: var(--rail); }

.page-header { border-bottom-color: var(--edge); }
.page-header-title { color: var(--ink); }
.page-header-subtitle { color: var(--ink-3); }

.login-card { background: var(--panel); border-color: var(--edge-2); box-shadow: 0 10px 26px rgba(32, 38, 29, 0.15); }
.login-brand-name { color: var(--ink); }

.btn-subtle { background: var(--rail); border-color: var(--edge-2); color: var(--ink-2); }
.btn-subtle:hover { background: var(--well); color: var(--ink); border-color: var(--edge-2); }

.detail-list dt { color: var(--ink-3); }
.detail-list dd { color: var(--ink); }

.user-avatar { background: linear-gradient(135deg, var(--green), var(--gold)); }

input::placeholder, textarea::placeholder { color: var(--ink-4); }

/* ─── The house landing (2026-08-05) ─────────────────────────────
   Root is a page now instead of a redirect: the mark, a live clock, and the
   sections this user can open. Centred and calm on the paper deck. */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 6vh, 3.5rem) 1rem 3rem;
  text-align: center;
}

.landing-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.75rem, 7vw, 3.5rem);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(32, 38, 29, 0.08);
}

/* The logo art is drawn on white; multiply drops that white into whatever the
   deck is doing behind it. */
.landing-mark {
  width: min(268px, 62vw);
  height: auto;
  mix-blend-mode: multiply;
}

.landing-wordmark {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.landing-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

.landing-clock-hm {
  font-size: clamp(3.1rem, 13vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.landing-clock-sec {
  font-size: clamp(1.2rem, 4.5vw, 1.85rem);
  font-weight: 500;
  color: var(--ink-3);
}

.landing-clock-sec::before {
  content: ":";
  margin-right: 0.05em;
  opacity: 0.5;
}

.landing-date {
  margin: 0.45rem 0 0;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* The launchpad. Same tile language as the switcher, sized for a landing.

   THREE PER ROW, which is the owner's instruction and also what the switcher
   beside it has always done (.apps-grid) — the two panels show the same tiles
   and had no business laying them out differently.

   A GRID rather than a wrapping flex row, because "three per row" is a thing a
   grid can be told and a flex row can only be nudged towards: with five
   sections the old row wrapped 4 + 1 at a wide window and 3 + 2 at a narrower
   one, so the shape of the launchpad depended on how far the reader had dragged
   their browser. The columns are fixed at the tile's own width and the track is
   centred, so a short last row sits under the middle of the one above it
   instead of hugging the left edge.

   The count steps DOWN rather than letting the tiles shrink: three 122px tiles
   on a phone is three cramped tiles, and the label under the icon is the part
   that goes first. Two columns hold from ~34rem, one below ~22rem — the widths
   at which a row of tiles plus the deck's own padding stops fitting. */
.landing-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 132px));
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

@media (max-width: 34rem) {
  .landing-tiles { grid-template-columns: repeat(2, minmax(0, 132px)); }
}

@media (max-width: 22rem) {
  .landing-tiles { grid-template-columns: minmax(0, 132px); }
}

.landing-tile {
  gap: 0.7rem;
  padding: 1.25rem 0.5rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--edge);
}

.landing-tile:hover {
  background: var(--rail);
  border-color: var(--edge-2);
}

.landing-tile .app-tile-icon-wrap { width: 58px; height: 58px; border-radius: 17px; }
.landing-tile .app-tile-icon-wrap i { font-size: 1.75rem; }
.landing-tile .app-tile-label { font-size: 0.85rem; font-weight: 600; }

.landing-empty {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-3);
}

/* ─── The ask box (2026-09-07) ───────────────────────────────────
   The Google Chat bot's answering, brought onto the landing page. The box and
   the launchpad share a Stimulus controller: type and the tiles give way to the
   answer, clear and they come back. Everything below is the box, the answer
   card and its figures/bars — built from the paper tokens, so it wears the deck.
   The answer reads left-aligned inside a page that is otherwise centred. */
/* The zone never grows wider than the tile pane above it — three tiles at
   132px with two 0.75rem gaps is 420px — so the box, the answer and the
   launchpad all share one column width. */
.landing-ask-zone {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* The button sits in the corner of the field, so the field is the positioning
   context and the two are one control, not a row of two. */
.landing-ask {
  position: relative;
  width: 100%;
}

/* Opens as a single line and grows with the text (ask_controller#resize sets
   the height); max-height stops it at three lines and lets it scroll. The
   right padding is the room the corner button stands in. */
.landing-ask-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 2.8rem;
  max-height: 5.55rem;
  padding: 0.6rem 3.1rem 0.6rem 0.95rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--edge-2);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(32, 38, 29, 0.06);
  resize: none;
  overflow-y: auto;
}

.landing-ask-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 107, 63, 0.15);
}

/* Anchored to the bottom-right corner, so it holds its place and its size
   whether the field is one line or three. */
.landing-ask-send {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.landing-ask-send:hover { filter: brightness(1.08); }
.landing-ask-send i { font-size: 1rem; line-height: 1; }

.landing-swap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.landing-results {
  width: 100%;
  text-align: left;
}

.ask-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(32, 38, 29, 0.07);
}

.ask-card-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}

/* The KPIs on one line, biggest first — the same order the digest names them. */
.ask-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
}

.ask-figure {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ask-figure dt {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.ask-figure dd {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-4);
}

/* The bar chart: each row's share of the largest, drawn as a CSS track rather
   than the card's ▇▁ blocks. */
.ask-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ask-bar {
  display: grid;
  grid-template-columns: minmax(0, 150px) 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.ask-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.ask-bar-track {
  height: 8px;
  background: var(--edge);
  border-radius: 4px;
  overflow: hidden;
}

.ask-bar-track > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: var(--green);
}

.ask-bar-val {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.ask-sentence {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.ask-spoken {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.ask-unmatched {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ─── The lobby (2026-08-27) ─────────────────────────────────────
   The landing's panel and clock, worn by the account that has no rooms yet:
   one quiet line where the tiles would be, and who-you-are with the way out
   beneath it. Deliberately nothing of its own beyond these three rules. */
.lobby-line {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-3);
}

.lobby-footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.lobby-user {
  font-size: 0.9rem;
  color: var(--ink-3);
}

/* ── The deck carries the hour ───────────────────────────────────
   The clock controller writes data-daypart (dawn/day/dusk/night) and
   data-season on .landing; everything below is CSS. Three colours are all
   that change — registered so they INTERPOLATE, which is what makes the turn
   of the hour read as light moving rather than a slide flipping. Browsers
   without @property still get the right colours, just instantly. */
@property --wash-horizon { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --wash-sky     { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --wash-veil    { syntax: "<color>"; inherits: true; initial-value: transparent; }

.landing {
  --wash-horizon: transparent;
  --wash-sky: transparent;
  --wash-veil: transparent;
  --season-accent: var(--edge-2);
  transition: --wash-horizon 2s ease, --wash-sky 2s ease, --wash-veil 2s ease;
}

/* One fixed pane behind the whole page: a glow off the bottom edge, a wash
   down from the top, and a veil over everything. Day leaves all three clear,
   so the deck is simply paper. */
.landing::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -8%;
  bottom: -8%;
  z-index: -1;
  pointer-events: none;
  background-color: var(--wash-veil);
  background-image:
    radial-gradient(125% 55% at 50% 108%, var(--wash-horizon) 0%, transparent 70%),
    linear-gradient(to bottom, var(--wash-sky) 0%, transparent 50%);
}

/* The horizon breathes by a couple of percent of the viewport over the best
   part of a minute — enough to be alive, not enough to notice you are watching
   it. A transform, so the compositor carries it and nothing repaints; and only
   when there is something to move, which means a plain-paper working day is
   perfectly still. */
.landing[data-daypart="dawn"]::before,
.landing[data-daypart="dusk"]::before,
.landing[data-daypart="night"]::before {
  animation: landing-light 54s ease-in-out infinite alternate;
}

@keyframes landing-light {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -2.5%, 0); }
}

/* Dawn (5–8): a faint gold rising off the horizon. */
.landing[data-daypart="dawn"] {
  --wash-horizon: color-mix(in srgb, var(--gold) 34%, transparent);
  --wash-sky: color-mix(in srgb, var(--gold) 9%, transparent);
  --wash-veil: transparent;
}

/* Day (8–17): plain paper. The room needs no help. */
.landing[data-daypart="day"] {
  --wash-horizon: transparent;
  --wash-sky: transparent;
  --wash-veil: transparent;
}

/* Dusk (17–20): a rust band low down with the last gold above it. */
.landing[data-daypart="dusk"] {
  --wash-horizon: color-mix(in srgb, var(--rust) 30%, transparent);
  --wash-sky: color-mix(in srgb, var(--gold) 11%, transparent);
  --wash-veil: transparent;
}

/* Night (20–5): the deck deepens toward ink, darkest overhead. */
.landing[data-daypart="night"] {
  --wash-horizon: color-mix(in srgb, var(--gold) 7%, transparent);
  --wash-sky: color-mix(in srgb, var(--ink) 20%, transparent);
  --wash-veil: color-mix(in srgb, var(--ink) 16%, transparent);
}

.landing-panel {
  border-top: 2px solid var(--season-accent);
  transition: box-shadow 2s ease, border-top-color 2s ease;
}

/* …and the panel is the lit thing in the dim room. */
.landing[data-daypart="night"] .landing-panel {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent),
    0 0 90px 20px color-mix(in srgb, var(--gold) 13%, transparent),
    0 14px 40px rgba(32, 38, 29, 0.28);
}

/* A hairline of the season across the top of the panel. Restraint is the
   point: one 2px rule, four times a year. */
.landing[data-season="summer"]  { --season-accent: var(--rust); }
.landing[data-season="monsoon"] { --season-accent: var(--green); }
.landing[data-season="harvest"] { --season-accent: var(--gold); }
.landing[data-season="winter"]  { --season-accent: var(--green-ink); }

@media (prefers-reduced-motion: reduce) {
  .landing[data-daypart]::before { animation: none; }
  .landing, .landing-panel { transition: none; }
}