/* 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 rings 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 rings and the dots share one centre and one radius, set by the script in
   px, so a dot can only ever sit on the ring. */
.md{display:flex;flex-direction:column;gap:var(--space-md)}
.md-dial{
  position:relative;padding:var(--space-md) var(--space-md) var(--space-sm);
  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))   /* the rings run past the card's bottom edge */
}
.md-dial.is-empty{justify-content:center;gap:var(--space-xs);min-height:190px}
.md-title{
  position:relative;z-index:1;margin:0;font-family:var(--font-heading);font-size:var(--text-lg);
  font-weight:var(--fw-semibold);color:#fff;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(0,0,0,.18)
}
.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)}
.md-arc{position:relative;width:100%;flex:0 0 auto}
.md-ring{position:absolute;left:50%;transform:translateX(-50%);border-radius:var(--radius-circle);border:1px solid rgba(255,255,255,.12);pointer-events:none}
.md-ring.is-track{border-color:rgba(255,255,255,.2)}
.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 glass dots
   that show their icon faintly until hovered. Position comes from the script. */
.md-dot{
  position:absolute;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:var(--radius-circle);border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.3);color:rgba(255,255,255,.8);font-size:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.14);transition:transform .15s ease,background .15s ease
}
.md-dot:hover{background:rgba(255,255,255,.44);transform:translate(-50%,-50%) scale(1.08)}
.md-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.md-dot.is-selected{
  width:54px;height:54px;font-size:var(--text-base);
  background:#fff;color:var(--accent);
  box-shadow:0 0 0 9px rgba(255,255,255,.2),0 0 30px rgba(255,255,255,.55),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 9px rgba(255,255,255,.16),0 0 24px rgba(255,255,255,.35)}
/* The pager: one small dot per ring-full of memories, a chevron either side. */
.md-pager{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--space-xs)}
.md-page{width:7px;height:7px;padding:0;border:0;border-radius:var(--radius-circle);background:rgba(255,255,255,.35);cursor:pointer}
.md-page.is-current{background:#fff;width:9px;height:9px}
.md-page:focus-visible,.md-step:focus-visible{outline:2px solid #fff;outline-offset:2px}
.md-step{width:22px;height:22px;padding:0;border:0;border-radius:var(--radius-circle);background:transparent;color:rgba(255,255,255,.85);font-size:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.md-step:hover{background:rgba(255,255,255,.18)}
.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}}