/* ============================================================================
   RAWBLOCK DESIGN SYSTEM — brutalism as a design language
   Source: https://designmd.ai/chef/rawblock (MIT, @chef)
   Implemented for OMNI-PRESENCE ENGINE.

   Rules: 0 border-radius everywhere (radio = sole exception),
   0 shadows, 1/3/5px borders do all the hierarchy work, full inversion
   on hover/active, #0000FF reserved for hyperlinks only.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Color palette */
  --rb-black: #000000;
  --rb-white: #ffffff;
  --rb-link: #0000ff;
  --rb-success: #008000;
  --rb-warning: #ffa500;
  --rb-error: #ff0000;
  --rb-info: #0000ff;

  /* Semantic surfaces (light = base) */
  --rb-surface: #ffffff;            /* app background            */
  --rb-surface-inverted: #000000;   /* inverted sections         */
  --rb-sunken: #f0f0f0;             /* input fill                */
  --rb-sunken-hover: #e8e8e8;       /* input hover fill          */
  --rb-disabled-fill: #f5f5f5;      /* disabled fill (no opacity)*/
  --rb-disabled-border: #cccccc;
  --rb-text-tertiary: #808080;

  /* Ink / fill pair — components invert by swapping these */
  --rb-ink: #000000;
  --rb-fill: #ffffff;

  /* Typography families */
  --rb-font-headline: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --rb-font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rb-font-mono: "Space Mono", "Courier New", ui-monospace, monospace;

  /* Type scale */
  --rb-text-h1: 64px;
  --rb-text-h2: 48px;
  --rb-text-h3: 32px;
  --rb-text-h4: 22px;
  --rb-text-body: 16px;
  --rb-text-small: 14px;
  --rb-text-tiny: 12px;
  --rb-text-mono: 15px;

  /* Spacing scale (base 8px, intentionally irregular usage) */
  --rb-sp-1: 4px;
  --rb-sp-2: 8px;
  --rb-sp-3: 16px;
  --rb-sp-4: 24px;
  --rb-sp-5: 40px;
  --rb-sp-6: 64px;
  --rb-sp-7: 80px;
  --rb-sp-8: 120px;

  /* Borders replace shadows entirely */
  --rb-border-thin: 1px solid var(--rb-ink);
  --rb-border-thick: 3px solid var(--rb-ink);
  --rb-border-heavy: 5px solid var(--rb-ink);

  /* Radius: none. No exceptions (radio buttons use their own circle). */
  --rb-radius: 0px;

  --rb-max-width: 1280px;
}

/* Dark == full inversion of the base surface */
[data-theme="dark"] {
  --rb-surface: #000000;
  --rb-surface-inverted: #ffffff;
  --rb-sunken: #0d0d0d;
  --rb-sunken-hover: #1c1c1c;
  --rb-disabled-fill: #161616;
  --rb-disabled-border: #404040;
  --rb-text-tertiary: #8a8a8a;
  --rb-ink: #ffffff;
  --rb-fill: #000000;
}

/* ---------------------------------------------------------------------------
   2. BASE / RESET
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: var(--rb-radius) !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rb-surface);
  color: var(--rb-ink);
  font-family: var(--rb-font-body);
  font-size: var(--rb-text-body);
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

/* Sharp edges, no shadows, no smoothing — even on media */
img,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--rb-font-headline);
  font-weight: 400;
  margin: 0 0 var(--rb-sp-3);
  text-wrap: balance;
}

h1 {
  font-size: var(--rb-text-h1);
  line-height: 1;
}
h2 {
  font-size: var(--rb-text-h2);
  line-height: 1.05;
}
h3 {
  font-size: var(--rb-text-h3);
  line-height: 1.1;
}

h4 {
  font-family: var(--rb-font-body);
  font-size: var(--rb-text-h4);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--rb-sp-3);
}

p {
  margin: 0 0 var(--rb-sp-3);
}

small,
.rb-small {
  font-size: var(--rb-text-small);
  line-height: 1.5;
}

.rb-tiny {
  font-size: var(--rb-text-tiny);
  line-height: 1.4;
}

