/* trackers.css - the tracker pages' own rules, from the trackers prototype. Scoped under html.tsa like
   the core sheets; loaded only by the pages that extend _tracker_base.html, after public.css (tsa_css block). */
/* --------------------------------------------------- tracker pages ---- */
/* From trackers.template.html - the six tracker detail pages, one design -
   on top of public.css (bands, hero, ruled list, the close). Only the tracker
   parts are here. Changes from the prototype, each for a reason:
   - its hero names (.hero, .tagline) are public.css's .phero and .plead
   - the screenshot slot's caption is .scap, not .meta: .meta is the hero's
     classification line
   - no "Awaiting image" chip and no note under the slots: both were the
     prototype's own words, and the wording is Yas's
   - one call to action in the hero: the prototype's second, "See what it
     looks like", led to the empty slots
   - no entrance, as public.css has none */
/* a product's own page: a bigger name than the policies' */
.tsa .tphero h1{font-size:clamp(2.2rem,5.6vw,3.6rem);}
/* 56ch, not the prototype's 62: in Montserrat 62ch measured ~85 characters
   a line (impeccable detect, line-length); the section leads the same */
.tsa .tphero .plead{max-width:56ch;}
.tsa .band header p{max-width:56ch;}
.tsa .tphero .acts{margin-top:32px;}
/* The page's badge words - "The Flagship" - kept, but as a classification
   line UNDER the call to action, not a kicker announcing the title. */
.tsa .meta{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
      margin-top:26px; color:var(--muted); font-size:.82rem; font-weight:600;}
.tsa .meta .k{display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:800;
         letter-spacing:.1em; text-transform:uppercase; font-size:.73rem;}
.tsa .meta .sep{width:3px; height:3px; border-radius:50%; background:#3D5170;}
.tsa .meta .tier{display:inline-flex; align-items:center; gap:8px;}
.tsa .meta .tier i{color:var(--accent);}
/* ---- screenshot slots: twenty across the six pages, none with an image ---- */
/* Columns by the room the slots have (a container, .shotband), not by the
   window: signed in, the sidebar takes 236px, and a window rule gave three
   ~230px slots at 1000px whose words pushed the frames to three heights.
   One column under 640px; two from 640 (four as 2x2, three as two and one),
   each then ~310px - from 560 they were ~280px and the words pushed the
   frames out of 16:10; three in a row from 900, each at least ~285px. */
.tsa .shotband{container-type:inline-size;}
.tsa .shots{display:grid; gap:clamp(16px,2vw,22px); grid-template-columns:minmax(0,1fr);}
@container (min-width:640px){
  .tsa .shots{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@container (min-width:900px){
  .tsa .shots[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* A browser without container queries (Safari before 16, Chrome before 105,
   Firefox before 110): the same columns by the window - the container is the
   window less ~48px, and signed in (data-shell="app") less the sidebar's 236
   from 901px, taken as open. Two columns from 688, three from 948; signed in,
   one at 901-923 and two-and-one at 948-1183. */
@supports not (container-type:inline-size){
  @media(min-width:688px){
    .tsa .shots{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(min-width:948px){
    .tsa .shots[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media(min-width:901px) and (max-width:923px){
    html.tsa[data-shell="app"] .shots{grid-template-columns:minmax(0,1fr);}
  }
  @media(min-width:948px) and (max-width:1183px){
    html.tsa[data-shell="app"] .shots[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
}
/* a column, the frame taking what the row leaves: slots side by side are one
   height, frame and caption lined up, however their words wrap */
.tsa .shot{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden;
      background:rgba(255,255,255,.028);}
.tsa .shot .frame{flex:1 0 auto;}
/* a plain recessed panel, not a fake wireframe: an empty slot should look
   empty and say what belongs in it */
.tsa .frame{aspect-ratio:16/10; display:grid; place-content:center; justify-items:center; gap:11px; padding:24px;
       text-align:center; border-bottom:1px solid var(--line); background:#0B1220;
       box-shadow:inset 0 1px 0 rgba(0,0,0,.35);}
.tsa .frame i{font-size:1.5rem; color:#3D5170;}
.tsa .frame .want{color:var(--muted); font-size:.83rem; max-width:34ch;}
/* the label in muted grey, as the prototype's caption was: white, it read
   as the title of a picture that is there */
.tsa .scap{padding:15px 18px; color:var(--muted);}
.tsa .scap strong{font-size:.93rem; font-weight:800;}
/* ---- personas, not testimonials: a definition list (dl), the quote gets a line ---- */
.tsa .cases{display:grid; margin:0;}
.tsa .case{display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:clamp(14px,3vw,46px);
      align-items:start; padding:clamp(22px,2.6vw,30px) 0; border-top:1px solid var(--line);}
.tsa .cases > .case:first-child{border-top:0; padding-top:0;}
@media(max-width:760px){
  .tsa .case{grid-template-columns:minmax(0,1fr); gap:11px;}
}
.tsa .case dt{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
         color:var(--accent); padding-top:.35em;}
.tsa .case dd{margin:0; color:#C3CCDA; font-size:1.02rem; max-width:56ch;}
/* ---- the close carries a line under its heading here ---- */
.tsa .close p{color:var(--muted); margin:14px auto 0; max-width:52ch;}
/* ---- the other five ---- */
.tsa .siblings{padding:clamp(40px,5vw,64px) 0; border-top:1px solid var(--line);}
.tsa .siblings h2{font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
             color:var(--muted); text-align:center; margin-bottom:22px;}
/* wrapped rows centred, so the fifth link is not left alone at one edge */
.tsa .sibgrid{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.tsa .sibgrid .sib{flex:1 1 168px; max-width:240px;}
.tsa .sib{display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:var(--r-control);
     border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:.88rem; font-weight:700;
     transition:border-color .14s, background .14s;}
.tsa .sib:hover{border-color:#3C5170; background:rgba(255,255,255,.045); text-decoration:none;}
.tsa .sib i{color:var(--accent); font-size:1.05rem;}
@media(pointer:coarse){
  .tsa .sib{min-height:48px;}
}
@media(hover:none){
  .tsa .sib:hover{border-color:var(--line); background:var(--surface);}
}
@media(max-width:640px){
  .tsa .case dd, .tsa .frame .want{font-size:1rem;}
  .tsa .case dt{font-size:.82rem;}
  .tsa .siblings h2{font-size:.86rem;}
  .tsa .scap strong{font-size:1rem;}
  .tsa .meta{font-size:1rem;}
  .tsa .meta .k{font-size:.86rem;}
  /* two lines on a phone: wrapped in a row, the dot between them was left
     hanging at the end of the first */
  .tsa .meta{flex-direction:column; gap:8px;}
  .tsa .meta .sep{display:none;}
}