/* Clickwork license portal — layout on top of theme.css (a synced copy of
   the editor's own design tokens; see the packaging step in tools/). Same
   visual language as the editor's own launcher screen on purpose. */

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--c-bg-1);
  color: var(--c-text);
  font: var(--fz-base) / var(--lh-normal) var(--font-ui);
}

.portal-host {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--c-accent-bg), transparent 60%),
    var(--c-bg-1);
}
.portal-glow {
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 380px;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, var(--c-accent-bg), transparent 72%);
  filter: blur(24px);
  opacity: 0.9;
}
.portal-page {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(var(--s-6), 9vh, 96px) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.portal-page.is-wide { max-width: 900px; }

.portal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}
.portal-logo { height: clamp(56px, 10vw, 88px); width: auto; display: block; image-rendering: pixelated; }
.portal-title { margin: 0; font-size: var(--fz-head); font-weight: var(--fw-semi); }
.portal-tagline { margin: 0; color: var(--c-text-mid); font-size: var(--fz-md); }

.portal-card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-bg-0);
  box-shadow: var(--e-1);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.portal-card form { display: flex; flex-direction: column; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--fz-sm); font-weight: var(--fw-medium); color: var(--c-text-mid); }
.field input, .field select, .field textarea {
  font: var(--fz-base) / var(--lh-normal) var(--font-ui);
  color: var(--c-text);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  padding: 0 var(--ctl-pad-x);
  height: var(--ctl-h-md);
}
.field textarea { height: auto; padding: var(--s-3) var(--ctl-pad-x); min-height: 72px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--ctl-h-md);
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: var(--fz-base) / 1 var(--font-ui);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-primary { background: var(--c-accent); color: var(--c-accent-text); }
.btn-primary:hover { background: var(--c-accent-hover); }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-line-2); }
.btn-ghost:hover { background: var(--c-bg-2); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: var(--c-danger-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-sm { height: var(--ctl-h-sm); padding: 0 var(--s-4); font-size: var(--fz-sm); }

.portal-links { display: flex; justify-content: center; gap: var(--s-3); font-size: var(--fz-sm); color: var(--c-text-mid); }
.portal-links a { color: var(--c-text-mid); }
.portal-links a:hover { color: var(--c-accent); }

.portal-card--login { max-width: 480px; margin: 0 auto; width: 100%; }

.portal-title { display: inline-flex; align-items: center; gap: var(--s-3); justify-content: center; }

/* --- beta roadmap (login page) --- */
.portal-roadmap {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.portal-roadmap-title { margin: 0; font-size: var(--fz-title); font-weight: var(--fw-semi); text-align: center; }
.portal-roadmap-lead { margin: 0; color: var(--c-text-mid); font-size: var(--fz-sm); text-align: center; }
.portal-roadmap-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.roadmap-col {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-0);
  padding: var(--s-4) var(--s-5);
}
.roadmap-col h3 { margin: 0 0 var(--s-3); }
.roadmap-col ul { margin: 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.roadmap-col li { font-size: var(--fz-sm); color: var(--c-text-mid); line-height: var(--lh-tight); }
.portal-roadmap-foot { margin: 0; text-align: center; font-size: var(--fz-sm); color: var(--c-text-mid); }
@media (max-width: 720px) {
  .portal-roadmap-cols { grid-template-columns: 1fr; }
}

.portal-footer { width: 100%; margin: 0; text-align: center; font-size: var(--fz-sm); color: var(--c-text-low); }

.msg { border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--fz-sm); }
.msg-error { background: var(--c-danger-bg); color: var(--c-danger); }
.msg-success { background: var(--c-success-bg); color: var(--c-success); }
.msg[hidden] { display: none; }

.chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-full); font-size: var(--fz-micro); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.04em; }
.chip-accent { background: var(--c-accent-bg); color: var(--c-accent); }
.chip-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.chip-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.chip-success { background: var(--c-success-bg); color: var(--c-success); }
.chip-neutral { background: var(--c-bg-2); color: var(--c-text-mid); }

