/* LINK — screens.css
   The app's own screens inside the site's .phone frame: the onboarding job
   step and the insta-match deal (S3), then one per tab — Feed (S1), Links
   (S2), Mini Map (S4), League (S5). Each is lifted from its
   york-matchmaker `LINK App S*.dc.html` artboard at ~0.67 of the 393pt
   design width, which is what fits the frame. Same tokens, same type, same
   components (jobChip, collegeTile, flipChar, venuePin, filterChip, tab bar).

   Rule carried over from the app: lime, cyan and pink are fills or type on
   ink only. Type on lime is ink. */

/* ---------- screen chrome ---------- */
.scr {
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding-top:20px; position:relative; overflow:hidden;
  font-family:var(--body); color:var(--paper);
}
.scr__head {
  flex:none; padding:4px 14px 8px; display:flex; align-items:center;
  justify-content:space-between; gap:8px;
}
.scr__brand { display:flex; align-items:center; gap:6px; min-width:0; }
.scr__brand svg { width:15px; height:15px; color:var(--lime); flex:none; overflow:visible; }
.scr__title {
  font-family:var(--display); font-size:17px; line-height:1; letter-spacing:0.02em;
  transform:var(--skew); display:inline-block;
  text-shadow:3px 0 0 rgba(255,46,136,0.5),-3px 0 0 rgba(0,229,255,0.5);
}
.scr__body { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }

/* Small chips. Square = app mono badge; pill = jobChip / college pill. */
.chip {
  font-family:var(--mono); font-size:7px; letter-spacing:0.12em; font-weight:600;
  padding:3px 6px; white-space:nowrap; display:inline-flex; align-items:center;
}
.chip--lime { background:var(--lime); color:var(--ink); }
.chip--pink { background:var(--pink); color:var(--ink); }
.chip--pill { border:1px solid var(--line-mid); border-radius:999px; font-weight:400; color:var(--cyan); padding:3px 7px; }
.chip--dim  { color:var(--dim); }
/* The one scanlined fill, as the app draws lime slabs and badges. */
.chip--lime,.chip--pink,.slab,.tabbar__on,.flip {
  background-image:repeating-linear-gradient(180deg,rgba(10,10,12,0.12) 0 1px,rgba(10,10,12,0) 1px 4px);
}
.slab {
  background:var(--lime); color:var(--ink); text-align:center; padding:10px 0;
  font-family:var(--mono); font-size:8px; letter-spacing:0.14em; font-weight:600; flex:none;
}
/* flipChar: the lime digit on an ink tile. */
.flip {
  background:var(--panel-2); border:1px solid var(--line); color:var(--lime);
  font-family:var(--mono); font-size:8px; font-weight:600; padding:2px 3px; min-width:6px; text-align:center;
}

/* photoMaterial: every user photo gets the grain and the scanline. The
   site's treated stills are the same frames the app ships, so they stand in
   for the design's empty image slots. */
.pm { position:relative; overflow:hidden; background:var(--panel-2); }
/* Faces sit in the top third of these frames, and every surface here crops to
   a narrower shape than the source, so cover from the centre would behead them. */
.pm img { width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
.pm::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background:repeating-linear-gradient(180deg,rgba(10,10,12,0.18) 0 1px,transparent 1px 3px);
}

/* ---------- tab bar (S7) ---------- */
.tabbar {
  flex:none; margin-top:auto; border-top:1px solid var(--line-soft); background:var(--ink);
  padding:7px 14px 16px; display:flex; justify-content:space-between; align-items:center;
}
.tabbar__t {
  min-width:30px; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:var(--mono); font-size:5.5px; letter-spacing:0.12em; color:var(--dim); position:relative;
}
.tabbar__t svg { width:14px; height:14px; color:var(--dim); overflow:visible; }
.tabbar__on { background:var(--lime); border-radius:999px; padding:5px 11px; display:flex; }
.tabbar__on svg { width:15px; height:15px; color:var(--ink); overflow:visible; }
.tabbar__t.is-here { color:var(--paper); } .tabbar__t.is-here svg { color:var(--paper); }
.tabbar__dot { position:absolute; top:-2px; right:1px; width:4px; height:4px; border-radius:50%; background:var(--cyan); }

