:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg-deep: #05080d;
  --panel: #0e1724;
  --panel-2: #132131;
  --panel-3: #17283a;
  --border: #23374a;
  --border-soft: rgba(94, 231, 255, .14);
  --text: #edf8ff;
  --muted: #8ca4b8;
  --accent: #5ee7ff;
  --accent-strong: #24cdeb;
  --accent-dark: #087f99;
  --ok: #63dda3;
  --warn: #f0c46c;
  --bad: #ff7d8d;
  --sidebar: 250px;
  --shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% -10%, rgba(26, 107, 150, .18), transparent 32%),
    radial-gradient(circle at 6% 100%, rgba(19, 63, 106, .16), transparent 34%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
small { color: var(--muted); }
:focus-visible { outline: 3px solid rgba(94, 231, 255, .38); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: rgba(6, 11, 18, .97);
  padding: 24px 16px 18px;
  box-shadow: 18px 0 50px rgba(0, 0, 0, .16);
}

.brand,
.auth-brand,
.install-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}
.brand { margin: 0 8px 30px; }
.brand > span:last-child,
.auth-brand > span:last-child,
.install-brand > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.brand strong,
.auth-brand strong,
.install-brand strong {
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand small,
.auth-brand small,
.install-brand small { font-size: 11px; }

.brand-mark {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  border: 1px solid rgba(94, 231, 255, .38);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(94, 231, 255, .1), rgba(12, 29, 45, .85));
  padding: 8px;
  box-shadow: inset 0 0 20px rgba(94, 231, 255, .06), 0 0 26px rgba(36, 205, 235, .08);
}
.brand-mark i {
  display: block;
  border: 1px solid rgba(94, 231, 255, .38);
  background: rgba(94, 231, 255, .07);
}
.brand-mark i:first-child { background: var(--accent); box-shadow: 0 0 10px rgba(94, 231, 255, .65); }

