/* Today and the manager dashboard (screens 01 to 06 and 08): greyscale, same tokens as the forms. Touch targets are at least 36 px. */
body { padding-bottom: 64px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.dayline { display:block; color:var(--mid); font-size:14px; margin:2px 0 0; }
.sub + .dayline { margin-top:-8px; margin-bottom:6px; }
.ttl { display:inline-block; min-height:36px; line-height:1.3; padding:6px 0; color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
a.tile { display:block; color:inherit; text-decoration:none; min-height:36px; }
.qcard { border:2px solid var(--line); padding:12px; margin:12px 0; list-style:none; }
.qcard.late { border-color:var(--dark); border-width:3px; }
.qcard h3 { margin:0 0 6px; font-size:17px; display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.qcard h3 > div { display:flex; align-items:flex-start; gap:2px; min-width:0; }
.qcard .ttl { font-size:17px; }
.cards .qcard { padding:12px; }
.cards .qcard .meta { display:flex; flex-wrap:wrap; gap:4px 0; color:var(--mid); font-size:14px; margin:6px 0; }
.cards .qcard .meta > span { display:block; padding-right:10px; margin-right:10px; border-right:1px solid var(--line); }
.cards .qcard .meta > span:last-child { border-right:0; margin-right:0; }
.cards .qcard .dueblock { display:block; }
.cards .qcard .dueblock .due { display:block; color:var(--mid); font-size:14px; }
.cards .qcard .dueblock .dayline { display:block; }
.cards .qcard .why { display:block; font-style:italic; color:var(--mid); font-size:14px; margin:4px 0 8px; }
.cards .qcard .badge { display:inline-block; margin:0 0 4px; }
.ruletag { border:1px solid var(--line); color:var(--mid); font-size:13px; padding:1px 6px; white-space:nowrap; flex:none; }
.qcard a.btn { margin-top:8px; display:flex; align-items:center; justify-content:center; line-height:1.3; padding:10px 8px; min-height:48px; text-align:center; }
a.btn.small { display:inline-block; padding:0 14px; min-height:44px; line-height:40px; margin-top:6px; }
a.btn.secondary-link { background:#fff; }
.badge.tight { margin-left:6px; font-size:12px; padding:0 6px; }
.star { font-weight:700; }
.filters { margin-top:4px; }
table.all td.n, table.all th.n { width:34px; }
table.all td:nth-child(3) { width:70px; }
table.all td:nth-child(4) { width:86px; }
table.t td .dayline { margin:0; }
table.t td.src { color:var(--mid); }
table.rec td:first-child { width:34%; }
.why { font-style:italic; color:var(--mid); }
p.why { margin:4px 0 12px; }
.tabs { position:sticky; left:0; right:0; bottom:0; display:flex; background:var(--soft); border-top:1px solid var(--line); z-index:5; }
.tabs a { flex:1 1 0; text-align:center; min-height:52px; line-height:52px; color:var(--ink); text-decoration:none; font-size:15px; }
.tabs a.on { font-weight:700; background:#fff; box-shadow:inset 0 3px 0 var(--dark); }
.side { display:none; }
.pagehead { display:block; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.pill { max-width:100%; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--dark); border-radius:20px; padding:0 8px 0 12px; min-height:40px; font-weight:400; margin:0; background:#fff; }
.pill select { min-width:0; max-width:100%; text-overflow:ellipsis; width:auto; min-height:36px; border:0; padding:0 4px; background:transparent; font-weight:700; }
.dtiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.dtile { border:2px solid var(--line); background:var(--soft); padding:10px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.dtile a.num { font-size:32px; font-weight:700; color:var(--ink); text-decoration:underline dotted; text-underline-offset:4px; min-height:44px; line-height:44px; }
.dtile small { color:var(--mid); font-size:13px; }
h2.big { font-size:22px; margin:8px 0 2px; }
.bar-row { display:flex; align-items:center; gap:8px; min-height:40px; color:var(--ink); text-decoration:none; }
.bar-row .bl { flex:0 0 38%; font-size:15px; }
.bar-row .track { flex:1 1 auto; height:18px; background:var(--soft); }
.bar-row .fill { display:block; height:100%; background:#999; }
.bar-row .fill.dark { background:var(--dark); }
.bar-row .bv { flex:0 0 46px; text-align:right; text-decoration:underline dotted; }
@media (min-width: 900px) {
  body { padding-bottom:0; }
  .tabs { display:none; }
  .shell { display:flex; align-items:flex-start; min-height:calc(100vh - 56px); }
  .shell > main { flex:1 1 auto; max-width:none; padding:16px 24px 40px; min-width:0; }
  .side { display:flex; flex-direction:column; flex:0 0 150px; border-right:1px solid var(--line); padding:12px 8px; min-height:calc(100vh - 56px); }
  .side b { padding:6px 10px; font-size:17px; }
  .side a { display:block; color:var(--ink); text-decoration:none; padding:0 10px; min-height:44px; line-height:44px; border-bottom:1px solid var(--soft); }
  .side a.on { background:var(--dark); color:#fff; font-weight:700; }
  .pagehead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
  .dtiles { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
  .cols { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:28px; align-items:start; }
  .cols h2:first-child { margin-top:8px; }
}

a.btn { display:flex; align-items:center; justify-content:center; line-height:1.3; padding:10px 8px; min-height:48px; text-align:center; }
a.btn.small { display:inline-flex; width:auto; }
@media (max-width: 899px) {
  table.over th, table.over td { padding:6px 4px; font-size:13px; overflow-wrap:normal; }
  table.over td:nth-child(3) { overflow-wrap:anywhere; }
  table.over th:nth-child(1) { width:29%; } table.over th:nth-child(2) { width:18%; } table.over th:nth-child(3) { width:21%; }
  table.over th:nth-child(4) { width:13%; } table.over th:nth-child(5) { width:19%; }
}
/* Overdue actions (wireframe 08): the item gets the room, the other four columns stay narrow */
@media (min-width: 900px) {
  table.over th:nth-child(1) { width:38%; } table.over th:nth-child(2) { width:14%; } table.over th:nth-child(3) { width:22%; }
  table.over th:nth-child(4) { width:11%; } table.over th:nth-child(5) { width:15%; }
  .cols { grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); } }