/* ---------- S3 · onboarding job step ---------- */
.onb__top { flex:none; padding:0 14px 10px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--line-soft); }
.onb__nav { display:flex; justify-content:space-between; font-family:var(--mono); font-size:6.5px; letter-spacing:0.14em; color:var(--dim); }
.onb__nav em { font-style:normal; color:var(--cyan); }
.onb__chain { display:flex; justify-content:center; }
.onb__chain svg { width:26px; height:18px; margin-left:-6px; }
.onb__chain svg:first-child { margin-left:0; }
.onb__q {
  font-family:var(--display); font-size:21px; line-height:1; letter-spacing:0.02em;
  transform:var(--skew); transform-origin:left; display:inline-block; align-self:flex-start;
  text-shadow:3px 0 0 rgba(255,46,136,0.5),-3px 0 0 rgba(0,229,255,0.5);
}
.onb__body { flex:1; min-height:0; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
/* collegeTile, holding a job: text-only, mono, cyan keyline when picked. */
.tile {
  border:1.5px solid var(--line-mid); border-radius:9px; padding:13px 6px; text-align:center;
  font-family:var(--mono); font-size:8px; letter-spacing:0.1em; font-weight:600; color:var(--paper);
}
.tile--on { border-color:var(--cyan); background:rgba(0,229,255,0.06); color:var(--cyan); }
.onb__foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.onb__note { font-family:var(--mono); font-size:6.5px; letter-spacing:0.1em; line-height:1.6; color:var(--dim); }

/* ---------- S3 · finale, frame 3: the deal ---------- */
.deal { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:0 14px; }
.deal__kick { font-family:var(--mono); font-size:7px; letter-spacing:0.14em; line-height:1.7; color:var(--cyan); text-align:center; }
.deal__stack { position:relative; width:122px; height:166px; }
.deal__card {
  position:absolute; inset:0; border-radius:10px; overflow:hidden; background:var(--panel-2);
  border:1px solid var(--line-mid); display:flex; align-items:flex-end; padding:8px;
  font-family:var(--display); font-size:11px; letter-spacing:0.02em; color:var(--paper);
}
.deal__card .pm { position:absolute; inset:0; border-radius:inherit; }
/* the app's card gradient, so the name stays legible whatever the photo does */
.deal__card .pm::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(10,10,12,0) 34%,rgba(10,10,12,0.92) 100%);
}
.deal__card b,.deal__card .chip { position:relative; z-index:2; }
.deal__card b { font-weight:400; transform:var(--skew); display:inline-block; }
/* The two behind are fanned wide enough that their names clear the front card,
   and their names sit at the top edge for the same reason — the front card
   covers the bottom of both. They sit back a little so Sam stays the subject. */
.deal__card--3 { transform:rotate(16deg) translate(60px,-14px); }
.deal__card--2 { transform:rotate(-15deg) translate(-58px,-10px); }
/* each name goes to its own card's outer top corner — the only part of it the
   front card does not cover */
.deal__card--2,.deal__card--3 { align-items:flex-start; padding:7px; }
.deal__card--2 { justify-content:flex-start; }
.deal__card--3 { justify-content:flex-end; }
.deal__card--2 b,.deal__card--3 b { font-size:9px; white-space:nowrap; text-shadow:0 1px 6px rgba(10,10,12,0.9); }
.deal__card--2 .pm,.deal__card--3 .pm { opacity:0.7; }
/* their gradient runs the other way, because their name is at the top */
.deal__card--2 .pm::before,.deal__card--3 .pm::before {
  background:linear-gradient(0deg,rgba(10,10,12,0) 40%,rgba(10,10,12,0.9) 100%);
}
.deal__card--1 { background:var(--line-soft); border:1.5px solid var(--lime); flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:5px; }
.deal__card--1 .chip { font-size:6px; }
.deal__cta { margin:0 14px 16px; }

