/* ============================================================
   Autorelational Eating — client portal stylesheet
   Consolidated + de-minified. Renders identically to the prior
   build (verified by screenshot diff across all live components).

   Structure:
   - Design tokens (:root)
   - Base + layout (topbar, sidebar, nav, main)
   - Components (panels, cards, image slots, forms, tables, auth)
   - Patch layers, preserved in cascade order (do not reorder)
   - Responsive breakpoints
   - REMOVAL CANDIDATES at end: rules no pages in this zip use.

   NOTE: this file is intentionally NOT flattened to one rule per
   selector. Many later rules override only a few properties and
   rely on earlier ones. The cascade order is load-bearing.
   ============================================================ */


:root {

  --primary:#489BAD;

  --primary-dark:#347f8d;

  --primary-soft:#e8f6f8;

  --primary-soft-2:#f2fafb;

  --ink:#10252d;

  --muted:#5d737c;

  --line:#d4e4e8;

  --line-soft:#e9f0f2;

  --bg:#f5f8f9;

  --panel:#ffffff;

  --black:#0c1012;

  --orange:#e7762a;

  --green:#8fb15b;

  --radius:9px;

  --shadow:0 12px 26px rgba(16,37,45,.055);

  --body:Figtree,Arial,sans-serif;

  --head:"Libre Baskerville",Georgia,serif;
}

* {
  box-sizing:border-box}

html {
  background:var(--bg);
  overflow-x:hidden}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

a {
  color:inherit;
  text-decoration:none}
img {
  display:block;
  max-width:100%;
  height:auto}
button,input,select,textarea {
  font:inherit}

.topbar {
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  right:0;
  height:74px;
  background:var(--black);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 22px;
  border-bottom:1px solid rgba(255,255,255,.08)}

.brand-block {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0}
.brand-block img {
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto}
.brand-copy {
  display:grid;
  gap:3px;
  min-width:0}
.brand-name {
  font-family:var(--head);
  font-size:17px;
  line-height:1.04;
  font-weight:400;
  letter-spacing:-.03em;
  color:#fff;
  white-space:nowrap}
.secure-line {
  font-size:12px;
  font-weight:400;
  color:#dcecef;
  line-height:1;
  letter-spacing:.01em}
.top-actions {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px}
.help-link {
  color:#fff;
  opacity:.92;
  font-weight:400}
.top-btn {
  background:var(--primary);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  padding:9px 14px;
  border-radius:8px;
  font-weight:500;
  box-shadow:0 4px 12px rgba(0,0,0,.12)}
.top-btn:hover {
  background:var(--primary-dark)}
.avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  color:#111;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:500}
.app {
  padding-top:74px;
  min-height:100vh}
.sidebar {
  position:fixed;
  z-index:50;
  left:0;
  top:74px;
  bottom:0;
  width:224px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:18px 14px 16px;
  overflow:hidden;
  display:block}
.nav {
  display:grid;
  gap:5px}
.nav a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  color:var(--ink);
  font-weight:500;
  font-size:14px;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.nav a::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a8bbc2;
  flex:0 0 auto}
.nav a:hover {
  background:#e8f6f8;
  color:#0e6473;
  transform:translateX(2px)}
.nav a.active {
  background:#e8f6f8;
  color:#0e6473;
  box-shadow:inset 3px 0 0 var(--primary);
  font-weight:500}
.nav a.active::before {
  background:var(--primary)}

.sidebar-support {
  position:absolute;
  left:14px;
  right:14px;
  bottom:16px;
  border:1px solid rgba(72,155,173,.28);
  border-radius:9px;
  background:linear-gradient(180deg,#f7fcfd,#fff);
  padding:11px}
.sidebar-support h3 {
  font-size:14px;
  margin:0 0 4px;
  font-weight:500}
.sidebar-support p {
  font-size:12px;
  line-height:1.32;
  color:var(--muted);
  margin:0 0 9px}
.sidebar-support .btn {
  width:100%}

.mobile-nav {
  display:none;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:8px 10px;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.mobile-nav::-webkit-scrollbar {
  display:none}
.mobile-nav a {
  flex:0 0 auto;
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:500}
.mobile-nav a.active {
  background:var(--primary-soft);
  border-color:#bfe0e7;
  color:#0e6473}

.main {
  margin-left:224px;
  min-width:0}
.container {
  max-width:1180px;
  margin:0 auto;
  padding:26px 28px 48px}
.page-title {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin:0 0 20px}
.page-title h1 {
  font-family:var(--head);
  font-size:28px;
  line-height:1.12;
  margin:0 0 6px;
  letter-spacing:-.035em;
  font-weight:400}
.page-title p {
  margin:0;
  color:var(--muted);
  font-size:15px}
.home-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start}
.main-stack,.aside-stack {
  display:grid;
  gap:18px}
.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:rise .35s ease both}
.panel:nth-child(2) {
  animation-delay:.04s}
.panel:nth-child(3) {
  animation-delay:.08s}
.panel:nth-child(4) {
  animation-delay:.12s}
.panel-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:17px 18px 12px;
  border-bottom:1px solid var(--line-soft)}
.panel-head h2 {
  margin:0;
  font-size:18px;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.2}
.panel-head p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:13.5px}
.panel-body {
  padding:16px 18px 18px}
.link {
  color:#0f6d7c;
  font-weight:500;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:7px;
  padding:8px 13px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:500;
  font-size:13px;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease}
.btn:hover {
  transform:translateY(-1px);
  border-color:#b8d6dc}
.btn.primary {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff}
.btn.primary:hover {
  background:var(--primary-dark)}
.btn.small {
  min-height:29px;
  padding:6px 10px;
  font-size:12px}
.fine {
  color:var(--muted);
  font-size:12.5px;
  font-weight:400;
  margin:0 0 5px}
.accent-line {
  width:4px;
  border-radius:999px;
  align-self:stretch;
  min-height:45px;
  background:var(--primary);
  flex:0 0 auto}
.accent-line.green {
  background:var(--green)}
.accent-line.orange {
  background:var(--orange)}

.image-slot {
  height:116px;
  background:linear-gradient(135deg,#d7eef2 0%,#eef5f6 58%,#f3f7f8 100%);
  position:relative;
  overflow:hidden}
.image-slot::after {
  content:"IMAGE URL PLACEHOLDER";
  position:absolute;
  right:13px;
  bottom:10px;
  color:#6b7f86;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.08em;
  opacity:.72}
.image-slot.small {
  width:80px;
  height:62px;
  border-radius:7px;
  flex:none}
.image-slot.tiny {
  width:74px;
  height:58px;
  border-radius:7px;
  flex:none}
.image-slot::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 18% 92%,rgba(72,155,173,.22),transparent 46%),linear-gradient(160deg,transparent 47%,rgba(72,155,173,.18) 48%,rgba(255,255,255,.35) 57%,transparent 60%)}
.image-slot.green::before {
  background:radial-gradient(ellipse at 76% 40%,rgba(143,177,91,.22),transparent 43%),radial-gradient(ellipse at 25% 90%,rgba(72,155,173,.18),transparent 48%)}
.image-slot.orange::before {
  background:radial-gradient(ellipse at 80% 76%,rgba(231,118,42,.24),transparent 42%),radial-gradient(ellipse at 20% 92%,rgba(72,155,173,.16),transparent 48%)}

.continue-card {
  display:grid;
  grid-template-columns:84px minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  padding:16px 18px}
.continue-card .image-slot {
  width:84px;
  height:68px;
  border-radius:8px}
.continue-card h3 {
  margin:0 0 2px;
  font-size:16px;
  line-height:1.25;
  font-weight:500}
.continue-card p {
  margin:0;
  color:var(--muted);
  font-size:13.5px}
.progress {
  height:6px;
  background:#e7eef0;
  border-radius:999px;
  overflow:hidden;
  margin-top:10px;
  max-width:300px}
.progress span {
  display:block;
  height:100%;
  width:46%;
  background:var(--primary);
  border-radius:999px}
.card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.product-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease,box-shadow .18s ease}
.product-card:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(16,37,45,.07)}
.product-card .body {
  padding:14px}
.product-card h3 {
  font-size:16px;
  line-height:1.25;
  margin:0 0 5px;
  font-weight:500}
.product-card p {
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 13px}
.program-section {
  padding:0 18px 18px}
.program-columns {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}
.program-col-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px}
.program-col-head h3 {
  font-size:14px;
  margin:0;
  font-weight:500}
.mini-list {
  display:grid;
  gap:10px}
.mini-row {
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 12px;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  background:#fff;
  min-width:0;
  transition:transform .18s ease,border-color .18s ease}
.mini-row:hover {
  transform:translateY(-1px);
  border-color:#bddbe1}
.mini-row h4 {
  font-size:14px;
  line-height:1.22;
  margin:0 0 2px;
  font-weight:500}
.mini-row p {
  font-size:12.5px;
  color:var(--muted);
  margin:0;
  line-height:1.35}
.chev {
  color:#78939b;
  font-weight:500}
.programs-home .mini-row {
  grid-template-columns:74px minmax(0,1fr) 12px}
.programs-home .mini-row.coming {
  border-left:3px solid var(--orange)}
.programs-home .mini-row.available {
  border-left:3px solid var(--green)}
.quick-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px}
.quick-link {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 13px;
  display:flex;
  align-items:center;
  gap:11px;
  background:#fff;
  transition:transform .18s ease,border-color .18s ease}
.quick-link:hover {
  transform:translateY(-1px);
  border-color:#bddbe1}
.quick-accent {
  width:4px;
  align-self:stretch;
  min-height:36px;
  border-radius:999px;
  background:var(--primary);
  flex:0 0 auto}
.quick-accent.green {
  background:var(--green)}
.quick-accent.orange {
  background:var(--orange)}
.quick-link .title {
  display:block;
  font-size:14px;
  margin-bottom:2px;
  font-weight:500}
.quick-link .desc {
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.3}
.note-card {
  padding:17px}
.note-card h3 {
  font-size:16px;
  margin:0 0 7px;
  font-weight:500}
.note-card p {
  color:var(--muted);
  margin:0;
  font-size:13.5px}
.resource-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px}
.resource-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  background:#fff;
  display:grid;
  grid-template-columns:5px minmax(0,1fr);
  gap:13px;
  align-items:flex-start;
  transition:transform .18s ease,border-color .18s ease}
