/* Everycrate Cloud (0.16.0): the control plane's pages, in the app's own tokens (public/design.css): forest green, ivory,
   sage, DM Sans (the app's font file, served at /_cloud/fonts/). Light and dark like the app. */
@font-face { font-family:"DM Sans"; src:url('/_cloud/fonts/dm-sans-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  color-scheme:light;
  --bg:#f5f5f0; --card:#fff; --ink:#223a33; --muted:#5d6c61; --line:#dfe4db;
  --accent:#255c49; --accent-hover:#194737; --accent-ink:#fff; --chip:#edf1e9; --ok:#27624c; --warn:#886327; --bad:#ab4543;
  --forest:#183c30; --forest-deep:#133227; --sage:#c8d9b8; --surface:#f9faf6;
  --bad-bg:#f8eae6; --bad-ink:#953b36; --ok-bg:#e6f0e2; --warn-bg:#f6efdf;
  --shadow:0 2px 3px rgba(29,49,37,.02),0 12px 30px rgba(29,49,37,.035);
}
@media (prefers-color-scheme:dark) {
  :root { color-scheme:dark; --bg:#13251d; --card:#1b3025; --ink:#e4eadd; --muted:#a8b6a6; --line:#354c39; --accent:#b9d29e; --accent-hover:#cfdfbc; --accent-ink:#173222; --chip:#304633;
    --ok:#a4d3ae; --warn:#e1c77e; --bad:#f3a59b; --surface:#20382a; --bad-bg:#402c27; --bad-ink:#f3a59b; --ok-bg:#243e2c; --warn-bg:#3d3928; --shadow:0 5px 25px #06100916; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
b,strong { font-weight:650; }
:focus-visible { outline:3px solid #84a689; outline-offset:3px; }
.skip-link { position:fixed; top:10px; left:10px; z-index:10; padding:10px 16px; background:var(--card); border:2px solid var(--accent); border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
#main:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* the green bar, like the app's sidebar */
.top { background:var(--forest); color:#fff; padding:12px 20px; display:flex; align-items:center; gap:16px; min-height:62px; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; font-size:20px; letter-spacing:-.6px; }
.brand-symbol { width:30px; height:30px; flex:none; color:var(--sage); }
.top-end { margin-left:auto; display:flex; gap:10px; align-items:center; font-size:14px; }
.top-end a { color:#e2eadf; }

main { max-width:720px; margin:0 auto; padding:40px 16px 64px; }
body.wide main { max-width:1320px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px 32px; box-shadow:var(--shadow); margin:0 0 20px; }
.card.flush { padding:0; overflow:hidden; }
.card .pad { padding:24px 28px 8px; margin:0; }
.narrow { max-width:460px; margin-left:auto; margin-right:auto; }
.center { text-align:center; }
.eyebrow { font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1.6px; color:var(--muted); margin:0 0 22px; }
h1 { font-size:30px; line-height:1.2; letter-spacing:-1px; font-weight:600; margin:0 0 12px; }
.page-title { font-size:34px; letter-spacing:-1.3px; margin:0 0 6px; }
h2 { font-size:18px; letter-spacing:-.3px; font-weight:650; margin:0 0 12px; }
p { margin:0 0 14px; }
.lead { color:var(--muted); margin:0 0 22px; }
.small { font-size:14px; }
.muted { color:var(--muted); }
label { display:block; font-size:14px; font-weight:600; color:var(--muted); margin:0 0 6px; }
input[type=email],input[type=text] { width:100%; font:inherit; font-size:18px; padding:13px 14px; min-height:52px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:inherit; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(68,113,82,.12); outline:none; }
button,.button { font:inherit; font-size:16px; font-weight:600; min-height:48px; padding:11px 20px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 1px 2px rgba(24,45,30,.03); }
button:hover,.button:hover { background:var(--surface); border-color:#b6c5b7; }
button.primary,.button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.primary:hover,.button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.quiet { background:transparent; border-color:transparent; box-shadow:none; color:var(--muted); }
button.small,.button.small { min-height:40px; padding:6px 12px; font-size:14px; }
button.danger { color:var(--bad); }
.stack > * + * { margin-top:16px; }
.stack button { width:100%; }
.stack + p { margin-top:14px; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.row form { margin:0; }
.foot { margin-top:8px; }
.msg { padding:12px 16px; border-radius:10px; margin:0 0 18px; background:var(--chip); }
.msg.bad { background:var(--bad-bg); color:var(--bad-ink); }
.msg.ok { background:var(--ok-bg); color:var(--ok); }
.msg.warn { background:var(--warn-bg); color:var(--warn); }
.plan-state { font-size:20px; font-weight:650; letter-spacing:-.4px; margin:0 0 6px; }
.linkbox { font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; word-break:break-all; background:var(--surface); border:1px dashed #adc3ae; padding:12px 14px; border-radius:10px; margin:0 0 12px; }
.qr { margin:4px 0 12px; }
.qr svg { width:176px; height:176px; background:#fff; padding:8px; border-radius:10px; border:1px solid var(--line); }
.tag { display:inline-block; font-size:12px; font-weight:650; padding:1px 8px; border-radius:6px; background:var(--chip); color:var(--ink); vertical-align:1px; }
.tag.ok { background:var(--ok-bg); color:var(--ok); } .tag.bad { background:var(--bad-bg); color:var(--bad-ink); } .tag.warn { background:var(--warn-bg); color:var(--warn); }
/* 0.25.0 (watch, Andrew: "Configure monitoring…"): the admin page's health as a card per monitor: its facts, and each
   condition standing there (the accounts it names, a line each) with why, what to do and since when; a card's border
   says its state, a condition's left edge too */
.monitors { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px; margin:0 0 20px; }
.card.mon { margin:0; padding:20px 22px 12px; }
.card.mon.bad { border-color:var(--bad); } .card.mon.warn { border-color:var(--warn); }
.mon h3 { font-size:16px; letter-spacing:-.2px; font-weight:650; margin:0 0 8px; }
.mon h3 .tag { margin-left:4px; }
.mon p { margin:0 0 8px; }
.mon .msg { margin:0 0 10px; }
.mon ul.facts,.mon ul.waiting,.mon ul.who { margin:0 0 8px; padding-left:18px; }
.mon ul.waiting { font-size:13px; }
.mon ul.who { font-size:15px; font-weight:600; }
.mon li { margin:0 0 4px; overflow-wrap:anywhere; }
.cond { border-left:4px solid var(--bad); padding:2px 0 2px 12px; margin:10px 0 12px; }
.cond.warn { border-left-color:var(--warn); }
.cond p { margin:0 0 5px; overflow-wrap:anywhere; }

/* tables: the sessions and the admin list */
table { width:100%; border-collapse:collapse; font-size:15px; }
th { text-align:left; font-size:12px; font-weight:650; color:var(--muted); letter-spacing:.2px; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
.tablewrap { overflow-x:auto; }
table.admin { font-size:14px; }
table.admin th,table.admin td { padding:10px 8px; }
table.admin td.acts { min-width:250px; }
table.admin td.plan { min-width:140px; }
table.admin .acts form { display:inline; }
table.admin .acts button,table.admin .acts .button { min-height:36px; padding:4px 10px; font-size:13px; margin:0 2px 4px 0; }
table.admin details { margin-top:2px; font-size:13px; }
table.admin details input { font-size:14px; min-height:40px; padding:6px 10px; max-width:240px; margin:6px 0; }
table.setup th { width:34%; white-space:normal; font-size:13px; color:var(--ink); border-bottom:1px solid var(--line); vertical-align:top; padding:10px 10px 10px 0; }
table.setup td { font-size:14px; overflow-wrap:anywhere; }
table.setup tr:last-child th { border-bottom:0; }
/* 0.19.1: the newest photos sellers added to the catalogue (the admin page), each with Remove */
.catphotos { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 14px; }
.catphotos figure { margin:0; width:132px; }
.catphotos img { width:120px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; background:var(--chip); }
.catphotos figcaption { margin:4px 0; overflow-wrap:anywhere; }
.catphotos form { display:inline; }
/* 0.20.0: what sellers agree on (the admin page): each record's fields side by side, seller by seller */
.qgroup { border-top:1px solid var(--line); padding:14px 0 6px; }
.qgroup h4 { margin:0 0 4px; font-size:16px; }
.qgroup .row { margin-top:10px; }
table.queue th { width:auto; min-width:120px; }
table.queue td { min-width:120px; }
.small-thumbs { gap:6px; margin:0; }
.small-thumbs img { width:80px; height:80px; }
fieldset.choose { border:0; margin:0; padding:0; min-width:0; }
fieldset.choose label { display:block; font-weight:400; margin:0 0 4px; }
fieldset.choose input { width:auto; min-height:0; margin:0 6px 0 0; }
/* (EC-02, EC-03, 0.22.0): a group whose records disagree on what tells pressings apart: the rows and cells that differ */
.qgroup.blocked { border-left:4px solid var(--bad); padding-left:10px; }
table.queue tr.contra th { color:var(--bad-ink); }
table.queue td.contra { background:var(--bad-bg); color:var(--bad-ink); font-weight:600; }
.qgroup .msg.bad b { font-weight:700; }
/* (EC-03, 0.23.0): a shared entry split into separate pressings: each record's pressing under its column */
table.queue tr.splitpick td { vertical-align:top; background:var(--surface); }
table.queue tr.splitpick fieldset.choose label { white-space:nowrap; }
ul.events form.inline { display:inline; margin-left:6px; }
code { font:13px ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--chip); padding:1px 5px; border-radius:5px; }
.nowrap { white-space:nowrap; }
pre.log { font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-all; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px; max-height:70vh; overflow:auto; }
ul.events { list-style:none; padding:0; margin:0; font-size:14px; }
ul.events li { padding:6px 0; border-bottom:1px solid var(--line); }
ul.events li:last-child { border-bottom:0; }

.spinner { width:38px; height:38px; margin:4px auto 18px; border-radius:50%; border:4px solid var(--chip); border-top-color:var(--accent); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:540px) {
  main { padding:22px 16px 48px; }
  .card { padding:22px 18px; border-radius:16px; }
  h1 { font-size:26px; } .page-title { font-size:28px; }
  .row > .button, .row > form, .row > form button { width:100%; }
  td { padding:8px 6px; }
}
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } * { transition:none !important; } }
/* 0.16.2: the public pages (pricing, terms, privacy, refunds, contact), the footer on every page, the agree box */
.legal h2 { margin-top:26px; }
.legal ul { margin:0 0 14px; padding-left:22px; }
.legal li { margin:0 0 8px; }
.site-foot { max-width:720px; margin:0 auto; padding:0 16px 40px; color:var(--muted); font-size:13px; line-height:1.5; }
body.wide .site-foot { max-width:1320px; }
.site-foot nav { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 10px; }
.site-foot nav a { color:var(--muted); font-weight:600; }
.site-foot p { margin:0; }
label.check { display:flex; gap:12px; align-items:flex-start; font-size:16px; font-weight:400; color:var(--ink); line-height:1.45; cursor:pointer; }
label.check input { width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--accent); }
.about { margin-top:6px; }

/* (0.25.1, Andrew's early-access test of Oct 12: the request form was taken for a confirmation): at its top, in large
   type, that nothing is sent until Ask for a place is pressed; the button the page's main one, larger; the box's plain
   words when pressed without it. Every eyebrow in capitals (the operator's BUSINESS_NAME too); a long address in a
   heading wraps. */
.eyebrow { text-transform:uppercase; }
h1 { overflow-wrap:anywhere; }
.notyet { font-size:20px; line-height:1.4; font-weight:650; letter-spacing:-.3px; color:var(--warn); background:var(--warn-bg); border-radius:12px; padding:14px 16px; margin:4px 0 18px; }
.notyet b { font-weight:750; }
button.big,.button.big { min-height:56px; font-size:18px; }
.invalid-msg { margin:10px 0 0; }
@media (max-width:540px) { .notyet { font-size:18px; } }
/* (0.25.0) the request for early access (its words box), the price's allowance line, the admin page's Early access */
textarea { width:100%; font:inherit; font-size:16px; line-height:1.45; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:inherit; resize:vertical; }
textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(68,113,82,.12); outline:none; }
.allowance { font-weight:600; margin:0 0 14px; }
.access td.words { max-width:480px; white-space:pre-wrap; }
.budget { margin:0 0 18px; }
progress.bar { display:block; width:100%; height:8px; margin:6px 0 4px; accent-color:var(--accent); }
progress.bar.warn { accent-color:var(--warn); }
progress.bar.bad { accent-color:var(--bad-ink); }

/* (0.25.0) the plans: the pricing page's table, the account page's records this month and its choice of plan */
table.plans th[scope="row"] { font-size:15px; color:var(--ink); padding:10px; }
table.plans tr:last-child th { border-bottom:0; }
.tablewrap + .allowance { margin-top:12px; }
.records { margin:4px 0 2px; }
.card .records + progress.bar { max-width:440px; margin:6px 0 12px; }
ul.planpick { list-style:none; padding:0; margin:14px 0 8px; display:grid; gap:8px; }
ul.planpick li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
ul.planpick form { margin:0; }

/* (0.25.0, Andrew: "Track the entire cross-domain funnel"): the admin page's Funnel section (its days and breakdown, each
   step's count and rates with a bar, the breakdown table) and each seller's "Came from" */
form.funnelform { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin:0 0 18px; }
form.funnelform label { margin:0 0 4px; }
form.funnelform input[type=date],form.funnelform select { font:inherit; font-size:16px; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:inherit; }
form.funnelform input[type=date]:focus,form.funnelform select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(68,113,82,.12); outline:none; }
table.funnel { font-size:14px; margin:0 0 14px; }
table.funnel th[scope="row"] { font-size:14px; color:var(--ink); font-weight:600; white-space:nowrap; }
table.funnel td.num,table.funnel th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.funnel td.num { white-space:nowrap; }
table.funnel tbody tr:last-child th { border-bottom:0; }
table.funnel td.barcell { width:32%; min-width:120px; vertical-align:middle; }
table.funnel td.barcell progress.bar { margin:0; }
table.funnel.by th[scope="col"] { white-space:normal; min-width:84px; vertical-align:bottom; }
table.funnel.by th[scope="row"] { white-space:normal; overflow-wrap:anywhere; min-width:120px; max-width:260px; }
table.funnel.by tr.others th { font-weight:400; color:var(--muted); }
table.admin td.came { min-width:200px; max-width:280px; overflow-wrap:anywhere; }
@media (max-width:540px) {
  table.funnel th[scope="row"],table.funnel th[scope="col"] { white-space:normal; }
  table.funnel td.barcell,table.funnel th.barcol { display:none; }
}