/* ==================================================
   WORKSHOPOS — palette + bespoke sections

   Palette is lifted from the product's own token layer,
   converted from OKLCH to hex:
     paper (dark)    oklch(17.8% 0.013 260)  #191D24
     hi-vis          oklch(86.5% 0.196 118)  #C9F24A
     hv-ink          oklch(32%   0.075 122)  #3B4A12
   The product's accent is a hi-vis lime — the colour of
   workshop safety wear — so the case study inherits it
   rather than the portfolio's blueprint orange, the same
   way the other case pages take their product's palette.

   Lime is far too light to sit on the bone background as
   text, so --cs-accent-text is a deep olive derivative
   (#4F5E12, 7.1:1 on #F3EFE7). The lime itself is only
   ever used on ink or as a fill.
   ================================================== */

:root {
  --cs-ink: #191D24;
  --cs-hero-bg: #191D24;
  --cs-accent: #C9F24A;
  --cs-accent-text: #4F5E12;
  --cs-support: #C9F24A;
  --cs-soft: #F1F2ED;

  --wos-hv-ink: #3B4A12;
  --wos-graphite: #2A2F38;
}

/* Hero sits on the product's own graphite. */
.cs-hero { color: #F4F5F2; }
.cs-hero-sub { color: rgba(244, 245, 242, 0.72); }
.cs-hero-rail { border-top-color: rgba(244, 245, 242, 0.18); }
.cs-hero-meta dt { color: rgba(244, 245, 242, 0.5); }

/* Landscape software: give the cover more room than the phone-shaped cases. */
.workshopos .cs-hero-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
@media (max-width: 900px) {
  .workshopos .cs-hero-grid { grid-template-columns: 1fr; }
}
.workshopos .cs-hero-cover { border: 0; background: none; }

/* --------------------------------------------------
   SECTION NUMBER MOTIF — "01 / The problem"
-------------------------------------------------- */
.wos-num {
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.wos-num::after {
  content: ' / ';
  opacity: 0.5;
}

/* --------------------------------------------------
   BROWSER FRAME
   Reusable chrome for desktop app + marketing shots.

   <figure class="wos-frame cs-reveal">
     <div class="wos-browser">
       <div class="wos-browser-bar" aria-hidden="true">
         <span class="wos-dot"></span> x3
         <span class="wos-url">app.workshopos.io/jobs/10482</span>
       </div>
       <a class="cs-zoom" href="..." data-lightbox><img ...></a>
     </div>
     <figcaption>…</figcaption>
     <p>…</p>
   </figure>
-------------------------------------------------- */
.wos-frame { margin: clamp(30px, 4.5vh, 52px) 0 0; }

.wos-browser {
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--cs-line);
  /* layered shadow: contact, mid, ambient */
  box-shadow:
    0 1px 1px rgba(22, 19, 13, 0.05),
    0 8px 18px -8px rgba(22, 19, 13, 0.14),
    0 34px 60px -28px rgba(22, 19, 13, 0.30);
}
.cs-section--ink .wos-browser,
.cs-hero .wos-browser {
  border-color: rgba(244, 245, 242, 0.14);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.30),
    0 20px 44px -14px rgba(0, 0, 0, 0.55),
    0 48px 90px -40px rgba(0, 0, 0, 0.65);
}

.wos-browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #F4F4F1;
  border-bottom: 1px solid var(--cs-line);
}
.cs-section--ink .wos-browser-bar,
.cs-hero .wos-browser-bar {
  background: #23272F;
  border-bottom-color: rgba(244, 245, 242, 0.10);
}

.wos-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(22, 19, 13, 0.16);
  flex: none;
}
.cs-section--ink .wos-dot,
.cs-hero .wos-dot { background: rgba(244, 245, 242, 0.20); }

.wos-url {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(22, 19, 13, 0.42);
  background: rgba(22, 19, 13, 0.045);
  border-radius: 5px;
  padding: 4px 10px;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-section--ink .wos-url,
.cs-hero .wos-url {
  color: rgba(244, 245, 242, 0.45);
  background: rgba(244, 245, 242, 0.07);
}

.wos-browser .cs-zoom { display: block; }
.wos-browser img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------
   DEVICE FRAME — pure-CSS bezel for tablet + phone shots
-------------------------------------------------- */
.wos-device {
  background: #14171C;
  border-radius: 26px;
  padding: 12px;
  box-shadow:
    0 1px 2px rgba(22, 19, 13, 0.10),
    0 14px 30px -12px rgba(22, 19, 13, 0.28),
    0 40px 70px -34px rgba(22, 19, 13, 0.38),
    inset 0 0 0 1px rgba(244, 245, 242, 0.08);
  max-width: 380px;
  margin-inline: auto;
}
.wos-device--tablet { border-radius: 22px; padding: 14px; max-width: 560px; }
.wos-device .wos-screen {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
  display: block;
}
.wos-device--tablet .wos-screen { border-radius: 11px; }
.wos-device img { width: 100%; height: auto; display: block; }
/* speaker slit, phone only */
.wos-device:not(.wos-device--tablet) .wos-screen::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 5px;
  border-radius: 99px;
  background: rgba(244, 245, 242, 0.18);
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------
   SHARED figure furniture for framed shots
-------------------------------------------------- */
.wos-frame figcaption,
.wos-devices figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-accent-text);
  margin-top: 14px;
}
.cs-section--ink .wos-frame figcaption,
.cs-section--ink .wos-devices figcaption { color: var(--cs-support); }