/* Deal in: only once, on reveal, then hold. animations.css keys everything
   on .is-in and reduced-motion flattens it, so this follows the same hooks. */
@keyframes dealIn { 0%{transform:translate3d(0,-120px,0) rotate(-20deg);opacity:0} 100%{opacity:1} }
/* backwards, not both: the last keyframe names no transform, so each card
   lands on its own authored rotation. 620 / 480 / 220ms, as the storyboard. */
.is-in .deal__card--3 { animation:dealIn 0.62s cubic-bezier(0.2,0.9,0.3,1) 0.3s backwards; }
.is-in .deal__card--2 { animation:dealIn 0.48s cubic-bezier(0.2,0.9,0.3,1) 0.75s backwards; }
.is-in .deal__card--1 { animation:dealIn 0.22s cubic-bezier(0.9,0.03,0.3,1) 1.15s backwards; }

/* ---------- S1 · feed ---------- */
.feed__left { font-family:var(--mono); font-size:7px; letter-spacing:0.12em; color:var(--dim); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.feed__tick {
  flex:none; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:3px 0; overflow:hidden; margin-bottom:6px;
}
.feed__tick span {
  display:block; white-space:nowrap; font-family:var(--mono); font-size:6px; letter-spacing:0.16em; color:var(--lime);
  padding-left:10px;
}
.feed__scroll { flex:1; min-height:0; padding:0 11px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.feed__hero { flex:none; height:132px; border-radius:0 0 11px 11px; box-shadow:0 0 0 1.5px var(--lime); }
.feed__hero::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,0) 30%,rgba(10,10,12,0.94) 100%);
}
.feed__meta { position:absolute; left:10px; right:10px; bottom:8px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; }
.feed__name { display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.feed__name b {
  font-family:var(--display); font-weight:400; font-size:20px; line-height:1; letter-spacing:0.02em;
  transform:var(--skew); display:inline-block;
}
.feed__name .chip--pill { background:rgba(10,10,12,0.72); }
.feed__count { font-family:var(--mono); font-size:7px; letter-spacing:0.12em; color:var(--dim); }
.feed__chips { display:flex; gap:5px; flex:none; }
.feed__chips .chip--pill { font-size:7.5px; letter-spacing:0.08em; padding:5px 8px; }
.feed__prompt { flex:none; background:var(--panel-2); border-radius:11px; padding:11px; display:flex; flex-direction:column; gap:7px; }
.feed__prompt small { font-family:var(--mono); font-size:7px; letter-spacing:0.14em; color:var(--cyan); }
.feed__prompt p { font-size:11.5px; line-height:1.45; }
.feed__acts { display:flex; gap:5px; justify-content:flex-end; }
.feed__acts span { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-mid); display:flex; align-items:center; justify-content:center; }
.feed__acts svg { width:13px; height:12px; overflow:visible; }
.c-muted { color:var(--muted); } .c-ghost { color:var(--line-mid); }
.feed__next { flex:1; min-height:60px; border-radius:11px 11px 0 0; }

