/* MPT - one stylesheet, no CDN, no build step.
   Spec: "0 - PLAN/6 - Web UI Spec.txt" 6.1 */

:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1c2029; --line:#262b36;
  --text:#e8eaed; --muted:#9aa0a6; --dim:#6b7280;
  --ok:#34d399; --bad:#f87171; --warn:#fbbf24; --accent:#60a5fa;
  --radius:10px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.centered{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,.mono,.num{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0 0 10px;line-height:1.3}
h1{font-size:22px}h2{font-size:17px}h3{font-size:14px}
p{margin:0 0 12px}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:12px}
.center{text-align:center}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row-tight{display:flex;gap:6px;align-items:center}
.spacer{flex:1}
.stack>*+*{margin-top:14px}

/* ---------- shell ---------- */
.topbar{
  display:flex;align-items:center;gap:20px;
  padding:0 20px;height:52px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;letter-spacing:.02em}
.brand:hover{text-decoration:none}
.logo{color:var(--accent);font-size:18px}
.logo.lg{font-size:34px;display:block;margin-bottom:6px}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tabs a{
  color:var(--muted);padding:7px 13px;border-radius:7px;font-size:13px;
  white-space:nowrap;font-weight:500;
}
.tabs a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.tabs a.on{background:var(--panel2);color:var(--text)}
.topright{margin-left:auto;display:flex;align-items:center;gap:12px}
.wrap{max-width:1280px;margin:0 auto;padding:22px 20px 80px}

/* ---------- impersonation ------------------------------------------------
   The picker sits between the brand and the tabs, so it is in the same place
   on every page - including the user tabs the master does not normally have.
   The way OUT has to live somewhere that never moves. */
.imp{position:relative;flex:0 0 200px}
.imp input{
  width:100%;padding:6px 10px;font-size:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--text);
}
.imp input:focus{border-color:var(--accent)}
.imp-list{
  position:absolute;top:calc(100% + 4px);left:0;z-index:60;
  min-width:300px;max-height:340px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px var(--shadow-color);padding:4px;
}
.imp-row{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:6px;padding:7px 9px;
  color:var(--text);font:inherit;cursor:pointer;
}
.imp-row:hover{background:var(--panel2)}
.imp-name{font-size:13px;font-weight:600}
.imp-mail{font-size:11px;color:var(--muted)}
.imp-empty{padding:10px;font-size:12px;color:var(--muted)}

/* WHILE ACTING AS SOMEBODY ELSE the whole bar changes colour. Everything on
   the page belongs to another account, and forgetting that is how an
   administrator deletes the wrong person's videos. */
.topbar.as-user{border-bottom:2px solid var(--warn);background:var(--warn-bg)}
.topbar.as-user .imp input{border-color:var(--warn)}

/* ---------- panels ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;margin-bottom:16px;
}
.panel-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.panel-head h2{margin:0}
.panel-sub{color:var(--muted);font-size:13px;margin:2px 0 0}
.panel-tight{padding:14px 16px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* ---------- forms ---------- */
label{display:block;font-size:12px;color:var(--muted);margin:0 0 5px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],select,textarea{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;font:inherit;outline:none;
}
textarea{resize:vertical;min-height:80px;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--dim)}
.field{margin-bottom:14px}
.field-help{font-size:12px;color:var(--dim);margin-top:4px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}

.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-radius:7px;
  padding:8px 14px;font:inherit;font-weight:600;font-size:13px;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{border-color:var(--line-strong);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--bad);border-color:var(--bad-line)}
.btn-danger:hover{background:var(--bad-bg)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-block{width:100%;padding:11px}

/* ---------- login ---------- */
.login{
  width:100%;max-width:380px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:30px;
}
.login-head{text-align:center;margin-bottom:22px}
.login-head h1{margin:0 0 2px;font-size:20px}
.login-head p{margin:0;font-size:13px}
.login label{margin-top:12px}
.login .btn{margin-top:20px}

.alert{padding:10px 13px;border-radius:7px;font-size:13px;margin-bottom:14px;border:1px solid}
.alert-bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-text)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}
.alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.alert-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-text)}

