/* The boss dashboard's Crew section, Settings and sign-in (spec 10), in the crew portal's
   language (spec 09): the same tokens and type, spruce for the crew and things on the clock,
   timber for something waiting on a person, brick for faults only.

   The one loud thing is the time-card rack: each guy on the clock is a punched card with his
   hours running. Everything around it stays quiet. Controls are 44px or taller, so Dave's
   phone works as well as Billy's desk. All motion answers a tap and is off under reduced
   motion. */

/* ---- the frame ---- */
.o { display:flex; flex-direction:column; gap:20px; max-width:1180px; margin:0 auto; }
.o a { color:var(--spruce); }
.o-head h1 { font-family:var(--display); font-size:28px; font-weight:500; letter-spacing:-.03em; margin:0; line-height:1.15; overflow-wrap:anywhere; }
.o-sub { color:var(--muted); margin:4px 0 0; font-size:15px; }
.o-sub a { font-weight:600; }
.o-week { color:var(--ink); font-weight:700; margin:0 10px; }
.o-muted { color:var(--muted); }
.o-small { font-size:13px; margin:0; }
.o-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Sub-tabs: a scrolling strip on a phone, the lit tab marked like the crew page's bottom bar. */
.o-tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch; }
@media (max-width:760px) { .o-tabs { margin:0 -16px; padding:0 16px; } }
.o-tabs::-webkit-scrollbar { display:none; }
.o-tab { position:relative; flex:none; display:flex; align-items:center; min-height:46px; padding:0 14px; color:var(--muted);
  font-weight:700; font-size:15px; text-decoration:none; }
.o .o-tab { color:var(--muted); }
.o .o-tab[aria-current="page"] { color:var(--ink); }
.o-tab::after { content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0;
  background:var(--spruce); transform:scaleX(0); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.o-tab[aria-current="page"]::after { transform:scaleX(1); }
/* My crew page: the strip's last item, pushed to the right, a way out rather than a tab. */
.o-tab-mine { display:flex; flex:none; margin:0 0 0 auto; }
.o .o-tab-mine .o-tab { background:none; border:0; font:inherit; font-weight:700; font-size:15px; color:var(--spruce); cursor:pointer; white-space:nowrap; gap:5px; }
.o-tab-mine .o-tab:focus-visible { outline:2px solid var(--spruce); outline-offset:-4px; border-radius:6px; }
.o-tab:focus-visible { outline:2px solid var(--spruce); outline-offset:-4px; border-radius:8px; }

.o-flash { margin:0; background:var(--spruce-soft); border-radius:12px; padding:12px 14px; }
.o-flash.err { background:var(--brick-soft); }
.o-flash.link { display:flex; flex-direction:column; gap:8px; }
.o-copy { display:flex; gap:8px; }
.o-copy input { flex:1; min-width:0; font-family:ui-monospace, Menlo, monospace; font-size:14px; }
/* Spec 16: his lasting address, as text that wraps, with Copy beside it. */
.o-addr { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.o-addr strong { font-weight:600; overflow-wrap:anywhere; }

.o-sec { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; min-width:0; }
.o-sec + .o-sec { margin-top:16px; }
.o-sec h2 { font-size:17px; font-weight:600; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.o-sec h3 { font-size:16px; font-weight:600; margin:0 0 8px; }
.o-sec p { margin:0 0 10px; }
.o-sec p:last-child { margin-bottom:0; }
.o-count { min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line);
  font-size:13px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; color:var(--muted); }
.o-count.warn { background:var(--timber-soft); border-color:transparent; color:var(--ink); }
.o-empty { color:var(--muted); background:var(--panel-2); border:1px dashed var(--line); border-radius:12px; padding:14px; margin:0; }
.o-split { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:16px; align-items:start; }
@media (max-width:860px) { .o-split { grid-template-columns:minmax(0, 1fr); } }

/* ---- controls ---- */
.o-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .45s var(--spring, cubic-bezier(.3,1.5,.5,1)), background-color .2s, border-color .2s; }
.o .o-btn { color:var(--ink); }
.o-btn:hover { border-color:var(--spruce); }
.o-btn:active { transform:scale(.96); transition-duration:.08s; }
.o-btn:focus-visible { outline:3px solid var(--timber); outline-offset:2px; }
.o-btn.primary, .o .o-btn.primary { background:var(--spruce); border-color:var(--spruce); color:var(--panel); }
.o-btn.quiet { background:transparent; }
.o-btn.danger, .o .o-btn.danger { color:var(--brick); border-color:var(--brick); background:transparent; }
summary.o-btn { list-style:none; }
summary.o-btn::-webkit-details-marker { display:none; }

.o-fields { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0; }
.o-fields label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted); min-width:0; }
.o input[type=text], .o input[type=tel], .o input[type=number], .o input[type=time], .o input[type=date], .o input[type=password], .o select, .o textarea {
  font:inherit; font-size:16px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); max-width:100%; }
.o input[type=number] { width:6.5em; }
.o input:focus-visible, .o select:focus-visible, .o textarea:focus-visible { outline:3px solid var(--timber); outline-offset:1px; }
.o-check { flex-direction:row !important; align-items:center; gap:8px !important; min-height:44px; color:var(--ink) !important; font-size:15px !important; }
.o input[type=checkbox] { width:20px; height:20px; accent-color:var(--spruce); }

