/* The Living Majlis card table — Diwan layout (PRD §5, D-3).
 * Loaded by both the tailnet UI (hermes-voice/web/static, symlinked) and
 * the public majlis-talk site — this file, cards.js, layouts.js, cast.js,
 * and table.js are the ONE shared frontend (PRD §6.3). No agent names,
 * colors, or domains are hardcoded anywhere in here or the JS — everything
 * renders from the /cast snapshot + agent.json's `card` block.
 */
/* Palette = the HOUSE DESIGN GUIDE tokens (majlis-vault/20-design/
 * design-guide.html — canonical; any surface that doesn't match it is
 * wrong). Dark ground #0E2B2A, paper text, teal structure, copper as the
 * single accent (≤5%, never a field). --mt-brass keeps its var NAME for
 * compatibility but its VALUE is guide copper. */
.mt-root {
  --mt-ground: #0E2B2A;
  --mt-ground-deep: #082827;
  --mt-surface: #0D3B3A;
  --mt-surface-2: #0D3B3A;
  --mt-line: #155A58;
  --mt-ink: #F7EFDE;
  --mt-ink-dim: #3E7B78;
  --mt-brass: #B0722C;
  --mt-brass-dim: #8F5A1E;
  --mt-human: #EFE2C6;
  --mt-danger: #D07A6A;
  position: relative;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--mt-ink);
}
@media (prefers-color-scheme: light) {
  .mt-root { --mt-ground: #F7EFDE; --mt-ground-deep: #EFE2C6; --mt-surface: #F7EFDE;
             --mt-surface-2: #EFE2C6; --mt-line: #D8C69E; --mt-ink: #0D3B3A;
             --mt-ink-dim: #3E7B78; --mt-human: #082827; }
}
/* an explicit host data-theme must beat the system preference, both ways */
:root[data-theme="light"] .mt-root {
  --mt-ground: #F7EFDE; --mt-ground-deep: #EFE2C6; --mt-surface: #F7EFDE;
  --mt-surface-2: #EFE2C6; --mt-line: #D8C69E; --mt-ink: #0D3B3A;
  --mt-ink-dim: #3E7B78; --mt-human: #082827;
}
:root[data-theme="dark"] .mt-root {
  --mt-ground: #0E2B2A; --mt-ground-deep: #082827; --mt-surface: #0D3B3A;
  --mt-surface-2: #0D3B3A; --mt-line: #155A58; --mt-ink: #F7EFDE;
  --mt-ink-dim: #3E7B78; --mt-human: #EFE2C6;
}
.mt-root * { box-sizing: border-box; }

/* UI icons (NS.icons, cards.js): line icons in currentColor — buttons
 * wear these instead of emoji */
.mt-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.mt-ico:only-child { margin-right: 0; }

/* The ground (design-overhaul PRD §3.1 + guide §04): a mashrabiya
 * shade-screen — one static SVG tile, applied as a MASK so the linework
 * flips with the theme (cream on dark, ink on paper). table.js puts one
 * of these classes on the HOST's <body> (localStorage "majlis-ground";
 * DEFAULT = the guide's lattice, 48px/1px/16%). Fixed, behind everything
 * (z-index -1), never intercepts input, zero runtime cost. */
/* --mt-tile-* vars are the DEV TUNING seam (drawer → Developer → sliders,
 * per-browser): the fallbacks here are the shipped defaults. */
.mt-ground-lattice::before, .mt-ground-star::before, .mt-ground-girih::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  /* fallbacks = Marcus's live-tuned defaults (2026-07-23): 33% / 80px
   * paper linework on the sage page ground (#B3C7A9, host body) */
  background-color: var(--mt-tile-color, #F7EFDE);
  opacity: var(--mt-tile-opacity, .33);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: var(--mt-tile-size, 80px) var(--mt-tile-size, 80px);
  mask-size: var(--mt-tile-size, 80px) var(--mt-tile-size, 80px);
}
@media (prefers-color-scheme: light) {
  .mt-ground-lattice::before, .mt-ground-star::before, .mt-ground-girih::before {
    background-color: var(--mt-tile-color, #0D3B3A);
  }
}
/* THE lattice (guide §04, canonical geometry): nested rotated squares,
 * 48px tile, 1px stroke — "geometry that once cooled a window". Exact
 * paths from the guide's --lattice token. The guide's 16% is for 8mm
 * BANDS; as a full-page ground it sits at 6% so text stays sovereign
 * (PRD §0 records this reading). */
.mt-ground-lattice::before {
  opacity: var(--mt-tile-opacity, .12); /* 6% read as invisible (Marcus) */
  -webkit-mask-size: var(--mt-tile-size, 48px) var(--mt-tile-size, 48px);
  mask-size: var(--mt-tile-size, 48px) var(--mt-tile-size, 48px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z'/%3E%3Cpath d='M24 12 L36 24 L24 36 L12 24 Z'/%3E%3Cpath d='M0 0 L12 12 M48 0 L36 12 M0 48 L12 36 M48 48 L36 36'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z'/%3E%3Cpath d='M24 12 L36 24 L24 36 L12 24 Z'/%3E%3Cpath d='M0 0 L12 12 M48 0 L36 12 M0 48 L12 36 M48 48 L36 36'/%3E%3C/g%3E%3C/svg%3E");
}
/* The light (design-overhaul PRD §3.2): an ambient vignette that DRIFTS to
 * whoever holds the floor — never snaps. Hue shifts only for the two
 * ritual states (D-3): warm amber while a jinn is channeled, moonlit
 * silver while a shura is open. table.js sets the three custom props on
 * <body>; @property registration is what makes them transitionable. */
@property --mt-glow-x { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
@property --mt-glow-y { syntax: "<length-percentage>"; inherits: true; initial-value: 30%; }
@property --mt-glow-c { syntax: "<color>"; inherits: true; initial-value: rgba(62, 123, 120, 0.07); }
.mt-vignette {
  transition: --mt-glow-x .6s ease, --mt-glow-y .6s ease, --mt-glow-c .8s ease;
}
@media (prefers-reduced-motion: reduce) { .mt-vignette { transition: none; } }
.mt-vignette::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(640px 460px at var(--mt-glow-x, 50%) var(--mt-glow-y, 30%),
              var(--mt-glow-c, rgba(62, 123, 120, 0.07)) 0%, transparent 70%);
}

/* project viewer: rendered markdown + the header Download button */
.mt-proj-dlbtn {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  flex: none; cursor: pointer; text-decoration: none;
  font-size: .74rem; color: var(--mt-ink);
  background: var(--mt-surface); border: 1px solid var(--mt-line);
  border-radius: 8px; padding: 4px 10px;
}
.mt-proj-dlbtn:hover { border-color: var(--mt-brass-dim); }
.mt-projmd { font-size: .86rem; line-height: 1.6; }
.mt-projmd h2, .mt-projmd h3, .mt-projmd h4, .mt-projmd h5 {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400;
  color: var(--mt-ink); margin: 14px 0 6px; letter-spacing: .02em;
}
.mt-projmd h2 { font-size: 1.18rem; }
.mt-projmd h3 { font-size: 1.02rem; }
.mt-projmd h4, .mt-projmd h5 { font-size: .92rem; color: var(--mt-brass); }
.mt-projmd p { margin: 6px 0; }
.mt-projmd a { color: var(--mt-brass); }
.mt-projmd code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .82em;
  background: var(--mt-ground-deep); padding: 1px 5px; border-radius: 4px;
}
.mt-projmd pre {
  background: var(--mt-ground-deep); border: 1px solid var(--mt-line);
  border-radius: 8px; padding: 10px 12px; overflow-x: auto;
}
.mt-projmd pre code { background: none; padding: 0; }
.mt-projmd ul, .mt-projmd ol { margin: 6px 0; padding-left: 22px; }
.mt-projmd li { margin: 3px 0; }
.mt-projmd li::marker { color: var(--mt-brass-dim); }
.mt-projmd blockquote {
  border-left: 2px solid var(--mt-brass-dim); margin: 8px 0;
  padding: 2px 12px; color: var(--mt-ink-dim);
}
.mt-projmd hr { border: 0; border-top: 1px solid var(--mt-line); margin: 12px 0; }
.mt-projmd table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: .82rem; }
.mt-projmd th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mt-brass);
  text-align: left;
}
.mt-projmd th, .mt-projmd td {
  border-bottom: 1px solid var(--mt-line); padding: 4px 8px; vertical-align: top;
}