/* --- account chrome: injected into every account/*.html page --- */
.account-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  font-size: var(--fz-sm);
  color: var(--c-text-mid);
}
.account-bar a, .account-bar button.link {
  background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.account-bar a:hover, .account-bar button.link:hover { color: var(--c-accent); }

/* --- admin: tabs + table --- */
.admin-tabs { display: flex; gap: var(--s-2); border-bottom: 1px solid var(--c-line); padding: 0 var(--s-6); }
.admin-tab {
  background: none; border: none; padding: var(--s-3) var(--s-4);
  font: var(--fz-base) / 1 var(--font-ui); color: var(--c-text-mid); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tab.is-on { color: var(--c-text); border-color: var(--c-accent); font-weight: var(--fw-medium); }
.admin-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }

/* a long note/email/company can otherwise force the table wider than
   .portal-card, bleeding the table (and its action buttons) past the card's
   rounded border instead of respecting it — scope the scroll to the table
   itself, never let it apply to the page body. */
/* Requests tab: one titled section per queue (admin.js's renderRequests) */
.admin-section-title { margin: 0; font-size: var(--fz-md, 15px); font-weight: var(--fw-semibold, 600); display: flex; align-items: center; gap: var(--s-2); }
.admin-section-lead { margin: calc(var(--s-3) * -1) 0 0; font-size: var(--fz-sm); }
.admin-table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fz-base); }
.admin-table th { text-align: left; color: var(--c-text-mid); font-weight: var(--fw-medium); font-size: var(--fz-sm); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.admin-table td { padding: var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
/* a request's note gets its own full-width row right under the request's
   main row (see admin.js renderRequests) instead of being squeezed into a
   narrow column alongside email/name/company/actions — a note is often the
   longest text in the row and reads far better with the whole table's width
   to wrap in. has-note drops the main row's bottom border so the pair reads
   as one visual block, with the border instead sitting under the note. */
.admin-table tr.has-note td { border-bottom: none; }
.admin-table tr.note-row td { padding-top: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-text-mid); }
.note-label { display: inline-block; font-size: var(--fz-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-low); margin-right: var(--s-3); }
.admin-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.perm-groups { display: flex; flex-direction: column; gap: var(--s-4); }
.perm-group h4 { margin: 0 0 var(--s-2); font-size: var(--fz-sm); color: var(--c-text-mid); text-transform: uppercase; letter-spacing: 0.04em; }
.perm-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; }
.perm-row label { font-size: var(--fz-base); }

.u-dim { color: var(--c-text-low); }

/* --- user-detail.html: beta usage telemetry summary --- */
.count-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.count-tile {
  min-width: 96px;
  flex: 1 0 96px;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-align: center;
}
.count-tile-n { font-size: var(--fz-title); font-weight: var(--fw-semi); }
.count-tile-l { font-size: var(--fz-sm); color: var(--c-text-mid); }

/* --- messages: messages.html's two-pane inbox + admin.html's Messages tab --- */
.portal-card-title { margin: 0; font-size: var(--fz-md); font-weight: var(--fw-semi); }

.messages-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  padding: 0;
  min-height: 480px;
}
.messages-list {
  border-right: 1px solid var(--c-line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow-y: auto;
}
.messages-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.messages-conversation {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow-y: auto;
}
@media (max-width: 720px) {
  .messages-shell { grid-template-columns: 1fr; }
  .messages-list { border-right: none; border-bottom: 1px solid var(--c-line); }
}

.thread-list { display: flex; flex-direction: column; gap: var(--s-3); }
.thread-row {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  cursor: pointer;
}
.thread-row.is-selected { border-color: var(--c-accent); background: var(--c-accent-bg); }
.thread-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* the conversation pane's own header — Delete lives here, deliberately far
   from Reply (which sits at the very bottom of the pane, past every message)
   so the two are never one careless click apart. */
.messages-conv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }

.thread-messages { display: flex; flex-direction: column; gap: var(--s-3); }
.thread-msg { border-radius: var(--r-sm); padding: var(--s-3); background: var(--c-bg-1); }
.thread-msg--admin { background: var(--c-accent-bg); }
/* the body is user-typed free text from a textarea: keep its line breaks and
   blank lines instead of letting HTML collapse them into one run-on
   paragraph, and break any unbroken run (a pasted URL, a stack trace) rather
   than blowing the card out sideways. */
