/* Angler — 40 · Core features.
   A light band, one shade above the page, carrying dark product objects — the
   same figure/ground as #agents' terminal on cream, which is the pattern that
   works. The band itself is never the dark thing.
   Everything below the tab bar is CSS shapes — no images, no video. */

.feat {
  overflow: hidden;
  background: var(--paper);

  /* Two dim tiers, keyed to the light ground. Measured on --paper: --ink-soft
     is 11.0:1, --muted 6.4:1. The two dark product objects below (the notch
     overlay and the result card) put the app's own white tiers back. */
  --f-text-2: var(--ink-soft);
  --f-text-3: var(--muted);
}
.f-ov, .f-card {
  --f-text-2: color-mix(in srgb, var(--vellum) 76%, transparent);
  --f-text-3: color-mix(in srgb, var(--vellum) 58%, transparent);
}

/* ---------------- header ---------------- */

.feat-head { text-align: center; max-width: 760px; margin-inline: auto; }
.feat-title { margin-top: 22px; }
.feat-lead { margin: 18px auto 0; max-width: 54ch; }
.feat-kbd {
  font-family: var(--mono); font-weight: 500; font-size: 0.86em;
  padding: 2px 7px 3px; border-radius: var(--r-card);
  background: var(--vellum-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------------- tab bar ---------------- */

/* head → stage measured 131px; the review's target for head → the demo it
   introduces is 96, and the rail is 51 of it. */
.feat-rail {
  position: relative;
  display: flex;
  margin: clamp(22px, 2.4vw, 28px) auto clamp(14px, 1.6vw, 17px);
  padding: 5px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.feat-rail::-webkit-scrollbar { display: none; }
.feat-tabs {
  display: flex; gap: 2px;
  margin-inline: auto;                /* margin:auto, not justify-content — that clips in a scroller */
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--vellum-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.feat-tab {
  position: relative; z-index: 1;
  flex: none;
  padding: 8px 24px;
  border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500; line-height: 1.2;
  color: var(--muted);
  transition: color .15s var(--ease-nav);
}
.feat-tab:hover { color: var(--ink); }
.feat-tab.is-active { color: var(--ink); }
/* WCAG 2.5.8 — these are the section's primary controls and the pill is only
   32–33px tall. The touch target is a transparent overlay, not a taller pill:
   44px fits inside the rail's own padding, so no proportion moves at any width. */
.feat-tab::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}

/* the single sliding pill — it slides, it never cross-fades */
.feat-ind {
  position: absolute; top: 9px; left: 0; z-index: 0;
  height: calc(100% - 18px);
  width: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-selected);
  pointer-events: none;
}
.feat.is-ready .feat-ind {
  transition: transform .38s var(--ease-open), width .38s var(--ease-open);
}

/* The dwell clock, drawn on the active pill. The animation IS the timer —
   js/40-features.js advances the tab on its animationend — so pausing the bar
   pauses the rotation and there is no second source of truth to keep in sync. */
@keyframes feat-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.feat-ind::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px;
  height: 2px; border-radius: var(--r-pill);
  background: var(--lake);
  transform: scaleX(0); transform-origin: left;
}
.feat.is-auto .feat-ind::after { animation: feat-dwell 5s linear; }
.feat-rail:hover .feat-ind::after,
.feat-rail:focus-within .feat-ind::after { animation-play-state: paused; }

/* ---------------- stage ---------------- */

.feat-stagewrap { position: relative; max-width: 880px; margin-inline: auto; }

/* No fill and no shadow: every mock inside already carries its own frame, and a
   second box at nearly the same value just doubles the edge. */
.feat-stage {
  position: relative; z-index: 1;
  overflow: hidden;
  border-radius: var(--r-large);
}
.feat.is-ready .feat-stage { transition: height .32s var(--ease-house); }

.feat-panel { padding: clamp(18px, 3vw, 34px); }
.feat-panel.is-hidden { display: none; }          /* no-JS: only the first panel renders */

.feat-stage.is-js .feat-panel {
  position: absolute; inset: 0 0 auto 0;
  transition: opacity .32s var(--ease-house), transform .32s var(--ease-house);
}
.feat-stage.is-js .feat-panel.is-hidden {
  display: block; visibility: hidden; opacity: 0;
  transform: translateY(8px); pointer-events: none;
}

.feat-cap {
  margin-top: clamp(16px, 2.2vw, 24px);
  margin-inline: auto;
  max-width: 56ch;
  text-align: center;
  font-size: 13.5px; line-height: 1.5;
  color: var(--muted);
}

/* ---------------- shared facsimile parts ---------------- */

.f-row--pptx { --ft: var(--ft-pptx); }
.f-row--xlsx { --ft: var(--ft-xlsx); }
.f-row--pdf  { --ft: var(--ft-pdf); }

.f-kind {
  flex: none;
  padding: 2px 5px 3px;
  border-radius: 3px;
  font-size: 8.5px; letter-spacing: 0.09em; font-style: normal;
  color: var(--ft, var(--f-text-2));
  background: color-mix(in srgb, var(--ft, var(--f-text-3)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ft, var(--f-text-3)) 30%, transparent);
}
/* The Ask panel's chips are the only ones on the band itself, not inside a dark
   object. Straight --ft measures 3.4:1 on the tinted paper chip; toward ink it
   is 5.7 (pptx) / 4.8 (xlsx). */
.f-atom .f-kind { color: color-mix(in srgb, var(--ft) 68%, var(--ink)); }

/* the bar chart, reused on the slide, in the card thumb and in the target app */
.f-chart { display: flex; align-items: flex-end; gap: 4.5%; height: 100%; }
.f-bar {
  flex: 1; min-width: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--lake), var(--lake-dark));
}
.f-bar:nth-child(1) { height: 38%; }
.f-bar:nth-child(2) { height: 51%; }
.f-bar:nth-child(3) { height: 46%; }
.f-bar:nth-child(4) { height: 67%; }
.f-bar:nth-child(5) { height: 74%; }
.f-bar:nth-child(6) { height: 93%; background: linear-gradient(180deg, var(--dawn), var(--dawn-deep)); }

