/* ==========================================================================
   SMDL flyout layer — the record panel (DESIGN.md §6, §11.1, §11.2)
   --------------------------------------------------------------------------
   A record opens as a panel over the page it was opened from, full height
   against the right edge. The corners are SQUARE: round them and the panel
   reads as a floating card somebody cut in half, which is the note that came
   back from review round one.

   Every value here comes from the v6 token sheet in smdl.css — the widths
   (--w-fly-s/m/l), the stacking (--z-fly), the scrim, the dialog shadow and the
   durations were all added there for this layer. Nothing in this file defines a
   colour of its own, so both themes are the palette's job and this file has no
   opinion about which one is on.

   This is a NEW file rather than an edit to smdl-shell.css, which is pinned by
   its sha256 in six repositories at once. Nothing here re-declares a rule the
   family pins (body, .page, .card, .btn, a, p, :focus-visible …): every
   selector is under .smdl-fly.
   ========================================================================== */

.smdl-fly-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-fly) - 1);
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-scrim) var(--ease);
}
.smdl-fly-scrim.is-open { opacity: 1; pointer-events: auto; }

.smdl-fly {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-fly);
  width: var(--w-fly-m);
  max-width: calc(100vw - 48px);
  background: var(--card);
  border-left: 1px solid var(--hair);
  box-shadow: var(--shadow-dlg);
  /* Square. Against the right edge, over the top bar, the full height of the
     viewport — a record is a place, not a card floating above one. */
  border-radius: 0;
  transform: translate3d(32px, 0, 0);
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform var(--dur-fly) var(--ease),
              opacity var(--dur-fly) var(--ease),
              visibility 0s linear var(--dur-fly);
}
.smdl-fly.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-fly) var(--ease),
              opacity var(--dur-fly) var(--ease),
              visibility 0s;
}
/* Size by content: 400 forms and short records, 480 triage and wizards, 640
   records with tabs. The device record is 640. */
.smdl-fly[data-size="s"] { width: var(--w-fly-s); }
.smdl-fly[data-size="m"] { width: var(--w-fly-m); }
.smdl-fly[data-size="l"] { width: var(--w-fly-l); }
.smdl-fly:focus { outline: none; }
.smdl-fly:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .smdl-fly, .smdl-fly-scrim { transition: none; }
}

/* The record: header, body, footer. The tabs ride inside the header so the
   three-row grid holds whether or not a record has any. */
.smdl-fly-record {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.smdl-fly-record > * { min-width: 0; }
/* The `hidden` attribute loses to any author `display`, and every control in
   this panel has one — which is how a footer's Save button, hidden because its
   tab is not the open one, went on being shown on every tab. */
.smdl-fly [hidden] { display: none !important; }

/* ---------------------------------------------------------------- header */

.smdl-fly-head {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--hair);
  background: var(--card);
}
.smdl-fly-head-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 64px;
  padding: 12px 16px;
}
.smdl-fly-ttl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.smdl-fly-eyebrow {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* A flex heading cannot ellipsise its own text, and a panel whose name reads
   "Uplink Gi1/0/47 d…" has lost the record's identity. So the title takes a
   second line before it truncates. */
.smdl-fly-ttl h2 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.smdl-fly-ttl h2 > * { vertical-align: baseline; }
.smdl-fly-sub {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.smdl-fly-ctl {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.smdl-fly-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.smdl-fly-icon:hover { background: var(--hover); color: var(--ink); }
.smdl-fly-icon[disabled] { opacity: .4; cursor: default; }
.smdl-fly-icon .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ tabs
   The panel's tabs write ?tab=. The page's own section nav keeps ?view= /
   ?section= — sharing one key threw the reader back to the default section
   every time a record was opened. */
.smdl-fly-tabs {
  display: flex;
  gap: 20px;
  padding: 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.smdl-fly-tabs::-webkit-scrollbar { display: none; }
.smdl-fly-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.smdl-fly-tab:hover { color: var(--ink); }
.smdl-fly-tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.smdl-fly-tab .n {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-3);
  border-radius: var(--radius-badge);
  padding: 1px 5px;
}

/* ------------------------------------------------------------------ body */

.smdl-fly-body {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--canvas);
}
/* Column flex was letting sections collapse to their headings instead of the
   body scrolling: the body scrolls, its sections keep their height. */
.smdl-fly-body > * { flex-shrink: 0; min-width: 0; }

.smdl-fly-sec {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  min-width: 0;
}
.smdl-fly-sec > .sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--hair-soft);
}
.smdl-fly-sec > .sec-head .n { font-weight: 400; color: var(--ink-3); }
.smdl-fly-sec > .sec-head .act { margin-left: auto; display: flex; gap: 4px; }
.smdl-fly-sec > .sec-body { padding: 4px 14px 8px; }
.smdl-fly-sec > .sec-body.pad { padding: 12px 14px; }
.smdl-fly-sec > .sec-body.flush { padding: 0; }

