/* ===============================================================
   TOOLDUCK — Social Media Maker workspace
   ===============================================================
   The product front page as a workspace rather than a documentation
   page: a contextual sidebar, a wide hero with real template previews,
   a format selector, and a gallery that is the point of the page.

   THREE CONTENT WIDTHS, DELIBERATELY DIFFERENT
   -------------------------------------------
     hero text      620px   readable
     gallery        all of it — the extra desktop width is for previews
     SEO prose      68ch    readable

   The previous version gave every section the same 1200px column, which
   is why a 1920px monitor showed a narrow strip with large empty margins
   on both sides. Widening a paragraph would be the wrong fix; widening
   the gallery is the right one.
   =============================================================== */

/* ===============================================================
   Account dashboard
   =============================================================== */

.dash { display: grid; gap: 1.5rem; }

.dash__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.dash__head h1 { margin: 0 0 .25rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.dash__lede { margin: 0; font-size: .9rem; color: var(--ink-3); }

.dash__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
}

.dash__tabs a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink-2);
  text-decoration: none;
}

.dash__tabs a:hover { border-color: var(--brand); color: var(--brand); }

.dash__n { font-size: .72rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.dash__section { display: grid; gap: .7rem; scroll-margin-top: calc(var(--header-h) + 1rem); }

.dash__section h2 {
  margin: 0;
  font-size: 1.05rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.dash__count { font-size: .8rem; font-weight: 650; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dash__note { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink-3); }

.dash__empty {
  margin: 0;
  padding: 1.4rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-3);
  font-size: .88rem;
  text-align: center;
}

/* ---- saved designs ---- */
.dashlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .7rem;
}

.dashcard {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "poster body" "poster actions";
  gap: .2rem .8rem;
  align-content: center;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}

.dashcard__poster {
  grid-area: poster;
  width: 72px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.dashcard__poster canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.dashcard__body { grid-area: body; display: grid; gap: .15rem; min-width: 0; }

.dashcard__name {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashcard__meta { margin: 0; font-size: .74rem; color: var(--ink-4); }

.dashcard__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: .35rem; align-self: end; }
.dashcard__actions .sobtn { font-size: .78rem; padding: .35rem .6rem; min-height: 32px; }

/* ---- uploads ---- */
.dashuploads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .5rem;
}

