/* ===================================================================
   The Protocal — widescreen reading desk

   Loaded after style.css. Changes nothing below 72rem.

   72rem and up: each story splits into two columns. Narrative on the
   left — what happened. The record on the right — the coverage, the
   splits, the framing, the sources — pinned in view while you read,
   the way a sidenote sits beside the text it annotates.

   78rem to 115rem: the slim vertical rail sits in the left margin.

   116rem and up (1850px+): a contents panel takes the left margin.
   Every story in the brief, grouped by section, with a coverage bar
   showing what share of the roster ran it and a gold mark where outlets split.

   138rem and up: ultra-wide desks expand for 1440p / 2560px displays.
   =================================================================== */

/* --- two-column stories ------------------------------------------- */

@media (min-width: 72rem) {
  .wrap { max-width: 78rem; }

  .story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    column-gap: clamp(2.5rem, 4vw, 5rem);
    align-items: start;
  }

  .story-text { min-width: 0; }
  .story-text .prose { max-width: 38rem; margin-bottom: 0; }
  .story h2 { max-width: 22ch; }

  .story-notes {
    position: sticky;
    top: 5.25rem;
    padding: 0.25rem 0 0 1.5rem;
    border-left: 1px solid var(--hairline);
    transition: border-color 0.3s var(--ease);
  }

  .story.here .story-notes,
  .story:hover .story-notes {
    border-left-color: color-mix(in srgb, var(--sec, var(--ink-3)) 55%, transparent);
  }

  .story-notes::before {
    content: "The record";
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sec, var(--ink-3));
    margin: 0 0 1.125rem;
  }

  /* notes are narrower than the measure, so everything in them tightens */
  .story-notes .split-block,
  .story-notes .agreed,
  .story-notes .framing { max-width: none; }

  .story-notes .split-block { padding: 1rem 1.125rem; margin-bottom: 1.25rem; }
  .story-notes .framing { font-size: 0.9375rem; line-height: 1.55;
                          margin-bottom: 1.25rem; }
  .story-notes .agreed { margin-bottom: 1.25rem; }
  .story-notes .srcs { gap: 0.3rem; }

  /* compact: the record collapses to its split line, beside the headline */
  .compact .story-notes { border-left-color: transparent; padding-top: 0.5rem; }
  .compact .story-notes::before { display: none; }
  .compact .story-text .prose { display: none; }
}

/* --- contents panel ------------------------------------------------- */

.contents { display: none; }

@media (min-width: 116rem) {
  .rail { display: none !important; }   /* the contents panel supersedes it */

  .contents {
    display: block;
    position: fixed;
    top: 5.75rem;
    left: clamp(1.25rem, 2vw, 2.75rem);
    width: clamp(13rem, 13vw, 16.5rem);
    max-width: calc(50vw - 40rem);
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    z-index: 20;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }

  .contents::-webkit-scrollbar { display: none; }
  .contents.on { opacity: 1; transform: none; pointer-events: auto; }

  .ct-head {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1.25rem;
    line-height: 1.7;
  }

  .ct-head b { color: var(--ink-2); font-weight: 500; }
  .ct-head i { font-style: normal; color: var(--split); }

  .ct-sec {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Schibsted Grotesk', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sec, var(--ink-3));
    margin: 1.375rem 0 0.5rem;
  }

  .ct-sec:first-of-type { margin-top: 0; }

  .ct-sec::before {
    content: "";
    width: 2px;
    height: 0.8em;
    border-radius: 1px;
    background: var(--sec, var(--ink-3));
  }

  .ct-item {
    display: block;
    position: relative;
    padding: 0.45rem 0 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--ink-3);
    border-left: 1px solid var(--hairline);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  }

  .ct-item:hover { color: var(--ink-2); }

  .ct-item.here {
    color: var(--ink);
    border-left-color: var(--sec, var(--ink));
  }

  .ct-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: Newsreader, Georgia, serif;
    font-size: 0.875rem;
    line-height: 1.3;
  }

  /* coverage bar: share of the roster that ran the story */
  .ct-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
  }

  .ct-track {
    flex: 1;
    height: 2px;
    background: var(--hairline);
    border-radius: 1px;
    overflow: hidden;
  }

  .ct-fill {
    display: block;
    height: 100%;
    width: 0;
    background: color-mix(in srgb, var(--sec, var(--ink-3)) 70%, transparent);
    transition: width 0.7s var(--ease);
  }

  .ct-item.here .ct-fill { background: var(--sec, var(--ink)); }

  .ct-n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    min-width: 1.4rem;
    text-align: right;
  }

  .ct-split {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--split);
    flex: none;
  }

  .ct-item[hidden], .ct-sec[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .contents, .ct-fill { transition: none; }
}

@media print {
  .contents { display: none !important; }
  .story { display: block; }
  .story-notes { position: static; border: none; padding: 0; }
  .story-notes::before { display: none; }
}

/* --- ultra-wide: 2200px and up (e.g. 1440p / 2560px displays) -------
   The extra width goes to the record column and the gap, never to the
   narrative — its measure stays capped for reading. The overview gains
   room too, so headlines there stop truncating. */

@media (min-width: 138rem) {
  .wrap { max-width: 94rem; }
  .story { grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem); }
  .story-notes .split-block { padding: 1.125rem 1.375rem; }
  .contents {
    width: clamp(15rem, 13vw, 18.5rem);
    max-width: calc(50vw - 48.5rem);
  }
}