/* ============================================================
   scribe.css — "The visit writes its own note" (ClScribe)
   Signature visual: the LISTENING STAGE. A dark waveform panel
   hears the operatory ("DR: any sensitivity upper-right?" /
   "PT: a little with cold…"), the conversation flows down into
   a SOAP card that drafts itself S → O → A → P, a "D2740 ·
   crown" pill lands in the Plan, and the draft is stamped
   "Ready for your review & sign-off". CSS-only, one 14s looping
   timeline (--sc-t). Everything is namespaced under .cl-scribe;
   keyframes are clScribe-prefixed since keyframe names are
   global. Base (non-animated) styles equal the FINAL scene, so
   prefers-reduced-motion shows the story's conclusion as a
   still. Tokens inherited from styles.css (theme-sand);
   clinical accent = sand-blue, mint reserved for ✓/live.
   ============================================================ */

.cl-scribe {
  --cl-blue: #5a82c2;
  --cl-blue-deep: #3d63a4;
  --cl-blue-lite: #8aa6dd;
  --cl-blue-wash: color-mix(in srgb, #5a82c2 8%, #fff);
  --cl-mint-wash: color-mix(in srgb, var(--mint) 10%, #fff);
  --cl-navy: #0d1626;
  --sc-t: 14s; /* one full visit → note cycle */
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 92% 18%, var(--cl-blue-wash), transparent 62%),
    linear-gradient(180deg, #fff, var(--paper));
}

.cl-scribe .eyebrow { color: var(--cl-blue-deep); }
.cl-scribe .eyebrow.cl-term { color: #141b2e; font-weight: 800; font-size: 13.5px; letter-spacing: .1em; }
body.theme-sand .cl-scribe .eyebrow.cl-term { color: #141b2e; }
.cl-scribe .h2 { margin: 14px 0 12px; }
.cl-scribe .lead { max-width: 54ch; }

.cl-scribe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* ── left column: chips + editorial footnotes ── */
.cl-scribe-chips { margin-top: clamp(24px, 3vw, 34px); }
.cl-scribe-chips-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 12px;
}
.cl-scribe-chiplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
}
.cl-scribe-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-60);
  transition: border-color .2s ease, color .2s ease;
}
.cl-scribe-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cl-blue);
  opacity: .75;
}
.cl-scribe-chip:hover {
  border-color: color-mix(in srgb, var(--cl-blue) 40%, var(--line));
  color: var(--ink);
}

.cl-scribe-notes {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  max-width: 52ch;
}
.cl-scribe-notes li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-60);
}
.cl-scribe-notes b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 4px;
}

/* ============================================================
   THE STAGE — one soft surface: dark listening panel flowing
   down into the light SOAP draft
   ============================================================ */
.cl-scribe-stage {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 50% at 0% 0%, var(--periwinkle), transparent 55%),
    radial-gradient(70% 60% at 100% 100%, var(--cl-blue-wash), transparent 60%),
    linear-gradient(165deg, #fff, var(--paper));
  box-shadow: var(--shadow-float);
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 20px);
  overflow: hidden;
}

/* header strip */
.cl-scribe-stagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cl-scribe-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cl-blue-deep);
}
.cl-scribe-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--mint);
  animation: clScribeLive 2.4s ease-out infinite;
}
.cl-scribe-op { color: var(--ink-40); }

/* ── the dark listening panel ── */
.cl-scribe-listen {
  border-radius: var(--r-mid);
  background:
    radial-gradient(90% 90% at 20% 0%, rgba(90, 130, 194, .22), transparent 60%),
    linear-gradient(170deg, #14203a, var(--cl-navy));
  border: 1px solid rgba(138, 166, 221, .18);
  padding: 14px 16px 12px;
  box-shadow: var(--shadow-1);
}

/* the waveform — 24 undulating bars */
.cl-scribe-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  height: 34px;
}
.cl-scribe-wave i {
  flex: 1 1 0;
  max-width: 6px;
  height: var(--h, 14px);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--cl-blue-lite), var(--cl-blue));
  opacity: .9;
  transform-origin: center;
  animation: clScribeBar 1.15s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.13s);
}

/* the two heard lines */
.cl-scribe-lines {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(138, 166, 221, .16);
  display: grid;
  gap: 6px;
}
.cl-scribe-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #cdd8ef;
  animation-duration: var(--sc-t);
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.cl-scribe-line b {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cl-blue-lite);
  border: 1px solid rgba(138, 166, 221, .35);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  transform: translateY(-1px);
}
.cl-scribe-line--dr { animation-name: clScribeLineDr; }
.cl-scribe-line--pt { animation-name: clScribeLinePt; }
.cl-scribe-line--pt b {
  color: #a8e3cc;
  border-color: color-mix(in srgb, var(--mint) 40%, transparent);
}

/* ── conversation → note connector ── */
.cl-scribe-flow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 30px;
}
.cl-scribe-flow-rail {
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: repeating-linear-gradient(
    180deg,
    var(--cl-blue) 0 4px,
    transparent 4px 9px
  );
  background-size: 100% 9px;
  opacity: .55;
  animation: clScribeFlow 1.2s linear infinite;
}
.cl-scribe-flow-tag {
  position: relative;
  margin-left: 76px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  animation: clScribeTag var(--sc-t) ease infinite both;
}