.wos-frame > p,
.wos-devices figure > p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(22, 19, 13, 0.62);
  max-width: 62ch;
}
.cs-section--ink .wos-frame > p,
.cs-section--ink .wos-devices figure > p { color: var(--cs-dim-on-ink); }

/* a soft tint behind hero-weight shots */
.wos-bleed {
  margin-top: clamp(34px, 5vh, 60px);
  padding: clamp(26px, 4.5vw, 60px);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 242, 74, 0.13), transparent 62%),
    var(--cs-soft);
}
.cs-section--ink .wos-bleed {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 242, 74, 0.10), transparent 62%),
    rgba(244, 245, 242, 0.03);
}
.wos-bleed .wos-frame { margin-top: 0; }

/* --------------------------------------------------
   TWO DEVICES SIDE BY SIDE
-------------------------------------------------- */
.wos-devices {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: end;
  margin-top: clamp(30px, 4.5vh, 52px);
}
.wos-devices figure { margin: 0; min-width: 0; }
/* even split variant — must still collapse, so it is a class not an inline style:
   an inline grid-template-columns would beat the media query below. */
.wos-devices--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wos-devices--top { align-items: start; }
@media (max-width: 780px) {
  .wos-devices,
  .wos-devices--even { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------
   RESEARCH FINDING CARDS
-------------------------------------------------- */
.wos-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(32px, 5vh, 54px);
}
@media (max-width: 900px) { .wos-findings { grid-template-columns: 1fr; } }

.wos-finding {
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, 0.55);
}
.wos-finding-who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-accent-text);
}
.wos-finding h3 {
  margin: 12px 0 10px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.wos-finding p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(22, 19, 13, 0.72);
}
.wos-finding--counter {
  border-color: rgba(79, 94, 18, 0.42);
  background: rgba(201, 242, 74, 0.10);
}

/* --------------------------------------------------
   OPTION COMPARISON — choosing the central object
-------------------------------------------------- */
.wos-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(30px, 4.5vh, 50px);
}
@media (max-width: 900px) { .wos-options { grid-template-columns: 1fr; } }

.wos-option {
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  padding: clamp(20px, 2.4vw, 26px);
  position: relative;
}
.wos-option h3 {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}
.wos-option p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(22, 19, 13, 0.68);
}
.wos-option--chosen {
  border-color: var(--wos-hv-ink);
  background: rgba(201, 242, 74, 0.12);
  box-shadow: 0 0 0 1px var(--wos-hv-ink);
}
.wos-option-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--cs-accent);
  color: var(--wos-hv-ink);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 12px;
}
.wos-option-tag--muted {
  background: rgba(22, 19, 13, 0.06);
  color: rgba(22, 19, 13, 0.5);
}

/* --------------------------------------------------
   PROJECTED METRIC CARDS
   Every one carries a visible "Projected target" pill.
-------------------------------------------------- */
.wos-projections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(30px, 4.5vh, 50px);
}
@media (max-width: 1000px) { .wos-projections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .wos-projections { grid-template-columns: 1fr; } }

.wos-projection {
  border: 1px solid var(--cs-line-dark);
  border-radius: 10px;
  padding: clamp(20px, 2.4vw, 26px);
  background: rgba(244, 245, 242, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wos-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wos-hv-ink);
  background: var(--cs-accent);
  border-radius: 999px;
  padding: 5px 10px;
}
.wos-projection .big {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cs-support);
  font-variant-numeric: tabular-nums;
}
.wos-projection h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cs-on-ink);
}
.wos-projection p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cs-dim-on-ink);
}
.wos-projection .why {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 245, 242, 0.42);
}

/* --------------------------------------------------
   SCOPE CUTS
-------------------------------------------------- */
.wos-cuts { margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; list-style: none; }
.wos-cuts li {
  position: relative;
  padding: 18px 0 18px 30px;
  border-top: 1px solid var(--cs-line);
}
.wos-cuts li:last-child { border-bottom: 1px solid var(--cs-line); }
.wos-cuts li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 18px;
  color: var(--cs-accent-text);
  font-family: var(--mono);
  font-size: 13px;
}
.wos-cuts strong {
  display: block;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.012em;
  margin-bottom: 5px;
}
.wos-cuts span {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(22, 19, 13, 0.68);
}

