/* Governata Translations.
   A tool for people who do not write code, so: plain words, generous type, and
   colour used only to say how urgent something is. Nothing loads from anywhere
   else — this has to work inside a network that may not reach a CDN. */

/* An element given a display of its own beats the browser's own [hidden] rule,
   which is how a hidden sidebar and a dialog that showed on load both got
   through. One rule here rather than one per element, so the next thing given
   `hidden` does not need remembering. */
[hidden] { display: none !important; }

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --border: #e3e8ef;
  --border-strong: #cbd3de;
  --text: #101828;
  --text-dim: #4d5866;
  --text-faint: #8894a5;

  --brand: #2f6fed;
  /* Text on a filled brand button. Dark mode lightens the blue for legibility
     against a dark page, and white on that light blue is barely readable, so
     the label flips instead. */
  --on-brand: #fff;
  --brand-bg: #eaf1fe;
  --dark: #16202e;

  --miss: #b7791f;
  --miss-bg: #fdf6e6;
  --miss-edge: #f0dcae;
  --edit: #2f6fed;
  --edit-bg: #eaf1fe;
  --edit-edge: #c3d8fb;
  --ok: #1a7f4b;
  --ok-bg: #e9f6ee;
  --ok-edge: #b6e2c8;
  --bad: #c0392b;
  --bad-bg: #fdecea;
  --bad-edge: #f3bab4;
  --quiet: #46586f;
  --quiet-bg: #eef1f6;
  --quiet-edge: #ccd6e3;

  --r: 10px;
  --r-sm: 7px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141a; --surface: #171d25; --surface-2: #1f2731;
    --border: #2a323d; --border-strong: #3a444f;
    --text: #e8ecf1; --text-dim: #a6b1bf; --text-faint: #74808f;
    --brand: #6ba1ff; --brand-bg: #172234; --dark: #0d1219;
    --on-brand: #0b1220;
    --miss: #e0a53c; --miss-bg: #33290f; --miss-edge: #55441c;
    --edit: #6ba1ff; --edit-bg: #172234; --edit-edge: #274063;
    --ok: #5fc98b; --ok-bg: #12301f; --ok-edge: #1f5236;
    --bad: #ff8a7a; --bad-bg: #3a1c18; --bad-edge: #5d2a24;
    --quiet: #9fb0c6; --quiet-bg: #1b222c; --quiet-edge: #313d4c;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}

/* ---------- chrome ---------- */

.chrome {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 22px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.chrome-left, .chrome-right { display: flex; align-items: center; gap: 14px; }
.logo { height: 28px; width: auto; display: block; }
.brand { font-size: 17px; font-weight: 660; letter-spacing: -.02em; }
.divider { width: 1px; height: 26px; background: var(--border); }
.workspace { display: flex; flex-direction: column; line-height: 1.25; }
.workspace-label { font-size: 9.5px; font-weight: 680; letter-spacing: .12em; color: var(--text-faint); }
.workspace-name { font-size: 14px; font-weight: 620; }
.saved { font-size: 13px; color: var(--ok); white-space: nowrap; }
.saved.is-dirty { color: var(--edit); }

/* ---------- layout ---------- */

.shell { display: flex; align-items: stretch; min-height: calc(100vh - 51px); }
.sidebar {
  width: 264px; flex: none; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
/* The bottom padding clears the floating counter, which is fixed and would
   otherwise sit on top of the last row's button. */
.main { flex: 1; padding: 24px 28px 104px; min-width: 0; }

.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 18px 10px;
}
.sidebar-title { font-size: 10.5px; font-weight: 680; letter-spacing: .11em; color: var(--text-faint); flex: 1; }
.sidebar-count {
  font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-dim);
}
.sidebar-body { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.sidebar-foot { border-top: 1px solid var(--border); padding: 14px 18px 20px; }
.sidebar-section {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 680; letter-spacing: .11em;
  color: var(--text-faint);
}
.sidebar-foot .sidebar-section:not(:first-child) { margin-top: 16px; }
.export-row { display: flex; gap: 6px; }
.sidebar-note { margin: 14px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }

.repo-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: none; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: 13.5px; color: var(--text);
  cursor: pointer; text-align: left;
}
.repo-item:hover { background: var(--surface-2); }
.repo-item.active { background: var(--brand-bg); color: var(--brand); font-weight: 570; }
.repo-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-badge { font-size: 11px; color: var(--text-faint); }
.repo-item.active .repo-badge { color: var(--brand); }
.repo-gap { font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--miss-bg); color: var(--miss); }

