/* Bad Breaks control plane.
   The palette is the one brand.recommend() derived from the Really Bad Breaks mark,
   so this and the marketing page are the same site rather than two that look alike. */
:root{
  --page:#0B0B13; --card:#151523; --raised:#1B1B2C; --rule:#212136; --rule-hi:#30304F;
  --accent:#37A6E9; --accent-hi:#77C3F0; --accent-deep:#082E45;
  --cream:#FCFAE0; --dim:#C8C7B3; --faint:#868579; --ink-on-accent:#0B0B13;
  --ok:#7FC79C; --ok-deep:#16271E; --warn:#D9B168; --bad:#F0938A; --bad-deep:#2E1B1A;
}
*{box-sizing:border-box}

/* The browser's own `[hidden]{display:none}` sits at the bottom of the cascade, so any
   class rule setting `display` beats it and the element stays on screen with its hidden
   attribute set. Nothing here does that today; on the tenant app it cost the Overview's
   whole view bar, which set `hidden` correctly and was overruled by `.calc{display:grid}`.
   One declaration is cheaper than finding out the same way twice. */
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--cream);
  font:400 15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--accent-hi)} a:hover{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px 70px}
header.top{border-bottom:1px solid var(--rule);background:#0E0E19;margin-bottom:26px}
header.top .wrap{display:flex;align-items:center;gap:12px;padding:14px 22px}
header.top img{width:32px;height:32px;border-radius:6px}
header.top b{font-size:15px}
header.top nav{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:13.5px}
h1{font-size:23px;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:16px;margin:30px 0 10px}
p.sub{color:var(--faint);margin:0 0 22px;font-size:14px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  padding:10px 12px;border-bottom:1px solid var(--rule)}
td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:9px;overflow:hidden}
.pill{display:inline-block;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:4px;white-space:nowrap}
.pill.ok{background:var(--ok-deep);color:var(--ok)}
.pill.bad{background:var(--bad-deep);color:var(--bad)}
.pill.warn{background:#2B2418;color:var(--warn)}
.pill.dim{background:var(--raised);color:var(--faint)}
.pill.accent{background:var(--accent-deep);color:var(--accent-hi)}
.detail{color:var(--faint);font-size:12.5px;margin-top:4px;line-height:1.5}
button{font:inherit;cursor:pointer;background:var(--raised);color:var(--cream);
  border:1px solid var(--rule-hi);border-radius:6px;padding:6px 11px;font-size:13px}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--ink-on-accent);border-color:var(--accent);font-weight:650}
button.primary:hover{background:var(--accent-hi)}
button:disabled{opacity:.4;cursor:not-allowed}
button:disabled:hover{border-color:var(--rule-hi)}
.acts{display:flex;gap:6px;flex-wrap:nowrap}
input{font:inherit;background:#0E0E19;color:var(--cream);border:1px solid var(--rule-hi);
  border-radius:6px;padding:9px 11px;width:100%}
input:focus{outline:2px solid var(--accent);outline-offset:-1px}
label{display:block;font-size:11.5px;color:var(--faint);margin:0 0 5px;
  text-transform:uppercase;letter-spacing:.07em}
.field{margin-bottom:14px}
.err{background:var(--bad-deep);border:1px solid var(--bad);color:var(--bad);
  padding:10px 12px;border-radius:6px;margin-bottom:16px;font-size:14px}
.login{max-width:340px;margin:14vh auto 0}
.login .card{padding:22px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.meta{color:var(--faint);font-size:13px;margin:0 0 18px}
.meta b{color:var(--dim);font-weight:500}
.frozen{opacity:.72}

/* A button that is an aside, not an action: "start over with a different phone" sits
   under the thing it undoes and should not compete with the button that finishes it. */
.linky{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--accent-hi);cursor:pointer;text-decoration:underline}
.linky:hover{color:var(--accent)}

/* The enquiry page. Wider than the sign-in box — it is five fields and a paragraph,
   not a password — and narrower than the board, so the lines stay readable. */
.ask{max-width:520px;margin:6vh auto 0}
textarea{font:inherit;background:#0E0E19;color:var(--cream);
  border:1px solid var(--rule-hi);border-radius:6px;padding:9px 11px;width:100%;
  resize:vertical;line-height:1.55}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* The accounts page: a tally strip, then a card per site. */
.tally{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 30px}
.tally .t{
  flex:1 1 150px; background:var(--card); border:1px solid var(--rule);
  border-radius:9px; padding:13px 15px;
}
.tally .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.tally .v{font-size:23px;font-weight:650;font-variant-numeric:tabular-nums}
.tally .v.warn{color:var(--warn)}
.tally .v.bad{color:var(--bad)}
.twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ok-note{background:var(--ok-deep);border:1px solid var(--ok);color:var(--ok);
  padding:10px 12px;border-radius:6px;margin-bottom:18px;font-size:14px}
h3{font-size:14.5px;margin:22px 0 10px}

/* ==========================================================================
   Choosing a colour scheme.

   Each swatch is a miniature of the page it would produce — the ground, a card, the
   accent, and two weights of text — rather than a row of colour chips. Chips answer
   "what colours are these"; the question being asked is "what would my site look
   like", and only one of those is answerable by looking.
   ========================================================================== */
.schemes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.schemes .scheme{margin:0}
.schemes .swatch{
  display:block;width:100%;padding:14px;border-radius:10px;cursor:pointer;
  border:2px solid transparent;text-align:left;
}
.schemes .swatch:hover{filter:brightness(1.12)}
.schemes .swatch.on{box-shadow:0 0 0 2px var(--accent)}
.schemes .sw-bar{display:block;padding:10px;border-radius:6px;margin-bottom:10px}
.schemes .sw-dot{display:inline-block;width:14px;height:14px;border-radius:4px;
  vertical-align:middle}
.schemes .sw-line{display:inline-block;height:6px;width:52%;border-radius:3px;
  margin-left:6px;vertical-align:middle;opacity:.9}
.schemes .sw-line.short{width:24%;opacity:.55;margin-left:4px}
.schemes .sw-name{display:block;font-size:13px;font-weight:650}
.schemes .sw-chosen{display:block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;margin-top:3px}

/* Setting a colour by hand. A native colour input, because it is the one control
   every browser and phone already knows how to draw well, and because the alternative
   — asking for #RRGGBB in a text box — is the question this whole screen exists to
   avoid asking. The hex is shown beside it for anyone who does have a brand guide. */
.colours{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin-top:4px}
.colours .colour{margin:0;background:var(--brown-900);border:1px solid var(--brown-700);
  border-radius:8px;padding:12px}
.colours label{display:block;margin-bottom:7px}
.colours .yours{color:var(--gold);text-transform:none;letter-spacing:0;font-size:10.5px}
.colours .row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.colours input[type=color]{width:40px;height:32px;padding:2px;border-radius:6px;
  background:none;border:1px solid var(--brown-600);cursor:pointer;flex:none}
.colours .hexed{flex:1;font-size:12px;color:var(--cream-dim)}
.colours button{padding:6px 10px;font-size:12.5px}