/* static/translations/translations.css · D-247 — Translations wears the Concreet look, scoped.
 *
 * Two parts:
 *   1. The Concreet skin, scoped to `.tr-skin` — the same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15),
 *      Performance → SEO, Strategy and Setup. The class sits on the board
 *      (#translationsBoard), on the legacy Translate tab's wrapper inside
 *      #panel-translate, and on the review dialog's scrim
 *      (#translationReviewScrim) — never on a tab panel or on `.setup-shell`,
 *      so the app shell keeps the app kit. The token block is the only place in
 *      this file a colour literal may appear.
 *   2. The classes the two tabs already ship (`.tr-*`, `.orch-kpi*`,
 *      `.translation-*`, `.orch-modal`), restyled on those tokens. No markup
 *      was rewritten and no string changed.
 *
 * The review dialog keeps its layer, its scrim and its box (SSOT §7.4): the
 * skin squares and re-types what is inside the card, nothing else.
 *
 * Board: docs/design/mocks/2026-10-10-translations-dialogs-concreet-board.html
 * (built on Alex's request of 2026-10-10; he has not walked the board itself).
 * Guarded by tests/test_translations_concreet_skin.py.
 */

/* tr-skin-tokens:start */
.tr-skin {
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Archivo", "Arial Narrow", Arial, sans-serif;
  --paper-0: #FFFFFF; --paper-1: #F1F0EC; --paper-2: #E6E4DE; --paper-3: #C9C6BE; --paper-4: #B3B0A8;
  --ink-0: #0D0D0B; --ink-1: #2E2D2A; --ink-2: #3A3935; --ink-3: #65635D; --ink-4: #6E6C66; --ink-5: #8F8D86;
  --accent: #0D0D0B;
  --concreet: #17B26F; --concreet-deep: #0B7A4A; --concreet-ink: #0B7A4A; --concreet-soft: #DDF3E8;
  --good: #0B7A4A; --good-soft: #DDF3E8; --kpi-tint: #FFFFFF;
  /* aliases the app keeps beside the concreet family; inline styles on both tabs read them */
  --forest: #0B7A4A; --sage: #0B7A4A; --sage-soft: #DDF3E8;
  --green: #0B7A4A; --green-dim: #DDF3E8;
  /* the §7.6b chevron for the bulk bar's select, which ships without a wrapper */
  --tr-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2365635D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* tr-skin-tokens:end */

/* ── KPI band: a flat white strip on a --paper-3 hairline (no slab shadow:
   nothing in it is clickable, §7.15 rule 2) */
.tr-skin .orch-kpis { background: var(--paper-0); border: 1px solid var(--paper-3); border-radius: 0; }
.tr-skin .orch-kpi { border-right-color: var(--paper-2); }
.tr-skin .orch-kpi-label {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-meta); color: var(--ink-3);
}
.tr-skin .orch-kpi-num { font-weight: 800; letter-spacing: -.02em; color: var(--ink-0); }
.tr-skin .orch-kpi.empty .orch-kpi-num { font-weight: 800; color: var(--ink-3); }
.tr-skin .orch-kpi-context, .tr-skin .orch-kpi.empty .orch-kpi-context { color: var(--ink-3); }
.tr-skin .orch-kpi.warning .orch-kpi-context { color: var(--ink-1); }

/* ── header row: language chips are square labels, dots stay round */
.tr-skin .tr-header-pill, .tr-skin .tr-header-cost, .tr-skin .tr-cluster-pill {
  border-radius: 0; background: var(--paper-2); color: var(--ink-1);
}
.tr-skin .tr-header-pill { font-weight: 600; }
.tr-skin .tr-header-pill:hover, .tr-skin .tr-cluster-pill:hover { background: var(--paper-2); color: var(--ink-0); }
.tr-skin .tr-header-pill-source, .tr-skin .tr-header-pill.tr-header-pill-source:hover { background: var(--ink-0); color: var(--paper-0); }
.tr-skin .tr-header-dot-bad, .tr-skin .tr-board .tr-col-warn { background: var(--bad); }
.tr-skin .tr-header-dot-good { background: var(--concreet-deep); }
.tr-skin .tr-header-count, .tr-skin .tr-header-arrow { color: var(--ink-3); }
.tr-skin .tr-cluster-pill-none, .tr-skin .tr-cluster-pill-none:hover { background: transparent; color: var(--ink-4); }
.tr-skin .tr-cluster-pill-ditto { color: var(--ink-4); }

