/* companies — #/companies (Build and My companies: companies.rs, mine.rs) and #/jobs (jobs.rs).
   Layout and game-art presentation only: every control is a shared component (docs/DESIGN.md).
   Everything is scoped to its page. */
@layer pages {
  /* Game art floats on its --surface-2 tile: a dark drop shadow at night, a soft one on paper. */

  /* Quality stars (companies::stars): filled in gold, the rest as quiet outlines of the same glyph. */

  /* A price with its coin (companies::Price), used by companies and training. */
  :is(.companies, .training) .price { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  :is(.companies, .training) .price img { width: 18px; height: 18px; object-fit: contain; }
  :is(.companies, .training) .price small { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  :is(.companies, .training) .price.bad b { color: var(--red-text); }

  /* ── Build: the category picker ── */
  .companies .cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
  .companies .cat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-4); text-align: center; }
  .companies .cat-art { display: grid; place-items: center; align-self: stretch; height: 76px; margin-bottom: var(--sp-2); border-radius: var(--r-md); background: var(--surface-2); }
  .companies .cat-art img { height: 58px; width: auto; max-width: 86%; object-fit: contain; filter: var(--art-shadow); transition: transform var(--t-slow) var(--ease); }
  .companies .cat:hover .cat-art img { transform: translateY(-2px) scale(1.06); }
  /* Not open yet: a padlock on the art, which turns grey. The building cards are also disabled. */
  .companies .cat-art { position: relative; }
  .companies .lock { position: absolute; top: var(--sp-2); right: var(--sp-2); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    color: var(--text-2); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
  .companies .cat.locked .cat-art img, .companies .building:disabled .art img { filter: var(--art-shadow) grayscale(1); }
  .companies .cat.locked .cat-name { color: var(--text-2); }
  .companies .building:disabled:hover .art img { transform: none; }
  .companies .cat-name { font-size: var(--fs-ui); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text); }
  .companies .cat small { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-3); }

  /* ── Build: the catalogue ── */
  .companies .catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--sp-4); }
  .companies .building { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-4); text-align: left; }
  .companies .building .art { position: relative; display: grid; place-items: center; height: 120px; border-radius: var(--r-md); background: var(--surface-2); }
  .companies .building .art img { max-width: 86%; max-height: 96px; object-fit: contain; filter: var(--art-shadow); transition: transform var(--t-slow) var(--ease); }
  .companies .building:hover .art img { transform: translateY(-3px) scale(1.05); }
  .companies .building .name, .companies .building .facts, .companies .building .foot { margin: 0 var(--sp-2); }
  .companies .building .foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
  .companies .building .foot .price b { font: var(--fw-semibold) var(--fs-h2) / 1 var(--font-display); letter-spacing: .01em; }
  .companies .building .foot .price img { width: 20px; height: 20px; }
  /* The tick on the chosen building. */
  .companies .building .pick { position: absolute; top: var(--sp-2); right: var(--sp-2); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    color: var(--on-brand); background: var(--brand); border: 1px solid var(--brand-edge); box-shadow: var(--shadow-1);
    opacity: 0; transform: scale(.6); transition: opacity var(--t-fast), transform var(--t-base) var(--ease); }
  .companies .building.selected .pick { opacity: 1; transform: none; }

  /* What a building gives: chips with a product icon, workers, storage; a pill when you can work there. */
  .companies .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .companies .facts .chip .icon { color: var(--text-3); }

  /* ── Build: the sticky bar ── */
  .companies .summary.build-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "picked amount total go"; align-items: center; gap: var(--sp-3) var(--sp-8); }
  .companies .build-bar .picked { grid-area: picked; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .companies .build-bar .amount { grid-area: amount; }
  .companies .build-bar .total { grid-area: total; min-width: 120px; }
  .companies .build-bar .btn.go { grid-area: go; min-width: 200px; }
  .companies .picked-art { display: grid; place-items: center; flex: none; width: 64px; height: 48px; border-radius: var(--r-md); color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .companies .picked-art img { max-width: 56px; max-height: 42px; object-fit: contain; filter: var(--art-shadow); }
  .companies .picked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .companies .build-bar .total .price img { width: 22px; height: 22px; }

  /* ── My companies: the overview ── */
  .companies .ov { grid-template-columns: 1fr 1fr 2fr; }
  .companies .ov .stat > .icon { color: var(--text-3); }
  .companies .ov .split { align-items: baseline; }
  .companies .sk-stat { height: 76px; border-radius: var(--r-md); }
  .companies .sk-card { height: 320px; border-radius: var(--r-lg); }
  /* Storage now (solid) and after the session (light, red when it would not fit). */
  .companies .stor { margin: var(--sp-2) 0 6px; }
  .companies .stor .fill { position: absolute; top: 0; left: 0; bottom: 0; }
  .companies .stor .fill.then { opacity: .4; }
  .companies .stor.over .fill.then { opacity: .9; background: var(--red); }

  /* ── My companies: not in a holding ── */
  .companies .unassigned h3 { display: flex; align-items: center; gap: var(--sp-2); }
  .companies .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
  .companies .pick-item img { width: 60px; height: 44px; object-fit: contain; flex: none; filter: var(--art-shadow); }
  .companies .pick-text { display: flex; flex-direction: column; min-width: 0; }
  .companies .mover, .companies .unassigned .callout { margin-top: var(--sp-4); }
  .companies .mover .field { flex: 0 1 320px; }

  /* ── My companies: holdings ── */
  .companies .section-head { margin-top: var(--sp-2); }
  .companies .select-all small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
  .companies .holding .card-head { flex-wrap: wrap; align-items: center; }
  .companies .h-title { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
  .companies .h-loc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .companies .h-loc .icon { color: var(--text-3); }
  .companies .h-loc b { color: var(--text); }
  .companies .h-loc .pill { margin-left: var(--sp-1); }
  .companies .h-bonus { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
  .companies .h-bonus .chip .icon { color: var(--green-text); }
  .companies .holding.away .crow:not(.head) { opacity: .75; }

  /* One company per row: art · name and facts · you · employees · this session. */
  .companies .rows { display: flex; flex-direction: column; gap: var(--sp-2); }
  .companies .crow { display: grid; grid-template-columns: 104px minmax(0, 1.25fr) 132px 132px minmax(0, 1fr); grid-template-areas: "art main you emp side";
    align-items: center; gap: var(--sp-2) var(--sp-5); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); transition: border-color var(--t-base), background-color var(--t-base); }
  .companies .crow.active { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-soft); }
  .companies .crow.head { padding-top: 0; padding-bottom: var(--sp-1); background: none; border: 0; }
  .companies .crow.head .c-head-main { grid-column: 1 / 3; }
  .companies .c-art { grid-area: art; display: grid; place-items: center; height: 80px; }
  .companies .c-art img { max-width: 100%; max-height: 76px; object-fit: contain; filter: var(--art-shadow); }
  .companies .c-main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
  .companies .ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
  .companies .c-you { grid-area: you; }
  .companies .c-emp { grid-area: emp; }
  .companies .ctl .choice { min-height: var(--h-sm); }
  .companies .ctl-label { display: none; }
  .companies .c-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
  .companies .c-out { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--green-text); font-variant-numeric: tabular-nums; }
  .companies .c-out .eat { color: var(--amber-text); }
  .companies .c-out .none { color: var(--text-3); font-weight: var(--fw-regular); }
  .companies .c-up { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

  /* New holding. */
  .companies .make .field { flex: 1 1 260px; max-width: 420px; }

  /* ── My companies: the sticky work bar ── */
  .companies .work-bar .idle { margin: 0; }
  .companies .outs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 440px; }

  /* ── Result sheets (the sheet itself is in results.css) ── */
  :is(.companies, .training) .up-art { display: grid; place-items: center; margin: var(--sp-3) 0 var(--sp-1); border-radius: var(--r-lg);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 26%, transparent), transparent); }
  :is(.companies, .training) .up-art img { width: 220px; height: 140px; object-fit: contain; filter: var(--art-shadow); animation: up-art-in .7s cubic-bezier(.2, 1.3, .3, 1); }
  .companies .built-count { margin: var(--sp-1) 0 var(--sp-3); }
  :is(.companies, .training) .up-stars { display: flex; justify-content: center; gap: 6px; margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-h1); line-height: 1; color: var(--border-strong); }
  :is(.companies, .training) .up-stars .on { color: var(--gold); }
  :is(.companies, .training) .up-stars .new { display: inline-block; animation: star-pop .8s .35s cubic-bezier(.2, 1.6, .3, 1) both; }
  @keyframes up-art-in { from { opacity: 0; transform: scale(.6) translateY(16px); } }
  @keyframes star-pop { 0% { opacity: 0; transform: scale(0) rotate(-90deg); } 60% { transform: scale(1.6) rotate(10deg); } 100% { opacity: 1; transform: none; } }
  .companies .work-done .made { list-style: none; margin: var(--sp-4) 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .companies .work-done .made li { display: grid; grid-template-columns: 40px auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md); text-align: left; background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .companies .work-done .made img { width: 36px; height: 36px; object-fit: contain; }
  .companies .work-done .made b { font: var(--fw-semibold) var(--fs-h2) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
  .companies .work-done .made .good b { color: var(--green-text); }
  .companies .work-done .made .eat b { color: var(--amber-text); }
  .companies .work-done .made span { color: var(--text-2); }
  .companies .work-done .spent .icon { color: var(--text-3); }

  /* ── Companies: narrower screens ── */
  @media (max-width: 1080px) {
    .companies .crow { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "art main main" "you you emp" "side side side"; row-gap: var(--sp-3); }
    .companies .crow.head { display: none; }
    .companies .ctl-label { display: block; }
    .companies .c-art { height: 68px; }
    .companies .c-art img { max-height: 64px; }
  }
  @media (max-width: 900px) {
    .companies .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .companies .ov { grid-template-columns: 1fr 1fr; }
    .companies .ov-storage { grid-column: 1 / -1; }
    .companies .summary.build-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "picked picked" "amount total" "go go"; }
    .companies .build-bar .total { text-align: right; align-items: flex-end; }
    .companies .build-bar .btn.go { width: 100%; }
  }
  @media (max-width: 560px) {
    .companies .cats { gap: var(--sp-2); }
    .companies .cat { padding: 6px 6px var(--sp-3); }
    .companies .cat small { display: none; }
    .companies .cat-art { height: 56px; margin-bottom: var(--sp-1); }
    .companies .cat-art img { height: 42px; }
    .companies .cat-name { font-size: var(--fs-sm); }
    /* The catalogue as a list: the picture on the left, the facts and the price beside it. */
    .companies .catalog { grid-template-columns: 1fr; gap: var(--sp-2); }
    .companies .building { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "art name" "art facts" "art foot";
      align-items: start; gap: 6px var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); }
    .companies .building .art { grid-area: art; align-self: stretch; height: auto; min-height: 104px; }
    .companies .building .art img { max-height: 72px; }
    .companies .building .name { grid-area: name; margin: var(--sp-1) 0 0; }
    .companies .building .facts { grid-area: facts; margin: 0; }
    .companies .building .foot { grid-area: foot; margin: 0; padding-top: var(--sp-2); }
    /* The build bar in two rows: what and how much, then how many and Build. */
    .companies .summary.build-bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "picked total" "amount go"; gap: var(--sp-3); }
    .companies .build-bar .picked-art, .companies .build-bar .amount .t-overline { display: none; }
    .companies .build-bar .total b.t-stat { font-size: var(--fs-h2); }
    .companies .build-bar .btn.go { padding: 0 var(--sp-4); }
    .companies .work-bar .idle { display: none; }
    .companies .ov { grid-template-columns: 1fr; }
    .companies .crow { grid-template-columns: 72px minmax(0, 1fr) auto; padding: var(--sp-3); column-gap: var(--sp-3); }
    .companies .c-art { height: 56px; }
    .companies .c-art img { max-height: 54px; }
    .companies .h-bonus { justify-content: flex-start; }
    .companies .mover .field, .companies .make .field { flex-basis: 100%; max-width: none; }
    .companies .mover .btn, .companies .make .btn { width: 100%; }
    .companies .ctl .choice { min-height: var(--h-md); }
    /* Touch targets: at least 40px on phones. */
    .companies .btn.sm { --btn-h: var(--h-md); }
    .companies .stepper.small { height: var(--h-md); }
    .companies .stepper.small button { width: 40px; }
  }

  /* ══ Jobs (#/jobs) ══════════════════════════════════════════════════════════════════════════ */
  .jobs-page .filters .field { flex: 0 1 280px; }
  .my-job .form-row { align-items: center; }
  .jobs-page .stats { margin-bottom: var(--sp-4); }
  .jobs-page .stat > .icon { color: var(--text-3); }
  .jobs-page .stat b small { margin-left: 2px; }
  .jobs-page .my-job .stats { margin-bottom: 0; }
  .jobs-page .resign-note { margin-top: var(--sp-3); }
  .jobs-page .offers .callout { margin-bottom: var(--sp-4); }
  .jobs-page .offer-form { margin-top: var(--sp-5); }
  .jobs-page .offer-card .callout { margin-top: var(--sp-4); align-items: center; }
  .jobs-page .card-foot { align-items: center; flex-wrap: wrap; }
  .jobs-page .card-foot .listed { margin-right: auto; }

  /* Tables: the employer or citizen leads; numbers and actions sit right. */
  .jobs-page .table .lead { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .jobs-page .who { font-weight: var(--fw-semibold); color: var(--text); }
  .jobs-page .who:hover { color: var(--brand-text); }
  .jobs-page .money small { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .jobs-page .table .act { text-align: right; white-space: nowrap; }
  .jobs-page .table .act .btn + .btn { margin-left: var(--sp-2); }
  .jobs-page .new-salary { width: 150px; margin-left: auto; }
  .jobs-page .cell-label { display: none; }
  .jobs-page .week-days { display: inline-flex; gap: var(--sp-1); }
  .jobs-page .wd { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--surface-sunken); color: var(--text-3); }
  .jobs-page .wd.worked { background: var(--green-soft); color: var(--green-text); }
  .jobs-page .wd.missed { opacity: .55; }
  .jobs-page .wd.today { box-shadow: 0 0 0 2px var(--border-subtle); color: var(--text); }
  .jobs-page .wd.worked.today { color: var(--green-text); }

  /* The offers table: fixed columns so the figures line up row after row; Net is the figure that
     matters, so it carries a tint and the positive colour. */
  .jobs-page .job-table { table-layout: fixed; width: 100%; }
  .jobs-page .job-table th:nth-child(2), .jobs-page .job-table td:nth-child(2) { width: 96px; }
  .jobs-page .job-table th:nth-child(3), .jobs-page .job-table td:nth-child(3),
  .jobs-page .job-table th:nth-child(4), .jobs-page .job-table td:nth-child(4) { width: 170px; }
  .jobs-page .job-table th:nth-child(5), .jobs-page .job-table td:nth-child(5) { width: 120px; }
  .jobs-page .job-table td.num, .jobs-page .job-table th.num { text-align: right; white-space: nowrap; }
  .jobs-page .job-table td.lead { overflow: hidden; }
  .jobs-page .job-table td.lead > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jobs-page .job-table th.net, .jobs-page .job-table td.net { background: var(--green-soft); }
  .jobs-page .job-table td.net { color: var(--green-text); font-weight: var(--fw-bold); }
  .jobs-page .job-table td.net .money small { color: inherit; opacity: .75; }
  .jobs-page .job-table th.net { color: var(--green-text); }
  .jobs-page .jobs-sort { display: none; }
  .jobs-page .jobs-sort .th-sort-ico { display: inline-grid; transition: transform var(--t-base) var(--ease); }
  .jobs-page .jobs-sort .th-sort-ico.down { transform: rotate(180deg); }
  .jobs-page .sk-rows { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); }
  .jobs-page .sk-line { height: 40px; }

  @media (max-width: 720px) {
    .jobs-page .stats { grid-template-columns: 1fr; }
    .jobs-page .filters .field { flex-basis: 100%; }
    .jobs-page .filters .btn { flex: 1 1 auto; }
    .jobs-page .jobs-sort { display: inline-flex; }
    /* Rows become small cards: who on top, the numbers in a row, the actions last. */
    .jobs-page .table thead { display: none; }
    .jobs-page .table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle); }
    .jobs-page .table tbody tr:last-child { border-bottom: 0; }
    .jobs-page .table tbody tr:hover { background: none; }
    .jobs-page .job-table { table-layout: auto; }
    .jobs-page .job-table td:nth-child(n) { width: auto; }
    .jobs-page .job-table td.net { background: none; }
    .jobs-page .table td { height: auto; padding: 0; border: 0; text-align: left; }
    .jobs-page .table .lead { grid-column: 1 / -1; }
    .jobs-page .table .act { grid-column: 1 / -1; display: flex; gap: var(--sp-2); }
    .jobs-page .table .act .btn { flex: 1; --btn-h: var(--h-md); }
    .jobs-page .table .act .btn + .btn { margin-left: 0; }
    .jobs-page .cell-label { display: block; margin-bottom: 2px; }
    .jobs-page .staff-table td:nth-child(2), .jobs-page .staff-table td:nth-child(3) { grid-column: 1 / -1; }
    .jobs-page .staff-table td:nth-child(4) { grid-column: 1 / -1; }
    .jobs-page .btn.sm { --btn-h: var(--h-md); }
    .jobs-page .new-salary { width: 100%; }
    .jobs-page .card-foot .listed { flex-basis: 100%; }
  }
}