.dashupload {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.dashupload__name {
  margin: 0;
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashupload__dims { margin: 0; font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dashupload__when { margin: 0; font-size: .7rem; color: var(--ink-4); }

/* ---- downloads ---- */
.dashtable {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

.dashtable th,
.dashtable td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
}

.dashtable th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.dashtable td { color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .dashlist { grid-template-columns: minmax(0, 1fr); }
  .dash__head .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Template cards, workspace edition
   The base card lives in social.css; these are the parts the visual-first
   card needs on top of it.
   -------------------------------------------------------------- */
.socard__poster {
  position: relative;
  /* A fixed tile shape, not the template's own ratio. A grid of square,
     portrait and 9:16 previews at their true ratios gives every row a
     different height, which reads as broken rather than as faithful. The
     preview is fitted inside the tile WITHOUT being cropped or stretched,
     so it is still undistorted — just letterboxed.

     The tile is the story and reel shape, because those are what this
     product is for. It was 4:5, which made a library of stories and reel
     covers read as a set of near-square cards with the tall work reduced
     to a strip in the middle. Square and landscape templates letterbox
     inside a tall tile instead, which is the honest way round: the shape
     of the tile now says what the tool makes. */
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  align-content: center;
  padding: .5rem;
  min-height: 0;
}

.socard__canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.socard__like {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
  color: var(--ink-3);
  font-size: 1rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.socard__like:hover { color: var(--err); border-color: var(--err); }
.socard__like:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.socard__like[aria-pressed="true"] { color: var(--err); border-color: var(--err); background: var(--err-bg); }

.socard__body { gap: .3rem; padding: .6rem .7rem .7rem; }

.socard__name { font-size: .88rem; }
.socard__name a { color: inherit; text-decoration: none; }
.socard__name a:hover { color: var(--brand); text-decoration: underline; }

.socard__metaline {
  margin: 0 0 .15rem;
  font-size: .74rem;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

.socard__dot { margin-inline: .3rem; opacity: .7; }

/* ---------------------------------------------------------------
   The shell: sidebar + main
   -------------------------------------------------------------- */
.sows {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  min-width: 0;
}

.sows__side {
  position: sticky;
  top: calc(var(--header-h) + .75rem);
  display: grid;
  gap: .15rem;
  align-content: start;
  max-height: calc(100vh - var(--header-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .25rem;
}

.sows__main {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.sows__group { display: grid; gap: .1rem; }

.sows__groupTitle {
  margin: .9rem 0 .3rem;
  padding: 0 .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.sows__group:first-child .sows__groupTitle { margin-top: .2rem; }

.sows__link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid transparent;
  /* Stated rather than inherited, because this class is used on <a> and
     <button> alike. An anchor defaults to a transparent background, but a
     button takes the platform's button face — rgb(239,239,239) in Chrome —
     so the four format shortcuts rendered as light grey blocks in every
     theme, the dark one included, where they were the brightest thing on
     the screen. */
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* The link's colour, hover and active states are defined once, for both
   products, in main.css — see "Product navigation: ONE state language".
   Only what is specific to this sidebar lives here. */
.sows__link--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 650;
  justify-content: center;
}

.sows__link--primary .icon { color: currentColor; }
.sows__link--primary:hover { background: var(--brand-strong); color: var(--on-brand); }

.sows__count {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.sows__divider {
  height: 1px;
  margin: .6rem .55rem;
  background: var(--border);
}

/* Collapsible category list. Native <details>, so it works with the
   keyboard and with JavaScript off — a 20-item list that can only be
   collapsed by script is a list that is always open. */
.sows__fold > summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

.sows__fold > summary::-webkit-details-marker { display: none; }
.sows__fold > summary:hover { background: var(--bg-soft); color: var(--ink); }
.sows__fold > summary .icon { width: 15px; height: 15px; color: var(--ink-4); }
.sows__fold[open] > summary .icon { color: var(--brand); }
.sows__fold > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sows__foldBody { display: grid; gap: .05rem; padding-left: .5rem; }

/* The mobile trigger. Hidden until the sidebar is a drawer. */
.sows__drawerBtn {
  display: none;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  cursor: pointer;
}

.sows__drawerBtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sows__drawerBtn .icon { width: 16px; height: 16px; color: var(--brand); }

/* ---------------------------------------------------------------
   Hero
   -------------------------------------------------------------- */
.sohero2 {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: .5rem 0 0;
  min-width: 0;
}

.sohero2__eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

.sohero2 h1 {
  margin: 0 0 .7rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 18ch;
}

.sohero2__lede {
  margin: 0 0 1rem;
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 48ch;
}

.sohero2__benefits {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
}

.sohero2__benefits li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
}

.sohero2__benefits .icon { width: 14px; height: 14px; color: var(--ok); flex: none; }

.sohero2__cta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---- the collage ----
   Real template previews, painted by the same engine as the gallery, so
   the hero cannot advertise a design the product does not have. */
.sohero2__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  min-width: 0;
}

.sohero2__fan {
  position: relative;
  width: 100%;
  max-width: 520px;
  /* The height follows the SHAPE OF THE SELECTED FORMAT, not a fixed
     number.

     It used to be a hardcoded 5 / 2, which is correct only for 4:5 tiles.
     A 9:16 story tile is nearly twice as tall at the same width, so
     choosing "Instagram Story" left the tiles hanging out of the bottom of
     the collage and over the format selector below. The value is now set
     by the gallery script from the chosen size — see heroFanAspect() in
     social-gallery.js for the derivation — and the fallback below is the
     4:5 case the page renders before any script runs. */
  aspect-ratio: var(--hero-aspect, 2.72);
}

.sohero2__tile {
  position: absolute;
  top: 50%;
  /* Both the size and the position are PERCENTAGES OF THE FAN, not
     pixels. The first version used pixel offsets, which fitted the column
     at 1920 and overflowed the page at 1280 — the fan is inside a column
     whose width depends on the viewport and whether the sidebar is
     showing, so a fixed offset can only ever be right at one width. At
     26% the tile scales with the column, and the outer edges land at 1%
     and 99% whatever the column happens to be. */
  width: 26%;
  left: 50%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 22px 40px -22px rgba(2, 6, 23, .75);
  transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s, 1));
  transition: transform .25s ease;
}

.sohero2__tile:nth-child(1) { left: 16%; --r: -11deg; --s: .86; z-index: 1; }
.sohero2__tile:nth-child(2) { left: 33%; --r: -5deg;  --s: .95; z-index: 2; }
.sohero2__tile:nth-child(3) { left: 50%; --r: 0deg;   --s: 1;   z-index: 3; }
.sohero2__tile:nth-child(4) { left: 67%; --r: 5deg;   --s: .95; z-index: 2; }
.sohero2__tile:nth-child(5) { left: 84%; --r: 11deg;  --s: .86; z-index: 1; }

/* Fewer previews than five, which happens when a format is offered by
   only a few templates. The five positions above assume a full row, so
   three or four previews would sit off-centre with a hole on the right.
   The count is stamped on the fan by the script (and by the view for the
   first paint), so the positions follow the number actually present. */
[data-so-hero-count="4"] .sohero2__tile { width: 30%; }
[data-so-hero-count="4"] .sohero2__tile:nth-child(1) { left: 20%; --r: -10deg; }
[data-so-hero-count="4"] .sohero2__tile:nth-child(2) { left: 41%; --r: -4deg; }
[data-so-hero-count="4"] .sohero2__tile:nth-child(3) { left: 62%; --r: 4deg; }
[data-so-hero-count="4"] .sohero2__tile:nth-child(4) { left: 83%; --r: 10deg; }

[data-so-hero-count="3"] .sohero2__tile { width: 36%; }
[data-so-hero-count="3"] .sohero2__tile:nth-child(1) { left: 24%; --r: -9deg; }
[data-so-hero-count="3"] .sohero2__tile:nth-child(2) { left: 50%; --r: 0deg; }
[data-so-hero-count="3"] .sohero2__tile:nth-child(3) { left: 76%; --r: 9deg; }

[data-so-hero-count="2"] .sohero2__tile { width: 42%; }
[data-so-hero-count="2"] .sohero2__tile:nth-child(1) { left: 32%; --r: -7deg; }
[data-so-hero-count="2"] .sohero2__tile:nth-child(2) { left: 68%; --r: 7deg; }

[data-so-hero-count="1"] .sohero2__tile { width: 52%; }
[data-so-hero-count="1"] .sohero2__tile:nth-child(1) { left: 50%; --r: -3deg; }


.sohero2__tile canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-muted);
}

/* The ambient ground behind the collage.
   `inset: 0`, NOT a negative horizontal inset. The first version used
   `inset: 6% -8%` so the glow would bleed past the collage — which made
   the element wider than its container and gave every page width a real
   horizontal scrollbar (59px at 1024, 19px at 1440). A decorative glow
   must not be able to move the layout. */
.sohero2__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--brand) 30%, transparent) 0%,
      transparent 68%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

/* ---------------------------------------------------------------
   Format selector
   -------------------------------------------------------------- */
.soformats { min-width: 0; }

.soformats__label {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.soformats__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .5rem;
}

/* A real radio input, visually replaced. Using a button would mean
   managing aria-checked by hand and losing the arrow-key behaviour. */
.soformat {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
}

/* ------------------------------------------------------------------
   The video tile in the "Create for" row
   ------------------------------------------------------------------
   The only tile in that row that is a link rather than a radio, because
   it leads to a different library instead of selecting a still canvas.
   Untreated it wears the browser's default anchor styling — underlined
   and brand blue — in a row of tiles that are neither, which reads as a
   stray link sitting among controls.

   Styled to be indistinguishable from its neighbours until hovered, so
   the row still reads as one set of choices. The hover state is the
   radio tiles' own checked treatment, because hovering it is the closest
   thing this tile has to being selected.
   ------------------------------------------------------------------ */
.soformat--video {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.soformat--video:hover .soformat__icon {
  background: var(--brand);
  color: var(--on-brand);
}

.soformat--video:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.soformat input { position: absolute; opacity: 0; pointer-events: none; }

.soformat:hover { border-color: var(--border-strong); }

.soformat:has(input:checked) {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--brand-border),
    0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent);
}

/* Stronger text, not a filled block. The selected size is a choice,
   not a button that was pressed, so it is marked by its border, a soft
   halo and a brighter label — the same language the sidebar and the
   global navigation use. */
.soformat:has(input:checked) .soformat__name { color: var(--brand-strong); }

.soformat:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.soformat__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg-muted);
  color: var(--ink-3);
}

