/* ==========================================================================
   Connect 2026 - Action pill bar                                        T-15
   --------------------------------------------------------------------------
   Share / Save / Follow author / Update preferences / Comment / Download PDF.
   On all 10 reader screens.

   MEASURED on artboard p3:
     pill    36px tall, fully rounded, --cn-cyan fill
     label   8.0pt Medium x2.4 = 19px, white   (--cn-text-author)
     padding ~20px each side, ~12px between pills

   Note 36px, two more than the 34px standard button - so this has its own
   height token rather than reusing --cn-btn-h.

   WHICH PILLS APPEAR VARIES BY READER, verified from the text layer of all
   ten reader artboards:
     Article / News / In-depth / Q&A / Webinar / Interview / Audio
         Share, Save, Follow author, Update preferences, Comment
     Report / Magazine issue
         Download PDF first, then Share, Save, Update preferences, Comment
     Magazine article
         Download PDF, Share, Save, Follow author, Update preferences
         -- the ONLY reader that drops Comment

   THE ROW FITS ON ONE LINE, ON EVERY READER
     Both p3 and p12 draw all five pills on a single row spanning exactly
     771px - the reader content column. It only wraps if you put it in the
     743px listing column, so use .cn-grid-rail--reader on reader pages.

     PADDING IS 16px, NOT 20px. Working back from the artboard: "Share" is
     89px wide containing ~56px of text, so the horizontal padding is ~16px a
     side. At 20px the row totalled 806px against a 772px column and wrapped.

     The artboard is internally inconsistent here - p3 sets the labels at
     8.0pt and p12 at 7.7pt, so "Share" is 92px on one page and 89px on
     another, and the gaps differ too (12.75px vs 9.5px). Exact per-page
     matching is therefore neither achievable nor desirable; one consistent
     spec that fits the column on every reader is. We use the p3 label size
     (19px), 16px padding, an 8px gap and a 92px minimum width.

     THE MINIMUM WIDTH IS REAL, not a guess. The artboard draws "Share" and
     "Save" at exactly the same width on both pages - 92/92 on p3, 89/89 on
     p12 - even though "Save" is the shorter word. Without a minimum, Save
     renders 10px narrower than Share and the row reads unevenly.

     Gap is 8px rather than 12: with the minimum applied the widest set
     (Magazine article) totals 735px, leaving 37px for four gaps inside the
     772px column.

     flex-wrap stays for narrow screens.

   CONTRAST - same issue as the primary button. White on --cn-cyan is 2.28:1
   against a 4.5:1 requirement. Uses the same --cn-btn-primary-* token pair,
   so the fix applies here at the same time and in the same place.

   TWO OF THESE HAVE NO BACKEND
     Follow author       there is no follow concept anywhere in the codebase
     Update preferences  needs the Adestra sync question answered
   See CONNECT2026.md section 8. The buttons render and carry their state
   attributes; wiring is T-39.

   DEPENDS ON: tokens.css
   ========================================================================== */

.cn-actions {
  display: flex;
  flex-wrap: wrap;
  /* p3 pill gaps measure 12.6 / 12.5 / 12.5 / 12.5 - not the 8 used here. */
  gap: var(--cn-space-3);
  margin-top: 0;
  margin-bottom: var(--cn-space-10);  /* 40 - artboard 37 */
  list-style: none;
}

.cn-action {
  display: inline-flex;
  align-items: center;
  /* Centred in the pill: the 92px minimum below makes "Save" wider than
     its word, and without this the word sat at the pill's left edge while
     "Share" filled its own - the row read as if Save were misprinted. */
  justify-content: center;
  text-align: center;
  gap: var(--cn-space-2);
  min-height: var(--cn-pill-h);
  min-width: var(--cn-pill-min);
  padding: 0 var(--cn-space-4);
  border: 0;
  border-radius: var(--cn-radius-pill);
  background: var(--cn-btn-primary-bg);
  color: var(--cn-btn-primary-ink);
  font-size: var(--cn-text-author);
  font-weight: var(--cn-fw-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--cn-dur) var(--cn-ease);
}

.cn-action:hover { background: var(--cn-cyan-alt); }

/*
   THE FIVE-PILL ROW (p12, the magazine article reader).

   Measured on p12: five pills summing 733px inside the 771px reader column,
   gaps of ~9.5, the row ending flush on the column's right edge at 857.6. At
   the four-pill spacing this module was built for it comes to 783 and wraps.

   Gap and padding both come in a little, which lands the row at ~755 and
   leaves it slack rather than balancing on the exact width - a row that fits
   to the pixel wraps the first time a font loads differently.
*/
/*
   One quiet line under the pills - "Sign in to save...", "Sorry - the PDF is
   not available...". The row leaves 40 under itself; the note pulls up to sit
   12 under the pills and keeps the 40 below, so whatever follows (embed, body)
   is where it would be without the note. Same rule as .cn-issue-actions__note.
*/
.cn-actions__note {
  margin: calc(var(--cn-space-10) * -1 + var(--cn-space-3)) 0 var(--cn-space-10);
  font-size: var(--cn-text-meta);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-body);
}

