/* AdEQ — Home, one workspace's own page (web/home.js, Franz, 2026-11-04).
 *
 * A working column and a right column, and wider screens add client cards
 * rather than margin. Written under [data-screen="home"], so it reaches no
 * other screen. Colour is the app's tokens only. */

[data-screen="home"] .hm-page {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-section);
  align-items: start;
}
@media (min-width: 1024px) {
  [data-screen="home"] .hm-page { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-3); }
  [data-screen="home"] .hm-page.is-rail-shut { grid-template-columns: minmax(0, 1fr) calc(var(--s-6) + var(--s-half)); }
}
[data-screen="home"] .hm-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
[data-screen="home"] .hm-section { display: flex; flex-direction: column; gap: var(--s-1h); min-width: 0; }
[data-screen="home"] .hm-h { font: var(--t-section); letter-spacing: var(--tr-section); margin: 0; }
[data-screen="home"] .home-stats, [data-screen="home"] .home-next { margin: 0; }
[data-screen="home"] .home-next:empty { display: none; }
[data-screen="home"] .home-next > .hint { margin: 0; }
[data-screen="home"] .hm-rail { min-width: 0; }

/* The client cards. */
[data-screen="home"] .hm-clients {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
[data-screen="home"] .hm-client {
  display: flex; flex-direction: column; gap: var(--s-1h); min-width: 0;
  padding: var(--s-2); text-align: left; cursor: pointer; color: var(--ink);
  font: inherit; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
}
[data-screen="home"] .hm-client:hover { border-color: var(--accent); }
[data-screen="home"] .hm-client-top { display: flex; align-items: center; gap: var(--s-1h); min-width: 0; }
[data-screen="home"] .hm-client-top .mark { width: 40px; height: 40px; flex: none; font-size: 14px; }
[data-screen="home"] .hm-client-name {
  font: var(--t-section); letter-spacing: var(--tr-section); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-screen="home"] .hm-client-sells {
  font-size: 13px; line-height: 20px; height: 40px; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
[data-screen="home"] .hm-client-sells.is-empty { color: var(--mute); }
[data-screen="home"] .hm-nums {
  display: flex; justify-content: space-between; gap: var(--s-1);
  padding-top: var(--s-1h); border-top: 1px solid var(--rule-faint);
}
[data-screen="home"] .hm-num { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
[data-screen="home"] .hm-num-v { font: 800 22px/1 var(--font-poster); font-variant-numeric: tabular-nums; }
[data-screen="home"] .hm-num-l { font-size: 12px; color: var(--mute); white-space: nowrap; }

/* Where the work stands: one strip, a cell a stage, each a filter. */
/* The team, in the right column. */
[data-screen="home"] .hm-team { display: flex; flex-direction: column; gap: var(--s-1); }
[data-screen="home"] .hm-person { display: flex; align-items: center; gap: var(--s-1); min-width: 0; font-size: 13.5px; }
[data-screen="home"] .hm-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-screen="home"] .hm-person-on { margin-left: auto; flex: none; font-size: 12px; color: var(--mute); }

/* What needs you: the row's button stays whole on a phone. */
[data-screen="home"] .hm-more { align-self: flex-start; margin-top: var(--s-1); }
@media (max-width: 639px) {
  [data-screen="home"] .next-row { flex-wrap: wrap; }
  [data-screen="home"] .next-title { flex: 1 1 100%; max-width: none; order: -1; }
}

/* The board: a lane a client, or a lane a stage. Lanes keep one width and the
   board scrolls sideways; on a phone they stack. */
[data-screen="home"] .hm-board { margin-top: var(--s-1h); }
[data-screen="home"] .hm-lane { gap: var(--s-1); }
[data-screen="home"] .hm-lane-h {
  font: var(--t-label); letter-spacing: var(--tr-label); margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-screen="home"] .hm-lane .count {
  margin-left: auto; flex: none; padding: 0 var(--s-1); border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent);
}
[data-screen="home"] .hm-lane-open {
  width: 100%; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--ink); text-align: left; font: inherit;
}
[data-screen="home"] .hm-lane-h { color: var(--accent); }
[data-screen="home"] .hm-lane-open:hover .hm-lane-h { color: var(--ink); }
[data-screen="home"] .hm-lane-open .mark { width: var(--s-3); height: var(--s-3); flex: none; font-size: 10.5px; }
[data-screen="home"] .hm-lane-sub { font-size: 12px; font-weight: 600; color: var(--mute); margin: var(--s-half) 0 0; }
[data-screen="home"] .hm-card {
  display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; width: 100%;
  padding: var(--s-1h); text-align: left; cursor: pointer; color: var(--ink); font: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
}
[data-screen="home"] .hm-card:hover { border-color: var(--accent); }
[data-screen="home"] .hm-card-shot {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--shade); border-radius: var(--r-sm);
}
[data-screen="home"] .hm-card-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
[data-screen="home"] .hm-card-title {
  font-size: 13.5px; font-weight: 500; line-height: 20px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
[data-screen="home"] .hm-card-meta { display: flex; flex-wrap: wrap; gap: var(--s-half) var(--s-1); font-size: 12px; color: var(--mute); }
[data-screen="home"] .hm-card-when { margin-left: auto; }
@media (max-width: 639px) {
  [data-screen="home"] .hm-board { flex-direction: column; align-items: stretch; overflow-x: visible; }
  [data-screen="home"] .hm-lane { flex: none; }
}

/* WORK'S ROWS ARE TALLER, so the table's own capped box showed nine of thirty.
   It rides the page; only its sideways scroll stays, for the columns. */
[data-screen="home"] .dt.is-visual > .dt-scroll { max-height: none; }

/* WORK'S BAR (screen-work.css, 2026-11-05): one row, 20 above and below it at rest
   and pinned. The pills are quiet, with one green tint for hover, open, and picked;
   the stage pill is as wide as its words, solid only once a stage is picked. */
[data-screen="home"] .bar-toolbar .dt-toolbar { margin: calc(var(--s-1h) * -1) 0 0; padding: var(--pad-page-end) 0; }
[data-screen="home"] .bar-toolbar .dt-count { display: none; }
[data-screen="home"] .bar-toolbar .dt > .dt-scroll { margin-top: 0; }
[data-screen="home"] .bar-toolbar .dt-toolbar .pill { background: var(--card); border: var(--s-px) solid var(--rule-faint); color: var(--ink-soft); transition: background .12s, color .12s, border-color .12s; }
[data-screen="home"] .bar-toolbar .dt-toolbar .pill:hover,
[data-screen="home"] .bar-toolbar .dt-toolbar .pill[aria-expanded="true"],
[data-screen="home"] .bar-toolbar .dt-toolbar .pill.is-on { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
[data-screen="home"] .bar-toolbar .dt-toolbar .pill.wk-main { display: inline-flex; align-items: center; gap: var(--s-1); background: color-mix(in srgb, var(--accent) 18%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); font-weight: 600; }
[data-screen="home"] .bar-toolbar .dt-toolbar .pill.wk-main:hover,
[data-screen="home"] .bar-toolbar .dt-toolbar .pill.wk-main[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 28%, var(--card)); color: var(--ink); }
[data-screen="home"] .bar-toolbar .dt-toolbar .pill.wk-main.wk-main, [data-screen="home"] .bar-toolbar .dt-toolbar .pill.wk-main.is-picked { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* On a phone a row's cells size by their words, so nothing here may clip them. */
@media (max-width: 639px) {
  [data-screen="home"] .dt.is-visual .dt-cell[data-col="state"] { flex: 1 1 100%; }
  [data-screen="home"] .dt.tk-briefs .dt-cell[data-col="state"], [data-screen="home"] .dt.tk-briefs .dt-cell[data-col="state"] .dt-cell-in,
  [data-screen="home"] .dt.tk-briefs .dt-cell[data-col="state"] .dt-cell-in > span { overflow: visible; }
}