.resource-card:hover {
  transform:translateY(-1px);
  border-color:#bddbe1}
.resource-accent {
  width:5px;
  align-self:stretch;
  min-height:54px;
  border-radius:999px;
  background:var(--primary)}
.resource-accent.green {
  background:var(--green)}
.resource-accent.orange {
  background:var(--orange)}
.resource-card h3 {
  font-size:15px;
  margin:0 0 4px;
  font-weight:500}
.resource-card p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 8px}
.section {
  margin-bottom:20px}
.section:last-child {
  margin-bottom:0}
.section-title {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 13px}
.section-title h2 {
  font-size:20px;
  margin:0 0 3px;
  font-weight:500}
.section-title p {
  margin:0;
  color:var(--muted)}
.page-grid-2 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.wide-card {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease,border-color .18s ease}
.wide-card:hover {
  transform:translateY(-1px);
  border-color:#bddbe1}
.wide-card .image-slot {
  height:100%;
  min-height:135px}
.wide-card .body {
  padding:16px}
.wide-card h3 {
  font-size:17px;
  margin:0 0 6px;
  font-weight:500}
.wide-card p {
  color:var(--muted);
  margin:0 0 13px}
.support-layout {
  display:grid;
  grid-template-columns:minmax(0,680px) 330px;
  gap:22px;
  align-items:start}
.form-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:21px;
  animation:rise .38s ease both}
.form-panel h2 {
  margin:0 0 7px;
  font-size:22px;
  font-weight:500}
.form-panel p {
  margin:0 0 18px;
  color:var(--muted)}
.form-grid {
  display:grid;
  gap:14px}
.field {
  display:grid;
  gap:6px}
.field label {
  font-weight:500;
  font-size:13.5px}
.field input,.field select,.field textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:11px 12px;
  color:var(--ink)}
.field textarea {
  min-height:170px;
  resize:vertical}
.account-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:22px}
.course-layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:22px;
  align-items:start}
.course-nav,.lesson {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px}
.course-nav h2 {
  font-size:17px;
  margin:0 0 15px;
  font-weight:500}
.module {
  margin-bottom:18px}
.module-title {
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 8px;
  font-weight:400}
.lesson-link {
  display:flex;
  gap:9px;
  align-items:center;
  border-radius:8px;
  padding:9px 10px;
  font-size:13.5px;
  font-weight:400;
  color:var(--ink)}
.lesson-link:hover,.lesson-link.active {
  background:var(--primary-soft);
  color:#0e6473}
.lesson-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a8bbc2}
.lesson-link.active .lesson-dot {
  background:var(--primary)}
.lesson h1 {
  font-family:var(--head);
  font-size:28px;
  margin:8px 0 10px;
  font-weight:400;
  letter-spacing:-.03em}
.video {
  height:280px;
  border:1px dashed #b6cbd1;
  border-radius:9px;
  background:#f8fbfc;
  display:grid;
  place-items:center;
  color:var(--muted);
  margin:18px 0}
.lesson-nav {
  display:flex;
  justify-content:space-between;
  gap:10px}
.table-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow)}
table {
  width:100%;
  border-collapse:collapse;
  background:#fff}
th,td {
  text-align:left;
  padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px}
th {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:400;
  background:#f8fbfc}
.login-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(180deg,#f5f8f9,#edf5f7)}
.login-card {
  width:min(420px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:26px}
.login-brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px}
.login-brand img {
  width:34px;
  height:34px;
  object-fit:contain}
.login-brand strong {
  font-family:var(--head);
  line-height:1.05;
  font-weight:400;
  font-size:17px}
.login-card h1 {
  font-family:var(--head);
  font-size:28px;
  margin:0 0 6px;
  font-weight:400}
.login-card p {
  color:var(--muted);
  margin:0 0 18px}

.programs-home .panel-head {
  border-bottom:1px solid var(--line-soft)}

.programs-home .program-section {
  padding:16px 18px 18px}

.program-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px}

.program-summary-card {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:15px 15px 14px;
  min-height:122px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  overflow:hidden}

.program-summary-card:hover {
  transform:translateY(-2px);
  border-color:#bddbe1;
  box-shadow:0 12px 22px rgba(16,37,45,.06)}

.program-summary-card::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--primary)}

.program-summary-card.available::before {
  background:var(--green)}

.program-summary-card.later::before {
  background:var(--orange)}

.program-summary-card h3 {
  font-size:15px;
  line-height:1.25;
  margin:0 0 7px;
  font-weight:500}

.program-summary-card p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35}

.program-summary-card .count {
  font-size:12px;
  color:#0f6d7c;
  background:#eef8fa;
  border:1px solid #cde9ee;
  border-radius:999px;
  padding:4px 8px;
  white-space:nowrap}