.thread-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-reply { display: flex; flex-direction: column; gap: var(--s-3); }
.thread-reply textarea {
  font: var(--fz-base) / var(--lh-normal) var(--font-ui);
  color: var(--c-text);
  background: var(--c-bg-1);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--ctl-pad-x);
  resize: vertical;
}

/* "or" between the password form and "Continue with Google" (login.html) */
.portal-or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; color: var(--c-text-low); font-size: var(--fz-sm); }
.portal-or::before, .portal-or::after { content: ""; flex: 1; border-top: 1px solid var(--c-line); }
a.btn { text-decoration: none; }
.btn-block { width: 100%; box-sizing: border-box; }

/* --- two-factor authentication: login.html's code step, profile.html's
   #two-factor card, the re-check dialog (app.js reauthDialog) --- */
.link-btn {
  align-self: flex-start;
  background: none; border: none; padding: 0;
  font: inherit; font-size: var(--fz-sm);
  color: var(--c-accent); text-decoration: underline; cursor: pointer;
}
.link-btn[hidden] { display: none; }
.mfa-links { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.mfa-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.mfa-actions[hidden], .mfa-panel[hidden], .field[hidden] { display: none; }
.mfa-panel { display: flex; flex-direction: column; gap: var(--s-4); }
.mfa-panel p { margin: 0; }
/* black on white in both themes: scanners need the contrast */
.mfa-qr { width: 200px; max-width: 100%; align-self: center; background: #fff; border-radius: var(--r-sm); }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fz-md);
  letter-spacing: 0.06em;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-bg-2);
  overflow-wrap: anywhere;
  user-select: all;
}
.mfa-code-list {
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 2ch);
  border-radius: var(--r-sm);
  background: var(--c-bg-2);
  columns: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  user-select: all;
}
@media (max-width: 420px) { .mfa-code-list { columns: 1; } }
.mfa-check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fz-sm); }

.portal-dialog {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-bg-0);
  color: var(--c-text);
  box-shadow: var(--e-1);
  padding: var(--s-6);
  width: min(400px, calc(100vw - 32px));
}
.portal-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.portal-dialog-form { display: flex; flex-direction: column; gap: var(--s-4); }
.portal-dialog [hidden] { display: none; }
/* `.portal-card form` sets display: flex, which would otherwise beat the
   hidden attribute (login.html swaps its password and code forms) */
.portal-card form[hidden] { display: none; }

/* --- admin: Tasks tab (admin.js renderTasks) --- */
.stats-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.stats-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.stats-big > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md, 8px); background: var(--c-bg-1); }
.stats-big b { font-size: 26px; font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; }
.stats-big span { color: var(--c-text-mid); font-size: var(--fz-sm); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); align-items: start; }
.stats-group-title { margin: 0 0 var(--s-2); font-size: var(--fz-sm); font-weight: var(--fw-semibold, 600); color: var(--c-text-mid); text-transform: uppercase; letter-spacing: 0.04em; }
.stats-list { margin: 0; display: flex; flex-direction: column; }
.stats-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fz-sm); }
.stats-row:last-child { border-bottom: none; }
.stats-row dt { color: var(--c-text-mid); white-space: pre; }
.stats-row dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.stats-weeks { display: flex; flex-direction: column; gap: var(--s-2); }
.stats-weeks-legend { display: flex; gap: var(--s-4); font-size: var(--fz-sm); color: var(--c-text-mid); }
.stats-weeks-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stats-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.stats-weeks-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-2); height: 140px; }
.stats-week { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stats-week-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--c-line); }
.stats-week-bars i { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.stats-week-label { font-size: 11px; color: var(--c-text-low, var(--c-text-mid)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-swatch.is-created, .stats-week-bars i.is-created { background: var(--c-accent); }
.stats-swatch.is-done, .stats-week-bars i.is-done { background: #2fb67c; }
.stats-swatch.is-comments, .stats-week-bars i.is-comments { background: #9b6bf2; }
.stats-tables td:nth-child(2), .stats-tables td:nth-child(3) { font-variant-numeric: tabular-nums; }
.stats-head .admin-section-lead { margin: 2px 0 0; }

/* a small line under a field: the profile page's "Email me a reset link" */
.field-hint { margin: 4px 0 0; font-size: var(--fz-sm); color: var(--c-text-mid); }
.field-hint a { color: var(--c-accent); }