/* A record's facts. Every grid child is minmax(0,1fr) and every value may wrap:
   a long serial, URL or key ellipsises or wraps, it never widens the panel. */
.smdl-fly-dl {
  display: grid;
  /* No column gap: the hairline between two facts is one line across the
     record, not two with a notch cut out of the middle. */
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  margin: 0;
}
.smdl-fly-dl > dt,
.smdl-fly-dl > dd {
  padding: 9px 0;
  border-top: 1px solid var(--hair-soft);
  font-size: 13.5px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.smdl-fly-dl > dt { padding-right: 12px; }
.smdl-fly-dl > dt:first-of-type,
.smdl-fly-dl > dt:first-of-type + dd { border-top: 0; }
.smdl-fly-dl > dt { color: var(--ink-3); }
.smdl-fly-dl > dd { color: var(--ink); margin: 0; }

.smdl-fly-mono {
  font-family: var(--mono);
  font-size: 12.5px;
}
.smdl-fly-quiet { color: var(--ink-3); }
.smdl-fly-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* A status the eye finds before it reads: the same three hues the rest of the
   language uses, and never a fourth. */
.smdl-fly-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
}
.smdl-fly-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--off);
  flex: none;
}
.smdl-fly-dot.is-up { background: var(--good); }
.smdl-fly-dot.is-degraded { background: var(--warn); }
.smdl-fly-dot.is-down { background: var(--bad); }
.smdl-fly-dot.is-unknown { background: var(--off); }

.smdl-fly-note {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: var(--surface-2);
  font-size: 13.5px;
  color: var(--ink-2);
}
.smdl-fly-note.is-bad,
.smdl-fly-note.is-warn {
  background: var(--card);
  border-color: var(--hair);
  border-left-width: 2px;
  border-radius: 0;
  color: var(--ink);
  line-height: 1.5;
}
.smdl-fly-note.is-bad { border-left-color: var(--bad); }
.smdl-fly-note.is-warn { border-left-color: var(--warn); }
.smdl-fly-note + .smdl-fly-sec,
.smdl-fly-sec + .smdl-fly-sec { margin-top: 16px; }
.smdl-fly-note b { font-weight: 600; }

.smdl-fly-tablewrap { overflow-x: auto; }
.smdl-fly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.smdl-fly-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  height: 32px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hair-soft);
  white-space: nowrap;
}
.smdl-fly-table td {
  height: var(--row-dense);
  padding: 6px 14px;
  border-top: 1px solid var(--hair-soft);
  color: var(--ink);
  vertical-align: middle;
}
.smdl-fly-table tbody tr:first-child td { border-top: 0; }
.smdl-fly-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.smdl-fly-table .ref { font-family: var(--mono); font-size: 12.5px; }

/* --------------------------------------------------------------- the form
   A form inside the panel, whose submit button lives in the footer OUTSIDE it
   and names it with form="…". */
.smdl-fly-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.smdl-fly-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.smdl-fly-field > .label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.smdl-fly-field > .help {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-3);
}
.smdl-fly-field input[type="text"],
.smdl-fly-field input[type="password"],
.smdl-fly-field input[type="number"],
.smdl-fly-field textarea,
.smdl-fly-field select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.smdl-fly-field textarea { resize: vertical; }

/* ---------------------------------------------------------------- footer */

.smdl-fly-foot {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
  background: var(--card);
}
.smdl-fly-foot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 16px;
}
.smdl-fly-foot-row[hidden] { display: none; }
.smdl-fly-foot-row .spring { flex: 1; }

/* --------------------------------------------------------- the open row
   The ENGINE marks the row whose record is open, and clears it on close. The
   private data attribute is also the styling hook: semantic attributes stay
   truthful to native links, actual selection widgets and plain table rows.
   A narrow edge preserves that relationship without painting the record. */
