/* App semantics on top of the brand tokens.
   The product runs on the dark surfaces from the brand sheet, so anything that
   was a solid Ink chip on a light card needs a value that still reads there. */
:root{
  --app-solid:var(--tc-ink);          /* a filled badge or icon tile */
  --app-solid-fg:var(--tc-bone);
  --app-toast-bg:var(--tc-ink);
  --app-toast-fg:var(--tc-bone);
  --app-track:var(--tc-sand);         /* pill tracks, hovers, small badges */
  --app-grid:rgba(18,20,23,.05);      /* the 72px hairline, marketing surfaces only */
  --app-scrim:rgba(18,20,23,.6);      /* behind a dialog */
}
[data-theme="dark"]{
  --app-solid:var(--tc-line);
  --app-solid-fg:var(--tc-bone);
  --app-toast-bg:var(--tc-bone);
  --app-toast-fg:var(--tc-ink);
  --app-track:var(--tc-line);
  --app-grid:rgba(244,241,234,.045);
  --app-scrim:rgba(18,20,23,.7);
}

/* ---- app bar ----------------------------------------------------------
   The shell from the brand book: the horizontal lockup top-left, the account
   it is showing beside it past a hairline divider. It is dark whatever the
   page beneath it is, so it reads as chrome rather than content. */
/* The lockup on top, the four places under it. Two rows at every width,
   so the shield and the wordmark are always both there and the pills
   always have the whole bar to sit across rather than fighting for what
   is left beside them. */
.tc-appbar{
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--tc-space-3); row-gap:var(--tc-space-3);
  background:var(--tc-ink); color:var(--tc-bone);
  border-radius:var(--tc-radius-lg);
  padding:var(--tc-space-3) var(--tc-space-4);
  margin-bottom:var(--tc-space-2);
}
.tc-appbar .tc-appbar-home{
  display:flex; align-items:center; gap:var(--tc-space-3);
  color:inherit; text-decoration:none; min-height:var(--tc-tap-min); flex-shrink:0;
}
.tc-appbar img{display:block; width:26px; height:auto}
.tc-appbar .tc-wordmark{font-size:15px; color:var(--tc-bone)}
.tc-appbar .tc-appbar-rule{display:none}   /* nothing beside the lockup to divide it from now */
/* The hamburger and the avatar ride on the bar's first row, hard right,
   dressed like the pills rather than like the page under them: an outline
   on black, muted until touched. Their menus drop below the bar onto the
   page, so those stay the light cards they are. */
.tc-appbar .account{margin-left:auto; flex-shrink:0; position:static}
/* Both menus hang off the **bar**, not off the row the buttons are on, or
   they would open over the pills. The block they live in goes static so
   they measure themselves against the bar instead. */
.tc-appbar .menu,
.tc-appbar .tc-nav{top:calc(100% + var(--tc-space-2)); right:0}
.tc-appbar .tc-burger,
.tc-appbar .avatar{
  background:none; border:1px solid var(--tc-line); color:var(--tc-text-muted-on-dark);
}
.tc-appbar .tc-burger:hover,
.tc-appbar .avatar:hover{color:var(--tc-bone); border-color:var(--tc-bone)}
.tc-appbar .tc-burger:focus-visible,
.tc-appbar .avatar:focus-visible{outline:3px solid var(--tc-signal); outline-offset:2px}
/* The four places to go, on a row of their own under the lockup — the home
   page's own pills in the dark strip's colours: an outline on black, muted
   until you are there. The bar stays one flat black; nothing here fills a
   panel on it. They share the row evenly, so all four hold one line from a
   320px phone upward. */
.tc-appbar .tc-appbar-nav{
  flex:1 1 100%; min-width:0; display:flex; align-items:center; gap:var(--tc-space-2);
}
.tc-appbar .tc-pill{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  min-height:34px; padding:0 var(--tc-space-1); border-radius:var(--tc-radius-pill);
  border:1px solid var(--tc-line); background:none; color:var(--tc-text-muted-on-dark);
  font-family:var(--tc-font-body); font-weight:600;
  /* Four labels across one row, on anything from a 320px phone up: the type
     takes what the row can give rather than a size being picked for one
     width and clipping "Accounts" at another. */
  font-size:clamp(11px, 3.1vw, var(--tc-text-sm));
  text-decoration:none; white-space:nowrap; overflow:hidden;
}
.tc-appbar .tc-appbar-nav{gap:var(--tc-space-1)}
.tc-appbar .tc-pill:hover{color:var(--tc-bone); border-color:var(--tc-bone)}
.tc-appbar .tc-pill[aria-current="page"]{color:var(--tc-bone); border-color:var(--tc-bone)}
@media (min-width:560px){
  .tc-appbar .tc-appbar-nav{gap:var(--tc-space-2)}
  .tc-appbar .tc-pill{flex:0 1 auto; min-height:38px; padding:0 var(--tc-space-5)}
}

/* The hospital whose page this is, said once under the bar. Every page
   inside an account looks alike otherwise. */
.tc-acctname{
  margin:0 0 var(--tc-space-2); padding:0 var(--tc-space-1);
  font-family:var(--tc-font-data); font-size:var(--tc-text-xs); font-weight:700;
  letter-spacing:var(--tc-tracking-data); text-transform:uppercase;
  color:var(--tc-text-muted); overflow-wrap:anywhere;
}
.tc-acctname[hidden]{display:none}
.tc-appbar a:focus-visible{outline:3px solid var(--tc-signal); outline-offset:2px}
@media (max-width:560px){
  .tc-appbar{padding:var(--tc-space-2) var(--tc-space-3)}
  .tc-appbar img{width:22px}
  .tc-appbar .tc-wordmark{font-size:13px}
}
/* On the narrowest phone the lockup gives way a little rather than the two
   controls dropping to a row of their own: three rows of chrome over a
   320px screen is a lot to look past to reach the page. */