/* ── the SOAP draft ── */
.cl-scribe-note {
  border-radius: var(--r-mid);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-2);
  padding: 13px 16px 14px;
}
.cl-scribe-notehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
.cl-scribe-notehead strong {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.cl-scribe-notehead span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* one S/O/A/P line — base = final scene (fully written) */
.cl-scribe-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  animation-duration: var(--sc-t);
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.cl-scribe-row--1 { animation-name: clScribeRow1; }
.cl-scribe-row--2 { animation-name: clScribeRow2; }
.cl-scribe-row--3 { animation-name: clScribeRow3; }
.cl-scribe-row--4 { animation-name: clScribeRow4; }

.cl-scribe-k {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cl-blue-deep);
  background: var(--cl-blue-wash);
  border: 1px solid color-mix(in srgb, var(--cl-blue) 30%, #fff);
  transform: translateY(1px);
}
.cl-scribe-t {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-60);
}

/* the ADA code pill in the Plan line */
.cl-scribe-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cl-blue-deep);
  background: var(--cl-blue-wash);
  border: 1px solid color-mix(in srgb, var(--cl-blue) 35%, #fff);
  border-radius: var(--r-pill);
  padding: 1.5px 8px;
  white-space: nowrap;
  vertical-align: baseline;
  transform-origin: left center;
  animation: clScribePill var(--sc-t) ease infinite both;
}
.cl-scribe-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--cl-blue);
}

/* the review & sign-off stamp — the conclusion */
.cl-scribe-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 6px 13px 6px 8px;
  border-radius: var(--r-pill);
  background: var(--cl-mint-wash);
  border: 1px solid color-mix(in srgb, var(--mint) 35%, #fff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--mint) 70%, var(--ink));
  animation: clScribeStamp var(--sc-t) ease infinite both;
}
.cl-scribe-check {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--mint);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ── stage floor: the mailed recorder + the audit trail ── */
.cl-scribe-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.cl-scribe-devwrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.cl-scribe-device {
  width: 46px;
  height: 28px;
  display: block;
}
.cl-scribe-body {
  fill: var(--cl-navy);
  stroke: rgba(138, 166, 221, .35);
  stroke-width: 1.5;
}
.cl-scribe-grille line {
  stroke: var(--cl-blue-lite);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .8;
}
.cl-scribe-recdot {
  fill: var(--mint);
  transform-box: fill-box;
  transform-origin: center;
  animation: clScribeRec 2s ease-in-out infinite;
}
.cl-scribe-devlabel {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cl-scribe-devlabel b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.cl-scribe-devlabel em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.cl-scribe-audit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-family: var(--mono);
}
.cl-scribe-audit-k {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-blue-deep);
}
.cl-scribe-audit-v {
  font-size: 11px;
  color: var(--ink-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   TIMELINE — one 14s cycle (each 1% = 140ms)
   0–7    DR line lands   · 9–13 PT line lands
   16–21  S drafts        · 26–31 O drafts
   38–43  A drafts        · 50–55 P drafts
   56–61  D2740 pill pops · 68–73 review stamp lands
   96–100 soft reset
   ============================================================ */

@keyframes clScribeBar {
  0%   { transform: scaleY(.3); }
  100% { transform: scaleY(1); }
}

@keyframes clScribeLineDr {
  0%, 3%   { opacity: 0; transform: translateY(6px); }
  7%       { opacity: 1; transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes clScribeLinePt {
  0%, 9%   { opacity: 0; transform: translateY(6px); }
  13%      { opacity: 1; transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes clScribeFlow {
  0%   { background-position: 0 0; }
  100% { background-position: 0 9px; }
}
@keyframes clScribeTag {
  0%, 12%  { opacity: 0; }
  16%      { opacity: 1; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes clScribeRow1 {
  0%, 16%  { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px); }
  21%      { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes clScribeRow2 {
  0%, 26%  { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px); }
  31%      { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes clScribeRow3 {
  0%, 38%  { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px); }
  43%      { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes clScribeRow4 {
  0%, 50%  { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px); }
  55%      { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes clScribePill {
  0%, 56%  { opacity: 0; transform: scale(.55); }
  61%      { opacity: 1; transform: scale(1); }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes clScribeStamp {
  0%, 68%  { opacity: 0; transform: translateY(7px) scale(.94); }
  73%      { opacity: 1; transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes clScribeRec {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@keyframes clScribeLive {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 40%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .cl-scribe-grid { grid-template-columns: 1fr; gap: 40px; }
  .cl-scribe-stage { max-width: 620px; }
}
@media (max-width: 560px) {
  .cl-scribe-stage { padding: 16px 14px 12px; }
  .cl-scribe-op { display: none; }
  .cl-scribe-flow-tag { margin-left: 64px; }
  .cl-scribe-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cl-scribe-audit-v { white-space: normal; }
}

/* reduced motion — freeze on the final scene (note drafted, stamp landed) */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cl-scribe *,
  .cl-scribe *::before,
  .cl-scribe *::after {
    animation: none !important;
    transition: none !important;
  }
}