/* --------------------------------------------------
   THE FIVE QUESTIONS the technician view answers
-------------------------------------------------- */
.wos-asks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(26px, 4vh, 40px);
  padding: 0;
  list-style: none;
  counter-reset: ask;
}
@media (max-width: 900px) { .wos-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wos-asks { grid-template-columns: 1fr; } }
.wos-asks li {
  border-top: 2px solid var(--cs-accent);
  padding-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cs-section--ink .wos-asks li { color: var(--cs-on-ink); }

/* --------------------------------------------------
   METHOD BOX — how the research was run
-------------------------------------------------- */
.wos-method {
  border: 1px solid var(--cs-line);
  border-left: 1px solid var(--cs-line);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.5);
  margin-top: clamp(28px, 4vh, 44px);
}
.wos-method h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-accent-text);
  margin: 0 0 14px;
  font-weight: 400;
}
.wos-method ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: q;
  display: grid;
  gap: 10px;
}
.wos-method li {
  counter-increment: q;
  position: relative;
  padding-left: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
}
.wos-method li::before {
  content: 'Q' counter(q);
  position: absolute;
  left: 0;
  top: 4px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--cs-accent-text);
}

/* --------------------------------------------------
   THE CONNECTED CHAIN — diagnosis to invoice
-------------------------------------------------- */
.wos-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 3.5vh, 38px);
  padding: 0;
  list-style: none;
}
.wos-chain li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  padding: 8px 14px;
}
.cs-section--ink .wos-chain li { border-color: var(--cs-line-dark); color: var(--cs-on-ink); }
.wos-chain li[data-arrow]::after {
  content: '→';
  margin-left: 12px;
  opacity: 0.45;
}
.wos-chain li.is-key {
  background: var(--cs-accent);
  color: var(--wos-hv-ink);
  border-color: transparent;
}

/* --------------------------------------------------
   ROLE GRID
-------------------------------------------------- */
.wos-roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(28px, 4vh, 44px);
}
@media (max-width: 900px) { .wos-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wos-roles { grid-template-columns: 1fr; } }
.wos-role {
  border: 1px solid var(--cs-line);
  border-radius: 9px;
  padding: 16px 18px;
}
.wos-role h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wos-role p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(22, 19, 13, 0.62);
}
.wos-role--floor {
  border-color: var(--wos-hv-ink);
  background: rgba(201, 242, 74, 0.12);
}

/* --------------------------------------------------
   Reduced motion: the shared case.js already respects it,
   but the frames add their own transitions.
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wos-browser, .wos-device { transition: none !important; }
}

/* --------------------------------------------------
   The shared chip is nowrap, which is right for short
   pairs but not for the surfaces list on a phone.
   Scoped to this page so the other case studies keep
   their single-line chips.
-------------------------------------------------- */
@media (max-width: 560px) {
  .workshopos .cs-chip {
    white-space: normal;
    max-width: 100%;
  }
}

/* --------------------------------------------------
   Live app links

   The hero one sits on graphite, so it borrows the lime
   directly. The closing CTA sits on bone, where lime as a
   fill behind ink type measures 13.6:1 and is safe.
-------------------------------------------------- */
.wos-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(22px, 3vh, 32px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cs-accent);
  text-decoration: none;
  /* 24px minimum target height (WCAG 2.2 SC 2.5.8): this link is
     standalone, so it does not get the inline-link exception. */
  padding: 2px 0 5px;
  border-bottom: 1px solid rgba(201, 242, 74, 0.34);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.wos-hero-live:hover,
.wos-hero-live:focus-visible { border-bottom-color: var(--cs-accent); }
.wos-hero-live svg { transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1); }
.wos-hero-live:hover svg { transform: translate(2px, -2px); }

.wos-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vh, 44px);
}
.wos-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cs-accent);
  color: var(--cs-ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 16px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1), background-color 0.32s ease;
}
.wos-cta-btn:hover,
.wos-cta-btn:focus-visible { background: #D8F778; transform: translateY(-2px); }
.wos-cta-btn svg { transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1); }
.wos-cta-btn:hover svg { transform: translate(3px, -3px); }

.wos-cta-alt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-accent-text);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(79, 94, 18, 0.3);
  transition: border-color 0.3s ease;
}
.wos-cta-alt:hover,
.wos-cta-alt:focus-visible { border-bottom-color: var(--cs-accent-text); }

@media (prefers-reduced-motion: reduce) {
  .wos-cta-btn, .wos-cta-btn svg, .wos-hero-live, .wos-hero-live svg { transition: none; }
  .wos-cta-btn:hover { transform: none; }
  .wos-cta-btn:hover svg, .wos-hero-live:hover svg { transform: none; }
}

/* --------------------------------------------------
   Chip contrast fix

   The shared .cs-chip paints itself with --cs-support.
   For the other case studies that is a mid-tone that
   survives on bone; here it is the hi-vis lime, which
   measures 1.15:1 on #F1F2ED at 10px — invisible.
   On light sections the chips take the olive derivative
   (6.2:1). Ink sections keep the lime, where it is fine.
-------------------------------------------------- */
.workshopos .cs-chip {
  color: var(--cs-accent-text);
  border-color: color-mix(in srgb, var(--cs-accent-text) 38%, transparent);
}
.workshopos .cs-section--ink .cs-chip {
  color: var(--cs-support);
  border-color: color-mix(in srgb, var(--cs-support) 40%, transparent);
}