.soformat:has(input:checked) .soformat__icon { background: var(--brand); color: var(--on-brand); }
.soformat__icon .icon { width: 15px; height: 15px; }

.soformat__text { display: grid; min-width: 0; }
.soformat__name { font-size: .82rem; font-weight: 650; color: var(--ink); }
.soformat__dims {
  font-size: .7rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.soformat:has(input:checked) .soformat__dims { color: var(--ink-3); }

/* ---------------------------------------------------------------
   Continue designing / popular
   -------------------------------------------------------------- */
.socontinue { display: grid; gap: .6rem; }
.socontinue__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.socontinue__head h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }

/* ---- recent designs ---- */
.socontinue [data-so-yourwork-body] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem;
}

.soresume {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}

.soresume__poster {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.soresume__poster canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.soresume__meta { display: grid; gap: .1rem; min-width: 0; }

.soresume__name {
  margin: 0;
  font-size: .86rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soresume__when { margin: 0; font-size: .72rem; color: var(--ink-4); }

.socontinue .sobtn { flex: none; }

/* ---------------------------------------------------------------
   Gallery
   -------------------------------------------------------------- */
.sogallery { display: grid; gap: .9rem; min-width: 0; }

.sogallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem .9rem;
}

.sogallery__title {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  font-size: 1.15rem;
}

.sogallery__count {
  font-size: .8rem;
  font-weight: 650;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.sogallery__search {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 260px;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 .7rem;
  color: var(--ink-4);
}

.sogallery__search:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }

.sogallery__search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  padding: .55rem 0;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.sogallery__search input:focus { outline: none; }

/* ---- toolbar ---- */
.sotool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.sotool__chips { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }

.sotool__chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.sotool__chip:hover { border-color: var(--brand); color: var(--brand); }
.sotool__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sotool__chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.sotool__chipCount { font-size: .7rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.sotool__chip[aria-pressed="true"] .sotool__chipCount { color: color-mix(in srgb, var(--on-brand) 75%, transparent); }

/* The extra categories, revealed on demand. They are real links to their
   own pages, which is what keeps twenty category pages crawlable without
   twenty chips on the first screen. */
.sotool__more { display: contents; }
.sotool__more[hidden] { display: none; }

.sotool__selects {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-left: auto;
}

.sotool__selects select {
  font: inherit;
  font-size: .8rem;
  padding: .38rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  max-width: 15rem;
}

.sotool__selects select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }

.sotool__status {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-4);
}

