/* Standard tables; one semantic table at every width. */
.concept-std .st-grid { min-width: 0; font-variant-numeric: tabular-nums lining-nums; }
.concept-std .st-grid__frame { position: relative; min-width: 0; }
.concept-std .st-grid__box { overflow-x: auto; border-radius: 8px; }
.concept-std .st-grid--inline .st-grid__box { overflow-y: hidden; }
.concept-std .st-grid--list { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.concept-std .st-grid--list .st-grid__frame { flex: 1; min-height: 0; }
.concept-std .st-grid--list .st-grid__box { height: 100%; overflow: auto; }
.concept-std .st-grid__table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.concept-std .st-grid__table td, .concept-std .st-grid__table th { height: 32px; box-sizing: border-box; padding: 5px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; text-align: right; background: var(--st-panel); }
.concept-std .st-grid__table td:first-child, .concept-std .st-grid__table th:first-child { padding-left: 8px; text-align: left; }
.concept-std .st-grid__table thead th { height: 28px; padding-block: 0; overflow: visible; font-size: 11.5px; font-weight: bold; background: var(--st-panel-raised); }
.concept-std .st-grid--list thead th { position: sticky; top: 0; z-index: 2; }
.concept-std .st-grid__frozen { position: sticky; left: 0; z-index: 1; }
.concept-std .st-grid--list thead .st-grid__frozen { z-index: 3; }
.concept-std .st-grid__table th[aria-sort]:not([aria-sort="none"]) { color: var(--st-accent); }
.concept-std .st-grid__sort { color: inherit; background: none; border: 0; font: inherit; min-height: 0; height: 26px; padding: 0; }
/* THE TOOLBAR: views and filters as pill trays, then one group of matching buttons (Sort, Columns,
   Search, Copy · Print) that wraps as a unit, so nothing is left alone on a row. One height, one radius,
   one type size; the row gap is what keeps two rows' touch boxes from covering each other's faces. */
.concept-std .st-grid__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; min-width: 0; padding-block: 6px; }
.concept-std .st-grid__tools { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 6px; min-width: 0; }
.concept-std .st-grid__tools:empty { display: none; }
.concept-std .st-grid__export { display: contents; }
#app.concept-std .st-grid__tools .btn,
#app.concept-std ~ dialog.modal .st-grid__tools .btn {
  box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto;
  min-height: var(--st-size-control); height: var(--st-size-control); margin: 0; padding: 0 10px;
  border: 1px solid var(--st-line); border-radius: var(--st-radius-control); background: var(--st-panel); color: var(--st-text);
  font-size: 12.5px; font-weight: 650; line-height: 1; white-space: nowrap;
}
#app.concept-std .st-grid__tools .btn:hover,
#app.concept-std ~ dialog.modal .st-grid__tools .btn:hover { background: var(--st-panel-raised); border-color: var(--st-edge-ui); }
.concept-std .st-grid__controls .st-segment--filters { flex: 0 1 auto; }
.concept-std .st-grid__search { position: relative; display: flex; flex: 1 1 8rem; min-width: 0; max-width: 18rem; }
@media (max-width: 1023px) {
  .concept-std .st-grid__search { order: 1; flex-basis: 6rem; max-width: none; }
}
.concept-std .st-grid__group th { text-align: left; background: var(--st-panel-raised); }
.concept-std .st-grid__tone > :first-child { box-shadow: inset 3px 0 var(--st-accent); }
.concept-std .st-grid__tone--warn > :first-child { box-shadow: inset 3px 0 var(--st-warning); }
.concept-std .st-grid__tone--danger > :first-child { box-shadow: inset 3px 0 var(--st-danger); }
.concept-std .st-grid__muted { color: var(--st-muted); }
/* WHICH SIDE HAS MORE: a fade over the rows and a mark on the header line, on the side that has it. This was a
   solid 46 px block in the table's background, which is what made every header band look as if it stopped
   short of the card with the cells carrying on underneath. It is a shape over the table, never a shape in it,
   and a tap goes through it. */
