/* ============================================================
   THE CONTROL SYSTEM — one visual language for the operator side.

   NOT A NEW LOOK. The house already has an identity: ruby #c1121f,
   cream #f4efe6, Anton for display, Archivo for body, Manrope for UI.
   Fifteen admin pages each re-invented their own spacing, radii and
   field treatment in 57KB of inline CSS, which is why the back end
   reads as a Frankenstein -- not because any one page is ugly, but
   because no two agree.

   So these are the shared decisions, stated once. Pages keep their own
   layout; they stop re-deciding what a field, a button, a card or a
   surface colour is.

   Dark only, deliberately. Every operator page already pins
   data-theme-lock="dark" -- an ops surface that changes colour with the
   clock makes you re-find everything twice a day.
   ============================================================ */

:root {
  /* Surfaces, darkest to lightest. Four steps is enough to build depth
     and few enough that nobody has to guess which grey they meant. */
  --cs-0: #0a0807;   /* page */
  --cs-1: #121011;   /* panel */
  --cs-2: #1a1718;   /* raised */
  --cs-3: #241f20;   /* hover */

  --cs-edge: rgba(255,255,255,.10);
  --cs-edge-strong: rgba(255,255,255,.18);

  --cs-text: #f4efe6;
  --cs-dim: rgba(244,239,230,.62);
  --cs-faint: rgba(244,239,230,.38);

  /* Ruby is the ACTION colour and nothing else. It does not mean
     "important"; it means "this is the thing you press". */
  --cs-ruby: #e5383b;
  --cs-ruby-deep: #c1121f;

  /* Semantic, kept separate from the accent so a red button and a
     failing service are never the same red. */
  --cs-ok: #4ba86b;
  --cs-warn: #d9a441;
  --cs-bad: #e5484d;

  --cs-r-sm: 8px;
  --cs-r: 12px;
  --cs-r-lg: 16px;

  --cs-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- the palette: the thing that ends the guessing ----------

   MOBILE FIRST, and meant literally: the phone gets the full thing, not
   a cut-down version. The owner works from a phone and a tablet more
   than a laptop, so the base rules below ARE the phone rules, and the
   only thing the desktop media query adds is a narrower box and a
   keyboard hint that a phone has no use for.

   A keyboard shortcut alone would have made this desktop-only. Ctrl-K
   still works where there is a keyboard, but the tap target is the
   primary way in, not a fallback.                                    */

.cmdk { position: fixed; inset: 0; z-index: 9000; display: none;
  flex-direction: column; align-items: stretch;
  /* Phone: start near the top so the on-screen keyboard does not shove
     the list off the bottom the moment it opens. */
  padding: calc(env(safe-area-inset-top, 0px) + .5rem) .5rem 0;
  background: rgba(4,3,3,.78); backdrop-filter: blur(6px); }
.cmdk.is-open { display: flex; }

.cmdk__box { width: 100%; flex: 1; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--cs-r-lg) var(--cs-r-lg) 0 0; background: var(--cs-1);
  box-shadow: inset 0 0 0 1px var(--cs-edge-strong), 0 32px 80px rgba(0,0,0,.6); }

/* The palette mounts INSIDE whatever page you were on, so it inherits
   that page's field styling. The listening room paints a ruby underline
   on a focused input -- in this house that colour means something is
   wrong, so the search box read as a validation error the moment it
   opened. Reset explicitly; !important is the honest tool here, because
   this element has to look the same on twenty pages that each style
   their own inputs. */
.cmdk__in, .cmdk .cmdk__in:focus {
  width: 100%; margin: 0; border: 0 !important; border-radius: 0 !important;
  background: none !important; color: var(--cs-text);
  /* 16px minimum, or iOS Safari zooms the whole page on focus. */
  font: 500 16px var(--cs-ui); padding: 1.05rem 1.15rem;
  outline: none !important; box-shadow: none !important; }
.cmdk__in::placeholder { color: var(--cs-faint); }

.cmdk__list { flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--cs-edge);
  padding: .4rem .4rem calc(1rem + env(safe-area-inset-bottom, 0px));
  margin: 0; list-style: none; }

.cmdk__group { font: 700 .64rem/1 var(--cs-ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--cs-faint);
  padding: .85rem .75rem .45rem; }

/* Stacked on a phone: a name and its description side by side on a
   390px screen truncates the description to nothing useful. */
