/* --- Band 2: the action item card ---
   Full width by construction: a direct child of the page column. The
   verdict carries the tone and the body behind it is white, so the issue
   rows can tint to their own tone on hover without a wash on a wash.

   Every part takes a bare name nested under the root, so a name only has
   to be distinct inside the card. The card draws one of two bodies:
   `.single` for one problem or none, and `.multiple`, which adds the list
   beside the panels. Both hold their content as `.panels > .panel`, so a
   panel's padding has one owner whichever body it sits in.

   Share's dialog is drawn inside this card and has a .header and .panel
   elements of its own, so the card's rules for those two parts leave a house
   dialog's alone. The .header's exclusion is a :where so it adds no
   specificity, and .verdict's tone rule still beats the band's grey one. */

/* `overflow-wrap` is for the domain the copy names, one unbroken word that
   on a phone ran under the clip and out of sight (product-docs 180).
   `anywhere`, because `break-word` leaves min-content alone and a flex or
   grid parent still widens to it. */
.action-card {
  overflow: hidden;
  overflow-wrap: anywhere;
  border: 1px solid var(--tone);
  border-radius: var(--card-radius);
  background: var(--color-surface);

  &.bordered {
    border-left: 8px solid var(--tone);
  }

  .header:not(:where(.house-dialog *)) {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);

    h2 {
      margin: 0;
      font-size: 1.4rem;

      /* A live update changed the verdict (live_update_shows_change.js);
         live-changed-fade is application.css's. */
      &[data-changed] {
        animation: live-changed-fade 0.4s ease;
      }
    }

    p {
      margin: 0.2rem 0;
      color: var(--color-text-muted);
    }
  }

  .verdict {
    background: var(--tone-bg);
    border-bottom-color: var(--tone);
  }

  .panels > .panel {
    h3 {
      margin: 0.5rem 0;
      font-size: 1.25rem;
    }

    .kicker {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0;
    }

    .age {
      color: var(--color-text-muted);
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
    }

    /* .meaning, .evidence, .steps-heading and .steps: the problem's words,
       which a row's drawer draws too, so their rules are below the card. */

    /* The link out to the Scan behind the issue. Sits with the evidence
       rather than with the fix buttons -- it opens a reading, it does not
       act -- so it is drawn as the Summary list draws the same link, not as
       a button. */
    .scan {
      margin: 0.6rem 0;
      font-size: 0.9rem;
    }

    .actions {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .position {
      margin: 0 0 0.3rem;
      color: var(--color-text-muted);
      font-size: 0.85rem;
    }
  }

  /* A problem's Share (share.css) sits on the card's foot even when the open
     problem is shorter than the to-do list beside it: the panel stretches to
     the list and its problem takes the slack. Its own bottom padding goes, so
     the band's holds it off the card's edge. [hidden] stays display: none, so
     a hidden problem keeps no room. */
  .panels {
    display: flex;
    flex-direction: column;
  }

  .panel:has(> .share):not([hidden]) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding-bottom: 0;
  }

  .panel > .problem {
    flex: 1 0 auto;
  }
}

/* --- A problem's words: one shape, two places ---
   What a problem means, its evidence and how to fix it, in a card's panel
   and in the drawer of a Product Service row that opens onto its one Concern
   (sites/show/_service_concern), so the row reads its problem as the card
   does. Under :is() the card's parts keep the specificity they had nested. */
:is(.action-card .panels > .panel, .row-issue) {
  .meaning {
    margin: 0;
    max-width: 46rem;
    line-height: 1.6;
  }

  .evidence {
    margin: 0.7rem 0 0;
    padding-left: 1rem;
    color: var(--color-text-muted);

    li {
      margin: 0.2rem 0;
      overflow-wrap: anywhere;
    }
  }

  .steps-heading {
    margin: 1rem 0 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
  }

  .steps {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    max-width: 46rem;

    li {
      margin: 0.4rem 0;
      line-height: 1.55;
    }
  }
}