.o-pill { display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:2px 9px; background:var(--panel-2); color:var(--muted);
  border:1px solid var(--line); white-space:nowrap; }
.o-pill.good { background:var(--spruce-soft); border-color:transparent; color:var(--ink); }
.o-pill.warn { background:var(--timber-soft); border-color:transparent; color:var(--ink); }
.o-pill.bad { background:var(--brick-soft); border-color:transparent; color:var(--ink); }

/* Two taps for anything that cuts someone off: the first opens the warning, the second does it. */
.o-confirm > summary { cursor:pointer; }
.o-confirm[open] { flex-basis:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:12px; }
.o-confirm[open] > summary { margin-bottom:8px; }
.o-confirm p { margin:0 0 10px; }

/* ---- the time-card rack ----
   Each guy on the clock is a card in the rack: a notch where the clock punched it, his name,
   the job, when he came in, and the hours running on the right, big. */
.o-rack { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.o-punch { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"name run" "job in";
  gap:2px 14px; padding:12px 16px 12px 22px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.o-punch::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:5px; border-radius:0 4px 4px 0; background:var(--spruce); }
.o-punch-name { grid-area:name; font-weight:800; font-size:17px; overflow-wrap:anywhere; }
.o-punch-job { grid-area:job; color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.o-punch-in { grid-area:in; color:var(--muted); font-size:13px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.o-punch-run { grid-area:run; font-weight:800; font-size:22px; line-height:1.1; color:var(--spruce); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.o-task { color:var(--ink); font-weight:600; }
.o-task::before { content:'· '; color:var(--muted); font-weight:400; }

.o-notin { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0 0; }
.o-notin-label { font-weight:700; font-size:14px; margin-right:4px; }
.o-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; background:var(--timber-soft);
  font-size:14px; font-weight:600; }

.o-jobs { width:100%; border-collapse:collapse; font-size:15px; }
.o-jobs td, .o-jobs th { padding:8px 0; border-top:1px solid var(--line); text-align:left; vertical-align:middle; }
.o-jobs td + td, .o-jobs th + th { padding-left:12px; }
.o-jobs tr:first-child td, .o-jobs thead th { border-top:0; }
.o-jobs thead th { font-size:13px; color:var(--muted); font-weight:600; }
.o-jobs tfoot td { font-weight:700; border-top:2px solid var(--line); }

/* ---- Needs a look and the timesheet ---- */
.o-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.o-list > li { padding:12px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.o-list > li:first-child { border-top:0; padding-top:0; }
.o-list .o-fields { margin-top:10px; }
.o-late { margin-top:12px; }
.o-late summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
.o-late ul { margin:6px 0 0; padding-left:18px; }

.o-postnow { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; padding:14px 18px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); }
p.o-postnow { display:block; }
/* Post now (or why there's nothing to post) on the left, the way out to QuickBooks Time on the right;
   stacked at phone width. */
.o-postnow-form { display:flex; flex-wrap:wrap; align-items:center; gap:12px; flex:1 1 20rem; min-width:0; margin:0; }
.o-postnow-off { flex:1 1 20rem; min-width:0; margin:0; }
.o-qbt-out { margin-left:auto; white-space:nowrap; }
.o-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.o-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.o-grid { width:100%; border-collapse:collapse; font-size:15px; min-width:620px; }
.o-grid th, .o-grid td { padding:9px 8px; border-top:1px solid var(--line); }
.o-grid thead th { border-top:0; font-size:13px; color:var(--muted); font-weight:700; }
.o-grid thead th span { display:block; font-weight:400; }
.o-grid tbody th { text-align:left; font-weight:700; white-space:nowrap; }
.o-grid tbody th a { color:var(--ink); text-decoration:none; }
.o-person { border-top:1px solid var(--line); }
.o-person > summary { cursor:pointer; min-height:48px; display:flex; align-items:center; gap:8px; }
.o-person h4 { font-size:14px; margin:12px 0 6px; color:var(--muted); }
.o-blocks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.o-block { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px 12px;
  background:var(--panel-2); border-radius:10px; }
.o-block.edit { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.o-block-span { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.o-block-len { align-self:center; font-variant-numeric:tabular-nums; display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.o-add { margin:12px 0 14px; padding-top:12px; border-top:1px dashed var(--line); }

/* ---- People and Projects: one card each ---- */
.o-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.o-cards.wide { grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width:480px) { .o-cards, .o-cards.wide { grid-template-columns:minmax(0, 1fr); } }
.o-pcard { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.o-pcard.paused { background:var(--panel-2); }
.o-pcard-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.o-pcard-head h3 { font-family:var(--display); font-size:19px; font-weight:500; letter-spacing:-.03em; margin:0; overflow-wrap:anywhere; }
.o-pcard-head h3 a { color:var(--ink); text-decoration:none; }
.o-pcard-head h3 a:hover { color:var(--spruce); }
.o-role { flex:none; font-size:13px; font-weight:700; color:var(--muted); }
.o-role.boss, .o-role.on { color:var(--spruce); }
.o-facts { margin:0; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.o-facts > div { display:grid; grid-template-columns:7.5em minmax(0, 1fr); gap:8px; align-items:baseline; }
.o-facts dt { color:var(--muted); }
.o-facts dd { margin:0; overflow-wrap:anywhere; }
/* Spec 18: the three actions as one quiet text row, so a screen of cards isn't a screen of buttons. */
.o-pcard-actions { display:flex; flex-wrap:wrap; gap:0 6px; border-top:1px solid var(--hair, var(--line)); padding-top:6px; }
.o-pcard-actions .o-btn { border-color:transparent; background:transparent; color:var(--spruce); padding:0 8px; min-height:40px; font-size:14px; }
.o-pcard-actions .o-btn:hover { background:var(--tint, var(--spruce-soft)); }
.o-pcard-actions .o-btn.danger, .o-pcard-actions .o-btn.o-danger { color:var(--brick); }
.o-pcard-actions form { margin:0; }
.o-edit { border-top:1px solid var(--line); padding-top:4px; }
.o-edit > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--spruce); }
.o-edit form { margin-top:8px; }
.o-addperson { margin-top:0; }
.o-paused > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; }
.o-tasks input[type=number] { width:5.5em; }
.o-tasks .o-btn { margin-top:8px; }

/* ---- Shout-outs ---- */
/* Spec 21: the crew's podium and rows, and the wall as the crew see it (podium.css), with the
   bosses' pills and Remove under each shout-out. */
.o-podium { display:flex; flex-direction:column; gap:14px; }
.o-wall-foot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; }
.o-wall-foot form.inline { margin-left:auto; }
.o-textbody { white-space:pre-line; color:var(--muted); font-size:14px; margin-top:4px; }

/* Older pieces carried over from the spec 06 admin page (tables, forms, pills). */
.o table.rows { width:100%; border-collapse:collapse; font-size:14px; }
.o table.rows td, .o table.rows th { padding:8px 6px; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.o table.rows thead th { border-top:0; color:var(--muted); font-weight:600; }
.o table.rows .right { text-align:right; }
.o .scroll { overflow-x:auto; }
.o .sub { color:var(--muted); font-size:14px; margin:0 0 10px; }
.o .muted { color:var(--muted); }
.o form.inline { display:inline; }
.o .fields { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.o .fields label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted); }
.o .fields textarea { min-height:120px; width:100%; }
.o .pill { display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:2px 9px; background:var(--panel-2); color:var(--muted); }
.o .pill.warn { background:var(--timber-soft); color:var(--ink); }
.o .pill.bad { background:var(--brick-soft); color:var(--ink); }
.o .pill.good { background:var(--spruce-soft); color:var(--ink); }
.o .flash { background:var(--timber-soft); border-radius:12px; padding:12px 14px; }
.o button:not(.o-btn) { font:inherit; font-size:15px; font-weight:700; min-height:44px; padding:0 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; }
.o button:not(.o-btn):hover { border-color:var(--spruce); }
.o button:not(.o-btn):focus-visible { outline:3px solid var(--timber); outline-offset:2px; }

/* ---- Settings: a side list on a desk, stacked on a phone ---- */
.o-set-layout { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:24px; align-items:start; }
.o-side { position:sticky; top:72px; display:flex; flex-direction:column; gap:2px; }
.o-side a { display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600; }
.o-side a:hover { background:var(--panel); }
.o-side a[aria-current="page"] { background:var(--panel); color:var(--spruce); box-shadow:inset 3px 0 0 var(--spruce); }
.o-side a:focus-visible { outline:2px solid var(--spruce); outline-offset:-2px; }
.o-set-body { display:flex; flex-direction:column; gap:16px; min-width:0; }
.o-set-body .o-sec + .o-sec { margin-top:0; }
.o-set-title { font-size:20px; font-weight:800; margin:0; }
.o-danger { border-color:var(--brick-soft); }
.o-start { border:2px solid var(--spruce); }
.o-device { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.o-device form { margin:0; flex:none; }
@media (max-width:760px) {
  .o-set-layout { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .o-side { position:static; flex-direction:row; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin:0 -16px; padding:0 16px; }
  .o-side::-webkit-scrollbar { display:none; }
  .o-side a { flex:none; border-radius:0; }
  .o-side a[aria-current="page"] { background:transparent; box-shadow:inset 0 -3px 0 var(--spruce); }
}

/* ---- the dashboard home's Crew today card ---- */
.o-today { padding:18px 20px; margin:0 0 22px; }
/* Spec 13: on Billy's home it follows the money tiles, which carry no margin of their own. */
.pulse + .o-today { margin-top:22px; }
.o-today-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.o-today-head h2 { font-size:20px; font-weight:800; margin:0; }
.o-today-head h2 a { color:var(--ink); text-decoration:none; }
.o-today-head h2 a:hover { color:var(--spruce); }
.o-look { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px; background:var(--timber-soft);
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; }
.o-look.ok { background:transparent; color:var(--muted); padding:0; }
/* Spec 13: two halves, the crew's day and the shout-outs, a line between; stacked on a phone,
   crew first. Bars are placed in percent by the server, so none of this needs JavaScript. */
.o-today-halves { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.o-today-shout { border-left:1px solid var(--line); padding-left:24px; margin-left:24px; min-width:0; }
.o-today-crew { min-width:0; }
@media (max-width:760px) {
  .o-today-halves { grid-template-columns:minmax(0, 1fr); }
  .o-today-shout { border-left:0; border-top:1px solid var(--line); padding:18px 0 0; margin:18px 0 0; }
}
.o-today h3 { font-size:14px; font-weight:700; color:var(--muted); margin:0 0 8px; display:flex; align-items:baseline; gap:8px; }
.o-today h3 b { color:var(--ink); font-size:15px; font-variant-numeric:tabular-nums; }
.o-today h3 a { color:inherit; text-decoration:none; }
.o-today h3 a:hover { color:var(--spruce); }
.o-today-sub { margin-top:16px; }
.o-today-sub h3 { margin-bottom:6px; }
.o-today .o-empty { margin:0; }
.o-today-more { margin:8px 0 0; font-size:14px; }

/* The day timeline: a name column, the track, and the hours. */
.o-tl { position:relative; padding-bottom:18px; }
.o-tl-axis, .o-tl-row, .o-tl-nowrow { display:grid; grid-template-columns:64px minmax(0, 1fr) 60px; align-items:center; }
.o-tl-ticks { position:relative; height:18px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.o-tl-ticks span { position:absolute; top:0; transform:translateX(-50%); }
.o-tl-ticks span:first-child { transform:none; }
.o-tl-ticks span:last-child { transform:translateX(-100%); }
.o-tl-rows { list-style:none; margin:0; padding:0; }
.o-tl-row { min-height:34px; border-top:1px solid var(--line); }
.o-tl-name { font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; min-width:0; overflow-wrap:anywhere; line-height:1.2; padding-right:6px; }
.o-tl-live { flex:none; width:7px; height:7px; border-radius:50%; background:var(--spruce); box-shadow:0 0 0 3px var(--spruce-soft); }
.o-tl-track { position:relative; height:34px; background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px); background-repeat:repeat-x; }
.o-tl-bar { position:absolute; top:10px; height:14px; border-radius:4px; }
/* A block still running has no end yet: its right edge is the now line, square. */
.o-tl-bar.run { border-radius:4px 0 0 4px; }
.o-tl-hrs { text-align:right; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
.o-tl-notin .o-tl-name { color:var(--muted); font-weight:600; }
.o-tl-notin .o-tl-hrs { color:var(--muted); font-weight:600; font-size:13px; }
.o-tl-mark { position:absolute; top:10px; width:22px; height:14px; border-radius:4px; transform:translateX(-50%);
  background:repeating-linear-gradient(135deg, var(--timber) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1.5px var(--timber); }
.o-tl-nowrow { position:absolute; inset:18px 0 0 0; pointer-events:none; }
.o-tl-nowtrack { position:relative; height:100%; }
.o-tl-now { position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--ink); }
.o-tl-now b { position:absolute; bottom:-16px; transform:translateX(-50%); font-size:11px; font-weight:700; line-height:1; }

/* Hours by job: one stacked bar, a 2px gap between jobs, and its legend. */
.o-stack { display:flex; gap:2px; height:14px; border-radius:4px; overflow:hidden; }
.o-stack span { display:block; min-width:3px; }
.o-legend { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; }
.o-legend li { display:flex; align-items:center; gap:6px; min-width:0; }
.o-legend i { flex:none; width:10px; height:10px; border-radius:3px; }
.o-legend span { color:var(--muted); }
.o-legend b { font-variant-numeric:tabular-nums; }

/* Shout-outs: the ring to Friday's draw, the count, the card and the latest one. */
.o-shout-top { display:flex; align-items:center; gap:20px; }
.o-ring { flex:none; }
.o-ring-track { stroke:var(--spruce-soft); }
.o-ring-fill { stroke:var(--spruce); }
.o-ring-big { font:800 19px "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; fill:var(--ink); font-variant-numeric:tabular-nums; }
.o-ring-small { font:600 11px "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; fill:var(--muted); }
.o-shout-count { display:flex; flex-direction:column; gap:2px; min-width:0; }
.o-shout-count > b { font-size:40px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
.o-shout-count > span { color:var(--muted); font-size:14px; }
.o-shout-count .o-shout-vs { color:var(--ink); font-size:13px; }
.o-shout-count .o-shout-card { margin-top:8px; align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--timber-soft);
  color:var(--ink); font-size:13px; font-weight:700; }
/* Spec 21: this week's top three as a small podium, then the latest one as the wall's row. */
.o-shout-pod { margin:18px 0 0; }
.o-shout-pod h4 { margin:0 0 10px; font-size:13px; font-weight:600; color:var(--muted); }
.o-today .o-latest { display:block; margin:12px 0 0; color:var(--ink); text-decoration:none; border-top:1px solid var(--line); border-radius:0; }
.o-today .o-latest:hover .c-who, .o-today .o-latest:focus-visible .c-who { color:var(--spruce); }
.o-today .o-latest .sb-wall > li { padding-bottom:0; }
.o-home { gap:14px; }

/* ---- sign-in ---- */
body.lg { margin:0; min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(0, 1fr); place-items:center; padding:24px 16px; }
.lg-card { width:min(400px, 100%); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:28px 24px;
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow); }
.lg-logo { width:220px; max-width:100%; height:auto; display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-logo { filter:brightness(1.45); } }
.lg-h { font-family:var(--display); font-size:24px; font-weight:500; letter-spacing:-.03em; margin:4px 0 0; line-height:1.2; text-align:center; }
.lg-lede { text-align:center; }
.lg-logo { margin:0 auto; }
.lg-lede { margin:-6px 0 0; color:var(--muted); }
.lg-error { margin:0; background:var(--brick-soft); border-radius:12px; padding:12px 14px; font-size:15px; }
/* The names are the way in: big, one tap each. */
.lg-names { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lg-name { display:flex; align-items:center; justify-content:center; min-height:64px; border-radius:14px; border:2px solid var(--line);
  background:var(--panel); color:var(--ink); font-weight:800; font-size:20px; text-decoration:none;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1), border-color .2s, background-color .2s; }
.lg-name:hover { border-color:var(--spruce); background:var(--spruce-soft); }
.lg-name:active { transform:scale(.96); transition-duration:.08s; }
.lg-name:focus-visible { outline:2px solid var(--spruce); outline-offset:2px; }
.lg-mobile label, .lg-password label { display:block; font-size:14px; color:var(--muted); margin:0 0 6px; }
.lg-inline { display:flex; gap:8px; }
.lg-inline input { flex:1; min-width:0; }
.lg-card input { font:inherit; font-size:17px; min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); color:var(--ink); width:100%; }
.lg-inline input { width:auto; }
.lg-card input:focus-visible { outline:2px solid var(--spruce); outline-offset:1px; }
.lg-form { display:flex; flex-direction:column; gap:14px; }
.lg-pin { display:flex; flex-direction:column; gap:6px; font-weight:700; }
.lg-pin input { font-family:var(--display); font-size:28px; letter-spacing:.5em; text-indent:.5em; text-align:center; min-height:64px; border-width:1.5px; font-variant-numeric:tabular-nums; }
.lg-btn { display:flex; align-items:center; justify-content:center; min-height:56px; padding:0 20px; border-radius:14px; border:0;
  background:var(--spruce); color:var(--panel); font:inherit; font-weight:800; font-size:18px; cursor:pointer; width:100%;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1); }
.lg-btn:active { transform:scale(.97); transition-duration:.08s; }
.lg-btn:focus-visible { outline:2px solid var(--spruce); outline-offset:2px; }
.lg-btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); font-size:16px; min-height:48px; width:auto; }
.lg-password { border-top:1px solid var(--line); padding-top:12px; }
.lg-password summary { cursor:pointer; color:var(--muted); font-size:14px; min-height:40px; display:flex; align-items:center; }
.lg-password form { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.lg-password .lg-btn.ghost { width:100%; }
.lg-alt { margin:0; display:flex; justify-content:center; }
.lg-alt form { margin:0; }
.lg-link { background:none; border:0; padding:8px; min-height:44px; color:var(--spruce); font:inherit; font-size:15px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
a.lg-link { display:inline-flex; align-items:center; }
[hidden] { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  .o-btn, .lg-name, .lg-btn, .o-tab::after { transition:none !important; }
}
.o-facelist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.o-facelist li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.o-facelist li > span { display:flex; flex-direction:column; }

/* ---- Face ID / fingerprint on the sign-in page (spec 11) ---- */
.lg .pk { display:flex; flex-direction:column; gap:10px; }
.lg .pk-btn { gap:10px; width:100%; }
.lg .lg-btn.ghost.wide { width:100%; }
.lg .pk-btn .pk-icon { flex:0 0 auto; }
.lg .pk-lead .pk-btn { min-height:64px; font-size:19px; }
.lg .pk-btn[aria-busy="true"] { opacity:.75; }
.lg .pk-show-pin { align-self:center; margin-top:-8px; }
.lg-fallback { display:flex; flex-direction:column; gap:14px; }
.lg-offer { display:flex; flex-direction:column; gap:16px; }
.lg-offer .lg-lede { margin:0; }
.lg .pk-art { display:grid; place-items:center; width:80px; height:80px; border-radius:22px; background:var(--ground); border:1px solid var(--line); color:var(--spruce); }
.lg .pk-art .pk-icon { width:44px; height:44px; stroke-width:1.5; }

/* ---- Daily updates (spec 14): the updates and the form are in updates.css, shared with Dave's
   crew page. Only the home card's strip is here. ---- */
/* The strip across the top of the home crew card: today's newest update, one line. */
a.o-upd { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-height:44px; margin:0 0 16px; padding:8px 14px;
  border-radius:12px; background:var(--timber-soft); color:var(--ink); text-decoration:none; }
a.o-upd:hover { box-shadow:inset 0 0 0 1px var(--timber); }
.o-upd-tag { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--panel); border-radius:999px; padding:3px 9px; }
.o-upd-text { flex:1 1 240px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.o-upd-more, .o-upd-seen { font-size:13px; color:var(--muted); white-space:nowrap; }
.o-upd.none { margin:0 0 16px; padding:10px 14px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:14px; }
.o-upd.none a { color:var(--spruce); font-weight:700; }

/* View as and Act as (spec 17): Billy's buttons on a crew card, and the "Billy as Noah" tag. The
   crew pages' banner colour, so the two read as one thing. */
.o-va-actions { border-top:1px dashed var(--line); padding-top:10px; }
.o-btn.o-va { color:#2E2652; border-color:#2E2652; }
.o-btn.o-va.quiet { border-style:dashed; }
.o-pill.o-va-tag { background:#E7E2FA; color:#2E2652; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-btn.o-va { color:#D9D1F7; border-color:#B9A8F0; }
  :root:not([data-theme="light"]) .o-pill.o-va-tag { background:#2E2652; color:#D9D1F7; }
}
:root[data-theme="dark"] .o-btn.o-va { color:#D9D1F7; border-color:#B9A8F0; }
:root[data-theme="dark"] .o-pill.o-va-tag { background:#2E2652; color:#D9D1F7; }


/* Spec 18: Needs a look leads Crew -> Today when it has anything: full width, a brick stripe
   (it is a fault list), the fix forms inside. */
.o-sec[data-first] { border-left:4px solid var(--brick); }

/* ---- Crew -> Projects: a job's files, links and guides (spec 19) ----
   The add panel is the page's one raised object (a sticky column on a desktop, first on a phone);
   each section's items are rows with their actions as quiet text buttons. */
.pf-files { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; min-height:44px; padding:8px 12px; margin:0 -4px;
            border-radius:12px; background:var(--tint, var(--spruce-soft)); color:var(--ink); text-decoration:none; font-size:14px; }
.pf-files strong { color:var(--spruce); font-weight:700; }
.pf-files:hover strong { text-decoration:underline; }
.pf-layout { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(300px, 1fr); gap:16px; align-items:start; }
.pf-layout > .pf-add { grid-column:2; grid-row:1; position:sticky; top:16px; }
.pf-layout > .pf-secs { grid-column:1; grid-row:1; }
@media (max-width:860px) {
  .pf-layout { grid-template-columns:minmax(0, 1fr); }
  .pf-layout > .pf-add, .pf-layout > .pf-secs { grid-column:1; grid-row:auto; position:static; }
  .pf-layout.guide > .pf-add { grid-row:2; }
}
.pf-add { border:0; box-shadow:var(--raise); border-radius:var(--r-object, 20px); display:flex; flex-direction:column; gap:14px; }
.pf-add h2 { margin:0; }
.pf-upload { display:flex; flex-direction:column; gap:12px; margin:0; }
.pf-drop { position:relative; display:block; border:1.5px dashed color-mix(in srgb, var(--spruce) 45%, transparent); border-radius:12px; background:var(--panel-2); cursor:pointer; }
.pf-drop input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.pf-drop span { display:flex; flex-direction:column; gap:2px; padding:16px; font-size:14px; color:var(--muted); }
.pf-drop strong { color:var(--spruce); font-size:16px; }
.pf-drop:focus-within { outline:2px solid var(--spruce); outline-offset:2px; }
.pf-progress { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.pf-progress li { position:relative; display:flex; justify-content:space-between; gap:10px; padding:8px 10px 10px; border-radius:10px; background:var(--panel-2); overflow:hidden; }
.pf-pname { min-width:0; overflow-wrap:anywhere; }
.pf-pstate { flex:none; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; max-width:60%; }
.pf-pbar { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--spruce); transform-origin:left; transform:scaleX(var(--p, 0)); transition:transform .2s; }
.pf-progress li.good .pf-pstate { color:var(--spruce); font-weight:700; }
.pf-progress li.bad { background:var(--brick-soft); }
.pf-progress li.bad .pf-pstate { color:var(--ink); }
.pf-progress li.bad .pf-pbar { display:none; }
.pf-fold { border-top:1px solid var(--hair, var(--line)); padding-top:4px; }
.pf-fold > summary { min-height:44px; display:flex; align-items:center; font-weight:600; cursor:pointer; color:var(--spruce); }
.pf-col { flex-direction:column; align-items:stretch; }
.pf-col label input, .pf-col label select { width:100%; }
.pf-col .o-btn { align-self:flex-start; }

.pf-sec h2 { margin-bottom:4px; }
.pf-list { list-style:none; margin:0; padding:0; }
.pf-item { display:flex; flex-direction:column; gap:4px; padding:12px 0 8px; border-top:1px solid var(--hair, var(--line)); }
.pf-item:first-child { border-top:0; padding-top:4px; }
.pf-item.hidden .pf-main { opacity:.6; }
.pf-main { display:flex; align-items:center; gap:12px; min-width:0; }
.pf-ic { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--panel-2); color:var(--spruce); }
.pf-txt { min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-name { display:inline-flex; align-items:center; min-height:44px; margin:-10px 0; font-weight:700; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.pf-up { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.pf-name:hover { color:var(--spruce); text-decoration:underline; }
.pf-meta { font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.pf-actions { display:flex; flex-wrap:wrap; align-items:center; gap:0 2px; margin-left:46px; }
.pf-actions form { margin:0; }
.pf-actions .o-btn { border-color:transparent; background:transparent; color:var(--spruce); padding:0 10px; min-height:44px; font-size:14px; font-weight:600; }
.pf-actions .o-btn:hover { background:var(--tint, var(--spruce-soft)); }
.pf-actions .o-btn.danger, .pf-actions summary.danger { color:var(--brick); border-color:transparent; }
.pf-thumb { flex:none; width:38px; height:38px; border-radius:12px; object-fit:cover; background:var(--panel-2); }
.pf-thumb.video { width:56px; height:32px; border-radius:8px; margin-block:3px; }
.pf-vidpics { border-top:1px solid var(--hair, var(--line)); padding-top:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pf-actions details.o-confirm[open] { flex-basis:100%; margin:6px 0; }
.pf-actions details.o-confirm[open] .o-btn.primary { color:var(--panel); background:var(--spruce); }
.pf-actions details.o-confirm[open] .o-btn.danger { border-color:var(--brick); }
@media (max-width:480px) { .pf-actions { margin-left:0; } }

/* A guide's steps in the editor. */
.pf-steps { list-style:none; margin:0; padding:0; }
.pf-step { padding:14px 0 6px; border-top:1px solid var(--hair, var(--line)); }
.pf-step:first-child { border-top:0; padding-top:0; }
.pf-step-head { display:flex; align-items:baseline; gap:12px; }
.pf-step-n { font-family:var(--display); font-size:22px; color:var(--spruce); min-width:1.3em; font-variant-numeric:tabular-nums; }
.pf-step-head h3 { margin:0; font-size:16px; font-weight:700; overflow-wrap:anywhere; }
.pf-step-body { margin:6px 0 6px calc(1.3em + 12px); font-size:15px; color:var(--ink); }
.pf-step-body p, .pf-step-body ul { margin:0 0 6px; }
.pf-step .o-muted.o-small { margin-left:calc(1.3em + 12px); }
.pf-step .pf-actions { margin-left:calc(1.3em + 4px); }
.pf-stepform { display:flex; flex-direction:column; gap:12px; margin:0; }
.pf-label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted); }
.pf-label input, .pf-label textarea { width:100%; }
.o textarea { font:inherit; font-size:16px; line-height:1.45; }
.pf-stepform .o-btn { align-self:flex-start; }
.pf-picks { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.pf-picks legend { font-size:13px; font-weight:600; color:var(--muted); padding:0; margin-bottom:4px; }
.pf-pickgroup { display:flex; flex-direction:column; gap:2px; }
.pf-pick { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 6px; border-radius:10px; cursor:pointer; font-size:14px; overflow-wrap:anywhere; }
.pf-pick:hover { background:var(--panel-2); }
.pf-pick img { width:40px; height:40px; object-fit:cover; border-radius:8px; flex:none; background:var(--panel-2); }
.pf-pick .pf-ic { width:40px; height:40px; }
.pf-pick input { flex:none; }

/* Spec 32: Settings -> Inquiries. */
.o-inquiry-msg { max-width:60ch; margin:8px 0 12px; }
.o-list li.o-done { opacity:.7; }

/* Spec 35: today's photos from the crew on the home card, and the crew's own group on a job's
   files page (Crew -> Projects). */
.o-photos { margin:0 0 16px; }
.o-photo-strip { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:6px; }
.o-photo-strip a { position:relative; display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--panel-2); text-decoration:none; }
.o-photo-strip img { display:block; width:100%; height:100%; object-fit:cover; }
.o-photo-by { position:absolute; left:0; right:0; bottom:0; padding:12px 6px 3px; font-size:11px; font-weight:700; color:#fff;
              background:linear-gradient(transparent, rgba(0,0,0,.55)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-photo-more a { display:flex; align-items:center; justify-content:center; color:var(--spruce); font-weight:700; font-size:15px; border:1px dashed var(--line); background:transparent; }
.pf-day { font-size:14px; font-weight:700; margin:14px 0 8px; }
.pf-day span { color:var(--muted); font-weight:400; }
.pf-crew-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.pf-crew-tile { display:flex; flex-direction:column; gap:4px; scroll-margin-top:16px; }
.pf-crew-tile > a { display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--panel-2); }
.pf-crew-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.pf-crew-tile.hidden > a { opacity:.5; }
.pf-crew-tile:target > a { box-shadow:0 0 0 3px var(--timber); }
.pf-crew-by { font-size:13px; color:var(--muted); }
.pf-crew-actions { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start; }
.pf-crew-actions form { margin:0; }

/* ---- Crew -> Photos (spec 41): every job photo, filters, ticks for bulk Hide ---- */
.ph-filters { padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.ph-filters select, .ph-filters input { min-height:44px; max-width:100%; }
.ph-count { margin:0 0 10px; }
.ph-bulk { position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 -18px; padding:8px 18px;
           background:var(--panel); border-bottom:1px solid var(--line); }
.ph-day { font-size:14px; font-weight:700; margin:16px 0 8px; }
.ph-day span { color:var(--muted); font-weight:400; }
.ph-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:14px; }
.ph-tile { position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; scroll-margin-top:72px; }
.ph-pic { display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--panel-2); }
.ph-pic img { display:block; width:100%; height:100%; object-fit:cover; }
.ph-tile.hidden .ph-pic { opacity:.5; }
.ph-tile:target .ph-pic { box-shadow:0 0 0 3px var(--timber); }
.ph-tick { position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px;
           border-radius:10px; background:color-mix(in srgb, var(--panel) 88%, transparent); font-size:13px; font-weight:700; cursor:pointer; }
.ph-tick input { width:20px; height:20px; margin:0; accent-color:var(--spruce); }
.ph-tile:has(.ph-tick input:checked) .ph-pic { box-shadow:0 0 0 3px var(--spruce); }
.ph-meta { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--muted); min-width:0; }
.ph-job { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:24px; }
.ph-pills { position:absolute; top:6px; right:6px; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; pointer-events:none; }
.ph-pills .o-pill { background:var(--panel); }
.ph-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; align-items:start; }
.ph-actions form, .ph-actions details:not([open]) { margin:0; min-width:0; }
.ph-actions .o-btn { width:100%; padding:0 4px; font-size:14px; }
.ph-actions .o-confirm[open] { grid-column:1 / -1; }
.ph-pager { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; }
@media (max-width:480px) { .ph-bulk > span { display:none; } .ph-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .ph-filters label { flex:1 1 140px; } }

/* ---- Hours by job (Billy, 2026-10-28): Crew -> Timesheet and the home card ---- */
.o-byjob { min-width:0; }
.o-byjob th, .o-byjob td { white-space:nowrap; }
.o-byjob thead th:first-child, .o-byjob tbody th, .o-byjob tfoot th { position:sticky; left:0; background:var(--panel); text-align:left; z-index:1; }
.o-byjob tbody th { font-weight:600; }
.o-byjob .o-subrow th { font-weight:400; color:var(--muted); padding-left:22px; }
.o-byjob .o-subrow td { color:var(--muted); border-top-style:dashed; }
.o-byjob tfoot th, .o-byjob tfoot td { font-weight:700; border-top:2px solid var(--line); }
.o-byjob-note { margin:14px 0 4px; font-size:14px; }
.o-days { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.o-days li { display:flex; flex-wrap:wrap; gap:4px 10px; padding:8px 12px; background:var(--panel-2); border-radius:10px; line-height:1.4; }
.o-day { font-weight:700; min-width:92px; }
.o-weekjob .o-scroll { margin:0 -4px; }
.o-dayjobs { display:flex; flex-wrap:wrap; gap:2px 0; }
.o-dayjobs > span + span::before { content:"·"; color:var(--muted); padding:0 8px; }
@media (max-width:760px) {
  /* On a phone the job names wrap so more of the crew fit beside them; each job its own line. */
  .o-byjob tbody th, .o-byjob tfoot th { white-space:normal; min-width:7.5em; max-width:9em; line-height:1.3; }
  .o-byjob th, .o-byjob td { padding-left:6px; padding-right:6px; }
  .o-dayjobs { flex-direction:column; }
  .o-dayjobs > span + span::before { content:none; }
}

/* Spec 43: no dead ends. Names and jobs are links to their pages; they read as the text they were,
   underlined quietly, spruce on hover. Chips and fix links stand alone, so they get 44px. */
.o a.o-link { color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.o a.o-link:hover, .o a.o-link:focus-visible { color:var(--spruce); text-decoration-color:currentColor; }
.o a.o-chip-link { min-height:44px; color:var(--ink); text-decoration:none; }
.o a.o-chip-link:hover, .o a.o-chip-link:focus-visible { box-shadow:inset 0 0 0 1.5px var(--timber); }
.o a.o-fix { display:inline-flex; align-items:center; gap:4px; min-height:44px; color:var(--spruce); font-weight:700; text-decoration:none; white-space:nowrap; }
.o a.o-fix:hover, .o a.o-fix:focus-visible { text-decoration:underline; }
.o .o-person-more { margin:6px 0 10px; }
.o .o-person-more a.o-link { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-weight:600; }

/* ---- likes (spec 65a): the count in a photo's corner, read-only ---- */
.ph-pic { position:relative; }
.lk-badge { position:absolute; top:6px; right:6px; display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border-radius:999px;
            background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:700; line-height:1.2; pointer-events:none; }

/* ---- comments on the dashboard (spec 65b) ---- */
/* Crew -> Photos' tiles and Crew -> Shout-outs' rows: "💬 2 comments" folded, each with Remove. */
.cm-desk { margin-top:6px; font-size:14px; }
.cm-desk > summary { cursor:pointer; color:var(--soft-ink, var(--muted)); font-weight:600; min-height:32px; display:flex; align-items:center; }
.cm-desk ul { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cm-desk li { background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-width:0; }
.cm-desk .cm-body { margin:2px 0 4px; overflow-wrap:anywhere; }
.cm-desk .o-confirm { display:block; }
.cm-desk .o-confirm > summary { display:inline-flex; }
.cm-desk .o-confirm[open] { padding:8px; }