/* Course detail host (Phase 3d): one container, three shapes.
   The content inside comes from views/dialogs.js unchanged; this file only decides how it is framed.

     docked   <aside> beside the stage, persistent, not modal      (>= 1200 wide AND the grid keeps 720px)
     drawer   right-hand overlay with a scrim, modal               (tablet, narrow desktop, phone landscape)
     sheet    bottom sheet, two detents, modal                     (phone portrait)

   The shape is chosen in JS (ui/detail-mode.js) because it depends on the measured stage width, not on a media query: the
   navigation takes 72px or 232px and the panel takes 360–400px, so the same window width can leave the grid very different
   room. CSS only paints the shape that the host announces through [data-mode]. See docs/DETAIL-EXPERIENCE.md. */
@layer components {
  .detail-host { --detail-w: 360px; }

  /* ---------- the panel: shared shell ---------- */
  .detail-panel {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--surface-panel); color: var(--text-primary);
    border: 1px solid var(--border-default);
  }

  .detail-head {
    flex: none; display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 16px 12px 18px; border-bottom: 1px solid var(--border-default);
  }
  .detail-head-text { flex: 1 1 auto; min-width: 0; }
  .detail-kicker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--font-size-caption); color: var(--text-secondary); }
  .detail-kicker:empty { display: none; }
  .detail-title {
    margin-top: 4px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere; text-wrap: balance;
  }
  .detail-title:focus { outline: none; }
  .detail-close {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-panel); color: var(--text-secondary);
    font-size: var(--font-size-title-sm); line-height: 1;
  }
  .detail-close:hover { background: var(--surface-hover); color: var(--text-primary); }

  .detail-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
    padding: 4px 18px 24px; font-size: var(--font-size-body-sm); line-height: 1.8;
  }
  .detail-body:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
  /* The content builders were written for the centred dialog; keep their blocks readable in a narrower column. */
  .detail-body .detail-grid { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; }
  .detail-body .switch-row { gap: 8px; }
  .detail-body .switch-row button { flex: 1 1 auto; min-width: 0; }
  .detail-body iframe { height: 60dvh; }

  /* ---------- docked: a column beside the stage ---------- */
  .detail-host[data-mode="docked"] { display: none; }
  .detail-host[data-mode="docked"][data-open="true"] { display: block; }
  .detail-host[data-mode="docked"] {
    position: sticky; top: 0; align-self: start;
    width: var(--detail-w); max-height: 100%;
    /* The stage scrolls; the panel sticks to the top of it and scrolls its own body instead. */
  }
  .detail-host[data-mode="docked"] .detail-panel {
    height: calc(100dvh - var(--app-header-h, 0px) - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
  }
  .detail-host[data-mode="docked"] .detail-scrim,
  .detail-host[data-mode="docked"] .detail-grip { display: none; }

  /* ---------- drawer: overlay from the right ---------- */
  .detail-host[data-mode="drawer"] { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
  .detail-host[data-mode="drawer"][data-open="false"] { visibility: hidden; }
  .detail-host[data-mode="drawer"] .detail-scrim {
    position: absolute; inset: 0; background: var(--overlay-scrim);
    opacity: 0; transition: opacity var(--duration-base) ease;
  }
  .detail-host[data-mode="drawer"][data-open="true"] .detail-scrim { opacity: 1; pointer-events: auto; }
  .detail-host[data-mode="drawer"] .detail-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(var(--detail-w), 92vw);
    max-width: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: 0;
    padding-right: var(--safe-r, 0px);
    box-shadow: var(--shadow-drawer);
    transform: translateX(102%);
    transition: transform var(--duration-base) ease;
    pointer-events: auto;
  }
  .detail-host[data-mode="drawer"][data-open="true"] .detail-panel { transform: none; }
  .detail-host[data-mode="drawer"] .detail-grip { display: none; }

  /* ---------- sheet: bottom, two detents ---------- */
  .detail-host[data-mode="sheet"] { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
  .detail-host[data-mode="sheet"][data-open="false"] { visibility: hidden; }
  .detail-host[data-mode="sheet"] .detail-scrim {
    position: absolute; inset: 0; background: var(--overlay-scrim);
    opacity: 0; transition: opacity var(--duration-base) ease;
  }
  .detail-host[data-mode="sheet"][data-open="true"] .detail-scrim { opacity: 1; pointer-events: auto; }
  .detail-host[data-mode="sheet"] .detail-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 88dvh;                                  /* the fallback; the detents below set the real height */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    padding-bottom: var(--safe-b, 0px);             /* the iOS home indicator */
    box-shadow: var(--shadow-drawer);
    transform: translateY(105%);
    transition: transform var(--duration-base) ease, height var(--duration-base) ease;
    pointer-events: auto;
  }
  .detail-host[data-mode="sheet"][data-open="true"] .detail-panel { transform: translateY(var(--sheet-drag, 0px)); }
  .detail-host[data-mode="sheet"][data-detent="peek"] .detail-panel { height: 48dvh; }
  .detail-host[data-mode="sheet"][data-detent="full"] .detail-panel { height: 88dvh; }
  /* While dragging, the height must follow the finger, not animate. */
  .detail-host[data-dragging] .detail-panel { transition: none; }

  .detail-grip {
    flex: none; display: grid; place-items: center; width: 100%; height: 28px; padding: 0;
    border: 0; background: transparent; touch-action: none; cursor: grab;
  }
  .detail-grip:active { cursor: grabbing; }
  .detail-grip-bar { display: block; width: 40px; height: 4px; border-radius: var(--radius-xs); background: var(--border-default); }
  .detail-grip:hover .detail-grip-bar { background: var(--text-secondary); }
  .detail-grip:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -4px; border-radius: var(--radius-sm); }

  /* ---------- the selected cell: a restrained ring, never a colour change (the cell keeps its own meaning) ---------- */
  .m-cell.is-selected, .event.is-selected {
    box-shadow: 0 0 0 2px var(--text-accent), 0 0 0 4px color-mix(in srgb, var(--text-accent) 22%, transparent);
  }
  .m-cell.is-selected:hover, .event.is-selected:hover { box-shadow: 0 0 0 2px var(--text-accent); }

  /* ---------- motion preferences ---------- */
  @media (prefers-reduced-motion: reduce) {
    .detail-host .detail-panel, .detail-host .detail-scrim { transition: none; }
  }

}