/* --- The list beside panels: one shape, two cards ---
   The action card's list of problems, and the list of kinds on a website's
   Unmonitored tab (sites/show/_unmonitored, site-unmonitored-tab 01), are one
   shape, so both draw it from this block and neither restates it. Each card
   keeps its own frame: Unmonitored's is beside the tab card in application.css. */
/* A panel is a section of its card, never a card on it, so it leaves
   application.css's `card` off. */
:is(.action-card .panels > .panel, .site-unmonitored .kind-panel) {
  padding: 1.25rem 1.5rem 1.5rem;

  /* A pick moves focus to what it opened (action_card_controller.js, hence
     the panel's tabindex), so a screen reader starts there; a pointer pick has
     no use for the ring that would draw. */
  &:focus:not(:focus-visible) {
    outline: none;
  }
}

:is(.action-card, .site-unmonitored) {
  .multiple {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    align-items: stretch;
  }

  /* The list: every problem, with your place in it, drawn whenever the
     card holds more than one. It comes first -- left, and folded above the
     steps on a phone -- and says what it is for, because a list beside or
     below a fix reads as more of the fix, and the User has to know she can
     switch.

     It groups by urgency (`fail` under "Fix these first", `degraded` under
     "When you can"), and the problems sit in a fixed window that scrolls,
     so ten problems cost the card what six do. The window shows a shadow at
     an edge with more beyond it (the local/scroll background pair); the
     line under it saying so is shown by action_card_controller.js, which
     alone can tell whether the list overflows.

     Folded in from the action-card UI prototype (2026-10-16,
     .claude/skills/prototype/UI.md) -- won out over tabs across the top, a
     checklist that opens in place, an overview of cards, and one problem at
     a time with numbered dots or a dropdown. Tabs became unreadable at ten
     problems, the checklist and overview grew with every problem, and the
     one-at-a-time drawings hid each problem behind a number. The full set
     stays on the throwaway branch prototype/action-card-multi-item, and the
     reasoning is in .scratch/action-card/prototype-multi-item/. */
  .list {
    padding: 1.25rem 1rem 1.25rem 1.25rem;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);

    /* The phone's folded list (the 58rem query below): one bar naming the
       open problem, which opens the list in place of the steps. Wider, the
       list is always out and the bar is not drawn. */
    .selection-toggle {
      display: none;
    }

    .heading {
      margin: 0;
      font-weight: 700;
    }

    .hint {
      margin: 0.2rem 0 0.8rem;
      color: var(--color-text-muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .scrollable {
      position: relative;
      max-height: 27rem;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 0.2rem 0.4rem 0.2rem 0.1rem;
      background:
        linear-gradient(var(--color-bg) 30%, transparent) top / 100% 2.5rem
          no-repeat local,
        linear-gradient(transparent, var(--color-bg) 70%) bottom / 100% 2.5rem
          no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.18), transparent)
          top / 100% 0.7rem no-repeat scroll,
        radial-gradient(
            farthest-side at 50% 100%,
            rgb(0 0 0 / 0.18),
            transparent
          )
          bottom / 100% 0.7rem no-repeat scroll;
    }

    .scroll {
      display: none;
      margin: 0.5rem 0 0;
      color: var(--color-text-muted);
      font-size: 0.8rem;
    }

    .scrollable.overflows + .scroll {
      display: block;
    }

    .group {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin: 0.6rem 0 0.4rem;

      &:first-child {
        margin-top: 0;
      }
    }

    .tally {
      padding: 0 0.5rem;
      border-radius: 999px;
      background: var(--tone-bg);
      letter-spacing: 0;
    }

    .items {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.7rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      color: var(--color-text);
      text-decoration: none;

      &:hover,
      &:focus-visible {
        border-color: var(--tone);
      }

      /* The window's padding is too thin to hold a ring drawn outside a row,
         and folded it has none, so the ring moves inside (application.css's
         focus ring). */
      &:focus-visible {
        outline-offset: -2px;
      }

      /* The open row says so three ways at once -- border, fill and a bar
         on its leading edge -- because it is the answer to "which steps am
         I reading". Folded, the bar's row answers that, and the look marks
         the row a pick would open instead (the 58rem query below).

         So the look is written twice, here and in that query: one block
         would have to choose by the open list's .picking rather than by
         width, and .picking outlives a widening (a tablet turned while the
         list is open), which would leave the wide list with no open row
         marked. */
      @media (width > 58rem) {
        &[aria-current] {
          border-color: var(--tone);
          background: var(--tone-bg);
          box-shadow: inset 4px 0 0 var(--tone);

          .arrow {
            color: var(--tone);
          }
        }
      }
    }

    .text {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    .title {
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.25;
    }

    .headline {
      color: var(--color-text-muted);
      font-size: 0.8rem;
      line-height: 1.3;
    }

    .arrow {
      font-size: 1.4rem;
      color: var(--color-text-muted);
    }
  }

  @media (max-width: 58rem) {
    .multiple {
      grid-template-columns: 1fr;
    }

    /* Stacked, the list would push the steps a screen down, so it folds
       behind a bar naming the open problem. Opened, the list takes the
       steps' place rather than sitting above them; a pick folds it again
       (action_card_controller.js).

       The whole bar is one button, but only the problem's row is boxed,
       drawn as the open row in the list is; the list's heading and hint
       above it are plain text, the heading beside the link that opens it
       and the hint running under both, so the menu does not say them
       again. Its caret is the list rows' own, turned to point down, since
       pressing it opens the list rather than the problem.

       Opened, the list's first row lands where the bar's row was: the menu
       sits off the bar by the toggle's own gap, and the window adds no
       padding. A pick names its row in the bar, so in the opened list the
       open row's look marks the row under the pointer, not the open one. */
    .list {
      --fold-gap: 0.5rem;
      padding: 0.9rem 1rem;
      border-right: 0;
      border-bottom: 1px solid var(--color-border);

      .selection-toggle {
        display: flex;
        flex-direction: column;
        gap: var(--fold-gap);
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-text);
        font: inherit;
        text-align: left;
        cursor: pointer;

        .selection {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          width: 100%;
          padding: 0.7rem;
          border: 1px solid;
          border-radius: var(--radius-sm);

          .arrow {
            transform: rotate(90deg);
          }
        }

        .bar {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 0.1rem 0.5rem;
          align-items: baseline;
          color: var(--color-text-muted);
          font-size: 0.8rem;
        }

        .heading {
          color: var(--color-text);
          font-size: 0.9rem;
        }

        .hint {
          grid-column: 1 / -1;
          margin: 0;
          font-size: 0.8rem;
        }

        /* nowrap, since both cards' overflow-wrap: anywhere would otherwise
           let the link shrink onto two lines. */
        .open,
        .close {
          grid-area: 1 / 2;
          color: var(--tone);
          font-weight: 700;
          white-space: nowrap;
        }

        .current {
          display: flex;
          flex: 1;
          align-items: center;
          gap: 0.6rem;
          min-width: 0;
        }

        &[aria-expanded="true"] .selection {
          display: none;
        }

        /* Hidden, not gone, so the cell keeps the wider of the two and the
           heading beside it wraps the same open as folded ("Cambiar" and
           "Cerrar" differ). */
        &[aria-expanded="true"] .open,
        &:not([aria-expanded="true"]) .close {
          visibility: hidden;
        }
      }

      /* The open row's look, which the wide list writes for itself: why, at
         the list's .item above. */
      :is(.selection-toggle .selection, .menu .item:is(:hover, :focus-visible)) {
        border-color: var(--tone);
        background: var(--tone-bg);
        box-shadow: inset 4px 0 0 var(--tone);

        .arrow {
          color: var(--tone);
        }
      }

      .menu {
        display: none;
        margin-top: var(--fold-gap);

        > :is(.heading, .hint) {
          display: none;
        }
      }

      .scrollable {
        padding: 0;
      }
    }

    .multiple.picking {
      .list {
        border-bottom: 0;
      }

      .menu {
        display: block;
      }

      .panels {
        display: none;
      }
    }
  }
}