/* Orqely identity. Brand values are custom properties on :root so a per-workspace theme can override them
   later without touching a rule; today's contract has no per-workspace theme. The lime signal sits only on
   ink (13.90:1; 1.18:1 on paper); where the signal touches the light page it is --orq-signal-on-paper
   (5.48:1 on paper, AA for text). */
:root {
  color-scheme: light dark;
  --orq-ink: #121613;
  --orq-paper: #f2f3ee;
  --orq-signal: #c4f135;
  --orq-signal-on-paper: #4f6b00;
  --color-page: var(--orq-paper);
  --color-text: var(--orq-ink);
  --color-bar: var(--orq-ink);
  --color-bar-text: var(--orq-paper);
  --color-bar-muted: #b3b5b1;
  --color-bar-edge: transparent;
  --color-signal: var(--orq-signal);
  --color-focus: var(--orq-signal-on-paper);
  /* Board surfaces. Column on page 1.2:1 (a tint, the edge does the separating); card edge 4.8:1 on the card
     and 4.0:1 on the column, so a card reads as an object in both. Muted text 6.52:1 on the card. */
  --color-column: #e4e6dd;
  --color-card: #fbfbf8;
  --color-card-edge: #6b716a;
  --color-muted: #575d56;
  --color-held: var(--orq-signal-on-paper);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #0b0e0c;
    --color-text: #e7e9e2;
    /* The bar is lifted off the page (1.21:1) and closed by an edge that reads at 3.04:1 on the page. */
    --color-bar: #1d231e;
    --color-bar-edge: #5a615b;
    --color-focus: var(--orq-signal);
    /* Dark: text 13.08:1 on the card; card edge 3.2:1 on the card and 3.6:1 on the column; muted 6.97:1;
       the signal on the card 12.19:1. */
    --color-column: #141915;
    --color-card: #1d231e;
    --color-card-edge: #6a716b;
    --color-muted: #a9aca6;
    --color-held: var(--orq-signal);
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; font: 16px/1.5 var(--font-ui); background: var(--color-page); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bar {
  display: flex; align-items: center; gap: 0.625rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  background: var(--color-bar); color: var(--color-bar-text);
  /* 2 px in both network states, so a cut or a reconnect never moves the page by a pixel. */
  border-bottom: 2px solid var(--color-bar-edge);
}
.bar :focus-visible { outline-color: var(--color-signal); }
.mark-cursor { fill: var(--color-signal); }
.name { display: block; width: auto; height: 1.125rem; flex: none; }
.net { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.8125rem/1 var(--font-ui); color: var(--color-bar-text); }
.net svg { width: 1rem; height: 1rem; flex: none; }
.net[hidden] { display: none; }
/* No network is said by the icon and the words "Sin conexión"; the bar also goes hatched with a dashed edge of
   the same 2 px, like a surface that cannot be used, without changing its height. */
.bar:has([data-net]:not([hidden])) {
  background-image: repeating-linear-gradient(-45deg, rgb(242 243 238 / 0.07) 0 2px, transparent 2px 9px);
  border-bottom-style: dashed; border-bottom-color: var(--color-bar-muted);
}
/* GA-1031: the case inbox. One column at 390 px; from 48rem the filters sit in a row. Each case is one link,
   so Tab walks the list and Enter opens it. */
#app { max-width: 64rem; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-left)); }
.title { font-size: 1.375rem; line-height: 1.2; margin: 0.5rem 0 1rem; }
.filters { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 48rem) { .filters { grid-template-columns: repeat(3, minmax(0, 14rem)); } }
.field { display: grid; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; }
.field select, .field input, #app button {
  font: inherit; font-weight: 400; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  border: 1px solid currentColor; border-radius: 0.25rem; background: transparent; color: inherit;
}
#app button { font-weight: 600; cursor: pointer; }
.cases { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.case {
  display: grid; gap: 0.25rem; padding: 0.75rem 0.5rem 0.75rem 0.75rem; color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-left: 4px solid transparent;
}
.case[data-urgency="critical"] { border-left-color: #b42318; }
.case[data-urgency="high"] { border-left-color: #b54708; }
.case:hover .case-subject { text-decoration: underline; }
.case-subject { font-weight: 600; overflow-wrap: anywhere; }
.case-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.875rem; }
.case-meta strong { color: var(--color-focus); }
.status { margin: 1rem 0; }
.more { margin-top: 1rem; width: 100%; }
.back { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0; color: inherit; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 1rem; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.body { white-space: pre-wrap; padding: 0.75rem; border-left: 2px solid currentColor; }
.history { padding-left: 1.25rem; font-size: 0.875rem; }
.assign { display: grid; gap: 0.75rem; max-width: 24rem; margin-top: 1.5rem; }

/* Board. The page never scrolls sideways: the row of columns is its own scroll container and snaps to a column,
   so at 390 px one column is read at a time and the next one peeks in at the edge. */
main { overflow-x: clip; }
.board {
  display: flex; gap: 0.75rem; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  scroll-padding-inline: max(1rem, env(safe-area-inset-left));
}
.column {
  flex: 0 0 min(82vw, 20rem); min-width: 0; scroll-snap-align: start;
  background: var(--color-column); border-radius: 0.75rem; padding: 0.75rem;
}
@media (min-width: 1100px) {
  /* Five columns fit: no scroll, no snap. */
  .board { overflow-x: visible; scroll-snap-type: none; }
  .column { flex: 1 1 0; }
}
.column h2 { margin: 0 0 0.75rem; font: 600 0.8125rem/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.column ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; min-height: 3rem; }
.card {
  position: relative; display: grid; gap: 0.125rem; min-width: 0; min-height: 2.75rem; padding: 0.625rem 2.75rem 0.625rem 0.75rem; cursor: grab; touch-action: pan-x pan-y;
  background: var(--color-card); border: 1px solid var(--color-card-edge); border-radius: 0.5rem;
  overflow-wrap: anywhere; user-select: none;
}
/* Drag handle: a 44 x 44 px touch target at the card's right edge, and the only place that takes the gesture from the
   browser. Six dots in the muted text colour (6.5:1 on the card light, 7.0:1 dark). */
.card-handle {
  position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 2.75rem; min-block-size: 2.75rem;
  touch-action: none; cursor: grab; -webkit-touch-callout: none;
}
.card-handle::before {
  content: ""; position: absolute; inset: 50% auto auto 50%; inline-size: 1rem; block-size: 1.5rem; translate: -50% -50%;
  background: radial-gradient(circle, var(--color-muted) 1.5px, transparent 2px) 0 0 / 0.5rem 0.5rem;
}
.card-id { font: 600 0.75rem/1.2 var(--font-ui); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.card-title { font-size: 0.9375rem; line-height: 1.35; }
/* Held with the keyboard: a signal-coloured 3 px edge plus a lifted shadow, so it does not depend on colour alone. */
.card[aria-grabbed="true"] {
  border-color: var(--color-held); box-shadow: 0 0 0 2px var(--color-held), 0 0.5rem 1rem rgb(0 0 0 / 0.25);
  transform: translateY(-2px);
}
.card[aria-grabbed="true"] .card-id::before { content: "Tomada · "; }
/* Dragged with the pointer: the card stays faded in its place, a lifted copy rides under the pointer, and the column
   under the pointer draws a 4 px line in the held colour where the card will land (4.85:1 on the column light,
   13.55:1 dark), with the column edged in the same colour. The line is out of flow: no card moves while it shows. */
.card.dragging { cursor: grabbing; opacity: 0.4; }
.card.card-ghost {
  position: fixed; inset: 0 auto auto 0; z-index: 10; margin: 0; pointer-events: none; cursor: grabbing;
  box-shadow: 0 0 0 2px var(--color-held), 0 0.75rem 1.5rem rgb(0 0 0 / 0.3); rotate: 1.5deg; transition: none;
}
/* The line is drawn over the copy (z-index above its 10): the pointer sits inside the copy, so under it the line would
   wash out to 1.21:1. Over the copy it reads 5.9:1 light and 12.19:1 dark against the card colour. */
.drop-marker { position: absolute; z-index: 11; inset-inline: 0; block-size: 0.25rem; border-radius: 0.125rem; background: var(--color-held); pointer-events: none; }
.column.drop-target { box-shadow: inset 0 0 0 2px var(--color-held); }
.card:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .card { transition: box-shadow 0.12s, transform 0.12s; } }
/* What the live region says about a refusal, on screen: a bar fixed at the bottom so it is in view at 390 px whatever
   column is scrolled in, in the bar's colours (text on bar 16.38:1 light, 14.36:1 dark) with a signal edge. In dark
   the bar and the card share a colour, so the card edge closes it (3.2:1 on the card). It leaves on its own, by its
   close button, by Escape or a tap elsewhere. The board always keeps room below for its last card: giving it only while the notice
   shows made the board jump 95 px under the pointer when the notice left. */
.board-notice {
  position: fixed; z-index: 20; inset-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  inset-block-end: max(1rem, env(safe-area-inset-bottom)); max-inline-size: 32rem; margin: 0 auto; padding: 0.25rem 0.25rem 0.25rem 1rem;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--color-bar); color: var(--color-bar-text); border: 1px solid var(--color-card-edge); border-inline-start: 4px solid var(--color-signal);
  border-radius: 0.5rem; box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3); font-size: 0.9375rem;
}
.board-notice[hidden] { display: none; }
.board-notice-text { flex: 1; padding-block: 0.5rem; }
.board-notice-close {
  position: relative; flex: none; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: 0.375rem;
  background: transparent; color: inherit; cursor: pointer;
}
.board-notice-close::before, .board-notice-close::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; inline-size: 1rem; block-size: 2px; background: currentColor;
  translate: -50% -50%; rotate: 45deg;
}
.board-notice-close::after { rotate: -45deg; }
.board-notice-close:focus-visible { outline-color: var(--color-signal); outline-offset: -2px; }
.board { padding-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + var(--notice-room, 5.5rem) + 1.5rem); }
[role="status"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* EXT-81: the session around the board. */
.session { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font: 500 0.8125rem/1 var(--font-ui); }
.net:not([hidden]) + .session { margin-left: 0.75rem; }
.session-ws { color: var(--color-bar-muted); }
.session button { font: inherit; color: var(--color-bar-text); background: none; border: 1px solid var(--color-bar-muted); border-radius: 4px; padding: 0.375rem 0.625rem; cursor: pointer; }
.signin { max-width: 32rem; margin: 3rem auto; padding: 0 1rem; }
.signin h1 { font-size: 1.25rem; margin: 0 0 1rem; }
.signin-error { color: var(--color-held); }
.signin-go { display: inline-block; padding: 0.625rem 1rem; background: var(--color-bar); color: var(--color-bar-text); border-radius: 4px; text-decoration: none; }