/* Shared screen appearance for ordinary workspace sections.
   Separate tokens keep board jobs, navigation, semantic states, and printed documents intact. */
@media screen {
  #workspace {
    max-width: none;
    --workspace-surface: #EEF1F5;
    --workspace-edge: #CDD5DF;
    --workspace-rule: #E0E5EC;
    --workspace-hover: #E7ECF2;
    --workspace-field: #F4F6F9;
    --workspace-field-border: #CBD4DF;
  }
  html[data-theme="dark"] #workspace {
    --workspace-surface: #212121;
    --workspace-edge: #414141;
    --workspace-rule: #343434;
    --workspace-hover: #2c2c2c;
    --workspace-field: #1b1b1b;
    --workspace-field-border: #696969;
  }
  html[data-theme="dark"][data-theme-palette="blue"] #workspace {
    --workspace-surface: #121D2B;
    --workspace-edge: #2C3B50;
    --workspace-rule: #202C3C;
    --workspace-hover: #172435;
    --workspace-field: #142032;
    --workspace-field-border: #34445B;
  }

  /* Use the available desktop width without stretching deliberately bounded forms. */
  #workspace .today-time-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr));
    gap: 16px 22px;
    align-items: start;
  }
  #workspace .today-time-cards .hcard { min-width: 0; margin-bottom: 0; }
  #workspace .today-time-cards .hwho { min-width: 0; overflow-wrap: anywhere; }
  #workspace .today-time-cards .htable { table-layout: fixed; min-width: 600px; }
  #workspace .today-time-cards .htable th:first-child { width: 32%; }
  #workspace .today-time-cards .htable th:nth-child(2),
  #workspace .today-time-cards .htable th:nth-child(3) { width: 16%; }
  #workspace .today-time-cards .htable th:nth-child(4) { width: 22%; }
  #workspace .today-time-cards .htable th:last-child { width: 14%; }
  #workspace .today-time-cards .htable :is(th, td) { padding-left: 10px; padding-right: 10px; }
  #workspace .today-time-cards .htable :is(.tot, .c) { width: auto; }
  #workspace .today-time-cards .htable .tot { white-space: normal; }
  #workspace .today-time-cards .htable .tot .pill { max-width: 100%; white-space: normal; }
  #workspace .today-time-cards .htable td:first-child { overflow-wrap: anywhere; }
  #workspace .today-time-cards .htable td:first-child small { display: block; }
  #workspace .today-time-cards .htable input[type="text"] { width: 100%; max-width: 96px; min-width: 0; }
  #workspace .today-time-cards .hfoot { flex-wrap: wrap; }
  @media (min-width: 1301px) {
    #workspace .today-grid { grid-template-columns: minmax(0, 1fr) clamp(340px, 20vw, 420px); gap: 16px; }
  }

  /* Quiet outer sections retain their existing layout and rounded corners. */
  #workspace :is(.card:not(.cod-card):not(.pwbox), .sec, .step, .ticket, .attnbar, .ds-table, .jstrip) {
    background: var(--workspace-surface);
    border-color: var(--workspace-edge);
    box-shadow: none;
  }
  #workspace .sec.roll { border-width: 1px; }
  #workspace .stat {
    background: var(--workspace-surface);
    border-left-color: var(--workspace-edge);
    border-right-color: var(--workspace-edge);
    border-bottom-color: var(--workspace-edge);
    box-shadow: none;
  }
  #workspace .stat:not(.bad):not(.good) { border-top-color: var(--workspace-edge); }
  #workspace .cb-board { background: var(--workspace-surface); }
  #workspace :is(.board-wrap, .dayboard-wrap, .cb-board) { border-color: var(--workspace-edge); }

  /* Keep wide week lanes, with desk-sized cards and less unused row space.
     Include the popup drag preview in the cap; the briefing itself stays roomy. */
  #workspace #board .chip { max-width: 240px; }
  #workspace #board .cell-jobs[popover] > .chip { max-width: none; }
  #workspace #board .board-drag-preview {
    z-index: 1000;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(10, 23, 42, .3);
  }
  #workspace #board .board td.cell .add { max-width: 240px; }
  #workspace #board:not(.compact) .board td.cell { padding: 4px; }
  #workspace #board:not(.compact) .board tr.lane td.cell .add { min-height: 20px; line-height: 20px; }
  #workspace #board:not(.compact) .board tbody th.unitcol { padding: 6px 8px; }
  #workspace #board:not(.compact) .board tbody th.unitcol .no { font-size: 23px; }
  #workspace #board:not(.compact) .chip:not(.cell-jobs[popover] > .chip) {
    --chip-pad-x: 7px;
    --chip-pad-top: 4px;
    --chip-pad-bottom: 5px;
    margin-bottom: 4px;
  }
  #workspace #board:not(.compact) .chip:not(.cell-jobs[popover] > .chip) > .bar { margin: 3px 0 4px; }
  #workspace #board:not(.compact) .chip:not(.cell-jobs[popover] > .chip) .tags { margin-top: 3px; }
  #workspace #board:not(.compact) .chip:not(.cell-jobs[popover] > .chip) .wtag {
    --warning-height: 20px;
    --warning-pad-y: 2px;
    margin-top: 4px;
  }

  /* Nested information reads as part of its section rather than another raised card. */
  #workspace :is(.hcard, .lbs) { background: transparent; border: 0; box-shadow: none; }
  #workspace .hcard { border-bottom: 1px solid var(--workspace-rule); }
  #workspace .hcard:last-child { border-bottom: 0; }
  #workspace :is(.rows, .results, .picked, .checklist) { background: transparent; border-color: var(--workspace-edge); }
  #workspace :is(.card, .sec, .step, .ticket) .card:not(.cod-card):not(.pwbox) { background: transparent; }
  #workspace .lookup { background: var(--workspace-surface); border-color: var(--workspace-edge); }

  /* Section headings and table headers share the surrounding surface. */
  #workspace :is(.sec > summary, .ticket .th, .t th, .print-bar, .sub-h, .hday.inset, .rows .r.hd, .results .grp, .map-row.head, .ds-hd) {
    background: transparent;
    border-color: var(--workspace-rule);
  }
  #workspace :is(.sec > summary:hover, .sub-h:hover, .t tbody tr:hover td, .checklist .check:hover) { background: var(--workspace-hover); }
  #workspace :is(.hhead, .hfoot, .htable td, .t td, .item, .mini, .contact, .ticket .tw, .rows .r, .checklist .check, .ctext, .cside, .cside-line, .ds-job, .ps-form-footer) {
    border-color: var(--workspace-rule);
  }
  #workspace .sec .chev { background: transparent; }
  #workspace .sec .snum { background: transparent; color: var(--ink-3); }

  /* Unit labels stay legible while shortage and downtime states keep their colors. */
  #workspace .jplate:not(.need):not(.out) { background: transparent; color: var(--ink); border-top-width: 2px; }
  #workspace .jplate:not(.need):not(.out) i { color: var(--ink-3); }
  #workspace .plates.light .plate {
    border-left-color: var(--workspace-edge);
    border-right-color: var(--workspace-edge);
    border-bottom-color: var(--workspace-edge);
    border-top-width: 2px;
  }
  #workspace .plates.light .plate:not(.down) { background: transparent; }
  #workspace .plates.light .plate:not(.down):hover { background: var(--workspace-hover); }

  /* Fields stay distinguishable, with the existing focus and validation feedback. */
  #workspace :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select, textarea):not(:focus):not(.bad):not(.set):not(.need):not(.input-validation-error):not(.ctext.changed textarea) {
    background: var(--workspace-field);
    border-color: var(--workspace-field-border);
  }
  #workspace .ctext.changed textarea { border-color: var(--red); }

  /* Floating editors remain opaque and keep their existing motion and depth. */
  #workspace :is(.drawer, .tv-settings-drawer) { background: var(--workspace-surface); border-color: var(--workspace-edge); }
  #workspace :is(.drawer-head, .tv-settings-head, .tv-settings-foot, .tv-share) { border-color: var(--workspace-rule); }
  #workspace .subnav a.on { background: var(--workspace-surface); }
  #workspace .subnav a:hover { background: var(--workspace-hover); }
  #workspace details.step.later[data-closing="1"] > summary h2::after { content: "Show"; }
  #workspace details.ds-job[data-closing="1"] .chev { transform: rotate(-90deg); }
}