/* the state/gate strip (design-overhaul PRD §3.4): ONE line in the band
 * between stage and transcript — what state, what just happened. Not a
 * dashboard: no kanban, no agent grid. */
.mt-strip[hidden] { display: none; } /* display:flex would beat [hidden] */
.mt-strip {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .08em;
  color: var(--mt-ink-dim);
  white-space: nowrap; overflow: hidden;
  padding: 2px 12px; min-height: 1.2em;
}
.mt-strip b { color: var(--mt-brass); font-weight: 600; text-transform: uppercase; flex: none; }
.mt-strip span { overflow: hidden; text-overflow: ellipsis; }

/* eight-fold star (khatam): two overlapped squares at each grid point */
.mt-ground-star::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cg id='s' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='-32' y='-32' width='64' height='64'/%3E%3Crect x='-32' y='-32' width='64' height='64' transform='rotate(45)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(0,0)'/%3E%3Cuse href='%23s' transform='translate(240,0)'/%3E%3Cuse href='%23s' transform='translate(0,240)'/%3E%3Cuse href='%23s' transform='translate(240,240)'/%3E%3Cuse href='%23s' transform='translate(120,120)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cg id='s' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='-32' y='-32' width='64' height='64'/%3E%3Crect x='-32' y='-32' width='64' height='64' transform='rotate(45)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(0,0)'/%3E%3Cuse href='%23s' transform='translate(240,0)'/%3E%3Cuse href='%23s' transform='translate(0,240)'/%3E%3Cuse href='%23s' transform='translate(240,240)'/%3E%3Cuse href='%23s' transform='translate(120,120)'/%3E%3C/svg%3E");
}
/* girih lattice: truncated-square strapwork (octagons + gap squares) */
.mt-ground-girih::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpolygon id='o' points='60,24.85 24.85,60 -24.85,60 -60,24.85 -60,-24.85 -24.85,-60 24.85,-60 60,-24.85' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/defs%3E%3Cuse href='%23o' transform='translate(60,60)'/%3E%3Cuse href='%23o' transform='translate(180,60)'/%3E%3Cuse href='%23o' transform='translate(60,180)'/%3E%3Cuse href='%23o' transform='translate(180,180)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpolygon id='o' points='60,24.85 24.85,60 -24.85,60 -60,24.85 -60,-24.85 -24.85,-60 24.85,-60 60,-24.85' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/defs%3E%3Cuse href='%23o' transform='translate(60,60)'/%3E%3Cuse href='%23o' transform='translate(180,60)'/%3E%3Cuse href='%23o' transform='translate(60,180)'/%3E%3Cuse href='%23o' transform='translate(180,180)'/%3E%3C/svg%3E");
}

.mt-stage {
  position: relative;
  width: 100%;
  height: 270px;   /* same-size fan + HEADROOM: a speaking card grows and
                      lifts ~30px — it must stay inside the stage, or the
                      sticky header clips it (Marcus, 2026-07-23) */
  min-height: 240px;
}
@media (max-width: 640px) { .mt-stage { height: 250px; } }

