/* ============================================================
   SGELA — SURFACE.  The tubik execution, our brand.

   Used by BOTH the platform and the marketing site. The `.ap-`
   prefix is historical — it was written for the app first and the
   class names were left alone rather than churn every file.

   Layers on tokens.css + components.css. Every value is a var().

   WHAT CHANGES FROM DIRECTION B, AND WHY
   The reference separates things by COLOUR and OVERLAP, not by
   outline. A card in a stack sits on a card of a different
   colour, and the band of the card behind is the edge. So a
   stacked card carries NO 2px stroke — adding one back is the
   single fastest way to stop looking like the reference.

   The stroke is not deleted from the system. It still does its
   job wherever a block sits on the ground rather than on another
   block: circle buttons, dot pills, the phone frame.

   THE FIVE MOVES
     1. the screen is one full-bleed brand colour
     2. cards stack and overlap, big top radius, no stroke
     3. circular icon buttons, top-left back / top-right action
     4. dot pills — a colour dot, then a short label
     5. one oversized uppercase screen title
   ============================================================ */

/* Our controls are <button>. With appearance:auto the native
   control keeps its own ButtonFace background and our fill is
   ignored — which rendered the active tab as near-white text on
   light grey, 1.11:1. Reset it once, here, for all of them. */
.ap-circ, .ap-card, .ap-tabs button { appearance: none; -webkit-appearance: none; }

/* ─────────── The screen ───────────
   A whole screen is one block colour. The colour still means what
   it means in tokens.css — it is just the ground now rather than
   a card on it. */
.ap {
  position: relative; display: flex; flex-direction: column;
  min-height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  /* The screen, not the viewport, is what the title scales to —
     these screens are shown several-up in a gallery. */
  container-type: inline-size;
}
.ap--indigo { background: var(--indigo); color: var(--on-indigo); }
.ap--spark  { background: var(--spark);  color: var(--on-spark); }
.ap--growth { background: var(--growth); color: var(--on-growth); }
.ap--danger { background: var(--danger); color: var(--on-danger); }
.ap--ink    { background: var(--ink);    color: var(--on-ink); }
.ap--warm   { background: var(--paper-warm); }

/* ─────────── Screen chrome ─────────── */
.ap__bar { display: flex; align-items: center; gap: var(--space-2);
           padding: var(--space-2) var(--space-2) var(--space-1); }
.ap__title { font-family: var(--font-display);
             font-size: clamp(26px, 13cqi, var(--text-screen)); min-width: 0;
             line-height: var(--lh-tight); letter-spacing: var(--track-caps);
             text-transform: uppercase; margin: 0; }
.ap__sub { padding: 0 var(--space-2) var(--space-2); }

/* The circular icon button. This one keeps its stroke — it sits
   on the screen colour, not on another card. */
.ap-circ {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: var(--stroke); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink);
  cursor: pointer; padding: 0; font: inherit;
  transition: transform var(--dur-ui) var(--ease);
}
.ap-circ svg { width: 17px; height: 17px; stroke: currentColor; fill: none;
               stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ap-circ:hover { transform: scale(1.08); }
.ap-circ:active { transform: scale(.94); }
.ap-circ:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.ap-circ--ink { background: var(--ink); color: var(--on-ink);
                border-color: var(--ink-fixed); }

/* ─────────── The stack ───────────
   The signature. Cards ride up over the card behind; the visible
   band of the one behind is the separator. No stroke, no blur. */
.ap-stack { display: flex; flex-direction: column;
            padding: 0 var(--space-2) var(--space-2); }
.ap-card {
  position: relative; border: none; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer; display: block;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-2) var(--space-3);
  transition: transform var(--dur-ui) var(--ease);
}
.ap-card + .ap-card { margin-top: var(--stack-overlap); }
/* Later cards sit in front, so the stack reads top-to-bottom. */
.ap-card:nth-child(1) { z-index: 1 } .ap-card:nth-child(2) { z-index: 2 }
.ap-card:nth-child(3) { z-index: 3 } .ap-card:nth-child(4) { z-index: 4 }
.ap-card:nth-child(5) { z-index: 5 } .ap-card:nth-child(6) { z-index: 6 }
.ap-card--collapsed { padding-bottom: calc(var(--stack-peek) - var(--space-2)); }
.ap-card:hover  { transform: translateY(-3px); }
.ap-card:active { transform: translateY(1px); }
.ap-card:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }

.ap-card--indigo { background: var(--indigo); color: var(--on-indigo); }
.ap-card--spark  { background: var(--spark);  color: var(--on-spark); }
.ap-card--growth { background: var(--growth); color: var(--on-growth); }
.ap-card--danger { background: var(--danger); color: var(--on-danger); }
.ap-card--ink    { background: var(--ink);    color: var(--on-ink); }
.ap-card--warm   { background: var(--paper-warm); color: var(--ink); }

/* A card in a LIST sits on the ground, not on another card, so nothing
   draws its edge for it. Paper on paper-warm is a 1.08:1 step — real,
   but far too quiet to separate three choices. The flat offset shadow
   does it, and it is the device the buttons and inputs already use. */
.ap-card--raised { box-shadow: var(--drop-sm); }

.ap-card__kicker { font-family: var(--font-body); font-weight: 600;
                   font-size: var(--text-label); letter-spacing: var(--track-caps);
                   text-transform: uppercase; }