nav { display: grid; gap: 5px; }
.nav-link {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  padding: 9px 12px;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.nav-link:hover {
  border-color: rgba(94, 231, 255, .12);
  background: rgba(19, 33, 49, .62);
  color: var(--text);
}
.nav-link.active {
  border-color: rgba(94, 231, 255, .24);
  background: linear-gradient(90deg, rgba(94, 231, 255, .13), rgba(19, 33, 49, .38));
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-foot {
  display: grid;
  gap: 3px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 18px 10px 0;
}
.sidebar-foot > span { font-weight: 750; }
.sidebar-foot small { font-size: 11px; }
.link-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 0 2px;
  text-align: left;
}
.link-button:hover { color: var(--accent); }

.main-column { min-height: 100vh; margin-left: var(--sidebar); }
.content { width: min(1260px, 100%); margin: 0 auto; padding: 40px 34px 64px; }
.mobile-header, .menu-scrim { display: none; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1.04;
}
h2 { margin-bottom: 11px; font-size: 21px; letter-spacing: -.02em; }
h3 { margin-bottom: 8px; font-size: 16px; }
.muted { color: var(--muted); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.page-head p:not(.eyebrow) { max-width: 760px; margin: 12px 0 0; color: var(--muted); }
.compact-head { margin-bottom: 22px; }
.compact-head h1 { font-size: clamp(34px, 6vw, 50px); }
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}
.section-head p { margin: 4px 0 0; }

.card,
.metric-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(20, 35, 52, .9), rgba(9, 17, 27, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.card { padding: 20px; }
.metric-card {
  display: block;
  min-width: 0;
  padding: 19px;
  color: inherit;
  text-decoration: none;
}
a.metric-card { transition: border-color .16s ease, transform .16s ease; }
a.metric-card:hover { transform: translateY(-2px); border-color: rgba(94, 231, 255, .38); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.metric-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.metric-value {
  display: block;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 760;
  letter-spacing: -.04em;
}
.metric-value-small { font-size: clamp(22px, 2.6vw, 29px); }
.metric-note { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

.dashboard-head { align-items: stretch; }
.local-time-card {
  display: grid;
  min-width: 230px;
  align-content: center;
  justify-items: end;
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.local-time-card span, .local-time-card small { color: var(--muted); }
.local-time-card strong { font-size: 17px; }
.local-time-card time { color: var(--accent); font-size: 32px; font-weight: 750; letter-spacing: -.04em; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  gap: 16px;
}
.activity-card { grid-column: 1 / -1; }
.foundation-list { display: grid; }
.foundation-list > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.foundation-list > div:last-child { padding-bottom: 0; }
.foundation-list strong, .foundation-list small { display: block; }
.step-number { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.brick-index { display: block; margin: 8px 0 2px; color: rgba(94, 231, 255, .18); font-size: 78px; font-weight: 820; letter-spacing: -.08em; line-height: .9; }
.next-brick-card p:not(.eyebrow) { color: var(--muted); }
.activity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.activity-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.activity-row strong, .activity-row small { display: block; }
.activity-marker { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-dark); }

.status-list { display: grid; }
.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}
.status-row:first-child { padding-top: 0; }
.status-row:last-child { border-bottom: 0; padding-bottom: 0; }
.status-row strong, .status-row small { display: block; }
.diagnostic-list .status-row small { margin-top: 2px; }
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: var(--muted);
}
.status-dot.is-ready { background: var(--ok); box-shadow: 0 0 12px rgba(99, 221, 163, .42); }
.status-dot.is-failed { background: var(--bad); box-shadow: 0 0 12px rgba(255, 125, 141, .36); }

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.badge-active { border-color: rgba(99, 221, 163, .4); background: rgba(99, 221, 163, .06); color: var(--ok); }
.badge-planned { border-color: rgba(240, 196, 108, .4); background: rgba(240, 196, 108, .06); color: var(--warn); }
.badge-failed { border-color: rgba(255, 125, 141, .42); background: rgba(255, 125, 141, .06); color: var(--bad); }
.badge-neutral { border-color: rgba(94, 231, 255, .25); color: var(--accent); }

.system-score {
  display: grid;
  min-width: 160px;
  justify-items: end;
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.system-score strong { font-size: 34px; }
.system-score span { color: var(--muted); font-size: 12px; }
.system-score.is-ready strong { color: var(--ok); }
.system-score.is-attention strong { color: var(--bad); }

.notice {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
  padding: 12px 14px;
}
.notice-success { border-color: rgba(99, 221, 163, .5); }
.notice-warning { border-color: rgba(240, 196, 108, .5); }
.notice-danger { border-color: rgba(255, 125, 141, .5); }
.error-list {
  margin: 0 0 18px;
  border: 1px solid rgba(255, 125, 141, .52);
  border-radius: 11px;
  background: rgba(255, 125, 141, .05);
  color: #ffd8df;
  padding: 12px 14px 12px 32px;
}

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.span-field-4 { grid-column: span 4; }
.span-field-6 { grid-column: span 6; }
.span-field-8 { grid-column: span 8; }
.span-field-12 { grid-column: span 12; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.form-grid .field { margin-bottom: 0; }
.field label { font-weight: 720; }
.field small { font-size: 11px; }
.field input,
.field select,
.field textarea,
.compact-password {
  width: 100%;
  min-height: 45px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #07101a;
  color: var(--text);
  padding: 10px 12px;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.compact-password:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(94, 231, 255, .14);
}
.button,
.small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 780;
  text-decoration: none;
}
.button {
  min-height: 44px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #041017;
  padding: 10px 18px;
}
.button:hover { border-color: #8defff; background: #8defff; }
.button-danger { border-color: rgba(255, 125, 141, .7); background: rgba(255, 125, 141, .13); color: #ffdce1; }
.button-danger:hover { border-color: var(--bad); background: var(--bad); color: #20060a; }
.small-button {
  min-height: 34px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 6px 11px;
  font-size: 12px;
}
.small-button:hover { border-color: var(--accent); }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.account-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; }
.account-facts > div { display: grid; gap: 4px; border-right: 1px solid var(--border); padding: 18px; }
.account-facts > div:last-child { border-right: 0; }
.account-facts span { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--border); padding: 12px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }

.restore-card { border-color: rgba(240, 196, 108, .28); }
.safety-card { margin-bottom: 16px; }
.safety-card form { display: flex; align-items: center; gap: 8px; }
.compact-password { width: 160px; min-height: 34px; padding: 6px 9px; font-size: 12px; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

/* Login */
.auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
}
.auth-intro {
  position: relative;
  display: grid;
  min-height: 100vh;
  align-items: end;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(circle at 55% 28%, rgba(44, 153, 197, .2), transparent 26%),
    linear-gradient(145deg, #0b1b2c 0%, #07111d 56%, #05090f 100%);
  padding: clamp(42px, 7vw, 92px);
}
.command-grid {
  position: absolute;
  inset: 0;
  opacity: .27;
  background-image:
    linear-gradient(rgba(94, 231, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 231, 255, .08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 88%);
}
.command-grid::before,
.command-grid::after {
  position: absolute;
  border: 1px solid rgba(94, 231, 255, .18);
  border-radius: 999px;
  content: "";
}
.command-grid::before { width: 420px; height: 420px; top: 8%; right: -14%; }
.command-grid::after { width: 260px; height: 260px; top: 18%; right: 0; }
.auth-intro-content { position: relative; z-index: 1; max-width: 680px; }
.auth-intro h1 { font-size: clamp(48px, 7vw, 88px); }
.auth-intro h1 em { color: var(--accent); font-style: normal; font-weight: 500; }
.auth-intro-content > p:not(.eyebrow) { max-width: 620px; margin: 24px 0 30px; color: var(--muted); font-size: 18px; }
.auth-principles { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-principles span { border: 1px solid rgba(94, 231, 255, .2); border-radius: 999px; color: #bcd1df; padding: 6px 11px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.auth-panel { display: grid; min-height: 100vh; place-items: center; padding: 38px; }
.auth-card { width: min(450px, 100%); }
.auth-brand { width: fit-content; margin-bottom: 58px; }
.auth-heading { margin-bottom: 26px; }
.auth-heading h2 { margin-bottom: 8px; font-size: 32px; }
.auth-heading p:not(.eyebrow) { color: var(--muted); }
.auth-submit { width: 100%; justify-content: space-between; margin-top: 4px; padding-inline: 18px; }
.auth-footnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; color: var(--muted); font-size: 11px; }

/* Installer */
.install-shell { min-height: 100vh; padding: 42px 20px 70px; }
.install-panel { width: min(920px, 100%); margin: 0 auto; }
.install-brand { width: fit-content; margin-bottom: 46px; }
.install-checks, .install-form .card { margin-bottom: 16px; }
.install-form .card > .muted { margin-bottom: 20px; }
.install-action {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(94, 231, 255, .25);
  border-radius: 15px;
  background: rgba(7, 11, 18, .94);
  padding: 13px 15px;
  backdrop-filter: blur(14px);
}
.install-action p { margin: 0; color: var(--muted); font-size: 12px; }
.error-shell { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.error-shell .card { width: min(580px, 100%); }
.error-shell h1 { margin-bottom: 18px; }

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { display: none; }
  .auth-panel { min-height: 100vh; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .activity-card { grid-column: auto; }
  .account-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-facts > div:nth-child(2) { border-right: 0; }
  .account-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 900px) {
  .sidebar {
    width: min(300px, 86vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  .menu-open .sidebar { transform: translateX(0); }
  .menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
    border: 0;
    background: rgba(0, 0, 0, .6);
  }
  .menu-open .menu-scrim { display: block; }
  .main-column { margin-left: 0; }
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 11, 18, .92);
    padding: 11px 16px;
    backdrop-filter: blur(14px);
  }
  .menu-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text);
    padding: 7px 12px;
  }
  .mobile-brand { color: var(--accent); font-weight: 850; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
  .content { padding: 28px 18px 50px; }
}

@media (max-width: 740px) {
  .page-head, .section-head { align-items: flex-start; flex-direction: column; }
  .dashboard-head { gap: 18px; }
  .local-time-card, .system-score {
    width: 100%;
    min-width: 0;
    align-content: start;
    justify-items: start;
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-top: 18px;
    padding-left: 0;
  }
  .metric-grid, .settings-grid { grid-template-columns: 1fr; }
  .activity-list { grid-template-columns: 1fr; }
  .span-field-4, .span-field-6, .span-field-8 { grid-column: span 12; }
  .install-action { align-items: stretch; flex-direction: column; }
  .install-action .button { width: 100%; }
  .safety-card .status-row { align-items: start; grid-template-columns: 1fr; }
  .safety-card form { width: 100%; }
  .compact-password { min-width: 0; flex: 1; }
}

@media (max-width: 520px) {
  .content { padding-inline: 14px; }
  .card, .metric-card { border-radius: 14px; padding: 16px; }
  h1 { font-size: 38px; }
  .auth-panel { padding: 26px 20px; }
  .auth-brand { margin-bottom: 42px; }
  .account-facts { grid-template-columns: 1fr; }
  .account-facts > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .account-facts > div:last-child { border-bottom: 0; }
  .foundation-list > div { grid-template-columns: 28px minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Brick 2 · Universal Calendar */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span-12 { grid-column: span 12; }
.page-head-actions, .form-actions, .toolbar-group, .view-switch, .inline-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.button-secondary {
  border-color: var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.button-secondary:hover { border-color: var(--accent); background: rgba(94, 231, 255, .1); color: var(--text); }
.small-button.is-active { border-color: var(--accent); background: rgba(94, 231, 255, .12); color: var(--accent); }
.small-link { color: var(--muted); text-underline-offset: 3px; }
.small-link:hover { color: var(--accent); }
.danger-link {
  border: 0;
  background: transparent;
  color: var(--bad);
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.help { color: var(--muted); font-size: 12px; }
.field textarea { min-height: 110px; resize: vertical; }
.form-check-row { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0; }
.form-check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.weekday-picker {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.weekday-picker legend { padding: 0 7px; font-weight: 720; }
.weekday-picker label { display: inline-flex; align-items: center; gap: 5px; margin: 5px 10px 5px 0; }
.weekday-picker input { accent-color: var(--accent); }
[data-kind-section][hidden],
.recurrence-field[hidden],
[data-weekday-picker][hidden],
.event-time-field[hidden],
.event-end-field[hidden],
.event-end-time-field[hidden],
.task-time-field[hidden] { display: none !important; }

.calendar-page-head { margin-bottom: 20px; }
.calendar-page-head h1 { font-size: clamp(34px, 5vw, 50px); }
.calendar-toolbar-card { margin-bottom: 16px; padding: 12px 14px; }
.calendar-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.calendar-filters { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.calendar-filters label { display: grid; min-width: 145px; gap: 3px; }
.calendar-filters label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calendar-filters select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #07101a;
  color: var(--text);
  padding: 6px 9px;
}
.calendar-scroll { width: 100%; overflow-x: auto; padding-bottom: 4px; }
.calendar-weekdays,
.calendar-month-grid {
  display: grid;
  min-width: 820px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekdays {
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: rgba(19, 33, 49, .96);
}
.calendar-weekdays div {
  min-width: 0;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.calendar-month-grid {
  min-height: max(540px, calc(100dvh - 325px));
  grid-template-rows: repeat(var(--calendar-weeks, 6), minmax(88px, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.calendar-day-cell {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(14, 23, 36, .82);
  padding: 8px;
}
.calendar-day-cell.is-outside { background: rgba(5, 9, 15, .72); color: var(--muted); }
.calendar-day-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day-number { display: flex; justify-content: flex-end; margin-bottom: 6px; font-weight: 800; }
.calendar-day-number a {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
}
.calendar-day-cell.is-today .calendar-day-number a { background: var(--accent); color: #041017; }
.calendar-day-items { display: grid; min-width: 0; gap: 4px; }
.month-chip {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-left: 4px solid var(--muted);
  border-radius: 6px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-chip span { margin-right: 4px; color: var(--muted); }
.month-chip.is-completed { opacity: .54; text-decoration: line-through; }
.month-chip.is-cancelled { opacity: .42; }
.month-chip.is-missed { box-shadow: inset 0 0 0 1px rgba(255, 125, 141, .72); opacity: .68; }
.month-chip.is-overdue { box-shadow: inset 0 0 0 1px rgba(255, 125, 141, .48); }
.month-chip.is-task { border-left-style: dashed; }
.month-chip.is-routine { border-left-style: double; border-left-width: 6px; }
.more-link { color: var(--muted); font-size: 11px; }

.calendar-list, .agenda-groups, .dashboard-calendar-list { display: grid; }
.calendar-list { gap: 10px; }
.agenda-groups { gap: 22px; }
.agenda-day > h2 { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.calendar-entry {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(5, 10, 17, .58);
}
.calendar-entry-marker { background: var(--muted); }
.calendar-entry-body { min-width: 0; padding: 12px 14px; }
.calendar-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.calendar-entry h3 { margin: 3px 0 0; }
.calendar-entry h3 a { text-decoration: none; }
.calendar-entry h3 a:hover { color: var(--accent); }
.calendar-entry p { margin: 8px 0 0; }
.calendar-entry-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.calendar-entry-meta span + span::before { margin-right: 8px; content: "·"; }
.calendar-entry.is-completed { opacity: .58; }
.calendar-entry.is-completed h3 { text-decoration: line-through; }
.calendar-entry.is-cancelled { opacity: .44; }
.calendar-entry.is-missed { border-color: rgba(255, 125, 141, .58); opacity: .68; }
.calendar-entry.is-task .calendar-entry-marker { opacity: .72; }
.calendar-entry.is-routine .calendar-entry-marker { box-shadow: inset 0 0 0 1px rgba(7, 11, 18, .8); }
.calendar-entry.is-overdue { border-color: rgba(255, 125, 141, .46); }
.inline-actions { margin-top: 9px; }
.inline-actions .small-button { min-height: 30px; padding: 4px 9px; }
.empty-state { padding: 28px 12px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-size: 17px; }
.empty-state p { margin: 5px 0 0; }

.calendar-primary-card { border-color: rgba(94, 231, 255, .25); }
.calendar-form > .card { scroll-margin-top: 80px; }
.calendar-form-footer {
  position: sticky;
  bottom: 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(94, 231, 255, .25);
  border-radius: 15px;
  background: rgba(7, 11, 18, .94);
  padding: 12px 14px;
  backdrop-filter: blur(14px);
}
.upgrade-action {
  position: sticky;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  border: 1px solid rgba(94, 231, 255, .25);
  border-radius: 15px;
  background: rgba(7, 11, 18, .94);
  padding: 13px 15px;
  backdrop-filter: blur(14px);
}
.upgrade-action p { margin: 0; color: var(--muted); }

/* Time-grid week and day views */
.timeline-calendar {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(5, 10, 17, .72);
}
.timeline-week-header,
.timeline-week-all-day,
.timeline-week-body {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(0, 1fr));
}
.timeline-day-all-day,
.timeline-day-body {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
}
.timeline-week-header { border-bottom: 1px solid var(--border); background: rgba(19, 33, 49, .96); }
.timeline-corner { border-right: 1px solid var(--border); }
.timeline-week-heading {
  display: grid;
  min-width: 0;
  place-items: center;
  border-right: 1px solid var(--border);
  padding: 9px 4px;
  text-align: center;
  text-decoration: none;
}
.timeline-week-heading:last-child { border-right: 0; }
.timeline-week-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.timeline-week-heading strong {
  display: grid;
  width: 31px;
  height: 31px;
  margin-top: 3px;
  place-items: center;
  border-radius: 999px;
}
.timeline-week-heading.is-today strong { background: var(--accent); color: #041017; }
.timeline-all-day { border-bottom: 1px solid var(--border); background: rgba(19, 33, 49, .68); }
.timeline-all-day-label {
  display: flex;
  justify-content: flex-end;
  border-right: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 7px 10px 4px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.timeline-all-day-cell { min-width: 0; min-height: 48px; border-right: 1px solid var(--border); padding: 6px 4px; }
.timeline-all-day-cell:last-child { border-right: 0; }
.timeline-all-day-empty { color: rgba(140, 164, 184, .32); }
.timeline-all-day-item {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  border-left: 4px solid var(--muted);
  border-radius: 6px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  padding: 4px 5px;
  font-size: 10px;
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-all-day-item span { color: var(--muted); }
.timeline-all-day-item.is-completed { opacity: .54; text-decoration: line-through; }
.timeline-all-day-item.is-cancelled { opacity: .42; }
.timeline-all-day-item.is-missed { box-shadow: inset 0 0 0 1px rgba(255, 125, 141, .72); opacity: .68; }
.timeline-all-day-item.is-overdue { box-shadow: inset 0 0 0 1px rgba(255, 125, 141, .48); }
.timeline-all-day-item.is-task { border-left-style: dashed; }
.timeline-all-day-item.is-routine { border-left-style: double; border-left-width: 6px; }
.timeline-scroll {
  max-height: min(70vh, 820px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: rgba(5, 10, 17, .46);
}
.timeline-time-gutter,
.timeline-day-column { position: relative; height: var(--timeline-height); }
.timeline-time-gutter { border-right: 1px solid var(--border); background: rgba(5, 10, 17, .88); }
.timeline-hour-label {
  position: absolute;
  right: 8px;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.timeline-hour-label:first-child { transform: translateY(2px); }
.timeline-day-column {
  min-width: 0;
  border-right: 1px solid var(--border);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .01) 0,
    rgba(255, 255, 255, .01) 35px,
    rgba(35, 55, 74, .55) 36px
  );
}
.timeline-day-column:last-child { border-right: 0; }
.timeline-day-column.is-today { background-color: rgba(94, 231, 255, .022); }
.timeline-hour-rule {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: rgba(35, 55, 74, .75);
  pointer-events: none;
}
.timeline-slot-link { position: absolute; right: 0; left: 0; z-index: 0; display: block; }
.timeline-slot-link:hover,
.timeline-slot-link:focus-visible {
  z-index: 2;
  outline: none;
  background: rgba(94, 231, 255, .06);
  box-shadow: inset 0 1px 0 rgba(94, 231, 255, .28), inset 0 -1px 0 rgba(94, 231, 255, .14);
}
.timeline-item {
  position: absolute;
  top: var(--item-top);
  left: calc(var(--item-left) + 3px);
  z-index: 4;
  display: flex;
  width: calc(var(--item-width) - 6px);
  min-width: 0;
  height: var(--item-height);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--timeline-colour, #8ca4b8);
  border-left: 4px solid var(--timeline-colour, #8ca4b8);
  border-radius: 8px;
  background: #0d1723;
  color: var(--text);
  padding: 4px 6px;
  text-decoration: none;
}
.timeline-item:hover,
.timeline-item:focus-visible { z-index: 7; outline: 2px solid var(--timeline-colour, var(--accent)); outline-offset: 1px; }
.timeline-item-title,
.timeline-item-time,
.timeline-item-location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-item-title { font-size: 11px; font-weight: 800; line-height: 1.2; }
.timeline-item-time { color: var(--muted); font-size: 9px; line-height: 1.2; }
.timeline-item-location { color: var(--muted); font-size: 9px; line-height: 1.2; }
.timeline-item.is-task { border-style: dashed; }
.timeline-item.is-routine { border-left-style: double; border-left-width: 7px; }
.timeline-item.is-completed { opacity: .54; text-decoration: line-through; }
.timeline-item.is-cancelled { opacity: .42; }
.timeline-item.is-missed { box-shadow: inset 0 0 0 1px rgba(255, 125, 141, .72); opacity: .68; }
.timeline-item.is-overdue { box-shadow: inset 0 0 0 1px rgba(255, 125, 141, .62); }
.timeline-item.is-short { padding: 2px 4px; }
.timeline-item.is-short .timeline-item-title { font-size: 9px; }
.timeline-item.is-short .timeline-item-time,
.timeline-item.is-short .timeline-item-location { display: none; }
.timeline-now-line {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 8;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(94, 231, 255, .38);
  pointer-events: none;
}
.timeline-now-line::after {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--accent);
  content: "";
}
.timeline-now-line.has-label span {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--accent);
  color: #041017;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.timeline-help { margin: 0; border-top: 1px solid var(--border); color: var(--muted); padding: 9px 13px; font-size: 11px; }

.category-red .calendar-entry-marker,
.month-chip.category-red { border-color: #ff6573; background-color: rgba(255, 101, 115, .12); }
.category-blue .calendar-entry-marker,
.month-chip.category-blue { border-color: #5ee7ff; background-color: rgba(94, 231, 255, .11); }
.category-green .calendar-entry-marker,
.month-chip.category-green { border-color: #63dda3; background-color: rgba(99, 221, 163, .11); }
.category-orange .calendar-entry-marker,
.month-chip.category-orange { border-color: #f1a56f; background-color: rgba(241, 165, 111, .11); }
.category-yellow .calendar-entry-marker,
.month-chip.category-yellow { border-color: #f0d96c; background-color: rgba(240, 217, 108, .11); }
.category-purple .calendar-entry-marker,
.month-chip.category-purple { border-color: #b995ff; background-color: rgba(185, 149, 255, .11); }
.category-teal .calendar-entry-marker,
.month-chip.category-teal { border-color: #55d7cb; background-color: rgba(85, 215, 203, .11); }
.category-grey .calendar-entry-marker,
.month-chip.category-grey { border-color: #8ca4b8; background-color: rgba(140, 164, 184, .11); }
.category-indigo .calendar-entry-marker,
.month-chip.category-indigo { border-color: #8295ff; background-color: rgba(130, 149, 255, .11); }
.category-pink .calendar-entry-marker,
.month-chip.category-pink { border-color: #ef79bb; background-color: rgba(239, 121, 187, .11); }
.category-red .calendar-entry-marker { background: #ff6573; }
.category-blue .calendar-entry-marker { background: #5ee7ff; }
.category-green .calendar-entry-marker { background: #63dda3; }
.category-orange .calendar-entry-marker { background: #f1a56f; }
.category-yellow .calendar-entry-marker { background: #f0d96c; }
.category-purple .calendar-entry-marker { background: #b995ff; }
.category-teal .calendar-entry-marker { background: #55d7cb; }
.category-grey .calendar-entry-marker { background: #8ca4b8; }
.category-indigo .calendar-entry-marker { background: #8295ff; }
.category-pink .calendar-entry-marker { background: #ef79bb; }
.timeline-item.category-red, .timeline-all-day-item.category-red { --timeline-colour: #ff6573; }
.timeline-item.category-blue, .timeline-all-day-item.category-blue { --timeline-colour: #5ee7ff; }
.timeline-item.category-green, .timeline-all-day-item.category-green { --timeline-colour: #63dda3; }
.timeline-item.category-orange, .timeline-all-day-item.category-orange { --timeline-colour: #f1a56f; }
.timeline-item.category-yellow, .timeline-all-day-item.category-yellow { --timeline-colour: #f0d96c; }
.timeline-item.category-purple, .timeline-all-day-item.category-purple { --timeline-colour: #b995ff; }
.timeline-item.category-teal, .timeline-all-day-item.category-teal { --timeline-colour: #55d7cb; }
.timeline-item.category-grey, .timeline-all-day-item.category-grey { --timeline-colour: #8ca4b8; }
.timeline-item.category-indigo, .timeline-all-day-item.category-indigo { --timeline-colour: #8295ff; }
.timeline-item.category-pink, .timeline-all-day-item.category-pink { --timeline-colour: #ef79bb; }
.timeline-all-day-item { border-left-color: var(--timeline-colour, #8ca4b8); }

.dashboard-calendar-list { gap: 0; }
.dashboard-calendar-row {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
}
.dashboard-calendar-row:first-child { border-top: 0; padding-top: 0; }
.dashboard-calendar-row:last-child { padding-bottom: 0; }
.dashboard-calendar-row strong,
.dashboard-calendar-row small { display: block; }
.dashboard-calendar-marker { width: 5px; height: 30px; border-radius: 999px; background: var(--muted); }
.dashboard-calendar-marker.category-red { background: #ff6573; }
.dashboard-calendar-marker.category-blue { background: #5ee7ff; }
.dashboard-calendar-marker.category-green { background: #63dda3; }
.dashboard-calendar-marker.category-orange { background: #f1a56f; }
.dashboard-calendar-marker.category-yellow { background: #f0d96c; }
.dashboard-calendar-marker.category-purple { background: #b995ff; }
.dashboard-calendar-marker.category-teal { background: #55d7cb; }
.dashboard-calendar-marker.category-indigo { background: #8295ff; }
.dashboard-calendar-marker.category-pink { background: #ef79bb; }

@media (min-width: 600px) and (max-width: 1100px) {
  .calendar-scroll { overflow-x: visible; }
  .calendar-weekdays, .calendar-month-grid { width: 100%; min-width: 0; }
  .calendar-weekdays div { padding: 7px 2px; text-align: center; font-size: 9px; }
  .calendar-day-cell { padding: 5px; }
  .calendar-day-number { margin-bottom: 4px; }
  .calendar-day-number a { width: 23px; height: 23px; font-size: 11px; }
  .calendar-day-items { gap: 3px; }
  .month-chip { border-left-width: 3px; padding: 3px 4px; font-size: 9px; }
  .month-chip span { display: block; margin-right: 0; font-size: 8px; }
  .timeline-week-header,
  .timeline-week-all-day,
  .timeline-week-body { grid-template-columns: 46px repeat(7, minmax(0, 1fr)); }
  .timeline-day-all-day,
  .timeline-day-body { grid-template-columns: 46px minmax(0, 1fr); }
  .timeline-week-heading { padding: 7px 2px; }
  .timeline-week-heading span { font-size: 9px; }
  .timeline-week-heading strong { width: 26px; height: 26px; font-size: 13px; }
  .timeline-all-day-label { padding-right: 4px; font-size: 8px; }
  .timeline-all-day-cell { padding: 4px 2px; }
  .timeline-all-day-item { border-left-width: 3px; padding: 3px; font-size: 8px; }
  .timeline-hour-label { right: 4px; font-size: 8px; }
  .timeline-item { left: calc(var(--item-left) + 2px); width: calc(var(--item-width) - 4px); border-left-width: 3px; padding: 3px; }
  .timeline-item-title { font-size: 9px; }
  .timeline-item-time { font-size: 8px; }
  .timeline-item-location { display: none; }
}

@media (max-width: 740px) {
  .page-head-actions { width: 100%; }
  .calendar-toolbar { align-items: stretch; }
  .calendar-filters { width: 100%; }
  .calendar-filters label { min-width: 0; flex: 1 1 135px; }
  .calendar-entry-head,
  .calendar-form-footer,
  .upgrade-action { align-items: stretch; flex-direction: column; }
  .calendar-form-footer .button,
  .upgrade-action .button { width: 100%; }
  .timeline-calendar-week { overflow-x: auto; }
  .timeline-calendar-week .timeline-week-header,
  .timeline-calendar-week .timeline-week-all-day,
  .timeline-calendar-week .timeline-week-body,
  .timeline-calendar-week .timeline-scroll { min-width: 760px; }
  .timeline-scroll { max-height: 66vh; }
  .timeline-day-all-day,
  .timeline-day-body { grid-template-columns: 46px minmax(0, 1fr); }
  .timeline-hour-label { right: 4px; font-size: 8px; }
}

@media (max-width: 599px) {
  .calendar-weekdays,
  .calendar-month-grid { min-width: 760px; }
  .calendar-month-grid { min-height: 540px; }
  .calendar-day-cell { padding: 6px; }
}

/* Brick 3 · Shared Records Foundation */
.connections-head { align-items: center; }
.connections-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subject-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.subject-card {
  display: flex;
  align-items: center;
  gap: 15px;
}
.subject-monogram {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(94, 231, 255, .34);
  border-radius: 14px;
  background: rgba(94, 231, 255, .08);
  color: var(--accent);
  font-size: 20px;
  font-weight: 820;
}
.subject-card > span:last-child { display: grid; }
.subject-card strong { font-size: 18px; }
.subject-card small,
.subject-card > span:last-child > span { color: var(--muted); font-size: 12px; }
.connections-card { margin-bottom: 16px; }
.table-scroll { overflow-x: auto; }
.ownership-table { min-width: 1000px; }
.ownership-table th:nth-child(1) { width: 24%; }
.ownership-table th:nth-child(2) { width: 15%; }
.ownership-table th:nth-child(3) { width: 25%; }
.ownership-table th:nth-child(4) { width: 36%; }
.ownership-table td { padding-block: 15px; }
.ownership-table td:first-child strong,
.ownership-table td:first-child small { display: block; }
.ownership-table td:first-child small { margin-top: 3px; line-height: 1.4; }
.ownership-table td:nth-child(2) > span:first-child {
  display: block;
  margin-bottom: 7px;
  font-weight: 760;
}
.consumer-list { display: flex; gap: 5px; flex-wrap: wrap; }
.consumer-list span {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  padding: 3px 7px;
  font-size: 10px;
}
.ownership-rule { color: #b9cbd8; font-size: 12px; line-height: 1.45; }
.workflow-list { display: grid; }
.workflow-row { border-top: 1px solid var(--border); }
.workflow-row:first-child { border-top: 0; }
.workflow-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
}
.workflow-row summary::-webkit-details-marker { display: none; }
.workflow-row summary > span:first-child { display: grid; }
.workflow-row summary small { margin-top: 2px; }
.workflow-owner {
  border: 1px solid rgba(94, 231, 255, .25);
  border-radius: 999px;
  color: var(--accent);
  padding: 4px 9px;
  font-size: 11px;
  white-space: nowrap;
}
.workflow-owner::after { margin-left: 6px; content: "+"; }
.workflow-row[open] .workflow-owner::after { content: "−"; }
.workflow-effects {
  display: grid;
  gap: 1px;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--border);
}
.workflow-effects > div {
  display: grid;
  grid-template-columns: minmax(145px, .34fr) minmax(0, 1fr);
  gap: 14px;
  background: rgba(7, 16, 26, .96);
  padding: 10px 12px;
}
.workflow-effects strong { color: var(--accent); font-size: 11px; }
.workflow-effects span { color: #b9cbd8; font-size: 12px; }
.connected-record-list { display: grid; }
.connected-record-row {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 13px 0;
  color: inherit;
  text-decoration: none;
}
.connected-record-row:first-child { border-top: 0; padding-top: 0; }
.connected-record-row:last-child { padding-bottom: 0; }
a.connected-record-row:hover strong { color: var(--accent); }
.connected-record-row > span:nth-child(2) { display: grid; }
.connected-record-row > span:nth-child(2) small { margin-top: 2px; }
.connection-marker {
  width: 6px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-dark);
}
.kiki-expense-connection-row-meta {
  display: grid;
  gap: 3px;
  justify-items: end;
}

@media (max-width: 980px) {
  .connections-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 740px) {
  .connections-head { align-items: flex-start; }
  .subject-grid { grid-template-columns: 1fr; }
  .ownership-table { min-width: 0; }
  .ownership-table thead { display: none; }
  .ownership-table tbody,
  .ownership-table tr,
  .ownership-table td { display: block; width: 100%; }
  .ownership-table tr {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(7, 16, 26, .56);
  }
  .ownership-table tr:last-child { margin-bottom: 0; }
  .ownership-table td {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .ownership-table td:last-child { border-bottom: 0; }
  .ownership-table td::before {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .ownership-table td:nth-child(1)::before { content: "Fact"; }
  .ownership-table td:nth-child(2)::before { content: "Recorded in"; }
  .ownership-table td:nth-child(3)::before { content: "Used by"; }
  .ownership-table td:nth-child(4)::before { content: "Rule"; }
  .workflow-row summary { align-items: start; grid-template-columns: 1fr; gap: 8px; }
  .workflow-effects > div { grid-template-columns: 1fr; gap: 3px; }
  .connected-record-row { grid-template-columns: 6px minmax(0, 1fr); }
  .kiki-expense-connection-row-meta { grid-column: 2; grid-template-columns: auto auto; justify-content: start; align-items: center; }
}

@media (max-width: 520px) {
  .connections-metric-grid { grid-template-columns: 1fr; }
}


/* Brick 4 · Nutrition */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }

.nutrition-subnav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: -9px 0 22px;
  padding: 2px 0 8px;
}
.nutrition-subnav a {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(9, 17, 27, .72);
  color: var(--muted);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
}
.nutrition-subnav a:hover,
.nutrition-subnav a.active {
  border-color: rgba(94, 231, 255, .48);
  background: rgba(94, 231, 255, .1);
  color: var(--accent);
}
.nutrition-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.nutrition-progress-card { display: grid; gap: 8px; }
.nutrition-progress-card > strong {
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -.04em;
}
.nutrition-progress-card > strong small { font-size: 13px; font-weight: 650; }
.nutrition-progress {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #07101a;
}
.nutrition-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}
.nutrition-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.nutrition-summary-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
}
.nutrition-summary-pair > div {
  display: grid;
  gap: 2px;
  background: rgba(7, 16, 26, .96);
  padding: 14px;
}
.nutrition-summary-pair strong { color: var(--accent); font-size: 23px; }
.nutrition-summary-pair span { color: var(--muted); font-size: 11px; }
.nutrition-list { display: grid; }
.nutrition-list > a,
.nutrition-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--border);
  color: inherit;
  padding: 12px 0;
  text-decoration: none;
}
.nutrition-list > :first-child { border-top: 0; padding-top: 0; }
.nutrition-list > :last-child { padding-bottom: 0; }
.nutrition-list > a:hover strong { color: var(--accent); }
.nutrition-list span:first-child { display: grid; min-width: 0; }
.nutrition-list.compact > div > span:last-child { color: var(--muted); white-space: nowrap; }
.nutrition-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .35fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}
.nutrition-filter-bar .field { margin: 0; }
.recipe-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.recipe-card { display: flex; min-height: 260px; flex-direction: column; }
.recipe-card > p { color: var(--muted); }
.recipe-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.recipe-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: auto 0 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--border);
}
.recipe-numbers span {
  display: grid;
  gap: 2px;
  background: rgba(7,16,26,.96);
  padding: 11px;
}
.recipe-numbers strong { color: var(--accent); font-size: 20px; }
.nutrition-table-card { margin-bottom: 16px; }
.nutrition-table-card table { min-width: 760px; }
.table-subline { display: block; margin-top: 3px; }
.unknown-value { color: var(--warn); }
.nutrient-edit-card { margin-top: 16px; }
.nutrient-input-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.nutrient-input-grid .field { margin: 0; }
.ingredient-builder { display: grid; gap: 9px; }
.ingredient-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px 110px 38px;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.ingredient-row:first-child { border-top: 0; padding-top: 0; }
.ingredient-row .field { margin: 0; }
.ingredient-remove {
  width: 38px;
  height: 45px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,125,141,.06);
  color: var(--bad);
  font-size: 22px;
}
.ingredient-remove:hover { border-color: var(--bad); }
.meal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.meal-day-card { min-height: 250px; }
.meal-day-card.is-today { border-color: rgba(94,231,255,.48); }
.meal-day-list { display: grid; gap: 10px; }
.meal-day-list article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7,16,26,.56);
  padding: 10px;
}
.meal-day-list article > div:first-child { display: grid; }
.mini-select,
.compact-select,
.table-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #07101a;
  color: var(--text);
  padding: 7px 9px;
}
.mini-select { max-width: 120px; font-size: 11px; }
.compact-select { min-height: 42px; }
.table-input { width: 120px; }
.upgrade-result-card { margin-bottom: 16px; border-color: rgba(99,221,163,.42); }
.upgrade-detail-list { color: #c7d9e6; }
.dashboard-nutrition-card { grid-column: auto; }

@media (max-width: 1100px) {
  .nutrition-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrient-input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .span-1, .span-2, .span-3, .span-4, .span-5, .span-6,
  .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 { grid-column: span 12; }
  .nutrition-dashboard-grid,
  .nutrition-metric-grid,
  .recipe-card-grid { grid-template-columns: 1fr; }
  .nutrition-filter-bar { grid-template-columns: 1fr; }
  .nutrient-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingredient-row { grid-template-columns: minmax(0, 1fr) 1fr 90px 38px; }
  .ingredient-food { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .nutrient-input-grid { grid-template-columns: 1fr; }
  .nutrition-summary-pair { grid-template-columns: 1fr; }
  .ingredient-row { grid-template-columns: 1fr 90px 38px; }
  .ingredient-food { grid-column: 1 / -1; }
}

.nutrition-log-ingredients-head { margin-top: 24px; }
.actual-ingredient-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
}
.actual-ingredient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .32fr);
  gap: 16px;
  align-items: center;
  background: rgba(7,16,26,.96);
  padding: 11px 13px;
}
.actual-ingredient-row .field,
.actual-ingredient-row .form-check-row { margin: 0; }
.quantity-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.quantity-control b { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
  .actual-ingredient-row { grid-template-columns: 1fr; }
}

/* Brick 4 hotfix · Meal calculator and serving conversions */
.calculator-ingredient-row {
  grid-template-columns: minmax(260px, 1fr) 150px minmax(170px, .42fr) 38px;
}
.calculator-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.calculator-result-metric {
  display: grid;
  gap: 3px;
  min-height: 112px;
  align-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7, 16, 26, .78);
  padding: 14px;
}
.calculator-result-metric > span,
.calculator-result-metric > small {
  color: var(--muted);
  font-size: 11px;
}
.calculator-result-metric > strong {
  color: var(--accent);
  font-size: clamp(22px, 3vw, 31px);
  letter-spacing: -.035em;
}
.calculator-warning-list {
  margin: 14px 0;
}
.calculator-warning-list ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.calculator-evidence-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
}
.calculator-evidence-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(7, 16, 26, .96);
  padding: 11px 13px;
}
.calculator-evidence-list > div > span:first-child {
  display: grid;
  min-width: 0;
}
.calculator-evidence-list small {
  color: var(--muted);
}
.calculator-nutrient-table {
  margin-top: 16px;
}
.calculator-nutrient-table table {
  min-width: 820px;
}
.calculator-calculate-action {
  margin-top: 18px;
}
.calculator-save-plan-card {
  margin-bottom: 16px;
}
.serving-builder {
  display: grid;
  gap: 9px;
}
.serving-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px 130px minmax(160px, .5fr) 38px;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.serving-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.serving-row .field {
  margin: 0;
}
@media (max-width: 1000px) {
  .calculator-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .serving-row {
    grid-template-columns: minmax(220px, 1fr) 110px 120px minmax(150px, .5fr) 38px;
  }
}

/* Brick 10 · Measurements */
.form-grid.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-grid.three-column > .span-2 { grid-column: span 2; }
.form-grid.three-column > .span-3 { grid-column: 1 / -1; }

.measurements-overview-grid,
.measurement-detail-grid,
.measurement-trend-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.measurement-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.measurement-latest-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7,16,26,.68);
  padding: 13px;
  text-decoration: none;
}
.measurement-latest-card:hover {
  border-color: rgba(94,231,255,.4);
  background: rgba(94,231,255,.06);
}
.measurement-latest-card > span { color: var(--muted); font-size: 12px; }
.measurement-latest-card > strong { color: var(--accent); font-size: 20px; overflow-wrap: anywhere; }
.measurement-latest-card > small { font-size: 11px; }

.measurement-boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.measurement-quick-card { margin-bottom: 16px; }
.measurement-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.measurement-quick-grid a {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7,16,26,.68);
  padding: 13px;
  text-decoration: none;
}
.measurement-quick-grid a:hover { border-color: rgba(94,231,255,.4); background: rgba(94,231,255,.06); }
.measurement-quick-grid a:hover strong { color: var(--accent); }
.measurement-quick-grid span { color: var(--muted); font-size: 12px; }
.measurement-boundary-grid > div {
  border-left: 2px solid rgba(94,231,255,.32);
  padding: 3px 12px;
}
.measurement-boundary-grid p { margin: 5px 0 0; color: var(--muted); }

.measurement-value-list { display: grid; gap: 12px; }
.measurement-value-row {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(7,16,26,.62);
}
.measurement-value-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(140px, 1fr) minmax(110px, .65fr) auto;
  align-items: end;
  gap: 10px;
  padding: 13px;
}
.measurement-value-main .field { margin: 0; }
.measurement-row-remove {
  min-height: 45px;
  border: 0;
  background: transparent;
  color: var(--bad);
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.measurement-value-details { border-top: 1px solid var(--border); }
.measurement-value-details > summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  padding: 10px 13px;
  font-size: 12px;
}
.measurement-value-details > summary::-webkit-details-marker { display: none; }
.measurement-value-details > summary::after { content: " +"; color: var(--accent); }
.measurement-value-details[open] > summary::after { content: " −"; }
.measurement-value-details > .form-grid { border-top: 1px solid var(--border); padding: 13px; }

.measurement-condition-fieldset {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.measurement-condition-fieldset legend { padding: 0 7px; font-weight: 720; }
.measurement-condition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.measurement-condition-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.measurement-condition-grid input { width: 18px; height: 18px; accent-color: var(--accent); }

.measurement-result-list { display: grid; gap: 12px; }
.measurement-result-row {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(7,16,26,.68);
  padding: 15px;
}
.measurement-result-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.measurement-result-primary > span:first-child { display: grid; gap: 3px; }
.measurement-result-number { color: var(--accent); font-size: 24px; font-weight: 800; }
.measurement-result-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.measurement-result-meta > span,
.measurement-meta-list > div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(14,23,36,.76);
  color: var(--muted);
  padding: 9px 10px;
  font-size: 12px;
}
.measurement-result-meta strong,
.measurement-meta-list dt { color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.measurement-point-link { justify-self: start; color: var(--muted); font-size: 12px; text-underline-offset: 3px; }
.measurement-point-link:hover { color: var(--accent); }
.measurement-side-stack { display: grid; align-content: start; gap: 16px; }
.measurement-meta-list { display: grid; gap: 8px; margin: 0; }
.measurement-meta-list dd { margin: 0; overflow-wrap: anywhere; }
.danger-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,125,141,.48);
  border-radius: 9px;
  background: rgba(255,125,141,.09);
  color: #ffd8df;
  padding: 9px 13px;
  font-weight: 740;
}
.danger-button:hover { background: rgba(255,125,141,.16); }

.measurement-filter-grid {
  display: grid;
  grid-template-columns: minmax(210px, 2fr) repeat(5, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}
.measurement-filter-grid .field { margin: 0; }
.measurement-filter-actions { display: flex; min-height: 45px; align-items: center; gap: 9px; }
.measurement-history-list { display: grid; }
.measurement-history-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding: 13px 4px;
  text-decoration: none;
}
.measurement-history-row:first-child { border-top: 0; }
.measurement-history-row:hover .measurement-history-content > strong { color: var(--accent); }
.measurement-history-row time {
  display: grid;
  justify-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7,16,26,.72);
  padding: 7px;
}
.measurement-history-row time strong { color: var(--accent); font-size: 21px; line-height: 1; }
.measurement-history-row time span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.measurement-history-content { display: grid; min-width: 0; gap: 4px; }
.measurement-history-content small { overflow-wrap: anywhere; }
.measurement-history-counts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 12px; }

.measurement-trend-controls {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.measurement-trend-controls .field { margin: 0; }
.measurement-chart-scroll { overflow-x: auto; }
.measurement-chart { display: block; width: 100%; min-width: 680px; height: auto; }
.measurement-chart-gridline { stroke: rgba(140,164,184,.18); stroke-width: 1; }
.measurement-chart-label { fill: var(--muted); font-size: 11px; }
.measurement-target-band { fill: rgba(99,221,163,.1); stroke: rgba(99,221,163,.25); }
.measurement-target-label { fill: var(--ok); font-size: 10px; font-weight: 700; }
.measurement-chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.measurement-chart-point { fill: var(--panel); stroke: var(--accent); stroke-width: 3; transition: r .15s ease, fill .15s ease; }
.measurement-chart a:hover .measurement-chart-point,
.measurement-chart-point:focus { r: 8; fill: var(--accent); outline: none; }
.measurement-chart-point.flag-low,
.measurement-chart-point.flag-high { stroke: var(--bad); }
.measurement-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-size: 11px;
}
.measurement-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.measurement-chart-legend i { display: inline-block; width: 16px; height: 9px; }
.measurement-chart-legend i.target { border: 1px solid rgba(99,221,163,.4); background: rgba(99,221,163,.12); }
.measurement-chart-legend i.point { width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; }
.measurement-context-list { display: grid; margin-top: 12px; }
.measurement-context-list a {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 10px 0;
  text-decoration: none;
}
.measurement-context-list a:first-child { border-top: 0; }
.measurement-context-list a > strong { color: var(--accent); font-size: 22px; }
.measurement-context-list a > span { display: grid; }
.measurement-context-list a:hover > span { color: var(--accent); }

.measurement-metric-section { margin-bottom: 16px; }
.measurement-metric-list { display: grid; }
.measurement-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 12px 2px;
  text-decoration: none;
}
.measurement-metric-row:first-child { border-top: 0; }
.measurement-metric-row > span { display: grid; gap: 3px; }
.measurement-metric-row > span:last-child { justify-items: end; }
.measurement-metric-row:hover > span:first-child > strong { color: var(--accent); }

@media (max-width: 1100px) {
  .measurement-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .measurement-filter-query { grid-column: span 2; }
  .measurement-filter-actions { grid-column: span 3; }
  .measurement-condition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .measurements-overview-grid,
  .measurement-detail-grid,
  .measurement-trend-lower-grid,
  .measurement-boundary-grid,
  .measurement-latest-grid,
  .measurement-quick-grid,
  .form-grid.three-column,
  .measurement-filter-grid,
  .measurement-trend-controls {
    grid-template-columns: 1fr;
  }
  .form-grid.three-column > .span-2,
  .form-grid.three-column > .span-3,
  .measurement-filter-query,
  .measurement-filter-actions { grid-column: 1; }
  .measurement-value-main { grid-template-columns: minmax(0, 1fr) 110px; }
  .measurement-value-main .field:first-child { grid-column: 1 / -1; }
  .measurement-row-remove { align-self: end; }
  .measurement-result-primary { grid-template-columns: minmax(0, 1fr) auto; }
  .measurement-result-primary .badge { grid-column: 1 / -1; justify-self: start; }
  .measurement-history-row { grid-template-columns: 64px minmax(0, 1fr); }
  .measurement-history-counts { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .measurement-condition-grid,
  .measurement-result-meta { grid-template-columns: 1fr; }
  .measurement-value-main { grid-template-columns: 1fr; }
  .measurement-value-main .field:first-child { grid-column: 1; }
  .measurement-result-primary { grid-template-columns: 1fr; }
  .measurement-result-primary .badge { grid-column: 1; }
  .measurement-metric-row { align-items: start; grid-template-columns: 1fr; }
  .measurement-metric-row > span:last-child { justify-items: start; }
}
@media (max-width: 760px) {
  .calculator-ingredient-row {
    grid-template-columns: minmax(0, 1fr) 1fr 38px;
  }
  .calculator-ingredient-row .ingredient-food,
  .calculator-ingredient-row .calculator-measure {
    grid-column: 1 / -1;
  }
  .serving-row {
    grid-template-columns: 1fr 1fr 38px;
  }
  .serving-row .serving-name,
  .serving-row .field:nth-child(4) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 500px) {
  .calculator-result-grid {
    grid-template-columns: 1fr;
  }
  .calculator-evidence-list > div {
    align-items: flex-start;
    flex-direction: column;
  }
  .serving-row {
    grid-template-columns: 1fr 38px;
  }
  .serving-row .field {
    grid-column: 1;
  }
  .serving-row .ingredient-remove {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Brick 5 · Supplements */
.stack-form { display: grid; gap: 16px; }
.stack-form > .card { margin: 0; }
.form-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.four-column { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.two-column > .field,
.form-grid.four-column > .field { margin: 0; }
.filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}
.filter-bar .field { margin: 0; }
.supplement-dose-row { min-height: 58px; }
.supplement-nutrient-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.supplement-nutrient-grid .field { margin: 0; }
.weekday-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.weekday-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7,16,26,.72);
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
}
.weekday-checks input { accent-color: var(--accent); }
.range-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.range-selector button {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  padding: 6px 11px;
  font-weight: 720;
}
.range-selector button:hover,
.range-selector button.active { border-color: var(--accent); color: var(--accent); background: rgba(94,231,255,.1); }
.badge-warning { border-color: rgba(240,196,108,.4); background: rgba(240,196,108,.06); color: var(--warn); }
.nutrition-table-card td input,
.nutrition-table-card td select {
  width: 100%;
  min-width: 100px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #07101a;
  color: var(--text);
  padding: 7px 9px;
}
.check-list { display: grid; gap: 8px; color: #c7d9e6; padding-left: 20px; }
.dashboard-supplements-card { grid-column: auto; }

@media (max-width: 1100px) {
  .supplement-nutrient-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .form-grid.two-column,
  .form-grid.four-column,
  .filter-bar,
  .supplement-nutrient-grid { grid-template-columns: 1fr; }
  .form-grid.two-column .span-2,
  .form-grid.four-column .span-2 { grid-column: 1 / -1; }
}

/* Brick 6 · Medication */
.medication-dashboard-grid .card,
.dashboard-medication-card {
    min-width: 0;
}
.medication-dose-row {
    align-items: center;
}
.medication-alert-list > div {
    align-items: flex-start;
}
.medication-alert-list small {
    display: block;
    max-width: 62ch;
}
.medication-inline-filter {
    margin-bottom: 1rem;
}
@media (max-width: 760px) {
    .medication-inline-filter {
        align-items: stretch;
    }
}


/* Bricks 7 and 8 · Health Events and Sleep */
.health-dashboard-grid .card,
.sleep-dashboard-grid .card,
.dashboard-health-card,
.dashboard-sleep-card { min-width: 0; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
}
.detail-grid > div {
  display: grid;
  gap: 4px;
  min-height: 82px;
  align-content: center;
  background: rgba(7,16,26,.96);
  padding: 13px;
}
.detail-grid dt,
.sleep-summary-grid span,
.sleep-time-summary span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.detail-grid dd { margin: 0; color: var(--text); font-weight: 720; }
.event-note {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.event-note + .event-note { margin-top: 14px; }
.event-note p { margin-bottom: 0; color: var(--muted); }

.health-followup-list { display: grid; gap: 10px; }
.health-followup-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.health-followup-list > div:first-child { border-top: 0; padding-top: 0; }
.health-followup-list span:first-child { display: grid; min-width: 0; }
.kiki-expense-inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.kiki-expense-inline-form select {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #07101a;
  color: var(--text);
  padding: 6px 8px;
}
.danger-link { color: var(--bad); }
.kiki-expense-danger-zone { margin-top: 16px; border-color: rgba(255,125,141,.3); }

.event-timeline { display: grid; gap: 0; }
.event-timeline article {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  position: relative;
  padding: 0 0 18px;
}
.event-timeline article:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  bottom: -1px;
  width: 1px;
  background: var(--border);
}
.event-timeline-marker {
  width: 13px;
  height: 13px;
  margin-top: 4px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  z-index: 1;
}
.event-timeline article > div { display: grid; gap: 4px; }
.event-timeline small { color: var(--muted); }
.event-timeline p { margin: 2px 0 0; color: var(--muted); }

.health-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.entry-panel { padding: 0; overflow: hidden; }
.entry-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 18px;
}
.entry-panel > summary::-webkit-details-marker { display: none; }
.entry-panel > summary::after { content: "+"; color: var(--accent); font-size: 24px; }
.entry-panel[open] > summary::after { content: "−"; }
.entry-panel > summary > span { display: grid; gap: 3px; }
.entry-panel > summary small { color: var(--muted); }
.entry-panel > form { border-top: 1px solid var(--border); padding: 18px; }

.sleep-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.sleep-summary-grid > div,
.sleep-time-summary > div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(7,16,26,.72);
  padding: 12px;
}
.sleep-summary-grid strong { color: var(--accent); font-size: 20px; }
.sleep-time-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}
.sleep-time-block {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7,16,26,.55);
  padding: 13px;
}
.sleep-time-block .field { margin: 0; }
.sleep-time-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.sleep-time-summary strong { font-size: 14px; }
.consumer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.consumer-list > span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7,16,26,.72);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sleep-time-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .sleep-time-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .health-entry-grid,
  .sleep-summary-grid,
  .sleep-time-grid,
  .sleep-time-summary { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .health-followup-list > div { align-items: stretch; flex-direction: column; }
  .kiki-expense-inline-form select { width: 100%; }
}

/* Brick 9 · Health Documents */
.health-document-dashboard-grid .card,
.health-document-detail-grid .card,
.dashboard-health-documents-card { min-width: 0; }

.health-document-filter-bar {
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(135px, 1fr)) auto;
}

.health-document-file-list,
.health-document-link-list {
  display: grid;
  gap: 10px;
}

.health-document-file-list article,
.health-document-link-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7,16,26,.68);
  padding: 12px;
}

.health-document-link-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.health-document-file-list article > span:nth-child(2),
.health-document-link-list article > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.health-document-file-list small,
.health-document-link-list small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.health-document-file-icon {
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  min-height: 42px;
  border: 1px solid rgba(94,231,255,.28);
  border-radius: 9px;
  background: rgba(94,231,255,.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.health-document-file-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.health-document-file-actions form { margin: 0; }

.health-document-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.health-document-photo-grid a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #07101a;
}

.health-document-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .health-document-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .health-document-filter-bar,
  .health-document-photo-grid {
    grid-template-columns: 1fr;
  }
  .health-document-file-list article,
  .health-document-link-list article {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .health-document-file-icon {
    width: max-content;
  }
  .health-document-file-actions {
    justify-content: flex-start;
  }
}

/* Brick 11 · Meal Plan Shopping */
.meal-shopping-dashboard-grid .card,
.dashboard-meal-shopping-card { min-width: 0; }
.shopping-preview-list,
.shopping-item-stack { display: grid; gap: 10px; }
.shopping-preview-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.shopping-preview-list > div:first-child { border-top: 0; padding-top: 0; }
.shopping-preview-list > div > span:first-child { display: grid; gap: 3px; min-width: 0; }
.shopping-preview-list small { color: var(--muted); }
.shopping-preview-list > div > span:last-child { color: var(--accent); font-weight: 750; white-space: nowrap; }
.shopping-item-row {
  display: grid;
  grid-template-columns: minmax(260px, 2.1fr) repeat(5, minmax(115px, .8fr)) minmax(180px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7,16,26,.68);
  padding: 12px;
}
.shopping-item-row.is-muted { opacity: .62; }
.shopping-item-row .field { margin: 0; }
.shopping-item-main { display: grid; gap: 5px; align-self: center; min-width: 0; }
.shopping-item-main small { color: var(--muted); overflow-wrap: anywhere; }
.shopping-item-notes { min-width: 0; }
.compact-check { min-height: 38px; padding: 7px 9px; }
.meal-shopping-dashboard-grid { align-items: start; }
@media (max-width: 1280px) {
  .shopping-item-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shopping-item-main { grid-column: 1 / -1; }
  .shopping-item-notes { grid-column: span 2; }
}
@media (max-width: 760px) {
  .shopping-preview-list > div { align-items: flex-start; flex-direction: column; }
  .shopping-item-row { grid-template-columns: 1fr; }
  .shopping-item-main,
  .shopping-item-notes { grid-column: 1; }
}

/* Brick 12 · Kiki Expenses */
.kiki-expense-dashboard-grid { align-items: start; }
.kiki-expense-category-list,
.kiki-expense-due-list,
.kiki-budget-list { display: grid; gap: 8px; }
.kiki-expense-category-list > a,
.kiki-expense-due-list > a,
.kiki-budget-list > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
}
.kiki-expense-category-list > a:hover,
.kiki-expense-due-list > a:hover,
.kiki-budget-list > a:hover { border-color: var(--accent); }
.kiki-expense-category-list span,
.kiki-expense-due-list span,
.kiki-budget-list span { display: grid; gap: 3px; }
.kiki-expense-category-list small,
.kiki-expense-due-list small,
.kiki-budget-list small,
.table-subline { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.kiki-expense-items-table input,
.kiki-expense-items-table select { min-width: 92px; }
.kiki-expense-items-table td:first-child input { min-width: 180px; }
.kiki-expense-items-table td:last-child input { min-width: 150px; }
.kiki-budget-list progress { width: min(260px, 100%); height: 7px; accent-color: var(--accent); }
.kiki-expense-connection-list { display: grid; gap: 9px; margin: 16px 0; }
.kiki-expense-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; }
.kiki-expense-connection-row span { display: grid; gap: 3px; }
.kiki-expense-connection-row small { color: var(--muted); }
.kiki-expense-inline-form { display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.kiki-expense-inline-form .field { flex: 1; }
.kiki-expense-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: rgba(239, 91, 91, .35); }
.kiki-expense-numbered-list { display: grid; gap: 12px; padding-left: 22px; }
@media (max-width: 760px) {
    .kiki-expense-inline-form, .kiki-expense-danger-zone { align-items: stretch; flex-direction: column; }
    .kiki-expense-category-list > a,
    .kiki-expense-due-list > a,
    .kiki-budget-list > a { align-items: flex-start; flex-direction: column; }
}


/* Brick 13 · Kiki Health */
.table-note { display:block; margin-top:.25rem; color:var(--muted); font-size:.78rem; }
.metric-inline { font-size:1.05rem; font-weight:700; color:var(--text); white-space:nowrap; }
.detail-list { display:grid; gap:.85rem; margin:0; }
.detail-list > div { padding-bottom:.8rem; border-bottom:1px solid rgba(255,255,255,.08); }
.detail-list dt { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.detail-list dd { margin:.3rem 0 0; color:var(--text); line-height:1.55; }
.timeline-list { display:grid; gap:1rem; }
.timeline-item { padding:1rem; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); }
.timeline-item small { display:block; margin-top:.2rem; color:var(--muted); }
.timeline-item p { margin:.75rem 0 0; line-height:1.55; }


/* Brick 14 · Kiki-only Activity */
.dashboard-kiki-activity-card { min-height: 100%; }
.kiki-activity-score-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.kiki-activity-boundary { border-left:4px solid var(--accent, #7c3aed); }
@media (max-width:720px){ .kiki-activity-score-grid{grid-template-columns:1fr;} }

/* Brick 17 · Contacts and grouped navigation */
.sidebar { overflow: hidden; }
.sidebar-nav {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar-nav .nav-link { margin-bottom: 4px; }
.nav-divider {
  height: 1px;
  margin: 12px 8px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.sidebar-external { display: grid; gap: 5px; padding: 0 9px; }
.sidebar-external a {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-external a:hover { color: var(--accent); }
.sidebar-foot { flex: 0 0 auto; margin-top: 12px; }

.contacts-filter {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(170px, 1fr) minmax(150px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
}
.contacts-dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, .85fr); }
.contacts-directory-card { min-width: 0; }
.contact-directory-list { display: grid; gap: 7px; }
.contact-letter {
  position: sticky;
  top: -1px;
  z-index: 2;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 17, 27, .96);
  color: var(--accent);
  padding: 8px 3px 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.contact-directory-row {
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr) minmax(180px, .85fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}
.contact-directory-row:hover { border-color: rgba(94, 231, 255, .22); background: rgba(19, 33, 49, .58); }
.contact-directory-main,
.contact-directory-detail { display: grid; min-width: 0; }
.contact-directory-main strong,
.contact-directory-main small,
.contact-directory-detail small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-directory-detail { text-align: right; }
.contact-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(94, 231, 255, .28);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(94, 231, 255, .12), rgba(19, 33, 49, .9));
  color: var(--accent);
  font-weight: 800;
}
.contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-avatar-small { width: 46px; height: 46px; }
.contact-avatar-large { width: 132px; height: 132px; font-size: 42px; }
.contact-avatar-detail { width: 150px; height: 150px; font-size: 44px; }
.contact-photo-editor { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.contact-photo-controls { display: grid; gap: 9px; max-width: 580px; }
.photo-choice {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 9px 12px;
  color: var(--text);
  cursor: pointer;
}
.photo-choice:hover { border-color: rgba(94, 231, 255, .38); }
.photo-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.repeat-list { display: grid; gap: 10px; }
.repeat-row {
  display: flex;
  align-items: end;
  gap: 10px;
  border: 1px solid rgba(94, 231, 255, .09);
  border-radius: 12px;
  background: rgba(8, 15, 24, .42);
  padding: 12px;
}
.repeat-grow { flex: 1 1 280px; }
.primary-choice { display: inline-flex; align-items: center; gap: 7px; min-height: 43px; color: var(--muted); }
.contact-address-row { align-items: end; flex-wrap: wrap; }
.contact-address-row .field { flex: 1 1 120px; }
.contact-address-row .address-street { flex: 2 1 230px; }
.contact-address-row .address-suburb { flex: 1.5 1 180px; }
.contact-detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); }
.contact-identity-card { display: flex; align-items: flex-start; gap: 22px; }
.contact-identity-main { min-width: 0; flex: 1 1 auto; }
.contact-link-list { display: grid; gap: 8px; margin-top: 14px; }
.contact-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(94, 231, 255, .09);
  padding: 8px 0;
  text-decoration: none;
}
.contact-link-row:last-child { border-bottom: 0; }
.contact-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.contact-map-card { min-width: 0; }
.contact-map-frame {
  overflow: hidden;
  min-height: 320px;
  margin: 12px 0 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-deep);
}
.contact-map-frame iframe { display: block; width: 100%; height: 320px; border: 0; }
.contact-notes { margin-bottom: 0; white-space: normal; }
.contact-status-actions { display: flex; flex-wrap: wrap; gap: 9px; }

@media (max-width: 1050px) {
  .contacts-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-directory-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .contact-directory-detail { display: none; }
  .contacts-dashboard-grid,
  .contact-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .contacts-filter { grid-template-columns: 1fr; }
  .contact-directory-row { grid-template-columns: auto minmax(0, 1fr); }
  .contact-directory-row > .badge { grid-column: 2; justify-self: start; }
  .contact-photo-editor,
  .contact-identity-card { align-items: flex-start; flex-direction: column; }
  .repeat-row { align-items: stretch; flex-direction: column; }
  .primary-choice { min-height: 0; }
  .contact-address-grid { grid-template-columns: 1fr; }
  .contact-map-frame,
  .contact-map-frame iframe { height: 270px; min-height: 270px; }
}
.contact-profile-head { align-items: center; }
.contact-profile-identity { display: flex; align-items: center; gap: 22px; min-width: 0; }
.contact-profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.contact-avatar-hero { width: 116px; height: 116px; font-size: 36px; }
.contact-action-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; padding: 13px 16px; }
.contact-action-bar form { margin: 0; }
.contact-detail-groups { display: grid; gap: 24px; }
@media (max-width: 720px) {
  .contact-profile-head,
  .contact-profile-identity { align-items: flex-start; flex-direction: column; }
  .contact-profile-actions { justify-content: flex-start; }
}

/* Sidebar order and scrolling hotfix — exact user-defined hierarchy */
.sidebar {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.sidebar-nav {
  display: block;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  padding-right: 4px;
}
.sidebar-nav .nav-link { margin-bottom: 4px; }
.nav-divider {
  height: 1px;
  margin: 12px 8px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.sidebar-external {
  display: grid;
  gap: 5px;
  padding: 0 9px;
}
.sidebar-external a {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
}
.sidebar-external a:hover { color: var(--accent); }
.sidebar-owner {
  display: grid;
  gap: 3px;
  padding: 0 10px;
}
.sidebar-owner > span { font-weight: 750; }
.sidebar-owner small { font-size: 11px; }
.sidebar-signout {
  padding: 0 10px 18px;
}
.sidebar-signout .link-button {
  width: 100%;
  padding: 8px 0 2px;
}
.sidebar-foot { display: none; }
@media (max-width: 900px) {
  .sidebar { padding-bottom: 10px; }
}


/* RayOS UI integrity hotfix · responsive forms and contained tables */
.main-column,
.content,
.card,
.settings-grid,
.settings-grid > *,
.form-grid,
.form-grid > *,
.responsive-table,
.table-scroll {
  min-width: 0;
}

/* Two-card layouts remain two columns only when each card has usable width. */
.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  align-items: start;
}

/* Legacy forms without explicit span classes receive a practical three-column layout. */
.form-grid > .field:not([class*="span-"]),
.form-grid > .form-check-row:not([class*="span-"]) {
  grid-column: span 4;
}
.filter-bar .form-grid > .field:not([class*="span-"]) {
  grid-column: span 3;
}
.field,
.form-check-row {
  min-width: 0;
}
.field > label,
.field > span,
.form-check-row span {
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Tables scroll inside their card instead of widening the entire RayOS page. */
.responsive-table,
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.responsive-table table,
.table-scroll table {
  width: 100%;
  min-width: 720px;
}
.responsive-table td > small,
.table-scroll td > small,
.table-subline {
  display: block;
  margin-top: 3px;
  line-height: 1.35;
}
.kiki-expense-items-table {
  min-width: 980px;
  table-layout: auto;
}
.kiki-expense-items-table th,
.kiki-expense-items-table td {
  min-width: 110px;
}
.kiki-expense-items-table th:first-child,
.kiki-expense-items-table td:first-child {
  min-width: 180px;
}
.kiki-expense-items-table th:nth-child(4),
.kiki-expense-items-table td:nth-child(4) {
  min-width: 170px;
}
.kiki-expense-items-table th:last-child,
.kiki-expense-items-table td:last-child {
  min-width: 180px;
}
.kiki-expense-items-table input,
.kiki-expense-items-table select {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .form-grid > .field:not([class*="span-"]),
  .form-grid > .form-check-row:not([class*="span-"]),
  .filter-bar .form-grid > .field:not([class*="span-"]) {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  .form-grid > .field:not([class*="span-"]),
  .form-grid > .form-check-row:not([class*="span-"]),
  .filter-bar .form-grid > .field:not([class*="span-"]) {
    grid-column: span 12;
  }
  .responsive-table table,
  .table-scroll table {
    min-width: 680px;
  }
}