/* ==========================================================================
   MGT2E DATAPAD — Protocol module (.pr)
   Layout, panes, bars, rows, rich text and the confirm dialog come from components.css.
   1. Category index        3. Card panels (container queries)
   2. Card grid
   ========================================================================== */

@layer modules {

  .pr {
    grid-template-rows: minmax(0, 1fr);
  }

  /* ---------- 1. Category index ---------- */
  /* Category rows get a touch-sized height */
  .pr-cat {
    min-height: 44px;
  }

  .pr-cat__count {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  /* Master Archives, drawn like the Manifest's Statistics: a full-width button at the foot, and a panel rising over the
     index from the dock's top edge, so the button stays visible and toggles it. */
  .pr .split__index {
    --dock-h: 52px;
  }

  .pr-dock {
    flex: none;
    display: flex;
    align-items: center;
    height: var(--dock-h);
    padding: 0 12px;
    border-top: 1px solid var(--glass-border);
  }

  .pr-archives {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--dock-h);
    max-height: calc(100% - var(--dock-h));
    overflow-y: auto;
    z-index: 6;
    background: var(--surface-raised);
    border-top: 1px solid var(--glass-border-hi);
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.4);
  }

  .pr-archives__list {
    display: grid;
    gap: 10px;
    padding: 12px;
    list-style: none;
  }

  /* Each book is a framed box with a darker fill, like the fields in the Manifest's Statistics */
  .pr-archives__book {
    padding: 10px 12px;
    font-size: var(--fs-md);
    color: var(--c-ice-bright);
    background: var(--well);
    border: 1px solid var(--glass-border);
  }

  .pr-archives__book:hover {
    background: var(--well);
    border-color: var(--glass-border-hi);
  }

  .pr-archives__book:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: -1px;
  }

  /* ---------- 2. Card grid ---------- */
  /* A responsive grid that scrolls vertically once it overflows */
  .pr-cards {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: var(--gap);
    padding: 16px;
  }

  .pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 84px;
    padding: 14px 16px;
    text-align: left;
    font: inherit;
    color: var(--c-text);
    cursor: pointer;
    background: var(--wash-ice);
    border: 1px solid var(--glass-border);
    border-left: 2px solid var(--c-ice-dim);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .pr-card[draggable="true"] {
    cursor: grab;
  }

  .pr-card:hover {
    background: var(--wash-hover-hi);
    border-color: var(--glass-border-hi);
  }

  .pr-card:active {
    border-left-color: var(--c-orange);
  }

  .pr-card:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: 2px;
  }

  .pr-card.is-dragging {
    opacity: 0.4;
  }

  /* Insertion bar on the side of the card a drop would land on */
  .pr-card.is-drop-before::before,
  .pr-card.is-drop-after::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-ice);
    box-shadow: var(--glow-ice);
  }

  .pr-card.is-drop-before::before { left: -7px; }
  .pr-card.is-drop-after::after   { right: -7px; }

  .pr-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-md);
    line-height: 1.25;
    color: var(--c-ice-bright);
  }

  /* Favorites: the star shows after resting on a card (.show-star, protocol.js), and stays once filled. */
  .pr-card__star {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    color: var(--c-ice);
    cursor: pointer;
    visibility: hidden;
  }

  .pr-card__star svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
  }

  .pr-card__star.is-on {
    opacity: 0.3;
  }

  .pr-card__star.is-on svg {
    fill: currentColor;
  }

  .pr-card__star.is-armed {
    opacity: 1;
  }

  /* The mouse has rested on a filled star: hollow, as it will be after a click. */
  .pr-card__star.is-armed svg {
    fill: none;
  }

  .pr-card.show-star .pr-card__star,
  .pr-card:focus-visible .pr-card__star,
  .pr-card__star:focus-visible,
  .pr-card__star.is-on {
    visibility: visible;
  }

  .pr-card__cat {
    padding-right: 24px;        /* clear of the star */
  }

  /* Ends the favorites row: the line across the grid starts the page's own cards on a new row. */
  .pr-favorites-end {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--glass-border);
  }

  /* ---------- 3. Card panels ---------- */
  /* Full-page blur behind the card panels. Fixed to the page, so it covers the top bar too. */
  .pr-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* The row of open cards, centred on the whole page. When the panels don't fit side by side
     (narrow screens, several open) the row scrolls sideways instead of squeezing them. */
  .pr-panels {
    container: panels / inline-size;
    position: fixed;
    inset: 0;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: var(--gap);
    padding: 0 calc(var(--pad) + var(--safe-right)) 0 calc(var(--pad) + var(--safe-left));
    overflow-x: auto;
    pointer-events: none;       /* only the panels themselves catch clicks */
  }

  /* Each panel is a third of the page, capped 5% wider than the index, and never narrower than 360px */
  .pr-detail {
    container: card / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 min(33.3333cqi, calc(var(--left-col-max) * 1.05));
    min-width: min(360px, 100cqi);
    min-height: 0;
    height: 80vh;
    height: 80dvh;
    pointer-events: auto;
    background: rgba(8, 20, 34, 0.96);  /* --surface-raised, a little more opaque: what's behind shouldn't distract */
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  /* A closed panel's copy while it fades out (protocol.js slideOut), pinned where the panel was */
  .pr-detail--ghost {
    position: fixed;
    z-index: 21;
    min-width: 0;
    margin: 0;
    pointer-events: none;
  }

  /* Bar under the row of panels: trail arrows and position on the left, Close all on the right.
     Centred on the page and just wide enough for its buttons. Panels are 80dvh tall and centred,
     so their bottom edge is at 90dvh; the bar sits just below it. (The band above the panels holds
     each unlocked card's formatting tab.) */
  .pr-trail {
    position: fixed;
    left: 50%;
    top: calc(90vh + 8px);
    top: calc(90dvh + 8px);
    z-index: 21;
    width: max-content;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--surface-raised);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  /* The arrows are the bar's main controls: twice the width of an icon button */
  .pr-trail__arrow {
    flex-basis: calc(2 * var(--control-h));
    width: calc(2 * var(--control-h));
  }

  .pr-trail__close {
    flex: none;
    white-space: nowrap;
  }

  /* Tablets in landscape and smaller: a panel gets a wider share of the screen */
  @container panels (max-width: 1180px) {
    .pr-detail {
      flex-basis: min(462px, 100cqi);
    }
  }

  /* Formatting tools of an unlocked card: a tab joined to the top of the card, on the right above the lock button,
     in the band over the panels. Outside the card's flow, so its text never moves when the card is locked or
     unlocked. Placed over the card's top border (bottom: 100% is the inside edge of that border), which it hides,
     so tab and card read as one piece. Always one row: the band has no room for two. */
  .format-bar--strip {
    position: absolute;
    right: -1px;
    bottom: 100%;
    justify-content: flex-end;
    gap: 6px;                   /* as in the database reader's bar */
    padding: 6px 8px 7px;
    white-space: nowrap;
    background: rgba(8, 20, 34, 0.96);  /* the card's own background */
    border: 1px solid var(--glass-border-hi);
    border-bottom: 0;
    animation: pr-tab-in var(--dur) var(--ease);
  }

  .format-bar--strip .btn {
    padding: 0 6px;
  }

  @keyframes pr-tab-in {
    from { opacity: 0; transform: translateY(8px); }
  }

  /* A window too short for the tab above the cards (the band is 10dvh; the tab needs about 50px): the tools go
     back inside the card as a strip under its header, as before. */
  @media (max-height: 579px) {
    .format-bar--strip {
      position: static;
      padding: 10px 12px;
      background: none;
      border: 0;
      border-bottom: 1px solid var(--glass-border);
      animation: none;
    }
  }

  .pr-detail__body {
    font-family: var(--font-ui);
    font-size: 11pt;
    font-weight: 300;           /* the UI face is heavy at normal weight; light keeps bold distinct */
  }

  /* Under the text, always in view: the book page the card comes from, and on an unlocked card the button for it */
  .pr-detail__source {
    flex: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    font-size: 0.85em;
    color: var(--c-text);
    text-align: right;
    border-top: 1px solid var(--glass-border);
  }

  .pr-detail__source[hidden] {
    display: none;
  }

  .pr-detail__source-link {
    color: inherit;
  }

  .pr-detail__source-edit {
    padding: 0;
    font: inherit;
    color: var(--c-text-muted);
    background: none;
    border: none;
    cursor: pointer;
  }

  .pr-detail__source-edit:hover {
    color: var(--c-ice-bright);
  }

  /* Beside an existing source, Change sits at the far left and the source stays right. Add Source alone stays right. */
  .pr-detail__source-edit:has(+ .pr-detail__source-link:not([hidden])) {
    margin-right: auto;
  }

  /* The source picker rises from the bottom of the card, only as tall as its books need, and scrolls past the card's height */
  .pr-source-picker {
    top: auto;
    max-height: 100%;
    border-top: 1px solid var(--glass-border-hi);
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.4);
  }

  .pr-source-picker .link-picker__list {
    flex: 0 1 auto;
  }

  /* The source picker's foot: the page, then what to do with it */
  .pr-source-form {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--glass-border);
  }

  .pr-source-form__page {
    flex: 1;
    min-width: 0;
  }
}