.concept-std .st-grid__fade { position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(to left, var(--st-grid-bg), transparent); pointer-events: none; z-index: 4; }
.concept-std .st-grid__fade::after { content: '›'; position: absolute; top: 0; right: 3px; color: var(--st-accent); font-size: 18px; font-weight: 700; line-height: 26px; }
.concept-std .st-grid__fade--back { right: auto; left: 0; background: linear-gradient(to right, var(--st-grid-bg), transparent); }
.concept-std .st-grid__fade--back::after { content: '‹'; right: auto; left: 3px; }
.concept-std .st-grid__fade[hidden] { display: none; }
/* Above the table, in the colour that means "act": on a table this wide the swipe is the next thing to do. */
.concept-std .st-grid__hint { padding-bottom: 3px; color: var(--st-accent); font-size: 11.5px; line-height: 1.3; }
.concept-std .st-grid__hint[hidden] { display: none; }
/* A phone has no tooltip to read a cut name with, so the name a row starts with wraps. */
@media (pointer: coarse) and (max-width: 1023px) {
  .concept-std .st-grid__table tbody th { white-space: normal; overflow-wrap: anywhere; min-width: min(8rem, 34vw); }
  .concept-std .st-grid__table tbody th .st-flair-cell { align-items: flex-start; height: auto; }
  .concept-std .st-grid__table tbody th .st-flair-cell__label { overflow: visible; }
  .concept-std .st-grid__table tbody th .st-flair-thumb { margin-top: 1px; }
}
/* Any other cell a tap has opened (kit/table.js revealCutCell). */
.concept-std .st-grid__table .st-grid__cell--open { max-width: none; min-width: 10rem; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.concept-std .st-grid__cell--open .st-flair-cell { align-items: flex-start; height: auto; }
.concept-std .st-grid__cell--open .st-flair-cell__label { overflow: visible; white-space: normal; }
/* A cell that holds words wraps them rather than cutting through one, and takes the room the numbers leave. */
.concept-std .st-grid__table .st-grid__wrap { width: 100%; min-width: 7rem; max-width: none; white-space: normal; overflow-wrap: break-word; text-align: left; }
.concept-std .st-grid__wrap .st-flair-cell { align-items: flex-start; height: auto; }
.concept-std .st-grid__wrap .st-flair-cell__label { overflow: visible; }
.concept-std .st-grid__wrap .st-flair-thumb { margin-top: 2px; }
.concept-std .st-grid__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#app.concept-std ~ dialog.st-table-dialog { background: var(--st-panel); color: var(--st-text); border: 0; border-radius: 8px; max-width: min(480px, 95vw); }
#app.concept-std ~ dialog.st-table-dialog .st-btn {
  box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--st-size-control); height: var(--st-size-control); padding: 0 12px;
  border: 1px solid var(--st-line); border-radius: var(--st-radius-control); background: var(--st-panel-raised); color: var(--st-text);
  font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1; cursor: pointer;
}
dialog.st-table-dialog label { display: flex; gap: 8px; padding: 5px; }
@media (min-width: 1024px) {
  .concept-std .st-grid__box { border-radius: 6px; }
  .concept-std .st-grid__table td, .concept-std .st-grid__table th { height: 28px; }
  .concept-std .st-grid__table thead th { height: 27px; }
}
@media (hover: hover) and (min-width: 1024px) {
  .concept-std .st-grid__row:hover > td, .concept-std .st-grid__row:hover > th { background: var(--st-panel-raised); }
}

.concept-std .st-grid__table .st-grid__text { text-align: left; }
.concept-std .st-grid__cell--warn { color: var(--st-warning); }
.concept-std .st-grid__cell--danger { color: var(--st-danger); }
.concept-std .st-grid__cell--success { color: var(--st-success); }
.concept-std .st-grid__cell--info { color: var(--st-info); }
.concept-std .st-grid__cell--muted { color: var(--st-muted); }
.concept-std .st-grid__empty td { text-align: left; color: var(--st-muted); }
.concept-std .st-grid__more td { text-align: center; }

@media (max-width: 1023px) {
  #app.concept-std ~ dialog.st-table-dialog { position: fixed; inset: auto 0 0; margin: auto auto 0; width: min(480px, 100vw); max-width: 100vw; max-height: 80dvh; overflow-y: auto; border-radius: 8px 8px 0 0; }
}