.mt-card {
  position: absolute; left: 50%; top: 50%;
  width: 112px; padding: 8px 8px 9px;
  background: var(--mt-surface); /* flat matte (guide: no gradients) */
  border: 1px solid var(--mt-line); border-radius: 10px;
  text-align: center; user-select: none; cursor: pointer;
  transition: transform .8s cubic-bezier(.22,1,.3,1), opacity .5s, box-shadow .5s, border-color .5s;
  will-change: transform;
}
.mt-card:hover {
  /* a quiet acknowledgement, not a glow — the accent tints the frame and
     nothing else (hover was shouting; Marcus, 2026-07-23) */
  border-color: color-mix(in srgb, var(--mt-accent, #ccc) 40%, var(--mt-line));
  box-shadow: 0 3px 10px -7px rgba(4, 24, 23, .35);
  z-index: 25; /* an eclipsed seat surfaces on hover */
}
.mt-card.called {
  border-color: var(--mt-brass);
  box-shadow: 0 0 0 1px var(--mt-brass), 0 0 22px -4px color-mix(in srgb, var(--mt-brass) 60%, transparent);
}
.mt-card.thinking { border-color: color-mix(in srgb, var(--mt-brass) 55%, var(--mt-line)); }
/* a PRESENT seat is at the table (locked presence, 2026-07-30): a steady
   lit rim in the seat's own accent + a seated mark by the name. Quieter
   than speaking/called — presence is a state, not an event. */
.mt-card.present {
  border-color: color-mix(in srgb, var(--mt-accent, #B0722C) 65%, var(--mt-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-accent, #B0722C) 40%, transparent),
              0 4px 14px -8px color-mix(in srgb, var(--mt-accent, #B0722C) 55%, transparent);
}
.mt-card.present .mt-latin::after {
  content: " 🪑";
  font-size: .72em;
}
/* the speaking card IS the stop control: hovering it veils the portrait
 * with a quiet "dismiss" (tap = hush; Marcus, 2026-07-27) */
.mt-card.speaking::after, .mt-card.channeled::after {
  content: "✕ dismiss";
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: #F7EFDE; background: rgba(8, 40, 39, .55);
  border-radius: 9px; opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
.mt-card.speaking:hover::after, .mt-card.channeled:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mt-card.speaking::after, .mt-card.channeled::after { transition: none; }
}
.mt-card .mt-beads {
  display: none; justify-content: center; gap: 5px; margin-top: 3px; height: 7px;
}
.mt-card.thinking .mt-beads { display: flex; }
.mt-card .mt-beads i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mt-brass);
  opacity: .25; animation: mt-bead 1.35s ease-in-out infinite;
}
.mt-card .mt-beads i:nth-child(2) { animation-delay: .45s; }
.mt-card .mt-beads i:nth-child(3) { animation-delay: .9s; }
@keyframes mt-bead {
  0%, 60%, 100% { opacity: .25; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}
.mt-card.channeled .mt-portrait { border-color: var(--mt-brass); }
.mt-card.channeled .mt-latin::after { content: " ♪"; color: var(--mt-brass); }
.mt-card.observing .mt-portrait { filter: saturate(.35) brightness(.75); }
.mt-card.observing .mt-latin::after { content: " 👂"; font-size: .85em; }
/* the ṣadr: TARJUMAN stands apart — a taller, upright, brass-framed card
   on a plinth, clearly not one of the fanned voices */
.mt-card.standing {
  width: 134px;
  border-color: var(--mt-brass);
  box-shadow:
    0 0 0 1px var(--mt-brass),
    0 12px 28px -10px color-mix(in srgb, var(--mt-brass) 55%, transparent),
    0 3px 0 -1px var(--mt-brass-dim); /* a little plinth under his feet */
}
.mt-card.standing.full { height: 200px; }
.mt-card.standing .mt-latin { font-size: .92rem; color: var(--mt-brass); }
.mt-actions button.active { border-color: var(--mt-brass); color: var(--mt-brass); }

/* feedback flash strip — hidden unless an action just happened */
.mt-blurb {
  display: none; margin-top: 6px; padding: 8px 14px;
  background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 10px;
  font-size: .8rem; line-height: 1.45; text-align: center; color: var(--mt-brass);
  animation: mt-mint .3s ease-out;
}
.mt-blurb.flash { display: block; }

/* meet-the-cast tooltip — anchored to the hovered card */
.mt-tip {
  /* z above the sticky header (40) — an "above" tip was sliding under it */
  position: absolute; z-index: 60; display: none; width: min(280px, 84vw);
  transform: translateX(-50%);
  background: var(--mt-ground-deep); border: 1px solid var(--mt-line); border-radius: 10px;
  padding: 8px 12px; font-size: .76rem; line-height: 1.45; text-align: center;
  pointer-events: none; box-shadow: 0 10px 28px -10px rgba(0,0,0,.6);
}
.mt-tip.open { display: block; }
.mt-tip.above { transform: translate(-50%, -100%); }
.mt-tip b { font-family: 'Marcellus', Georgia, serif; letter-spacing: .05em; }
.mt-tip p { margin: 3px 0 0; color: var(--mt-ink-dim); }
.mt-blurb b { font-family: 'Marcellus', Georgia, serif; letter-spacing: .05em; }
.mt-blurb-ar { color: var(--mt-ink-dim); margin-left: 2px; }
.mt-blurb-dom { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68em; letter-spacing: .1em; color: var(--mt-ink-dim); text-transform: uppercase; margin-left: 8px; }
.mt-blurb p { margin: 3px 0 0; color: var(--mt-ink-dim); }
.mt-blurb-hint { display: block; margin-top: 3px; font-size: .68rem; color: var(--mt-brass-dim); font-style: italic; }

/* actions — the one discussion control (hosted wherever the site mounts it) */
/* Majlis actions — the room's verbs, set like a ruled diwan page:
 * a thin frame within a frame (border + offset outline), Marcellus
 * labels, flat and matte. They sit on the sage page ground. */
.mt-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 8px 0 4px; }
.mt-actions h4 {
  width: 100%; margin: 0 0 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mt-brass);
}
.mt-discuss { display: flex; gap: 8px; flex: 1; min-width: 0; }
.mt-discuss input {
  flex: 1; min-width: 120px; background: var(--mt-ground-deep); color: var(--mt-ink);
  border: 1px solid var(--mt-line); border-radius: 999px; padding: 7px 14px; font-size: .82rem;
}
.mt-discuss input:disabled { opacity: .45; }
.mt-actions button {
  cursor: pointer; font-size: .8rem; white-space: nowrap; flex: none;
  font-family: 'Marcellus', Georgia, serif; letter-spacing: .05em;
  color: #0D3B3A; background: transparent;
  border: 1px solid #155A58; border-radius: 2px;
  outline: 1px solid color-mix(in srgb, #155A58 32%, transparent);
  outline-offset: 3px;
  padding: 8px 18px;
  transition: border-color .2s, outline-color .2s, background .2s, color .2s;
}
.mt-actions button:hover:not(:disabled) {
  border-color: #B0722C;
  outline-color: color-mix(in srgb, #B0722C 40%, transparent);
  background: color-mix(in srgb, #155A58 8%, transparent);
}
.mt-actions button:disabled { opacity: .45; cursor: default; }
/* the two verbs of the floor lead with copper */
.mt-actions button[data-act="discuss"], .mt-actions button[data-act="shura"] {
  border-color: #8F5A1E; color: #082827;
  outline-color: color-mix(in srgb, #B0722C 38%, transparent);
}
.mt-actions button.stop {
  color: #fff; background: #6e1e26; border-color: var(--mt-danger);
  outline-color: color-mix(in srgb, var(--mt-danger) 45%, transparent);
  animation: mt-discuss-pulse 2.2s ease-in-out infinite;
}
@keyframes mt-discuss-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 60, 60, .35); }
  50% { box-shadow: 0 0 0 6px rgba(200, 60, 60, 0); }
}
/* reset-to-neutral: quiet secondary until hovered */
.mt-actions button.mt-reset {
  color: #3E7B78; border-color: color-mix(in srgb, #155A58 55%, transparent);
}
.mt-actions button.mt-reset:hover:not(:disabled) {
  color: #fff; background: #5a2029; border-color: var(--mt-danger);
}
/* the wait RING (replaces the old "preparing to speak" banner — the strip
 * carries state now): fills over ~12s ease-out toward ~92% and holds — a
 * rough "how long until the next voice", not a stopwatch */
.mt-strip-slot { flex: none; align-self: center; display: inline-flex; }
.mt-strip-ring { width: 12px; height: 12px; transform: rotate(-90deg); }
.mt-strip-ring circle { fill: none; stroke-width: 2.6; }
.mt-strip-ring .bg { stroke: color-mix(in srgb, var(--mt-brass) 28%, transparent); }
.mt-strip-ring .fg {
  stroke: var(--mt-brass); stroke-linecap: round;
  stroke-dasharray: 31.4; stroke-dashoffset: 31.4;
  animation: mt-ring-fill 12s cubic-bezier(.2, .6, .3, 1) forwards;
}
@keyframes mt-ring-fill { to { stroke-dashoffset: 2.5; } }
@media (prefers-reduced-motion: reduce) {
  .mt-strip-ring .fg { animation: none; stroke-dashoffset: 8; }
}
/* an open question to the room — the floor is YOURS: unmissable */
.mt-question {
  width: 100%; margin-top: 2px; padding: 9px 14px; border-radius: 10px;
  font-size: .86rem; text-align: center; color: var(--mt-ink);
  background: color-mix(in srgb, var(--mt-brass) 22%, var(--mt-surface));
  border: 1px solid var(--mt-brass);
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--mt-brass) 60%, transparent);
  animation: mt-question-pulse 1.4s ease-in-out infinite;
}
.mt-question[hidden] { display: none; }
.mt-question b { color: var(--mt-brass); }
@keyframes mt-question-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mt-brass) 45%, transparent); }
  50% { box-shadow: 0 0 0 7px transparent; }
}
/* ---- the shura: refinement pick-cards + the manqala tray ----
   Styled as part of the console glass: same ground, same line color, the
   question set in the transcript's serif-brass voice. */
