/* ============================================================================
   Barmaso — Purchase › China Order
   ----------------------------------------------------------------------------
   Built on Rebate's pieces (rb-*: header, figures, notes, tables); what is
   its own is here: the three file slots, the session bar, and the order
   sheet — twenty columns wide, so it scrolls inside its own frame with the
   heading row, the Barcode and the Description held in place.
   Colour carries meaning only, and never alone: red is CRITICAL, amber is
   WARNING, and the word is always written beside it.
   ============================================================================ */

.co-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.co-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.co-head-do { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-btn { display: inline-flex; align-items: center; gap: 6px; }
.co-btn svg, .co .btn svg { flex: none; }

.co-card { display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--pt-line); border-radius: 14px; background: #fff; }
.co-h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--pt-ink); }
.co-hint { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pt-slate); }
.co-label { font-size: 12.5px; font-weight: 600; color: var(--pt-slate); }
.co-field { display: grid; gap: 6px; min-width: 0; }
.co-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.co-actions .btn, .co-run { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.co-go { justify-self: start; }
.co-bad { color: #991b1b; font-weight: 600; }

/* --- Import: the three files ------------------------------------------------------------- */

.co-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-file {
  display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px;
  border: 1px dashed #cbd5e1; border-radius: 12px; background: var(--pt-bg);
  transition: border-color .15s ease, background .15s ease;
}
.co-file.is-ok { border-style: solid; border-color: #a7f3d0; background: var(--pt-green-50); }
.co-file.is-bad { border-style: solid; border-color: #fecaca; background: #fef2f2; }
.co-file-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.co-file-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--pt-slate); box-shadow: 0 0 0 1px var(--pt-line); }
.co-file.is-ok .co-file-icon { color: var(--pt-green-700); box-shadow: 0 0 0 1px #a7f3d0; }
.co-file.is-bad .co-file-icon { color: #b91c1c; box-shadow: 0 0 0 1px #fecaca; }
.co-file-titles { min-width: 0; }
.co-file-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--pt-ink); }
.co-file-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--pt-muted); overflow-wrap: anywhere; }
.co-file-state { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pt-slate); overflow-wrap: anywhere; }
.co-file-state.is-ok { color: var(--pt-green-700); }
.co-file-state.is-bad { color: #991b1b; font-weight: 600; }
.co-file-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; justify-self: start; min-height: 40px; }
.co-modes { justify-self: start; }
.co-name { max-width: 420px; }

/* --- the saved sessions ------------------------------------------------------------------ */