/* ---------- pills & dots ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  border:1px solid;
}
.pill i{font-style:normal;font-size:11px;line-height:1}
.pill-ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pill-bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.pill-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill-mute{color:var(--dim);border-color:var(--line);background:var(--panel2)}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.dot-ok{background:var(--ok)}.dot-bad{background:var(--bad)}
.dot-warn{background:var(--warn)}.dot-mute{background:var(--dim)}
.badge{display:inline-block;padding:2px 7px;border-radius:5px;background:var(--panel2);
  border:1px solid var(--line);font-size:11px;color:var(--muted);font-weight:600}

/* ---------- credential rows ----------------------------------------------
   THESE SELECTORS MATCH THE MARKUP. The previous block styled .cred,
   .cred-label and .cred-result, none of which views/credentials.php emits -
   it uses .cred-row, .cred-input, .cred-actions, .cred-pill and .cred-help.
   So the rows had NO layout at all: everything stacked as plain blocks and a
   long test message (ElevenLabs returns a four-line one) sprawled across the
   panel with the field, the buttons and the pill all adrift.

   A named-area grid, so the long explanation gets a full-width row of its own
   underneath rather than fighting the controls for space. */
.cred-row{
  display:grid;
  grid-template-columns:210px minmax(200px,1fr) auto;
  /* THE NOTE NEEDS ITS OWN ROW. A row can emit TWO full-width paragraphs - the
     "what this unlocks" help and a per-provider Note - and both were given
     grid-area:help, which is one cell. Two children in one cell are drawn on
     top of each other, so the Ayrshare, Upload-Post and AvionettaShare notes
     rendered as two sentences printed through one another and neither could be
     read. They are different content with different rules, so they get
     different areas. */
  grid-template-areas:
    "label  input  actions"
    "pill   pill   pill"
    "help   help   help"
    "note   note   note";
  gap:8px 14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.cred-row:last-child{border-bottom:0}

.cred-row>label{
  grid-area:label;
  margin:0;font-weight:600;font-size:13px;color:var(--text);
  text-transform:none;letter-spacing:normal;line-height:1.4;
}
.cred-input{grid-area:input;position:relative;display:flex;gap:6px;align-items:center}
.cred-input input{flex:1;min-width:0}
.cred-actions{
  grid-area:actions;display:flex;gap:6px;align-items:center;
  /* NOT flex-wrap. These four controls belong on one line beside the field -
     wrapping put "Get key" on a second line under the input, which is the
     buried position it was moved out of. nowrap plus the grid's auto column
     lets the column take the width it needs. */
  flex-wrap:nowrap;white-space:nowrap;
}

/* "Get key" is a way OUT of the page, not an action on it, so it reads as a
   link that happens to be button-shaped: same height as Test so the row keeps
   one baseline, but quieter. */
.cred-get{
  text-decoration:none;color:var(--accent);border-color:transparent;
  background:transparent;padding-left:6px;padding-right:6px;
}
.cred-get:hover{border-color:var(--line);background:var(--panel2);color:var(--accent)}
.cred-pill{grid-area:pill;min-width:0}
.cred-help{grid-area:help;margin:0;line-height:1.5}
/* Its own area, its own row - see the grid above. min-width:0 so a long note
   wraps inside the column instead of widening the whole grid. */
.cred-note{grid-area:note;margin:0;line-height:1.5;min-width:0}

/* The failure explanation. Full width of the row, left aligned, and allowed to
   wrap - it is prose, and prose squeezed into a 340px right-aligned column
   next to a pill is unreadable. */
.cred-pill .pill-why{
  margin:6px 0 0;max-width:none;margin-left:0;text-align:left;
}

@media (max-width:860px){
  .cred-row{
    grid-template-columns:1fr;
    grid-template-areas:"label" "input" "actions" "pill" "help";
    gap:6px;
  }
  /* On one column the actions get a line of their own, so wrapping is fine
     and nowrap would overflow instead. */
  .cred-actions{flex-wrap:wrap;white-space:normal}
}

/* THE ACTIONS COLUMN STAYS PUT. The users table has ten columns and lives in
   a .scroll-x, so Limits / Account / Resend / Delete sat off the right edge on
   any normal screen - present in the DOM, invisible in practice, and reported
   as "there is no Delete button". Pinned to the right so the buttons are
   reachable without scrolling to find them. */
#users th:last-child,
#users td:last-child{
  position:sticky;right:0;z-index:2;
  background:var(--panel);
  box-shadow:-8px 0 8px -8px var(--shadow-color);
}
#users tbody tr:hover td:last-child{background:var(--panel2)}

/* ---------- tables ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{
  text-align:left;color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  padding:7px 10px 7px 0;border-bottom:1px solid var(--line);
}
table.data td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
.scroll-x{overflow-x:auto}

/* ---------- log ---------- */
.log{
  background:var(--code-bg);border:1px solid var(--line);border-radius:8px;
  padding:12px;font-family:var(--mono);font-size:12px;line-height:1.65;
  max-height:520px;overflow-y:auto;
}
.log-line{display:flex;gap:9px;padding:1px 0}
.log-time{color:var(--dim);flex:none}
.log-msg{white-space:pre-wrap;word-break:break-word}
.log-warn .log-msg{color:var(--warn)}
.log-error .log-msg{color:var(--bad)}
.log-tool .log-msg{color:var(--accent)}

