/* ==========================================================================
   poster.css - the shape of a screen, not its finish.

   Three passes of restyling changed the paint and left the structure: a card
   at the top, a heading with a rule, a list of bordered rows. That is why it
   "barely changed". So this changes the structure.

   A tab is a poster: one statement set at the size of the thing it stands
   for, an index of what is in it set like the contents page of a book, and
   one action living where the thumb is rather than where the reading stops.
   No panels. No dividers between everything. Space and type do the work.
   ========================================================================== */

/* ---------------------------------------------------------- the statement */
#screen .poster{padding:18px 0 20px; margin:0}
#screen .poster .po-k{font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink3)}
#screen .poster .pbig{display:flex; align-items:baseline; gap:10px; margin:14px 0 0}
#screen .poster .pbig b{font-family:"Nunito",sans-serif; font-size:86px; font-weight:800;
  letter-spacing:-.06em; line-height:.82; color:var(--ink)}
#screen .poster .pbig i{font-style:normal; font-family:"Nunito",sans-serif; font-size:24px;
  font-weight:800; letter-spacing:-.02em; color:var(--ink3)}
#screen .poster .psub{margin:12px 0 0; font-size:17.5px; font-weight:600; line-height:1.35;
  color:var(--ink2); letter-spacing:-.01em; text-wrap:balance; max-width:22em}
#screen .poster .pfoot{margin:9px 0 0; font-size:13px; font-weight:600; color:var(--ink3)}

/* ------------------------------------------------------------- the index
   Numbered, large, and mostly air. One hairline per row and nothing else -
   no card, no chevron, no meta. The detail is a tap away and is read inside
   the session, which is where he is standing when he needs it. */
#screen .index{list-style:none; margin:2px 0 0; padding:0}
#screen .index .ixr{display:grid; grid-template-columns:1fr 38px 38px; align-items:center;
  border-top:1px solid var(--edge)}
#screen .index .ixr:last-child{border-bottom:1px solid var(--edge)}
#screen .index .ixb{display:flex; align-items:baseline; gap:16px; width:100%; text-align:left;
  background:none; border:0; padding:17px 0; cursor:pointer; font:inherit; color:var(--ink)}
#screen .index .po-n{font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700;
  letter-spacing:.06em; color:var(--ink3); flex:none; width:22px}
#screen .index .po-t{flex:1; min-width:0; font-family:"Nunito",sans-serif; font-size:21px;
  font-weight:700; letter-spacing:-.025em; line-height:1.2; color:var(--ink)}
#screen .index .po-f{flex:none; font-family:"Nunito",sans-serif; font-size:18px; font-weight:800;
  letter-spacing:-.025em; color:var(--accInk)}
#screen .index .po-f small{font-size:.6em; font-weight:700; opacity:.7; margin-left:1px}
#screen .index .ixr.on .po-t{color:var(--ink3)}
#screen .index .ixr.on .po-n{color:var(--greenInk)}
#screen .index .ixb:active{opacity:.55}
#screen .index .po-g{width:38px; height:52px; border:0; background:none; color:var(--ink3);
  opacity:.45; cursor:pointer; display:flex; align-items:center; justify-content:center}
#screen .index .po-g:active{opacity:.9}
#screen .note{margin:16px 0 0; font-size:13px; font-weight:600; color:var(--ink3)}

/* ------------------------------------------------------------ the action
   Where the thumb is. It does not scroll away, so the answer to "what do I
   do" is never further than the bottom of the screen. */
/* sticky rather than fixed: #screen is the scroller, and a fixed child of a
   scroller that animates is positioned against the wrong box. */
#screen .actionbar{position:sticky; bottom:0; z-index:35; margin:22px -18px 0;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--bg) 42%); pointer-events:none}
#screen .actionbar button{pointer-events:auto; width:100%; min-height:56px; border:0;
  border-radius:16px; background:var(--acc); color:#14140F; cursor:pointer;
  font-family:"Nunito",sans-serif; font-size:17px; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 10px 30px -12px color-mix(in srgb, var(--acc) 70%, transparent)}
#screen .actionbar button:active{transform:scale(.985); opacity:.92}
/* the page keeps clear of it */
body[data-tab="gym"] #screen{padding-bottom:0}

/* the away links, set as a quiet footnote rather than a row of buttons */
#screen .awayline{gap:16px; margin:18px 0 0; order:2}
#screen .awayline button{font-size:12.5px; font-weight:700; color:var(--ink3);
  border-bottom:1px solid var(--edge2)}

/* a poster has no need of a heading with a rule through it */
body[data-tab="gym"] #screen .rulehead{display:none}

