/* hausync Console — the operator back office (trust & safety, 2026-10-21).
   A developer console in hausync's skin: monochrome, system type, dense, keyboard-friendly. */
:root {
  --c-bg: #f6f6f7; --c-surface: #ffffff; --c-fill: #f0f0f2; --c-text: #0b0b0c; --c-muted: #6b6b73;
  --c-border: #e4e4e8; --c-strong: #cfcfd6; --c-primary: #000000; --c-primary-text: #ffffff;
  --c-danger: #c8211d; --c-danger-bg: #fdecec; --c-warn: #a15c00; --c-ok: #137a3a; --c-hl: #fff4c2;
  --c-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Roboto, sans-serif;
  --c-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0c0c0d; --c-surface: #161618; --c-fill: #1f1f22; --c-text: #f2f2f3; --c-muted: #9a9aa3;
    --c-border: #2a2a2e; --c-strong: #3a3a40; --c-primary: #ffffff; --c-primary-text: #000000;
    --c-danger: #ff5a52; --c-danger-bg: #3a1514; --c-hl: #3b3412;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.console { background: var(--c-bg); color: var(--c-text); font: 14px/1.45 var(--c-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); margin: 0 0 10px; font-weight: 600; }
.c-mono { font-family: var(--c-mono); font-size: 12.5px; }
.c-muted { color: var(--c-muted); font-weight: 400; }
.c-small { font-size: 12.5px; }
.c-select { user-select: all; word-break: break-all; }

.c-shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.c-side { border-right: 1px solid var(--c-border); background: var(--c-surface); padding: 16px 12px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.c-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; }
.c-brand b { font-weight: 600; }
.c-logo { display: inline-flex; width: 22px; height: 22px; }
.c-logo svg { width: 100%; height: 100%; }
.c-nav { display: flex; flex-direction: column; gap: 2px; }
.c-nav a { text-decoration: none; padding: 7px 10px; border-radius: 7px; color: var(--c-muted); }
.c-nav a:hover { background: var(--c-fill); color: var(--c-text); }
.c-nav a[aria-current="page"] { background: var(--c-fill); color: var(--c-text); font-weight: 600; }
.c-who { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.c-main { padding: 22px 26px 60px; min-width: 0; }
.c-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }

.c-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.c-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.c-col { min-width: 0; }
.c-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.c-stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; }
.c-stat-n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.c-table { width: 100%; border-collapse: collapse; }
.c-table th { text-align: left; font-weight: 500; color: var(--c-muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--c-border); }
.c-table td { padding: 8px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.c-table tr.is-danger td:first-child { box-shadow: inset 3px 0 0 var(--c-danger); }

.c-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--c-fill); font-size: 12px; font-weight: 500; }
.c-pill-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.c-state { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--c-strong); }
.c-state-open { border-color: var(--c-text); }
.c-state-in_review { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.c-state-waiting { color: var(--c-warn); border-color: currentColor; }
.c-state-resolved { color: var(--c-ok); border-color: currentColor; }

.c-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.c-facts dt { color: var(--c-muted); }
.c-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.c-next { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 7px; text-decoration: none; }
.c-next:hover { background: var(--c-fill); }
.c-next.is-danger { box-shadow: inset 3px 0 0 var(--c-danger); }

.c-report + .c-report { border-top: 1px solid var(--c-border); margin-top: 14px; padding-top: 14px; }
.c-report header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.c-note { margin: 8px 0; font-style: italic; }
.c-transcript { margin-top: 8px; border: 1px solid var(--c-border); border-radius: 8px; padding: 6px 0; background: var(--c-bg); }
.c-transcript > p { margin: 2px 10px 6px; }
.c-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; padding: 4px 10px; }
.c-line-who { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-line.is-target .c-line-who { color: var(--c-text); font-weight: 600; }
.c-line-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.c-line-at { color: var(--c-muted); }
.c-line.is-reported { background: var(--c-hl); }
.c-log { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.c-gate .c-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
.c-actions-sub { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.c-why { display: block; font-size: 12px; color: var(--c-muted); margin: -2px 0 4px 2px; }
.c-check { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 13px; }

.c-btn { font: inherit; font-weight: 500; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--c-strong); background: var(--c-surface); color: var(--c-text); cursor: pointer; text-align: left; }
.c-btn:hover:not(:disabled) { background: var(--c-fill); }
.c-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.c-btn-primary { background: var(--c-primary); color: var(--c-primary-text); border-color: var(--c-primary); }
.c-btn-primary:hover:not(:disabled) { background: var(--c-primary); opacity: 0.88; }
.c-btn-danger { color: var(--c-danger); border-color: var(--c-danger); }
.c-btn-ghost { border-color: transparent; background: transparent; padding-left: 0; color: var(--c-muted); }
.c-field { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-weight: 500; }
.c-field input, .c-field textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--c-strong); border-radius: 8px; background: var(--c-surface); color: var(--c-text); }
.c-field input:focus, .c-field textarea:focus, .c-btn:focus-visible { outline: 2px solid var(--c-text); outline-offset: 1px; }
.c-error { background: var(--c-danger-bg); color: var(--c-danger); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }

.c-auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.c-auth-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 6px; }
.c-auth-card h1 { font-size: 18px; margin-top: 10px; }
.c-auth-card .c-btn { margin-top: 14px; text-align: center; }
.c-qr { width: 200px; margin: 8px auto; background: #fff; padding: 8px; border-radius: 8px; }
.c-qr svg { width: 100%; height: auto; display: block; }

/* Users page (2026-10-24) */
.c-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; }
.c-seg a { padding: 5px 10px; text-decoration: none; color: var(--c-muted); font-size: 13px; }
.c-seg a[aria-current="page"] { background: var(--c-fill); color: var(--c-text); font-weight: 600; }
.c-legend { list-style: none; display: flex; gap: 16px; margin: 0 0 8px; padding: 0; font-size: 12.5px; color: var(--c-muted); }
.c-legend li { display: flex; align-items: center; gap: 6px; }
.c-key { width: 10px; height: 10px; border-radius: 2px; }
.c-key-people, .c-bar-people { background: var(--c-text); fill: var(--c-text); }
.c-key-houses, .c-bar-houses { background: var(--c-muted); fill: var(--c-muted); }
.c-chart { width: 100%; height: auto; display: block; }
.c-chart .c-axis { font: 8px var(--c-mono); fill: var(--c-muted); }
.c-chart .c-baseline { stroke: var(--c-strong); stroke-width: 1; }
.c-chart .c-gridline { stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 2 3; }
.c-chart .c-hit { fill: transparent; }
.c-chart g:hover .c-hit { fill: var(--c-fill); }
.c-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.c-cols .c-card { margin-bottom: 0; }
.c-cols + p { margin-top: 14px; }
.c-table-num td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.c-table-num tr:last-child td { border-bottom: 0; }

@media (max-width: 1100px) { .c-grid { grid-template-columns: minmax(0, 1fr) 300px; } .c-grid > .c-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .c-shell { grid-template-columns: 1fr; }
  .c-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; }
  .c-nav { flex-direction: row; }
  .c-who { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .c-who .c-mono { display: none; }
  .c-main { padding: 16px; }
  .c-grid, .c-stats { grid-template-columns: 1fr; }
  .c-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-table.c-table-num { display: table; }
  .c-chart .c-axis { font-size: 18px; }  /* the SVG scales down ~2x at phone width */
  .c-seg { margin-left: 0; }
  .c-table { display: block; overflow-x: auto; }
  .c-line { grid-template-columns: 1fr; gap: 0; }
}
.c-field-first { margin: 0 0 12px; }