/* ── the matrix: one flat white panel, uppercase column heads */
.tr-skin .tr-board-scroll { background: var(--paper-0); border: 1px solid var(--paper-3); border-radius: 0; box-shadow: none; }
.tr-skin .tr-board th, .tr-skin .tr-board .tr-col-lang {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-meta); color: var(--ink-3); border-bottom: 1px solid var(--paper-3);
}
.tr-skin .tr-board td { border-bottom-color: var(--paper-2); }
.tr-skin .tr-row-cluster-break > td { border-top-color: var(--paper-3); }
.tr-skin .tr-board .tr-col-lang-source { background: var(--paper-1); }
.tr-skin .tr-col-source-tag { border-radius: 0; background: var(--ink-0); color: var(--paper-0); }
.tr-skin .tr-row:hover, .tr-skin .tr-cell:hover:not(.tr-cell-native):not(.tr-cell-unsupported) { background: var(--paper-1); }
.tr-skin .tr-title { font-weight: 700; color: var(--ink-0); }
.tr-skin .tr-title-sub, .tr-skin .tr-row-link { color: var(--ink-3); }
/* a ticked row is the current action: ink, not green (§0.1). The mark is an
   inset shadow on the checkbox cell, so the row's box does not change (§7.5). */
.tr-skin .tr-row-selected, .tr-skin .tr-row-selected:hover { background: var(--paper-1); }
.tr-skin .tr-row-selected > .tr-td-check { box-shadow: inset 3px 0 0 var(--ink-0); }
.tr-skin .tr-board .tr-td-check input[type="checkbox"], .tr-skin .tr-board .tr-col-check input[type="checkbox"],
.tr-skin input[type=checkbox], .tr-skin input[type=radio] { accent-color: var(--ink-0); }

/* ── cells. Step dots stay round (a state mark, not a slab). White never sits
   on --concreet (2.75:1, §7.15 rule 1): a done step and the native tick take
   --concreet-deep, which carries white at 5.4:1. */
.tr-skin .tr-native-badge { border-radius: 0; background: var(--concreet-soft); color: var(--concreet-ink); font-weight: 700; }
.tr-skin .tr-native-check { background: var(--concreet-deep); color: var(--paper-0); }
.tr-skin .tr-step-pending { background: var(--paper-0); color: var(--ink-4); border-color: var(--paper-4); }
.tr-skin .tr-step-current { background: var(--paper-0); color: var(--ink-0); border-color: var(--ink-0); box-shadow: none; }
.tr-skin .tr-step-done { background: var(--concreet-deep); border-color: var(--concreet-deep); color: var(--paper-0); }
.tr-skin .tr-connector-done { background: var(--concreet-deep); }
.tr-skin .tr-step-failed { background: var(--bad); border-color: var(--bad); color: var(--paper-0); }
.tr-skin .tr-label { font-family: var(--sans); font-weight: 600; letter-spacing: .04em; color: var(--ink-4); }
.tr-skin .tr-label.active { color: var(--ink-0); font-weight: 700; }
.tr-skin .tr-label.failed, .tr-skin .tr-err-note { color: var(--bad); }
.tr-skin .tr-open-link { color: var(--ink-1); }
.tr-skin .tr-none-dot { color: var(--ink-4); }

/* ── buttons: shape and voice change, hierarchy does not (the Setup lesson,
   D-241 J.1). A filled button stays an ink fill, an outline stays an outline. */
.tr-skin .tr-btn, .tr-skin .tr-bulkbar-btn, .tr-skin .account-btn, .tr-skin .btn, .tr-skin .toolbar-btn {
  border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
  font-family: var(--sans); box-shadow: none;
}
.tr-skin .tr-btn.ghost { color: var(--ink-1); border-color: var(--paper-4); }
.tr-skin .tr-btn.ghost:hover:not(:disabled) { background: var(--paper-1); color: var(--ink-0); border-color: var(--ink-0); }
.tr-skin .tr-btn.danger { color: var(--bad); border-color: var(--bad); background: var(--paper-0); }
.tr-skin .tr-btn.danger:hover:not(:disabled) { background: var(--bad-soft); }
.tr-skin .tr-btn:focus-visible, .tr-skin .tr-bulkbar-btn:focus-visible, .tr-skin .tr-bulkbar-link:focus-visible,
.tr-skin .account-btn:focus-visible, .tr-skin .btn:focus-visible, .tr-skin .toolbar-btn:focus-visible,
.tr-skin .orch-modal-close:focus-visible, .tr-skin input[type=checkbox]:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ── bulk bar: an ink slab, square, flat. While a run is in flight it moves to
   the soft warn ground with ink text (white on --warn measured 3.3:1). */