/* the pptx match outline, with four corner handles from one pseudo-element */
.f-hl { --ft: var(--ft-pptx); position: relative; }
.f-hl::before {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--ft);
  background:
    linear-gradient(var(--ft), var(--ft)) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--ft), var(--ft)) 100% 0 / 6px 6px no-repeat,
    linear-gradient(var(--ft), var(--ft)) 0 100% / 6px 6px no-repeat,
    linear-gradient(var(--ft), var(--ft)) 100% 100% / 6px 6px no-repeat;
}
/* the badge lives INSIDE the box, top-left — the tallest bars are on the right,
   and outside the box it collides with the slide title once the canvas narrows */
.f-hltag {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  padding: 3px 8px 4px; border-radius: var(--r-card);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper); background: var(--ft);
}
.f-stitle {
  display: block;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(12px, 1.5vw, 16px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink);
}

/* ─────────────  1 · Search — the overlay, tight crop  ───────────── */

.f-ov {
  max-width: 640px; margin-inline: auto;
  padding: 8px;
  border-radius: var(--r-panel);
  background: var(--pill);
  box-shadow: inset 0 0 0 1px var(--notch-border), var(--sh-float);
}
.f-ovbar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 13px;
  border-bottom: 1px solid var(--notch-hairline);
  color: var(--f-text-3);
}
.f-glyph {
  flex: none; width: 13px; height: 13px; position: relative;
  border: 1.5px solid currentColor; border-radius: var(--r-pill);
}
.f-glyph::after {
  content: ""; position: absolute; right: -4px; bottom: -3px;
  width: 6px; height: 1.5px; border-radius: 1px;
  background: currentColor; transform: rotate(45deg);
}
.f-q {
  flex: 1; min-width: 0;
  font-size: 15px; color: var(--notch-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f-caret {
  display: inline-block; width: 1.5px; height: 15px;
  margin-left: 2px; vertical-align: -3px;
  background: var(--presence-bright);
}
.f-keys {
  flex: none; font-size: 11px; color: var(--f-text-3);
  padding: 2px 6px 3px; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--notch-hairline);
}
.f-list { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.f-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-field);
}
.f-row.is-sel { background: var(--notch-surface); }
.f-row.is-sel::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 2px; border-radius: var(--r-pill); background: var(--ft);
}
.f-body { flex: 1; min-width: 0; display: block; }
.f-title {
  display: block; font-size: 13.5px; line-height: 1.4;
  color: color-mix(in srgb, var(--vellum) 88%, transparent);
}
.f-meta {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.01em;
  color: var(--f-text-3);
}
.f-meta i { display: inline-block; width: 3px; height: 3px; border-radius: var(--r-pill);
  background: currentColor; vertical-align: 3px; margin: 0 7px; }
