/* ============================================================================
   fixes.css  ::  OWNED BY THE FRONTEND SEAT, loaded after console.css.

   WHY THIS IS A SEPARATE FILE AND NOT AN EDIT TO console.css. Two seats built
   this surface in the same directory at the same time. console.css is the
   designer's and stays theirs; this file is everything the implementation
   needed after the markup met a browser. One owner per file, so neither of us
   can clobber the other mid-run.

   TO THE DESIGNER: fold anything here you agree with into console.css and
   delete it from this file. Nothing in here is a visual decision, and where a
   rule could be read as one it says so.
   ========================================================================= */

/* ---- keyboard entry. There was no way past the nav without a mouse. ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:99;font-family:'Space Mono';font-size:12px;
  background:var(--bound);color:#100F0A;padding:10px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

/* ---- visible focus. The console is a form; a keyboard user has to see the
        caret's whereabouts, and the default ring is invisible on this canvas. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--bound);outline-offset:3px;border-radius:4px}
h1:focus,h2:focus,.bh .q:focus{outline:none}   /* focus moved by the router, not by the user */

/* ---- the brand mark. UNTOLL and the surface word collided with no space. ---- */
.brand .surf{margin-left:3px;align-self:flex-end;padding-bottom:2px}

/* ---- destination cards.
        console.css styles `.dmid` and the markup never carried that class, so
        the name block had no flex basis and sat inline with its kind line.
        The card is a <button>, so its children are spans (a <div> inside a
        <button> is invalid), and these give the spans their boxes back. ---- */
.dest .dname{flex:1 1 auto;min-width:0;display:block}
.dest .dn,.dest .dk{display:block}
.dest .dtop,.dest .dfoot{display:flex}
.dest .dsay{display:block}
.dest .state{display:inline-flex}
.dest[aria-pressed="true"]{border-color:var(--bound)}
.askcard{border-style:dashed;border-color:var(--bound-deep);cursor:default;
  justify-content:center;align-items:center;text-align:center;gap:9px}

/* ---- chips. The remove control and the add control are real buttons now, so
        they answer to Enter and to a screen reader. Reset the UA styling. ---- */
.chip .x,.chip.add{font-family:inherit;background:none;border:0;color:inherit;cursor:pointer}
.chip .x{padding:0 2px;font-size:15px;line-height:1;color:var(--faint)}
.chip .x:hover{color:var(--bound)}
.chip.add{border:2px dashed var(--bound-deep);border-radius:8px;padding:7px 10px;
  font-family:'Space Mono';font-size:12px;color:var(--bound);background:var(--card-2)}
.chip.add:hover{background:var(--bound-soft)}

/* ---- the two-column rows sat on different baselines, because one column had
        a wrapping label and the other did not. Give the label a fixed two-line
        box so the inputs line up whatever the label does. ---- */
.two > .row > .lab{min-height:24px}
.two{align-items:end}

/* ---- GRANT_LIMIT is a contract constant, so it reads rather than inputs. ---- */
.fixed{display:flex;align-items:center;gap:10px;border:2px solid var(--edge-dim);border-radius:9px;
  padding:9px 13px;background:var(--card-2)}
.fixed .n{font-family:'Archivo Black';font-size:17px;letter-spacing:-.02em;color:var(--bound)}
.fixed .u{font-family:'Space Mono';font-size:12px;color:var(--muted)}

/* ---- an unset value on the grant. The grant footer promises that a blank
        line means an unarmed check, so a blank line has to look unarmed. ---- */
.gline .v .none{color:rgba(246,236,212,.30);font-style:normal}
.armbar .cnt.short{color:var(--crowd,#FF6A4D)}
.armgrid span:not(.on){background:var(--edge-dim)}

/* ---- the armed list on the grant screen, when a reason is not armed ---- */
.tag.off{opacity:.55;border-style:dashed;display:inline-flex;gap:7px;align-items:baseline}
.tag.off .why{font-size:10px;color:var(--faint);letter-spacing:0;text-transform:none}

/* ---- a disabled write button has to look disabled and stay unclickable ---- */
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{transform:none}

/* ---- the grant panel is a live region; stop it jumping as values change ---- */
.grant .gline .v{min-height:19px}

/* ---- reduced motion. Two pulses run forever on this page. ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