/* ------------------------------------------------ the three things, ticked */
#screen .index.big .ixr{grid-template-columns:1fr}
#screen .index.big .ixb{display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:12px; padding:15px 0}
#screen .index.big .po-t{font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
#screen .index.big .po-s{grid-column:1; grid-row:2; font-size:12.5px; font-weight:600;
  color:var(--ink3); margin-top:2px; line-height:1.35; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical}
#screen .index.big .po-st{grid-row:1/3; font-family:"JetBrains Mono",monospace; font-size:12px;
  font-weight:700; color:var(--ink3)}
#screen .index.big .po-c{grid-row:1/3; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--edge2); display:flex; align-items:center; justify-content:center;
  color:transparent}
#screen .index.big .ixr.on .po-t{color:var(--greenInk)}
#screen .index.big .ixr.on .po-s{color:var(--greenInk); opacity:.7}
#screen .index.big .ixr.on .po-c{background:var(--green); border-color:var(--green); color:#fff}
#screen .index.big .ixr.up .po-t{color:var(--ink)}
#screen .index.big .ixr.up .po-c{border-color:var(--blue); border-width:2px}
#screen .index.big .ixr.carried .po-t{color:var(--ink3)}
#screen .index.big .ixb:active{opacity:.6}

/* the week, as seven marks rather than seven pills */
#screen .week{gap:7px; margin:16px 0 2px}
#screen .wd i{height:6px; border-radius:3px; background:var(--sunk); border:0; max-width:none}
#screen .wd.on i{background:var(--green)}
#screen .wd.on i svg{display:none}
#screen .wd.now i{background:var(--gold)}
#screen .wd b{font-size:9px; margin-top:2px}

/* the move whose turn it is says what it takes; the rest are names */
#screen .index .ixb{flex-wrap:wrap}
#screen .index .po-s{flex-basis:100%; margin:4px 0 0 38px; font-size:12.5px; font-weight:600;
  color:var(--ink3); line-height:1.4}
#screen .index .ixr.up .po-t{color:var(--ink)}
#screen .index .ixr.up .po-n{color:var(--accInk)}

/* ------------------------------------------------------- the week, as a unit
   Seven marks with the line drawn at five. The standard is a thing you can
   see rather than a rule you have to be told, and the sentence under it says
   where that leaves him today. */
#screen .wkm{margin:18px 0 2px}
#screen .wkm-row{display:grid; grid-template-columns:repeat(7,1fr); gap:7px}
#screen .wkm-d{display:flex; flex-direction:column; align-items:center; gap:5px}
#screen .wkm-d i{width:100%; height:30px; border-radius:9px; background:var(--sunk);
  border:1px solid var(--edge); display:flex; align-items:center; justify-content:center;
  color:transparent}
#screen .wkm-d.on i{background:var(--green); border-color:transparent; color:#fff}
#screen .wkm-d.ice i{background:var(--blueSoft); border-color:transparent; color:var(--blue)}
#screen .wkm-d.soon i{opacity:.4; border-style:dashed}
#screen .wkm-d.wkm-now i{box-shadow:0 0 0 2px var(--gold)}
#screen .wkm-d b{font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700;
  color:var(--ink3)}
#screen .wkm-d.on b{color:var(--greenInk)}
#screen .wkm-b{display:flex; align-items:baseline; gap:10px; margin:13px 0 0}
#screen .wkm-n{font-family:"Nunito",sans-serif; font-size:27px; font-weight:800;
  letter-spacing:-.04em; color:var(--ink); flex:none}
#screen .wkm-n em{font-style:normal; font-size:15px; font-weight:700; color:var(--ink3);
  margin-left:2px}
#screen .wkm-t{flex:1; min-width:0; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}
#screen .wkm-r{flex:none; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
#screen .wkm.kept .wkm-n{color:var(--greenInk)}
#screen .wkm.gone .wkm-n{color:var(--ink3)}

/* the line the record wrote today */
#screen .dispatch{margin:18px 0 2px; padding:16px 0 0; border-top:1px solid var(--edge);
  font-family:"Bricolage Grotesque",Georgia,serif; font-size:17px; font-weight:500;
  line-height:1.45; letter-spacing:-.01em; color:var(--ink); text-wrap:balance}

/* --------------------------------------------------------------- the shelf
   A year of weeks. The number is the full days in it; a kept week is filled. */
#screen .shelf{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin:4px 0 8px}
#screen .shw{aspect-ratio:.72; border-radius:9px; border:1px solid var(--edge);
  background:var(--card); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px}
#screen .shw b{font-family:"Nunito",sans-serif; font-size:16px; font-weight:800;
  letter-spacing:-.03em; color:var(--ink3)}
#screen .shw span{font-family:"JetBrains Mono",monospace; font-size:8px; letter-spacing:.04em;
  color:var(--ink3); opacity:.7}
