/* Theme-only additions. The design system does not cover these — its launch
   pages have three flat nav items and no skip link. Kept out of the vendored
   files so re-vendoring stays a copy. */

.ws-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px;
  background: var(--raised); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); font: 500 var(--size-body)/1 var(--font-text); }
.ws-skip:focus { left: 12px; top: 12px; }

}

/* The nav styles every descendant link with !important, which also hits the
   Contact button and leaves dark text on the dark action colour. */
.s-nav__links a.wsl-btn { color: var(--on-action) !important; }
.s-nav__links a.wsl-btn:hover { color: var(--on-action) !important; }

/* Body copy inside a section. The design system has no prose class — its pages
   set paragraphs inline per block. */
.ws-prose { max-width: 64ch; display: grid; gap: 16px; }
.ws-prose p { font: 400 var(--size-body)/var(--leading-body) var(--font-text); color: var(--text-secondary); }
.s-split .ws-prose { max-width: none; }

/* Mobile menu. The system hides the desktop nav below 860px and leaves the
   panel undesigned; this is the "simple glass sheet" the handoff asks for. */
.ws-mob { display: none; position: relative; }
.ws-mob > summary { list-style: none; cursor: pointer; display: grid; place-items: center;
  width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); color: var(--text-primary); }
.ws-mob > summary::-webkit-details-marker { display: none; }
.ws-mob[open] > summary { background: color-mix(in oklch, var(--action) 10%, transparent); }
.ws-mob__panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  display: grid; gap: 2px; min-width: 240px; padding: 10px; }
.ws-mob__panel a { display: block; padding: 10px; border-radius: var(--radius-sm);
  font: 500 var(--size-body)/1 var(--font-text); color: var(--text-primary); }
.ws-mob__panel a.is-child { padding-left: 22px; color: var(--text-secondary); font-weight: 400; }
.ws-mob__panel a:hover { background: color-mix(in oklch, var(--action) 8%, transparent); }
.ws-mob__theme { margin-top: 6px; padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: none; color: var(--text-secondary);
  font: 500 var(--size-body)/1 var(--font-text); text-align: left; cursor: pointer; }

@media (max-width: 860px) { .ws-mob { display: block; } }

/* Tabs, driven by radios so they need no JavaScript. Arrow keys move between
   them because they are a radio group. The design system's tab bar is an
   underline, not a pill: .wsl-tabs supplies the gap and the bottom rule, and
   the active tab draws a 1.5px ::after. Overriding either broke the look, so
   this only supplies what a <label> cannot get from [aria-selected]. */
.ws-tabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ws-tabs__list { flex-wrap: wrap; }
.ws-tabs__list label { cursor: pointer; position: relative; }
.ws-tabs__panels > .ws-tabs__panel { display: none; }
.ws-tabs__panel { margin-top: var(--space-8); padding: var(--space-8); display: grid; gap: var(--space-4); justify-items: start; }
.ws-tabs__panel p { color: var(--text-secondary); max-width: 62ch; }

.ws-tabs > input:nth-of-type(1):checked ~ .ws-tabs__panels > .ws-tabs__panel:nth-child(1),
.ws-tabs > input:nth-of-type(2):checked ~ .ws-tabs__panels > .ws-tabs__panel:nth-child(2),
.ws-tabs > input:nth-of-type(3):checked ~ .ws-tabs__panels > .ws-tabs__panel:nth-child(3),
.ws-tabs > input:nth-of-type(4):checked ~ .ws-tabs__panels > .ws-tabs__panel:nth-child(4) { display: grid; }

/* Same treatment the system gives [aria-selected="true"]. */
.ws-tabs > input:nth-of-type(1):checked ~ .ws-tabs__list label:nth-child(1),
.ws-tabs > input:nth-of-type(2):checked ~ .ws-tabs__list label:nth-child(2),
.ws-tabs > input:nth-of-type(3):checked ~ .ws-tabs__list label:nth-child(3),
.ws-tabs > input:nth-of-type(4):checked ~ .ws-tabs__list label:nth-child(4) { color: var(--text-primary); }

.ws-tabs > input:nth-of-type(1):checked ~ .ws-tabs__list label:nth-child(1)::after,
.ws-tabs > input:nth-of-type(2):checked ~ .ws-tabs__list label:nth-child(2)::after,
.ws-tabs > input:nth-of-type(3):checked ~ .ws-tabs__list label:nth-child(3)::after,
.ws-tabs > input:nth-of-type(4):checked ~ .ws-tabs__list label:nth-child(4)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--action); }

.ws-tabs > input:focus-visible ~ .ws-tabs__list label { outline: 2px solid var(--action); outline-offset: 2px; }

/* Section rhythm. The design system's own pages put one content block under a
   .s-head; this theme's sections can carry prose and items together, and with
   no rule between them the gap collapsed to nothing in some places and doubled
   in others. */
.s-sec .s-wrap > .ws-prose + * { margin-top: clamp(32px, 4vw, 56px); }
.s-sec .s-wrap > .s-head + .ws-prose { margin-top: 0; }
.s-caps { border-top: 1px solid var(--border); }