/* One stylesheet for two interfaces that must not be mistaken for each other.
   They share the furniture — type, tables, cards — and differ in the one thing
   that matters at a glance: whose screen you are on. */

:root { color-scheme: light dark;
        --bg:#fbfbfc; --fg:#1a1a1e; --mut:#6b6b76; --line:#e5e5ea; --card:#fff;
        --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
        /* Overridden per interface below. */
        --accent:#4b5563; --accent-soft:#4b55631a; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#101014; --fg:#e8e8ea; --mut:#9a9aa4; --line:#26262e; --card:#17171d; }
}

/* The operator runs the service; the customer runs their own account. Two
   different powers, so two different colours — the fastest way to know which
   screen you are on is not to read the header. */
body.admin   { --accent:#7c3aed; --accent-soft:#7c3aed1f; }
body.cabinet { --accent:#0d9488; --accent-soft:#0d94881f; }

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55
       ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

header { border-bottom:1px solid var(--line); background:var(--card); }
.bar { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
       padding:.9rem 1.5rem; max-width:74rem; margin:0 auto; }
.brand { font-size:1rem; font-weight:600; letter-spacing:-.01em; margin:0; }
/* Says what this screen is, in words, permanently. */
.badge { font-size:.75rem; font-weight:600; letter-spacing:.03em;
         text-transform:uppercase; padding:.22rem .55rem; border-radius:.35rem;
         background:var(--accent-soft); color:var(--accent); }
.who { color:var(--mut); font-size:.85rem; }

nav { max-width:74rem; margin:0 auto; padding:0 1.5rem; display:flex;
      gap:.3rem; flex-wrap:wrap; }
nav button { background:none; border:none; border-bottom:2px solid transparent;
             padding:.6rem .7rem; font:inherit; font-size:.9rem; cursor:pointer;
             color:var(--mut); margin-bottom:-1px; }
nav button[aria-current="true"] { color:var(--fg); border-bottom-color:var(--accent); }

main { padding:1.5rem; max-width:74rem; margin:0 auto; }
.tab[hidden] { display:none; }

.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:.6rem;
        padding:1rem 1.1rem; }
.card h2 { font-size:.78rem; font-weight:500; color:var(--mut); margin:0 0 .4rem;
           text-transform:uppercase; letter-spacing:.04em; }
.big { font-size:1.9rem; font-weight:600; letter-spacing:-.02em; }
.sub { color:var(--mut); font-size:.85rem; }

section { margin-top:1.6rem; }
section > h2 { font-size:.95rem; font-weight:600; margin:0 0 .7rem; }

table { width:100%; border-collapse:collapse; font-size:.88rem; }
th { text-align:left; font-weight:500; color:var(--mut); padding:.4rem .6rem;
     border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:.6rem;
          background:var(--card); }
.empty { padding:1.2rem; color:var(--mut); }

.dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
       margin-right:.45rem; vertical-align:middle; }
.ok { background:var(--ok) } .warn { background:var(--warn) } .bad { background:var(--bad) }
.muted { color:var(--mut) }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; }

input, select { font:inherit; padding:.4rem .6rem; border:1px solid var(--line);
        border-radius:.4rem; background:var(--card); color:var(--fg); }
button { font:inherit; padding:.4rem .8rem; border:1px solid var(--line);
         border-radius:.4rem; background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button:disabled { opacity:.55; cursor:default; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.tenant { background:var(--card); border:1px solid var(--line);
          border-radius:.6rem; padding:.9rem 1.1rem; margin-bottom:.7rem; }
.tenant h3 { margin:0 0 .5rem; font-size:.95rem; font-weight:600; }
.conn { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
        padding:.4rem 0; border-top:1px solid var(--line); }

/* A key is shown once, so it has to be impossible to miss. */
.issued { border:1px solid var(--warn); border-radius:.6rem; padding:1rem;
          margin-bottom:.9rem; background:var(--card); }
.issued code { font-family:ui-monospace,Menlo,monospace; font-size:.9rem;
               word-break:break-all; display:block; margin:.5rem 0; }

/* Signing in is its own page, so nothing else has to make room for it. */
body.signin { display:grid; place-items:center; min-height:100vh; }
.gate { width:min(23rem, 90vw); text-align:center; padding:2rem; }
.gate h1 { font-size:1.1rem; margin:0 0 .5rem; }
.gate input { width:100%; margin:.9rem 0; }
.gate button { width:100%; }

/* Filters sit above the list they narrow, not in a panel of their own: the
   count beside them is what tells you the filter did something. */
.filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
           margin:0 0 .7rem; }
.filters select { padding:.35rem .5rem; }

/* A row that opens. The pointer is the only affordance — a chevron column
   would cost width on every row to hint at something used on one. */
tr.expandable { cursor:pointer; }
tr.expandable:hover td { background:var(--card); }
tr.rowdetail > td { background:var(--card); }
.rowfacts { display:flex; flex-direction:column; gap:.25rem; padding:.4rem 0; }
.rowfacts .mono { font-family:ui-monospace,Menlo,monospace; font-size:.85rem; }
/* A failure is printed whole. Clipping the one field that says what went
   wrong, to keep a column tidy, is the wrong trade. */
.failtext { white-space:pre-wrap; word-break:break-word; color:var(--bad);
            font-size:.85rem; }

/* Picking who is the same person. A row per identity, because the choice is
   about people and not about a form. */
.pick { display:flex; gap:.6rem; align-items:center; padding:.35rem 0;
        border-top:1px solid var(--line); }
.pick input { margin:0; }

/* A labelled field: the label above its control, so a row of them lines up
   whatever the label's length. */
.field { display:flex; flex-direction:column; gap:.2rem; }
.field input, .field select { min-width:11rem; }

/* A link that sits among buttons without pretending to be one. */
.linkish { color:var(--mut); text-decoration:none; font-size:.85rem;
           padding:.35rem .5rem; }
.linkish:hover { color:var(--fg); }

/* What a plan brings, as a list of what arrives. The dash and the tick carry
   the meaning; colour only reinforces it, so it still reads without. */
.includes { list-style:none; padding:0; margin:.4rem 0 0; }
.includes li { display:flex; gap:.5rem; padding:.3rem 0;
               border-top:1px solid var(--line); }
.includes li span { width:1rem; text-align:center; }
.includes li.no { color:var(--mut); }
.includes li.yes span { color:var(--ok); }

/* The case for the other plan. Stated once, next to what is missing, rather
   than as a banner that follows people around. */
.upsell { margin-top:.9rem; padding:.8rem 1rem; border:1px solid var(--line);
          border-radius:.6rem; background:var(--card); }
.upsell p { margin:0 0 .4rem; }
.upsell p:last-child { margin:0; }