/* ---------- S2 · links ---------- */
.links__liked { flex:none; padding:0 14px 10px; border-bottom:1px solid var(--line-soft); display:flex; flex-direction:column; gap:6px; }
.links__liked small { font-family:var(--mono); font-size:6.5px; letter-spacing:0.16em; color:var(--dim); }
.links__liked small em { font-style:normal; color:var(--pink); }
.links__avs { display:flex; gap:7px; }
.av { width:36px; height:36px; border-radius:50%; flex:none; position:relative; }
.av .pm { width:100%; height:100%; border-radius:50%; }
.av--new::after { content:""; position:absolute; top:0; right:0; width:7px; height:7px; border-radius:50%; background:var(--pink); border:1.5px solid var(--ink); }
.av--more { border:1.5px solid var(--line-mid); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--cyan); }
.av--live .pm { box-shadow:0 0 0 1.5px var(--lime); }
.av__mark { position:absolute; bottom:-2px; right:-2px; width:11px; height:11px; color:var(--lime); overflow:visible; }
.links__list { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.row { padding:9px 14px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--panel-2); }
.row__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.row__name { display:flex; align-items:center; gap:5px; font-weight:600; font-size:10.5px; }
.row__name .chip--pill { font-size:5.5px; padding:1px 5px; }
.row__last { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row__last--new { font-family:var(--mono); font-size:7.5px; letter-spacing:0.08em; color:var(--cyan); }
.row__when { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-family:var(--mono); font-size:7px; color:var(--cyan); }
.row__unread { width:5px; height:5px; border-radius:50%; background:var(--lime); }
.row--read .row__name,.row--read .row__last { color:var(--dim); }
.row__name .chip--liked { color:var(--pink); }

/* ---------- S4 · mini map ---------- */
.scr--map { padding-top:0; background:#0C0C10; }
.map__roads { position:absolute; inset:0; width:100%; height:100%; }
.map__over { position:relative; padding:24px 14px 0; display:flex; flex-direction:column; gap:8px; }
.map__over .scr__head { padding:0; }
.map__over .scr__title { text-shadow:0 2px 12px rgba(10,10,12,0.9); }
.map__in { font-family:var(--mono); font-size:7px; letter-spacing:0.14em; background:rgba(10,10,12,0.85); color:var(--cyan); padding:4px 6px; white-space:nowrap; }
.map__filters { display:flex; gap:5px; flex-wrap:wrap; }
.map__filters .chip { border-radius:999px; font-size:6.5px; padding:4px 8px; background:rgba(10,10,12,0.85); border:1px solid var(--line-mid); font-weight:400; }
.map__filters .chip--lime {
  border:none; font-weight:600; background:var(--lime);
  background-image:repeating-linear-gradient(180deg,rgba(10,10,12,0.12) 0 1px,rgba(10,10,12,0) 1px 4px);
}
.map__pick {
  background:var(--lime); color:var(--ink); padding:7px 8px; display:flex; align-items:center; gap:8px; overflow:hidden;
  background-image:repeating-linear-gradient(180deg,rgba(10,10,12,0.12) 0 1px,rgba(10,10,12,0) 1px 4px);
}
.map__pick span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono); font-size:6.5px; letter-spacing:0.12em; font-weight:600; }
.map__pick i { font-style:normal; font-family:var(--mono); font-size:8px; flex:none; }
/* venuePin: ink chip, kind-coloured line, link glyph, dot. */
.pin { position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--lime); }
.pin--club { color:var(--pink); } .pin--pub { color:var(--cyan); } .pin--date { color:var(--paper); }
.pin__chip { background:var(--ink); border:1.5px solid currentColor; border-radius:6px; padding:3px 4px; box-shadow:0 4px 14px rgba(0,0,0,0.55); display:flex; }
.pin__chip svg { width:11px; height:8px; }
.pin__dot { width:4px; height:4px; border-radius:50%; background:currentColor; }
.pin__name { font-family:var(--mono); font-size:6px; letter-spacing:0.1em; background:rgba(10,10,12,0.85); padding:1px 4px; white-space:nowrap; }
.pin--here { transform:translate(-50%,-100%) scale(1.18); }
.pin--here .pin__chip { box-shadow:0 0 0 2px rgba(255,46,136,0.25),0 6px 18px rgba(0,0,0,0.7); }
.tabbar--map { position:absolute; left:0; right:0; bottom:0; background:rgba(10,10,12,0.92); }

