/* The sandbox portal's world: square, quiet, dark by default and light with
   the system. Color is only for state: a license's standing, an error, focus. */
:root {
  --bg:#0d0e12; --card:#15161b; --raise:#1b1c22; --line:#26272e; --line-strong:#34353e;
  --text:#ececf1; --muted:#8b8d98; --accent:#fff; --ink:#0d0e12; --code:#1c1d23;
  --bad:#f87171; --bad-bg:rgba(248,113,113,.1); --good:#4ade80; --good-bg:rgba(74,222,128,.1);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.1); --info:#93c5fd; --focus:#93c5fd; --sel:rgba(147,197,253,.3);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root {
  --bg:#f6f6f7; --card:#fff; --raise:#fafafb; --line:#e3e3e8; --line-strong:#cfd0d6;
  --text:#16171c; --muted:#62646f; --accent:#16171c; --ink:#fff; --code:#f1f1f4;
  --bad:#c62828; --bad-bg:rgba(198,40,40,.08); --good:#15803d; --good-bg:rgba(21,128,61,.08);
  --warn:#a16207; --warn-bg:rgba(161,98,7,.09); --info:#1d4ed8; --focus:#2563eb; --sel:rgba(37,99,235,.18);
  color-scheme: light;
} }
* { box-sizing:border-box; }
::selection { background:var(--sel); }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--text);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif; caret-color:var(--focus); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset:-1px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[hidden] { display:none !important; }

/* Top bar */
nav.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; }
.mark { width:26px; height:26px; display:grid; place-items:center; background:var(--accent); color:var(--ink); font:500 11px ui-monospace,monospace; }
.tabs { display:flex; gap:2px; }
.tab { background:none; border:0; color:var(--muted); font:inherit; padding:6px 12px; cursor:pointer; }
.tab:hover { color:var(--text); } .tab.on { color:var(--text); box-shadow:inset 0 -2px 0 var(--text); }
.user { display:flex; gap:8px; align-items:center; }
.link { background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; padding:0; } .link:hover { color:var(--text); }

main { flex:1; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:start; padding:24px 16px 64px; }
.card { width:100%; max-width:420px; margin-top:8vh; background:var(--card); border:1px solid var(--line); padding:28px; }
.wide { width:100%; max-width:1160px; min-width:0; }