.concept-std .st-grid { --st-grid-bg: var(--st-panel); }
.concept-std .st-grid--list { --st-grid-bg: var(--st-bg); }
.concept-std .card .st-grid,
.concept-std .st-card .st-grid { --st-grid-bg: var(--st-panel); }
.concept-std .st-grid__box { background: var(--st-grid-bg); }
.concept-std .st-grid__table td, .concept-std .st-grid__table tbody th { background: var(--st-grid-bg); }
.concept-std .st-grid__row:has(.st-grid__inline-actions) > * { height: 32px; }
.concept-std .st-grid__inline-actions { display: inline-flex; align-items: center; gap: 4px; }
.concept-std .st-grid__inline-actions > .btn { display: inline-flex; width: auto; min-height: 26px; height: 26px; }
@media (pointer: coarse) {
  .concept-std .st-grid__sort { box-sizing: content-box; padding-block: 9px; margin-block: -9px; background-clip: content-box; }
}

.concept-std .st-grid__inline-actions .contact-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.concept-std .st-grid__inline-actions .contact-actions .btn { display: inline-flex; width: auto; }

@media (pointer: coarse) {
  #app.concept-std ~ dialog.st-table-dialog .st-btn::after { content: ''; position: absolute; inset: calc(50% - var(--st-size-touch) / 2) 0; }
}

/* Compact search and single-line action cells retain the table's 32px rhythm. */
#app.concept-std .st-grid__controls input[type="search"] { box-sizing: border-box; width: 100%; height: var(--st-size-control); min-height: var(--st-size-control); padding: 0 12px; border: 1px solid var(--st-line); border-radius: var(--st-radius-control); background: var(--st-panel); font: inherit; font-size: 12.5px; }
.concept-std .st-grid__table tbody td, .concept-std .st-grid__table tbody th { height: 32px; padding-block: 3px; }
.concept-std .st-grid__table .st-actions,
.concept-std .st-grid__table .st-pane-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; gap: 4px; vertical-align: middle; }
#app.concept-std main.game-main .st-grid__table .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 26px; min-height: 26px; padding: 0 9px; background: var(--st-panel-raised); font-size: 12px; font-weight: 650; white-space: nowrap; }
#app.concept-std main.game-main .st-grid__table .btn:hover { background: var(--st-panel-3); border-color: var(--st-edge-ui); }
/* A row's buttons are never cut by the cell they sit in: at 240 px "Move down · Remove · +1" lost the last two. */
.concept-std .st-grid__table td:has(> .st-actions) { max-width: none; }
/* What stands at a colony: the buttons get a column wide enough for two and wrap for a third, so the row grows
   rather than the table running off the side. */
.concept-std [data-table-key="colony.built"] .st-grid__table td:last-child { width: 1%; min-width: min(12.5rem, 50vw); }
.concept-std [data-table-key="colony.built"] .st-grid__table .st-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
/* A catalog's names wrap rather than being cut mid-word, in every language; the sentence at the far end of the
   row runs on, because that end of the table is what the swipe is for. */
.concept-std :is([data-table-key="colony.build"], [data-table-key="colony.shipyard"]) .st-grid__table tbody th { min-width: min(13rem, 52vw); max-width: 13rem; white-space: normal; }
.concept-std :is([data-table-key="colony.build"], [data-table-key="colony.shipyard"]) tbody th .st-flair-cell { height: auto; }
.concept-std :is([data-table-key="colony.build"], [data-table-key="colony.shipyard"]) tbody th .st-flair-cell__label { overflow: visible; overflow-wrap: break-word; }
.concept-std [data-table-key="colony.build"] .st-grid__table tbody td:last-child { max-width: none; }
/* The longest button in a queue row ("Cancelar esta construção") takes a second line before it takes the table off
   the side of a 360 px phone. */