/* ---- the grid ---- */
/* Explicit column counts rather than auto-fill: the requirement is five
   across on a desktop and two on a phone, and auto-fill decides for
   itself based on a minimum card width, which produced four columns with
   a wide empty margin on a large monitor. */
.sogrid2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1500px) { .sogrid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .sogrid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .sogrid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sogrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px)  { .sogrid2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.sogallery__empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-3);
  font-size: .9rem;
}

/* ---------------------------------------------------------------
   How it works + formats + prose
   -------------------------------------------------------------- */
.sosteps {
  list-style: none;
  margin: 0;
  padding: .9rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.sostep { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }

.sostep__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
}

.sostep__icon .icon { width: 16px; height: 16px; }
.sostep__text { display: grid; gap: .1rem; min-width: 0; }
.sostep__num { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--brand); }
.sostep__text strong { font-size: .86rem; color: var(--ink); }
.sostep__text span { font-size: .78rem; line-height: 1.45; color: var(--ink-3); }

.somats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .6rem;
}

.somat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .7rem .8rem;
  display: grid;
  gap: .3rem;
}

.somat h3 { margin: 0; font-size: .86rem; }
.somat__dims { margin: 0; font-size: .78rem; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.somat__meta { margin: 0; font-size: .7rem; color: var(--ink-4); }

.soprose { min-width: 0; }

.soprose {
  max-width: 68ch;
  display: grid;
  gap: 1.25rem;
}

.soprose h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.soprose p { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.65; color: var(--ink-3); }

.socatlinks { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------------------------------------------------------------
   Responsive
   -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .sows { grid-template-columns: minmax(0, 1fr); }
  .sows__side {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .sows__side.is-open { display: grid; }
  .sows__drawerBtn { display: inline-flex; }
  .sohero2 { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .sohero2 h1 { max-width: none; }
  .sohero2__art { min-height: 0; }
  /* Narrower than the hero text column, so the fan is not the widest
     thing on a stacked layout. */
  .sohero2__fan { max-width: 460px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .sohero2__cta .btn { flex: 1 1 100%; justify-content: center; }
  .sotool__selects { margin-left: 0; width: 100%; }
  .sotool__selects select { flex: 1 1 46%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sohero2__tile { transition: none; }
}