/* The hours slice (12 Nov 2026): Your time on the board, in TODAY'S HQ LOOK (board.css's tokens; the old page's Time screen: the big
   serif hours, the share bar in its greens, rows with the value on the right). Every rule under .bd and prefixed hr- (bd-nav for the
   board's one Hours link), so board.css and style.css are untouched. Sizes are board.css's six per width; weights 400 and 500. */
.bd{--share-1:#3DDC84;--share-2:#8FD9B0;--share-3:#5E9E7B;--share-4:#3E6B53;--share-5:#3A3A3A}

/* the board's navigation: one link per slice beside the brand */
.bd .bd-nav{display:flex;align-items:center;gap:4px}
.bd .bd-navl{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:99px;font-size:var(--t-sub);font-weight:500;color:var(--label-2)}
.bd .bd-navl:hover{color:var(--label);background:var(--surface-2)}
.bd .bd-navl[aria-current="page"]{color:var(--label);background:var(--raise)}

.bd .hr-title{font-family:var(--serif);font-weight:400;font-size:var(--t-title);line-height:1.05;letter-spacing:-.01em;margin:2px 0 12px}
.bd .hr-seg{display:flex;flex-wrap:wrap;gap:4px}
.bd .hr-segb{min-height:44px;padding:0 14px;border-radius:99px;font-size:var(--t-sub);font-weight:500;color:var(--label-2);white-space:nowrap;transition:background-color .15s ease-out,color .15s ease-out}
.bd .hr-segb:hover{color:var(--label)}
.bd .hr-segb.on{background:var(--raise);color:var(--label)}
.bd .hr-top{display:grid;gap:6px;margin:16px 0 4px;min-width:0}
.bd .hr-big{font-family:var(--serif);font-weight:400;font-size:var(--t-hero);line-height:1;letter-spacing:-.01em}
.bd .hr-sub{font-size:var(--t-sub);color:var(--label-2)}
.bd .hr-skbig{height:40px;width:52%;border-radius:10px}
.bd .hr-share{display:grid;gap:10px;margin-top:10px;max-width:680px;min-width:0}
.bd .hr-bar{display:flex;height:14px;gap:3px;border-radius:99px;overflow:hidden}
.bd .hr-bar i{display:block;min-width:3px}
.bd .hr-legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:var(--t-meta);color:var(--label-2)}
.bd .hr-legend span{display:inline-flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.bd .hr-legend i{display:inline-block;width:8px;height:8px;border-radius:99px;flex:none}
.bd .hr-c1{background:var(--share-1)}.bd .hr-c2{background:var(--share-2)}.bd .hr-c3{background:var(--share-3)}.bd .hr-c4{background:var(--share-4)}.bd .hr-c5{background:var(--share-5)}

/* Overdue: the old page's Needs-you row, each opening the client */
.bd .hr-od{margin-top:16px}
.bd .hr-cardh{padding:16px var(--pad) 2px}
.bd .hr-odrow{color:var(--label)}
.bd .hr-odrow .nmain{min-height:60px}
.bd .hr-go{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:var(--t-sub);color:var(--accent);white-space:nowrap}
.bd .hr-go svg{width:16px;height:16px}
@media (hover:hover){.bd .hr-odrow:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}}

.bd .hr-cols{margin-top:16px}
.bd .hr-crow{color:var(--label)}
@media (hover:hover){.bd .hr-crow:hover .row-title{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}}
.bd .hr-v{display:grid;justify-items:end;gap:2px;flex:none;text-align:right}
.bd .hr-vn{font-family:var(--serif);font-size:var(--t-sec);line-height:1;color:var(--label);white-space:nowrap}
.bd .hr-vs{font-size:var(--t-meta);color:var(--label-3)}
.bd .hr-kinds .row-sub{color:var(--label-3)}