/* ---------- S5 · league ---------- */
.lg__resets { display:flex; align-items:center; gap:3px; font-family:var(--mono); font-size:6px; letter-spacing:0.1em; color:var(--cyan); }
.lg__resets .flip { font-size:7px; padding:2px 2px; }
.lg__body { flex:1; min-height:0; overflow:hidden; padding:0 14px; display:flex; flex-direction:column; gap:7px; }
.lg__table { background:var(--panel); border:1px solid var(--line-soft); display:flex; flex-direction:column; }
.lg__row { padding:6px 9px; display:flex; gap:7px; align-items:center; border-bottom:1px solid var(--line-soft); }
.lg__row:last-child { border-bottom:none; }
.lg__rank { font-family:var(--mono); font-size:6.5px; letter-spacing:0.12em; font-weight:600; color:var(--dim); width:8px; }
.lg__row--1 .lg__rank { color:var(--lime); }
.lg__col { font-family:var(--display); font-size:11px; letter-spacing:0.02em; transform:var(--skew); display:inline-block; white-space:nowrap; }
.lg__row--1 .lg__col { text-shadow:1.5px 0 0 rgba(255,46,136,0.7),-1.5px 0 0 rgba(0,229,255,0.7); }
.lg__row--you { box-shadow:inset 0 0 0 1.5px var(--lime); }
.lg__row .chip--lime { font-size:5px; padding:1px 4px; }
.lg__pts { margin-left:auto; font-family:var(--mono); font-size:8px; font-weight:600; color:var(--lime); }
.lg__mv { font-family:var(--mono); font-size:6.5px; min-width:14px; text-align:right; color:var(--dim); }
.lg__mv--up { color:var(--lime); } .lg__mv--dn { color:var(--pink); }
.lg__card { background:var(--panel-2); border-radius:10px; padding:9px 10px; display:flex; align-items:center; gap:10px; }
.lg__big {
  font-family:var(--display); font-size:22px; line-height:1; letter-spacing:0.02em; transform:var(--skew); display:inline-block;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:repeating-linear-gradient(180deg,rgba(10,10,12,0.17) 0 1px,rgba(10,10,12,0) 1px 4px),linear-gradient(var(--lime),var(--lime));
}
.lg__card small { display:block; font-family:var(--mono); font-size:6px; letter-spacing:0.14em; color:var(--dim); margin-top:2px; }
.lg__streak { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.lg__streak span { display:flex; }
.lg__streak svg { width:18px; height:13px; margin-left:-4px; color:var(--lime); }
.lg__streak svg:first-child { margin-left:0; }
.lg__streak svg.is-open { color:var(--line-mid); }
.lg__streak small { font-family:var(--mono); font-size:6.5px; letter-spacing:0.12em; color:var(--pink); }
.lg__week { border:1px solid var(--line-soft); border-radius:10px; padding:7px 10px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:6.5px; letter-spacing:0.12em; }
.lg__week span:first-child { color:var(--cyan); min-width:0; }
.lg__week span:last-child { color:var(--lime); white-space:nowrap; flex:none; }
.lg__dare { background:var(--panel-2); border-radius:10px; padding:9px 10px; display:flex; flex-direction:column; gap:6px; }
.lg__dare-top { display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:6.5px; letter-spacing:0.14em; color:var(--cyan); }
.lg__dare p { font-weight:600; font-size:10.5px; line-height:1.35; }
.lg__dare-foot { display:flex; align-items:center; gap:8px; }
.lg__dare-foot .chip { padding:6px 11px; font-size:6.5px; }
.lg__dare-foot small { font-family:var(--mono); font-size:5.5px; letter-spacing:0.08em; line-height:1.5; color:var(--dim); }
.lg__da { font-family:var(--mono); font-size:6px; letter-spacing:0.14em; color:var(--dim); text-align:center; }