/* Provider hub (T18, rebrand 3 Nov 2026). Raised sidebar from 1024px, bottom tabs below (decision 32: breakpoints 600 and 1024).
   Colours come from tokens.css only. */
.site-hub { background: var(--surface); }
#app { flex: 1; display: flex; flex-direction: column; }
.sub { font: 600 var(--fs-caption)/var(--lh-caption) var(--body); margin-left: 10px; color: var(--ink-muted); }
.hubah .lnk { color: var(--ink); }
.hbn { color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hub { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.hubside { display: none; }
.hub .m { max-width: 1080px; width: 100%; padding-bottom: 96px; }
.hub .m:focus { outline: none; }

/* bottom tabs: phone and tablet */
.hubnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface-raised); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.hubnav a { position: relative; min-height: 56px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 600 11px var(--body); color: var(--ink-muted); text-decoration: none; }
.hubnav a[aria-current="page"] { color: var(--cobalt); }
.hubnav .cnt { position: absolute; top: 4px; left: calc(50% + 6px); background: var(--cobalt); color: var(--on-cobalt); font: 600 11px/16px var(--body); padding: 0 5px; border-radius: var(--r-chip); }
.cnt[hidden] { display: none; }

/* sidebar: desktop */
@media (min-width: 1024px) {
  .hub { grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
  .hub > .ah, .hubnav { display: none; }
  .hubside { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; align-self: start; height: 100dvh; overflow: auto; background: var(--surface-raised); color: var(--ink); border-right: 1px solid var(--line); padding: 18px 12px; }
  .hubside .sub { margin: 4px 0 0 2px; }
  .hbiz { margin: 14px 0 10px; padding: 12px; border-radius: var(--r-card); background: var(--fill); }
  .hbiz span { display: block; color: var(--ink-muted); }
  .hn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-chip); background: none; color: var(--ink-muted); font: 600 15px var(--body); text-align: left; text-decoration: none; }
  .hn:hover { background: var(--fill); color: var(--ink); }
  .hn[aria-current="page"] { background: var(--cobalt-soft); color: var(--cobalt); }
  .hn .cnt { margin-left: auto; font: 600 12px var(--body); background: var(--cobalt); color: var(--on-cobalt); padding: 1px 7px; border-radius: var(--r-chip); }
  .hn.out { margin-top: auto; }
  .hub .m { padding: 24px 24px 56px; margin: 0; }
}

/* content */
.hub .m > * + *, .site-hub .m > * + * { margin-top: 16px; }
.agrid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.agrid > * + * { margin-top: 0; }
@media (min-width: 600px) { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .agrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
/* long unbroken user text (titles, names, addresses) wraps inside its cell instead of widening the page */
.hub .m { overflow-wrap: anywhere; }
.hub .m :is(.between, .row, .card, .kv) > * { min-width: 0; }
.hub .m .between > .bdg { flex: none; }
.grid2 { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack > * + * { margin-top: 12px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs figure { margin: 0; max-width: 96px; }
.thumbs img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--fill); }
.thumbs figure img { width: 72px; height: 72px; }
input[type=date], input[type=time], input[type=file] { width: 100%; min-height: 48px; font: 16px/1.4 var(--body); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-in); padding: 10px 12px; }
input[type=file] { padding: 8px; }
.lab { margin-bottom: 0; }
.row > .lab { margin: 0; }
.day.bkd { background: var(--fill); color: var(--ink-muted); text-decoration: line-through; font-weight: 400; }
.day.blk { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.day:disabled { cursor: not-allowed; }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); }
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 560px; }
.dt th { font: 600 var(--fs-caption)/var(--lh-caption) var(--body); color: var(--ink-muted); text-align: left; padding: 8px 10px; background: var(--fill); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dt tr:last-child td { border-bottom: 0; }
.mh h2 { text-align: center; }
@media (min-width: 1024px) { #app > .ah { display: flex; } }