/* LIM-3 · One page frame for every Liminal page.
   Loaded last on every page. The sidebar has one size and one type ramp, and every page
   has exactly one top bar (.page-bar): tabs for pages with several views, the page name
   for single-view pages, and page actions on the right. Colours and fonts are unchanged. */

/* Sidebar: one width, one brand, one nav style (desktop). Phone layouts stay page-owned. */
@media (min-width: 921px) {
  .side-shell {
    width: 172px !important; flex: 0 0 172px !important; box-sizing: border-box;
    display: flex !important; flex-direction: column !important; height: 100vh !important;
    padding: 24px 0 16px !important; border-right: 1px solid var(--rule);
  }
  .side-brand {
    font-family: var(--font-head) !important; font-weight: 700 !important; font-size: 19px !important;
    letter-spacing: -.03em !important; text-align: center; margin: 0 0 28px !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  }
  .side-brand .brand-mark, .brand-mark {
    width: 28px !important; height: 28px !important;
  }
  .side-nav {
    display: flex !important; flex-direction: column !important; gap: 2px;
  }
  .side-nav .nav-link {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    min-height: 0 !important; padding: 12px 18px 12px 24px !important;
    font-family: var(--font-head), var(--font-ui) !important; font-size: 14.5px !important; font-weight: 500 !important;
    letter-spacing: -0.01em !important; text-transform: none !important;
    border-left-width: 3px !important; border-top: 0 !important; border-bottom: 0 !important;
    color: var(--ink-2); transition: all 0.15s ease;
  }
  .side-nav .nav-link:hover {
    color: var(--ink); background: var(--paper-2);
  }
  .side-nav .nav-link[aria-current="page"] {
    color: var(--primary) !important; border-left-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 8%, transparent); font-weight: 600 !important;
  }
  .side-user-bar {
    margin-top: auto !important; width: 100%; border-top: 1px solid var(--rule); padding-top: 10px;
  }
  .side-user-bar .nav-link {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 10px 18px 10px 22px !important;
    font-family: var(--font-head), var(--font-ui) !important; font-size: 14px !important; font-weight: 500 !important;
    color: var(--ink-2); text-decoration: none; border-left: 3px solid transparent !important;
    transition: all 0.15s ease;
  }
  .side-user-bar .nav-link:hover {
    color: var(--ink); background: var(--paper-2);
  }
  .side-user-bar .nav-link[aria-current="page"] {
    color: var(--primary) !important; border-left-color: var(--primary) !important;
  }
  .side-user-bar .user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, var(--paper-2));
    color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
}

/* The one top bar. */
.page-bar {
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px;
  box-sizing: border-box; min-height: 64px !important; height: auto !important;
  padding: 12px 24px !important; margin: 0 !important; flex: none;
  justify-content: flex-start !important;
  border: 0 !important; border-bottom: 1px solid var(--rule) !important; border-radius: 0 !important;
  background: var(--paper); color: var(--ink); font-family: var(--font-ui);
  box-shadow: none !important;
}
.page-bar[hidden] { display: none !important; }
.page-bar-title {
  margin: 0 8px 0 0; font-family: var(--font-head); font-size: 18px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
}
.page-bar-spacer { flex: 1 1 auto; }
.page-bar-actions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* One tab/pill style for every page. */
.page-bar .pf-tab,
.page-bar.r3-shell-bar > button, .page-bar.r3-shell-bar > a,
.page-bar.r3-shell-bar .r3-library-link,
.page-bar .lib-view-btn,
.page-bar .pf-pill {
  min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center;
  padding: 6px 15px !important; border: 1px solid var(--rule) !important; border-radius: 99px !important;
  background: var(--paper-2) !important; color: var(--ink-2) !important;
  font-family: var(--font-head) !important; font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: -0.01em !important; text-transform: none !important; text-decoration: none !important;
  cursor: pointer; box-shadow: none !important; margin: 0 !important;
}
.page-bar .pf-tab[aria-current="true"],
.page-bar.r3-shell-bar > [aria-pressed="true"],
.page-bar .lib-view-btn[aria-pressed="true"] {
  border-color: var(--primary) !important; color: var(--primary) !important;
}
.page-bar .pf-tab:focus-visible, .page-bar .pf-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.page-bar .pf-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--paper) !important; }

/* Visually hidden but still read by assistive tech. */
.pf-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Removed clutter (see _program/LIM-3-frame.md for the reasons). */
.pf-removed { display: none !important; }

/* Activity: the heading region no longer carries its own bar. */
.activity-head.pf-sr { display: block; }
/* Build: the canvas toolbar is the second row under the page bar. */
.build-toolbar { border-top: 0 !important; }
.page-bar .build-tools-group { display: flex; align-items: center; gap: 8px; }
/* Build: wiring help is one quiet line above the status line. */
.pf-build-hint { display: block; padding: 6px 24px 0; font-size: 11.5px; color: var(--ink-2); border-top: 1px solid var(--rule); }
.pf-build-hint kbd { font-size: 10.5px; }
/* Customers: the pilot note sits with the offer it qualifies. */
.pf-pilot-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
/* Admin sits in the shared shell. */
body.pf-admin { margin: 0; }
body.pf-admin .shell { padding-top: 8px; }
body.pf-admin .hero { padding: 16px 0 20px; }
.pf-app { display: flex; height: 100vh; width: 100%; overflow: hidden; background: var(--paper); color: var(--ink); }
.pf-app > .pf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.pf-app > .pf-main > .pf-scroll { flex: 1; min-height: 0; overflow: auto; }
.pf-app .side-shell { display: flex; flex-direction: column; }
.pf-app .side-nav { display: flex; flex-direction: column; }
.pf-app .nav-link { color: var(--ink-2); text-decoration: none; border-top: 1px solid var(--rule-soft); border-left: 2px solid transparent; }
.pf-app .nav-link:last-child { border-bottom: 1px solid var(--rule-soft); }
.pf-app .nav-link[aria-current="page"] { color: var(--primary); border-left-color: var(--primary); }

@media (max-width: 720px) {
  .page-bar { padding: 8px 10px !important; gap: 6px; min-height: 56px !important; }
  .page-bar .pf-tab, .page-bar.r3-shell-bar > button, .page-bar.r3-shell-bar > a,
  .page-bar .lib-view-btn, .page-bar .pf-pill { min-height: 44px; padding: 8px 12px !important; font-size: 13px !important; }
  .page-bar-title { font-size: 16px; }
}
@media (max-width: 920px) {
  .pf-app { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .pf-app .side-shell { width: 100%; padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pf-app .side-nav { flex-direction: row; flex-wrap: wrap; }
  .pf-app .nav-link { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .pf-app .side-brand { margin: 0 0 12px; text-align: center; font-family: var(--font-head); font-weight: 700; }
}