#screen .shw.kept{background:color-mix(in srgb, var(--green) 16%, var(--card));
  border-color:color-mix(in srgb, var(--green) 36%, transparent)}
#screen .shw.kept b{color:var(--greenInk)}

/* ----------------------------------------------------------------- the log */
#screen .noteLog{display:grid; gap:0}
#screen .note1{padding:13px 0; border-top:1px solid var(--edge)}
#screen .note1:first-child{border-top:0}
#screen .note1 span{display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-bottom:5px}
#screen .note1 p{margin:0; font-size:15px; line-height:1.45; color:var(--ink2)}

/* -------------------------------------------------------------- the routines
   One line, under the three things. It carries no streak, no arrow and no
   consequence, so it is deliberately lighter than the index rows above it:
   a kicker in the same small mono as every other kicker, then one chip per
   routine that is live at this minute. Two chips is the usual case, one is
   common, none happens whenever the hour has nothing to say. */
#screen .care{display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--edge)}
/* the checklist above it already closes with a rule; two is a seam */
#screen ol.index.big + .care{border-top:0; padding-top:0; margin-top:16px}
#screen .care-k{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); margin-right:2px; flex:none}
#screen .care-b{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 12px 7px 9px; border-radius:999px; border:1px solid var(--edge);
  background:var(--card); font-family:"Nunito",sans-serif; font-size:13.5px;
  font-weight:700; letter-spacing:-.01em; color:var(--ink2); min-height:34px}
#screen .care-b:active{transform:scale(.96)}
#screen .care-c{width:15px; height:15px; border-radius:50%; flex:none;
  border:1.5px solid var(--edge2, var(--edge)); display:inline-flex;
  align-items:center; justify-content:center; color:transparent}
#screen .care-b.on{border-color:color-mix(in srgb, var(--green) 40%, transparent);
  background:color-mix(in srgb, var(--green) 13%, var(--card)); color:var(--greenInk)}
#screen .care-b.on .care-c{border-color:transparent;
  background:var(--green); color:#fff}
#screen .care-b.on .care-c svg{display:block}
#screen .care-l{margin:9px 0 0; font-size:13px; line-height:1.4; color:var(--ink3)}

/* ---------------------------------------------------------------- the people
   The roster sheet, and the quiet grid of it on You. Rows, not cards: the
   question is "who, and can I ring them now", and a row answers it in one
   line without asking the eye to parse a box. */
#modal .ppl{display:grid; gap:0; margin:4px 0 14px}
#modal .pp{display:flex; align-items:center; gap:11px; width:100%; cursor:pointer;
  padding:13px 2px; border:0; border-top:1px solid var(--edge); background:none;
  text-align:left; font-family:inherit; color:var(--ink)}
#modal .pp:first-child{border-top:0}
#modal .pp:active{transform:scale(.99)}
#modal .pp-c{width:22px; height:22px; border-radius:50%; flex:none;
  border:1.5px solid var(--edge2, var(--edge)); display:inline-flex;
  align-items:center; justify-content:center; color:transparent}
#modal .pp.on .pp-c{background:var(--green); border-color:transparent; color:#fff}
#modal .pp-b{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
#modal .pp-b b{font-size:16px; font-weight:800; letter-spacing:-.01em}
#modal .pp-w{font-size:12px; color:var(--ink3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
#modal .pp-d{flex:none; font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.02em; color:var(--ink3)}
#modal .pp-d.late{color:var(--goldEdge, #C98A08); font-weight:700}
#modal .pp.on .pp-b b{color:var(--greenInk)}
#modal .pp.on .pp-d{color:var(--greenInk)}

/* the zone picker, when the usual two are not it */
#modal .zlist{display:grid; gap:0; max-height:46vh; overflow-y:auto; margin:4px 0 12px;
  -webkit-overflow-scrolling:touch}
#modal .zr{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  width:100%; padding:11px 2px; border:0; border-top:1px solid var(--edge);
  background:none; cursor:pointer; font-family:inherit; color:var(--ink); text-align:left}
#modal .zr:first-child{border-top:0}
#modal .zr b{font-size:14.5px; font-weight:700}
#modal .zr span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink3)}

/* on You: their clocks, at a glance */
#screen .pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px}
#screen .pcell{display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:11px 6px; border-radius:12px; border:1px solid var(--edge); background:var(--card)}
#screen .pcell b{font-size:13px; font-weight:800; letter-spacing:-.01em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#screen .pc-t{font-family:"JetBrains Mono",monospace; font-size:17px; font-weight:500;
  letter-spacing:-.02em; color:var(--ink); margin-top:2px}
#screen .pc-w{font-size:10px; color:var(--ink3)}
#screen .pc-d{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.04em;
  color:var(--ink3); margin-top:3px}