.cmdk__item { display: flex; flex-direction: column; gap: .15rem;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  color: var(--cs-text); font: 500 .98rem var(--cs-ui);
  /* 48px min: a row you cannot reliably hit is a row that does not work. */
  min-height: 48px; justify-content: center;
  padding: .55rem .75rem; border-radius: var(--cs-r-sm); text-decoration: none; }
/* One highlight for hover AND keyboard: two different "selected" looks
   in one list is how you lose your place in it. */
.cmdk__item:hover, .cmdk__item.is-on { background: var(--cs-3); }
.cmdk__item.is-on { box-shadow: inset 0 0 0 1px var(--cs-edge-strong); }

.cmdk__label { flex: none; }
.cmdk__blurb { color: var(--cs-faint); font-size: .78rem; line-height: 1.35; }

/* State is a word, not a colour alone -- a dot nobody can name tells the
   operator nothing when the click fails. */
.cmdk__tag { align-self: flex-start; margin-top: .1rem;
  font: 700 .58rem/1 var(--cs-ui); letter-spacing: .1em;
  text-transform: uppercase; padding: .26rem .4rem; border-radius: 4px; }
.cmdk__tag--legacy { background: rgba(217,164,65,.16); color: var(--cs-warn); }
.cmdk__tag--dark   { background: rgba(229,72,77,.16);  color: var(--cs-bad); }

.cmdk__empty { padding: 1.4rem .95rem; color: var(--cs-faint); font: 400 .9rem var(--cs-body); }

/* The legend is hidden until a key is actually used, then shown --
   see js/control-palette.js. Tying it to screen size was wrong: a
   tablet with a keyboard attached is a phone-sized screen where the
   arrows work, and it was hiding the legend on exactly the device the
   owner uses most. Capability, not width. */
.cmdk__foot { display: none; }
.cmdk.has-keyboard .cmdk__foot { display: flex; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--cs-edge); padding: .6rem .95rem;
  font: 500 .7rem var(--cs-ui); color: var(--cs-faint); }
.cmdk.has-keyboard .cmdk__foot kbd { font: 700 .7rem var(--cs-ui); color: var(--cs-dim);
  background: var(--cs-2); border-radius: 4px; padding: .16rem .34rem;
  box-shadow: inset 0 0 0 1px var(--cs-edge); }

/* ---------- the way in ----------
   The bottom-right corner is contended: the app bar owns the bottom
   strip and js/tabbar.js pins the auth chip at 5.45rem with z-index 999.
   The first version of this sat at ~5.6rem with z-index 400 -- visible,
   and completely untappable behind the chip on a phone. Found by tapping
   it in a real mobile viewport rather than by looking at it.
   So: stacked clear ABOVE the chip, and above it in the stack too. */
.cmdk-hint { position: fixed; z-index: 1000;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; border: 0; cursor: pointer; border-radius: 999px;
  padding: .6rem .95rem; color: var(--cs-text); background: var(--cs-2);
  font: 700 .78rem var(--cs-ui);
  box-shadow: inset 0 0 0 1px var(--cs-edge-strong), 0 10px 30px rgba(0,0,0,.5); }
.cmdk-hint:hover { background: var(--cs-3); }
.cmdk-hint kbd { display: none; }
/* Clears the app bar AND the auth chip that sits on top of it. */
body.has-appbar .cmdk-hint { bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 420.02px) {
  body.has-appbar .cmdk-hint { bottom: calc(7.9rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- desktop: a dialog, and the keyboard legend ---------- */
@media (min-width: 720px) and (pointer: fine) {
  .cmdk { align-items: flex-start; flex-direction: row; justify-content: center;
    padding: max(10vh, 3rem) 1rem 1rem; }
  .cmdk__box { width: min(100%, 34rem); flex: 0 1 auto;
    max-height: min(70vh, 34rem); border-radius: var(--cs-r-lg); }
  .cmdk__item { flex-direction: row; align-items: baseline; gap: .6rem;
    min-height: 0; }
  .cmdk__blurb { flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .cmdk__tag { align-self: auto; margin-top: 0; }
  .cmdk-hint kbd { display: inline; font: 700 .7rem var(--cs-ui);
    color: var(--cs-dim); background: var(--cs-1); border-radius: 4px;
    padding: .16rem .34rem; box-shadow: inset 0 0 0 1px var(--cs-edge); }
  body.has-appbar .cmdk-hint { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) { .cmdk, .cmdk__box { transition: none !important; } }