.ap-card__title { font-family: var(--font-display); font-size: var(--text-h2);
                  line-height: var(--lh-tight); letter-spacing: var(--track-caps);
                  text-transform: uppercase; margin: 4px 0 0; }
.ap-card__head { display: flex; align-items: flex-start; gap: var(--space-2); }
.ap-card__head .ap-circ { margin-left: auto; }

/* NO OPACITY ON TEXT in this layer. Our fills are saturated enough
   that transparency is not available as a hierarchy device: a 75%
   foreground measures 3.60:1 on growth and 3.82:1 on danger, and
   even 90% only reaches 4.45:1. Quietness comes from SIZE, TRACKING
   and CASE — the same way the rest of the system gets its heft.
   The only opacity below is on bars and rules, which carry no text. */

/* ─────────── List ───────────
   The stack says "this one is in front." Answer options are a list of
   EQUALS, so they get their own container: same cards, spaced, never
   overlapping. Overlapping same-coloured cards on a light ground merge
   into one shape — the ink screen was hiding that. */
.ap-list { display: flex; flex-direction: column; gap: var(--space-1);
           padding: 0 var(--space-2) var(--space-2); list-style: none; margin: 0; }
.ap-list .ap-card + .ap-card { margin-top: 0; }

/* ─────────── Dot pill ───────────
   A colour dot then a short label. Always on the paper fill, so
   it reads on any screen colour. */
.ap-dot {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-pill); padding: 6px var(--space-1) 6px 7px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-label);
  letter-spacing: .02em; white-space: nowrap;
}
.ap-dot::before { content: ""; width: 13px; height: 13px; flex: none;
                  border-radius: var(--radius-pill); background: var(--grey); }
.ap-dot--indigo::before { background: var(--indigo) }
.ap-dot--spark::before  { background: var(--spark) }
.ap-dot--growth::before { background: var(--growth) }
.ap-dot--danger::before { background: var(--danger) }
.ap-dot--ink::before    { background: var(--ink-fixed) }
.ap-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }

/* ─────────── Numbers ───────────
   The reference leads with one enormous figure and a small
   delta beside it. */
.ap-figure { font-family: var(--font-display); font-size: var(--text-stat);
             line-height: var(--lh-tight); letter-spacing: var(--track-stat);
             display: block; }
.ap-row { display: flex; align-items: baseline; gap: var(--space-1);
          justify-content: space-between; }

/* ─────────── Bar series ───────────
   Flat bars, one highlighted. No axis, no gridlines, no gradient. */
.ap-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px;
           margin-top: var(--space-2); }
.ap-bars__b { flex: 1 1 0; border-radius: var(--radius-sm) var(--radius-sm) 3px 3px;
              background: currentColor; opacity: .32; min-height: 5px; }
.ap-bars__b--on { opacity: 1; }
.ap-scale { display: flex; gap: 5px; margin-top: 7px; }
.ap-scale span { flex: 1 1 0; text-align: center; font-family: var(--font-body);
                 font-weight: 600; font-size: var(--text-label);
                 letter-spacing: var(--track-caps);
                 text-transform: uppercase; }

/* ─────────── Radial gauge ─────────── */
.ap-gauge { display: block; width: 100%; max-width: 208px; margin: 0 auto; }
.ap-gauge__track { fill: none; stroke: currentColor; opacity: .2; stroke-width: 13; }
.ap-gauge__fill  { fill: none; stroke: currentColor; stroke-width: 13;
                   stroke-linecap: round;
                   transition: stroke-dashoffset var(--dur-entrance) var(--ease); }

/* ─────────── Progress line ───────────
   Inside a filled card, so it is drawn in the card's own
   foreground at two opacities rather than in ink. */
.ap-line { height: 9px; border-radius: var(--radius-pill);
           background: currentColor; opacity: .25; overflow: hidden;
           margin-top: 7px; }
.ap-line > i { display: block; height: 100%; border-radius: inherit;
               background: currentColor; opacity: 1; }

/* ─────────── Illustration slot ───────────
   The reference's character art is a commission. Until it lands,
   the slot is marked, not faked. */
.ap-art { border-radius: var(--radius-lg); margin-top: var(--space-2);
          aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center;
          background-color: color-mix(in srgb, currentColor 10%, transparent);
          background-image: repeating-linear-gradient(45deg,
            transparent 0 11px, color-mix(in srgb, currentColor 14%, transparent) 11px 13px); }
.ap-art span { font-family: var(--font-body); font-weight: 600;
               font-size: var(--text-label); letter-spacing: var(--track-caps);
               text-transform: uppercase; padding: 0 var(--space-2); }

/* ─────────── Bottom bar, on a coloured screen ─────────── */
.ap-tabs { margin-top: auto; display: flex; gap: 4px;
           background: var(--paper); border-radius: var(--radius-pill);
           padding: 5px; margin: auto var(--space-2) var(--space-2); }
.ap-tabs button { flex: 1 1 0; border: none; background: none; cursor: pointer;
                  border-radius: var(--radius-pill); padding: var(--space-1) 0;
                  display: flex; flex-direction: column; align-items: center; gap: 2px;
                  font-family: var(--font-body); font-weight: 600;
                  font-size: var(--text-label);
                  letter-spacing: var(--track-caps); text-transform: uppercase;
                  color: var(--ink-soft);
                  transition: background var(--dur-ui) var(--ease); }
.ap-tabs svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
               stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ap-tabs button[aria-current] { background: var(--ink); color: var(--on-ink); }
.ap-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }