/* ============================================================
   Mail Admin design system — the factory site's token set and
   components (sites/factory/app.css), trimmed to what this app
   uses. Dense, calm. Light and dark from one token set.
   ============================================================ */

:root {
  /* Neutrals: warm stone */
  --bg:            #f4f4f2;
  --bg-raised:     #ffffff;
  --bg-sunken:     #ecece9;
  --surface:       #ffffff;
  --border:        #dcdcd7;
  --border-strong: #c6c6bf;
  --text:          #24241f;
  --text-soft:     #5b5b53;
  --text-faint:    #8b8b81;

  /* Brand: deep teal */
  --accent:        #0f766e;
  --accent-strong: #0b5d57;
  --accent-soft:   #e2f1ef;
  --accent-text:   #ffffff;

  /* Status */
  --ok:        #15803d;  --ok-soft:     #e3f2e7;
  --warn:      #b45309;  --warn-soft:   #fdf0dd;
  --danger:    #b91c1c;  --danger-soft: #fdeaea;
  --info:      #1d4ed8;  --info-soft:   #e7edfd;

  --shadow-sm: 0 1px 2px rgba(30, 30, 20, .06);
  --shadow-md: 0 4px 16px rgba(30, 30, 20, .10), 0 1px 3px rgba(30,30,20,.07);
  --shadow-lg: 0 18px 50px rgba(30, 30, 20, .22);

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --sidebar-w: 228px;
  --topbar-h: 52px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* The design system is px-sized and tuned for ~1400-1700px viewports. On big
   monitors the same layout renders tiny with dead margins, and users
   compensate with browser zoom — so do it for them: step the root zoom so the
   EFFECTIVE width always lands back around 1600px. Media queries evaluate
   against the unzoomed viewport, so this can't loop. Unlike browser zoom, CSS
   zoom does NOT shrink the viewport, so vh/vw lengths render zoom× too large;
   every viewport-unit rule below divides by --zoom to land back on the real
   viewport. Keep the two in lockstep. */
:root { --zoom: 1; }
@media (min-width: 2000px) { html { zoom: 1.25; } :root { --zoom: 1.25; } }
@media (min-width: 2400px) { html { zoom: 1.5; }  :root { --zoom: 1.5; } }
@media (min-width: 2800px) { html { zoom: 1.75; } :root { --zoom: 1.75; } }
@media (min-width: 3200px) { html { zoom: 2; }    :root { --zoom: 2; } }

[data-theme="dark"] {
  --bg:            #16181a;
  --bg-raised:     #1e2124;
  --bg-sunken:     #101214;
  --surface:       #1e2124;
  --border:        #30343a;
  --border-strong: #40454d;
  --text:          #e8e8e4;
  --text-soft:     #a3a49c;
  --text-faint:    #71726b;

  --accent:        #2bb3a3;
  --accent-strong: #43cdbd;
  --accent-soft:   #14332f;
  --accent-text:   #06211e;

  --ok:      #4ade80;  --ok-soft:     #143221;
  --warn:    #fbbf24;  --warn-soft:   #362a10;
  --danger:  #f87171;  --danger-soft: #3b1a1a;
  --info:    #93b4f8;  --info-soft:   #1a2440;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
}

/* ---------- accent presets (picked in the Account dialog) ---------- */

[data-accent="ocean"] {
  --accent: #1d4ed8; --accent-strong: #1e40af; --accent-soft: #e4ebfc; --accent-text: #ffffff;
}
[data-theme="dark"][data-accent="ocean"] {
  --accent: #7aa5f8; --accent-strong: #a3c0fa; --accent-soft: #16233f; --accent-text: #0a1226;
}
[data-accent="violet"] {
  --accent: #6d28d9; --accent-strong: #5b21b6; --accent-soft: #efe8fc; --accent-text: #ffffff;
}
[data-theme="dark"][data-accent="violet"] {
  --accent: #b195f5; --accent-strong: #c7b2f8; --accent-soft: #251740; --accent-text: #150a2e;
}
[data-accent="magenta"] {
  --accent: #be185d; --accent-strong: #9d174d; --accent-soft: #fbe7f0; --accent-text: #ffffff;
}
[data-theme="dark"][data-accent="magenta"] {
  --accent: #f27ab0; --accent-strong: #f5a3c6; --accent-soft: #3b1226; --accent-text: #2a0a18;
}
[data-accent="ember"] {
  --accent: #c2410c; --accent-strong: #9a3412; --accent-soft: #fcece2; --accent-text: #ffffff;
}
[data-theme="dark"][data-accent="ember"] {
  --accent: #f59e6c; --accent-strong: #f8bd97; --accent-soft: #3a1d0d; --accent-text: #2a1204;
}
[data-accent="forest"] {
  --accent: #15803d; --accent-strong: #166534; --accent-soft: #e4f2e8; --accent-text: #ffffff;
}
[data-theme="dark"][data-accent="forest"] {
  --accent: #5fce8a; --accent-strong: #8adcaa; --accent-soft: #12301d; --accent-text: #06210f;
}

.accent-dots { display: flex; gap: 10px; }
.accent-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  cursor: pointer; padding: 0;
}
.accent-dot.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-raised), 0 0 0 4px var(--text); }
.accent-dot[data-accent="teal"]    { background: #0f766e; }
.accent-dot[data-accent="ocean"]   { background: #1d4ed8; }
.accent-dot[data-accent="violet"]  { background: #6d28d9; }
.accent-dot[data-accent="magenta"] { background: #be185d; }
.accent-dot[data-accent="ember"]   { background: #c2410c; }
.accent-dot[data-accent="forest"]  { background: #15803d; }

/* ---------- base ---------- */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* ---------- app shell ---------- */

.app-root { height: 100%; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: calc(100vh / var(--zoom)); }

.sidebar {
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.brand img, .brand svg { width: 30px; height: 30px; border-radius: 8px; }
.brand .brand-name { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; line-height: 1.25; }

.nav { padding: 10px 8px 20px; flex: 1; }
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint);
  padding: 0 10px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 6.5px 10px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-soft);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.nav-item:hover { background: var(--bg-sunken); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600;
}
.nav-item.active svg { opacity: 1; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.topbar .page-title { font-size: 15px; font-weight: 650; }
.topbar .spacer { flex: 1; }
.userchip {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  padding: 4px 10px 4px 4px; border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-soft);
}
.userchip .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  font-size: 11px; font-weight: 700;
}
.rolepill {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent);
}

.hamburger { display: none; }

.content { flex: 1; overflow: auto; padding: 18px; }
.content-inner { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { background: var(--bg-sunken); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong)); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-soft); }
.btn.ghost:hover { background: var(--bg-sunken); color: var(--text); }
.btn.small { padding: 3.5px 8px; font-size: 12px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--text-soft); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: 11.5px; font-weight: 650; color: var(--text-soft); }
.field .req { color: var(--danger); }
.input, select.input, textarea.input {
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  width: 100%;
}
.input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; border-color: var(--accent); }
.input[readonly] { background: var(--bg-sunken); color: var(--text-soft); }
.input.num { text-align: right; font-variant-numeric: tabular-nums; }
textarea.input { resize: vertical; min-height: 56px; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.checkbox-line input { width: 15px; height: 15px; accent-color: var(--accent); }

.combo { position: relative; }
.combo .input { padding-right: 30px; }
.combo-clear {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-faint); cursor: pointer;
}
.combo-clear:hover { color: var(--text); background: var(--bg-sunken); }
.combo-clear svg { width: 13px; height: 13px; }
.combo .input:placeholder-shown + .combo-clear { display: none; }
.combo-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 3px);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 260px; overflow: auto;
  padding: 4px;
}
.combo-item { padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: 12.5px; }
.combo-item:hover, .combo-item.hi { background: var(--accent-soft); color: var(--accent); }
.combo-item .sub { font-size: 11px; color: var(--text-faint); }
.combo-item.hi .sub { color: inherit; opacity: .75; }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card .card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 650; font-size: 13.5px;
}
.card .card-body { padding: 14px 16px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-height: 88px;
}
.tile .tile-label { font-size: 11.5px; font-weight: 650; color: var(--text-soft); }
.tile .tile-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: auto; font-variant-numeric: tabular-nums; }

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
  background: var(--bg-sunken); color: var(--text-soft);
}
.badge.ok     { background: var(--ok-soft); color: var(--ok); }
.badge.warn   { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info   { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- data grid ---------- */

.grid { display: flex; flex-direction: column; min-height: 0; }
.grid-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.grid-toolbar .spacer { flex: 1; }
.searchbox { position: relative; }
.searchbox input {
  font: inherit; font-size: 12.5px;
  padding: 5.5px 9px 5.5px 28px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--bg);
  color: var(--text);
  width: 210px;
}
.searchbox svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--text-faint); pointer-events: none;
}

.table-scroll { overflow: auto; max-height: calc(100vh / var(--zoom) - 285px); }
table.dt { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
table.dt th {
  position: sticky; top: 0; z-index: 5;
  text-align: left;
  background: var(--bg-sunken);
  color: var(--text-soft);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  user-select: none;
}
table.dt th.sortable { cursor: pointer; }
table.dt th.sortable:hover { color: var(--text); }
table.dt th .arrow { font-size: 9px; margin-left: 3px; }
table.dt td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt tbody tr { cursor: default; }
table.dt tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
table.dt tbody tr.clickable { cursor: pointer; }
table.dt tbody tr:last-child td { border-bottom: 0; }

.grid-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-soft);
}
.grid-foot .spacer { flex: 1; }
.pager { display: flex; align-items: center; gap: 4px; }
.pager button {
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-soft);
  border-radius: var(--r-sm); padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer;
}
.pager button:disabled { opacity: .4; cursor: default; }
.pager .page-now { font-weight: 700; color: var(--text); padding: 0 6px; }
.grid-foot select.page-size {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft);
  border-radius: var(--r-sm); padding: 3px 6px; font: inherit; font-size: 12px; cursor: pointer;
}
/* refresh in progress: dim the rows, spin the reload icon */
.grid.busy table.dt { opacity: .45; transition: opacity .15s; }
.grid.busy .grid-refresh svg,
.grid .grid-refresh.spin svg { animation: spin .7s linear infinite; }

.empty {
  padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 13px;
}

/* ---------- drawer / modal / toast ---------- */

.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 15, 10, .40);
  backdrop-filter: blur(1.5px);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  /* 540: the widest edit-drawer footer (History/Delete/Cancel/Save) needs the
     room — anything tighter clips or wraps it. */
  width: min(540px, calc(96vw / var(--zoom)));
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: slidein .18s ease-out;
}
@keyframes slidein { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 650; font-size: 14px;
}
.drawer-head .spacer { flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.drawer-body .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-foot {
  /* wrap, don't clip: with flex-end, an overflowing row spills off the LEFT
     edge and cuts off the leftmost button */
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-bottom-left-radius: 0;
}

.modal-wrap {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  max-height: calc(86vh / var(--zoom)); display: flex; flex-direction: column;
  animation: pop .16s ease-out;
}
.modal.wide { max-width: 860px; }
.modal.danger .modal-head { color: var(--danger); }
.modal-danger-title { display: inline-flex; align-items: center; gap: 7px; }
.modal-danger-title svg { width: 17px; height: 17px; flex: none; }
@keyframes pop { from { transform: scale(.97); opacity: .5; } to { transform: none; opacity: 1; } }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 650; display: flex; align-items: center; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

.toasts {
  position: fixed; top: 14px; right: 14px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  font-size: 12.5px; font-weight: 550;
  max-width: 360px;
  animation: pop .16s ease-out;
}
.toast.error { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--ok); }

/* ---------- login ---------- */

