/* THE LIVING EVENT. Lane A5, 18 September 2026.
 *
 * This file is one of two A5 owns outright. It adds nothing to the token block
 * in app.css and redefines nothing there. Everything below is either the pulse,
 * the find key and its sheet, the live mark, the landing law's "new" key, the
 * now hairline and the gap line, or the colour cut, which is deletions only.
 *
 * Every colour is taken from a token app.css already defines and measured
 * there. No new hue is introduced by this file; the cut only takes hues away.
 */

/* ---------------------------------------------------------------- the pulse
 *
 * WHY THE OLD NOW BAR STAYS IN THE DOM AND IS HIDDEN HERE RATHER THAN REMOVED.
 * paintNowBar() in app.js returns on its first line when #nowbar is missing,
 * and it returns before paintHeadFill(), which draws the head's red hairline,
 * and before the data-on attribute the fold and the co-brand hang off. Taking
 * the element out of index.html would quietly kill both. So the element stays,
 * it is never painted, and the pulse is the one bar a delegate sees.
 */
#nowbar{display:none !important}

.pulse{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"mark state door" "title title door";
  align-items:center;
  column-gap:8px; row-gap:2px;
  min-height:56px;
  /* THE HOUSE GUTTER, NOT A NEW NUMBER (the cold reader's finding 6). The row
   * had none, so at 390 the session title sat at x=0 and the red key ran to
   * x=390: both welded to the edges of the phone while every other row on the
   * screen kept its 16. --pad is the same token the head's own top row uses,
   * so the pulse lines up with the masthead above it at all three widths. */
  padding:6px var(--pad, 16px) 8px;
  border-top:1px solid rgba(195,206,228,.22);
}
.pulse[hidden]{display:none}

.pulse .pmark{grid-area:mark; width:10px; height:10px; flex:none; position:relative}
.pulse .pstate{
  grid-area:state; min-width:0;
  font:400 15px/1.2 var(--mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
  color:var(--on-navy-dim);
}
.pulse .ptitle{
  grid-area:title; min-width:0;
  font:600 15px/1.3 var(--sans);
  color:var(--on-navy);
  text-wrap:balance;
}
.pulse .pdoor{
  grid-area:door;
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 14px;
  border-radius:var(--r-s,12px);
  background:var(--red-key); color:var(--on-red);
  /* 16 px because it is a control, not a label. It read 15 and the gate never
   * saw it: the row was hidden on every cold screen the gate opens, so the
   * control rule had nothing to measure. The moment the row painted, the gate
   * named it on every screen at every width. */
  font:600 16px/1.2 var(--sans);
  text-decoration:none;
  touch-action:manipulation;
}
.pulse .pdoor .chev{width:12px; height:12px; flex:none;
  border-right:2px solid currentColor; border-top:2px solid currentColor;
  transform:rotate(45deg); margin-left:2px}
.pulse .pdoor:focus-visible{outline:3px solid var(--on-navy); outline-offset:2px}

@media (min-width:1024px){
  .pulse{grid-template-columns:auto auto 1fr auto;
         grid-template-areas:"mark state title door";
         min-height:48px; column-gap:12px}
}

/* ------------------------------------------------------- the one live mark
 *
 * One treatment, in at most five places, counted by tools/A5-mark-count.mjs
 * which fails above five. Three pulses over 4.5 s and then a solid dot, which
 * is under the five second floor at which W3C 2.2.2 asks for a pause control.
 * The ring is a pseudo element, so the mark is one node wherever it is used.
 */
.livemark{display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--red); position:relative; flex:none}
.livemark::after{content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--red); opacity:.55;
  animation:liveRing 1.5s var(--ease) 3 forwards}
