/* wordr.css — Wordr visual system for SPUPS_EDITOR.
   Central source of truth for design tokens + the two repeating components
   (category badge, status meter). Loaded on every screen. Styling only. */

:root {
  /* Surfaces */
  --wr-bg:      #eef0f2;  /* page / canvas behind panels */
  --wr-panel:   #f7f8fa;  /* row hover, subtle fills */
  --wr-panel2:  #e5e8ec;  /* topbar */
  --wr-paper:   #ffffff;  /* main surface */
  /* Text (ink is TEXT ONLY — never a surface fill) */
  --wr-text:    #17181a;
  --wr-dim:     #5b6068;
  --wr-dimmer:  #9298a2;
  /* Lines */
  --wr-border:  #d8dce2;  /* hairlines between rows */
  --wr-border2: #c3c9d2;  /* control borders, empty status squares */
  --wr-rule:    #c3c9d2;  /* dashed informational dividers */
  /* Accent — single hue, used 1–2× per screen */
  --wr-accent:      #b8451f;
  --wr-accent-soft: #f5d9cc;
  --wr-on-accent:   #ffffff;
  --wr-success:     #2d7a52;
  /* Type */
  --wr-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --wr-mono:  'JetBrains Mono', ui-monospace, monospace;
  /* Radii — near-sharp */
  --wr-radius-sm: 0px;
  --wr-radius-md: 2px;
  --wr-radius-lg: 4px;
}

/* ── Category badge (central) ─────────────────────────────────────────────
   Keyed chip: 3px colored left spine + 1px border + bold mono code. */
.cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px 4px 6px;
  border-radius: 2px;
  font: 700 0.72rem var(--wr-mono);
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.cat-CO { background: #f2e8d4; border: 1px solid #e0cfa6; border-left: 3px solid #a6721e; color: #7d5514; }
.cat-CA { background: #dde9df; border: 1px solid #bcd3c1; border-left: 3px solid #2f7a4e; color: #255f3b; }
.cat-AL { background: #dde4f1; border: 1px solid #bccbe6; border-left: 3px solid #3f5aa6; color: #33477e; }

/* ── Status meter (central) — three 9px squares + a mono status word ────── */
.wr-status-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
.wr-meter { display: inline-flex; gap: 3px; }
.wr-sq { width: 9px; height: 9px; display: inline-block; }
.wr-sq--ink   { background: var(--wr-text); }
.wr-sq--dim   { background: var(--wr-dim); }
.wr-sq--empty { border: 1px solid var(--wr-border2); }
.wr-status {
  font-family: var(--wr-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wr-status--dascrivere { color: var(--wr-dimmer); }
.wr-status--bozza      { color: var(--wr-dim); }
.wr-status--pronta     { color: var(--wr-text); font-weight: 600; }
.wr-status--approvata  {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--wr-accent);
  background: var(--wr-accent-soft);
  padding: 2px 6px;
}

/* ── Shared: custom select caret (native arrow removed) ─────────────────── */
select.wr-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0l4 6 4-6z' fill='%239298a2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  padding-right: 1.6rem;
}