.cn-actions--five { gap: 10px; }
.cn-actions--five .cn-action { padding: 0 14px; }

/*
   Download PDF renders as an <a> when there is a file behind it (p11, p12,
   p14). Anchors bring a browser default underline and the visited colour with
   them; buttons do not, and the two must be indistinguishable in the row.
*/
a.cn-action,
a.cn-action:visited { text-decoration: none; color: var(--cn-btn-primary-ink); }

/* Toggled state for Save and Follow author. */
.cn-action[aria-pressed="true"] {
  background: var(--cn-navy);
  color: var(--cn-ink-invert);
}

/* =========================================================== RESPONSIVE == */
/*
   T-40: the row already wraps, so it needs no structural change. The pills do
   get narrower padding, but min-height GOES UP to 44px - the tap-target floor
   in the T-40 checklist. Shrinking a control on a touch device is backwards.
*/
@media (max-width: 767px) {
  .cn-actions { gap: var(--cn-space-2); }
  .cn-action {
    min-height: 44px;
    padding: 0 var(--cn-space-4);
    font-size: var(--cn-text-meta);
  }
}

/*
   A pill with no behaviour behind it. Follow, preferences and comment have no
   endpoint in this codebase yet, and a control that swallows a click reads as
   a broken page - so they are visibly unavailable instead.

   Keeps the pill shape and the 44px target, because they are still real
   controls that will light up when the endpoints land.
*/
.cn-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------- share menu ------ */
/*
   The artboards draw one "Share" pill; the live reader offers five routes.
   Both are true, so the pill stays and the choices open beneath it.

   The list is a real popover positioned against the pill, so it never pushes
   the action row around when it opens.
*/
.cn-action-menu {
  position: relative;
}

.cn-action-menu__list {
  position: absolute;
  top: calc(100% + var(--cn-space-2));
  left: 0;
  z-index: var(--cn-z-dropdown);
  min-width: 180px;
  margin: 0;
  padding: var(--cn-space-2) 0;
  list-style: none;
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}

.cn-action-menu__list li { margin: 0; }

.cn-action-menu__item {
  display: block;
  width: 100%;
  padding: var(--cn-space-3) var(--cn-space-5);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--cn-text-meta);
  color: var(--cn-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cn-action-menu__item:hover,
.cn-action-menu__item:focus-visible {
  background: var(--cn-band-grey);
  color: var(--cn-ink);
}

/* On a phone the popover would sit half off-screen against a pill near the
   right edge, so it spans the row instead. */
@media (max-width: 767px) {
  .cn-action-menu { position: static; }
  .cn-action-menu__list { left: 0; right: 0; min-width: 0; }
}


/* --------------------------------------------- follow, per author ------ */
/*
   The Follow menu reuses .cn-action-menu wholesale - it is the same control
   as Share, opening under the same pill at the same offset. Only the row
   differs: a Share row is a destination, a Follow row is a person AND their
   current state, so the two sit at opposite ends of the row.
*/
.cn-action-menu__item[data-action="follow"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cn-space-5);
  width: 100%;
}

/* The word that changes when the row is pressed. Kept quiet: the name is
   what the reader is reading, and this is the answer to "already?". */
.cn-action-menu__state {
  flex: 0 0 auto;
  font-size: var(--cn-text-chip);
  color: var(--cn-ink-muted);
}

.cn-action-menu__item[aria-pressed="true"] .cn-action-menu__state {
  color: var(--cn-cyan);
  font-weight: var(--cn-fw-semibold);
}

/*
   FOLLOWING IS A PRESSED PILL. Save already reads this way, and a Follow
   button that looks identical whether or not you follow the author is the
   thing that makes people press it twice.
*/
.cn-action[data-action="follow"][aria-pressed="true"] {
  border-color: var(--cn-cyan);
  color: var(--cn-fam-cyan-ink);
  font-weight: var(--cn-fw-semibold);
}

/* Mid-request. Brief, but a control that cannot be pressed should not look
   pressable, and this is what stops a second click landing. */
.cn-action[data-action="follow"]:disabled,
.cn-action-menu__item[data-action="follow"]:disabled {
  opacity: .6;
  cursor: default;
}