/* ============================================================
   ELEO EXPLAINS — article reader (slide-over)
   Entry cards on law sections open a reading panel: zero layout
   shift on the page, reading-optimized column, audio dock slot
   ready for voice files. See loops/eleo-articles.md.
   ============================================================ */

/* ------------------------------------------------ entry card */
.read-grid { display: grid; gap: 14px; }
.read-grid .ar-card { margin-top: 0; }

.ar-card {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  margin-top: 26px;
  padding: 16px 22px;
  background: #FFFDF6;
  border: 1px solid rgb(13 13 17 / 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
}
.ar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.ar-card:hover .ar-arrow { transform: translateX(4px); }
.ar-card:hover .ar-title { color: var(--iris-500); }
.ar-mark { width: 34px; height: 34px; flex-shrink: 0; }
.ar-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--iris-500);
}
.ar-title {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  letter-spacing: -0.01em; line-height: 1.15;
  transition: color 0.3s;
}
.ar-meta {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-300);
  display: inline-flex; align-items: center; gap: 8px;
}
.ar-arrow { display: inline-block; transition: transform 0.3s; color: var(--amber-500); }
.ar-card[disabled] { cursor: default; opacity: 0.55; }
.ar-card[disabled]:hover { transform: none; box-shadow: var(--shadow-card); }
.ar-card[disabled] .ar-title { color: inherit; }
.ar-card[disabled] .ar-arrow { display: none; }

/* ------------------------------------------------ scrim + panel */
.ar-scrim {
  position: fixed; inset: 0; z-index: 1690;
  background: rgb(13 13 17 / 0.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s, visibility 0.45s;
}
.ar-scrim.open { opacity: 1; visibility: visible; }

.ar-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1700;
  width: min(700px, 100vw);
  display: flex; flex-direction: column;
  background: var(--sand-50);
  border-left: 1px solid rgb(13 13 17 / 0.08);
  box-shadow: -40px 0 90px -30px rgb(13 13 17 / 0.5);
  transform: translateX(103%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ar-panel.open { transform: translateX(0); }

/* full-screen reading mode */
.ar-panel.full { width: 100vw; border-left: none; }
@media (min-width: 701px) {
  .ar-panel.full .ar-body > * { max-width: 880px; margin-inline: auto; }
  .ar-panel.full .ar-head { position: relative; }
  .ar-panel.full .ar-head-text { width: min(880px, 100%); margin-inline: auto; }
  .ar-panel.full .ar-dock-inner { width: min(880px, 100%); margin-inline: auto; }
  .ar-panel.full .ar-full-btn { position: absolute; right: 76px; top: 26px; margin-left: 0; }
  .ar-panel.full .ar-close { position: absolute; right: 34px; top: 26px; margin-left: 0; }
}

.ar-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: rgb(13 13 17 / 0.06);
}
.ar-progress-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--iris-500), var(--amber-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.15s linear;
}

/* ------------------------------------------------ header + dock */
.ar-head {
  padding: 26px 34px 18px;
  border-bottom: 1px solid rgb(13 13 17 / 0.08);
  background: var(--sand-100);
  display: flex; align-items: flex-start; gap: 14px;
}
.ar-head-text { min-width: 0; }
.ar-head-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--iris-500); margin-bottom: 8px;
}
.ar-head-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05;
  letter-spacing: -0.02em;
}
.ar-close {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgb(13 13 17 / 0.06);
  color: var(--ink-500); font-size: 20px; line-height: 1;
  cursor: pointer; transition: background 0.3s, color 0.3s;
}
.ar-close:hover { background: var(--ink-900); color: var(--sand-50); }
.ar-full-btn {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgb(13 13 17 / 0.06);
  color: var(--ink-500); font-size: 15px; line-height: 1;
  cursor: pointer; transition: background 0.3s, color 0.3s;
  display: grid; place-items: center;
}
.ar-full-btn:hover { background: var(--ink-900); color: var(--sand-50); }
.ar-full-btn[aria-pressed="true"] { background: var(--iris-500); color: #fff; }
.ar-close { margin-left: 8px; }

/* the audio dock — always rendered; state depends on data.audio */
.ar-dock {
  padding: 12px 34px;
  border-bottom: 1px solid rgb(13 13 17 / 0.08);
  background: var(--sand-50);
}
.ar-dock-inner { display: flex; align-items: center; gap: 12px; }
.ar-play {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: none; cursor: pointer;
  background: var(--ink-900); color: var(--sand-50);
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.3s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ar-play:hover:not([disabled]) { background: var(--amber-500); transform: scale(1.06); }
.ar-play[disabled] { opacity: 0.35; cursor: default; }
.ar-dock-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-dock-title { font-weight: 700; font-size: 13.5px; }
.ar-dock-note {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-300);
}
.ar-dock-time {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
}

/* ------------------------------------------------ reading body */
.ar-body {
  flex: 1; overflow-y: auto;
  padding: 34px clamp(24px, 5vw, 54px) 80px;
}
.ar-body > * { max-width: 62ch; }
.ar-body p {
  font-size: 17.5px; line-height: 1.75; color: var(--ink-700);
  margin-bottom: 1.2em;
}
.ar-body strong { color: var(--ink-900); }
.ar-body h2 {
  font-size: 1.55rem; letter-spacing: -0.02em;
  margin: 1.9em 0 0.7em;
}
.ar-body h2:first-child { margin-top: 0; }
.ar-body .ar-standfirst {
  font-size: 13px; line-height: 1.5;
  font-family: var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-300);
  margin-bottom: 2em;
}
/* drop cap on the first real paragraph */
.ar-body > p:not(.ar-standfirst):first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4em; line-height: 0.82;
  float: left; padding: 4px 12px 0 0;
  color: var(--iris-500);
}
.ar-signoff {
  margin-top: 2.5em;
  font-family: var(--font-mono); font-size: 13px !important;
  color: var(--ink-500) !important;
}
.ar-signoff span { color: var(--ink-300); font-size: 11px; }

/* ------------------------------------------------ responsive + motion */
@media (max-width: 700px) {
  .ar-full-btn { display: none; }   /* panel is already full-width here */
}
@media (max-width: 640px) {
  .ar-head { padding: 20px 20px 14px; }
  .ar-dock { padding: 12px 20px; }
  .ar-body { padding: 24px 20px 60px; }
  .ar-card { padding: 14px 16px; }
  .ar-title { font-size: 17px; }
  .ar-meta { display: none; }   /* tight card: the arrow isn't the affordance */
}
@media (prefers-reduced-motion: reduce) {
  .ar-panel, .ar-scrim, .ar-card, .ar-play { transition: none; }
}