.program-summary-card.available .count {
  color:#5f7c2d;
  background:#f4faeb;
  border-color:#ddecbe}

.program-summary-card.later .count {
  color:#b75717;
  background:#fff4eb;
  border-color:#f1cfb7}

.shortcut-list {
  display:grid;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  margin-top:14px}

.shortcut-list a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
  transition:background .18s ease,transform .18s ease;
  color:var(--ink)}

.shortcut-list a:last-child {
  border-bottom:0}

.shortcut-list a:hover {
  background:#e8f6f8;
  transform:translateX(2px)}

.shortcut-list strong {
  display:block;
  font-size:14px;
  font-weight:500;
  margin:0 0 1px;
  color:var(--ink)}

.shortcut-list span {
  display:block;
  font-size:12.5px;
  line-height:1.3;
  color:var(--muted)}

.shortcut-list em {
  font-style:normal;
  color:#6e8a92;
  font-size:18px;
  line-height:1}

@keyframes rise {
  from {
  opacity:0;
  transform:translateY(8px)}
to {
  opacity:1;
  transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce) {
  .panel,.form-panel {
  animation:none}
.btn,.nav a,.mini-row,.product-card,.quick-link,.resource-card,.wide-card {
  transition:none}
.btn:hover,.nav a:hover,.mini-row:hover,.product-card:hover,.quick-link:hover,.resource-card:hover,.wide-card:hover {
  transform:none}
}

@media (max-width:1120px) {
  .home-grid {
  grid-template-columns:1fr}
.aside-stack {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.program-summary {
  grid-template-columns:1fr}
.support-layout,.account-layout {
  grid-template-columns:1fr}
.program-columns {
  grid-template-columns:1fr}
.programs-home .mini-list {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.page-grid-2 {
  grid-template-columns:1fr}
.resource-grid {
  grid-template-columns:1fr}
.course-layout {
  grid-template-columns:1fr}
}

@media (max-width:860px) {
  .topbar {
  height:58px;
  padding:8px 12px}
.brand-block {
  gap:8px}
.brand-block img {
  width:26px;
  height:26px}
.brand-name {
  font-size:14px}
.secure-line {
  display:none}
.top-actions {
  gap:9px}
.help-link,.avatar {
  display:none}
.top-btn {
  padding:8px 11px;
  font-size:12.5px}
.app {
  padding-top:58px}
.sidebar {
  display:none}
.mobile-nav {
  display:flex;
  position:sticky;
  top:58px;
  z-index:45}
.main {
  margin-left:0}
.container {
  padding:18px 12px 36px}
.page-title {
  margin-bottom:16px}
.page-title h1 {
  font-size:25px}
.home-grid {
  grid-template-columns:1fr;
  gap:14px}
.main-stack,.aside-stack {
  gap:14px}
.aside-stack {
  grid-template-columns:1fr}
.panel-head {
  padding:15px 16px 11px}
.panel-body {
  padding:14px 16px 16px}
.card-grid {
  grid-template-columns:1fr}
.continue-card {
  grid-template-columns:74px minmax(0,1fr);
  gap:12px;
  padding:14px 16px}
.continue-card .image-slot {
  width:74px;
  height:64px}
.continue-card .btn {
  grid-column:1 / -1;
  width:max-content}
.continue-card h3 {
  font-size:15px}
.programs-home .mini-list {
  grid-template-columns:1fr}
.program-section {
  padding:0 16px 16px}
.quick-grid {
  grid-template-columns:1fr}
.wide-card {
  grid-template-columns:1fr}
.wide-card .image-slot {
  min-height:118px}
.lesson h1 {
  font-size:24px}
.video {
  height:210px}
.resource-card {
  grid-template-columns:5px minmax(0,1fr)}
.form-panel {
  padding:18px}
.field textarea {
  min-height:150px}
}

@media (max-width:520px) {
  body {
  font-size:14px}
.container {
  padding-left:10px;
  padding-right:10px}
.topbar {
  padding:8px 10px}
.brand-name {
  font-size:13.5px}
.brand-block img {
  width:24px;
  height:24px}
.page-title h1 {
  font-size:23px}
.page-title p {
  font-size:14px}
.panel-head {
  display:block}
.panel-head .link {
  display:inline-block;
  margin-top:8px}
.product-card .image-slot {
  height:96px}
.image-slot::after {
  font-size:9px;
  right:9px}
.mini-row {
  grid-template-columns:64px minmax(0,1fr) 10px;
  gap:10px}
.mini-row .image-slot.small,.image-slot.small {
  width:64px;
  height:52px}
.mini-row h4 {
  font-size:13.5px}
.mini-row p {
  font-size:12px}
.page-title {
  display:block}
.top-btn {
  font-size:12px}
.mobile-nav {
  padding:8px 10px}
.mobile-nav a {
  font-size:12.5px;
  padding:7px 10px}
.continue-card {
  grid-template-columns:1fr}
.continue-card .image-slot {
  width:100%;
  height:80px}
.progress {
  max-width:100%}
.section-title {
  display:block}
.section-title .link {
  display:inline-block;
  margin-top:8px}
}

@media (max-width:860px) {

  .sidebar-support {
  position:static}

  .program-summary {
  grid-template-columns:1fr;
  gap:10px}

  .program-summary-card {
  min-height:auto;
  padding:14px 14px 13px}

  .shortcut-list {
  margin-top:12px}

  .shortcut-list a {
  padding:12px 13px}
}

@media (max-width:520px) {

  .topbar {
  align-items:center}

  .brand-name {
  font-size:13px;
  line-height:1.02;
  letter-spacing:-.02em}

  .brand-copy {
  gap:0}

  .top-actions {
  gap:6px}

  .top-btn {
  padding:7px 9px;
  border-radius:7px}

  .mobile-nav {
  gap:6px;
  padding:7px 8px}

  .mobile-nav a {
  font-size:12px;
  padding:6px 9px}

  .page-title h1 {
  font-size:22px}

  .panel-head h2 {
  font-size:17px}

  .program-summary-card h3 {
  font-size:14px}

  .program-summary-card p {
  font-size:12.5px}
}

/* Live portal additions */

.notice {
  max-width:1180px;
  margin:14px auto 0;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink)}

.notice-success {
  border-color:#cfe2b5;
  background:#f8fcf1}
.notice-error {
  border-color:#f1c2a6;
  background:#fff7f1}
.notice-info {
  border-color:#cde9ee;
  background:#f4fbfc}

.empty-state {
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:#fff;
  color:var(--muted);
  font-size:14px}

.form-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px}
.full {
  width:100%}

button.btn,input.btn {
  appearance:none}
.field + .field {
  margin-top:13px}
.small,.subtle {
  font-size:12.5px;
  color:var(--muted);
  font-weight:400}
.muted {
  color:var(--muted)}

.admin-form {
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,320px) auto;
  gap:10px;
  align-items:end}
.admin-form input,.admin-form select {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:10px 11px;
  color:var(--ink)}

.table-scroll {
  overflow:auto}
.table-panel td form {
  margin:0}
.inline-form {
  display:inline}
.danger {
  border-color:#f1c2a6!important;
  color:#9a4211!important}
.danger:hover {
  background:#fff7f1!important}

.lesson-content {
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink);
  margin-top:18px}
.lesson-content p {
  margin:0 0 1em}
.lesson-content h2,.lesson-content h3 {
  font-family:var(--body);
  font-weight:500;
  letter-spacing:-.01em;
  margin:1.4em 0 .55em}
.lesson-content ul,.lesson-content ol {
  margin:0 0 1em 1.25em;
  padding:0}
.lesson-content li {
  margin:.25em 0}
.lesson-content blockquote {
  border-left:4px solid var(--primary);
  margin:1.2em 0;
  padding:.35em 0 .35em 1em;
  color:var(--muted);
  background:#f8fbfc}

.lesson-media {
  margin:18px 0}
.media-frame {
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow)}
.media-frame iframe {
  display:block;
  width:100%;
  height:380px;
  border:0}
.audio-box {
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:15px}
.audio-box audio {
  width:100%;
  display:block}
.lesson-empty {
  border:1px dashed var(--line);
  border-radius:9px;
  padding:16px;
  color:var(--muted);
  background:#f8fbfc}

.downloads {
  margin-top:22px;
  border-top:1px solid var(--line-soft);
  padding-top:18px}
.downloads h2 {
  font-size:17px;
  font-weight:500;
  margin:0 0 10px}
.download-list {
  display:grid;
  gap:10px}
.download-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:12px 13px}
.download-item span {
  color:var(--muted);
  font-size:13px}
.lesson-footer {
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap}
.course-nav .back-link {
  display:inline-block;
  margin-top:8px;
  color:#0f6d7c;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:13px}

.product-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px}
.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  background:var(--primary);
  margin-right:6px}
.status-dot.green {
  background:var(--green)}
.status-dot.orange {
  background:var(--orange)}

.login-page .notice {
  margin:0 0 14px;
  max-width:none}
.login-card form .btn {
  margin-top:12px}
.login-card .field label {
  font-size:13px;
  font-weight:500}
.login-card .field input {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 12px}

@media (max-width:860px) {
  .admin-form {
  grid-template-columns:1fr}
.media-frame iframe {
  height:250px}
.download-item {
  display:block}
.download-item .btn {
  margin-top:10px}
.topbar .brand-name br {
  display:none}
.brand-name {
  white-space:normal}
.top-actions {
  margin-left:auto}
}

@media (max-width:520px) {
  .media-frame iframe {
  height:210px}
.lesson-content {
  font-size:14.5px}
.download-item {
  padding:11px}
.topbar {
  gap:8px}
.brand-block {
  max-width:55%}
.top-btn {
  white-space:nowrap}
}

.auth-card {
  width:min(460px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:26px}
.kicker {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#0f6d7c;
  margin:0 0 8px;
  font-weight:500}
.lede {
  color:var(--muted);
  font-size:15px;
  margin:0 0 18px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:7px;
  padding:8px 13px;
  border:1px solid var(--line);
  background:var(--primary);
  color:#fff;
  font-weight:500;
  font-size:13px;
  text-decoration:none}
.button.ghost {
  background:#fff;
  color:var(--ink)}
.button.secondary {
  background:#fff;
  color:var(--ink)}

/* Access logic + product card cleanup patch */

.product-grid {
  align-items:stretch}
.product-card {
  display:flex;
  flex-direction:column;
  min-width:0}
.product-card .image-slot {
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  min-height:0;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(135deg,#d9eef2 0%,#f4f8f9 72%)}
.product-card .image-slot.has-image {
  background:#eef5f6}
.product-card .image-slot.has-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center}
.product-card .image-slot.placeholder {
  display:grid;
  place-items:center}
.product-card .image-slot.placeholder span {
  color:#70868d;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase}
.product-card.available {
  box-shadow:inset 3px 0 0 var(--green)}
.product-card.owned {
  box-shadow:inset 3px 0 0 var(--primary)}
.product-card.coming {
  box-shadow:inset 3px 0 0 var(--orange)}
.product-card h3 {
  font-weight:500}
.product-card p {
  font-weight:400}
.product-detail .image-slot.detail {
  aspect-ratio:16/9;
  height:auto;
  max-height:420px}
.product-detail .image-slot.detail.has-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center}
.detail-note {
  margin:0 0 14px;
  color:var(--muted)}

.compact-list {
  display:grid;
  gap:10px}
.compact-product-row {
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:10px 12px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.compact-product-row:hover {
  transform:translateY(-1px);
  border-color:#bddbe1;
  box-shadow:0 10px 20px rgba(16,37,45,.045)}
.compact-product-row.owned {
  box-shadow:inset 3px 0 0 var(--primary)}
.compact-product-row.available {
  box-shadow:inset 3px 0 0 var(--green)}
.compact-product-row.coming {
  box-shadow:inset 3px 0 0 var(--orange)}
.compact-product-row .image-slot.tiny {
  width:88px;
  height:64px;
  border-radius:7px}
.compact-product-row .image-slot.tiny.has-image img {
  width:100%;
  height:100%;
  object-fit:cover}
.compact-product-row .image-slot.tiny.placeholder span {
  font-size:8px}
.compact-title {
  display:block;
  font-size:14.5px;
  line-height:1.25;
  font-weight:500;
  color:var(--ink);
  margin-bottom:2px}
.compact-desc {
  display:block;
  font-size:12.5px;
  line-height:1.35;
  color:var(--muted);
  font-weight:400;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden}
.compact-action {
  font-size:12.5px;
  color:#0f6d7c;
  font-weight:500;
  white-space:nowrap}
.coming-panel .compact-action {
  color:#b75717}
.wide-card {
  grid-template-columns:1fr}
.wide-card .image-slot {
  height:auto;
  aspect-ratio:16/10;
  min-height:0}
.wide-card .image-slot.has-image img {
  width:100%;
  height:100%;
  object-fit:cover}
.programs-home {
  display:none}
.page-grid-2 {
  align-items:stretch}
.library-grid .product-card .image-slot {
  aspect-ratio:16/9}
.quick-link .title,.quick-link .desc {
  font-weight:400}
.quick-link .title {
  font-size:14.5px;
  color:var(--ink);
  font-weight:500}
.quick-link .desc {
  font-size:12.75px}
.resource-card h3 {
  font-weight:500}
.resource-card p {
  font-weight:400}
.nav a:hover,.nav a.active {
  background:var(--primary-soft);
  color:#0e6473}
.image-slot.has-image::before,.image-slot.has-image::after {
  display:none}
.image-slot.small.has-image img,.image-slot.tiny.has-image img {
  width:100%;
  height:100%;
  object-fit:cover}
.image-slot.small.placeholder span,.image-slot.tiny.placeholder span {
  font-size:8px;
  line-height:1.1;
  text-align:center;
  padding:4px}
.continue-card .image-slot.small {
  aspect-ratio:auto}
.form-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center}

@media(max-width:1120px) {
  .home-grid {
  grid-template-columns:1fr}
.aside-stack {
  grid-template-columns:1fr 1fr}
.card-grid.product-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-product-row {
  grid-template-columns:80px minmax(0,1fr) auto}
.compact-product-row .image-slot.tiny {
  width:80px;
  height:60px}
}

@media(max-width:860px) {
  .aside-stack {
  grid-template-columns:1fr}
.card-grid.product-grid {
  grid-template-columns:1fr}
.product-card .image-slot {
  aspect-ratio:16/9}
.compact-product-row {
  grid-template-columns:76px minmax(0,1fr)}
.compact-action {
  grid-column:2 / -1}
.compact-product-row .image-slot.tiny {
  width:76px;
  height:58px}
.topbar .brand-copy {
  line-height:1}
.mobile-nav a {
  font-weight:500}
.panel-head h2 {
  font-size:17px}
.panel-head p {
  font-size:13px}
.page-title h1 {
  font-size:24px}
}

@media(max-width:520px) {
  .container {
  padding-left:12px;
  padding-right:12px}
.top-actions {
  gap:8px}
.topbar {
  height:auto;
  min-height:58px}
.brand-block {
  max-width:62%}
.brand-name {
  font-size:13px;
  line-height:1.02}
.brand-block img {
  width:25px;
  height:25px}
.top-btn {
  padding:8px 10px;
  font-size:12px}
.mobile-nav {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  overflow:visible}
.mobile-nav a {
  white-space:normal;
  text-align:center;
  justify-content:center;
  padding:8px 6px;
  border-radius:8px}
.continue-card {
  grid-template-columns:1fr}
.continue-card .image-slot {
  width:100%;
  height:auto;
  aspect-ratio:16/9}
.continue-card .btn {
  width:100%;
  justify-self:stretch}
.compact-product-row {
  grid-template-columns:70px minmax(0,1fr);
  padding:10px}
.compact-product-row .image-slot.tiny {
  width:70px;
  height:56px}
.compact-title {
  font-size:14px}
.compact-desc {
  font-size:12px}
.compact-action {
  font-size:12px}
.product-card .body {
  padding:13px}
.product-card h3 {
  font-size:15.5px}
.product-card p {
  font-size:13px}
.quick-link {
  padding:11px 12px}
.sidebar-support {
  display:block}
}

/* v12 display + reflections fixes */

.image-slot::after {
  content:none!important;
  display:none!important}

.image-slot.placeholder {
  background:linear-gradient(135deg,#dff1f4 0%,#f4f8f9 72%,#eef5f6 100%)!important}

.image-slot.placeholder span {
  display:none!important}

.product-card .image-slot {
  aspect-ratio:4/3!important;
  height:auto!important;
  min-height:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef6f8!important;
  border-bottom:1px solid var(--line-soft)}

.product-card .image-slot.has-image img {
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#eef6f8!important}

.library-grid .product-card .image-slot {
  aspect-ratio:4/3!important}

.wide-card .image-slot {
  aspect-ratio:4/3!important}

.product-detail .image-slot.detail {
  aspect-ratio:4/3!important;
  max-height:none!important;
  background:#eef6f8!important}

.product-detail .image-slot.detail.has-image img {
  object-fit:contain!important;
  background:#eef6f8!important}

.continue-card .image-slot.small.has-image img,.compact-product-row .image-slot.tiny.has-image img,.image-slot.small.has-image img,.image-slot.tiny.has-image img {
  object-fit:cover!important;
  background:#eef6f8!important}

.compact-product-row {
  grid-template-columns:84px minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:center!important;
  padding:12px!important;
  min-height:86px;
  text-decoration:none}
.compact-copy {
  display:block;
  min-width:0}
.compact-title {
  display:block!important;
  font-size:14.5px!important;
  line-height:1.25!important;
  font-weight:500!important;
  margin:0 0 3px!important;
  color:var(--ink)!important}
.compact-desc {
  display:block!important;
  font-size:12.75px!important;
  line-height:1.38!important;
  color:var(--muted)!important;
  font-weight:400!important;
  overflow:hidden;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.compact-action {
  font-size:12px!important;
  font-weight:400!important;
  color:#0f6d7c!important;
  white-space:nowrap}
.compact-product-row.coming .compact-action {
  color:var(--orange)!important}
.compact-product-row .image-slot.tiny {
  width:84px!important;
  height:64px!important;
  border-radius:7px!important;
  background:#eef6f8!important}

.product-card .body {
  padding:16px 17px 17px!important}
.product-card h3 {
  font-size:16px!important;
  font-weight:500!important}
.product-card p {
  font-size:14px!important;
  line-height:1.42!important;
  font-weight:400!important}
.product-card.available {
  box-shadow:none!important;
  border-left:3px solid rgba(143,177,91,.75)!important}
.product-card.owned {
  box-shadow:none!important;
  border-left:3px solid var(--primary)!important}
.product-card.coming {
  box-shadow:none!important;
  border-left:3px solid var(--orange)!important}
.product-card.coming .btn[aria-disabled="true"] {
  background:#fff;
  border-color:rgba(231,118,42,.45);
  color:#b75717}

.quick-grid {
  display:grid;
  gap:10px!important}
.quick-link {
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 13px!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  background:#fff!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease!important}
.quick-link:hover {
  background:var(--primary-soft-2)!important;
  border-color:#bddbe1!important;
  transform:translateY(-1px)!important}
.quick-link .title {
  font-weight:500!important;
  font-size:14.5px!important}
.quick-link .desc {
  font-weight:400!important;
  font-size:12.75px!important;
  line-height:1.32!important}
.quick-accent {
  width:4px!important;
  height:34px!important;
  border-radius:999px!important;
  background:var(--primary)!important;
  flex:0 0 auto!important}
.quick-accent.green {
  background:var(--green)!important}
.quick-accent.orange {
  background:var(--orange)!important}

.resource-card {
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.resource-card:hover {
  transform:translateY(-1px);
  border-color:#bddbe1;
  box-shadow:0 10px 20px rgba(16,37,45,.045)}
.resource-card h3 {
  font-weight:500!important}
.resource-card p {
  font-weight:400!important}
.resource-accent.orange {
  background:var(--orange)!important}
.resource-accent.green {
  background:var(--green)!important}

.reflections-layout {
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:18px;
  align-items:start}
.reflection-editor textarea {
  min-height:220px}
.reflection-list {
  display:grid;
  gap:12px}
.reflection-item {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:14px}
.reflection-item h3 {
  font-size:16px;
  font-weight:500;
  margin:0 0 4px}
.reflection-item p {
  margin:0;
  color:var(--muted);
  font-size:13.25px;
  line-height:1.45}
.reflection-date {
  font-size:12px!important;
  color:#748891!important;
  margin:0 0 9px!important}
.reflection-actions {
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap}
.reflection-actions form {
  margin:0}
.nav a:hover,.nav a.active {
  background:#e8f6f8!important;
  color:#0e6473!important}

@media(max-width:1120px) {
  .reflections-layout {
  grid-template-columns:1fr}
.compact-product-row {
  grid-template-columns:80px minmax(0,1fr) auto!important}
.compact-product-row .image-slot.tiny {
  width:80px!important;
  height:62px!important}
}

@media(max-width:860px) {
  .product-card .image-slot {
  aspect-ratio:4/3!important}
.compact-product-row {
  grid-template-columns:78px minmax(0,1fr)!important}
.compact-action {
  grid-column:2/-1!important}
.compact-product-row .image-slot.tiny {
  width:78px!important;
  height:60px!important}
.reflection-item {
  display:block}
.reflection-actions {
  margin-top:12px}
.page-grid-2 {
  grid-template-columns:1fr!important}
}

@media(max-width:520px) {
  .product-card .image-slot {
  aspect-ratio:4/3!important}
.compact-product-row {
  grid-template-columns:74px minmax(0,1fr)!important}
.compact-product-row .image-slot.tiny {
  width:74px!important;
  height:58px!important}
.reflection-editor textarea {
  min-height:180px}
.panel-body {
  padding:14px!important}
.panel-head {
  padding:15px 14px 11px!important}
.container {
  padding-left:12px!important;
  padding-right:12px!important}
}

/* v13 reflection form + admin-managed dashboard cards */

.reflection-form {
  display:grid;
  gap:14px}

.reflection-form label {
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  font-size:13px;
  color:var(--ink);
  font-weight:400;
  align-items:start}

.reflection-form label span {
  font-size:13px;
  font-weight:500;
  color:var(--ink)}

.reflection-form input,.reflection-form textarea,
.admin-form-full input,.admin-form-full select,.admin-form-full textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  padding:10px 11px;
  outline:none;
  box-shadow:none;
  appearance:auto}

.reflection-form textarea,.admin-form-full textarea {
  min-height:220px;
  resize:vertical;
  line-height:1.48}

.reflection-form input:focus,.reflection-form textarea:focus,
.admin-form-full input:focus,.admin-form-full select:focus,.admin-form-full textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(72,155,173,.14)}

.reflection-title-link h3 {
  transition:color .18s ease}
.reflection-title-link:hover h3 {
  color:#0f6d7c;
  text-decoration:underline;
  text-underline-offset:3px}
.reflection-view-panel {
  max-width:880px}
.reflection-full-text {
  white-space:normal;
  color:var(--ink);
  font-size:15px;
  line-height:1.65}
.reflection-item {
  align-items:flex-start}
.reflection-actions .btn.primary {
  background:var(--primary)!important;
  color:#fff!important;
  border-color:var(--primary)!important}

.dashboard-card-panel .panel-head {
  padding-bottom:10px}
.dashboard-card-list {
  display:grid;
  gap:12px;
  padding:14px 16px 16px}
.dashboard-side-card {
  display:block;
  border:1px solid var(--line);
  border-left:4px solid var(--primary);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.dashboard-side-card:hover {
  transform:translateY(-1px);
  border-color:#bddbe1;
  box-shadow:0 10px 20px rgba(16,37,45,.045)}
.dashboard-side-card.green {
  border-left-color:var(--green)}
.dashboard-side-card.orange {
  border-left-color:var(--orange)}
.dashboard-side-image {
  display:block;
  aspect-ratio:16/9;
  background:#eef6f8;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden}
.dashboard-side-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center}
.dashboard-side-copy {
  display:grid;
  gap:3px;
  padding:12px 13px}
.dashboard-side-title {
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  color:var(--ink)}
.dashboard-side-desc {
  font-size:13px;
  line-height:1.38;
  color:var(--muted);
  font-weight:400}
.dashboard-side-action {
  font-size:12.5px;
  color:#0f6d7c;
  font-weight:500;
  margin-top:4px;
  text-decoration:underline;
  text-underline-offset:3px}
.dashboard-side-card.orange .dashboard-side-action {
  color:#b75717}
.dashboard-side-card.green .dashboard-side-action {
  color:#5f7c2d}
.quick-grid {
  display:none!important}
.quick-link {
  display:none!important}

.product-card .image-slot {
  aspect-ratio:16/10!important;
  height:auto!important;
  min-height:0!important;
  background:#eef6f8!important}
.product-card .image-slot.has-image img {
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#eef6f8!important}
.product-card .image-slot::after,.compact-product-row .image-slot::after,.image-slot::after {
  content:none!important;
  display:none!important}
.image-slot.placeholder::after {
  content:none!important;
  display:none!important}
.compact-product-row {
  min-height:0!important}
.compact-desc {
  word-spacing:normal!important;
  letter-spacing:normal!important}

@media(max-width:1120px) {
  .dashboard-card-list {
  grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px) {
  .dashboard-card-list {
  grid-template-columns:1fr}
.reflections-layout {
  grid-template-columns:1fr!important}
.reflection-form textarea {
  min-height:190px}
.reflection-item {
  display:block!important}
.reflection-actions {
  margin-top:12px}
}

/* v14 hard reflection form fix */

.reflection-form-clean {
  display:grid!important;
  gap:16px!important;
  padding:18px!important}

.reflection-field {
  display:grid!important;
  gap:7px!important;
  max-width:760px!important;
  width:100%!important}

.reflection-field label {
  display:block!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:500!important;
  color:var(--ink)!important;
  margin:0!important}

.reflection-field input,.reflection-field textarea {
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--ink)!important;
  padding:11px 12px!important;
  font:inherit!important;
  line-height:1.45!important;
  outline:none!important;
  box-shadow:none!important;
  appearance:auto!important}

.reflection-field input {
  height:42px!important;
  max-width:420px!important}

.reflection-field textarea {
  min-height:240px!important;
  resize:vertical!important;
  max-width:760px!important}

.reflection-field input:focus,.reflection-field textarea:focus {
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(72,155,173,.14)!important}

.reflection-form-clean .form-actions {
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  margin-top:2px!important}

.reflection-view-panel .panel-body {
  padding:18px!important}

.reflection-full-text {
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  padding:18px!important;
  white-space:pre-wrap!important}

@media(max-width:720px) {
  .reflection-form-clean {
  padding:14px!important}
.reflection-field input {
  max-width:none!important}
.reflection-field textarea {
  min-height:210px!important}
.reflection-full-text {
  padding:14px!important}
}

/* v15 Weekly Calls / Call Highlights */

.call-collection-nav {
  position:sticky;
  top:88px;
  align-self:start}
.call-collection-list {
  display:grid;
  gap:9px}
.call-collection-link {
  display:block;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:12px 13px;
  color:var(--ink);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.call-collection-link:hover {
  background:var(--primary-soft-2);
  border-color:#bddbe1;
  transform:translateY(-1px)}
.call-collection-link.active {
  background:#e8f6f8;
  border-color:#bddbe1;
  border-left:4px solid var(--primary)}
.call-collection-link span {
  display:block;
  font-size:14.5px;
  font-weight:500;
  line-height:1.25}
.call-collection-link small {
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
  margin-top:4px;
  font-weight:400}
.call-card-list {
  display:grid;
  gap:12px}
.call-highlight-card {
  display:grid;
  gap:6px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:15px 16px;
  color:var(--ink);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.call-highlight-card:hover {
  transform:translateY(-1px);
  border-color:#bddbe1;
  box-shadow:0 10px 20px rgba(16,37,45,.045)}
.call-highlight-date {
  font-size:12px;
  color:#0f6d7c;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase}
.call-highlight-title {
  font-size:17px;
  font-weight:500;
  line-height:1.25}
.call-highlight-desc {
  font-size:13.5px;
  color:var(--muted);
  line-height:1.45;
  font-weight:400}
.recap-panel {
  max-width:920px}
.recap-body {
  display:grid;
  gap:24px}
.recap-section {
  display:grid;
  gap:10px}
.recap-section h2 {
  font-family:var(--body);
  font-size:18px;
  line-height:1.25;
  margin:0;
  font-weight:500;
  color:var(--ink)}
.recap-section ul {
  margin:0;
  padding-left:1.1rem;
  color:var(--ink)}
.recap-section li {
  margin:.45rem 0;
  line-height:1.55}
.rich-text {
  font-size:15px;
  line-height:1.65;
  color:var(--ink)}
.reframe-list,.practice-list {
  display:grid;
  gap:10px}
.reframe-item,.practice-item {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:13px 14px}
.reframe-item p,.practice-item p {
  margin:0 0 6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  font-weight:400}
.reframe-item p:last-child,.practice-item p:last-child {
  margin-bottom:0}
.reframe-item span {
  color:#0f6d7c;
  font-weight:500}
.practice-item h3 {
  font-size:15px;
  font-weight:500;
  margin:0 0 4px;
  color:var(--ink)}
.latest-call-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:14px 15px;
  color:var(--ink);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.latest-call-card:hover {
  transform:translateY(-1px);
  border-color:#bddbe1;
  box-shadow:0 10px 20px rgba(16,37,45,.045)}
.latest-call-card strong {
  display:block;
  font-size:15.5px;
  font-weight:500;
  line-height:1.3}
.latest-call-card em {
  display:block;
  font-style:normal;
  font-size:13px;
  color:var(--muted);
  line-height:1.38;
  margin-top:3px;
  font-weight:400}
.admin-call-example {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  background:#f8fbfc;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  color:var(--muted);
  overflow:auto}

@media(max-width:1120px) {
  .calls-layout {
  grid-template-columns:1fr!important}
.call-collection-nav {
  position:static}
.latest-call-card {
  align-items:flex-start}
}

@media(max-width:640px) {
  .latest-call-card {
  display:grid}
.call-highlight-title {
  font-size:16px}
.recap-section h2 {
  font-size:17px}
.recap-body {
  gap:20px}
}

/* v18 Weekly Highlights redesign: date-first archive + clean recap article */

.weekly-title {
  max-width:900px}
.weekly-empty-panel {
  max-width:960px}
.weekly-collection-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 16px}
.weekly-collection-tabs a {
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  padding:7px 12px;
  font-size:13px;
  font-weight:400;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.weekly-collection-tabs a:hover {
  background:var(--primary-soft-2);
  border-color:#bddbe1;
  transform:translateY(-1px)}
.weekly-collection-tabs a.active {
  background:var(--primary-soft);
  border-color:#b7dbe2;
  color:#0e6473}
.weekly-archive-panel {
  max-width:980px}
.weekly-archive-head {
  align-items:center}
.weekly-count {
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 10px;
  background:#fff;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  white-space:nowrap}
.weekly-archive-list {
  display:grid;
  padding:0}
.weekly-archive-item {
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:17px 18px;
  border-bottom:1px solid var(--line-soft);
  background:#fff;
  transition:background .18s ease,transform .18s ease}
.weekly-archive-item:last-child {
  border-bottom:0}
.weekly-archive-item:hover {
  background:#fbfefe}
.weekly-date-block {
  width:72px;
  height:72px;
  border:1px solid #bfe0e7;
  border-radius:9px;
  background:linear-gradient(180deg,#f1fbfd,#fff);
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--ink);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease}
.weekly-archive-item:hover .weekly-date-block {
  transform:translateY(-1px);
  border-color:#9ccbd4}
.weekly-date-block .month {
  display:block;
  width:100%;
  background:var(--primary);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:10px;
  font-weight:400;
  line-height:1;
  padding:5px 2px}
.weekly-date-block .day {
  display:block;
  font-family:var(--head);
  font-size:24px;
  line-height:1.1;
  font-weight:400;
  margin-top:2px}
.weekly-date-block .year {
  display:block;
  color:var(--muted);
  font-size:10.5px;
  font-weight:400;
  line-height:1}
.weekly-archive-copy {
  min-width:0}
.weekly-meta-line {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 5px;
  color:var(--muted);
  font-size:12.5px;
  font-weight:400}
.weekly-meta-line span:not(:first-child)::before {
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b7c7cc;
  margin-right:8px;
  vertical-align:middle}
.weekly-archive-copy h3 {
  margin:0 0 4px;
  font-size:17px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.01em}
.weekly-archive-copy h3 a:hover {
  color:#0f6d7c;
  text-decoration:underline;
  text-underline-offset:3px}
.weekly-archive-copy p {
  margin:0;
  color:var(--muted);
  font-size:13.75px;
  line-height:1.5;
  font-weight:400}
.weekly-action {
  white-space:nowrap}
.weekly-detail-shell {
  max-width:920px}
.weekly-detail-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px}
.weekly-admin-badge {
  border:1px solid rgba(231,118,42,.45);
  background:#fff7f1;
  color:#b75717;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:400}
.weekly-detail-article {
  overflow:hidden}
.weekly-detail-header {
  padding:30px 34px 24px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(135deg,#f5fcfd 0%,#fff 70%)}
.weekly-detail-date {
  color:#0f6d7c;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:400;
  margin:0 0 8px}
.weekly-detail-header h1 {
  font-family:var(--head);
  font-size:31px;
  line-height:1.18;
  font-weight:400;
  letter-spacing:-.04em;
  margin:0 0 8px;
  color:var(--ink)}
.weekly-detail-header p {
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  font-weight:400}
.weekly-detail-body {
  padding:30px 34px;
  display:grid;
  gap:28px}
.weekly-detail-section {
  display:grid;
  gap:11px}
.weekly-detail-section h2 {
  font-family:var(--body);
  font-size:18px;
  font-weight:500;
  line-height:1.25;
  margin:0;
  color:var(--ink)}
.weekly-rich-text {
  font-size:15.25px;
  line-height:1.68;
  color:var(--ink);
  max-width:760px}
.weekly-detail-list {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px}
.weekly-detail-list li {
  position:relative;
  padding-left:18px;
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  font-weight:400}
.weekly-detail-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary)}
.weekly-questions-section .weekly-detail-list li::before {
  background:var(--green)}
.weekly-reframe-grid {
  display:grid;
  gap:11px}
.weekly-reframe-card,.weekly-practice-card {
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:14px 15px;
  box-shadow:none}
.weekly-reframe-card {
  border-left:3px solid var(--primary)}
.weekly-reframe-card p,.weekly-practice-card p {
  margin:0 0 7px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  font-weight:400}
.weekly-reframe-card p:last-child,.weekly-practice-card p:last-child {
  margin-bottom:0}
.weekly-reframe-card span {
  color:#0f6d7c;
  font-weight:500}
.weekly-practice-list {
  display:grid;
  gap:11px}
.weekly-practice-card {
  border-left:3px solid var(--green)}
.weekly-practice-card h3 {
  font-size:15.25px;
  font-weight:500;
  line-height:1.25;
  margin:0 0 5px;
  color:var(--ink)}
.weekly-downloads {
  display:grid;
  gap:10px}
.weekly-download {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:13px 14px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.weekly-download:hover {
  background:var(--primary-soft-2);
  border-color:#bddbe1;
  transform:translateY(-1px)}
.weekly-download span {
  font-size:14px;
  font-weight:400;
  color:var(--ink)}
.weekly-download em {
  font-style:normal;
  font-size:12.5px;
  color:#0f6d7c;
  font-weight:500}
.weekly-admin-notes {
  margin-top:18px;
  border-color:rgba(231,118,42,.35)}
.weekly-admin-body {
  padding:22px 24px;
  display:grid;
  gap:18px}
.weekly-admin-body section {
  border:1px solid var(--line-soft);
  border-left:3px solid var(--orange);
  border-radius:9px;
  padding:13px 14px;
  background:#fff}
.weekly-admin-body h3 {
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  margin:0 0 7px;
  color:var(--ink)}
.weekly-admin-body p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  font-weight:400}
.weekly-admin-list {
  margin:0;
  padding-left:1.1rem;
  color:var(--muted);
  font-size:14px;
  line-height:1.5}
.weekly-admin-list li {
  margin:.25rem 0}
.weekly-admin-import textarea {
  min-height:170px}
.weekly-admin-list-panel .weekly-admin-list {
  padding:0;
  display:grid;
  gap:0}
.weekly-admin-row {
  display:grid;
  grid-template-columns:170px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  border-bottom:1px solid var(--line-soft);
  padding:14px 18px;
  background:#fff}
.weekly-admin-row:last-child {
  border-bottom:0}
.weekly-admin-date span {
  display:block;
  font-size:13px;
  color:#0f6d7c;
  font-weight:500}
.weekly-admin-date em {
  display:block;
  font-style:normal;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  margin-top:2px}
.weekly-admin-copy h3 {
  font-size:15.5px;
  font-weight:500;
  line-height:1.25;
  margin:0 0 3px}
.weekly-admin-copy p {
  font-size:12.5px;
  color:var(--muted);
  margin:0;
  font-weight:400}

@media(max-width:900px) {
  .weekly-archive-item {
  grid-template-columns:64px minmax(0,1fr);
  align-items:start}
.weekly-date-block {
  width:60px;
  height:60px}
.weekly-date-block .day {
  font-size:20px}
.weekly-action {
  grid-column:2/-1;
  justify-self:start}
.weekly-detail-header {
  padding:24px 22px 20px}
.weekly-detail-body {
  padding:24px 22px}
.weekly-detail-header h1 {
  font-size:27px}
.weekly-admin-row {
  grid-template-columns:1fr}
.weekly-admin-row .admin-actions {
  justify-content:flex-start}
}

@media(max-width:620px) {
  .weekly-archive-panel {
  border-left:0;
  border-right:0;
  border-radius:0;
  margin-left:-12px;
  margin-right:-12px}
.weekly-archive-head {
  display:block}
.weekly-count {
  margin-top:10px}
.weekly-archive-item {
  grid-template-columns:1fr;
  gap:10px;
  padding:16px 14px}
.weekly-date-block {
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  text-align:left;
  border:0;
  background:transparent}
.weekly-date-block .month {
  width:auto;
  background:var(--primary);
  border-radius:999px;
  padding:4px 8px}
.weekly-date-block .day {
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  margin:0}
.weekly-date-block .year {
  font-size:12px}
.weekly-action {
  grid-column:auto}
.weekly-detail-topline {
  display:block}
.weekly-detail-topline .weekly-admin-badge {
  display:inline-flex;
  margin-top:8px}
.weekly-detail-header h1 {
  font-size:24px}
.weekly-detail-header,.weekly-detail-body {
  padding-left:16px;
  padding-right:16px}
.weekly-rich-text {
  font-size:14.5px}
.weekly-detail-list li {
  font-size:14px}
.weekly-download {
  display:grid;
  gap:6px}
.weekly-admin-body {
  padding:16px}
}


/* ============================================================
   Image-slot empty state (design change)
   No-image product/resource slots get a subtle centered mark
   instead of a bare gradient panel.
   ============================================================ */
.image-slot.placeholder{
  background:linear-gradient(135deg,#dff1f4 0%,#f4f8f9 72%,#eef5f6 100%);
  display:grid;
  place-items:center;
}
.image-slot.placeholder::before{
  content:"";
  position:static;
  inset:auto;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1.5px solid rgba(72,155,173,.40);
  background:radial-gradient(circle at 50% 50%, rgba(72,155,173,.18) 0 4px, transparent 5px);
}
.image-slot.placeholder::after{content:none}
.image-slot.tiny.placeholder::before,
.image-slot.small.placeholder::before{width:22px;height:22px;border-width:1.25px}

/* ============================================================
   v36 targeted fixes: mobile menu, compact highlights, auth, PEACE
   ============================================================ */

.mobile-menu-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:8px;
  min-height:36px;
  padding:7px 11px;
  font-size:13px;
  font-weight:500;
}

.latest-call-compact-panel .panel-body{
  padding:16px 18px!important;
}
.latest-call-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.latest-call-compact h2{
  margin:0 0 3px;
  font-size:18px;
  line-height:1.25;
  font-weight:500;
  color:var(--ink);
}
.latest-call-compact p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.4;
}

@media(max-width:860px){
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .mobile-nav{
    display:none!important;
    position:fixed!important;
    top:58px!important;
    left:0!important;
    right:0!important;
    z-index:70!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 18px 34px rgba(16,37,45,.12)!important;
    padding:10px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
  }
  body.mobile-menu-open .mobile-nav{display:grid!important;}
  .mobile-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    border:1px solid var(--line)!important;
    border-radius:8px!important;
    background:#fff!important;
    color:var(--ink)!important;
    padding:8px 10px!important;
    font-size:13px!important;
    font-weight:500!important;
    text-align:center!important;
    white-space:normal!important;
  }
  .mobile-nav a.active{
    background:var(--primary-soft)!important;
    border-color:#b7dbe2!important;
    color:#0e6473!important;
    box-shadow:inset 3px 0 0 var(--primary)!important;
  }
  .top-actions .help-link{display:none!important;}
  .brand-name{white-space:normal!important;}
  .latest-call-compact{display:grid;gap:12px;}
  .latest-call-compact .btn{width:100%;}
}

@media(max-width:520px){
  .mobile-nav{top:58px!important;grid-template-columns:1fr 1fr!important;}
  .mobile-menu-toggle{min-height:34px;padding:7px 9px;font-size:12.5px;}
}

/* Auth safety: keep logo and form compact even if older CSS leaks through */
.ae-auth-brand-row{display:flex!important;align-items:center!important;gap:11px!important;margin:0 0 18px!important;}
.ae-auth-brand-row img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;flex:0 0 38px!important;}
.ae-auth-brand-row strong{display:block!important;font-family:var(--head)!important;font-size:17px!important;line-height:1.05!important;font-weight:400!important;letter-spacing:-.03em!important;color:var(--ink)!important;}
.ae-auth-brand-row p{margin:3px 0 0!important;font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#0f6d7c!important;font-weight:500!important;}
.ae-check-row{display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;color:var(--muted)!important;font-size:12.75px!important;line-height:1.35!important;}
.ae-check-row input{width:16px!important;height:16px!important;flex:0 0 16px!important;accent-color:var(--primary)!important;}

/* PEACE practice cleanup */
.peace-mobile-hidden{display:block;}
.peace-stage h2 .peace-letter-prefix{display:none!important;}
.peace-kicker{letter-spacing:.05em!important;text-transform:none!important;font-size:12.5px!important;color:#0f6d7c!important;}
.breath-panel{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  text-align:center!important;
  max-width:560px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:18px!important;
}
.breath-visual{
  width:170px!important;
  height:170px!important;
  background:transparent!important;
  border:0!important;
  margin:0 auto!important;
}
.breath-ring{
  width:108px!important;
  height:108px!important;
  border-width:3px!important;
}
.breath-copy strong{font-size:18px!important;}
.breath-text{text-align:center!important;max-width:430px!important;margin:0 auto!important;}
.breath-buttons{justify-content:center!important;}
.breath-buttons .btn{min-width:190px!important;}
@media(max-width:760px){
  .peace-step-panel{display:none!important;}
  .peace-workspace{grid-template-columns:1fr!important;}
  .peace-tool .page-title h1{font-size:23px!important;}
  .peace-stage h2{font-size:21px!important;}
  .breath-buttons{display:grid!important;grid-template-columns:1fr!important;width:100%;max-width:320px;margin:0 auto;}
  .breath-buttons .btn{width:100%!important;min-width:0!important;}
}

@media(max-width:860px){
  .topbar .brand-name br{display:block!important;}
  .topbar .brand-name{line-height:1.02!important;}
}

/* ============================================================
   v37 stability fixes: admin PEACE form, dashboard resources,
   true mobile hamburger menu, PEACE mobile cleanup
   ============================================================ */

/* Topbar/menu: desktop keeps normal sidebar. Hamburger is mobile-only. */
.mobile-menu-toggle{
  display:none!important;
  width:40px!important;
  height:40px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:4px!important;
  cursor:pointer!important;
}
.mobile-menu-toggle span{
  display:block!important;
  width:18px!important;
  height:2px!important;
  border-radius:999px!important;
  background:#fff!important;
  transition:transform .18s ease,opacity .18s ease!important;
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)!important;}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0!important;}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important;}
.brand-name .brand-space{display:inline!important;}

@media(min-width:861px){
  .mobile-menu-toggle{display:none!important;}
  .mobile-nav{display:none!important;}
  .sidebar{display:block!important;}
  .main{margin-left:224px!important;}
  body.mobile-menu-open .mobile-nav{display:none!important;}
}

@media(max-width:860px){
  .sidebar{display:none!important;}
  .main{margin-left:0!important;}
  .mobile-menu-toggle{display:inline-flex!important;}
  .topbar{height:64px!important;min-height:64px!important;padding:9px 12px!important;}
  .app{padding-top:64px!important;}
  .brand-block{max-width:60%!important;min-width:0!important;}
  .brand-block img{width:30px!important;height:30px!important;flex:0 0 30px!important;}
  .brand-name{font-size:15px!important;line-height:1.05!important;white-space:normal!important;letter-spacing:-.03em!important;}
  .secure-line{display:none!important;}
  .top-actions{margin-left:auto!important;gap:8px!important;}
  .top-actions .help-link,.top-actions .avatar{display:none!important;}
  .top-btn{font-size:13px!important;padding:8px 11px!important;border-radius:8px!important;min-height:40px!important;}
  .mobile-nav{
    display:none!important;
    position:fixed!important;
    top:64px!important;
    left:0!important;
    right:0!important;
    z-index:75!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 18px 34px rgba(16,37,45,.14)!important;
    padding:12px!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    overflow:visible!important;
  }
  body.mobile-menu-open .mobile-nav{display:grid!important;}
  .mobile-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    border:1px solid var(--line)!important;
    border-radius:8px!important;
    background:#fff!important;
    color:var(--ink)!important;
    padding:9px 10px!important;
    font-size:13.5px!important;
    font-weight:500!important;
    text-align:center!important;
    white-space:normal!important;
    box-shadow:none!important;
  }
  .mobile-nav a::before{display:none!important;content:none!important;}
  .mobile-nav a.active{
    background:var(--primary-soft)!important;
    border-color:#b7dbe2!important;
    color:#0e6473!important;
    box-shadow:inset 3px 0 0 var(--primary)!important;
  }
}

@media(max-width:420px){
  .brand-name{font-size:14px!important;}
  .brand-block{max-width:54%!important;}
  .top-btn{font-size:12.5px!important;padding:7px 9px!important;}
  .mobile-menu-toggle{width:38px!important;height:38px!important;}
}

/* Dashboard weekly highlights: compact button row, balanced padding. */
.latest-call-button-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:13px 18px!important;
}
.latest-call-button-row h2{
  margin:0!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:500!important;
  color:var(--ink)!important;
}
.latest-call-button-row .btn{white-space:nowrap!important;}
@media(max-width:640px){
  .latest-call-button-row{display:grid!important;grid-template-columns:1fr!important;padding:13px 14px!important;}
  .latest-call-button-row .btn{width:100%!important;}
}

/* Admin PEACE form: make sure the form body is visible and usable. */
.admin-form-full.panel-body,
.panel-body.admin-form-full{
  display:grid!important;
  gap:13px!important;
  padding:18px!important;
}
.admin-form-full label{
  display:grid!important;
  gap:6px!important;
}
.admin-form-full input[type="file"]{
  padding:9px!important;
  background:#fff!important;
}

/* PEACE practice mobile: no horizontal framework strip. Keep the practice simple. */
@media(max-width:980px){
  .peace-workspace{grid-template-columns:1fr!important;}
  .peace-step-panel{display:none!important;}
}
.peace-stage h2 .peace-letter-prefix{display:none!important;}
.breath-panel{
  justify-items:center!important;
  text-align:center!important;
}
.breath-visual{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.breath-ring{
  width:124px!important;
  height:124px!important;
  border-width:3px!important;
}
.breath-copy,
.breath-text,
.breath-buttons{
  text-align:center!important;
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.breath-buttons .btn{min-width:210px!important;}
@media(max-width:760px){
  .peace-tool{padding-top:0!important;}
  .peace-panel{overflow:hidden!important;}
  .peace-stage{padding:18px 16px!important;}
  .peace-progress{padding:14px 16px!important;}
  .peace-stage h2{font-size:22px!important;}
  .peace-lead{font-size:16px!important;line-height:1.5!important;}
  .breath-panel{padding:18px 14px!important;}
  .breath-visual{width:150px!important;height:150px!important;}
  .breath-ring{width:116px!important;height:116px!important;}
  .breath-buttons{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;max-width:320px!important;}
  .breath-buttons .btn{width:100%!important;min-width:0!important;}
}

/* ============================================================
   v38 emergency cleanup: mobile nav closed by default, real
   hamburger button, compact weekly highlights card.
   ============================================================ */
.mobile-menu-toggle{display:none!important;}
@media (min-width:861px){
  .mobile-menu-toggle,.mobile-nav{display:none!important;}
  .sidebar{display:block!important;}
  .main{margin-left:224px!important;}
}
@media (max-width:860px){
  .sidebar{display:none!important;}
  .main{margin-left:0!important;}
  .app{padding-top:64px!important;}
  .topbar{height:64px!important;min-height:64px!important;padding:9px 12px!important;}
  .brand-block{max-width:58%!important;gap:9px!important;}
  .brand-block img{width:30px!important;height:30px!important;flex:0 0 30px!important;}
  .brand-name{font-size:15px!important;line-height:1.05!important;white-space:normal!important;letter-spacing:-.03em!important;}
  .secure-line,.top-actions .help-link,.top-actions .avatar{display:none!important;}
  .top-actions{margin-left:auto!important;gap:8px!important;display:flex!important;align-items:center!important;}
  .top-btn{font-size:13px!important;padding:8px 11px!important;border-radius:8px!important;min-height:40px!important;}
  .mobile-menu-toggle{display:inline-flex!important;width:40px!important;height:40px!important;padding:0!important;border:1px solid rgba(255,255,255,.30)!important;border-radius:8px!important;background:rgba(255,255,255,.08)!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:4px!important;box-shadow:none!important;appearance:none!important;}
  .mobile-menu-toggle span{display:block!important;width:19px!important;height:2px!important;border-radius:999px!important;background:#fff!important;opacity:1!important;}
  .mobile-nav{display:none!important;position:fixed!important;top:64px!important;left:0!important;right:0!important;z-index:999!important;background:#fff!important;border-bottom:1px solid var(--line)!important;box-shadow:0 18px 34px rgba(16,37,45,.16)!important;padding:12px!important;grid-template-columns:1fr 1fr!important;gap:9px!important;overflow:visible!important;}
  body.mobile-menu-open .mobile-nav,.mobile-nav.is-open{display:grid!important;}
  .mobile-nav a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;border:1px solid var(--line)!important;border-radius:8px!important;background:#fff!important;color:var(--ink)!important;padding:9px 10px!important;font-size:13.5px!important;font-weight:500!important;text-align:center!important;white-space:normal!important;box-shadow:none!important;}
  .mobile-nav a::before{display:none!important;content:none!important;}
  .mobile-nav a.active{background:var(--primary-soft)!important;border-color:#b7dbe2!important;color:#0e6473!important;box-shadow:inset 3px 0 0 var(--primary)!important;}
}
.dashboard-weekly-access .latest-call-button-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:14px 18px!important;}
.dashboard-weekly-access h2{margin:0!important;font-size:18px!important;line-height:1.2!important;font-family:var(--body)!important;font-weight:500!important;letter-spacing:0!important;}
.dashboard-weekly-access .btn{white-space:nowrap!important;}
@media(max-width:640px){.dashboard-weekly-access .latest-call-button-row{display:grid!important;grid-template-columns:1fr!important;padding:14px!important;}.dashboard-weekly-access .btn{width:100%!important;}}

/* v39 small requested cleanup: hide top Open library button on mobile only; remove spacing reserved for weekly highlight action. */
.latest-call-title-only{
  display:block!important;
  padding:14px 18px!important;
}
.latest-call-title-only h2{
  margin:0!important;
}
@media(max-width:860px){
  .top-actions .top-btn{
    display:none!important;
  }
}
@media(max-width:640px){
  .latest-call-title-only{
    padding:14px!important;
  }
}


/* ============================================================
   v40 requested cleanup: remove dashboard weekly highlight box
   and hide Open library in the topbar on mobile only.
   ============================================================ */
.dashboard-weekly-access{display:none!important;}
@media(max-width:860px){
  .topbar .desktop-library-link,
  .topbar a.top-btn[href$="library.php"],
  .topbar a.top-btn[href*="library.php"]{
    display:none!important;
    visibility:hidden!important;
  }
}
@media(min-width:861px){
  .topbar .desktop-library-link{
    display:inline-flex!important;
    visibility:visible!important;
  }
}

/* ============================================================
   AR REDESIGN LAYER — appended override (additive only).
   Carries the approved dashboard look. Safe to remove this block
   to revert. Does not alter any earlier rule.
   ============================================================ */
.page-title h1,.panel-head h2,.product-card h3,.note-card h3,.continue-card h3{
  font-family:'Libre Baskerville',Georgia,serif!important;font-weight:700!important;color:#111!important;}
.page-title h1{font-size:clamp(23px,3vw,30px)!important;}

/* hero: first category panel styled as the teal hero is handled in dashboard.php.
   Tools/Courses card polish: */
.product-card{border-radius:9px!important;}
.product-grid .product-card .image-slot{height:120px!important;background:var(--primary-soft)!important;}
.product-card .body{padding:16px 17px 17px!important;}
.product-card h3{font-size:17px!important;margin-bottom:6px!important;}
.product-card p{font-size:13px!important;}

/* AR hero block (used by dashboard restyle) */
.ar-hero{position:relative;overflow:hidden;border-radius:9px;background:#3d8593;min-height:200px;display:flex;align-items:center;padding:clamp(24px,3vw,36px);margin-bottom:18px;text-decoration:none}
.ar-hero .ar-hero-photo{position:absolute;top:0;right:0;height:100%;width:46%;z-index:1;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.ar-hero .ar-hero-deco{position:absolute;inset:0;z-index:1;opacity:.5;background:radial-gradient(circle at 62% 120%,rgba(255,255,255,.10) 0 22%,transparent 22%),radial-gradient(circle at 80% -10%,rgba(255,255,255,.08) 0 18%,transparent 18%)}
.ar-hero-copy{position:relative;z-index:2;max-width:56%}
.ar-hero-copy h2{font-family:'Libre Baskerville',serif!important;font-weight:700;color:#fff!important;font-size:clamp(20px,2.3vw,25px);margin:0 0 11px}
.ar-hero-copy p{color:rgba(255,255,255,.94);font-size:14.5px;margin:0 0 18px;max-width:32em}
.ar-hero-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#2f7e8f;border-radius:9px;padding:11px 20px;font-weight:600;font-size:14px}
.ar-kicker{font-size:13px;color:var(--muted);font-weight:600;margin:0 2px 12px}
@media(max-width:860px){.ar-hero .ar-hero-photo{display:none}.ar-hero-copy{max-width:100%}}

/* (5) Force Libre Baskerville on ALL headings so stray non-serif heads can't slip through */
h1,h2,h3,h4,h5,.panel-head h2,.section-head h2,.form-section h2,.form-section h3,.field-group-title,.tool-section h2,.tool-section h3{
  font-family:'Libre Baskerville',Georgia,serif!important;}

/* (4) Card titles: slightly smaller + lighter than the heavy 700 */
.product-card h3{font-size:16px!important;font-weight:400!important;letter-spacing:-.005em!important;}
.continue-card h3{font-weight:400!important;}

/* (3) Even spacing between dashboard panels + tighter Continue card */
.main-stack{display:flex!important;flex-direction:column!important;gap:18px!important;}
.main-stack .panel{margin:0!important;}
.continue-card{padding:14px 18px!important;}
.continue-card .image-slot{width:72px!important;height:56px!important;}

/* (2) Image aspect ratio: keep card images at a consistent 16:10, cover, no squish */
.product-grid .product-card .image-slot{height:0!important;padding-bottom:58%!important;position:relative!important;background:var(--primary-soft)!important;}
.product-grid .product-card .image-slot.has-image img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;}

/* (1) Mobile: list-row images bigger relative to text */
@media(max-width:640px){
  .ar-tools .card-grid{display:flex!important;flex-direction:column!important;gap:10px!important}
  .ar-tools .product-card{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;padding:12px 14px!important;position:relative}
  .ar-tools .product-card .image-slot{height:0!important;width:72px!important;flex:0 0 72px!important;padding-bottom:72px!important;border-radius:9px!important}
  .ar-tools .product-card .image-slot.has-image img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .ar-tools .product-card .body{padding:0!important;flex:1}
  .ar-tools .product-card h3{font-size:15px!important}
  .ar-courses .card-grid{display:flex!important;gap:14px!important;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .ar-courses .product-card{flex:0 0 210px;scroll-snap-align:start}
}


/* ===== AR fixes round 3 ===== */
/* (1) Mobile list-row: bigger image, proportionate to text */
@media(max-width:640px){
  .ar-tools .product-card .image-slot{width:86px!important;flex:0 0 86px!important;padding-bottom:86px!important;}
}
/* (2) Continue card: smaller, tighter, less heavy title */
.continue-card{padding:12px 16px!important;gap:14px!important;}
.continue-card h3{font-size:16px!important;font-weight:400!important;}
.continue-card .image-slot{width:64px!important;height:50px!important;}
.continue-card .fine{font-size:12px!important;margin:0 0 1px!important;}
.continue-card p{font-size:13px!important;margin:0!important;}
.continue-card .progress{margin-top:8px!important;}
/* trim the panel head on that section so it doesn't add a tall block */
.main-stack .panel:first-child .panel-head{padding:14px 18px 10px!important;}
.main-stack .panel:first-child .panel-head h2{font-size:17px!important;}

/* (3) Inner category pages: smaller cards in a 2-up grid + centered with right rail */
.ar-catpage .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;}
.ar-catpage .product-card .image-slot{height:0!important;padding-bottom:50%!important;}
.ar-catpage .product-card h3{font-size:16px!important;font-weight:400!important;}
.ar-catpage .product-card .body{padding:14px 15px 15px!important;}
@media(max-width:980px){.ar-catpage .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:560px){.ar-catpage .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}.ar-catpage .product-card .body{padding:10px 11px 12px!important;}.ar-catpage .product-card h3{font-size:14px!important;}}


/* ===== AR continue-card -> compact single row ===== */
.ar-continue{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px}
.ar-continue .image-slot{width:56px!important;height:44px!important;border-radius:8px;flex:0 0 56px}
.ar-continue-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ar-continue-copy .fine{font-size:11.5px;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.05em}
.ar-continue-copy h3{font-family:'Libre Baskerville',serif!important;font-weight:400!important;font-size:16px!important;margin:0!important}
.ar-continue-copy .progress{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:3px;max-width:340px}
.ar-continue-copy .progress span{display:block;height:100%;background:var(--primary);width:35%}
.ar-continue .btn.primary{flex:0 0 auto}
@media(max-width:560px){.ar-continue{flex-wrap:wrap}.ar-continue .btn.primary{width:100%}}


/* ===== AR round 4: background color discipline + lesson callout ===== */
/* Collapse the scattered pale tints to the page background; standouts only via explicit classes. */
.lesson-content blockquote,
.lesson-intro,.intro-box,.highlight-box,
.panel .subtle,.tool-section .note,.info-box,
.dashboard-card-panel,.compact-product-row{
  background:var(--bg)!important;
}
/* lesson callout (image 2): more vertical breathing room, smaller/lighter heading, smaller tighter body */
.lesson-content blockquote{
  background:var(--bg)!important;border-left:4px solid var(--primary)!important;
  margin:30px 0!important;padding:22px 24px!important;color:var(--ink)!important;border-radius:8px!important;
}
.lesson-content blockquote h2,.lesson-content blockquote h3,.lesson-content blockquote strong:first-child{
  font-size:18px!important;font-weight:600!important;margin:0 0 12px!important;
}
.lesson-content blockquote p,.lesson-content blockquote li{
  font-size:14px!important;line-height:1.45!important;
}
.lesson-content blockquote ul{margin:0!important}
.lesson-content blockquote li{margin:4px 0!important}

/* Serif headings on inner pages: heavier-than-normal but NOT full bold */
.lesson-content h2,.lesson-content h3,.tab-pane h2,.tab-pane h3,
.panel-head h2,.dl-subgroup-title,.section-head h2{
  font-weight:600!important;
}
/* keep the big page title strong, everything else eased off */
.page-title h1{font-weight:700!important;}


/* ============================================================
   ENHANCEMENT LAYER (v53)
   Loads last on purpose. Refines focus, depth, spacing, type,
   empty states, placeholders, and mobile touch targets without
   changing the established identity (teal / Libre Baskerville /
   Figtree / white panels). Safe to remove as a block.
   ============================================================ */

:root{
  /* slightly deeper muted grey: small captions/subtitles now clear AA */
  --muted:#536870;
  /* layered, softer elevation reads more refined than one flat shadow */
  --shadow:0 1px 2px rgba(16,37,45,.04), 0 12px 28px rgba(16,37,45,.06);
  --shadow-lift:0 2px 6px rgba(16,37,45,.06), 0 18px 40px rgba(16,37,45,.10);
  --ease:cubic-bezier(.2,.7,.3,1);
}

body{ line-height:1.5; }

/* --- Visible keyboard focus everywhere (keyboard only, not mouse) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav a:focus-visible,
.mobile-nav a:focus-visible,
.link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--primary) !important;
  outline-offset:2px !important;
  border-radius:7px;
}
/* soft halo on text fields so focus feels considered, not harsh */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{
  outline:none !important;
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primary-soft) !important;
}

/* --- Depth: gentle lift on interactive surfaces --- */
.panel{ transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.product-card{ transition:box-shadow .22s var(--ease), transform .22s var(--ease) !important; }
.product-card:hover,
.dashboard-side-card[href]:hover{ box-shadow:var(--shadow-lift) !important; }

/* --- Buttons: real pressed state + harmonized radius --- */
.btn{ border-radius:8px; transition:transform .15s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn.primary{ box-shadow:0 4px 12px rgba(72,155,173,.22); }
.btn.primary:hover{ box-shadow:0 6px 16px rgba(72,155,173,.30); }
.field input, .field select, .field textarea{ border-radius:8px; }

/* --- A little more breathing room up top --- */
.page-title{ margin-bottom:24px; }
.page-title h1{ font-size:30px; }

/* --- Hero headline now that real 700 is loaded: refine, don't fake --- */
.ar-hero-copy h2{ letter-spacing:-.01em; line-height:1.14; }

/* --- Placeholder image slots: a quiet brand mark instead of blank --- */
.image-slot.placeholder,
.product-card .image-slot:not(.has-image){
  background:
    radial-gradient(circle at 50% 46%, rgba(72,155,173,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 46%, transparent 0 13px, rgba(72,155,173,.16) 13px 15px, transparent 16px),
    linear-gradient(135deg,#e3f1f4 0%, #eef5f6 60%, #f4f8f9 100%) !important;
}

/* --- Empty states: an invitation to act, not a dead box --- */
.empty-state{
  border:1px solid var(--line-soft);
  border-left:3px solid var(--primary);
  background:linear-gradient(180deg,#fbfdfe,#fff);
  padding:18px 20px;
  border-radius:var(--radius);
  line-height:1.5;
}

/* --- Mobile nav: fade the right edge so people know it scrolls --- */
@media (max-width:860px){
  .mobile-nav{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px), transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px), transparent);
  }
}

/* --- Comfortable touch targets on phones --- */
@media (max-width:860px){
  .btn{ min-height:42px; padding:10px 15px; }
  .btn.small{ min-height:38px; }
  .mobile-nav a{ padding:9px 14px; }
  .nav a{ padding:11px 12px; }
}


/* ============================================================
   ENHANCEMENT LAYER v53 — part 2: nav icons + finishing touches
   ============================================================ */

/* Retire the grey dot; real icons take its place */
.nav a::before{ display:none !important; content:none !important; }

.nav a{ gap:11px; }
.nav .navico{
  width:18px; height:18px; flex:0 0 auto;
  color:#90a6ad;                       /* resting: quiet grey-teal */
  transition:color .18s var(--ease), transform .18s var(--ease);
}
.nav a:hover .navico{ color:var(--primary); transform:translateX(1px); }
.nav a.active .navico{ color:var(--primary); }

/* Icons belong in the sidebar; mobile pills stay clean text */
.mobile-nav .navico{ display:none !important; }

/* Avatar: a soft branded chip instead of a flat white circle */
.avatar{
  background:linear-gradient(150deg,#eafafc,#d2eef2) !important;
  color:#0e6473 !important;
  font-weight:600 !important;
  box-shadow:inset 0 0 0 1px rgba(72,155,173,.4);
}

/* Branded text selection */
::selection{ background:rgba(72,155,173,.22); color:var(--ink); }

/* Slim, quiet scrollbars on desktop (premium detail, no layout shift) */
@media (min-width:861px){
  *{ scrollbar-width:thin; scrollbar-color:#bcd4da transparent; }
  *::-webkit-scrollbar{ width:11px; height:11px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{
    background:#c3d8dd; border-radius:99px;
    border:3px solid var(--bg); background-clip:padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background:#a6c5cc; }
}