@media (max-width: 1023px) {
  #app.concept-std main.game-main :is([data-table-key="colony.buildQueue"], [data-table-key="colony.shipyardJobs"]) .st-grid__table .btn:not(.st-pane-glyph) { max-width: 9rem; height: auto; padding-block: 3px; line-height: 1.15; white-space: normal; }
}
/* On a phone the queue's row actions are marks: the words stay the button's name for anyone not reading the mark. */
@media (max-width: 1023px) {
  #app.concept-std main.game-main .st-grid__table .btn.st-pane-glyph { width: 30px; padding-inline: 0; font-size: 0; }
  .concept-std .st-pane-glyph::before { font-size: 12px; font-weight: 700; }
  .concept-std .st-pane-glyph--up::before { content: '▲'; }
  .concept-std .st-pane-glyph--down::before { content: '▼'; }
  .concept-std .st-pane-glyph--remove::before { content: '✕'; }
}
@media (pointer: coarse) {
  .concept-std .st-grid__search::after { content: ''; position: absolute; inset: calc(50% - var(--st-size-touch) / 2) 0; }
  .concept-std .st-grid__search input { position: relative; z-index: 1; }
}
.concept-std .st-grid__table .st-actions,
.concept-std .st-grid__table .st-pane-actions { margin: 0; }
#app.concept-std main.game-main .st-grid__table .btn { min-width: 0; }
#app.concept-std main.game-main .st-grid__table .btn.st-grid__about { width: 26px; padding-inline: 0; }

@media (pointer: coarse) {
  .concept-std .st-grid__sort { min-width: 26px; padding-inline: 9px; }
  /* 44 tall without a wrong target. Rows are 32 apart and faces 26 tall, so upward it stops at the
     face above; downward it runs on under the next row's button, which paints later and keeps its face.
     Insets count from inside the 1px border. */
  #app.concept-std main.game-main .st-grid__table .btn::after { inset: -7px -5px -13px; }
  #app.concept-std main.game-main .st-grid__table .btn.st-grid__about::after { inset-inline: -10px; }
  .concept-std .st-grid__table .st-actions,
  .concept-std .st-grid__table .st-pane-actions { gap: 8px; padding-inline-end: 4px; }
  .concept-std .st-grid__table td:has(.btn),
  .concept-std .st-grid__table td:has(input[type="checkbox"]) { overflow: visible; }
}

/* The Total row is the table's own surface, under one rule; its first cell is not a block of its own. */
.concept-std .st-grid__table tfoot td, .concept-std .st-grid__table tfoot th { background: var(--st-grid-bg); }
.concept-std .st-grid__table tfoot tr:first-child > * { border-top: 1px solid var(--st-line); }

/* A dark checkbox: the panel's own box under a UI edge, the action colour with a drawn tick once checked. */
.concept-std .st-grid__table input[type="checkbox"],
#app.concept-std ~ dialog.st-table-dialog input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; position: relative;
  display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin: 0; vertical-align: middle;
  border: 1px solid var(--st-edge-ui); border-radius: 4px; background: var(--st-panel-raised); cursor: pointer;
}
.concept-std .st-grid__table input[type="checkbox"]::before,
#app.concept-std ~ dialog.st-table-dialog input[type="checkbox"]::before {
  content: ''; width: 10px; height: 10px; background: var(--st-accent-ink); visibility: hidden;
  clip-path: polygon(12% 46%, 0 62%, 38% 100%, 100% 18%, 86% 4%, 37% 72%);
}
.concept-std .st-grid__table input[type="checkbox"]:checked,
#app.concept-std ~ dialog.st-table-dialog input[type="checkbox"]:checked { background: var(--st-accent); border-color: var(--st-accent); }
.concept-std .st-grid__table input[type="checkbox"]:checked::before,
#app.concept-std ~ dialog.st-table-dialog input[type="checkbox"]:checked::before { visibility: visible; }
.concept-std .st-grid__table input[type="checkbox"]:focus-visible,
#app.concept-std ~ dialog.st-table-dialog input[type="checkbox"]:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
@media (pointer: coarse) {
  .concept-std .st-grid__table input[type="checkbox"]::after { content: ''; position: absolute; inset: -9px -15px -21px; }
}
@media (forced-colors: active) {
  .concept-std .st-grid__table input[type="checkbox"]:checked,
  #app.concept-std ~ dialog.st-table-dialog input[type="checkbox"]:checked { background: Highlight; border-color: Highlight; }
  .concept-std .st-grid__table input[type="checkbox"]::before,
  #app.concept-std ~ dialog.st-table-dialog input[type="checkbox"]::before { background: HighlightText; forced-color-adjust: none; }
}