.login-wrap {
  min-height: calc(100vh / var(--zoom));
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(700px 380px at 50% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 34px 30px 28px;
  text-align: center;
  display: flex; flex-direction: column; gap: 14px;
}
.login-card .logo { width: 52px; height: 52px; margin: 0 auto; border-radius: 13px; }
.login-card h1 { font-size: 19px; }
.login-card p { margin: 0; color: var(--text-soft); font-size: 13px; }
.login-card .btn { justify-content: center; padding: 9px 12px; font-size: 13.5px; }
.login-div { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 11.5px; }
.login-div::before, .login-div::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-note { font-size: 11.5px !important; color: var(--text-faint) !important; }
.login-code { display: flex; flex-direction: column; gap: 8px; text-align: left; }
/* display:flex above would defeat the UA's [hidden] rule — restate it. */
.login-code[hidden] { display: none; }
.login-code label { font-size: 12px; color: var(--text-soft); }
.login-code input { text-transform: uppercase; text-align: center; letter-spacing: .14em; font-family: var(--mono); }
.login-code input::placeholder { letter-spacing: normal; }

/* ---------- page head ---------- */

.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h2 { font-size: 17px; }
.page-head .crumb { color: var(--text-faint); font-size: 12.5px; }
.page-head .spacer { flex: 1; }

/* ---------- misc ---------- */

.loading { display: grid; place-items: center; padding: 50px; color: var(--text-faint); }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.muted { color: var(--text-faint); }
.mono { font-family: var(--mono); font-size: 12px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 80; width: var(--sidebar-w); height: 100vh; transform: translateX(-100%); transition: transform .18s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .hamburger { display: inline-grid; }
  .content { padding: 12px; }
  .topbar { padding: 0 10px; gap: 8px; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .userchip .userchip-name { display: none; }
}

/* ---------- history diff viewer ---------- */

.hist-block {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.hist-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--bg-sunken);
  font-size: 12px;
}
.hist-note { padding: 8px 12px; font-size: 12.5px; color: var(--text-soft); }
table.hist-diff { width: 100%; border-collapse: collapse; font-size: 12px; }
.hist-diff th {
  text-align: left; padding: 5px 12px 3px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint);
}
/* Uniform row rhythm: a fixed min-height keeps rows with EMPTY values exactly
   as tall as filled ones (an empty cell has no line box, which otherwise
   shrinks its row), and middle alignment centers the two different font sizes
   without baseline coupling. Wrapped values still grow. */
.hist-diff td { padding: 4px 12px; border-top: 1px solid var(--border); vertical-align: middle; line-height: 18px; height: 27px; word-break: break-word; }
/* NOT class "field": the generic form rule `.field { display:flex }` would
   turn the cell into a flex box, breaking table-cell border collapsing. */
.hist-diff td.hist-field { font-family: var(--mono); font-size: 11px; color: var(--text-soft); white-space: nowrap; }
.hist-diff td.before { color: var(--danger); }
.hist-diff td.after { color: var(--ok); }

.hist-diff tr.changed td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hist-diff tr.changed td.hist-field { color: var(--accent); font-weight: 700; }

/* ---------- test-environment watermark ---------- */

.test-watermark {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 200; pointer-events: none;
  padding: 4px 14px; border-radius: 99px;
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  box-shadow: var(--shadow-md);
  opacity: .92;
}
.test-chip {
  display: inline-block; vertical-align: 2px;
  margin-left: 7px; padding: 1px 6px; border-radius: 99px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
}

/* ---------- passkey manager (account dialog) ---------- */

.pk-list { display: flex; flex-direction: column; gap: 6px; }
.pk-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pk-row > svg { width: 16px; height: 16px; color: var(--text-soft); flex: none; }
.pk-row .pk-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- resizable columns ---------- */

table.dt th { overflow: hidden; text-overflow: ellipsis; }
table.dt th .col-resizer {
  position: absolute; top: 0; right: -4px;
  width: 9px; height: 100%;
  cursor: col-resize; z-index: 7;
}
table.dt th .col-resizer::after {
  content: ''; position: absolute; right: 4px; top: 18%;
  height: 64%; width: 2px; border-radius: 2px;
  background: var(--border-strong); /* always faintly visible so the drag spot is discoverable */
}
table.dt th .col-resizer:hover::after,
table.dt th .col-resizer.active::after { background: var(--accent); }