/* Type: one family, a 1.15 step */
h1 { font-size:22px; line-height:1.25; margin:0 0 4px; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
h2 { font-size:15px; line-height:1.3; margin:0 0 6px; font-weight:600; }
h3 { font-size:13px; margin:20px 0 6px; font-weight:600; }
.sub { margin:0; color:var(--muted); max-width:70ch; }
.help { margin:6px 0 0; color:var(--muted); font-size:13px; max-width:70ch; }
.note { color:var(--muted); font-size:13px; margin:12px 0 0; }
.muted { color:var(--muted); font-size:13px; }
.mono, code, pre { font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.mono { font-size:12px; }
td, .kv dd, .num { font-variant-numeric:tabular-nums; }

/* Page header */
header.page { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.back { display:block; margin-bottom:8px; }

/* Controls */
label, .label { display:block; font-size:13px; margin:14px 0 6px; color:var(--text); }
input, select, textarea { width:100%; padding:0 12px; background:var(--bg); color:var(--text); border:1px solid var(--line-strong); font:inherit; border-radius:0; }
input, select { height:38px; }
textarea { padding:10px 12px; font:12px/1.6 ui-monospace,"SF Mono",Menlo,monospace; resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8; }
input:hover, select:hover, textarea:hover { border-color:var(--muted); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color:var(--bad); }
select option { background:var(--card); color:var(--text); }
input[type=radio], input[type=checkbox] { width:auto; height:auto; accent-color:var(--accent); margin:0; }
.btn { height:38px; padding:0 16px; background:var(--accent); color:var(--ink); border:1px solid var(--accent); font:inherit; font-weight:500; cursor:pointer;
  display:inline-flex; justify-content:center; align-items:center; gap:8px; text-decoration:none; white-space:nowrap; transition:opacity .15s; }
.btn:hover { opacity:.88; }
.btn.full { width:100%; margin-top:18px; }
.btn:disabled { opacity:.5; cursor:default; }
.ghost { height:38px; padding:0 14px; background:none; color:var(--text); border:1px solid var(--line-strong); font:inherit; font-size:13px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; transition:border-color .15s, background .15s; }
.ghost:hover { border-color:var(--muted); background:var(--raise); }
.ghost.small { height:28px; padding:0 10px; font-size:12px; }
.ghost.danger { color:var(--bad); border-color:var(--bad); } .ghost.danger:hover { background:var(--bad-bg); }
.ghost:disabled { opacity:.5; cursor:default; }
.spin { width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:r .7s linear infinite; display:none; }
.busy .spin { display:inline-block; }
@keyframes r { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } .spin { animation:none; } }
.msg { min-height:0; margin-top:10px; color:var(--bad); font-size:13px; } .msg:empty { margin:0; }
.msg.pad { padding:0 16px 12px; }
.actions { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

/* Panels and tables */
.panel { background:var(--card); border:1px solid var(--line); padding:24px; margin-bottom:16px; }
.panel.flush { padding:0; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-weight:500; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:10px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
th.num, td.num { text-align:right; }
td.ends, td.when { white-space:nowrap; }
table.list tbody tr.row { cursor:pointer; }
table.list tbody tr.row:hover td { background:var(--raise); }
tr.row.open td { background:var(--raise); border-bottom-color:transparent; }
.cust { font-weight:500; } .cust + .mono { color:var(--muted); margin-top:2px; }
.acts { display:flex; gap:6px; justify-content:flex-end; }
.empty { padding:48px 16px; text-align:center; color:var(--muted); }
.empty strong { display:block; color:var(--text); font-weight:500; margin-bottom:4px; }
.empty .btn, .empty .ghost { margin-top:14px; }

/* Status */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; white-space:nowrap; padding:2px 8px; border:1px solid var(--line-strong); color:var(--text); }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.pill.active { border-color:transparent; background:var(--good-bg); } .pill.active::before { background:var(--good); }
.pill.expiring, .pill.grace, .pill.later { border-color:transparent; background:var(--warn-bg); } .pill.expiring::before, .pill.grace::before, .pill.later::before { background:var(--warn); }
.pill.expired, .pill.revoked { border-color:transparent; background:var(--bad-bg); } .pill.expired::before, .pill.revoked::before { background:var(--bad); }
.soon { color:var(--warn); } .past { color:var(--bad); }

/* Filter bar */
.bar { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { height:30px; padding:0 10px; background:none; border:1px solid var(--line-strong); color:var(--muted); font:inherit; font-size:13px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.chip b { font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
.chip:hover { color:var(--text); } .chip[aria-pressed=true] { background:var(--accent); color:var(--ink); border-color:var(--accent); } .chip[aria-pressed=true] b { color:var(--ink); }
.chip.attention b { color:var(--warn); } .chip.attention[aria-pressed=true] b { color:var(--ink); }
.search { width:320px; max-width:100%; height:34px; }

/* Detail row */
tr.detail td { background:var(--raise); padding:4px 16px 20px; }
.detail .cols { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; }
.detail h3 { margin:12px 0 10px; }
.detail .revoke { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.detail .revoke form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.detail .revoke input[type=text], .detail .revoke input:not([type]) { height:34px; }
.check { display:flex; align-items:flex-start; gap:8px; margin:0; font-size:13px; grid-column:1 / -1; color:var(--muted); }
.check input { margin-top:3px; }
.warnline { color:var(--warn); font-size:13px; margin:10px 0 0; }
.installs td, .installs th { padding:8px 10px; } .installs { border:1px solid var(--line); }

/* Key and value lists */
.kv { display:grid; grid-template-columns:150px 1fr; gap:8px 16px; margin:0; }
.kv.tight { grid-template-columns:96px 1fr; gap:6px 12px; font-size:13px; }
.kv dt { color:var(--muted); font-size:13px; } .kv dd { margin:0; word-break:break-word; }
.kv dd.mono { font-size:12px; white-space:pre-line; }
.kv dd.none { color:var(--muted); }
details { margin-top:16px; } summary { cursor:pointer; color:var(--muted); font-size:13px; } summary:hover { color:var(--text); }
pre { background:var(--code); padding:12px; overflow:auto; font-size:12px; line-height:1.5; margin:8px 0 0; border:1px solid var(--line); }

/* Steps */
.steps { list-style:none; display:flex; gap:0; margin:0; padding:0; counter-reset:s; }
.steps li { counter-increment:s; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; padding:0 14px; }
.steps li + li { border-left:1px solid var(--line); }
.steps li::before { content:counter(s); width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line-strong); font-size:11px; }
.steps li.on { color:var(--text); } .steps li.on::before { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.steps li.done { color:var(--text); } .steps li.done::before { color:var(--good); border-color:var(--good); }

/* Compose: the form, with a summary that follows it */
.compose { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.sheet { background:var(--card); border:1px solid var(--line); }
.part { padding:22px 24px; border-bottom:1px solid var(--line); }
.part:last-child { border-bottom:0; }
.part > h2 { margin-bottom:10px; }
.part label:first-of-type { margin-top:12px; }
.row3 > div > label, .row2 > div > label { margin-top:0; }
.row3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.row2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.inline { display:flex; gap:8px; } .inline select { flex:1; }
.mini { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; padding:12px; border:1px dashed var(--line-strong); }
.mini .msg { grid-column:1 / -1; }
.unit { display:flex; align-items:center; border:1px solid var(--line-strong); background:var(--bg); }
.unit input { border:0; } .unit span { padding:0 12px; color:var(--muted); font-size:13px; }
.presets { display:flex; gap:6px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.presets .muted { margin-right:4px; }
.seg { display:flex; gap:8px 24px; flex-wrap:wrap; } .seg label { display:flex; gap:8px; align-items:center; margin:0; }
.features { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px 16px; margin-top:14px; padding:14px; border:1px solid var(--line); background:var(--bg); align-items:start; }
.features .group { display:grid; gap:4px; }
.features label { display:flex; gap:8px; align-items:center; margin:0; font-size:13px; }
.features .sec { padding-left:22px; color:var(--muted); }
.features .sec:has(input:disabled) { opacity:.75; }
.cmd { display:flex; align-items:center; gap:10px; justify-content:space-between; background:var(--code); border:1px solid var(--line); padding:8px 8px 8px 12px; margin-top:8px; }
.cmd code { font-size:12px; overflow-x:auto; white-space:nowrap; }
.check-line { margin-top:8px; font-size:13px; color:var(--muted); min-height:20px; }
.check-line .ok { color:var(--good); } .check-line .bad { color:var(--bad); }

.summary { position:sticky; top:16px; background:var(--card); border:1px solid var(--line); padding:20px; }
.summary h2 { margin-bottom:12px; }
.todo { list-style:none; margin:16px 0 0; padding:12px 0 0; border-top:1px solid var(--line); display:grid; gap:6px; font-size:13px; }
.todo:empty { display:none; }
.todo li { display:flex; gap:8px; color:var(--muted); } .todo li::before { content:"·"; color:var(--warn); font-weight:700; }

.review { border-color:var(--line-strong); }
.made { border-color:var(--good); }
.made h2 { color:var(--good); }

/* Customers */
.row-add { display:grid; grid-template-columns:minmax(0,420px) auto; justify-content:start; gap:12px; align-items:end; }
.row-add label { margin-top:0; }

/* Read a file */
.drop { border:1px dashed var(--line-strong); padding:22px; text-align:center; color:var(--muted); transition:border-color .15s, background .15s; }
.drop p { margin:0; } .drop strong { color:var(--text); font-weight:500; }
.drop.over { border-color:var(--focus); background:var(--raise); }
.pick { display:inline; margin:0; color:var(--text); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:inherit; }
.titled { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; } .titled h2 { margin:0; }

@media (max-width: 900px) {
  .compose { grid-template-columns:1fr; } .summary { position:static; }
  .detail .cols { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  nav.top { padding:12px 16px; } .tabs { order:3; width:100%; overflow-x:auto; }
  .row3, .row2, .row-add, .mini, .detail .revoke form { grid-template-columns:1fr; }
  .kv { grid-template-columns:1fr; gap:2px 0; } .kv dd { margin-bottom:8px; }
  .search { width:100%; }
  .steps li { padding:0 8px; }
}