.f-score { flex: none; font-size: 11px; color: var(--f-text-2); padding-top: 1px; }

/* ─────────────  2 · Preview — the slide it came from  ───────────── */

.f-pv { max-width: 720px; margin-inline: auto; }
.f-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  background: var(--paper);
  /* paper on a paper band: the ring does the separating, not the fill */
  box-shadow: var(--sh-panel), inset 0 0 0 1px var(--line);
}
.f-slide {
  position: absolute; inset: 0;
  padding: clamp(16px, 3.2vw, 30px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.8vw, 18px);
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease-house), transform .26s var(--ease-house),
              visibility .26s;
}
/* A filmstrip, not a direction flag. Every hidden slide parks on the side it actually
   lives on relative to the visible one — earlier slides to the left, later ones to the
   right — so stepping either way moves both slides the same way and the arrows point
   where the content goes. Deriving the offset from deck order rather than from the
   last click means there is no direction state to hold, nothing to reset, and the
   first paint is already correct.
   Must precede the active-slide rule: equal specificity, so source order decides.
   10px, not more — this canvas is ~300px wide and a bigger throw reads as a page
   transition rather than a step through one deck. */
.f-canvas[data-slide="5"] .f-slide--4,
.f-canvas[data-slide="6"] .f-slide--4,
.f-canvas[data-slide="6"] .f-slide--5 { transform: translateX(-10px); }

.f-canvas[data-slide="4"] .f-slide--5,
.f-canvas[data-slide="4"] .f-slide--6,
.f-canvas[data-slide="5"] .f-slide--6 { transform: translateX(10px); }

.f-canvas[data-slide="4"] .f-slide--4,
.f-canvas[data-slide="5"] .f-slide--5,
.f-canvas[data-slide="6"] .f-slide--6 {
  opacity: 1; visibility: visible; transform: none;
}

/* slide 5: the chart is ONE object on a slide that also has body copy —
   that is the whole point of the outline, so it must not fill the canvas */
.f-body5 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(14px, 2.4vw, 26px); }
.f-hl { display: flex; flex-direction: column; min-height: 0; }
.f-hl .f-chart {
  flex: 1; min-height: 0;
  background: repeating-linear-gradient(to top, var(--line-soft) 0 1px, transparent 1px 25%);
}
.f-axis { flex: none; height: 1px; margin-top: 5px; background: var(--line); }

.f-grid { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 7px 10px; align-content: space-between; }
.f-cell { height: 8px; border-radius: 2px; background: var(--parchment); }
.f-cell:nth-child(-n+4) { background: var(--line); }
.f-cell:nth-child(4n+1) { background: var(--line-soft); }

.f-cols { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(12px, 2vw, 22px); }
.f-copy { display: flex; flex-direction: column; gap: 9px; }
.f-copy i { height: 6px; border-radius: 2px; background: var(--parchment); }
.f-copy i:nth-child(2) { width: 92%; }
.f-copy i:nth-child(4) { width: 78%; }
.f-copy i:nth-child(5) { width: 54%; }
.f-block { border-radius: var(--r-card); background: linear-gradient(140deg, var(--parchment), var(--line-soft)); }

.f-foot {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 16px;
}
.f-nav {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .15s var(--ease-nav), opacity .15s var(--ease-nav);
}
.f-nav:hover:not([aria-disabled="true"]) { background: var(--vellum-2); }
.f-nav[aria-disabled="true"] { opacity: 0.28; cursor: default; }
.f-nav::before {
  content: ""; width: 7px; height: 7px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}
.f-nav--prev::before { transform: translateX(1px) rotate(45deg); }
.f-nav--next::before { transform: translateX(-1px) rotate(-135deg); }
.f-count { font-size: 12px; color: var(--f-text-2); min-width: 12ch; text-align: center; }
.f-file { position: absolute; right: 0; font-size: 11px; color: var(--f-text-3); }

/* ─────────────  3 · Copy — the clipboard moment  ───────────── */