code,
kbd,
samp,
pre,
.rb-mono {
  font-family: var(--rb-font-mono);
  font-size: var(--rb-text-mono);
  line-height: 1.5;
}

pre {
  margin: 0;
  padding: var(--rb-sp-3);
  background: var(--rb-sunken);
  border: var(--rb-border-thick);
  overflow: auto;
  white-space: pre;
}

/* #0000FF is reserved for hyperlinks and nothing else */
a {
  color: var(--rb-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover {
  color: var(--rb-ink);
}

/* ---------------------------------------------------------------------------
   4. BUTTONS
   Primary / Secondary / Ghost / Destructive · sm/md/lg · disabled
   --------------------------------------------------------------------------- */
.rb-btn,
button.rb-btn,
input.rb-btn[type="button"],
input.rb-btn[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-sp-2);
  height: 44px;
  padding: 10px 24px;
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--rb-fill);
  color: var(--rb-ink);
  border: var(--rb-border-thick);
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: none;
}

/* Primary — black fill, white text; hover = full inversion */
.rb-btn--primary {
  background: var(--rb-ink);
  color: var(--rb-fill);
}
.rb-btn--primary:hover {
  background: var(--rb-fill);
  color: var(--rb-ink);
}
.rb-btn--primary:active {
  background: var(--rb-ink);
  color: var(--rb-fill);
  border-width: 5px;
}

/* Secondary — white fill, black text; hover = full inversion */
.rb-btn--secondary:hover {
  background: var(--rb-ink);
  color: var(--rb-fill);
}
.rb-btn--secondary:active {
  border-width: 5px;
}

/* Ghost — transparent, underlined, borderless; hover blue */
.rb-btn--ghost {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-left: var(--rb-sp-2);
  padding-right: var(--rb-sp-2);
}
.rb-btn--ghost:hover {
  color: var(--rb-link);
  background: transparent;
}
.rb-btn--ghost:active {
  border-width: 0;
}

/* Destructive — red fill, white text, 3px black border; hover black/red */
.rb-btn--destructive {
  background: var(--rb-error);
  color: var(--rb-white);
  border-color: var(--rb-black);
}
.rb-btn--destructive:hover {
  background: var(--rb-black);
  color: var(--rb-error);
}
.rb-btn--destructive:active {
  border-width: 5px;
}

/* Sizes: (padding, font-size, height) */
.rb-btn--sm {
  height: 32px;
  padding: 6px 16px;
  font-size: 12px;
}
.rb-btn--lg {
  height: 56px;
  padding: 16px 40px;
  font-size: 18px;
}

/* Disabled — grey fill + grey border, never opacity */
.rb-btn:disabled,
.rb-btn[disabled],
.rb-btn.is-disabled {
  background: var(--rb-disabled-fill);
  color: var(--rb-text-tertiary);
  border-color: var(--rb-disabled-border);
  cursor: not-allowed;
  text-decoration: none;
}
.rb-btn:disabled:hover,
.rb-btn[disabled]:hover {
  background: var(--rb-disabled-fill);
  color: var(--rb-text-tertiary);
}

/* ---------------------------------------------------------------------------
   5. CARDS — borders instead of elevation
   --------------------------------------------------------------------------- */
.rb-card {
  background: var(--rb-fill);
  color: var(--rb-ink);
  border: var(--rb-border-thick);
  padding: var(--rb-sp-4);
}
.rb-card--elevated {
  border: var(--rb-border-heavy); /* heavier border = more importance */
}
.rb-card__title {
  font-family: var(--rb-font-headline);
  font-weight: 400;
  font-size: var(--rb-text-h3);
  line-height: 1.1;
  margin: 0 0 var(--rb-sp-2);
}
/* Inverted section/card */
.rb-card--inverted,
.rb-inverted {
  background: var(--rb-surface-inverted);
  color: var(--rb-surface);
  border-color: var(--rb-surface-inverted);
}

/* ---------------------------------------------------------------------------
   6. INPUTS — sunken fill, Space Mono, thick borders
   --------------------------------------------------------------------------- */
.rb-field {
  margin-bottom: var(--rb-sp-3);
}

.rb-label {
  display: block;
  font-family: var(--rb-font-headline);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--rb-ink);
}

