/* ORA MEMORY DIAL (components/memory-dial.js) · every colour is a token, the
   accent wash is the workspace's own accent at two strengths, the ring and the
   lit dot are white at low alpha so they read the same on any accent. No
   overflow rule anywhere here: inside the subject sheet the SECTION scrolls.
   The ring and the dots share one centre and one radius, set by the script in
   px from the real width, so a dot can only ever sit on the ring (AMENDMENT-1). */
.md{display:flex;flex-direction:column;gap:var(--space-md)}
/* LEADCARD-1: the card's top edge to the first line and the last line to its
   bottom edge are 16px, and the title block to the ring and the ring to the
   summary are 12px. Written in px on purpose: the space tokens are rem-based
   and render 15px and 11.25px, and Eri asked for these exact numbers. The only
   raw values here. The script sizes the ring band from the panel width. */
.md-dial{
  --md-frame:16px;--md-gap:12px;
  position:relative;padding:var(--md-frame) var(--space-md);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.78), rgba(var(--accent-rgb),.38));
  background-color:var(--surface-raised);
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  clip-path:inset(0 round var(--radius-lg))
}
.md-dial.is-empty{justify-content:center;gap:var(--space-xs);min-height:190px;padding:var(--space-md) var(--space-md) var(--space-sm)}
/* MEMORY-TITLES-1: who this person is, centred above the title. The accent is
   the tenant's primary from the canonical tokens, so it follows every altitude
   and vertical; no border, uppercase, the pill radius token. At most three. */
.md-badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 var(--space-sm)}
.md-badge{
  display:inline-block;padding:5px 10px;border:0;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--text-on-accent);
  font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;line-height:1.1
}
.md-title{
  position:relative;z-index:1;margin:0;font-family:var(--font-heading);font-size:var(--text-xl);
  font-weight:var(--fw-bold);color:#fff;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(0,0,0,.18)
}
/* The date beside the title, and the small tag ("Called back") when the
   contact before this one was within two days. */
.md-when{
  position:relative;z-index:1;margin:6px 0 0;font-size:var(--text-sm);color:rgba(255,255,255,.82);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px
}
.md-tag{font-size:var(--text-xs);font-weight:var(--fw-semibold);padding:3px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.18);color:#fff}
.md-caption{position:relative;z-index:1;margin:0;font-size:var(--text-xs);color:rgba(255,255,255,.85)}
.md-dial.is-empty .md-caption{max-width:34ch;line-height:var(--lh-normal)}
/* What happened, under the ring: two balanced lines at most, narrower than
   the ring so it never touches it. overflow hidden is the clamp, not a scroll. */