/* ---------- buttons ---------- */

.btn {
  font: inherit; font-size: 13.5px; font-weight: 520; padding: 7px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sm { font-size: 12.5px; padding: 5px 11px; }
.btn.block { width: 100%; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { filter: brightness(1.07); background: var(--brand); }
.btn-dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-dark:hover { filter: brightness(1.5); background: var(--dark); }
.icon-btn {
  border: none; background: none; font-size: 22px; line-height: 1;
  color: var(--text-faint); cursor: pointer; padding: 0 4px;
}
.icon-btn:hover { color: var(--text); }

/* ---------- workspace header ---------- */

.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.eyebrow { margin: 0; font-size: 10.5px; font-weight: 680; letter-spacing: .12em; color: var(--text-faint); }
.title { font-size: 27px; font-weight: 680; margin: 4px 0 5px; letter-spacing: -.025em; }
.subtitle { margin: 0; font-size: 14px; color: var(--text-dim); }

.tabs { display: flex; gap: 5px; margin: 20px 0 14px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 13.5px; padding: 8px 15px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--text-dim); display: flex; align-items: center; gap: 8px;
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.active { background: var(--brand-bg); color: var(--brand); font-weight: 580; }
.tab-count { font-size: 11px; font-weight: 660; padding: 1px 7px; border-radius: 9px; background: var(--miss-bg); color: var(--miss); }
.tab-count.quiet { background: var(--surface-2); color: var(--text-faint); }

.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.search, select {
  font: inherit; font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
}
.search { flex: 1; min-width: 220px; }
.search::placeholder { color: var(--text-faint); }

/* ---------- table ---------- */

.table-wrap { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  text-align: left; font-size: 10.5px; font-weight: 660; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.keycell { width: 24%; }
td.en, td.ar { width: 32%; }
td.status { width: 110px; }

.key { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); word-break: break-all; }
.where { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.module { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); color: var(--text-dim); }
.tokens { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.token { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: var(--miss-bg); color: var(--miss); border: 1px solid var(--miss-edge); }

textarea {
  width: 100%; font: inherit; font-size: 14.5px; line-height: 1.55;
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); resize: vertical; min-height: 52px;
}
textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
textarea::placeholder { color: var(--text-faint); }
textarea.changed { border-color: var(--edit); background: var(--edit-bg); }
textarea.problem { border-color: var(--bad); background: var(--bad-bg); }
textarea:disabled { background: var(--surface-2); cursor: not-allowed; }

/* Destructive confirmations look destructive. */
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-brand); }
.btn-danger:hover { filter: brightness(.94); }

/* Arabic renders smaller than Latin at the same point size, and this is a tool
   whose whole job is reading Arabic. A dedicated stack and a size bump make it
   legible rather than merely present. */
td.ar textarea, .cart-before[dir="rtl"], .cart-after[dir="rtl"] {
  font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", serif;
  font-size: 1.05rem;
  line-height: 1.8;
}

.pill {
  font-size: 11px; font-weight: 640; padding: 2px 8px; border-radius: 18px;
  white-space: nowrap; border: 1px solid transparent; display: inline-block;
}
.pill.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-edge); }
.pill.miss { color: var(--miss); background: var(--miss-bg); border-color: var(--miss-edge); }
.pill.quiet { color: var(--quiet); background: var(--quiet-bg); border-color: var(--quiet-edge); }
.pill.edit { color: var(--edit); background: var(--edit-bg); border-color: var(--edit-edge); }
.pill.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-edge); }
a.pill { text-decoration: none; }

.warn { margin: 6px 0 0; font-size: 12.5px; color: var(--bad); }

/* ---------- notices, empty ---------- */