@keyframes liveRing{
  from{transform:scale(1); opacity:.55}
  to{transform:scale(2.4); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .livemark::after{animation:none; opacity:0}
}
:root[data-motion="off"] .livemark::after{animation:none; opacity:0}

/* the true value beside an animating figure, read instead of it */
.countTrue{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.counting{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- the landing law
 *
 * Nothing reorders under a reading thumb. When the reader is not at the top of
 * a list, or the field has focus, the new rows are held and this key is drawn
 * at the list's top edge instead. It is a real 44 px control, never a badge.
 */
.newkey{
  position:sticky; top:0; z-index:4;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:44px;
  border:1px solid var(--line-strong); border-radius:var(--r-s,12px);
  background:var(--paper); color:var(--ink);
  font:600 15px/1.2 var(--sans);
  cursor:pointer; touch-action:manipulation;
  box-shadow:var(--shadow-lift);
}
.newkey[hidden]{display:none}
.newkey:focus-visible{outline:3px solid var(--red-key); outline-offset:2px}
.landed{animation:landIn 250ms var(--in-out) both}
@keyframes landIn{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .landed{animation:none} }

/* ------------------------------------------------- the find key and sheet */
.findkey{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border:0; background:transparent; color:var(--on-navy);
  border-radius:var(--r-s,12px); cursor:pointer; touch-action:manipulation;
}
.findkey:focus-visible{outline:3px solid var(--on-navy); outline-offset:-2px}
.findkey .glyph{width:24px; height:24px; display:block; background:currentColor;
  -webkit-mask:var(--m-find) center/24px 24px no-repeat;
          mask:var(--m-find) center/24px 24px no-repeat}
:root{
  --m-find:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.3-4.3'/></svg>");
}

#findSheet{
  border:0; padding:0; background:transparent;
  width:100%; max-width:100%; max-height:100%;
  margin:auto auto 0; 
}
#findSheet::backdrop{background:rgba(20,31,65,.55)}
#findSheet .fsheet{
  background:var(--paper); color:var(--ink);
  border-top-left-radius:var(--r,16px); border-top-right-radius:var(--r,16px);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lift);
  max-height:86vh; display:flex; flex-direction:column;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));
  animation:fsRise 300ms var(--in-out) both;
}
@keyframes fsRise{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ #findSheet .fsheet{animation:fsFade 200ms linear both} }
@keyframes fsFade{from{opacity:0} to{opacity:1}}

#findSheet .fstop{display:flex; align-items:center; gap:8px; margin-bottom:8px}
#findSheet .fsfield{
  flex:1 1 auto; min-width:0; min-height:44px;
  font:400 16px/1.3 var(--sans); color:var(--ink);
  background:var(--sunk); border:1px solid var(--line-strong);
  border-radius:var(--r-s,12px); padding:0 12px;
}
#findSheet .fsfield:focus-visible{outline:3px solid var(--red-key); outline-offset:1px}
#findSheet .fsshut{
  width:44px; height:44px; flex:none; border:1px solid var(--line-strong);
  border-radius:var(--r-s,12px); background:var(--paper); color:var(--ink);
  font:600 15px/1 var(--sans); cursor:pointer; touch-action:manipulation;
}
#findSheet .fslist{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto}
#findSheet .fslist li{
  display:block; min-height:56px; padding:8px 10px;
  border-bottom:1px solid var(--line); cursor:pointer;
  border-left:2px solid transparent;
}
#findSheet .fslist li .n{display:block; font:400 17px/1.3 var(--sans); color:var(--ink)}
#findSheet .fslist li .k{display:block; font:400 15px/1.3 var(--sans); color:var(--ink-mute)}
#findSheet .fslist li[aria-selected="true"]{background:var(--sunk); border-left-color:var(--red)}
#findSheet .fsnone{font:400 15px/1.4 var(--sans); color:var(--ink-mute); padding:10px}
@media (min-width:1024px){
  #findSheet{margin:auto}
  #findSheet .fsheet{width:640px; max-width:92vw; height:60vh; border-radius:var(--r,16px)}
}
@media (max-width:360px){
  #findSheet .fslist li{min-height:68px}
}

