/* ============================================================================
   Shell refinements: the spaces rail, a lighter header, and a sidebar that
   reads in groups.
   ========================================================================== */

/* ---------------------------------------------------------- the rail ------
   Worlds in Work, Hats in Personal. Deliberately the quietest interactive
   thing on the page: a barely-there track, matte pills, and an active state
   that is only "the white one that is lifted" — no fill, no accent bar, no
   underline. It must read as a statement of where you are, not as a tab bar
   competing with the page title underneath it. */
.space-rail-wrap{
  display:flex;justify-content:center;
  padding:2px 0 14px;
  margin:-4px 0 0;
  /* Five spaces with long names must never widen the page. The rail scrolls
     inside itself instead, and the scrollbar is hidden because at this size it
     would be louder than the control. */
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.space-rail-wrap::-webkit-scrollbar{display:none}
.space-rail{
  display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;margin-inline:auto;
  padding:4px;border-radius:14px;
  background:color-mix(in srgb,var(--text,#12263F) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--text,#12263F) 5%,transparent);
}
.space-rail .space-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:0;background:transparent;cursor:pointer;
  padding:7px 16px;border-radius:10px;
  font:inherit;font-size:13.5px;font-weight:530;letter-spacing:-.008em;
  color:color-mix(in srgb,var(--text,#12263F) 62%,transparent);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  max-width:220px;
}
.space-rail .space-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.space-rail .space-pill i{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;opacity:.92;
}
.space-rail .space-pill:hover{color:var(--text,#12263F);background:color-mix(in srgb,var(--surface,#fff) 55%,transparent)}
.space-rail .space-pill.on{
  background:var(--surface,#fff);
  color:var(--text,#12263F);font-weight:620;
  box-shadow:0 1px 2px rgba(16,42,76,.07),0 3px 9px -4px rgba(16,42,76,.22);
  cursor:text;
}
.space-rail .space-add{
  border:0;background:transparent;cursor:pointer;font:inherit;
  padding:7px 12px;border-radius:10px;font-size:16px;line-height:1;
  color:color-mix(in srgb,var(--text,#12263F) 38%,transparent);
}
.space-rail .space-add:hover{background:color-mix(in srgb,var(--surface,#fff) 60%,transparent);color:var(--text,#12263F)}

/* the "New world" entry on the + Add menu */
.action-menu-rule{height:1px;margin:6px 8px;background:color-mix(in srgb,var(--text,#12263F) 9%,transparent)}
.space-new-item{
  display:flex!important;align-items:center;gap:10px;width:100%;
  color:var(--nhs,#1E86C8);font-weight:620;
}
.space-new-item small{margin-left:auto;font-size:11px;font-weight:500;opacity:.6}

/* rename dialog bits */
.space-swatches{display:flex;gap:10px;flex-wrap:wrap}
.space-swatch{cursor:pointer;line-height:0}
.space-swatch input{position:absolute;opacity:0;pointer-events:none}
.space-swatch i{
  display:block;width:30px;height:30px;border-radius:50%;
  box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 2px transparent;
  transition:box-shadow .15s ease,transform .15s ease;
}
.space-swatch input:checked + i{
  box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px currentColor;
  transform:scale(1.06);
}
.space-danger{margin-top:20px;border-top:1px solid color-mix(in srgb,var(--text,#12263F) 9%,transparent);padding-top:14px}
.space-danger summary{cursor:pointer;font-size:13px;color:color-mix(in srgb,var(--text,#12263F) 55%,transparent)}
.space-danger p{font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--text,#12263F) 66%,transparent);margin:12px 0}
.space-danger label{display:block;font-size:12.5px;margin-bottom:6px}
.space-danger input{width:100%;margin-bottom:12px}

/* ------------------------------------------------------------- the header --
   Asked for "a bit more transparent, not completely". The bar now lets the
   page colour through at rest and firms up as content scrolls under it, so
   text never has to sit on a moving background. */
/* Specificity note: hub-responsive.css already sets this with `#topbar.topbar`
   and !important, so matching that selector (and loading later) is what it takes
   to win. The NHS tint is kept — it is the brand — and only the alpha moves,
   from ~0.51 to ~0.41 at rest, firming to ~0.67 once content is under it. */
#topbar.topbar{
  background:color-mix(in srgb,var(--nhs,#1E86C8) 14%,
                       color-mix(in srgb,var(--surface,#fff) 30%,transparent))!important;
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  transition:background .3s ease,box-shadow .3s ease;
}
#topbar.topbar.is-scrolled{
  background:color-mix(in srgb,var(--nhs,#1E86C8) 12%,
                       color-mix(in srgb,var(--surface,#fff) 62%,transparent))!important;
  box-shadow:0 1px 0 color-mix(in srgb,var(--text,#12263F) 7%,transparent),
             0 10px 30px -24px rgba(16,42,76,.55);
}
/* Nothing else on the bar claims the spare room any more (the old kite-values
   strip carried margin-left:auto and is display:none), so the account would
   float mid-bar. Pin it to the edge. */
#topbar #ownerAccess{margin-left:auto}

/* The search box was the widest thing on the bar and is used a few times a
   day. Give the width back to the page. */
/* Only from the width where the desktop bar exists. Below 900px the app switches
   to the stacked layout and finishing.css gives search its own full-width row —
   overriding the basis there would break it. The app-shell zoom already handles
   density between 900 and 1550, so one value covers the whole desktop range. */
@media(min-width:901px){
  #topbar .global-search{
    flex:0 1 340px!important;
    max-width:340px;
    min-width:140px;      /* may compress on a crowded bar rather than push the account off */
  }
}
@media(min-width:1900px){ #topbar .global-search{flex-basis:400px!important;max-width:400px} }

/* Saving is the floor, not a feature — "Saved 17:24" sat on every screen all day
   reassuring you about something that should simply be true. updateSaveStatus
   rewrites this element's className on every call, so hooking a class of our own
   onto it does not survive; these target the states it actually writes. Failure
   still shows, and shows loudly, because that is the one moment worth an
   interruption. */
#topbar #saveStatus.saved,
#topbar #saveStatus.saving{display:none!important}
#topbar #saveStatus.failed,
#topbar #saveStatus.conflict{
  display:inline-flex!important;
  background:color-mix(in srgb,#C2567F 12%,var(--surface,#fff))!important;
  border-color:color-mix(in srgb,#C2567F 40%,transparent)!important;
  color:#8E3459!important;font-weight:620;
}

/* account menu: Themes now lives inside it */
.account-rule{height:1px;margin:6px 8px;background:color-mix(in srgb,var(--text,#12263F) 9%,transparent)}
.account-menu-pop .account-item{display:flex;align-items:center;gap:9px}

/* ------------------------------------------------------------- the sidebar */
.nav-rule{
  height:1px;margin:9px 10px;
  background:color-mix(in srgb,var(--text,#12263F) 8%,transparent);
}
/* the wordmark is now the way home */
.brand-home{cursor:pointer;border-radius:11px;padding:4px 6px;margin:-4px -6px;
  transition:background .18s ease,box-shadow .18s ease}
.brand-home:hover{background:color-mix(in srgb,var(--surface,#fff) 70%,transparent);
  box-shadow:0 1px 3px rgba(16,42,76,.08)}
.brand-home:focus-visible{outline:2px solid var(--nhs,#1E86C8);outline-offset:2px}

/* backups and the bin, demoted */
.nav-quiet{margin-bottom:12px}
.nav-quiet .nav-btn{
  font-size:12.5px!important;font-weight:450!important;
  opacity:.62;padding-top:6px!important;padding-bottom:6px!important;
}
.nav-quiet .nav-btn:hover{opacity:1}
.nav-quiet .nav-btn.active{opacity:1;font-weight:600!important}

/* ------------------------------------------------------------ note labels */
.note-labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.note-label{
  font-size:10.5px;font-weight:620;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--nhs,#1E86C8) 10%,var(--surface,#fff));
  border:1px solid color-mix(in srgb,var(--nhs,#1E86C8) 22%,transparent);
  color:color-mix(in srgb,var(--nhs,#1E86C8) 78%,var(--text,#12263F));
  white-space:nowrap;
}
.label-hints{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.label-hint{
  border:1px solid color-mix(in srgb,var(--text,#12263F) 12%,transparent);
  background:var(--surface,#fff);border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:500;cursor:pointer;
  color:color-mix(in srgb,var(--text,#12263F) 70%,transparent);
}
.label-hint:hover{border-color:var(--nhs,#1E86C8);color:var(--nhs,#1E86C8)}

/* --------------------------------------------------- people from elsewhere */
.person-elsewhere{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:550;color:color-mix(in srgb,var(--text,#12263F) 55%,transparent);
  margin-top:6px;
}
.person-elsewhere i{width:7px;height:7px;border-radius:50%;background:#C2567F;flex:0 0 auto}
.space-people-pick{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.space-people-pick label{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--text,#12263F) 10%,transparent);
  background:var(--surface,#fff);cursor:pointer;font-size:14px;
}
.space-people-pick label:hover{border-color:var(--nhs,#1E86C8)}
.space-people-pick small{margin-left:auto;font-size:11.5px;opacity:.6}

/* scope choice on the new-person modal */
.space-scope{display:flex;gap:18px;flex-wrap:wrap}
.space-scope label{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.space-from-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* ------------------------------------------------- the rail, at every size --
   Between 900 and 1900 the app-shell zoom is already doing the density work, so
   the rail inherits it and needs nothing. These handle the two ends: touch
   screens, where the pills must stay tappable but the row must not eat the
   screen, and very wide monitors, where it would otherwise look stranded. */
@media(max-width:900px){
  .space-rail-wrap{justify-content:flex-start;padding:4px 16px 12px;margin-top:2px}
  .space-rail{margin-inline:0}
  .space-rail .space-pill{
    padding:9px 14px;font-size:14px;      /* 14px keeps it legible and tappable on a phone */
    max-width:46vw;
  }
  .space-rail .space-add{padding:9px 13px}
}
@media(max-width:400px){
  .space-rail .space-pill{padding:8px 12px;font-size:13.5px;gap:7px}
}
/* Fine-pointer desktops get a slightly tighter target than touch. */
@media(min-width:901px) and (pointer:coarse){
  .space-rail .space-pill{padding:9px 16px}
}
@media(min-width:1900px){
  .space-rail{gap:4px;padding:5px;border-radius:15px}
  .space-rail .space-pill{font-size:14px;padding:8px 18px;max-width:260px}
}

/* Notes filter bar: a fourth control pushed it past the edge on laptops. */
@media(max-width:1100px){
  #mainContent .filterbar{flex-wrap:wrap;row-gap:8px}
  #mainContent .filterbar .select-control{flex:1 1 auto;min-width:140px}
}
/* The person-scope radios stack rather than overflow on a phone. */
@media(max-width:560px){
  .space-scope{flex-direction:column;gap:10px}
  .space-people-pick{max-height:56vh}
}