/*
 * The panel's stylesheet.
 *
 * Split out of index.html on 2026-09-19 along with the JavaScript. Still no
 * build step: browsers load ES modules and stylesheets natively, and the Worker
 * serves whatever is in public/. A bundler would add a node_modules, a dist
 * directory and a step that can break, to solve a problem native imports
 * already solve.
 */
/*
   * Light and dark, with an explicit toggle rather than only prefers-color-scheme.
   *
   * People work in a browser theme they did not necessarily choose for this
   * page, and a dashboard someone stares at all day is exactly where an
   * override earns its place. The choice is remembered per browser in
   * localStorage - a per-viewer convenience, never anything that matters.
   */
  :root {
    --ink:#16181d; --dim:#5b6472; --faint:#8a93a3;
    --line:#e3e7ee; --line-soft:#eef1f6;
    --bg:#f6f7f9; --card:#ffffff; --raise:#fbfcfd;
    --accent:#2563eb; --accent-ink:#ffffff; --accent-soft:#eaf0ff;
    --ok:#0f8a5f; --ok-soft:#e6f6ee;
    --warn:#a8670a; --warn-soft:#fdf2e0;
    --bad:#c2333c; --bad-soft:#fdecee;
    --shadow:0 1px 2px rgba(16,20,28,.05), 0 4px 14px rgba(16,20,28,.04);
  }
  :root[data-theme="dark"] {
    --ink:#e7eaf0; --dim:#9aa3b2; --faint:#6f7889;
    --line:#282d36; --line-soft:#21252c;
    --bg:#101317; --card:#181c22; --raise:#1e232a;
    --accent:#5b8cff; --accent-ink:#0b0f14; --accent-soft:#1b2436;
    --ok:#35c48d; --ok-soft:#12291f;
    --warn:#e0a44a; --warn-soft:#2a2113;
    --bad:#ff6b73; --bad-soft:#2d1619;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink:#e7eaf0; --dim:#9aa3b2; --faint:#6f7889;
      --line:#282d36; --line-soft:#21252c;
      --bg:#101317; --card:#181c22; --raise:#1e232a;
      --accent:#5b8cff; --accent-ink:#0b0f14; --accent-soft:#1b2436;
      --ok:#35c48d; --ok-soft:#12291f;
      --warn:#e0a44a; --warn-soft:#2a2113;
      --bad:#ff6b73; --bad-soft:#2d1619;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
    }
  }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink);
         font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
         -webkit-font-smoothing:antialiased; }
  a { color:var(--accent); text-decoration:none; }
  a:hover { text-decoration:underline; }

  /* ---- shell ---- */
  .shell { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }

  /*
   * min-width:0 on both grid children, and it is not decoration.
   *
   * A grid track sizes to its content by default, so `overflow-x:auto` on a
   * child does nothing - the track simply grows and the PAGE scrolls sideways
   * instead. On a phone that showed up as the whole layout being 514px wide in
   * a 375px viewport, with the nav pushing it. This is the line that lets the
   * child actually be narrower than what is inside it.
   */
  .side, .main { min-width:0; }

  .side { background:var(--card); border-right:1px solid var(--line);
          display:flex; flex-direction:column; gap:.25rem; padding:1rem .75rem;
          position:sticky; top:0; height:100vh; overflow-y:auto; }
  .brand { display:flex; align-items:center; gap:.55rem; font-weight:650;
           letter-spacing:-.01em; padding:.4rem .6rem 1.1rem; color:var(--ink); }
  .brand:hover { text-decoration:none; }
  .dot { width:22px; height:22px; border-radius:7px; background:var(--accent);
         display:grid; place-items:center; color:var(--accent-ink);
         font-size:.72rem; font-weight:700; flex:none; }

  .navlabel { font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
              color:var(--faint); padding:.9rem .6rem .35rem; font-weight:600; }
  .navitem { display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
             border-radius:8px; color:var(--dim); font-size:.92rem; cursor:pointer;
             border:0; background:none; width:100%; text-align:left; font-family:inherit; }
  .navitem:hover { background:var(--line-soft); color:var(--ink); text-decoration:none; }
  .navitem[aria-current="true"] { background:var(--accent-soft); color:var(--accent); font-weight:550; }
  .navitem .ic { width:1.05rem; text-align:center; flex:none; opacity:.85; }

  .sidefoot { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line-soft); }
  .who { font-size:.8rem; color:var(--faint); padding:.35rem .6rem; word-break:break-all; }
  .rolechip { display:inline-block; font-size:.66rem; letter-spacing:.06em;
              text-transform:uppercase; font-weight:650; padding:.1rem .4rem;
              border-radius:5px; background:var(--accent-soft); color:var(--accent);
              margin-left:.35rem; }

  .main { padding:2rem 2rem 4rem; max-width:1100px; }

  /*
   * The burger. Hidden on desktop, where the sidebar is simply always there.
   */
  .topbar { display:none; }
  .burger { display:none; position:fixed; top:.6rem; left:.6rem; z-index:70;
            width:2.4rem; height:2.4rem; border-radius:9px;
            border:1px solid var(--line); background:var(--card); color:var(--ink);
            place-items:center; cursor:pointer; font-size:1.05rem; box-shadow:var(--shadow); }
  .burger:hover { background:var(--raise); }
  .head { display:flex; align-items:flex-start; justify-content:space-between;
          gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
  h1 { font-size:1.4rem; letter-spacing:-.02em; margin:0 0 .25rem; }
  .sub { color:var(--dim); font-size:.92rem; margin:0; }

  /* ---- controls ---- */
  .btn { font:inherit; font-size:.88rem; padding:.48rem .85rem; border-radius:8px;
         border:1px solid transparent; background:var(--accent); color:var(--accent-ink);
         cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
  .btn:hover { filter:brightness(1.07); text-decoration:none; }
  .btn:disabled { opacity:.5; cursor:default; filter:none; }
  .btn.ghost { background:var(--card); border-color:var(--line); color:var(--ink); }
  .btn.ghost:hover { background:var(--raise); }
  .btn.small { font-size:.82rem; padding:.34rem .6rem; }
  .icobtn { font:inherit; background:var(--card); border:1px solid var(--line);
            color:var(--dim); width:2rem; height:2rem; border-radius:8px;
            cursor:pointer; display:grid; place-items:center; }
  .icobtn:hover { color:var(--ink); background:var(--raise); }

  input, select { font:inherit; font-size:.9rem; padding:.5rem .65rem; width:100%;
                  border:1px solid var(--line); border-radius:8px;
                  background:var(--card); color:var(--ink); }
  input:focus, select:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
  label { display:block; font-size:.85rem; color:var(--dim); margin-bottom:.35rem; }

  /* ---- cards ---- */
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px;
          box-shadow:var(--shadow); margin-bottom:1rem; }
  .card .pad { padding:1.1rem 1.25rem; }
  .card h2 { font-size:1rem; margin:0; letter-spacing:-.01em; }

  /* ---- site rows ---- */
  .site { display:grid; grid-template-columns:auto 1fr auto; gap:1rem;
          align-items:center; padding:1rem 1.25rem; border-top:1px solid var(--line-soft); }
  .site:first-child { border-top:0; }
  .site .name { font-weight:550; letter-spacing:-.01em; }
  .site .meta { color:var(--faint); font-size:.84rem; margin-top:.15rem;
                display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
  .site .acts { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

  .beacon { width:9px; height:9px; border-radius:50%; flex:none; }
  .beacon.ok { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
  .beacon.warn { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
  .beacon.bad { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }

  .tag { font-size:.72rem; padding:.12rem .45rem; border-radius:5px;
         border:1px solid var(--line); color:var(--dim); white-space:nowrap; }
  .tag.ok { color:var(--ok); background:var(--ok-soft); border-color:transparent; }
  .tag.warn { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
  .tag.bad { color:var(--bad); background:var(--bad-soft); border-color:transparent; }

  .sep::before { content:"·"; color:var(--line); }

  /* A button that reads as a link - it filters rather than navigates, so it is
     a button for the keyboard and a link to the eye. */
  .linky { font:inherit; background:none; border:0; padding:0; color:var(--accent);
           cursor:pointer; text-align:left; }
  .linky:hover { text-decoration:underline; }

  .chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem;
          padding:.2rem .5rem; border-radius:999px; background:var(--accent-soft);
          color:var(--accent); border:0; font-family:inherit; cursor:pointer; }
  .chip b { font-weight:600; }

  /* ---- table (fleet, staff) ---- */
  .scroll { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:.89rem; }
  th { text-align:left; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
       color:var(--faint); font-weight:600; padding:.6rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap; }
  td { padding:.7rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
  tr:last-child td { border-bottom:0; }
  tbody tr:hover { background:var(--raise); }

  /* ---- misc ---- */
  .note { padding:.8rem 1rem; border-radius:9px; border:1px solid var(--line);
          background:var(--card); color:var(--dim); font-size:.9rem; margin-bottom:1rem; }
  .note.bad { border-color:var(--bad); color:var(--bad); background:var(--bad-soft); }
  .note.warn { border-color:transparent; background:var(--warn-soft); color:var(--warn); }
  .empty { padding:2.5rem 1.25rem; text-align:center; color:var(--faint); }
  .plans { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); padding:1.25rem; }
  .plan { border:1px solid var(--line); border-radius:10px; padding:1rem; }
  .plan h3 { margin:0 0 .3rem; font-size:.95rem; }
  .price { font-size:1.5rem; font-weight:650; letter-spacing:-.02em; }

  .bar { display:flex; gap:.6rem; align-items:center; padding:1rem 1.25rem;
         border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
  .bar input { max-width:22rem; }

  /* menu */
  .menu { position:relative; }
  .menu > .sheet { position:absolute; right:0; top:calc(100% + .35rem); z-index:20;
                   background:var(--card); border:1px solid var(--line); border-radius:10px;
                   box-shadow:var(--shadow); min-width:13rem; padding:.3rem; }
  .menu > .sheet button { display:block; width:100%; text-align:left; font:inherit;
                          font-size:.87rem; padding:.45rem .6rem; border:0; border-radius:7px;
                          background:none; color:var(--ink); cursor:pointer; }
  .menu > .sheet button:hover { background:var(--line-soft); }
  .menu > .sheet .hint { font-size:.75rem; color:var(--faint); padding:.35rem .6rem .5rem; }

  /* sign-in */
  .gate { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
  .gate .card { width:100%; max-width:24rem; margin:0; }

  /* ---------------------------------------------------------------------
     PHONES.

     The sidebar STAYS a sidebar - it slides in from the left behind a burger
     rather than turning into something else. A nav that changes shape between
     devices is a nav you have to learn twice, and the earlier attempt at a
     scrolling top bar hid half the items off the right edge where nothing
     suggested they existed.

     Tables become CARDS: each row a block, each cell a labelled line taking
     its label from data-label. A seven-column table three inches wide is
     unreadable however you scroll it.
     --------------------------------------------------------------------- */
  @media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }

    .burger { display: grid; }

    .side {
      position: fixed; top: 0; left: 0; bottom: 0; width: 15rem; z-index: 60;
      height: 100dvh; overflow-y: auto;
      transform: translateX(-100%);
      transition: transform .18s ease;
      box-shadow: none;
    }
    .side.open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }

    /* The backdrop is the sidebar's own huge shadow, so there is no extra
       element to keep in sync - but it still has to be clickable. */
    .scrim { display: none; position: fixed; inset: 0; z-index: 55; }
    .side.open ~ .scrim { display: block; }

    /* The burger is fixed at the top left, so the content starts below it
       rather than under it - otherwise the page title reads "ctory demo". */
    .main { padding: 3.6rem .9rem 3rem; }
    h1 { font-size: 1.25rem; }
    .head { margin-bottom: 1.1rem; }

    .site { grid-template-columns: auto 1fr; }
    .site .acts { grid-column: 1 / -1; justify-content: flex-start; }

    /* Filters stack; inputs take the width, buttons keep their own size. */
    .bar { flex-direction: column; align-items: stretch; }
    .bar input, .bar select { max-width: none !important; width: 100%; }
    .bar .btn, .bar .chip { align-self: flex-start; }

    /* Tables become cards. */
    .scroll { overflow-x: visible; }

    table.cards thead { display: none; }
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }

    table.cards tr {
      border: 1px solid var(--line); border-radius: 10px;
      padding: .6rem .75rem; margin: 0 0 .6rem; background: var(--card);
    }
    table.cards tr:hover { background: var(--card); }

    table.cards td {
      border: 0; padding: .18rem 0;
      display: flex; gap: .75rem; align-items: baseline; justify-content: space-between;
    }

    table.cards td[data-label]::before {
      content: attr(data-label);
      color: var(--faint); font-size: .72rem; letter-spacing: .06em;
      text-transform: uppercase; flex: none;
    }

    table.cards td.acts { justify-content: flex-start; flex-wrap: wrap; padding-top: .5rem; gap: .35rem; }

    table.facts td:first-child { width: 8rem; }
    table.facts td { word-break: break-word; }
    .mono { overflow-wrap: anywhere; }
  }

  /* Very narrow: fact tables get a line per value too. */
  @media (max-width: 480px) {
    table.facts tr { display:block; padding:.35rem 0; border-bottom:1px solid var(--line-soft); }
    table.facts td { display:block; width:auto !important; padding:.1rem 0; }
    table.facts td:first-child { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
  }

/* --- added with the module split and the new pages, 2026-09-19 --- */

/* Identifiers, versions, operation names: things you compare character by
   character, which proportional type makes needlessly hard. */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .86em; }

/* A two-column fact table. No header row - the left column IS the label. */
table.facts td { vertical-align: top; }
table.facts td:first-child { white-space: nowrap; }

/* A chip that is currently off. Same shape as an active one so toggling does
   not move anything, which is what makes a row of filters usable. */
.chip.quiet { background: transparent; color: var(--dim); border: 1px solid var(--line); }
.chip.quiet:hover { color: var(--ink); background: var(--raise); }

/* Something worked. Distinct from .note (neutral) and .note.bad (it broke),
   because "moved, and the old address still works" is neither. */
.note.ok-note { border-color: transparent; background: var(--ok-soft); color: var(--ok); }

/*
 * Staff-only boxes are marked, not merely ordered.
 *
 * A customer never sees these - the API refuses the data behind them - but
 * staff need to know at a glance which half of the page a customer is looking
 * at, because most support calls start with someone describing their screen.
 * A tinted left edge does that without shouting.
 */
.card.staffbox { border-left: 3px solid var(--accent); background: var(--raise); }
.card.staffbox h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }