/* ==================================================================
   Forms, tables and the admin console
   ------------------------------------------------------------------
   Kept out of theme.css because only two pages load it. Same rules as
   the rest of the system: square corners, hairline borders, mono for
   anything the eye has to scan as data, and colour used only where it
   carries meaning.

   Every colour resolves through the theme's custom properties, so all
   of this inverts correctly with the light/dark toggle without a
   single duplicated declaration.
   ================================================================== */

/* ============================= fields ============================= */

.field { display: block; margin-bottom: 16px; }

.field > span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--rule-hard); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--paper-3);
}

/* Autofill repaints the field with the browser's own yellow, which destroys
   the dark theme. An inset shadow the size of the box is the only reliable
   way to override it. */
.input:-webkit-autofill,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper-3) inset;
  caret-color: var(--ink);
}

.input[type="password"] { font-family: var(--mono); letter-spacing: 0.06em; }
.textarea { min-height: 96px; resize: vertical; font-size: 13.5px; }
.input.mono, .select.mono { font-family: var(--mono); font-size: 13px; }

.field-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-top: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Real estate for the button row under a form. */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.form-actions .spacer { flex: 1; }

/* ============================ messages ============================ */

.note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink-3);
  background: var(--paper-2);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.note b { color: var(--ink); font-weight: 600; }
.note .icon { margin-top: 2px; color: var(--ink-3); }

.note-bad { border-left-color: var(--blue); }
.note-bad .icon { color: var(--blue); }
.note-good { border-left-color: var(--acid); }
.note-good .icon { color: var(--acid); }
.note-warn { border-left-color: #e8a33d; }
.note-warn .icon { color: #e8a33d; }

/* ============================= tabs =============================== */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.16s var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.22s var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab.on { color: var(--ink); }
.tab.on::after { transform: scaleX(1); }
.tab .count {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 5px;
  font-size: 9.5px;
  background: var(--rule);
  color: var(--ink-2);
  border-radius: var(--r);
}

/* ============================ data table ========================== */

.tablewrap {
  border: 1px solid var(--rule);
  /* Wide tables scroll inside their own box. The page body must never scroll
     sideways, least of all on a phone. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }

.dtable th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  padding: 12px 14px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.dtable td { padding: 13px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background 0.14s var(--ease); }
.dtable tbody tr:hover { background: var(--panel); }
.dtable .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dtable .shrink { width: 1%; white-space: nowrap; }

.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.who img, .who .who-blank {
  width: 30px; height: 30px; border-radius: var(--r);
  flex-shrink: 0; object-fit: cover;
  background: var(--paper-3);
}
.who-blank {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--ink-3);
}
.who-txt { min-width: 0; }
.who-txt b { display: block; font-weight: 600; font-size: 13.5px; }
.who-txt span {
  display: block;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 30ch;
}

/* ============================= status ============================= */
/* Colour carries the meaning here, so each state also carries a word — the
   pills are never the only signal. */

.state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink-2);
}
.state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.state.ok   { color: var(--acid); border-color: color-mix(in srgb, var(--acid) 45%, transparent); }
.state.warn { color: #e8a33d; border-color: color-mix(in srgb, #e8a33d 45%, transparent); }
.state.bad  { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }
.state.mute { color: var(--ink-3); }

/* ============================= toggle ============================= */

.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle .track {
  position: relative;
  width: 38px; height: 20px;
  background: var(--paper-3);
  border: 1px solid var(--rule-hard);
  border-radius: var(--r);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
  flex-shrink: 0;
}
.toggle .track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--ink-3);
  border-radius: 1px;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.toggle input:checked + .track { background: color-mix(in srgb, var(--blue) 26%, transparent); border-color: var(--blue); }
.toggle input:checked + .track::after { transform: translateX(18px); background: var(--blue); }
.toggle input:focus-visible + .track { outline: 2px solid var(--blue); outline-offset: 2px; }
.toggle input:disabled + .track { opacity: 0.4; cursor: not-allowed; }
.toggle .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }

/* ============================== stats ============================= */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 26px; }
.stat { background: var(--paper); padding: 18px 20px; }
.stat b { display: block; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

/* ============================= drawer ============================= */
/* The per-user editor. A row expands in place rather than opening a modal —
   nothing is hidden behind it, and the list stays where it was. */

.drawer { background: var(--panel); border-bottom: 1px solid var(--rule); }
.drawer td { padding: 0 !important; }
.drawer-in { padding: 22px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.drawer h5 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.drawer .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.drawer .row:last-child { border-bottom: 0; }
.drawer .row > span { font-size: 13px; color: var(--ink-2); }

/* ============================ file drop =========================== */

.drop {
  /* A <label> is inline by default, and a border on an inline element paints
     one box per line fragment — which produced stray dashed rectangles around
     the heading, the icon and the text instead of one drop zone. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--rule-hard);
  padding: 34px 24px;
  text-align: center;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  cursor: pointer;
}
.drop > .icon { color: var(--ink-3); transition: color 0.18s var(--ease); }
.drop:hover > .icon, .drop.over > .icon { color: var(--blue); }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--panel); }
.drop b { font-size: 16px; font-weight: 600; }
.drop p { font-size: 13px; color: var(--ink-3); max-width: 46ch; margin-inline: auto; }
.drop input[type="file"] { display: none; }

.bar { height: 3px; background: var(--rule); overflow: hidden; margin-top: 16px; }
.bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width 0.2s linear; }

.filelist { margin-top: 18px; display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.filerow { background: var(--paper); padding: 12px 15px; display: flex; align-items: center; gap: 14px; }
.filerow .grow { flex: 1; min-width: 0; }
.filerow b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.filerow code {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%;
}

/* ============================= pricing ============================ */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.plan { background: var(--paper); padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; position: relative; }
.plan.feature { background: var(--panel); }
.plan.feature::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--blue);
}

.plan-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.plan-price b { font-size: clamp(34px, 4.6vw, 50px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.plan-price span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.plan-sub { font-size: 13.5px; color: var(--ink-2); margin-bottom: 24px; min-height: 3em; line-height: 1.5; }

.plan ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.plan li .icon { margin-top: 2px; color: var(--acid); flex-shrink: 0; }
.plan li.off { color: var(--ink-3); }
.plan li.off .icon { color: var(--ink-3); }
.plan .plan-cta { margin-top: auto; }
.plan .plan-cta .btn { width: 100%; justify-content: center; }

/* =========================== responsive =========================== */

@media (max-width: 860px) {
  .field-row { grid-template-columns: 1fr; }
  .drawer-in { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .tab { padding: 11px 12px; font-size: 10px; }
  .who-txt span { max-width: 18ch; }
}