.notice { padding: 12px 15px; border-radius: var(--r); margin-bottom: 14px; font-size: 13.5px; border: 1px solid transparent; }
.notice.info { color: var(--text-dim); background: var(--surface-2); border-color: var(--border); }
.notice.warn-box { color: var(--miss); background: var(--miss-bg); border-color: var(--miss-edge); }
.notice.bad-box { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-edge); }
.notice.brand-box { color: var(--brand); background: var(--brand-bg); border-color: var(--edit-edge); }
.notice ul { margin: 8px 0 0; padding-left: 18px; }
.notice a { color: inherit; }

.empty { padding: 46px 24px; text-align: center; color: var(--text-faint); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r); }
.empty strong { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 6px; }
.loading { color: var(--text-faint); padding: 34px 0; }

.foot-legend {
  display: flex; align-items: center; gap: 16px; margin-top: 14px;
  font-size: 12.5px; color: var(--text-faint);
}
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.legend-dot.edit { background: var(--edit); }
.legend-dot.miss { background: var(--miss); }
.foot-count { margin-left: auto; }

/* ---------- sign in ---------- */

.signin { max-width: 540px; margin: 56px auto; padding: 40px 36px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.signin-mark { height: 56px; width: auto; display: block; margin: 0 auto 22px; }
.signin h2 { font-size: 21px; font-weight: 660; margin: 0 0 10px; letter-spacing: -.02em; }
.signin p { margin: 0 auto 20px; color: var(--text-dim); max-width: 44ch; }
.signin .step { margin: 16px 0 6px; font-weight: 560; color: var(--text); }
.code {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 4px;
  font-family: var(--mono); font-size: 26px; font-weight: 660; letter-spacing: .08em;
  padding: 12px 20px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border-strong);
}
.signin .foot { font-size: 12.5px; color: var(--text-faint); margin-top: 16px; }

/* ---------- cart ---------- */

.cart-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border: none; border-radius: 28px;
  background: var(--brand); color: var(--on-brand); font: inherit; font-size: 14px; font-weight: 560;
  cursor: pointer; box-shadow: 0 6px 22px rgba(47,111,237,.35);
}
.cart-fab-count {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw; z-index: 45;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(16,24,40,.14);
  display: flex; flex-direction: column;
}
.cart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.cart-title { font-size: 17px; font-weight: 650; margin: 0; }
.cart-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }
.cart-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.cart-foot { display: flex; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--border); }
.cart-foot .btn-primary { flex: 1; }

