/* MEMORISE brand palette — sober, archival greige.
   Warm neutral gray + beige with a muted bronze accent. Montserrat headings.
   Same design system as the AI-CDSS docs, restrained for a memorial context. */

[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #6B6457;  /* greige */
  --md-primary-fg-color--light: #847C6D;
  --md-primary-fg-color--dark:  #423D34;  /* dark taupe */
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:              #A8895B;  /* muted bronze */
  --md-accent-fg-color--transparent: rgba(168, 137, 91, 0.1);
}

/* Light scheme: warm beige page tint, bronze links. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color:           #8A6F3F;
  --md-default-bg-color:          #FAF8F4;  /* faint parchment */
  --md-code-bg-color:             #F2EFE9;
  --md-footer-bg-color:           #423D34;
  --md-footer-bg-color--dark:     #322E27;
}

/* Dark scheme: charcoal-brown, soft sand links. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #8A8273;
  --md-primary-fg-color--dark:  #2A2823;
  --md-typeset-a-color:         #CDB78C;
  --md-default-bg-color:        #1C1B18;
  --md-default-fg-color:        #E8E4DC;
  --md-code-bg-color:           #26241F;
}

/* Keep the top tab bar lean: hide the three content areas from the top menu.
   They stay reachable from the home cards and the left sidebar. */
.md-tabs__item:has(> a[href*="user-representation/"]),
.md-tabs__item:has(> a[href*="content-representation/"]),
.md-tabs__item:has(> a[href*="ai-engine/"]) {
  display: none;
}

/* Montserrat headings, weighted 600 like the brand diagrams. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-typeset h1 { color: var(--md-primary-fg-color--dark); }

/* Center Mermaid diagrams and scale them down. */
.md-typeset .mermaid {
  text-align: center;
}
.md-typeset .mermaid svg {
  display: block;
  margin: 0 auto;
  max-width: min(100%, 560px);
  max-height: 420px;
  height: auto;
}

/* Keep screenshots and figures reasonable on a 1080p laptop. */
.md-typeset figure { margin: 1.2rem auto; text-align: center; }
.md-typeset figure img,
.md-typeset p > img {
  display: block;
  margin: 0 auto;
  max-width: min(100%, 620px);
  max-height: 400px;
  height: auto;
  width: auto;
}
.md-typeset figure figcaption {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  max-width: 620px;
  margin: 0.4rem auto 0;
}

/* Layout: wider readable body, narrower left nav. Desktop only. */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 72rem; }
  .md-sidebar--primary { width: 11rem; }
}

/* Grid cards: soft greige border + lift on hover, echoing archival panels. */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border: 1px solid #E0D8C9;
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: #A8895B;
  box-shadow: 0 4px 16px rgba(107, 100, 87, 0.15);
  transform: translateY(-2px);
}

/* HTTP method badges for the REST reference tables. */
.http-method {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 0.3rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #fff;
}
.http-get    { background: #5E7355; }  /* sage */
.http-post   { background: #4F6276; }  /* slate blue */
.http-put    { background: #A8895B; }  /* bronze */
.http-delete { background: #9C5B4F; }  /* muted brick */

/* Denser data-model tables. */
.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
}

/* Whole-row clickable tables (rows with a link). */
.md-typeset table tbody tr.row-link {
  cursor: pointer;
  transition: background-color .15s;
}
.md-typeset table tbody tr.row-link:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* ---- Home area cards with animated SVGs ---- */
.md-typeset .area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0 2rem;
}
.md-typeset .area-wide { grid-column: 1 / -1; }
@media (max-width: 50em) {
  .md-typeset .area-grid { grid-template-columns: 1fr; }
}

.md-typeset .area-card {
  display: block;
  border: 1px solid #E0D8C9;
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: inherit;
  background: var(--md-default-bg-color);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.md-typeset .area-card:hover {
  border-color: #A8895B;
  box-shadow: 0 8px 26px rgba(107, 100, 87, .16);
  transform: translateY(-3px);
}
.md-typeset .area-card h3 {
  margin: .55rem 0 .35rem;
  font-weight: 600;
  color: var(--md-primary-fg-color--dark);
}
.md-typeset .area-card p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}
[data-md-color-scheme="slate"] .md-typeset .area-card { border-color: #3A372F; }
[data-md-color-scheme="slate"] .md-typeset .area-card:hover { border-color: #CDB78C; }
[data-md-color-scheme="slate"] .md-typeset .area-card h3 { color: #CDB78C; }

/* Card body wrapper + call-to-action. */
.md-typeset .area-card .area-cta {
  display: inline-block;
  margin-top: .7rem;
  font-weight: 600;
  font-size: .78rem;
  color: var(--md-typeset-a-color);
}
.md-typeset .area-card:hover .area-cta { text-decoration: underline; }

/* Full-width AI Engine card: icon left, text right. */
.md-typeset .area-wide {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.md-typeset .area-wide .area-ico { flex: 0 0 auto; }
.md-typeset .area-wide .area-body { flex: 1; }

/* SVG icon palette (greige / bronze, theme-aware). */
.area-ico { width: 60px; height: 60px; display: block; }
.area-ico .stroke { stroke: #6B6457; }
.area-ico .accent { stroke: #A8895B; fill: none; }
.area-ico .fillc  { fill: #A8895B; }
[data-md-color-scheme="slate"] .area-ico .stroke { stroke: #A89F8E; }
[data-md-color-scheme="slate"] .area-ico .accent { stroke: #CDB78C; }
[data-md-color-scheme="slate"] .area-ico .fillc  { fill: #CDB78C; }

@keyframes ar-pulse { 0%,100%{ opacity:.4; transform:scale(.82) } 50%{ opacity:1; transform:scale(1) } }
@keyframes ar-flow  { 0%{ transform:translateX(-12px); opacity:0 } 35%{ opacity:1 } 100%{ transform:translateX(0); opacity:0 } }
@keyframes ar-draw  { from{ stroke-dashoffset:42 } to{ stroke-dashoffset:0 } }
@keyframes ar-spin  { to { transform: rotate(360deg) } }

.ar-user .dot { animation: ar-pulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ar-user .sig { animation: ar-flow 2.2s ease-in-out infinite; transform-box: fill-box; }
.ar-user .sig:nth-child(2){ animation-delay:.45s; }
.ar-user .sig:nth-child(3){ animation-delay:.9s; }

.ar-content .node { animation: ar-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ar-content .node:nth-child(2){ animation-delay:.3s; }
.ar-content .node:nth-child(3){ animation-delay:.6s; }
.ar-content .node:nth-child(4){ animation-delay:.9s; }
.ar-content .node:nth-child(5){ animation-delay:1.2s; }
.ar-content .edge { stroke-dasharray: 42; stroke-dashoffset: 42; animation: ar-draw 1.8s ease-in-out infinite alternate; }
.ar-content .edge:nth-child(2){ animation-delay:.2s; }
.ar-content .edge:nth-child(3){ animation-delay:.4s; }
.ar-content .edge:nth-child(4){ animation-delay:.6s; }

.ar-engine .ring { transform-box: fill-box; transform-origin: center; animation: ar-spin 9s linear infinite; }
.ar-engine .core { transform-box: fill-box; transform-origin: center; animation: ar-pulse 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .area-ico * { animation: none !important; }
}