/* ==========================================================================
   FIVE WAYS TO SAY "THIS IS CLICKABLE"
   The two families (A = the app-icon grid, B = the pill row) are unchanged
   apart from the trade line. What varies across the five is only how a card
   tells you it can be opened — five different conventions, so the question
   being answered is "which cue do people understand", not "which skin".

   Every cue applies to both families through the shared hooks:
     .cc-i     one card          .cc-nm  its name
     .cc-cue   the cue element   .cc-hint  the line above the row
   ========================================================================== */

.cc-hint{ display: none; }
.cc-cue{ display: none; }
.cc .ag-i, .cc .mp-i{ cursor: pointer; }

/* the row heading line, used by cue 3 */
.cc-hint{
  display: none; align-items: center; gap: 7px; margin: 0;
  font-size: 12px; color: var(--ink-3);
}
.cc-hint svg{ width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==== CUE 1 · ARROW ======================================================
   The oldest signal on the web: something points onward. It sits on every
   card, turns to face the panel on the one that is open, and needs no words. */
.cc1 .cc-cue{
  display: grid; place-items: center; width: 15px; height: 15px; margin: 4px auto 0;
  border-radius: 50%; color: var(--ink-4);
  transition: transform .22s ease, color .22s ease, background .22s ease;
}
.cc1 .cc-cue svg{ width: 9px; height: 9px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cc1 .ag-i:hover .cc-cue, .cc1 .mp-i:hover .cc-cue{ color: var(--k); transform: translateY(1px); }
.cc1 .is-sel .cc-cue{ background: var(--k); color: #fff; transform: rotate(180deg); }
.cc1 .mp-i .cc-cue{ margin: 0 0 0 auto; }
.cc1 .mp-i{ padding-right: 8px; }

/* ==== CUE 2 · BUTTON =====================================================
   Not a cue drawn onto a card — the card is rebuilt as a button. A raised
   surface, a real border, and a press that moves. You know it because it
   looks like every button you have ever used. */
.cc2 .ag-i{
  border: 1px solid var(--line-b); background: var(--paper); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(15,27,61,.05), 0 3px 8px -5px rgba(15,27,61,.35);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc2 .ag-i:hover{ background: var(--paper); border-color: #C3D4EE;
  box-shadow: 0 2px 0 rgba(15,27,61,.05), 0 10px 20px -10px rgba(15,27,61,.5); transform: translateY(-2px); }
.cc2 .ag-i:active, .cc2 .mp-i:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(15,27,61,.06); }
.cc2 .mp-i{ box-shadow: 0 1px 0 rgba(15,27,61,.05), 0 3px 8px -5px rgba(15,27,61,.35);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.cc2 .mp-i:hover{ transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(15,27,61,.05), 0 10px 20px -10px rgba(15,27,61,.5); }
.cc2 .is-sel{ box-shadow: 0 0 0 2px var(--k) !important; transform: none !important; }

/* ==== CUE 3 · SAID IN WORDS ==============================================
   No icon can beat a sentence for someone who is not looking for one. The
   instruction sits above the row and stays there, and the count tells you
   how much there is to look through. */
.cc3 .cc-hint{ display: inline-flex; }
.cc3 .ag-i:hover, .cc3 .mp-i:hover{ background: #EEF4FE; }
.cc3 .is-sel .cc-nm{ text-decoration: none; }
.cc3 .cc-cue{
  display: block; margin-top: 3px; font-size: 8.6px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--k); opacity: .72;
}
.cc3 .mp-i .cc-cue{ margin: 0 0 0 auto; align-self: center; padding-left: 8px; }
.cc3 .mp-i{ position: relative; }
.cc3 .is-sel .cc-cue{ opacity: 1; }

/* ==== CUE 4 · LINK LANGUAGE ==============================================
   The name behaves like a link, because a link is the one thing on a page
   everybody already knows is clickable. */
.cc4 .cc-nm{ color: var(--ink-2); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-color: var(--line-b); }
.cc4 .ag-i:hover .cc-nm, .cc4 .mp-i:hover .cc-nm{
  color: var(--k); text-decoration-style: solid; text-decoration-color: currentColor; }
.cc4 .is-sel .cc-nm{ color: var(--k); text-decoration-style: solid; text-decoration-color: currentColor; }
.cc4 .cc-cue{
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 9.4px; font-weight: 700; color: var(--k); opacity: 0;
  transition: opacity .18s ease;
}
.cc4 .cc-cue svg{ width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }
.cc4 .ag-i:hover .cc-cue, .cc4 .mp-i:hover .cc-cue, .cc4 .is-sel .cc-cue{ opacity: 1; }
.cc4 .mp-i .cc-cue{ margin: 2px 0 0; }

/* ==== CUE 5 · OPEN / CLOSE ===============================================
   The accordion convention: a plus that becomes a minus. It is the only one
   of the five that also tells you the card will close again. */
.cc5 .cc-cue{
  display: grid; place-items: center; width: 16px; height: 16px; margin: 5px auto 0;
  border-radius: 50%; border: 1px solid var(--line-b); background: var(--paper);
  color: var(--ink-3); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cc5 .cc-cue svg{ width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; }
.cc5 .cc-cue .cc-minus{ display: none; }
.cc5 .is-sel .cc-cue{ background: var(--k); border-color: var(--k); color: #fff; }
.cc5 .is-sel .cc-cue .cc-plus{ display: none; }
.cc5 .is-sel .cc-cue .cc-minus{ display: block; }
.cc5 .ag-i:hover .cc-cue, .cc5 .mp-i:hover .cc-cue{ border-color: var(--k); color: var(--k); }
.cc5 .mp-i .cc-cue{ margin: 0 0 0 auto; }
.cc5 .mp-i{ padding-right: 8px; }

/* ---------- the phone rail: every cue has to survive it ---------------- */
@media (max-width: 860px){
  .cc-hint{ font-size: 11.4px; }
  .cc1 .cc-cue, .cc5 .cc-cue{ margin-top: 4px; }
  .cc4 .cc-cue{ opacity: 1; }          /* there is no hover on a phone */
  .cc2 .ag-i{ padding: 8px 9px 9px; }
  .cc3 .ag-i:hover, .cc3 .mp-i:hover{ background: none; }
}

/* ---------- 861-1420px: family B gives the cue up ----------------------
   Measured, not guessed: a B pill at five across has 155-230px to hold a
   25px mark, the business name, its trade AND a cue. Shaving pixels off the
   cue moved the clipping around rather than removing it — at 861 it was the
   trade, at 1000 it was cue 4. So in this one band the per-card cue goes and
   the pill keeps its text intact. Nothing is lost that the band cannot say
   another way: cue 2 is the button surface itself, cue 4 still styles the
   name as a link, cue 3 still carries its instruction line above the row,
   and every card still lifts and presses on hover. Below 861 the rail gives
   the pill all the width it wants and every cue comes back.  */
@media (min-width: 861px) and (max-width: 1420px){
  .cc .mp-i .cc-cue{ display: none; }
  .cc .mp-i{ padding-right: 11px; }
}

/* the very bottom of the five-across grid, where the pill is narrowest */
@media (min-width: 861px) and (max-width: 900px){
  .cc .mp-i{ padding: 5px 6px 5px 4px; gap: 4px; }
  .cc .mp-m{ width: 22px; height: 22px; font-size: 8px; }
  .cc .mp-s{ font-size: 8.8px; letter-spacing: -.022em; }
  .cc .mp-i b{ font-size: 10.4px; }
}