.rb-input,
.rb-textarea,
.rb-select,
input.rb-input,
textarea.rb-textarea,
select.rb-select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--rb-sunken);
  color: var(--rb-ink);
  border: var(--rb-border-thick);
  border-radius: 0;
  font-family: var(--rb-font-mono);
  font-size: var(--rb-text-mono);
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.rb-input::placeholder,
.rb-textarea::placeholder {
  color: var(--rb-text-tertiary);
}
.rb-input:hover,
.rb-textarea:hover,
.rb-select:hover {
  background: var(--rb-sunken-hover);
}
.rb-input:focus,
.rb-textarea:focus,
.rb-select:focus {
  border-width: 5px;
  padding: 8px 10px; /* hold the box steady when the border thickens */
  background: var(--rb-sunken);
}
.rb-input.is-error,
.rb-textarea.is-error {
  border-color: var(--rb-error);
}
.rb-input:disabled,
.rb-textarea:disabled,
.rb-select:disabled {
  background: var(--rb-disabled-fill);
  border-color: var(--rb-disabled-border);
  color: var(--rb-text-tertiary);
  cursor: not-allowed;
}
/* Native select needs a raw indicator — a text-only caret */
.rb-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--rb-ink) 50%),
    linear-gradient(135deg, var(--rb-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.rb-help {
  font-family: var(--rb-font-body);
  font-size: var(--rb-text-tiny);
  line-height: 1.4;
  margin-top: 4px;
  color: var(--rb-ink);
}
.rb-help.is-error {
  color: var(--rb-error);
}

/* ---------------------------------------------------------------------------
   7. CHIPS — filter chips + status chips
   --------------------------------------------------------------------------- */
.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--rb-fill);
  color: var(--rb-ink);
  border: 2px solid var(--rb-ink);
  border-radius: 0;
  font-family: var(--rb-font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
button.rb-chip,
input.rb-chip {
  cursor: pointer;
}
/* Active filter chip = inversion */
button.rb-chip:hover {
  text-decoration: underline;
}
.rb-chip.is-active,
.rb-chip[aria-pressed="true"] {
  background: var(--rb-ink);
  color: var(--rb-fill);
}

/* Status chips — 2px respective-color border, 11px semibold */
.rb-chip--status {
  padding: 2px 10px;
  font-size: 11px;
}
.rb-chip--success {
  background: var(--rb-white);
  color: var(--rb-success);
  border-color: var(--rb-success);
}
.rb-chip--warning {
  background: var(--rb-white);
  color: var(--rb-warning);
  border-color: var(--rb-warning);
}
.rb-chip--error {
  background: var(--rb-white);
  color: var(--rb-error);
  border-color: var(--rb-error);
}
.rb-chip--info {
  background: var(--rb-white);
  color: var(--rb-info);
  border-color: var(--rb-info);
}
[data-theme="dark"] .rb-chip--success,
[data-theme="dark"] .rb-chip--warning,
[data-theme="dark"] .rb-chip--error,
[data-theme="dark"] .rb-chip--info {
  background: var(--rb-black);
}

/* ---------------------------------------------------------------------------
   8. LISTS — 3px dividers, underline hover, full-width inverted active
   --------------------------------------------------------------------------- */
.rb-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--rb-sp-3);
  font-size: var(--rb-text-body);
}
.rb-list__item {
  padding: 12px 0;
  border-bottom: var(--rb-border-thick);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rb-sp-3);
}
.rb-list__item:first-child {
  border-top: var(--rb-border-thick);
}
.rb-list__item:hover {
  text-decoration: underline;
}
.rb-list__item.is-active {
  background: var(--rb-ink);
  color: var(--rb-fill);
  padding-left: var(--rb-sp-3);
  padding-right: var(--rb-sp-3);
  margin-left: calc(-1 * var(--rb-sp-3));
  margin-right: calc(-1 * var(--rb-sp-3));
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   9. CHECKBOXES + RADIOS — 20px, 3px border, square (radio = circle)
   --------------------------------------------------------------------------- */
.rb-checkrow {
  display: flex;
  align-items: center;
  gap: var(--rb-sp-2);
  margin-bottom: var(--rb-sp-2);
  cursor: pointer;
  font-size: var(--rb-text-body);
}
.rb-check,
.rb-radio {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: var(--rb-fill);
  border: var(--rb-border-thick);
  border-radius: 0;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  outline: none;
}
.rb-radio {
  border-radius: 50% !important; /* the one documented exception */
}
.rb-check:focus-visible,
.rb-radio:focus-visible {
  border-width: 5px;
}
/* Checked checkbox: black fill, white 3px-stroke tick */
.rb-check:checked {
  background: var(--rb-ink);
}
.rb-check:checked::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 3px solid var(--rb-fill);
  border-bottom: 3px solid var(--rb-fill);
  transform: translateY(-1px) rotate(-45deg);
}
/* Selected radio: 10px black inner dot */
.rb-radio:checked {
  background: var(--rb-fill);
}
.rb-radio:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--rb-ink);
  border-radius: 50% !important;
}
.rb-check:disabled,
.rb-radio:disabled {
  background: var(--rb-disabled-fill);
  border-color: var(--rb-disabled-border);
  cursor: not-allowed;
}
.rb-checkrow:has(> :disabled) {
  color: var(--rb-text-tertiary);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   10. TOOLTIPS — inverted block, Space Mono, adjacent, no arrow, no shadow
   --------------------------------------------------------------------------- */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 0px); /* directly adjacent, no arrow/gap */
  display: none;
  max-width: 260px;
  padding: 8px 12px;
  background: var(--rb-black);
  color: var(--rb-white);
  border: 0;
  font-family: var(--rb-font-mono);
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  z-index: 80;
  pointer-events: none;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  display: block;
}