/* ---------- progress ---------- */
.bar{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent);transition:width .3s}
.bar.over>span{background:var(--bad)}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:10px 14px;font-size:13px;max-width:380px;
  box-shadow:0 8px 24px var(--shadow-color);animation:slidein .18s ease-out;
}
.toast.ok{border-left-color:var(--ok)}
.toast.bad{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ---------- misc ---------- */
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
video{width:100%;border-radius:8px;background:#000;display:block}
.empty{padding:36px 20px;text-align:center;color:var(--dim)}

/* Failure explanation under a test pill. Deliberately readable rather than
   tucked into a title= tooltip - see view.php::pill(). */
.pill-why{
  margin-top:6px;font-size:11px;line-height:1.5;
  max-width:520px;text-align:left;
  white-space:normal;overflow-wrap:anywhere;
}

/* --- cost breakdown: Studio estimate and the finished-job actual --------- */
/* Deliberately the same markup on both pages, so "estimated $0.0031" before
   and "$0.0029" after are read as the same kind of thing. */
.costbox{background:var(--surface2);border:1px solid var(--line);border-radius:8px;
         padding:14px 16px;margin:18px 0}
.costbox h4{margin:0 0 10px;font-size:14px;font-weight:600}
.costbox table{margin:0}
.costbox td,.costbox th{padding:5px 8px 5px 0;border-bottom:1px solid var(--line-soft)}
.costbox tfoot th{border-bottom:none;border-top:1px solid var(--line-strong);padding-top:9px;
                  font-size:14px}
.costbox .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.costbox p{margin:10px 0 0}
.ratewrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 14px;margin:8px 0 16px}
.rate{display:flex;align-items:center;gap:8px;justify-content:space-between}
.rate span{color:var(--muted);font-size:13px}
.rate input{width:96px;text-align:right;font-variant-numeric:tabular-nums}

/* =========================================================================
   MULTI-USER, CONTENTS, STORAGE, ADMIN
   Everything below arrived with the content pipeline. Kept in one block at
   the end rather than interleaved above, so the original single-user
   stylesheet stays readable as its own thing.
   ========================================================================= */

/* ---------- library cards: SMALL preview ---------------------------------
   The poster used to be a full-width banner. On a 9:16 render that made each
   card taller than the viewport - a library of six was six screens. The
   thumbnail is now a fixed 64px tile beside the text, so a card is one line
   of information and the grid is scannable. */
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.libcard{
  display:flex;gap:12px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:10px;color:var(--text);overflow:hidden;
}
.libcard:hover{border-color:var(--line-strong);text-decoration:none}
.libcard-thumb{
  width:64px;height:114px;flex:none;object-fit:cover;
  border-radius:6px;background:#000;display:block;
}
.libcard-noimg{
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:20px;border:1px dashed var(--line);
}
.libcard-body{min-width:0}
.libcard-body strong{
  display:block;font-size:13px;line-height:1.35;margin-bottom:4px;
  /* Two lines then ellipsis: a long title must not push a card out of line
     with its neighbours in the grid. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- admin sub-tabs ---------- */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:6px}
.subtabs a{
  color:var(--muted);padding:8px 14px;font-size:13px;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.subtabs a:hover{color:var(--text);text-decoration:none}
.subtabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.tab-admin{color:var(--warn) !important}
.tab-admin.on{color:var(--text) !important}
.bad-badge{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-text)}

/* ---------- toggles ---------- */
/* A checkbox plus its words, clickable as one thing. label{display:block} from
   the form block above would otherwise stack the box over the text. */
.toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text);font-weight:500;
  margin:0 14px 0 0;cursor:pointer;text-transform:none;letter-spacing:normal;
}
.toggle input{width:auto;margin:0;cursor:pointer}
.toggle span{color:var(--text)}
.checklist{display:flex;flex-direction:column;gap:6px;margin-top:6px}

/* ---------- tables: the check column ---------- */
.w-check{width:34px}
table.data td input[type=checkbox],
table.data th input[type=checkbox]{width:auto;margin:0}
table.data td .btn{margin:1px 0}
.right{text-align:right}

/* ---------- quota ---------- */
.quota{font-size:15px;font-weight:600;margin:0 0 8px}