/* a build against its guess */
.bd .hr-build{position:relative;display:grid;gap:8px;padding:14px var(--pad)}
.bd .sec-h + .hr-build,.bd .hr-split + .hr-build,.bd .hr-figs + .hr-build{padding-top:10px}
.bd .hr-build + .hr-build::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--sep)}
.bd .hr-bh{display:grid;gap:2px;min-width:0}
.bd .hr-real{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:var(--t-sub);color:var(--label)}
.bd .hr-guess{color:var(--label-3)}
.bd .hr-meter{padding:4px 0}
.bd .hr-track{position:relative;display:block;height:8px;border-radius:99px;background:var(--raise)}
.bd .hr-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--label-3)}
.bd .hr-fill.likely{background:var(--amber)}
.bd .hr-fill.over{background:var(--late-dot)}
.bd .hr-tick{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:var(--label-4)}
.bd .hr-tick.hr-t-likely{background:var(--label-3)}
.bd .hr-tick.hr-t-high{background:var(--label-2)}
.bd .hr-flag{font-size:var(--t-sub);color:var(--label-2)}
.bd .hr-flag.likely{color:var(--amber)}
.bd .hr-flag.over{color:var(--late)}
.bd .hr-stages{display:grid;margin:0}
.bd .hr-st{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--sep);font-size:var(--t-sub)}
.bd .hr-st dt{color:var(--label-2)}
.bd .hr-st dd{margin:0;color:var(--label);white-space:nowrap}
.bd .hr-st.aside dt,.bd .hr-st.aside dd{color:var(--label-3)}
.bd .hr-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:4px var(--pad) 0;height:150px}
.bd .hr-day{display:grid;grid-template-rows:auto 1fr auto;gap:4px;min-width:0;text-align:center}
.bd .hr-dv{font-size:var(--t-meta);color:var(--label-3);min-height:16px}
.bd .hr-dcol{position:relative;display:flex;align-items:flex-end;justify-content:center}
.bd .hr-dbar{display:block;width:min(100%,28px);min-height:0;border-radius:6px 6px 2px 2px;background:var(--share-3)}
.bd .hr-dl{font-size:var(--t-meta);color:var(--label-3)}
.bd .hr-day.now .hr-dl,.bd .hr-day.now .hr-dv{color:var(--label)}
.bd .hr-day.now .hr-dbar{background:var(--share-1)}
.bd .hr-day.later .hr-dl{color:var(--label-4)}
.bd .hr-dfoot{padding:6px var(--pad) 8px;font-size:var(--t-meta);color:var(--label-3)}
.bd .hr-vm{font-size:var(--t-sub);color:var(--label)}
.bd .hr-foot{margin:18px 0 0;max-width:75ch;font-size:var(--t-meta);line-height:1.5;color:var(--label-3)}

/* a client's page: the small block */
.bd .hr-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px var(--pad) 10px}
.bd .hr-fig{display:grid;gap:2px;min-width:0}
.bd .hr-fl{font-size:var(--t-meta);color:var(--label-3)}
.bd .hr-fn{font-size:var(--t-body);font-weight:500;color:var(--label)}
.bd .hr-fn.zero{color:var(--label-3);font-weight:400}
.bd .hr-split{padding:0 var(--pad) 6px;font-size:var(--t-sub);color:var(--label-2)}
.bd .hr-all{padding:0 var(--pad);width:auto}

@media (min-width:1024px){
  .bd .hr-title{font-size:var(--t-title);margin:4px 0 16px}
  .bd .hr-top{margin:22px 0 6px}
  .bd .hr-cols{margin-top:24px}
  .bd .hr-od{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){.bd .hr-segb{transition:none}}
/* (the last edits) What you worked on: move a piece of time */
.bd button.hr-prow,.bd button.hr-pc{width:100%;text-align:left;font:inherit;color:inherit}
.bd .hr-pc .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bd .hr-on{flex:none;color:var(--accent);font-weight:600}
.bd #hrSheet .t-tint{color:var(--accent)}
.bd #hrSheet .note-head{display:grid;gap:2px;padding:4px 4px 6px}
.bd .hr-ptitle{font-size:var(--t-body);font-weight:600;overflow-wrap:anywhere}
.bd #hrSheet button.brow{width:100%;text-align:left;font:inherit;color:inherit;min-height:52px}