.mt-shura {
  width: 100%; margin-top: 2px; padding: 7px 12px 9px; border-radius: 10px;
  background: var(--mt-ground-deep);
  border: 1px solid var(--mt-line);
  display: flex; flex-direction: column; gap: 6px;
}
.mt-shura[hidden] { display: none; }
.mt-shura-head {
  font-size: .88rem; line-height: 1.45; color: #c8c2b2; font-style: italic;
}
.mt-shura-head b {
  color: var(--mt-brass); font-style: normal;
  font-family: 'Marcellus', Georgia, serif; letter-spacing: .04em;
}
.mt-shura-head span {
  display: block; font-size: .68rem; font-style: normal;
  color: var(--mt-ink-dim); margin-top: 1px;
}
.mt-shura-cand {
  text-align: left; cursor: pointer; border-radius: 10px; padding: 7px 12px;
  background: transparent; border: 1px solid var(--mt-line);
  color: #c8c2b2; font-style: italic;
  display: flex; flex-direction: column; gap: 5px; font-size: .88rem; line-height: 1.45;
}
.mt-shura-cand:hover { border-color: var(--mt-brass); }
/* the drafting wait — TARJUMAN is composing the framings */
.mt-thinking {
  display: flex; align-items: center; gap: 10px; padding: 6px 2px 8px;
  font-size: .88rem; line-height: 1.45; color: #c8c2b2; font-style: italic;
}
.mt-think-dots { display: inline-flex; gap: 4px; flex: none; }
.mt-think-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mt-brass);
  opacity: .3; animation: mt-think 1.3s ease-in-out infinite;
}
.mt-think-dots i:nth-child(2) { animation-delay: .25s; }
.mt-think-dots i:nth-child(3) { animation-delay: .5s; }
@keyframes mt-think {
  0%, 70%, 100% { opacity: .3; transform: none; }
  35% { opacity: 1; transform: translateY(-3px); }
}
.mt-shura-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.mt-chip {
  font-size: .68rem; font-style: normal; padding: 2px 9px; border-radius: 999px;
  background: var(--mt-surface); border: 1px solid var(--mt-line); color: var(--mt-ink-dim);
}
.mt-shura-custom { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-shura-custom input {
  flex: 1; min-width: 130px; background: var(--mt-ground-deep); color: var(--mt-ink);
  border: 1px solid var(--mt-line); border-radius: 8px; padding: 6px 10px; font-size: .78rem;
}
.mt-shura-custom button, .mt-shura-row button {
  cursor: pointer; font-size: .78rem; color: var(--mt-ink); white-space: nowrap;
  background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 999px;
  padding: 6px 14px;
}
.mt-shura-custom button:hover, .mt-shura-row button:hover { border-color: var(--mt-brass-dim); }
.mt-shura-row { display: flex; gap: 8px; justify-content: center; }
.mt-tray {
  /* one arced row, always — pits fan like the cards (no orphan rows) */
  display: flex; gap: 10px; align-items: flex-start; justify-content: center;
  padding: 2px 2px 16px; /* room for the center pit's dip */
}
.mt-pit {
  flex: 1 1 0; min-width: 76px; max-width: 170px;
  cursor: pointer; border-radius: 14px; padding: 7px 7px 5px;
  background: var(--mt-surface-2); border: 1px solid var(--mt-line);
  color: var(--mt-ink); display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.mt-pit:hover:not(.closed) { border-color: var(--mt-brass); }
.mt-pit.closed { cursor: default; opacity: .85; }
.mt-pit.plink .mt-pit-bowl { animation: mt-plink .25s ease; }
@keyframes mt-plink { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.mt-pit-label { font-size: .78rem; font-weight: 600; text-align: center; }
.mt-pit-bowl {
  /* the CARVE has to read against the pit face: a lighter stone lip
     around a genuinely dark dished hollow, brass catching the lower rim */
  position: relative; width: 100%; height: 72px; border-radius: 50% / 48%;
  /* teal-family carve (was near-black slate — clashed on the guide ground) */
  background:
    radial-gradient(ellipse 120% 100% at 50% 12%, #04201f 0%, #06302e 45%, #0D3B3A 72%, #155A58 96%);
  box-shadow:
    inset 0 10px 16px rgba(4, 24, 23, .65),
    inset 0 -4px 8px color-mix(in srgb, var(--mt-brass) 28%, transparent),
    inset 6px 0 10px rgba(4, 24, 23, .35),
    inset -6px 0 10px rgba(4, 24, 23, .35),
    0 1px 2px rgba(4, 24, 23, .3);
  border: 2px solid color-mix(in srgb, var(--mt-brass) 22%, #0D3B3A);
  border-top-color: #082827; /* light falls from above: dark upper lip */
  overflow: hidden;
}
.mt-pebble {
  position: absolute; user-select: none;
}
.mt-pebble.agent {
  /* a painted pebble: the seat's sigil on a stone disc in its color */
  width: 24px; height: 24px; line-height: 22px; border-radius: 50%;
  font-size: 13px; font-weight: 700; text-align: center;
  background: radial-gradient(circle at 35% 28%, #155A58, #082827 70%);
  border: 1.5px solid currentColor;
  box-shadow: 0 2px 4px rgba(4, 24, 23, .5),
    inset 0 1px 2px rgba(247, 239, 222, .14);
}
.mt-pebble.room {
  /* the room's stones carry the same weight as the seats' — human-first:
     a sand-pale pebble, clearly visible, nearly the sigils' size */
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #F7EFDE, #D8C69E 60%, #8F5A1E);
  border: 1px solid rgba(8, 40, 39, .4);
  box-shadow: 0 2px 3px rgba(4, 24, 23, .5), inset 0 1px 2px rgba(247, 239, 222, .5);
}
.mt-pebble.rim { position: static; display: inline-block; margin: 0 3px; vertical-align: middle; }
.mt-pit-tally { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .66rem; color: var(--mt-ink-dim); }
.mt-rim { font-size: .72rem; color: var(--mt-ink-dim); text-align: center; }
.mt-decide { flex-wrap: wrap; align-items: center; }
.mt-decide-label { font-size: .74rem; color: var(--mt-ink-dim); }
.mt-decide button.lead {
  border-color: var(--mt-brass); color: var(--mt-brass);
  box-shadow: 0 0 10px -3px color-mix(in srgb, var(--mt-brass) 60%, transparent);
}

/* majlis activity — a readable narration of system state, below the
   transcript, visible to everyone (raw protocol stays in the console) */
.mt-eventlog {
  margin-top: 4px; border: 1px solid var(--mt-line); border-radius: 10px;
  background: var(--mt-ground-deep); overflow: hidden;
}
.mt-eventlog-head {
  padding: 5px 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mt-brass);
  border-bottom: 1px solid var(--mt-line);
}
.mt-eventlog-body {
  max-height: 150px; overflow-y: auto; padding: 5px 10px;
  font-size: .76rem; line-height: 1.55; color: var(--mt-ink);
}
.mt-eventlog-body .mt-empty { color: var(--mt-ink-dim); font-style: italic; }
.mt-eventlog-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-eventlog-t {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68em; color: var(--mt-ink-dim);
  margin-right: 6px;
}

/* ensemble settings — hosted by the site (hamburger drawer on the
   redesigned pages), so keep it self-contained */
.mt-settings h4 {
  margin: 0 0 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mt-brass);
}

/* developer section (drawer) + details modal */
.mt-dev { display: flex; flex-direction: column; gap: 8px; font-size: .78rem; color: var(--mt-ink-dim); }
.mt-dev h4 {
  margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mt-brass);
}
.mt-dev-toggle { display: flex; gap: 7px; align-items: center; cursor: pointer; }
.mt-dev-ground { display: flex; gap: 7px; align-items: center; }
.mt-dev-ground select {
  font-size: .78rem; color: var(--mt-ink);
  background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 8px; padding: 4px 8px;
}
.mt-dev-tune { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; }
.mt-dev-tune[hidden] { display: none; }
.mt-dev-tune label {
  display: flex; gap: 7px; align-items: center; font-size: .72rem; color: var(--mt-ink-dim);
}
.mt-dev-tune label span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem;
  color: var(--mt-brass); min-width: 44px; text-align: right; margin-left: auto;
}
.mt-dev-tune input[type="range"] { flex: 1; min-width: 0; accent-color: var(--mt-brass); }
.mt-dev-tune input[type="color"] {
  width: 34px; height: 22px; padding: 0; border: 1px solid var(--mt-line);
  border-radius: 4px; background: var(--mt-surface); cursor: pointer;
}
.mt-dev-tune button { align-self: flex-start; }
.mt-dev button {
  cursor: pointer; font-size: .78rem; color: var(--mt-ink); align-self: flex-start;
  background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 8px; padding: 6px 12px;
}
.mt-dev button:hover { border-color: var(--mt-brass-dim); }
.mt-modal {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; background: rgba(4,6,10,.6);
}
.mt-modal.open { display: flex; }
.mt-modal-box {
  width: min(560px, 92vw); max-height: 82vh; display: flex; flex-direction: column;
  background: var(--mt-ground); border: 1px solid var(--mt-line); border-radius: 14px;
}
.mt-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--mt-line);
}
.mt-modal-head h4 {
  margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mt-brass);
}
.mt-modal-head button {
  cursor: pointer; color: var(--mt-ink); background: var(--mt-surface);
  border: 1px solid var(--mt-line); border-radius: 8px; padding: 3px 10px;
}
.mt-modal-body { padding: 12px 16px 16px; overflow-y: auto; font-size: .78rem; color: var(--mt-ink-dim); }
/* topic modal (Let them discuss / Call a shura) */
.mt-topic-lead { font-size: .9rem; color: var(--mt-ink); margin-bottom: 10px; line-height: 1.5; }
.mt-topic-input {
  width: 100%; background: var(--mt-ground-deep); color: var(--mt-ink);
  border: 1px solid var(--mt-line); border-radius: 10px; padding: 10px 14px;
  font-size: .95rem;
}
.mt-topic-input:focus { outline: none; border-color: var(--mt-brass); }
.mt-topic-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.mt-topic-hint { font-size: .74rem; color: var(--mt-ink-dim); flex: 1; min-width: 160px; }
.mt-topic-go {
  cursor: pointer; font-size: .88rem; color: #0A0D14; white-space: nowrap;
  background: linear-gradient(175deg, #E3C558, var(--mt-brass));
  border: 1px solid var(--mt-brass); border-radius: 999px; padding: 9px 20px; font-weight: 600;
}
.mt-topic-go:hover { filter: brightness(1.06); }
.mt-modal-body code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .92em; color: var(--mt-ink);
  background: var(--mt-ground-deep); border: 1px solid var(--mt-line);
  border-radius: 5px; padding: 1px 5px; user-select: all;
}
.mt-dev-meta { margin-bottom: 10px; line-height: 1.7; }
.mt-dev-row {
  padding: 9px 0; border-top: 1px solid var(--mt-line); line-height: 1.7;
}
.mt-dev-row b { font-family: 'Marcellus', Georgia, serif; letter-spacing: .05em; }
.mt-dev-role { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68em; letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; }
.mt-dev-ovr { color: var(--mt-brass); font-size: .85em; }
.mt-dev-phrase { font-style: italic; }
.mt-dev-phrase button {
  cursor: pointer; font-size: .72rem; font-style: normal; color: var(--mt-ink);
  background: var(--mt-surface-2); border: 1px solid var(--mt-line);
  border-radius: 999px; padding: 2px 12px; margin-left: 6px;
}
.mt-dev-phrase button:hover { border-color: var(--mt-brass-dim); }
.mt-dev-edit { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.mt-dev-edit input, .mt-dev-edit select {
  flex: 1; min-width: 150px; background: var(--mt-ground-deep); color: var(--mt-ink);
  border: 1px solid var(--mt-line); border-radius: 6px; padding: 4px 8px; font-size: .78rem;
}
.mt-dev-edit button {
  cursor: pointer; font-size: .74rem; color: var(--mt-ink);
  background: var(--mt-surface-2); border: 1px solid var(--mt-line); border-radius: 6px; padding: 4px 12px;
}
.mt-dev-edit button:hover { border-color: var(--mt-brass-dim); }
.mt-dev-note { margin-top: 10px; font-size: .72rem; font-style: italic; }
.mt-card .mt-portrait {
  position: relative; height: 88px; border-radius: 8px; margin-bottom: 6px;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--mt-accent, #888) 34%, #10141d), #10141d 78%);
  border: 1px solid color-mix(in srgb, var(--mt-accent, #888) 35%, var(--mt-line));
  display: grid; place-items: center; overflow: hidden;
}
.mt-card .mt-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mt-card .mt-sigil { font-family: 'Marcellus', Georgia, serif; font-size: 2.1rem; color: var(--mt-accent, #ccc); line-height: 1; }
.mt-card .mt-glyph { position: absolute; bottom: 4px; right: 6px; font-size: .78rem; color: var(--mt-accent, #ccc); opacity: .8; }
.mt-card .mt-latin { font-family: 'Marcellus', Georgia, serif; font-size: .84rem; letter-spacing: .05em; display: block; }
.mt-card .mt-arabic { font-size: .74rem; color: var(--mt-accent, #ccc); display: block; margin-top: -1px; }
.mt-card .mt-domain { font-size: .6rem; color: var(--mt-ink-dim); letter-spacing: .02em; margin-top: 2px; min-height: 1.2em; }

/* full-art cards: the portrait fills the frame; name + one-line domain sit
   on a dark scrim at the foot, so the type reads over ANY art (all six
   portraits are light parchment — the scrim guarantees the contrast). */
.mt-card.full { height: 158px; padding: 0; overflow: hidden; }
.mt-card.full .mt-portrait {
  position: absolute; inset: 0; height: auto; margin: 0; border: none;
  border-radius: 9px; background: #10141d;
}
.mt-card.full .mt-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 18%; /* faces live in the upper third of the art */
}
.mt-card.full .mt-sigil, .mt-card.full .mt-glyph { display: none; }
.mt-card.full .mt-cardtext {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 6px 7px;
  background: linear-gradient(to top,
    rgba(9, 12, 19, .94) 0%, rgba(9, 12, 19, .78) 46%, rgba(9, 12, 19, 0) 100%);
  pointer-events: none;
}
/* ONE text treatment for every card (Marcus, 2026-07-21): identical font,
   size and color on all seats — the accent stays in the border/glow, never
   the type. Long domain lines WRAP (two lines max by content), never
   ellipsize. */
.mt-card.full .mt-latin {
  font-family: 'Marcellus', Georgia, serif;
  color: #F4F0E4; font-size: .8rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.mt-card.full .mt-arabic {
  color: #D9CFB4;
  font-size: .68rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.mt-card.full .mt-domain {
  font-family: 'Marcellus', Georgia, serif;
  color: #D9CFB4;
  font-size: .58rem; letter-spacing: .07em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8); margin-top: 3px;
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.3;
}
.mt-card.full .mt-beads { z-index: 2; }
/* the frame clips (overflow hidden), so the badge tucks inside the art */
.mt-card.full .mt-badge { top: 4px; z-index: 3; }
.mt-card.full.absent .mt-portrait img { filter: grayscale(1) brightness(.55); }
.mt-card .mt-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .58rem; letter-spacing: .06em;
  background: var(--mt-ground-deep); border: 1px solid var(--mt-accent, #ccc); color: var(--mt-accent, #ccc);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; opacity: 0; transition: opacity .3s;
}
.mt-card.speaking .mt-badge, .mt-card.awaiting .mt-badge, .mt-card.cut .mt-badge { opacity: 1; }
.mt-card.dim { opacity: .5; }
.mt-card.speaking {
  border-color: var(--mt-accent, #ccc); opacity: 1;
  box-shadow: 0 0 0 1px var(--mt-accent, #ccc), 0 18px 44px -10px color-mix(in srgb, var(--mt-accent, #ccc) 65%, transparent);
}
.mt-card.speaking .mt-portrait { animation: mt-ring 1.5s ease-out infinite; }
@keyframes mt-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mt-accent, #ccc) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.mt-card.awaiting { border-color: var(--mt-accent, #ccc); opacity: 1; }
.mt-card.awaiting .mt-badge { animation: mt-blink 1.1s ease-in-out infinite alternate; }
@keyframes mt-blink { from { opacity: 1; } to { opacity: .35; } }
.mt-card.cut { border-color: var(--mt-danger); }
.mt-card.cut .mt-badge { border-color: var(--mt-danger); color: var(--mt-danger); }
.mt-card.human { width: 92px; }
.mt-card.human .mt-portrait { height: 62px; }
.mt-card.absent .mt-portrait { filter: grayscale(1) brightness(.6); }


/* the record — drawer buttons opening the ticker/decisions modals */
.mt-panelbtns { display: flex; flex-direction: column; gap: 8px; }
.mt-panelbtns h4 {
  margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mt-brass);
}
.mt-panelbtns button {
  cursor: pointer; font-size: .78rem; color: var(--mt-ink); align-self: flex-start;
  background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 8px; padding: 6px 12px;
}
.mt-panelbtns button:hover { border-color: var(--mt-brass-dim); }
.mt-ticker { display: flex; flex-direction: column; gap: 6px; min-height: 3em; }
.mt-ticker div { color: var(--mt-ink-dim); }
.mt-ticker b { font-family: Georgia, serif; font-weight: 600; }
.mt-ticker .mt-note { color: var(--mt-brass); font-style: italic; animation: mt-mint .4s ease-out; }
.mt-tray { display: flex; gap: 6px; flex-wrap: wrap; min-height: 2.6em; align-items: flex-start; }
.mt-dcard {
  font-size: .66rem; background: var(--mt-ground-deep); border: 1px solid var(--mt-brass-dim);
  border-radius: 7px; padding: 5px 8px; max-width: 170px;
  animation: mt-mint .5s cubic-bezier(.22,1,.3,1);
}
.mt-dcard .mt-dn { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--mt-brass); font-size: .85em; display: block; }
@keyframes mt-mint { from { transform: translateY(10px) scale(.92); opacity: 0; } }
.mt-empty { font-size: .74rem; color: var(--mt-ink-dim); font-style: italic; }

.mt-knobs { display: none; gap: 6px; flex-wrap: wrap; font-size: .72rem; color: var(--mt-ink-dim); align-items: center; }
.mt-knobs.open { display: flex; }
.mt-knobs button {
  cursor: pointer; font-size: .72rem; color: var(--mt-ink);
  background: var(--mt-surface-2); border: 1px solid var(--mt-line); border-radius: 8px; padding: 4px 12px;
}
.mt-knobs label { display: flex; gap: 4px; align-items: center; }
.mt-knobs input { width: 52px; background: var(--mt-ground-deep); color: var(--mt-ink); border: 1px solid var(--mt-line); border-radius: 5px; padding: 2px 4px; }

@media (prefers-reduced-motion: reduce) {
  .mt-card { transition: none; }
  .mt-card .mt-portrait, .mt-card .mt-badge, .mt-dcard { animation: none !important; }
  .mt-card .mt-beads i { animation: none !important; opacity: .8; }
}

/* ── the skill rack (skills PRD §5 · round-4: a corner glyph) ───────── */
.mt-card .mt-rack {
  position: absolute; top: 5px; right: 5px; z-index: 6;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  font-size: 11px; color: #F7EFDE;
  background: color-mix(in srgb, #082827 74%, transparent);
  border: 1px solid var(--mt-brass-dim); border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.mt-card .mt-rack:hover {
  border-color: var(--mt-brass);
  background: #082827;
  transform: scale(1.15);
}

.mt-rackgrid { display: flex; flex-direction: column; gap: 10px; }
.mt-rackrow { display: flex; gap: 10px; align-items: flex-start; }
.mt-rackrow-ico { font-size: 20px; line-height: 1.3; }
.mt-rackrow-txt b { color: var(--mt-ink); }
.mt-rackrow-txt p { margin: 2px 0 0; opacity: .75; font-size: 13px; }
.mt-rackrow.invocable .mt-rackrow-txt b { color: var(--mt-brass); }
.mt-rackrow-act { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mt-rackrow-act .mt-research-q {
  flex: 1 1 220px; min-width: 160px; padding: 6px 8px;
  background: var(--mt-well, rgba(255,255,255,.04));
  border: 1px solid var(--mt-line); border-radius: 6px; color: var(--mt-ink);
}
.mt-rackrow-act button {
  padding: 6px 10px; border: 1px solid var(--mt-brass);
  background: transparent; color: var(--mt-brass);
  border-radius: 6px; cursor: pointer;
}
.mt-rackrow-act button:hover { background: color-mix(in srgb, var(--mt-brass) 14%, transparent); }

/* ── background-task chips (skills PRD §4) ──────────────────────────── */
.mt-tasks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.mt-taskchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 12px; border-radius: 999px;
  border: 1px solid var(--mt-line); background: rgba(9, 12, 19, .5);
  color: var(--mt-ink);
}
.mt-taskchip.running, .mt-taskchip.queued {
  border-color: color-mix(in srgb, var(--mt-brass) 55%, var(--mt-line));
  animation: mt-task-breathe 2.4s ease-in-out infinite;
}
.mt-taskchip.done { border-color: color-mix(in srgb, #7fbf7f 55%, var(--mt-line)); }
.mt-taskchip.failed { border-color: color-mix(in srgb, #cf6f6f 60%, var(--mt-line)); }
.mt-taskchip button {
  border: 0; background: transparent; color: inherit; opacity: .6;
  cursor: pointer; padding: 0 2px; font-size: 11px;
}
.mt-taskchip button:hover { opacity: 1; }
@keyframes mt-task-breathe {
  0%, 100% { opacity: 1; } 50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-taskchip { animation: none !important; }
}

/* ── the project tree (skills PRD §5a) ──────────────────────────────── */
.mt-projtree { font-size: 13.5px; line-height: 1.7; }
.mt-projtree details { margin-left: 4px; }
.mt-projtree details details, .mt-projtree details .mt-projfile { margin-left: 16px; }
.mt-projdir > summary { cursor: pointer; color: var(--mt-ink); opacity: .9; }
.mt-projdir > summary:hover { color: var(--mt-brass); }
.mt-projfile {
  display: flex; align-items: baseline; gap: 6px;
  padding: 1px 4px; border-radius: 5px; cursor: pointer;
}
.mt-projfile:hover { background: color-mix(in srgb, var(--mt-brass) 10%, transparent); }
.mt-projfile > span { color: var(--mt-ink); }
.mt-projsize { opacity: .45; font-size: 11px; }
.mt-projfile a[data-proj-dl] {
  margin-left: auto; text-decoration: none; opacity: .5; font-size: 12px;
}
.mt-projfile a[data-proj-dl]:hover { opacity: 1; }
.mt-projview {
  white-space: pre-wrap; word-break: break-word; font-size: 12.5px;
  line-height: 1.55; max-height: 60vh; overflow: auto;
  background: rgba(9, 12, 19, .35); border: 1px solid var(--mt-line);
  border-radius: 8px; padding: 12px;
}
.mt-projimg { max-width: 100%; border-radius: 8px; border: 1px solid var(--mt-line); }