.cart-group { margin-bottom: 18px; }
.cart-group-undo {
  margin-left: auto; padding: 2px 8px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.cart-group-undo:hover { color: var(--bad); border-color: var(--bad); }
.cart-group-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 11px; font-weight: 680; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.cart-item { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.cart-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cart-item-key { font-family: var(--mono); font-size: 11px; color: var(--text-faint); flex: 1; word-break: break-all; }
.cart-before, .cart-after { font-size: 13.5px; padding: 4px 8px; border-radius: 5px; margin-top: 4px; }
.cart-before { color: var(--text-faint); background: var(--surface-2); text-decoration: line-through; }
.cart-after { color: var(--text); background: var(--edit-bg); }

/* ---------- dialog, toast ---------- */

.overlay { position: fixed; inset: 0; background: rgba(12,18,28,.46); display: flex;
  align-items: center; justify-content: center; padding: 24px; z-index: 60; }
.dialog { background: var(--surface); border-radius: var(--r); max-width: 560px; width: 100%;
  max-height: 82vh; overflow-y: auto; padding: 22px 24px; box-shadow: 0 14px 44px rgba(0,0,0,.3); }
.dialog h3 { font-size: 18px; font-weight: 650; margin: 0 0 12px; }
.dialog-body p { margin: 0 0 11px; }
.dialog-body ul { margin: 0 0 11px; padding-left: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70;
  padding: 12px 20px; border-radius: var(--r); font-size: 14px;
  background: var(--dark); color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.3); max-width: 80vw;
}
.toast.bad { background: var(--bad); }
.toast.ok { background: var(--ok); }

/* Find repeats: one card per English phrase, one row per way it was
   translated. The Arabic is the thing being compared, so it gets the space and
   the size; the count and the button sit out of its way rather than beside it. */
.repeat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px;
}
.repeat-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.repeat-english { font-size: 15px; }
.repeat-meta { font-size: 12px; color: var(--text-dim); }
.repeat-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 10px 0;
}
.repeat-option + .repeat-option { border-top: 1px dashed var(--border); }
.repeat-option-text { min-width: 0; flex: 1 1 260px; }
.repeat-arabic {
  /* inline-block, not a full-width block: dir=rtl still shapes and orders the
     Arabic correctly, but the box sits at the start of the line instead of
     floating off to the far right, away from the label that describes it. */
  display: inline-block; max-width: 100%;
  font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", serif;
  font-size: 1.15rem; line-height: 1.8; word-break: break-word;
}
.repeat-where { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Page controls. Above and below the table, because a page of a thousand rows
   is a long scroll back up to reach "next". */
.pager {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); font-size: 13px; color: var(--text-dim);
}
.pager-top { margin-bottom: 10px; }
.pager-bottom { margin-top: 12px; }
.pager-count { flex: 1; min-width: 180px; }
.pager-nav { display: flex; align-items: center; gap: 4px; }
.pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.pager-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-page {
  width: 62px; height: 30px; padding: 0 6px; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.pager-of { white-space: nowrap; }
.pager-size {
  height: 30px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer;
}

/* The version picker in the top bar. Sits where the workspace name sits, at
   the same weight, because it is the same kind of fact about where you are. */
.branchpick { min-width: 0; }
.branch-select {
  font: inherit; font-size: 13.5px; font-weight: 560;
  max-width: 260px; padding: 2px 4px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text); cursor: pointer;
}
.branch-select:hover { border-color: var(--border-strong); background: var(--surface-2); }
.branch-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.branch-select:disabled { opacity: .55; cursor: wait; }

.into { color: var(--text-dim); }
.warn-text { color: var(--miss); }

/* Undo, sitting under the box it belongs to. Quiet until it is needed, and it
   names the wording it would put back rather than only saying "undo". */
.undo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 4px 9px; border: 1px solid var(--edit-edge); border-radius: 999px;
  background: var(--edit-bg); color: var(--edit);
  font: inherit; font-size: 12px; cursor: pointer; max-width: 100%;
}
.undo:hover { filter: brightness(.96); }
.undo:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.undo-icon { flex: none; font-size: 13px; line-height: 1; }
.undo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The old wording, quoted inside an English sentence. Given its own quotes here
   rather than in the string, so bidi cannot move them to the wrong side. */
.undo-was { font-weight: 560; }
.undo-was::before { content: "\201C"; }
.undo-was::after { content: "\201D"; }

/* Wording already waiting in an open pull request, shown next to the box rather
   than only as a pill, so nobody retypes a fix that is already made. */
.proposed {
  margin-top: 6px; padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--edit-bg); border: 1px solid var(--edit-edge); font-size: 12.5px;
}
.proposed.clash { background: var(--bad-bg); border-color: var(--bad-edge); }
.proposed-line { display: flex; gap: 8px; align-items: baseline; }
.proposed-line + .proposed-line { margin-top: 4px; }
.proposed-pr { font-weight: 640; color: var(--brand); text-decoration: none; flex: none; }
.proposed-pr:hover { text-decoration: underline; }
.proposed-text { color: var(--text-dim); min-width: 0; word-break: break-word; }
.proposed-text[dir="rtl"] {
  font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", serif;
  font-size: 1rem;
}
.proposed-warn { margin-top: 5px; color: var(--bad); font-size: 12px; }

/* Narrow screens. The sidebar becomes a strip above the table, and the top bar
   wraps instead of pushing the sign-out button off the right edge. */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-body { max-height: 190px; }
}

@media (max-width: 620px) {
  .chrome { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; height: auto; }
  .chrome-left, .chrome-right { flex-wrap: wrap; gap: 10px; }
  .divider { display: none; }
  .main { padding: 18px 14px 104px; }
  /* Four columns do not fit; the table scrolls sideways inside its own box
     rather than making the whole page scroll. */
  table { min-width: 640px; }
  .cart { width: 100%; }
}