/* ---------------------------------------------------------------------------
   11. TABLES (system extension — thick borders, no shading tricks)
   --------------------------------------------------------------------------- */
.rb-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--rb-border-thick);
  background: var(--rb-fill);
  color: var(--rb-ink);
  font-size: var(--rb-text-body);
}
.rb-table th,
.rb-table td {
  border: var(--rb-border-thick);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.rb-table th {
  background: var(--rb-ink);
  color: var(--rb-fill);
  font-family: var(--rb-font-headline);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.rb-table td {
  font-family: var(--rb-font-mono);
  font-size: var(--rb-text-mono);
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   12. LAYOUT UTILITIES (spacing irregularity encouraged)
   --------------------------------------------------------------------------- */
.rb-shell {
  max-width: var(--rb-max-width);
  margin: 0 auto;
  padding-left: var(--rb-sp-4);
  padding-right: var(--rb-sp-4);
}
.rb-stack > * + * {
  margin-top: var(--rb-sp-3);
}
.rb-stack-lg > * + * {
  margin-top: var(--rb-sp-5);
}
.rb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--rb-sp-3);
}
.rb-grid > * {
  grid-column: span 12;
}
@media (min-width: 720px) {
  .rb-grid-2 > * { grid-column: span 6; }
  .rb-grid-3 > * { grid-column: span 4; }
  .rb-grid-4 > * { grid-column: span 3; }
  .rb-grid-6 > * { grid-column: span 2; }
}
.rb-rule {
  border: 0;
  border-top: var(--rb-border-heavy);
  margin: var(--rb-sp-5) 0;
}
.rb-uppercase {
  text-transform: uppercase;
  letter-spacing: 2px;
}
.rb-tracking {
  letter-spacing: 1px;
}
.rb-txt-success { color: var(--rb-success); }
.rb-txt-warning { color: var(--rb-warning); }
.rb-txt-error { color: var(--rb-error); }
.rb-txt-info { color: var(--rb-info); }

/* Raw marquee pipeline strip */
.rb-strip {
  display: flex;
  flex-wrap: wrap;
  border: var(--rb-border-heavy);
}
.rb-strip__cell {
  padding: 10px 16px;
  border-right: var(--rb-border-thick);
  border-bottom: var(--rb-border-thick);
  font-family: var(--rb-font-headline);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1 1 auto;
  white-space: nowrap;
}
.rb-strip__cell:nth-child(even) {
  background: var(--rb-ink);
  color: var(--rb-fill);
}
.rb-strip__cell:last-child {
  border-right: 0;
}