/* Read-only tables on a phone: one entry per row (docs/界面规范.md 五). Shared by the three sites; each base
   template loads this file last, after the page's own styles.

   Below 760px a table inside a box marked stack-table stops being columns. Each row becomes an entry:
   - first line: the tick box or number (stack-lead), the title (stack-title), the status (stack-badge);
   - under the title, its small line (stack-sub);
   - every other cell a line of its own, “label  value”: the label is the cell's data-label, the column's
     heading, hung in the left margin so that a value that wraps lines up under itself;
   - a long value (stack-wide) under its label, across the entry;
   - the links and buttons last (stack-actions).
   The label column is --stack-label wide (4em; a table with longer headings sets it on its box). The words
   of an entry start where the table's first column started on that site (--stack-pad).
   The resets inside the breakpoint are !important: the pages' own table rules are more specific (a first
   column 220px wide, a centred tick box, a hash column 430px wide) and only this file knows the table is
   stacked. On a desk screen nothing here applies but the variables. */

.stack-table { --stack-label: 4em; --stack-pad: 16px; --stack-line: #eef1f4; --stack-muted: #5e6878; }
.shell-main .stack-table { --stack-pad: var(--ui-gutter); }
/* A table inside a card's panel starts on the panel line (the same cards as in ui.css “A table inside a card”). */
.shell-main :is(.builder-section, .plan-section, .wide-form, .ledger-workspace, .ledger-history, .template-library, .question-import-card, .knowledge-review-hub, .publish-review-workbench, .relearning-flow-card) .stack-table { --stack-pad: var(--ui-panel); }
.learner-body .stack-table { --stack-pad: var(--l-gutter); }
:is(.platform-body, .office-body) .stack-table {
  --stack-pad: var(--portal-panel);
  --stack-line: #e5ebf3;
  --stack-muted: var(--portal-muted, #667085);
  --stack-label-font: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
/* Skill 权限中心: the table's rows already start on the card's inner edge. */
.skill-permission-table.stack-table { --stack-pad: 0px; }

@media (max-width: 760px) {
  .stack-table :is(table, thead) { display: block !important; width: auto !important; min-width: 0 !important; }
  /* The headings become the labels; a heading row with a “tick the whole page” box keeps only that box, its words
     12px after it like the titles after the rows' tick boxes. */
  .stack-table thead:not(:has(.stack-lead)) { display: none !important; }
  .stack-table thead tr { display: block !important; }
  .stack-table thead tr > :not(.stack-lead) { display: none !important; }
  .stack-table thead .stack-lead {
    display: flex !important; align-items: center; gap: 12px;
    width: auto !important; min-width: 0 !important; padding: 10px var(--stack-pad) !important;
    font-size: 13px; font-weight: 500; line-height: 1.5; text-align: left !important; white-space: normal !important;
  }
  .stack-table thead .stack-lead > input { margin: 0; }
  .stack-table thead .stack-lead::after { content: attr(data-label); color: var(--stack-muted); }

  /* The entries share their columns (subgrid): every title starts on one line, whatever the width of the number
     or tick box in front of it. A browser without subgrid sizes each entry's columns on its own. */
  .stack-table tbody { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; }
  .stack-table tbody > tr {
    display: grid !important; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-columns: subgrid;
    align-items: start; gap: 6px 12px; padding: 12px var(--stack-pad); border-top: 1px solid var(--stack-line); background: none;
  }
  .stack-table tbody > tr > :is(th, td) {
    display: block !important; grid-column: 1 / -1;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    padding: 0 !important; border: 0 !important; background: none !important;
    font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere;
  }
  /* The row's tint stays: a sheet that left the screen, a place still to be checked. */
  .stack-table tbody > tr:is(.is-danger, .danger-row) { background: #fff7f7; }
  .stack-table tbody > tr.location-row-pending { background: #fffaf0; }
  /* A framed box draws its own top edge, and so does a card the table opens, and so does a heading row that stays
     (a “tick the whole page” box, with its own bottom line): no second line above the first entry. No :has() here,
     so an older phone's web view leaves it out too. */
  .stack-table:is(.table-wrap, .office-table-wrap, .ledger-location-table-wrap) > table > tbody > tr:first-child,
  .ui-card > .stack-table:first-child > table > thead + tbody > tr:first-child { border-top: 0; }

  /* Label and value. The label hangs in the cell's left padding: its first line and the value's share a baseline,
     and the value's next lines start under its first. */
  .stack-table tbody > tr > [data-label]:not(.stack-wide) { padding-left: calc(var(--stack-label) + 12px) !important; }
  .stack-table tbody > tr > [data-label]::before {
    content: attr(data-label); display: inline-block; box-sizing: border-box; width: var(--stack-label);
    margin: 0 12px 0 calc(-12px - var(--stack-label));
    color: var(--stack-muted); font-family: var(--stack-label-font, inherit); font-size: 14px; font-weight: 400; line-height: 1.5;
    text-align: left; white-space: normal;
  }
  /* A cell holding a control (a switch, a tick box): the label stands level with the control's middle. */
  .stack-table tbody > tr > [data-label]:not(.stack-wide):has(input:not([type="hidden"]), select) { display: flex !important; align-items: center; }
  .stack-table tbody > tr > [data-label]:not(.stack-wide):has(input:not([type="hidden"]), select)::before { flex: none; }
  /* A long value (a question, an answer, a record's details): the label above it, the value across the entry. */
  .stack-table tbody > tr > .stack-wide::before { display: block; width: auto; margin: 0 0 2px; }

  /* The first line: tick box or number, title, status, on one baseline. */
  .stack-table tbody > tr > .stack-lead { grid-column: 1; grid-row: 1; align-self: baseline; }
  .stack-table tbody > tr > .stack-lead > input { margin: 0; vertical-align: middle; }
  /* The tick box or number is always a row's first cell, so a title or small line after one moves over a column;
     no :has() needed for that, and an older web view puts the title on the labels' line too. */
  .stack-table tbody > tr > .stack-title { grid-column: 1 / 3; grid-row: 1; align-self: baseline; font-weight: 600; }
  .stack-table tbody > tr > .stack-lead ~ .stack-title { grid-column-start: 2; }
  .stack-table tbody > tr:not(:has(> .stack-badge)) > .stack-title { grid-column-end: -1; }
  .stack-table tbody > tr > .stack-title :is(strong, b) { font-weight: inherit; }
  .stack-table tbody > tr > .stack-title :is(small, .ui-cell-sub, .table-sub) { font-weight: 400; }
  .stack-table tbody > tr > .stack-badge { grid-column: 3; grid-row: 1; align-self: baseline; justify-self: end; text-align: right !important; }
  .stack-table tbody > tr > .stack-sub { grid-column: 1 / -1; grid-row: 2; margin-top: -4px; color: var(--stack-muted); font-size: 13px; }
  .stack-table tbody > tr > .stack-lead ~ .stack-sub { grid-column-start: 2; }
  .stack-table tbody > tr > .stack-sub :is(strong, b) { font-weight: 400; }

  /* Links and buttons close the entry and wrap as a group, 12px apart like a label and its value. */
  .stack-table tbody > tr > .stack-actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .stack-table tbody > tr > .stack-actions > * { margin: 0 !important; }
  /* A row with nothing to do shows a dash in its column on a desk screen; an entry leaves it out. The template marks
     that cell stack-empty, which an older web view without :has() understands too (a separate rule: one selector it
     cannot read would drop the whole rule). */
  .stack-table tbody > tr > .stack-empty { display: none !important; }
  .stack-table tbody > tr > .stack-actions:not(:has(*)) { display: none !important; }
}