/* ------------------------------------------- the now hairline and gap line */
.railwrap{position:relative}
.nowline{
  /* TOP IS PINNED, NOT LEFT TO THE STATIC POSITION. `.day` is a grid, so an
   * absolutely positioned child with auto offsets resolves to the padding box
   * origin on one browser and to the end of the flow on another. Pinned at
   * zero the transform is the whole position and it is the same everywhere. */
  position:absolute; top:0; left:0; right:0; height:2px; background:var(--red);
  z-index:3; pointer-events:none;
  transition:transform 300ms var(--ease);
}
.nowline::before{content:""; position:absolute; left:0; top:-3px;
  width:8px; height:8px; border-radius:50%; background:var(--red)}
@media (prefers-reduced-motion:reduce){ .nowline{transition:none} }
.rowpast{color:var(--ink-dim)}

.gapline{
  display:block; margin:8px 0 0; padding:8px 0 0;
  border-top:1px solid var(--line);
  font:400 15px/1.4 var(--sans); color:var(--ink-mute);
}

/* ----------------------------------------------------------- THE COLOUR CUT
 *
 * Every rule in this block takes a hue off a screen. Nothing here adds one.
 * The two .bigdoor.amber rules are deleted out of app.css itself, because a
 * deletion conflicts less than an override; what is left here is the work that
 * cannot be done by deleting a line A4 may also be holding.
 */

/* the agent page's own ground, so #/game is not a second coloured field */
.shell.agpage, .shell.agentec.agpage{background:var(--page)}

/* a chip is a word on a hairline rule, not a filled box owning its own hue */
.chip{
  background:transparent !important;
  border:0 !important; border-bottom:1px solid var(--line-strong) !important;
  border-radius:0 !important;
  color:var(--ink-dim) !important;
  padding:0 0 2px !important;
}
.chip i{
  width:8px !important; height:8px !important; border-radius:50% !important;
  margin-right:6px !important;
}

/* the three verdicts are the word with a 2 px rule in the verdict's colour */
.verdict, .vword{
  background:transparent !important; border-radius:0 !important;
  font:600 15px/1.3 var(--sans) !important;
  color:var(--ink) !important;
  padding:0 0 2px !important;
  border:0 !important;
  border-bottom:2px solid currentColor !important;
}
.verdict.automate, .vword.automate{border-bottom-color:var(--automate) !important}
.verdict.govern,   .vword.govern  {border-bottom-color:var(--govern) !important}
.verdict.human,    .vword.human   {border-bottom-color:var(--human) !important}

/* --------------------------------------------- the three requests answered
 *
 * A row in the find sheet is a control, so it loses the tap delay like every
 * other control (canon 65). A person who has asked for more contrast gets a
 * solid rule and a thicker ring, not the same faint one (canon 32b). And in
 * Windows high contrast every colour here is removed, so the hairline, the
 * live mark and the marked row each keep a system colour underneath the one
 * they were drawn in, because in the day rail the red line IS the information
 * (canon 32c).
 */
#findSheet .fslist li{touch-action:manipulation}

@media (prefers-contrast:more){
  .pulse{border-top-color:var(--on-navy)}
  .pulse .pstate{color:var(--on-navy)}
  .newkey{border-width:2px; border-color:var(--ink)}
  #findSheet .fslist li{border-bottom-color:var(--ink-mute)}
  #findSheet .fslist li[aria-selected="true"]{border-left-width:3px}
  .gapline{color:var(--ink); border-top-color:var(--ink-mute)}
  .pulse .pdoor:focus-visible,
  .newkey:focus-visible,
  .findkey:focus-visible{outline-width:4px}
}

@media (forced-colors:active){
  .nowline{background:Highlight; forced-color-adjust:none}
  .nowline::before{background:Highlight; forced-color-adjust:none}
  .livemark{background:Highlight; forced-color-adjust:none}
  .livemark::after{display:none}
  .pulse .pdoor{border:2px solid ButtonText}
  .newkey{border:2px solid ButtonText}
  #findSheet .fslist li[aria-selected="true"]{
    border-left-color:Highlight; outline:2px solid Highlight; outline-offset:-2px}
  .rowpast{color:GrayText}
}