.f-cp {
  display: grid; align-items: center; gap: clamp(14px, 2.4vw, 26px);
  grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr);
}
.f-card {
  --ft: var(--ft-pptx);
  position: relative;
  padding: 10px;
  border-radius: var(--r-panel);
  background: var(--pill);
  box-shadow: inset 0 0 0 1px var(--notch-border), var(--sh-float);
}
.f-thumb {
  display: flex; align-items: flex-end; gap: 5%;
  height: 76px; padding: 10px 12px;
  border-radius: var(--r-card);
  background: var(--paper);
}
.f-cardmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 4px 2px; }
.f-cardname { font-size: 12.5px; color: var(--notch-text); }
.f-cardsub {
  flex-basis: 100%;
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; color: var(--f-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.f-flash {
  position: absolute; top: -10px; right: -6px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 6px; border-radius: var(--r-pill);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ft-xlsx);
  background: var(--pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ft-xlsx) 45%, transparent);
}
.f-flash::before {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}
@keyframes f-pop { from { opacity: 0; transform: translateY(5px) scale(0.9); } }
@keyframes f-ring {
  from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ft-xlsx) 70%, transparent), var(--sh-float); }
  to   { box-shadow: inset 0 0 0 1px var(--notch-border), var(--sh-float); }
}
.feat-panel.is-live .f-flash { animation: f-pop .5s var(--ease-open) both; }
.feat-panel.is-live .f-card  { animation: f-ring .62s var(--ease-house) both; }

.f-arrow {
  align-self: center; position: relative;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), var(--faint));
}
.f-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1.4px solid var(--faint); border-right: 1.4px solid var(--faint);
  transform: translateY(-50%) rotate(45deg);
}

.f-app {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--win-bg);
  box-shadow: var(--sh-panel), inset 0 0 0 1px var(--win-rule);
}
.f-appbar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--win-sidebar);
  border-bottom: 1px solid var(--win-rule);
}
.f-dots {
  flex: none; width: 34px; height: 8px;
  background:
    radial-gradient(circle 4px at 4px 4px,  var(--win-rule) 98%, transparent) 0 0 / 13px 8px no-repeat,
    radial-gradient(circle 4px at 4px 4px,  var(--win-rule) 98%, transparent) 13px 0 / 13px 8px no-repeat,
    radial-gradient(circle 4px at 4px 4px,  var(--win-rule) 98%, transparent) 26px 0 / 13px 8px no-repeat;
}
.f-appname { font-size: 10.5px; color: var(--win-text-2); }
.f-appcanvas {
  aspect-ratio: 16 / 10;
  padding: clamp(14px, 2.4vw, 24px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.8vw, 18px);
  background: var(--paper);
}
.f-hl--pasted { flex: 1; min-height: 0; }

/* ─────────────  4 · Ask — the agent surface  ───────────── */

.f-ag {
  max-width: 720px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.f-turn { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.5; }
.f-who {
  flex: none; width: 68px; padding-top: 3px;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--f-text-3);
}
.f-turn--you { color: var(--ink); }
.f-turn--ai  { color: var(--ink-soft); }

.f-tool {
  display: flex; align-items: center; gap: 10px;
  margin-left: 80px;
  padding: 7px 11px;
  border-radius: var(--r-field);
  background: var(--vellum-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* --presence-bright is a glow colour and measures 2.0:1 on the chip; --lake is 6.9:1 */
.f-toolname { flex: none; font-size: 11.5px; color: var(--lake); }
.f-args { font-size: 11.5px; color: var(--f-text-2); white-space: nowrap; }

.f-ret {
  margin-left: 80px; padding-left: 13px;
  display: flex; flex-direction: column; gap: 7px;
  border-left: 1px solid var(--line);
}
.f-retn { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f-text-3); }
.f-atom {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-weight: 500; font-size: 11.5px;
  color: var(--f-text-2);
  min-width: 0;
}
.f-atom b { margin-left: auto; font-weight: 500; color: var(--f-text-3); }

/* ---------------- responsive ---------------- */

@media (max-width: 860px) {
  .f-cp { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .f-card { width: min(340px, 100%); }
  .f-app { width: 100%; }
  .f-arrow { transform: rotate(90deg); margin: 6px 0; }
}

@media (max-width: 620px) {
  .feat-tab { padding: 8px 15px; font-size: 13.5px; }
  .f-turn, .f-title { font-size: 13px; }
  .f-tool, .f-ret { margin-left: 0; }
  .f-turn { flex-direction: column; gap: 4px; }
  .f-who { width: auto; padding-top: 0; }
  .f-file { display: none; }
  .f-score { display: none; }
  .f-hltag { font-size: 8px; padding: 2px 6px 3px; }
}

@media (max-width: 420px) {
  .feat-tab { padding: 8px 11px; font-size: 13px; }
  .f-ov { padding: 5px; }
  .f-row { padding: 9px 9px; gap: 8px; }
  .f-meta { font-size: 9.5px; }
  .f-meta i { margin: 0 5px; }
}