#smdl-main [data-smdl-current="true"]:not(tr) { box-shadow: inset 2px 0 var(--accent); }
#smdl-main tr[data-smdl-current="true"] > td:first-child { box-shadow: inset 2px 0 var(--accent); }
#smdl-main [data-fly] { cursor: pointer; }
#smdl-main tr[data-fly]:hover { background: var(--hover); }
#smdl-main tr[data-fly]:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* The panel covers the canvas on a narrow viewport rather than squeezing it. */
@media (max-width: 760px) {
  .smdl-fly,
  .smdl-fly[data-size="s"],
  .smdl-fly[data-size="m"],
  .smdl-fly[data-size="l"] {
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
  }
  .smdl-fly-head-row { padding-left: 16px; }
  .smdl-fly-tabs, .smdl-fly-body, .smdl-fly-foot-row { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   THE PANEL'S ONLY DROPDOWN WAS PAINTED BEHIND THE PANEL.

   The shell's select enhancer does not leave its menu where the control is: it
   lifts it to the shell root and positions it `fixed` against the trigger's
   viewport rectangle, so that a menu inside a scrolling region is never
   clipped by it. That is right, and it is why the menu's coordinates do not
   care which element it hangs from.

   Its z-index does. The menu sits at 120 in smdl-shell.css, chosen against the
   layers the shell had; this panel is at --z-fly (1000) on <body>, above the
   shell root entirely. So the one write control the record ships -- Manage's
   Site chooser -- opened into a rectangle the panel was covering: the trigger
   took its open state, the menu was on the page, and every point inside it hit
   panel content instead. Nothing to click, and nothing on screen to say why.

   The panel cannot lower itself (it has to cover the canvas and the scrim) and
   the shell's own stylesheet is byte-pinned across six products, so the fix
   belongs here, scoped to exactly when it matters: while a record is open, a
   menu the shell lifted out of that record paints above it. Still below
   --z-confirm, because a confirmation must outrank the thing it is confirming.
   ------------------------------------------------------------------------ */
body:has(.smdl-fly.is-open) .smdl-select-menu:not([hidden]) {
  z-index: calc(var(--z-fly) + 2);
}


/* ==========================================================================
   THE CREATE PANEL — the same drawer, opened for a thing that does not exist
   yet (app/templates/_fly_new.html).

   Nothing below defines a colour. Every value is a token from smdl.css, so
   both themes are the palette's job and this file still has no opinion about
   which one is on. Every selector is under .smdl-fly, so nothing here can
   reassign a rule the family pins.
   ========================================================================== */

/* A sentence, not a caption: the create panel leads with what the thing IS
   before it asks anything, and the line has to be readable at that length. */
.smdl-fly-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink-2);
}
.smdl-fly-help {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-3);
}

/* THE BRANCH. One question, and the answers are rows you press — not radio
   buttons, because choosing here changes the whole rest of the panel and a
   radio promises it will not. They are real links carrying ?tab=, so they work
   with scripting off; the engine swaps the pane without a request. */
.smdl-fly-choices { display: flex; flex-direction: column; gap: 8px; }
.smdl-fly-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}
.smdl-fly-choice:hover { background: var(--hover); border-color: var(--line-strong); }
.smdl-fly-choice.is-on { box-shadow: inset 2px 0 var(--accent); }
.smdl-fly-choice.is-on .ch b { font-weight: 700; }
.smdl-fly-choice > .ic { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.smdl-fly-choice > .ic.go { margin-left: auto; color: var(--ink-4); }
/* The provider marks are a letter rather than a glyph, and they sit in the
   same 18px column the icons do so the rows line up either way. */
.smdl-fly-choice > .mark {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.smdl-fly-choice .ch { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.smdl-fly-choice .ch b { font-size: 13.5px; font-weight: 600; }
.smdl-fly-choice .ch small {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--ink-3);
}

/* Back to the question. A step that cannot be un-chosen is a trap. */
.smdl-fly-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 14px 2px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-decoration: none;
}
.smdl-fly-back:hover { color: var(--ink); }
.smdl-fly-back .ic { width: 14px; height: 14px; }

/* A secret shown once. Selectable, wrapping, and monospace, because the next
   thing that happens to it is a copy — and a token that has to be re-typed
   from a truncated line is a token nobody enrols with. */
.smdl-fly-secret {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink);
  background: var(--accent-quiet);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  user-select: all;
}
.smdl-fly-cmd-label {
  margin: 14px 0 5px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}
/* Commands scroll sideways rather than wrapping: a wrapped shell line is a
   line somebody pastes with a break in it. */
.smdl-fly-code {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius-sm);
  white-space: pre;
  overflow-x: auto;
}

/* Two fields that are one question — a comparison and its number, a city and
   its state. They collapse on a narrow panel rather than shrinking to nothing. */
.smdl-fly-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) {
  .smdl-fly-row2 { grid-template-columns: 1fr; }
}

.smdl-fly-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink);
}
.smdl-fly-check input { margin: 2px 0 0; accent-color: var(--accent); }

/* Where a credential comes from, on the screen that asks for it. A <details>
   rather than the page's scripted disclosure: the panel carries no page script
   and this opens without one. */
.smdl-fly-howto {
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.smdl-fly-howto > summary { cursor: pointer; color: var(--ink-2); font-weight: 500; }
.smdl-fly-howto ol { margin: 8px 0 0; padding-left: 18px; }
.smdl-fly-howto li { margin: 0 0 5px; line-height: 18px; }
.smdl-fly-howto .warn { margin: 8px 0 0; color: var(--warn); line-height: 18px; }
.smdl-fly-howto .warn .ic { width: 14px; height: 14px; vertical-align: -2px; }
.smdl-fly-howto a { display: inline-block; margin: 8px 12px 0 0; }
.smdl-fly-howto a .ic { width: 12px; height: 12px; vertical-align: -1px; }