/* ---------- queue ---------- */
.queue{margin:10px 0 0;padding-left:22px}
.queue li{padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.queue li:last-child{border-bottom:0}
.queue li.on{color:var(--text)}
.queue li .tag{margin-right:6px}

/* ---------- the foldable status bar --------------------------------------
   Sticky at the bottom of the viewport: it reports whether work is happening
   right now, and a status bar you have to scroll to find is not a status bar.
   Folded it is one line; unfolded it grows upward with its own scroll. */
.statusbar{
  position:sticky;bottom:0;z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  margin:16px 0 0;box-shadow:0 -6px 20px var(--shadow-color);
}
.statusbar>summary{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;cursor:pointer;list-style:none;
}
.statusbar>summary::-webkit-details-marker{display:none}
.statusbar>summary::after{content:'\25B2';color:var(--dim);font-size:10px;margin-left:auto}
.statusbar[open]>summary::after{content:'\25BC'}
.status-flag{
  font-size:12px;font-weight:800;letter-spacing:.08em;
  padding:3px 10px;border-radius:5px;border:1px solid;
}
/* Colour is never the only signal (spec 6.1): the WORD is the state, and the
   colour agrees with it. */
.status-flag.free{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.status-flag.busy{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.statusbar-body{padding:0 16px 16px;border-top:1px solid var(--line)}
.statusbar-body .row-actions{margin:12px 0}
.statusbar .log{max-height:320px}

/* ---------- modals ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:300;
  background:var(--overlay);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px var(--shadow-color);
}
.modal-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0;flex:1}
.modal-body{padding:18px;overflow-y:auto}
.modal-body video,.modal-body img{max-width:100%;border-radius:8px}
.modal-body textarea{min-height:160px}
.modal-foot{
  display:flex;gap:8px;justify-content:flex-end;
  padding:12px 18px;border-top:1px solid var(--line);
}

/* ---------- chips (parsed brief, ayrshare accounts) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font-size:12px;color:var(--text);
}
.chip-mute{color:var(--dim)}
/* One chip per publishing destination, coloured by what actually happened.
   A posted chip is a link to the live post, so "did it go out" is answerable
   by clicking rather than by trusting the colour. */
.chip-ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.chip-bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.chip-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.chips a{text-decoration:none}
.chips a:hover .chip{filter:brightness(1.25)}
.ayr-profile{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.ayr-profile h4{margin:0 0 6px;font-size:13px;display:flex;align-items:center;gap:6px}
.ayr-profile h4 .btn{margin-left:0;font-weight:400}

/* ---------- the upload schedule (Publish Settings) ---------- */
/* One row per time: the box, the UTC translation it works out to, and the
   remove button. The UTC column is a fixed width so a column of rows lines up
   instead of jittering as each one becomes valid. */
.sched-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.sched-row .m-time{max-width:7rem;flex:0 0 auto}
.sched-row .m-utc{min-width:9rem}
.sched-row .m-utc.warn{color:var(--warn)}
.sched-row .m-drop-time{margin-left:auto}

/* ---------- tickets ---------- */
.ticket{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--panel2)}
.ticket>summary{padding:10px 14px;cursor:pointer;font-size:13px}
.ticket-body{padding:0 14px 14px}
.ticket-body pre{max-height:280px;overflow:auto}

/* ---------- callouts ---------- */
.callout{
  background:var(--info-bg);border:1px solid var(--info-line);border-radius:8px;
  padding:12px 14px;font-size:13px;color:var(--info-text);
}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}

/* ---------- misc ---------- */
.tag{display:inline-block;padding:2px 7px;border-radius:5px;background:var(--panel2);
     border:1px solid var(--line);font-size:11px;color:var(--muted);font-weight:600}
.tag-ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.tag-bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.tag-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.btn-xs{padding:3px 8px;font-size:11px}
.detail summary{cursor:pointer;color:var(--dim)}
.detail pre{margin:6px 0 0;max-height:220px;overflow:auto}
pre.code{
  background:var(--code-bg);border:1px solid var(--line);border-radius:6px;
  padding:10px;font-size:12px;line-height:1.55;overflow:auto;
  white-space:pre-wrap;word-break:break-word;margin:0;
}
details.panel>summary{cursor:pointer;font-size:14px}
details.advanced>summary{cursor:pointer;padding:6px 0}
input[type=file]{
  background:var(--bg);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;color:var(--text);font:inherit;max-width:100%;
}
input[type=datetime-local]{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;font:inherit;
}

/* A render that says "running" with nothing beating. Distinct from busy: this
   one needs a human, and it must not look like ordinary work in progress. */
.status-flag.stalled{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}

/* Live "3/5 — room for 2 more" beside a stage target. Inline with the input so
   the number and its meaning are read together. */
.target-state{font-size:12px;white-space:nowrap}

/* --------------------------------------------------------------------------
   Admin > Render Engines (spec 8.13)
   Three cards side by side on a wide screen, stacked on a narrow one. The
   layout is a grid with a minimum column so it degrades without a breakpoint.
   -------------------------------------------------------------------------- */
.eng-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.eng-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
            background: var(--panel-2, transparent); }
.eng-card.busy { border-color: var(--ok, #2e7d32); }
.eng-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                 margin-bottom: 4px; }
.eng-procs { list-style: none; margin: 8px 0 0; padding: 0; }
.eng-procs li { padding: 4px 0; border-top: 1px solid var(--line); font-size: .92em;
                overflow-wrap: anywhere; }
/* The row being edited right now, so the eye finds it before reading. */
tr.row-live > td { background: color-mix(in srgb, var(--ok, #2e7d32) 8%, transparent); }
/* A cause can be a long engine sentence; it wraps rather than stretching the
   table, and stays readable next to the red tag. */
.eng-cause { margin-top: 4px; max-width: 42ch; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Upload schedule table (spec 6.15a)
   The old .sched-row column of inputs is gone; this is the table that replaced
   it, plus the single "add a time" line under it.
   -------------------------------------------------------------------------- */
.sched-table { width: 100%; margin-top: 8px; }
.sched-table td, .sched-table th { padding: 6px 8px; }
.sched-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sched-add input { width: 7em; }
/* The modal is not wide, so a long schedule scrolls inside itself rather than
   pushing the Save button off the bottom of the dialog. */
#m-sched { max-height: none; }
.scroll-x > .sched-table { min-width: 0; }

/* --------------------------------------------------------------------------
   The ops strip (spec 8.13b) - master only, pinned under the top bar.
   .topbar is sticky at top:0 and 52px tall, so this sits at top:52px and the
   two together form the fixed chrome. z-index below the top bar so the
   impersonation dropdown still overlaps it.
   -------------------------------------------------------------------------- */
.opsbar{
  /* FIXED, NOT STICKY. Sticky at the end of the document only pins while there
     is content below it, so on a short tab the strip drifted up into the middle
     of the page - which is precisely the "always on top" the operator asked for
     and did not get. Fixed is unconditional.
     z-index above the status bar's 40, so the strip is never what gets covered. */
  position:fixed;left:0;right:0;bottom:0;z-index:46;
  background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px var(--shadow-color);
  padding:6px 20px;
}
/* Nothing may hide underneath it: the page is padded by the strip's measured
   height, and the Contents status bar sits directly on top of it. Both default
   to 0, so every non-master page is untouched. */
body{padding-bottom:var(--opsbar-h,0)}
.statusbar{bottom:var(--opsbar-h,0)}
.ops-meters{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:12px}
.ops-meter{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ops-meter b{color:var(--dim);font-weight:600;letter-spacing:.04em;font-size:10px}
.ops-gauge{display:inline-block;width:54px;height:5px;border-radius:3px;
  background:var(--line);overflow:hidden}
.ops-gauge i{display:block;height:100%;background:var(--ok,#2e7d32)}
.ops-meter.warm .ops-gauge i{background:var(--warn,#b58900)}
.ops-meter.hot  .ops-gauge i{background:var(--bad,#c0392b)}
.ops-meter.hot b{color:var(--bad,#c0392b)}

.ops-queue{margin-top:4px}
.ops-queue>summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:4px 0;font-size:12px;
}
.ops-queue>summary::-webkit-details-marker{display:none}
/* The caret is a real element rather than a ::after glyph swap: it rotates, so
   the direction of travel reads at a glance, and it sits at the START of the
   line where the eye looks for an affordance. */
.ops-caret{
  display:inline-block;color:var(--dim);font-size:11px;line-height:1;
  transition:transform .12s ease;
}
.ops-queue[open] .ops-caret{transform:rotate(90deg)}
.ops-hint{margin-left:auto}
.ops-queue>summary:hover .ops-caret,.ops-queue>summary:hover .ops-title{color:var(--accent)}
.ops-title{font-weight:600;letter-spacing:.02em}
/* The panel can be long; it scrolls inside itself rather than pushing the page
   content out of reach behind sticky chrome. */
.ops-body{max-height:46vh;overflow:auto;padding:6px 0 10px}
.ops-engines{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:10px}
.ops-engine{border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.ops-engine h5{margin:0 0 6px;font-size:12px}
.ops-body h5{margin:8px 0 4px;font-size:12px}
.ops-table td{padding:4px 6px;font-size:12px}

/* The always-visible task line: stays whether the panel is folded or not. */
.ops-live{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px}
.ops-chip{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;font-size:11px;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
}
.ops-chip b{font-weight:600}
/* The account MPT is editing for right now - the one chip worth finding fast. */
.ops-chip.live{border-color:var(--ok,#2e7d32)}
.ops-chip.queued{border-style:dashed;color:var(--dim)}

/* Auto Clear on the Published summary line (spec 9.6a). Pushed to the right so
   it reads as a control on that row rather than part of the label. */
.pub-clear{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12px}
.pub-clear input[type=number]{width:5.5em}
details>summary:has(.pub-clear){display:flex;align-items:center;gap:8px}

/* Storage left, on the status bar's own line (spec 6.23). Three states, and
   they are the same three the server computed - never recalculated here. */
.store-chip{
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  white-space:nowrap;
}
.store-chip.ok  {color:var(--ok,#2e7d32);  border-color:color-mix(in srgb,var(--ok,#2e7d32) 45%,transparent)}
.store-chip.warn{color:var(--warn,#b58900);border-color:color-mix(in srgb,var(--warn,#b58900) 45%,transparent)}
.store-chip.bad {color:var(--bad,#c0392b); border-color:color-mix(in srgb,var(--bad,#c0392b) 55%,transparent)}

/* Cost breakdown (spec 6.25). */
.cost-prov{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cost-prov li{border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:12px}

/* Sortable date headers (spec 6.26). The whole header is the control, so it
   has to look like one before it is clicked. */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--accent)}
.sort-caret{font-size:9px;color:var(--dim);margin-left:2px}
th.sortable:hover .sort-caret{color:var(--accent)}

/* =========================================================================
   PHONES (max-width 820px) - nothing above it changes.
   Measured 2026-09-15 at 390x844: the header's one 52px row (brand, picker,
   eleven tabs, email, badge, Sign out) pushed the page to 664px, so Chrome
   zoomed the whole application out and nothing could be read or tapped.
   ========================================================================= */
.nav-toggle,.nav-current{display:none}

@media (max-width:820px), (max-height:500px){
  /* Below 16px iOS zooms in on focus and never zooms back. */
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=url],input[type=datetime-local],select,textarea{font-size:16px}

  /* ---- header: menu button, app, current tab ---- */
  .topbar{height:56px;padding:0 10px;gap:10px}
  .nav-toggle{
    display:grid;place-items:center;flex:none;width:42px;height:42px;
    background:var(--panel2);border:1px solid var(--line);border-radius:10px;
    color:var(--text);font-size:19px;line-height:1;cursor:pointer;
  }
  .brand{flex:none}
  .nav-current{display:block;flex:1 1 auto;min-width:0;color:var(--muted);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar>.imp,.topbar>.tabs,.topbar>.topright{display:none}

  /* ---- the menu, full screen ---- */
  body.nav-open{overflow:hidden}
  body.nav-open .topbar{
    position:fixed;inset:0;height:auto;z-index:400;
    flex-wrap:wrap;align-content:flex-start;row-gap:14px;
    padding:7px 10px 28px;overflow-y:auto;
  }
  body.nav-open .topbar>.tabs,body.nav-open .topbar>.topright{display:flex;flex:0 0 100%}
  body.nav-open .topbar>.imp{display:block;flex:0 0 100%}
  .imp input{height:44px}
  .imp-list{width:100%;min-width:0;max-height:50vh}
  body.nav-open .tabs{flex-direction:column;gap:4px;overflow:visible}
  body.nav-open .tabs a{padding:12px 14px;font-size:15px;border-radius:9px;background:var(--panel2)}
  body.nav-open .tabs a.on{box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}
  body.nav-open .topright{flex-wrap:wrap;gap:10px;margin-left:0;padding-top:12px;border-top:1px solid var(--line)}

  /* ---- page ---- */
  .wrap{padding:12px 10px 90px}
  .panel{padding:14px;margin-bottom:12px}
  .grid-2,.grid-3,.grid-cards,.libgrid,.ratewrap,.eng-cards,.ops-engines{grid-template-columns:minmax(0,1fr)}
  .row-tight,.panel-head,.sched-row,.modal-head,.modal-foot,.log-line{flex-wrap:wrap}
  .pub-clear{flex-wrap:wrap;margin-left:0}
  details>summary:has(.pub-clear){flex-wrap:wrap}
  .subtabs{overflow-x:auto}
  .subtabs a{white-space:nowrap}
  .kv{grid-template-columns:minmax(0,max-content) minmax(0,1fr)}
  .kv dd{overflow-wrap:anywhere}
  pre,.code{max-width:100%;overflow-x:auto}
  img,video{max-width:100%}
  .target-state{white-space:normal}
  .panel select,.panel input,.panel textarea{max-width:100%}
  /* Small inline links get a finger-sized hit area without moving the text. */
  .panel p a:not(.btn),.panel td a:not(.btn),.panel .small a:not(.btn),.field-help a,.panel-sub a{
    display:inline-block;padding:8px 0;margin:-8px 0;
  }

  /* Tables scroll inside themselves instead of widening the page. */
  table.data,table.table,#quepanel .qp{display:block;max-width:100%;overflow-x:auto}

  /* Fingers, not pointers. A long button label wraps rather than setting the
     page width; inside a table it stays on one line and the table scrolls. */
  .btn{white-space:normal;min-height:40px}
  .btn-sm{min-height:36px}
  .btn-xs{min-height:32px}
  table .btn{white-space:nowrap}

  /* ---- dialogs, toasts ---- */
  .modal-backdrop{padding:8px}
  .modal{max-height:calc(100dvh - 16px)}
  .toasts{left:10px;right:10px;bottom:10px}
  .toast{max-width:none}

  /* ---- the bottom strips ---- */
  .opsbar{padding:6px 10px}
  .ops-meters{gap:4px 12px}
  .ops-meter .muted.small{display:none}
  .ops-live{flex-wrap:nowrap;overflow-x:auto}
  .ops-body{max-height:40vh}
  .statusbar>summary{flex-wrap:wrap;padding:10px 12px}
  /* The ops strip wrapped to ~240px. One line each on a phone: the meters
     scroll sideways, the queue summary is truncated. */
  .ops-meters{flex-wrap:nowrap;overflow-x:auto}
  .ops-queue>summary{flex-wrap:nowrap}
  .ops-title{white-space:nowrap}
  #ops-summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .statusbar-body{padding:0 12px 12px}
}

/* ---- Documaker brand (2026-09-29): archival amber ------------------------ */
/* colours: site/app-theme.css (generated from shared/site/brands.php) */
.brand-mark { width: 52px; height: 52px; border-radius: 13px; display: block; margin: 0 auto 10px; }
.site-back { text-align: center; margin-top: 16px; font-size: 13px; }
.site-back a { color: var(--muted); }

/* ---- accounts: terms tick, Google button (2026-09-29) --------------------- */
.terms-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.terms-check input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.or-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; margin: 14px 0; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: #1f1f1f; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.btn-google:hover { background: #f3f4f6; }

/* Choose-a-plan strip (shared/account/billingflow.php bf_banner) */
.plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 14.5px; }
.plan-banner.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.plan-banner-btn { display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accentInk); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* =========================================================================
   THE PUBLIC SITE'S LOOK (2026-09-30)
   Colours come from /site/app-theme.css, generated from shared/site/brands.php
   - the same palette the homepage uses, in dark and light, switched by the
   same 'av-theme' choice (site/theme.js). This block only carries the shapes
   and type that make the dashboard read as the same product: Inter for text,
   the brand's display face for headings, the frosted nav, pill buttons.
   ========================================================================= */
body{font-family:var(--ui,system-ui,sans-serif);font-size:14px}
h1,h2,h3,h4,.login-head h1{font-family:var(--display,inherit);letter-spacing:-.01em;font-weight:650}
a{color:var(--accent-text,var(--accent))}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--accent)}

/* ---- the top bar: the site's frosted nav ---- */
.topbar{
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);height:58px;
}
.brand{font-family:var(--display,inherit);font-size:17px;letter-spacing:-.01em;gap:9px}
.brand-logo{width:26px;height:26px;border-radius:7px;display:block;flex:none}
.tabs a{border-radius:999px;padding:7px 13px}
.tabs a:hover{background:var(--hover-strong)}
.tabs a.on{background:var(--accent-soft);color:var(--accent-text,var(--accent))}
.topbar>.theme-toggle{order:2;margin-left:auto}
.topbar>.theme-toggle~.topright{order:3;margin-left:12px}

/* ---- buttons: pills, like the site ---- */
.btn{border-radius:999px;padding:8px 16px;transition:background .15s ease,border-color .15s ease,box-shadow .2s ease}
.btn:hover{background:var(--surface3)}
.btn-ghost:hover{background:var(--hover-strong)}
.btn-primary{box-shadow:0 8px 24px -10px var(--glow),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 12px 30px -10px var(--glow),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-danger:hover{background:var(--bad-bg)}
.btn-sm{padding:5px 12px}
.btn-xs{padding:3px 9px}
.plan-banner-btn{border-radius:999px}

/* ---- cards, fields ---- */
.panel{border-radius:14px}
.modal{border-radius:16px;box-shadow:var(--shadow)}
.toast{box-shadow:var(--shadow-sm)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],
input[type=search],input[type=tel],input[type=time],input[type=date],input[type=datetime-local],
input[type=file],select,textarea{background-color:var(--field);border-color:var(--line);border-radius:10px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.imp input{background:var(--field)}

/* ---- sign-in, sign-up, reset: the site's hero glow behind the card ---- */
body.centered{background:radial-gradient(ellipse 80% 55% at 50% -10%,var(--glow),transparent 70%),var(--bg);background-attachment:fixed}
.login{border-radius:18px;box-shadow:var(--shadow-sm)}
.theme-float{position:fixed;top:14px;right:14px;z-index:10;width:42px;height:42px;background:var(--surface)}

@media (max-width:820px), (max-height:500px){
  .topbar{height:56px}
  .topbar>.theme-toggle{order:0;margin-left:0;width:42px;height:42px}
  /* The open menu is a full screen: no see-through, whatever the bar does. */
  body.nav-open .topbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  body.nav-open .tabs a{border-radius:12px}
  body.nav-open .tabs a.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
  .btn{padding:8px 14px}
}

/* The signed-in address: one line, never the thing that wraps the bar. It
   gives way first when the tabs need the room. */
.topright>.muted.small{white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
@media (min-width:821px) and (max-width:1240px){ .topright>.muted.small{display:none} }
/* Check boxes big enough for a finger: the browser default is 13px, and some
   markup pins width:auto inline, hence !important (there are no hidden-input
   switches in this app for it to upset). */
input[type=checkbox],input[type=radio]{width:18px !important;height:18px !important;flex:none}
@media (max-width:820px), (max-height:500px){ input[type=checkbox],input[type=radio]{width:24px !important;height:24px !important} }
/* A folded section's title is the control: give it a finger's height. */
details>summary.small{padding-block:8px}
input[type=file]{min-height:40px}

/* THE MENU BUTTON WHEREVER THE TABS DO NOT FIT (2026-09-30).
   Measured: at 844px (a phone on its side) the one-row header showed five of
   nine tabs; the rest sat past the edge in a strip that scrolls sideways with
   nothing to say so. So the header - only the header - switches to the menu
   below 1180px or on a screen under 500px tall. The rest of the page keeps its
   own phone rules at 820px. Keep in step with HEADER_MENU_MQ in lib/view.php. */
@media (max-width:1180px), (max-height:500px){
  .topbar{height:56px;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));gap:10px}
  .nav-toggle{
    display:grid;place-items:center;flex:none;width:42px;height:42px;
    background:var(--panel2);border:1px solid var(--line);border-radius:12px;
    color:var(--text);font-size:19px;line-height:1;cursor:pointer;
  }
  .brand{flex:none}
  .nav-current{display:block;flex:1 1 auto;min-width:0;color:var(--muted);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar>.imp,.topbar>.tabs,.topbar>.topright{display:none}
  .topbar>.theme-toggle{order:0;margin-left:0;width:42px;height:42px}
  body.nav-open{overflow:hidden}
  body.nav-open .topbar{
    position:fixed;inset:0;height:auto;z-index:400;background:var(--bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    flex-wrap:wrap;align-content:flex-start;row-gap:14px;
    padding:7px max(10px,env(safe-area-inset-right,0px)) 28px max(10px,env(safe-area-inset-left,0px));overflow-y:auto;
  }
  body.nav-open .topbar>.tabs,body.nav-open .topbar>.topright{display:flex;flex:0 0 100%}
  body.nav-open .topbar>.imp{display:block;flex:0 0 100%}
  body.nav-open .tabs{flex-direction:column;gap:4px;overflow:visible}
  body.nav-open .tabs a{padding:12px 14px;font-size:15px;border-radius:12px;background:var(--panel2)}
  body.nav-open .tabs a.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent-text,var(--text))}
  body.nav-open .topright{flex-wrap:wrap;gap:10px;margin-left:0;padding-top:12px;border-top:1px solid var(--line)}
  /* No address at the foot of the menu (owner, 2026-09-30). */
  body.nav-open .topright>.muted.small{display:none}
  body.nav-open .topright .btn{min-height:42px;padding:8px 18px}
}
/* A phone on its side has room for two columns of tabs in the open menu. */
@media (max-height:500px) and (min-width:560px){
  body.nav-open .tabs{display:grid;grid-template-columns:1fr 1fr}
}

/* Sign-in / sign-up / reset: the text links under the card are standalone
   controls ("Back to sign in", "Create one", "Back to the website"). They were
   15px tall and "Create one" broke across two lines on a phone. One piece
   each, with a finger-sized hit area that does not move the text. */
.login .small a,.login p.center a,.site-back a{display:inline-block;padding:10px 2px;margin:-8px 0;white-space:nowrap}