.md-summary{
  position:relative;z-index:1;margin:0 auto;max-width:300px;min-height:calc(2 * var(--text-sm) * 1.5);
  font-size:var(--text-sm);line-height:1.5;color:rgba(255,255,255,.92);text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.md-summary:empty{min-height:0}
.md-arc{position:relative;width:100%;flex:0 0 auto;margin:var(--md-gap) 0}
/* ONE ring, under the dots (z-order: ring, dots, lit dot). */
.md-ring{position:absolute;left:50%;transform:translateX(-50%);border-radius:var(--radius-circle);border:1px solid rgba(255,255,255,.22);pointer-events:none}
.md-centre{display:flex;justify-content:center;padding:var(--space-xs) 0}
/* A memory. The chosen one is the big lit dot; the rest are small OPAQUE
   dots (white mixed into the accent, so the ring never shows through them)
   that show their icon faintly until hovered. Position comes from the script. */
.md-dot{
  position:absolute;transform:translate(-50%,-50%);z-index:1;
  width:44px;height:44px;border-radius:var(--radius-circle);border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, #fff 30%, var(--accent));color:#fff;font-size:var(--text-base);
  box-shadow:0 2px 6px rgba(0,0,0,.14);transition:transform .15s ease,background .15s ease
}
.md-dot:hover{background:color-mix(in srgb, #fff 42%, var(--accent));transform:translate(-50%,-50%) scale(1.08)}
.md-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.md-dot.is-selected{
  z-index:2;width:84px;height:84px;font-size:var(--text-xl);
  background:#fff;color:var(--accent);
  box-shadow:0 0 0 14px rgba(255,255,255,.18),0 0 30px rgba(255,255,255,.4),var(--shadow-md)
}
.md-dot.is-selected:hover{transform:translate(-50%,-50%)}
.md-centre .md-dot{position:static;transform:none;cursor:default}
.md-dot.is-quiet{background:rgba(255,255,255,.55);box-shadow:0 0 0 14px rgba(255,255,255,.16),0 0 24px rgba(255,255,255,.35)}
/* The pager: a chevron either side of "which / how many". It steps the
   chosen memory one at a time; the ring's page follows the chosen memory. */
.md-pager{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:var(--space-sm);font-size:var(--text-sm);color:#fff}
.md-count{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.92)}
.md-step:focus-visible{outline:2px solid #fff;outline-offset:2px}
.md-step{width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-circle);background:transparent;color:rgba(255,255,255,.85);font-size:var(--text-xs);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.md-step:hover{background:rgba(255,255,255,.15)}
.md-step[disabled]{opacity:.35;cursor:default}
/* Under the card: the chosen memory's kind and stamp, then its own detail. */
.md-meta{
  display:flex;justify-content:space-between;gap:var(--space-md);margin:0 0 var(--space-xs);
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-tertiary)
}
.md-meta time{text-transform:none;letter-spacing:0}
.md-detail:empty{display:none}
@media (prefers-reduced-motion:reduce){.md-dot{transition:none}}

/* UI-CONSISTENCY-1 AMEND-1: a studio-themed business's memory dial wears the theme's roles. Ink on the
   accent card is the role --text-on-accent (the studio contrasts it against the accent), not a literal
   white, so a light accent stays readable. Scoped to html[data-studio-theme], so Teglo, Conduct Connect
   and TNT keep today's rules above, byte for byte. */
html[data-studio-theme] .md-title{color:var(--text-on-accent);text-shadow:none}
html[data-studio-theme] .md-when{color:color-mix(in srgb,var(--text-on-accent) 82%,transparent)}
html[data-studio-theme] .md-tag{background:color-mix(in srgb,var(--text-on-accent) 18%,transparent);color:var(--text-on-accent)}
html[data-studio-theme] .md-caption{color:color-mix(in srgb,var(--text-on-accent) 85%,transparent)}
html[data-studio-theme] .md-summary,html[data-studio-theme] .md-count{color:color-mix(in srgb,var(--text-on-accent) 92%,transparent)}
html[data-studio-theme] .md-ring{border-color:color-mix(in srgb,var(--text-on-accent) 22%,transparent)}
html[data-studio-theme] .md-dot{background:color-mix(in srgb,var(--text-on-accent) 30%,var(--accent));color:var(--text-on-accent);box-shadow:var(--shadow-sm)}
html[data-studio-theme] .md-dot:hover{background:color-mix(in srgb,var(--text-on-accent) 42%,var(--accent))}
html[data-studio-theme] .md-dot:focus-visible,html[data-studio-theme] .md-step:focus-visible{outline-color:var(--text-on-accent)}
html[data-studio-theme] .md-dot.is-selected{background:var(--text-on-accent);color:var(--accent);box-shadow:0 0 0 14px color-mix(in srgb,var(--text-on-accent) 18%,transparent),0 0 30px color-mix(in srgb,var(--text-on-accent) 40%,transparent),var(--shadow-md)}
html[data-studio-theme] .md-dot.is-quiet{background:color-mix(in srgb,var(--text-on-accent) 55%,transparent);box-shadow:0 0 0 14px color-mix(in srgb,var(--text-on-accent) 16%,transparent),0 0 24px color-mix(in srgb,var(--text-on-accent) 35%,transparent)}
html[data-studio-theme] .md-pager{color:var(--text-on-accent)}
html[data-studio-theme] .md-step{color:color-mix(in srgb,var(--text-on-accent) 85%,transparent)}
html[data-studio-theme] .md-step:hover{background:color-mix(in srgb,var(--text-on-accent) 15%,transparent)}