/**
 * Technical resources — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained with neutral defaults. Themes restyle by setting the --krs-*
 * custom properties below, never by overriding selectors.
 *
 *   --krs-ink              titles, pin numbers
 *   --krs-body             legend text
 *   --krs-muted            sub-line, eyebrows, row meta, trailing glyphs
 *   --krs-accent           disclosure label, file glyph, focus ring
 *   --krs-chip-bg          "RESOURCES" chip background
 *   --krs-chip-ink         "RESOURCES" chip text
 *   --krs-badge-bg         difficulty chip background
 *   --krs-badge-ink        difficulty chip text
 *   --krs-surface          shell background
 *   --krs-sunken           pin-number cell background
 *   --krs-control          disclosure button background
 *   --krs-border           hairlines: body rule, row outlines
 *   --krs-border-strong    shell and disclosure borders
 *   --krs-border-hover     row outline under the pointer
 *   --krs-shadow           shell shadow
 *   --krs-radius           shell radius
 *   --krs-radius-sm        row radius
 *   --krs-radius-xs        chip and pin-cell radius
 *   --krs-font-display     block title
 *   --krs-font-mono        chips, eyebrows, pin labels, row meta
 *   --krs-column-min       width a column must fit in before the grid wraps
 *   --krs-collapse-duration  disclosure animation length
 *   --krs-scroll-margin    offset kept above the block when it is deep-linked
 *
 * Pin palette. These follow the convention every board silkscreen already
 * uses — red rail, orange rail, grey ground, green IO, blue bus — so the
 * defaults are readable before a theme has said anything:
 *
 *   --krs-pin-5v  --krs-pin-3v3  --krs-pin-gnd
 *   --krs-pin-gpio  --krs-pin-bus  --krs-pin-other
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without matching load order or specificity.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-resources {
  .kicked-resources {
    --krs-ink: #18181b;
    --krs-body: #52525b;
    --krs-muted: #a1a1aa;
    --krs-accent: #b91c1c;
    --krs-chip-bg: #18181b;
    --krs-chip-ink: #fff;
    --krs-badge-bg: #fef3c7;
    --krs-badge-ink: #b45309;
    --krs-surface: #fff;
    --krs-sunken: #f4f4f5;
    --krs-control: #fafafa;
    --krs-border: #e4e4e7;
    --krs-border-strong: #d4d4d8;
    --krs-border-hover: var(--krs-border-strong);
    --krs-shadow: 0 0.375rem 1.5rem rgb(0 0 0 / 5%);
    --krs-radius: 1.125rem;
    --krs-radius-sm: 0.6875rem;
    --krs-radius-xs: 0.3125rem;
    --krs-font-display: inherit;
    --krs-font-mono: ui-monospace, monospace;
    --krs-column-min: 18.75rem;
    --krs-collapse-duration: 0.3s;
    --krs-scroll-margin: 5rem;
    --krs-pin-5v: #c0392b;
    --krs-pin-3v3: #d98c3f;
    --krs-pin-gnd: #6b7280;
    --krs-pin-gpio: #178f5f;
    --krs-pin-bus: #3f7aa8;
    --krs-pin-other: #71717a;

    scroll-margin-top: var(--krs-scroll-margin);
  }

  /* The hover border is the row border pulled a little towards the accent, so
     it tracks whatever accent a theme sets and no theme has to go hunting for
     a matching tint.

     Behind @supports rather than as a second declaration, because the usual
     two-declaration fallback does not work for custom properties: a custom
     property accepts almost any token sequence, so an unsupported color-mix()
     still wins the cascade and only fails later, at which point border-color
     falls back to `unset` and not to the declaration above it. */
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .kicked-resources {
      --krs-border-hover: color-mix(in srgb, var(--krs-accent) 12%, var(--krs-border));
    }
  }

  /* --- Shell -------------------------------------------------------------- */

  .kicked-resources__shell {
    overflow: hidden;
    background: var(--krs-surface);
    border: 1px solid var(--krs-border-strong);
    border-radius: var(--krs-radius);
    box-shadow: var(--krs-shadow);
  }

  /* The whole row is the control, not just the pill on the right: the pill is
     what it looks like, but a 22px-tall target at the end of a wide header is
     the version that is hard to hit on a phone. */
  .kicked-resources__summary {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    width: 100%;
    padding: 1.125rem 1.375rem;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
  }

  .kicked-resources__chip {
    flex: none;
    padding: 0.1875rem 0.5rem;
    font-family: var(--krs-font-mono);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--krs-chip-ink);
    text-transform: uppercase;
    background: var(--krs-chip-bg);
    border-radius: var(--krs-radius-xs);
  }

  .kicked-resources__headline {
    flex: 1;
    min-width: 0;
  }

  .kicked-resources__title {
    display: block;
    font-family: var(--krs-font-display);
    font-size: 1.0625rem;
    line-height: normal;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--krs-ink);
  }

  .kicked-resources__sub {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.78125rem;
    line-height: normal;
    font-weight: 400;
    color: var(--krs-muted);
  }

  .kicked-resources__disclosure {
    display: inline-flex;
    flex: none;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--krs-accent);
    background: var(--krs-control);
    border: 1px solid var(--krs-border-strong);
    border-radius: 0.625rem;
  }

  .kicked-resources__chevron {
    display: inline-flex;
    transition: transform var(--krs-collapse-duration) ease;
  }

  .kicked-resources__summary[aria-expanded="true"] .kicked-resources__chevron {
    transform: rotate(180deg);
  }

  .kicked-resources__summary:focus-visible {
    outline: 0.125rem solid var(--krs-accent);
    outline-offset: -0.125rem;
  }

  /* --- Disclosure ---------------------------------------------------------
     Collapsed by animating grid-template-rows from 1fr to 0fr rather than by
     hiding the body: `hidden` cannot be transitioned, and a fixed max-height
     is a guess that clips the moment a board has 41 pins instead of 40.

     Selected from [aria-expanded] on the button rather than from a class, so
     there is exactly one thing to keep in sync — a class and an ARIA state
     that can disagree is how a block ends up visually open and announced as
     closed. */
  .kicked-resources__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--krs-collapse-duration) ease;
  }

  /* General sibling, not adjacent: the pre-paint stub <script> in the
     template sits between the summary and the body, and `+` silently stops
     matching across it — the panel then cannot close at all. There is one
     body per shell, so `~` selects exactly the same element. */
  .kicked-resources__summary[aria-expanded="false"] ~ .kicked-resources__body {
    grid-template-rows: 0fr;
  }

  .kicked-resources__inner {
    min-height: 0;
    overflow: hidden;
    visibility: visible;
    transition: visibility 0s;
  }

  /* Clipped content is still focusable, so it also has to leave the tab order.
     The delay holds it visible for the length of the collapse; on the way back
     the base rule has no delay, so it reappears with the row. */
  .kicked-resources__summary[aria-expanded="false"] ~ .kicked-resources__body .kicked-resources__inner {
    visibility: hidden;
    transition: visibility 0s linear var(--krs-collapse-duration);
  }

  .kicked-resources__content {
    padding: 1.125rem 1.375rem 1.375rem;
    border-top: 1px solid var(--krs-border);
  }

  .kicked-resources__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--krs-column-min), 1fr));
    gap: 1.75rem 2.5rem;
    align-items: start;
  }

  .kicked-resources__stack {
    display: flex;
    flex-direction: column;
    gap: 1.625rem;
  }

  .kicked-resources__eyebrow {
    margin: 0 0 0.75rem;
    font-family: var(--krs-font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--krs-muted);
    text-transform: uppercase;
  }

  /* --- Pin map ------------------------------------------------------------ */

  .kicked-pinout__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    margin-bottom: 0.875rem;
    font-family: var(--krs-font-mono);
    font-size: 0.6875rem;
    color: var(--krs-body);
  }

  .kicked-pinout__legend-item {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
  }

  .kicked-pinout__swatch {
    width: 0.6875rem;
    height: 0.6875rem;
    background: var(--krs-pin-other);
    border-radius: 0.1875rem;
  }

  .kicked-pinout__rows {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
  }

  /* The two number columns are fixed and the two label columns share what is
     left, so the numbers stay in a straight line down the middle whatever the
     labels do — which is what makes the two halves read as one connector
     rather than as two lists. */
  .kicked-pin {
    display: grid;
    grid-template-columns: 1fr 1.75rem 1.75rem 1fr;
    gap: 0.5rem;
    align-items: center;
  }

  .kicked-pinout--single .kicked-pin {
    grid-template-columns: 1.75rem 1fr;
  }

  .kicked-pin__number {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    font-family: var(--krs-font-mono);
    font-size: 0.6875rem;
    color: var(--krs-ink);
    background: var(--krs-sunken);
    border-radius: 0.375rem;
  }

  /* An unpopulated position keeps its cell so the rows below it do not shift
     up by half a connector. */
  .kicked-pin__number--empty {
    background: none;
  }

  .kicked-pin__name {
    overflow: hidden;
    font-family: var(--krs-font-mono);
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--krs-pin-other);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kicked-pin__name--end {
    text-align: right;
  }

  .kicked-pin__name--start {
    text-align: left;
  }

  /* One kind, two places it shows up: the label's text colour and the legend
     swatch's fill. The same modifier suffix drives both so a kind added to
     KickedResourcePin needs one pair of rules here and nothing else. */
  .kicked-pin__name--5v { color: var(--krs-pin-5v); }
  .kicked-pin__name--3v3 { color: var(--krs-pin-3v3); }
  .kicked-pin__name--gnd { color: var(--krs-pin-gnd); }
  .kicked-pin__name--gpio { color: var(--krs-pin-gpio); }
  .kicked-pin__name--bus { color: var(--krs-pin-bus); }
  .kicked-pin__name--other { color: var(--krs-pin-other); }

  .kicked-pinout__swatch--5v { background: var(--krs-pin-5v); }
  .kicked-pinout__swatch--3v3 { background: var(--krs-pin-3v3); }
  .kicked-pinout__swatch--gnd { background: var(--krs-pin-gnd); }
  .kicked-pinout__swatch--gpio { background: var(--krs-pin-gpio); }
  .kicked-pinout__swatch--bus { background: var(--krs-pin-bus); }
  .kicked-pinout__swatch--other { background: var(--krs-pin-other); }

  /* --- Document and tutorial rows ----------------------------------------- */

  .kicked-resources__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kicked-resource-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--krs-border);
    border-radius: var(--krs-radius-sm);
  }

  .kicked-resource-row:hover,
  .kicked-resource-row:focus-visible {
    border-color: var(--krs-border-hover);
  }

  .kicked-resource-row:focus-visible {
    outline: 0.125rem solid var(--krs-accent);
    outline-offset: 0.0625rem;
  }

  .kicked-resource-row__glyph {
    flex: none;
    color: var(--krs-accent);
  }

  .kicked-resource-row__badge {
    flex: none;
    padding: 0.1875rem 0.4375rem;
    font-family: var(--krs-font-mono);
    font-size: 0.625rem;
    color: var(--krs-badge-ink);
    text-transform: uppercase;
    background: var(--krs-badge-bg);
    border-radius: var(--krs-radius-xs);
  }

  .kicked-resource-row__text {
    flex: 1;
    min-width: 0;
  }

  .kicked-resource-row__title {
    display: block;
    font-size: 0.84375rem;
    line-height: normal;
    font-weight: 600;
    color: var(--krs-ink);
  }

  .kicked-resource-row__meta {
    display: block;
    font-family: var(--krs-font-mono);
    font-size: 0.6875rem;
    line-height: normal;
    color: var(--krs-muted);
  }

  .kicked-resource-row__meta:empty {
    display: none;
  }

  .kicked-resource-row__action {
    flex: none;
    color: var(--krs-muted);
  }

  /* --- Free-written prose --------------------------------------------------
     For sections authored as text rather than rows — the inline-datasheet
     starter: headings, paragraphs and a spec table, so a datasheet can be
     written straight into the page instead of linked. */

  .kicked-resources__prose {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--krs-body);
  }

  .kicked-resources__prose h3 {
    margin: 1.25rem 0 0.5rem;
    font-family: var(--krs-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--krs-ink);
  }

  .kicked-resources__prose h3:first-child {
    margin-top: 0;
  }

  .kicked-resources__prose p {
    margin: 0 0 0.75rem;
  }

  .kicked-resources__prose > :last-child {
    margin-bottom: 0;
  }

  .kicked-resources__prose table {
    width: 100%;
    margin: 0.5rem 0 1rem;
    font-size: 0.8125rem;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid var(--krs-border);
    border-radius: var(--krs-radius-sm);
  }

  .kicked-resources__prose th,
  .kicked-resources__prose td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--krs-border);
  }

  .kicked-resources__prose tr:first-child th,
  .kicked-resources__prose tr:first-child td {
    border-top: 0;
  }

  .kicked-resources__prose th {
    width: 42%;
    font-family: var(--krs-font-mono);
    font-size: 0.71875rem;
    font-weight: 400;
    color: var(--krs-muted);
  }

  .kicked-resources__prose td {
    font-weight: 600;
    color: var(--krs-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-resources__body,
    .kicked-resources__chevron,
    .kicked-resources__inner {
      transition: none;
    }
  }

  /* --- Narrow viewports ----------------------------------------------------
     The summary is three columns and a phone has room for one and a half: the
     headline was the flexible track, so it got squeezed into a sliver between
     the chip and the pill. It moves to its own full-width row instead; chip
     and disclosure share the first. */

  @media (max-width: 767.98px) {
    .kicked-resources__summary {
      flex-wrap: wrap;
      row-gap: 0.625rem;
      padding: 1rem 1.125rem;
    }

    .kicked-resources__headline {
      flex-basis: 100%;
      order: 1;
    }

    .kicked-resources__disclosure {
      margin-left: auto;
    }

    .kicked-resources__content {
      padding: 1rem 1.125rem 1.125rem;
    }
  }
}