/* ════════════════════════════════════════════════════════════
   ARTUR'S LAB. BASE
   Reset, document defaults, shared primitives, form controls,
   accessibility. Nothing screen-specific.

   Load order: tokens.css → base.css → app.css
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Headings get their look from classes, never from a
   section-scoped selector. Otherwise specificity silently
   overrides the type system. */
h1, h2, h3, h4{ margin: 0; font-weight: 400; }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }


/* ── Type primitives ────────────────────────────────────────── */

.t-hero{
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.035em;
}
.t-h2{
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.02em;
}
.t-h3{
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.012em;
}
.t-sm{ font-size: var(--t-sm); }
.t-dim{ color: var(--ink-2); }

/* The hardware voice: every label, tag, pin name, part number
   and timestamp on the site. */
.t-mono{
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.t-num{ font-family: var(--mono); font-variant-numeric: tabular-nums; }


/* ── Layout primitives ──────────────────────────────────────── */

.row{ display: flex; align-items: center; gap: .5rem; }
.row-b{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stack > * + *{ margin-top: var(--gap); }
.hr{ height: 1px; background: var(--rule); border: 0; margin: 0; }
.hide{ display: none !important; }
.grow{ flex: 1; min-width: 0; }
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ── Buttons ────────────────────────────────────────────────── */

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 38px; padding: .5rem .9rem;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--card);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .07em; text-transform: uppercase; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover{ border-color: var(--ink); }

.btn-primary{ background: var(--mask); border-color: var(--mask); color: var(--on-mask); }
.btn-primary:hover{ background: var(--mask-2); border-color: var(--mask-2); }

.btn-flag{ background: var(--flag); border-color: var(--flag); color: var(--on-flag); }
.btn-flag:hover{ background: var(--flag-2); border-color: var(--flag-2); }

.btn-ghost{ border-color: transparent; background: transparent; }
.btn-ghost:hover{ border-color: var(--rule-2); }

.btn-sm{ min-height: 32px; padding: .35rem .65rem; }
.btn[disabled]{ opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover{ border-color: var(--rule-2); }

/* Toggled state for like / follow. Colour alone never carries
   the meaning. The label changes too. */
.btn[aria-pressed="true"]{
  background: var(--mask); border-color: var(--mask); color: var(--on-mask);
}


/* ── Form controls ──────────────────────────────────────────── */

.field{ display: block; }
.field + .field{ margin-top: 1.15rem; }
.field > .lbl{
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.field .hint{ display: block; margin-top: .35rem; font-size: .8125rem; color: var(--ink-2); }

.input, .select, .textarea{
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-size: var(--t-body);
  line-height: 1.4;
}
.textarea{ min-height: 108px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus{
  outline: 2px solid var(--mask); outline-offset: 1px; border-color: var(--mask);
}
.input::placeholder, .textarea::placeholder{ color: var(--ink-2); opacity: .75; }
.input.mono{ font-family: var(--mono); font-size: var(--t-code); }

.select{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}


/* ── Tags ───────────────────────────────────────────────────── */

.tag{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .45rem;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
  white-space: nowrap;
}
.tag-board{ border-color: var(--mask); color: var(--mask); background: var(--mask-lo); }
.tag-ok{ border-color: var(--pad); color: var(--pad); background: var(--pad-lo); }
.tag-wait{ border-color: var(--flag); color: var(--flag); background: var(--flag-lo); }


/* ── Accessibility ──────────────────────────────────────────── */

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem;
  font-family: var(--mono); font-size: var(--t-mono);
}
.skip:focus{ left: 0; }

:focus-visible{ outline: 2px solid var(--mask); outline-offset: 2px; }

/* Visible only to screen readers. */
.sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html{ scroll-behavior: auto; }
}