#screen .pcell.over{border-color:color-mix(in srgb, var(--gold, #F2B735) 45%, transparent);
  background:color-mix(in srgb, var(--gold, #F2B735) 9%, var(--card))}
#screen .pcell.over .pc-d{color:var(--goldEdge, #C98A08); font-weight:700}
#screen .pcell.on{border-color:color-mix(in srgb, var(--green) 38%, transparent);
  background:color-mix(in srgb, var(--green) 11%, var(--card))}
#screen .pcell.on .pc-d{color:var(--greenInk)}
#screen .lnk{border:0; background:none; padding:0; cursor:pointer; font:inherit;
  color:var(--ink2); text-decoration:underline; text-underline-offset:2px}

/* --------------------------------------------------------------- the opening
   A front page, not a dashboard. It gets the whole screen for a few seconds
   once a day and then it is not anywhere, which is the only reason a screen
   this size is allowed in an app whose owner has said three times that the
   screens are too busy. Big type, one hairline, a lot of air. */
#opening{position:fixed; inset:0; z-index:64; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top, 0px) + 26px) 26px
          calc(env(safe-area-inset-bottom, 0px) + 26px);
  opacity:0; transition:opacity .34s ease}
#opening.on{opacity:1}
#opening.going{opacity:0; transition:opacity .38s ease}
#opening .op-in{width:100%; max-width:440px; display:flex; flex-direction:column;
  transform:translateY(9px); transition:transform .44s cubic-bezier(.2,.8,.3,1)}
#opening.on .op-in{transform:none}

#opening .op-k{display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-bottom:9px}
#opening .op-s{display:block; margin-top:7px; font-size:14.5px; line-height:1.45;
  color:var(--ink3)}

#opening .op-y b, #opening .op-back b{display:block;
  font-family:"Bricolage Grotesque",Georgia,serif; font-size:31px; font-weight:600;
  line-height:1.12; letter-spacing:-.035em; color:var(--ink); text-wrap:balance}
#opening .op-y b.won{color:var(--greenInk)}
#opening .op-y b.ice{color:var(--ink2)}

#opening .op-wk{display:flex; gap:6px; margin:18px 0 0}
#opening .op-d{flex:1 1 0; height:6px; border-radius:99px; background:var(--edge)}
#opening .op-d.on{background:var(--green)}
#opening .op-d.ice{background:color-mix(in srgb, var(--blue, #5AC8F5) 55%, var(--edge))}
#opening .op-d.soon{background:color-mix(in srgb, var(--edge) 45%, transparent)}
#opening .op-d.now{box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold, #F2B735)}
#opening .op-wl{margin-top:9px; font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}

#opening .op-rule{height:1px; background:var(--edge); margin:26px 0 24px}

#opening .op-t b{display:block; font-family:"Bricolage Grotesque",Georgia,serif;
  font-size:39px; font-weight:600; line-height:1.06; letter-spacing:-.04em;
  color:var(--ink); text-wrap:balance}

#opening .op-f{margin:24px 0 0; display:grid; gap:0}
#opening .op-fr{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:10px 0; border-top:1px solid var(--edge)}
#opening .op-fr span{font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); flex:none}
#opening .op-fr b{font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink2);
  text-align:right}

#opening .op-go{margin-top:30px; width:100%; min-height:52px; border-radius:14px;
  border:1px solid var(--edge2, var(--edge)); background:var(--card); cursor:pointer;
  font-family:"Nunito",sans-serif; font-size:15.5px; font-weight:800; letter-spacing:-.01em;
  color:var(--ink)}
#opening .op-go:active{transform:scale(.985)}

@media (max-height:680px){
  #opening .op-y b, #opening .op-back b{font-size:26px}
  #opening .op-t b{font-size:31px}
  #opening .op-rule{margin:18px 0 16px}
  #opening .op-go{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  #opening, #opening .op-in{transition:none}
}

/* ---------------------------------------------------------------- tomorrow
   Only ever on a day that is already in, so it is never competing with the
   three things - by the time it exists they are all ticked. */
#screen .tmw{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--edge)}
#screen .tmw span{font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); flex:none}
#screen .tmw b{font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink2)}

/* ------------------------------------------------------------------- so far
   The one piece of prose in the app that is about the whole record rather
   than one day of it. Set like a paragraph, because that is what it is. */
#screen .sofar p{margin:0 0 11px; font-family:"Bricolage Grotesque",Georgia,serif;
  font-size:15.5px; font-weight:400; line-height:1.5; letter-spacing:-.005em;
  color:var(--ink2); text-wrap:pretty}
#screen .sofar p:last-child{margin-bottom:0}
#screen .sofar p:first-of-type{font-size:17px; color:var(--ink); font-weight:500}