/* The admin shell's own layer, and nothing else. The rail, the app bar, the working area,
   the view header and the banner are all in shared/css/shell.css — the two shells wear one
   chrome, and a rule edited in one copy and not the other is a rail 4px wider on one host
   with nothing to catch it. What is left here is the handful of things only this host has.

   All four rules exist because a control that leaves the origin has to look like it does.
   The admin's own links stay <a href>; the crossings to editor.neuregami.com are <button>s
   driven by POST /api/auth/handoff (editor-link.js), so they need the affordances a link
   gets for free — and, in the rail, they must not borrow the name of a rule that already
   means something else. */

/* THE NAME CLASH THIS AVOIDS. §8.1 of EDITOR-SPEC.md asks for `a.rail-item.rail-out` in the
   rail foot, but `.rail-out` is already taken: shell.css:71 is the hover chevron *inside* a
   rail item, 14px square and `opacity:0` at rest. A door wearing that class is a door
   nobody can see. Hence .rail-cross — same row, its own arrow, always visible. */
.rail-cross{
  margin-top:2px;
  background:color-mix(in srgb, var(--canvas) 9%, transparent);
  border-radius:10px;
}
.rail-cross:hover{ background:color-mix(in srgb, var(--canvas) 18%, transparent) }
.rail-cross .rail-ico{ opacity:.85 }
.rail-cross:disabled{ cursor:progress; opacity:.6 }

/* A dashboard card that leaves the site. The arrow sits at the trailing edge where a link's
   external marker belongs; `margin-inline-start:auto` rather than a float so it stays at the
   end in a right-to-left document too. */
.qcard-out{
  margin-inline-start:auto; flex:none;
  width:18px; height:18px; opacity:.45;
  transition:opacity var(--dur) var(--ease);
}
.qcard-out svg{ width:18px; height:18px }
.qcard:hover .qcard-out{ opacity:.9 }

/* The one card that is the point of the screen. It spans the grid so it never sits in a row
   of four looking like a peer of "Backups".

   IT LIFTS WITH --panel-2, NOT WITH --tint-2, and the difference is the whole rule. Inside
   a .qcard (kit.css:112-127) the ink tokens are REDEFINED for a pale panel: --ink becomes
   --rail-ink, near-black, and --tint-2 becomes an 11% *dark* wash meant to sit on top of
   that pale panel. Setting the card's own background to --tint-2 therefore paints 11% black
   over the dark canvas behind it and leaves near-black text on it — a card that reads as an
   icon and nothing else. It shipped that way for one screenshot. --panel-2 is the token for
   exactly this: one step deeper than --panel, still pale, still under dark ink. */
.qcard-lead{
  grid-column:1 / -1;
  background:var(--panel-2);
  border-color:var(--line-2);
}
.qcard-lead > .ico{ background:var(--canvas-3); color:var(--on-canvas) }

.qcard:disabled{ cursor:progress; opacity:.6; transform:none }