.co-session-list { display: grid; margin: 0; padding: 0; list-style: none; }
.co-session-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pt-line-soft); }
.co-session-item:first-child { border-top: 0; padding-top: 0; }
.co-session-text { flex: 1 1 auto; min-width: 0; }
.co-session-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--pt-ink); overflow-wrap: anywhere; }
.co-session-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--pt-muted); }
.co-session-do { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.co-delete { color: #b91c1c; }

/* --- the session bar --------------------------------------------------------------------- */

.co-session { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: #fff; }
.co-session-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; flex: 0 1 auto; }
.co-session-title { font-size: 15px; color: var(--pt-ink); overflow-wrap: anywhere; }
.co-session-back { display: inline-flex; align-items: center; min-height: 32px; }

/* Where the groups come from, said on the import: green when it can be read, red when it cannot. */
.co-stock { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; font-weight: 600; }
.co-stock.is-ok { background: var(--pt-green-50); color: var(--pt-green-700); }
.co-stock.is-bad { background: #fef2f2; color: #991b1b; }
.co-session-meta { margin: 0; flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--pt-muted); }
.co-differ { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* --- the counters ------------------------------------------------------------------------ */

.co-counts { background: #fff; }
.co-figure.is-critical .rb-figure-value { color: #b91c1c; }
.co-figure.is-warning .rb-figure-value { color: #b45309; }
.co-figure.is-order .rb-figure-value { color: var(--pt-green-700); }

.co-tools { gap: 8px 12px; }
.co-supplier { flex: 0 1 220px; min-width: 0; }
.co-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; font-weight: 500; color: var(--pt-ink); cursor: pointer; }
.co-shown { margin: 0 0 8px; font-size: 12.5px; color: var(--pt-muted); }
.co-more { justify-self: center; margin-top: 10px; display: flex; margin-inline: auto; }
.co-moq-status { justify-self: start; }

/* --- the sheet --------------------------------------------------------------------------- */

/* One scroll, the page's: the frame scrolls sideways only and grows with its page of lines (pager.js). */
.co-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border: 1px solid var(--pt-line); border-radius: 12px; background: #fff; scroll-margin-top: 80px; }
.co-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--pt-ink); }
.co-table th { border-bottom: 1px solid var(--pt-line); background: #f8fafc; font-size: 12px; font-weight: 600; color: var(--pt-muted); text-align: left; }
.co-table td { border-bottom: 1px solid var(--pt-line-soft); vertical-align: middle; background: #fff; }
.co-table tbody tr:last-child td { border-bottom: 0; }
.co-table .co-n { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-strong { font-weight: 700; }
.co-table th {
  position: sticky; top: 0; z-index: 2; padding: 9px 10px; white-space: normal; min-width: 72px;
  line-height: 1.3; vertical-align: bottom;
}
.co-table td { padding: 8px 10px; white-space: nowrap; }
/* Barcode and Description stay where they are while the figures scroll past
   them: fixed widths, so the second knows where the first ends. */
.co-table { --co-code: 120px; --co-desc: 260px; }
.co-table .co-c-barcode {
  position: sticky; left: 0; z-index: 1;
  width: var(--co-code); min-width: var(--co-code); max-width: var(--co-code);
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.co-table .co-c-description {
  position: sticky; left: var(--co-code); z-index: 1;
  width: var(--co-desc); min-width: var(--co-desc); max-width: var(--co-desc);
  white-space: normal; line-height: 1.4; box-shadow: 2px 0 0 var(--pt-line);
}
.co-table thead .co-c-barcode, .co-table thead .co-c-description { z-index: 3; background: #f8fafc; }
/* A group's line: its name, and the count that opens its members. */
.co-desc-text { display: block; }
.co-group-title { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #1d4ed8; }
.co-group-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; min-height: 24px; padding: 0 9px;
  border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; color: #1d4ed8;
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.co-group-badge:hover { background: #dbeafe; }
.co-group-badge:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.co-table .co-c-notes { min-width: 200px; white-space: normal; }
.co-table .co-c-status { white-space: nowrap; color: var(--pt-slate); }
.co-row.is-critical td { background: #fef2f2; }
.co-row.is-warning td { background: #fffbeb; }
.co-row.is-critical .co-c-barcode { box-shadow: inset 3px 0 0 #dc2626; }
.co-row.is-warning .co-c-barcode { box-shadow: inset 3px 0 0 #d97706; }
.co-row.is-link { cursor: pointer; }
.co-row.is-link:hover td, .co-row.is-link:focus-visible td { background: #f1f5f9; }
.co-row.is-link:focus-visible { outline: 2px solid var(--pt-green-600); outline-offset: -2px; }

.co-urg { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.co-urg.is-critical { background: #dc2626; color: #fff; }
.co-urg.is-warning { background: #fde68a; color: #78350f; }
.co-urg.is-ok { background: var(--pt-green-50); color: var(--pt-green-700); }
.co-urg.is-none { color: var(--pt-muted); }

.co-moq, .co-final { width: 80px; min-height: 34px; padding: 4px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.co-final { font-weight: 700; }
/* A Final Order Qty typed by hand, not the formula's: marked, and its title says the formula's. */
.co-final.is-set, td.co-c-finalQty.is-set { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.co-note { width: 100%; min-width: 180px; min-height: 34px; padding: 4px 8px; }
.co-members .co-rep td { background: var(--pt-green-50); font-weight: 600; }

/* --- Parameters -------------------------------------------------------------------------- */

.co-params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.co-param { font-variant-numeric: tabular-nums; }
.co-default { font-size: 12px; color: var(--pt-muted); }

/* --- narrower ---------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .co-files { grid-template-columns: minmax(0, 1fr); }
  .co-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .co-page { gap: 14px; }
  .co-card { padding: 14px; border-radius: 12px; }
  .co-head-do { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-head-do .btn { justify-content: center; min-height: 44px; }
  .co-head-do > :only-child { grid-column: 1 / -1; }
  .co-modes { display: flex; justify-self: stretch; }
  .co-modes .rb-seg-btn { flex: 1 1 0; justify-content: center; text-align: center; min-height: 40px; }
  .co-name { max-width: none; }
  .co-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .co-actions:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-go { justify-self: stretch; text-align: center; }
  .co-file-btn { justify-self: stretch; }

  .co-session { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .co-session-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; flex: none; }
  .co-session-pick .co-label { grid-column: 1 / -1; }
  .co-session-item { flex-wrap: wrap; }
  .co-session-do { width: 100%; }
  .co-session-do .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .co-session-do .ucx-icon-btn { width: 40px; height: 40px; }

  .co-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-counts .rb-figure + .rb-figure { border-left: 0; }
  .co-counts .rb-figure:nth-child(even) { border-left: 1px solid var(--pt-line-soft); }
  .co-counts .rb-figure:nth-child(n + 3) { border-top: 1px solid var(--pt-line-soft); }
  .co-counts .rb-figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .co-tools { display: grid; grid-template-columns: minmax(0, 1fr); }
  .co-tools .rb-search, .co-supplier { flex: none; width: 100%; }

  .co-table { font-size: 12.5px; }
  .co-table th { padding: 8px; min-width: 64px; }
  .co-table td { padding: 7px 8px; }
  .co-table { --co-code: 104px; --co-desc: 170px; }
  .co-table td.co-c-barcode { padding-inline: 8px 6px; font-size: 11.5px; letter-spacing: -0.01em; }
  .co-table .co-c-description { font-size: 12px; }
}

/* A phone held upright: two held columns would leave no room for the figures,
   so the Barcode alone stays. */
@media (max-width: 480px) {
  .co-table { --co-desc: 160px; }
  .co-table .co-c-description { position: static; box-shadow: none; }
  .co-table .co-c-barcode { box-shadow: 2px 0 0 var(--pt-line); }
  .co-row.is-critical .co-c-barcode { box-shadow: inset 3px 0 0 #dc2626, 2px 0 0 var(--pt-line); }
  .co-row.is-warning .co-c-barcode { box-shadow: inset 3px 0 0 #d97706, 2px 0 0 var(--pt-line); }


  .co-params { grid-template-columns: minmax(0, 1fr); }
}

/* --- the pager (pager.js), shared by every long table ------------------------------------- */

/* A line on another page (auto-pager.js): kept in the table, not shown. */
tr.pg-off { display: none !important; }

.pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.pg-range { font-size: 13px; color: var(--pt-slate); font-variant-numeric: tabular-nums; }
.pg-pages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pg-btn {
  min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--pt-line); border-radius: 9px; background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--pt-ink); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .12s ease, border-color .12s ease;
}
.pg-btn:hover:not(:disabled) { background: var(--pt-line-soft); }
.pg-btn.is-on { border-color: var(--pt-ink); background: var(--pt-ink); color: #fff; }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-btn:focus-visible { outline: 2px solid var(--pt-green-600); outline-offset: 2px; }
.pg-arrow { font-size: 16px; }
.pg-gap { min-width: 20px; text-align: center; color: var(--pt-muted); }
.pg-size { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pt-slate); }
.pg-size-select { width: auto; min-height: 36px; padding: 4px 28px 4px 10px; }

@media (max-width: 720px) {
  .pg { justify-content: center; }
  .pg-range { order: 2; width: 100%; text-align: center; }
  .pg-pages { order: 1; justify-content: center; }
  .pg-size { order: 3; }
  .pg-btn { min-width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------------------
   The ordering sheet, compact (2026-11-01): less above the rows, smaller
   boxes, lower rows — more of the sheet on the screen.
   --------------------------------------------------------------------------- */
.co-flash {
  margin: 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  animation: co-flash-out .4s ease 8s forwards;
}
@keyframes co-flash-out { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; } }
@media (prefers-reduced-motion: reduce) { .co-flash { animation-duration: 0s; } }

.co-order { gap: 10px; }
.co-order .rb-title { font-size: 20px; }
.co-order .co-top { gap: 6px; }
.co-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.co-order .co-session { flex: 1 1 420px; padding: 6px 12px; gap: 2px 12px; border-radius: 10px; }
.co-order .co-session-title { font-size: 14px; }
.co-order .co-session-back { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.co-order .co-session-meta { font-size: 12px; line-height: 1.4; }
.co-order .co-counts { display: flex; flex-wrap: wrap; flex: 1 1 380px; gap: 0; padding: 0; border-radius: 10px; }
.co-order .co-counts .rb-figure { flex: 1 1 0; min-width: 80px; min-height: 0; padding: 6px 12px; gap: 0; }
.co-order .co-counts .rb-figure-label { font-size: 11.5px; }
.co-order .co-counts .rb-figure-value { font-size: 18px; line-height: 1.3; }
.co-order .co-tools .field-input { min-height: 36px; height: 36px; padding: 4px 10px; font-size: 14px; }
.co-order .co-tools .co-toggle { font-size: 13.5px; }
.co-order .co-table { font-size: 13px; }
.co-order .co-table th { padding: 6px 8px; font-size: 11.5px; }
.co-order .co-table td { padding: 3px 8px; }
.co-order .co-moq, .co-order .co-final, .co-order .co-note { min-height: 28px; height: 28px; padding: 2px 6px; font-size: 13px; border-radius: 6px; }
.co-order .co-moq, .co-order .co-final { width: 64px; }
.co-order .co-note { min-width: 140px; }
.co-order .co-urg { min-height: 20px; padding: 0 7px; font-size: 11px; }
@media (max-width: 640px) {
  .co-order .co-counts .rb-figure { flex: 1 1 45%; }
}

/* The China sheet on one screen (2026-11-02): a fixed layout, headings that
   wrap, a cell that never spills into the next. Below 1280px of room it
   scrolls sideways as before; the box (⛶) gives it the whole window. */
.co-table { table-layout: fixed; width: 100%; min-width: 1280px; font-size: 12.5px; --co-code: 84px; --co-desc: 190px; }
.co-table th { white-space: normal; line-height: 1.25; padding: 8px 4px; font-size: 11.5px; vertical-align: bottom; overflow-wrap: anywhere; }
.co-table td { padding: 7px 4px; overflow: hidden; text-overflow: ellipsis; }
.co-table .co-c-barcode { width: var(--co-code); font-size: 12px; }
.co-table .co-c-description { width: var(--co-desc); white-space: normal; line-height: 1.3; }
.co-table .co-c-status { width: 74px; white-space: normal; line-height: 1.25; }
.co-table .co-c-urgency { width: 76px; }
.co-table .co-c-below { width: 56px; }
.co-table .co-c-notes { width: 104px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.co-table .co-c-finalQty { width: 66px; }
.co-table .co-c-moq { width: 58px; }
.co-order .co-table .co-moq, .co-order .co-table .co-final, .co-order .co-table .co-note { width: 100%; min-width: 0; padding: 2px 4px; font-size: 12.5px; }

.co-full-btn { white-space: nowrap; }
.co-full {
  width: calc(100vw - 16px); height: calc(100vh - 16px); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 14px; background: var(--surface, #fff);
  box-shadow: var(--shadow-lg);
}
.co-full[open] { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.co-full-head { display: flex; align-items: center; gap: 14px; }
.co-full-title { font-family: var(--font-display); font-size: 16px; white-space: nowrap; }
.co-full-head .co-counts { flex: 1; margin: 0; }
.co-full-close { margin-left: auto; flex: none; }
.co-full-body { flex: 1; min-height: 0; overflow: auto; }
.co-full .co-wrap { max-height: none !important; overflow: visible !important; }
.co-full .co-table { min-width: 1180px; }
.co-full .co-table thead th { position: sticky; top: 0; z-index: 3; }

/* --- Reading the sheet (2026-11-02) --------------------------------------------
   Headings on two short lines; the three bands — what sold, what is held,
   what to order — tinted and ruled apart; figures to the right, where digits
   line up; the Final Qty the eye lands on; a needing row marked by its edge
   and a light wash rather than a whole pink line. */
.co-table th { white-space: pre-line; text-align: left; color: var(--ink-soft, #475569); }
.co-table th.co-n { text-align: right; }
.co-table .co-n { text-align: right; padding-right: 8px; }
.co-table td.co-c-urgency, .co-table th.co-c-urgency, .co-table td.co-c-below, .co-table th.co-c-below { text-align: center; }
.co-table thead th.co-b-sales { background: #f3f7ff; }
.co-table thead th.co-b-stock { background: #f3faf6; }
.co-table thead th.co-b-order { background: #fff8ee; }
.co-table .co-b-start { border-left: 2px solid var(--border, #e3e8ef); }
.co-table td.co-c-finalQty, .co-table th.co-c-finalQty { background: #fff3df; }
.co-table td.co-c-finalQty { font-weight: 700; color: #7c2d12; }
.co-row.is-critical td { background: #fff7f7; }
.co-row.is-warning td { background: #fffcf2; }
.co-row.is-critical td.co-c-finalQty, .co-row.is-warning td.co-c-finalQty { background: #ffeccc; }
.co-table tbody tr:hover td { background: #f5f8fc; }
.co-table td.co-c-status { color: var(--ink-faint, #64748b); font-size: 11.5px; }
.co-table td.co-c-days { color: var(--ink-soft, #475569); }
.co-tools { align-items: center; }
.co-full-btn { margin-left: auto; }
.co-table thead th, .co-table thead th.co-n { white-space: pre-line; overflow: hidden; }
/* Each figure its own width, so no heading breaks inside a word and no
   number is cut short; the product name takes what is left. */
.co-table { min-width: 1300px; --co-code: 84px; --co-desc: 200px; }
.co-full .co-table { min-width: 1300px; --co-desc: 210px; }
.co-table thead th, .co-table thead th.co-n { overflow-wrap: normal; word-break: keep-all; font-size: 11px; padding: 8px 6px; }
.co-table .co-c-p1, .co-table .co-c-p2, .co-table .co-c-p3 { width: 54px; }
.co-table .co-c-shortSales, .co-table .co-c-shortDays { width: 48px; }
.co-table .co-c-ads { width: 52px; }
.co-table .co-c-status { width: 64px; }
.co-table .co-c-current, .co-table .co-c-total, .co-table .co-c-days { width: 58px; }
.co-table .co-c-onway { width: 52px; }
.co-table .co-c-urgency { width: 76px; }
.co-table .co-c-reorder, .co-table .co-c-raw { width: 66px; }
.co-table .co-c-below { width: 58px; }
.co-table .co-c-moq { width: 58px; }
.co-table .co-c-finalQty { width: 62px; }
.co-table .co-c-days { width: 66px; }
.co-table .co-c-status { width: 70px; }
.co-table { --co-desc: 186px; }
.co-full .co-table { --co-desc: 192px; }
.co-table .co-c-notes { width: 90px; }
.co-table { min-width: 1250px; --co-desc: 180px; }

/* A heading sorts the sheet (2026-11-02): pressed once biggest (or A) first, twice the other way, three times back. */
.co-table th .co-sort {
  display: inline-flex; align-items: flex-end; gap: 3px; max-width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; white-space: pre-line; cursor: pointer;
}
.co-table th.co-n .co-sort { flex-direction: row-reverse; float: right; }
.co-sort-label { min-width: 0; }
.co-sort-mark { flex: none; font-size: 9px; line-height: 1.6; color: #cbd5e1; }
.co-table th .co-sort:hover .co-sort-mark { color: var(--ink-soft, #475569); }
.co-table th.is-sorted { color: var(--accent-deep, #047857); }
.co-table th.is-sorted .co-sort-mark { color: var(--accent-deep, #047857); }
.co-table th .co-sort:focus-visible { outline: 2px solid var(--accent, #059669); outline-offset: 2px; border-radius: 4px; }