/* AuraTrack views: Home now; Work, Team, Reports, the inspector and the docked
   pages are added by later steps. Layout switches on the width of .page (a
   container), so the same rules serve a docked window, a phone and a narrow
   browser window. */

.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.page-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.page-head .sub { color: var(--ink-2); font-size: 15px; }
.page-head .btn-primary { margin-left: 0; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.card.empty { padding: 28px; display: grid; gap: 10px; justify-items: start; }
.card.empty h2 { font-size: 20px; }
.card.empty p { color: var(--ink-2); }

/* attention across all boards */
.attention { padding: 14px 16px 8px; }
.attention h2 { font-size: 19px; margin: 0 4px 10px; }
.att-none { padding: 6px 4px 12px; color: var(--ink-2); font-size: 16px; }
.att-list { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.att-list li + li { border-top: 1px solid var(--line-soft); }
.att-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 8px; min-height: 52px; }
.att-row:hover { background: var(--surface-2); }
.att-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.att-head { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.att-g { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.att-kind { font-size: 16px; font-weight: 600; min-width: 84px; }
.kind-blocked .att-kind { color: var(--st-orange-text); }
.kind-failed .att-kind { color: var(--st-red-text); }
.kind-overdue .att-kind { color: var(--warn); }
.kind-stale .att-kind { color: var(--ink); font-weight: 700; }
.att-sep { color: var(--muted); }
.att-board { color: var(--ink-2); font-size: 16px; }
.att-who { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.att-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.att-detail { color: var(--ink-2); }
.att-chev { color: var(--blue); flex: none; }

/* board rows */
.board-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.board-row {
  display: grid; align-items: center; gap: 4px 20px; padding: 16px 20px;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, 250px) 232px minmax(360px, max-content) 28px;
  grid-template-areas: "top bar meta counts chev" "urgent urgent urgent counts chev";
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.board-row:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.br-top { display: contents; }
.br-name { grid-area: top; font-size: 26px; font-weight: 800; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row > .bar { grid-area: bar; }
.br-meta { grid-area: meta; align-self: start; padding-top: 6px; display: grid; justify-items: start; gap: 3px; white-space: nowrap; color: var(--ink-2); }
.br-line { display: flex; align-items: baseline; gap: 8px; }
.br-pct { color: var(--ink); font-size: 16px; min-width: 4.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.br-updated { font-size: 14.5px; }
.br-updated.is-stale { color: var(--st-amber-text); font-weight: 600; }
.br-stale { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.br-stale-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--mark-stale); font-weight: 600; }
.br-archives { color: var(--muted); }
.br-counts { grid-area: counts; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 6px 0; align-self: stretch; align-content: center; border-left: 1px solid var(--line); }
.count { display: flex; align-items: center; gap: 10px; padding: 3px 14px; white-space: nowrap; }
.count + .count { }
.br-counts .count:nth-child(even) { border-left: 1px solid var(--line); }
.count-label { color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.count-n { margin-left: auto; font-size: 16px; font-variant-numeric: tabular-nums; }
.count.tone-blue .count-n { color: var(--st-blue-text); }
.count.tone-orange .count-n { color: var(--st-orange-text); }
.count.tone-red .count-n { color: var(--st-red-text); }
.count.tone-green .count-n { color: var(--st-green-text); }
.urgent-list { grid-area: urgent; display: grid; gap: 4px; margin-top: 2px; }
.urgent { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink-2); font-size: 15.5px; }
.urgent-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-chev { grid-area: chev; color: var(--blue); justify-self: end; grid-row: 1 / span 2; }

/* archived fold */
.fold summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; list-style: none; cursor: pointer; font-size: 17px; }
.fold summary::-webkit-details-marker { display: none; }
.fold-chev { display: inline-flex; transition: transform .15s; color: var(--ink-2); }
.fold[open] .fold-chev { transform: rotate(90deg); }
.arch-list { border-top: 1px solid var(--line-soft); }
.arch-row { display: flex; align-items: center; gap: 12px; padding: 4px 20px 4px 12px; }
.arch-row + .arch-row { border-top: 1px solid var(--line-soft); }
.arch-link { display: flex; align-items: center; gap: 16px; flex: 1; min-height: 48px; padding: 0 8px; border-radius: 8px; }
.arch-link:hover { background: var(--surface-2); }
.arch-name { font-weight: 650; font-size: 16px; }
.arch-note { color: var(--muted); font-size: 14px; }

/* ------------------------------------------- narrow: docked, phone, small window */

.app[data-mode="docked"] .page { padding: 12px 12px 40px; }

/* Between the phone layout and the full row, the counts drop under the row so the row needs 640 px instead of 1100. */
@container page (max-width: 1180px) {
  .board-row {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 240px) 210px 28px;
    grid-template-areas: "top bar meta chev" "urgent urgent urgent chev" "counts counts counts counts";
  }
  .br-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; align-self: auto; }
  .br-counts .count:nth-child(even) { border-left: 0; }
  .br-counts .count + .count { border-left: 1px solid var(--line); }
}
@container page (max-width: 720px) {
  .home { gap: 12px; }
  .page-head-docked { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "sub sub"; align-items: center; gap: 2px 8px; }
  .page-head-docked h1 { grid-area: title; font-size: 34px; }
  .page-head-docked .head-actions { grid-area: actions; }
  .page-head-docked .sub { grid-area: sub; font-size: 14px; }
  .head-actions { display: flex; gap: 8px; flex: none; }
  .attention { background: var(--attention-bg); border-color: var(--attention-line); padding: 6px 12px; }
  .attention h2 { display: none; }
  .att-list { border: 0; margin: 0; }
  .att-list li + li { border-top-color: var(--attention-line); }
  .att-row { align-items: flex-start; padding: 12px 4px; gap: 10px; }
  .att-body { display: block; }
  .att-head { display: flex; flex-wrap: wrap; gap: 2px 7px; font-size: 14px; align-items: center; }
  .att-g { gap: 7px; }
  .att-board { font-size: 14px; }
  .att-kind { font-size: 15px; min-width: 0; }
  .att-who { font-size: 13.5px; }
  .att-text { white-space: normal; margin-top: 3px; font-size: 15px; }
  .att-chev { align-self: center; }
  .board-row {
    position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "bar" "counts" "urgent"; gap: 12px; padding: 14px;
  }
  .br-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; grid-area: top; padding-right: 26px; }
  .br-name { font-size: 22px; min-width: 0; white-space: normal; overflow: visible; }
  .br-meta { font-size: 13px; gap: 2px; flex: none; justify-items: end; padding-top: 0; align-self: auto; }
  .br-line { gap: 6px; }
  .br-pct { font-size: 14px; min-width: 0; }
  .br-updated { font-size: 13px; }
  .br-stale { font-size: 12.5px; }
  .br-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; align-content: start; gap: 0; }
  .br-counts .count:nth-child(even) { border-left: 0; }
  .count { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sym num" "sym lab"; column-gap: 6px; align-items: center; padding: 0 4px; min-width: 0; }
  .count + .count { border-left: 1px solid var(--line-soft); }
  .count .sym { grid-area: sym; width: 22px; height: 22px; }
  .count-n { grid-area: num; margin: 0; font-weight: 500; color: var(--ink) !important; font-size: 15px; text-align: left; }
  .count-label { grid-area: lab; font-size: 12px; line-height: 1.2; letter-spacing: -.01em; }
  .urgent-list { border-top: 1px solid var(--line-soft); padding-top: 10px; margin: 0; }
  .br-chev { position: absolute; top: 16px; right: 12px; grid-row: auto; }
  .arch-row { padding-right: 8px; }
  .arch-note { display: none; }
}

/* A status with nothing in it is washed out: the icon fades and the number and label take the muted colour. */
.count.is-zero .sym, .rp-row.is-zero .sym { opacity: var(--zero-fade); }
.count.is-zero .count-n, .count.is-zero .count-label { color: var(--muted) !important; }
.rp-row.is-zero .rp-n, .rp-row.is-zero .rp-label > span:last-child { color: var(--muted); }