.tr-skin .tr-bulkbar { border-radius: 0; box-shadow: none; background: var(--ink-0); color: var(--paper-0); }
.tr-skin .tr-bulkbar-label { font-weight: 700; letter-spacing: .06em; font-size: var(--fs-meta); color: var(--paper-2); }
.tr-skin .tr-bulkbar-link { color: var(--paper-2); }
.tr-skin .tr-bulkbar-btn { background: var(--paper-0); color: var(--ink-0); }
.tr-skin .tr-bulkbar-running { background: var(--warn-soft); color: var(--ink-0); border: 1px solid var(--warn); }
.tr-skin .tr-bulkbar-running .tr-bulkbar-btn.danger { background: var(--paper-0); color: var(--ink-0); border: 1px solid var(--ink-0); }
.tr-skin .tr-bulkbar-btn.danger:hover { background: var(--paper-1); }
#translationsBoard.tr-skin select.tr-bulkbar-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--paper-0); border: 1px solid var(--paper-4); border-radius: 0; color: var(--ink-0); font-family: var(--sans);
  padding-right: calc(var(--sp-3) + 18px);
  background-image: var(--tr-chev); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 14px;
}
#translationsBoard.tr-skin select.tr-bulkbar-select:focus { border-color: var(--ink-2); box-shadow: var(--focus-ring); outline: none; }

/* ── footnote and the three empty states */
.tr-skin .tr-footnote { border-radius: 0; background: var(--paper-0); border: 1px solid var(--paper-3); color: var(--ink-2); }
.tr-skin .account-empty-detail { border-radius: 0; box-shadow: none; background: var(--paper-0); border: 1px solid var(--paper-3); color: var(--ink-3); }
.tr-skin .account-empty-detail > div:first-child { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }

/* ── review dialog (#translationReviewScrim): §7.4's scrim, layer and box are
   untouched; the card is square on an ink line, flat */
.tr-skin .orch-modal { border-radius: 0; border: 1px solid var(--ink-0); box-shadow: none; background: var(--paper-0); font-family: var(--sans); }
.tr-skin .orch-modal header h2 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink-0); }
.tr-skin .orch-modal header p { color: var(--ink-3); }
.tr-skin .orch-modal .orch-modal-close { border-radius: 0; background: var(--paper-0); border-color: var(--paper-4); color: var(--ink-1); }
.tr-skin .orch-modal .orch-modal-close:hover { background: var(--paper-1); color: var(--ink-0); }
.tr-skin .orch-modal-body [style*="font:600 11px"] { font-family: var(--sans) !important; font-weight: 700 !important; }

/* ── legacy inline-styled corners (the review dialog's two reading panes, its
   notes, the Translate tab's review pane). No token reaches an inline style
   and this change rewrites no markup; 50 % / 999px marks stay round. */
.tr-skin [style*="border-radius"]:not([style*="50%"]):not([style*="999"]):not([style*="99px"]) { border-radius: 0 !important; }
.tr-skin code, .tr-skin pre { border-radius: 0; font-family: var(--mono); }

/* ── the legacy Translate tab (/translate). Its filled button stays the ink
   fill it had: this skin introduces no green button (hierarchy unchanged). */
.tr-skin .btn:not(.btn-primary) { background: var(--paper-0); color: var(--ink-0); border: 1px solid var(--ink-0); }
.tr-skin .btn:not(.btn-primary):hover { background: var(--paper-1); }
.tr-skin .btn.btn-pill { border-radius: 0; }
.tr-skin .btn.btn-primary { background: var(--ink-0); border-color: var(--ink-0); color: var(--paper-0); }
.tr-skin .btn.btn-primary:hover:not(:disabled) { background: var(--ink-1); border-color: var(--ink-1); }
.tr-skin .translation-table th {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-meta); color: var(--ink-3); border-bottom-color: var(--paper-3);
}
.tr-skin .translation-table td { color: var(--ink-1); border-bottom-color: var(--paper-2); }
.tr-skin .translation-table tr:hover td { background: var(--paper-1); }
.tr-skin .translation-status { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-label); color: var(--ink-3); }
.tr-skin .translation-status.done { background: var(--good-soft); color: var(--good); }
.tr-skin .translation-status.published { background: var(--paper-2); color: var(--ink-1); }
.tr-skin .toolbar-btn { background: var(--paper-0); border: 1px solid var(--paper-4); color: var(--ink-1); }
.tr-skin .toolbar-btn:hover { background: var(--paper-1); border-color: var(--ink-0); color: var(--ink-0); }
.tr-skin #translateReviewPane { border-color: var(--paper-3) !important; }
.tr-skin #translateReviewPane label { font-weight: 700; letter-spacing: .06em; color: var(--ink-3) !important; }
.tr-skin #translateReviewPane summary { color: var(--ink-3) !important; }
/* fields: id-scoped past app.html's "Inputs everywhere — final sweep" rule
   (≈ 0-9-1), and !important because the review pane's fields carry an inline
   background and border */