@media (max-width:379px){
  .tc-appbar{gap:var(--tc-space-2)}
  .tc-appbar img{width:20px}
  .tc-appbar .tc-wordmark{font-size:10.5px}
  .tc-appbar .tc-appbar-home{gap:var(--tc-space-2)}
}

/* ---- the row you are moving ---------------------------------------------
   A drag only reads if you can see what you have picked up. Every one of the
   four lists used to *fade* it — the schedule and the resources items barely
   at all, the checklist and the accounts list right down to a ghost — so the
   one row that mattered was the hardest thing on the screen to follow. It is
   lifted instead: its own surface over the list, a 2px ink ring (borders,
   never shadows) and a hair larger than the row it came out of. One rule,
   because all four lists mark it the same way. */
.dragging{
  position:relative; z-index:20;
  opacity:1;
  background:var(--tc-surface);
  outline:2px solid var(--tc-text); outline-offset:-2px;
  border-radius:var(--tc-radius-md);
  transform:scale(1.015);
  cursor:grabbing;
}
/* The whole row is being held, so the cursor says so over all of it. */
.dragging *{cursor:grabbing}
/* And the grip itself comes up out of muted, since that is what is held. */
.dragging .rhandle, .dragging .handle, .dragging .grip{color:var(--tc-text)}

/* ---- where to go, and who you are ---------------------------------------
   Two controls, side by side at the top of every page: the hamburger is
   where you go, the avatar is who you are. Both are injected by account.js
   so all the pages carry the same ones, and both sit in a card that is a
   card on a light page and on the dark home page alike — so everything
   here is a token that flips with the theme. */
/* The two of them sit side by side. Every page already wraps its avatar in
   a .account that is only `position:relative`, so the class goes on when the
   hamburger does rather than each page being taught the same thing. */
.tc-has-burger{display:flex; align-items:center; gap:var(--tc-space-2); flex-shrink:0}
.tc-burger{
  width:var(--tc-tap-min); height:var(--tc-tap-min); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--tc-border); border-radius:999px;
  background:var(--tc-surface); color:var(--tc-text); cursor:pointer;
}
.tc-burger:hover{border-color:var(--tc-text)}
.tc-burger:focus-visible{outline:3px solid var(--tc-signal-deep); outline-offset:2px}
.tc-nav{
  position:absolute; right:0; top:calc(100% + var(--tc-space-2)); z-index:30;
  width:min(330px, calc(100vw - 28px));
  max-height:min(72vh, 620px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--tc-surface); border:1px solid var(--tc-border);
  border-radius:var(--tc-radius-lg); padding:var(--tc-space-2);
}
.tc-nav[hidden]{display:none}
.tc-nav ul{list-style:none; margin:0; padding:0}
.tc-nav-head{
  font-family:var(--tc-font-data); font-size:var(--tc-text-xs); font-weight:700;
  letter-spacing:var(--tc-tracking-data); text-transform:uppercase; color:var(--tc-text-muted);
  padding:var(--tc-space-2) var(--tc-space-2) var(--tc-space-1);
}
/* A row is the thing itself and, where there is more under it, a separate
   handle to open it — so tapping the name still goes to the page. */
.tc-nav-row{display:flex; align-items:center; gap:2px}
.tc-nav-row > .tc-menu-link{flex:1; min-width:0}
.tc-nav-more{
  width:36px; min-height:var(--tc-tap-min); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--tc-text-muted); cursor:pointer;
  border-radius:var(--tc-radius-sm);
}
.tc-nav-more:hover{background:var(--app-track); color:var(--tc-text)}
.tc-nav-more:focus-visible{outline:3px solid var(--tc-signal-deep); outline-offset:-2px}
.tc-nav-more svg{transition:transform .15s ease}
.tc-nav-more[aria-expanded="true"] svg{transform:rotate(90deg)}
/* What is inside something, set in from it and hung off a hairline. */
.tc-nav ul ul{
  margin:0 0 var(--tc-space-1) var(--tc-space-3);
  padding-left:var(--tc-space-2); border-left:1px solid var(--tc-border);
}
.tc-nav ul ul .tc-menu-link{font-weight:500}
.tc-nav ul ul ul .tc-menu-link{font-size:var(--tc-text-xs); color:var(--tc-text-muted)}
.tc-nav ul ul ul .tc-menu-link[aria-current="page"]{color:var(--tc-text)}
.tc-nav-empty{
  padding:var(--tc-space-2); color:var(--tc-text-muted);
  font-family:var(--tc-font-body); font-size:var(--tc-text-sm);
}

.tc-menu-rule{height:1px; background:var(--tc-border); margin:var(--tc-space-2) 0}
.tc-menu-link{
  display:flex; align-items:center; min-height:var(--tc-tap-min);
  padding:0 var(--tc-space-2); border-radius:var(--tc-radius-sm);
  color:var(--tc-text); text-decoration:none;
  font-family:var(--tc-font-body); font-size:var(--tc-text-sm); font-weight:600;
}
.tc-menu-link:hover{background:var(--app-track)}
.tc-menu-link:focus-visible{outline:3px solid var(--tc-signal-deep); outline-offset:2px}
.tc-menu-link[aria-current="page"]{color:var(--tc-text-muted)}