/* backoffice.css — the backoffice's stylesheet: the suite's tokens and the
   suite's type, and nothing else.

   The backoffice is the same site as the shop, seen from the other side of
   the counter, so it wears the shop's colours and the shop's faces — the
   self-hosted ones under /fonts/, loaded from nowhere else. What it has of
   its own is a denser page: tables instead of cards, because the people who
   run the shop are reading a list of things, not a catalogue. */

@font-face{font-family:Archivo;font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Archivo-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/IBMPlexMono-600.woff2') format('woff2')}

:root{
  --mr-bg:#121110; --mr-rack:#1c1b19; --mr-rack-edge:#2a2825;
  --mr-text:#e6e1d3; --mr-text-bright:#f1ece0; --mr-muted:#8d877a;
  --mr-accent:#ff6a2b; --mr-accent-hot:#f2c14e;
  --mr-c2:#3fb8a9; --mr-c3:#e8505b;
  --mr-display-font:Archivo,'Helvetica Neue',Arial,sans-serif;
  --mr-mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --mr-max:1400px; --mr-gutter:40px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--mr-bg);color:var(--mr-text);font-family:var(--mr-mono);font-size:14px;line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--mr-display-font);font-weight:800;color:var(--mr-text-bright)}
h1{font-size:44px;line-height:1.04;letter-spacing:-1.6px;margin:16px 0 0;max-width:18ch}
h2{font-size:19px;letter-spacing:-.4px;margin:0 0 4px}
h3{font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mr-muted);margin:0 0 12px}
p{margin:0 0 14px;max-width:70ch;color:var(--mr-muted)}

/* ---- the header ---- */
.head{border-bottom:1px solid var(--mr-rack-edge);background:#100f0e}
.head-in{display:flex;align-items:center;gap:28px;max-width:var(--mr-max);margin:0 auto;padding:20px var(--mr-gutter)}
.mark{font-family:var(--mr-display-font);font-weight:800;font-size:26px;line-height:1;letter-spacing:-1px;color:var(--mr-text)}
.mark small{font-family:var(--mr-mono);font-weight:400;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mr-accent);margin-left:10px;vertical-align:3px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mr-muted);padding:10px 13px;border-radius:3px;transition:color .2s,background .2s}
.nav a:hover{color:var(--mr-text-bright);background:var(--mr-rack)}
.nav a.on{color:var(--mr-text-bright)}
.nav a.on:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mr-accent);box-shadow:0 0 0 0 rgba(255,106,43,.55);animation:mr-led 2.6s ease-in-out infinite}
@keyframes mr-led{0%{box-shadow:0 0 0 0 rgba(255,106,43,.5)}70%{box-shadow:0 0 0 9px rgba(255,106,43,0)}100%{box-shadow:0 0 0 0 rgba(255,106,43,0)}}

/* ---- the page ---- */
.page{max-width:var(--mr-max);margin:0 auto;padding:0 var(--mr-gutter) 72px}
.hero{padding:44px 0 28px}
.eyebrow{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mr-accent);display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";display:inline-block;width:22px;height:1px;background:var(--mr-accent);flex:0 0 auto}
.lede{font-size:15px;line-height:1.74;color:var(--mr-muted);max-width:62ch;margin:16px 0 0}
.bar{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 22px}
.bar h1{margin:0}
.bar .aside{margin-left:auto;font-size:12px;color:var(--mr-muted)}

/* ---- the tiles: the shop at a glance ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 40px}
.tile{background:var(--mr-rack);border:1px solid var(--mr-rack-edge);border-radius:8px;padding:18px 20px}
.tile .n{font-family:var(--mr-display-font);font-weight:800;font-size:30px;letter-spacing:-1px;color:var(--mr-text-bright);line-height:1.1}
.tile .k{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mr-muted);margin-top:6px}
.tile.accent .n{color:var(--mr-accent)}
.tile.good .n{color:var(--mr-c2)}
.tile.bad .n{color:var(--mr-c3)}

/* ---- the tables ---- */
.sheet{background:var(--mr-rack);border:1px solid var(--mr-rack-edge);border-radius:8px;overflow:hidden;margin:0 0 14px}
.row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:14px 20px;border-top:1px solid var(--mr-rack-edge)}
.row:first-child{border-top:0}
.row.head{padding:10px 20px;background:#171614;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mr-muted)}
.row:hover{background:#1f1e1b}
.row .who{color:var(--mr-text-bright);font-weight:600}
.row .sub{font-size:12px;color:var(--mr-muted)}
.row .right{justify-self:end;text-align:right}
.row .amount{font-family:var(--mr-display-font);font-weight:800;font-size:18px;color:var(--mr-text-bright)}
.row .actions{display:flex;gap:8px;justify-self:end;flex-wrap:wrap}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---- the status pills ---- */
.status{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--mr-rack-edge);color:var(--mr-muted);white-space:nowrap}
.status.paid,.status.active,.status.fulfilled,.status.trialing{color:var(--mr-c2);border-color:var(--mr-c2)}
.status.cancelled,.status.refunded,.status.past_due,.status.unpaid,.status.incomplete{color:var(--mr-c3);border-color:var(--mr-c3)}
.status.awaiting_payment,.status.cancel_at_period_end{color:var(--mr-accent-hot);border-color:var(--mr-accent-hot)}
.status.revoked{color:var(--mr-c3);border-color:var(--mr-c3)}

/* ---- the buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mr-mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mr-text);background:transparent;border:1px solid var(--mr-rack-edge);border-radius:3px;padding:9px 14px;cursor:pointer;transition:border-color .2s,color .2s}
.btn:hover{border-color:var(--mr-accent);color:var(--mr-accent-hot)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--mr-accent);border-color:var(--mr-accent);color:#17110c}
.btn.primary:hover{filter:brightness(1.08);color:#17110c}
.btn.danger:hover{border-color:var(--mr-c3);color:var(--mr-c3)}

/* ---- the forms ---- */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.filter .btn.on{color:#17110c;background:var(--mr-accent);border-color:var(--mr-accent)}
.field{display:grid;gap:6px;max-width:520px;margin:0 0 16px}
.field label{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mr-muted)}
.field textarea,.field input,.field select{appearance:none;background:#0f0e0d;border:1px solid var(--mr-rack-edge);border-radius:3px;padding:11px 13px;color:var(--mr-text);font-family:var(--mr-mono);font-size:13px;width:100%;resize:vertical}
.field textarea:focus,.field input:focus,.field select:focus{outline:none;border-color:var(--mr-accent)}

/* ---- the code: a licence key, an order id ---- */
code,.mono{font-family:var(--mr-mono);font-size:12px;color:var(--mr-text);word-break:break-all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13px;margin:0}
.kv dt{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mr-muted);align-self:center}
.kv dd{margin:0;color:var(--mr-text)}

/* ---- the sign-in ---- */
.ways{display:flex;gap:12px;flex-wrap:wrap}
.say{font-size:12.5px;color:var(--mr-muted);margin:18px 0 0;min-height:20px}
.say.ok{color:var(--mr-c2)}
.say.error{color:var(--mr-c3)}
.empty{color:var(--mr-muted);padding:26px 0}
.split{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin:0 0 18px}
.split .grow{flex:1}
.muted{color:var(--mr-muted)}
.small{font-size:12px}

@media (max-width:880px){
  :root{--mr-gutter:20px}
  h1{font-size:32px}
  .head-in{flex-wrap:wrap;gap:14px}
  .nav{margin-left:0;width:100%}
  .row{grid-template-columns:1fr;gap:6px}
  .row > div:empty{display:none}
  .row .right,.row .actions{justify-self:start;text-align:left}
}