#panel-translate .tr-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
#panel-translate .tr-skin textarea {
  background: var(--paper-0) !important; border: 1px solid var(--paper-4) !important; border-radius: 0 !important;
  color: var(--ink-0) !important; box-shadow: none; font-family: var(--sans);
}
#panel-translate .tr-skin input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
#panel-translate .tr-skin textarea:focus { border-color: var(--ink-2) !important; box-shadow: var(--focus-ring); outline: none; }
#panel-translate .tr-skin details > div { background: var(--paper-0) !important; border-color: var(--paper-3) !important; }

/* ── phone: the dialog's two reading panes stack, its actions wrap */
@media (max-width: 767px) {
  .tr-skin .orch-modal-body > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  .tr-skin .orch-modal-body > div[style*="justify-content:flex-end"] { flex-wrap: wrap; }
  .tr-skin .tr-header-count, .tr-skin .tr-header-cost { margin-left: 0; }
  .tr-skin .tr-bulkbar { flex-wrap: wrap; }
  #translationsBoard.tr-skin select.tr-bulkbar-select { min-width: 0; flex: 1 1 140px; }
}
/* the matrix table itself carries the Pipeline board's card (radius + shadow) */
.tr-skin .tr-board-scroll > .tr-board { border-radius: 0; box-shadow: none; }
/* the app's legacy aliases resolve at :root, to the app palette; inline styles
   on the Translate tab read them, so they are re-pointed at the skin's tokens */
.tr-skin { --text-muted: var(--ink-3); --text: var(--ink-1); --border: var(--paper-3); --bg: var(--paper-0); }
.tr-skin .tr-board-scroll > .tr-board { border: 0; }
/* the sticky article cell paints its own white; a ticked or hovered row tints it too */
.tr-skin .tr-row-selected > td.col-article, .tr-skin .tr-row:hover > td.col-article { background: var(--paper-1); }
/* the Translate tab's review pane: its one filled button and its heading */
.tr-skin .ws-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta); font-family: var(--sans); box-shadow: none; }
.tr-skin .ws-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tr-skin #translateReviewPane [style*="font-family:var(--serif)"] { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.tr-skin .detail-stage-status { border-radius: 0; }

/* ── judge round (JUDGE_BUILD.md J.1–J.8) */
/* J.1 · the unresolved-links note in the review dialog is inline-styled
   `--warn` text on `--warn-soft` (3.1:1, its code chips 2.7:1): ink text, same
   ground and border */
.tr-skin .orch-modal-body [style*="var(--warn-soft)"] { color: var(--ink-1) !important; }
/* J.2 · a failed cell's retry button on hover: --bad on --bad-soft is 4.3:1 */
.tr-skin .tr-btn.danger:hover:not(:disabled) { background: var(--paper-1); }
/* J.6 · the bulk bar keeps one height when a run starts (the running bar has a 1px border) */
.tr-skin .tr-bulkbar { border: 1px solid var(--ink-0); }
/* J.7 · one focus ring for links and folds too */
.tr-skin a:focus-visible, .tr-skin summary:focus-visible, .tr-skin button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* J.8 · one height for the matrix buttons (the filled one had no border, so a
   cell mixed two heights), and the dialog's close button keeps its square */
.tr-skin .tr-btn { border: 1px solid var(--ink-0); min-height: 28px; }
.tr-skin .tr-btn.ghost { border-color: var(--paper-4); }
.tr-skin .tr-btn.danger { border-color: var(--bad); }
.tr-skin .orch-modal .orch-modal-close { flex-shrink: 0; }
/* J.5 · phone: uppercase German labels are long; less tracking, so the
   Translate tab's two bar buttons stay on one line */
@media (max-width: 767px) {
  .tr-skin .btn, .tr-skin .account-btn, .tr-skin .tr-btn, .tr-skin .ws-btn { letter-spacing: .02em; }
}
.tr-skin .tr-bulkbar.tr-bulkbar-running { border-color: var(--warn); }