/* Physiolayer look, shared with FindMySite: white page, one blue, IBM Plex Sans, light footer, 4px corners.
   Loaded after product.css, so it only restates tokens and the few rules that carried the old green look. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plex-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plex-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  --canvas: #ffffff;
  --paper: #ffffff;
  --ink: #161b22;
  --ink-soft: #2c3440;
  --muted: #59636e;
  --faint: #7a8490;
  --line: #e2e5e9;
  --line-strong: #c9ced6;
  --accent: #1a56a8;
  --accent-dark: #0f3d6e;
  --accent-soft: #e8eef6;
  --warm: #a86400;
  --success: #2f6f5a;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-menu: 0 18px 50px rgba(22, 27, 34, 0.14);
  --wash: #f5f7fa;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --sans: var(--font-body);
}
body { background: #fff; }

/* Header: white bar, circle mark, name, then "by Physiolayer" with the Layers mark. */
.app-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 76px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); }
.brand { gap: 10px; }
.brand-mark { display: none; }
.brand::before { content: "R"; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font: 700 15px var(--font-body); }
.brand .eyebrow { display: none; }
.brand h1 { font: 700 19px/1.1 var(--font-body); letter-spacing: -.02em; }
.by-physiolayer { font-size: 12px; line-height: 1.2; color: var(--muted); border-left: 1px solid var(--line); padding-left: 10px; margin-left: 2px; }
.by-physiolayer b { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.by-physiolayer img { display: block; }

/* Hero: open on the white page, large Plex heading with the blue emphasised word. */
.workspace { width: min(1120px, calc(100% - 48px)); }
.panel.global-library, .global-library { border: 0; box-shadow: none; background: transparent; padding: 40px 0 0; }
.global-library > .eyebrow, .eyebrow { color: var(--accent); font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; }
.global-library > h3 { font: 600 clamp(34px, 4vw, 48px)/1.15 var(--font-body); letter-spacing: -.025em; margin: 6px 0 14px; max-width: 790px; }
.global-library > h3 em { font-style: normal; color: var(--accent); }
.global-library > .detail { max-width: 600px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.global-library-form { display: flex; flex-wrap: wrap; align-items: stretch; max-width: 810px; padding: 5px; border: 1px solid #b7bec7; border-radius: 5px; background: #fff; box-shadow: 0 8px 24px #101b2a0c; gap: 0; margin: 26px 0 16px; }
.global-library-form label { flex-basis: 100%; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.global-library-form input { flex: 1; border: 0; outline: 0; background: transparent; padding: 13px 15px; border-radius: 0; }
.global-library-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.action-button { background: var(--accent); border-color: var(--accent); border-radius: 3px; font-weight: 600; }
.action-button:hover { background: var(--accent-dark); transform: none; }
.global-examples { color: var(--muted); font-size: 12px; gap: 11px; }
.global-examples button { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 0; border-radius: 0; font-size: 13px; }

/* Cards, tabs and details: white or wash panels with one-pixel lines. */
.global-source-card { border-radius: 4px; background: #fff; }
.global-source-card[aria-pressed="true"], .global-inspect[aria-pressed="true"] { background: var(--accent-soft); }
.global-journey { background: var(--wash); border-color: var(--line); border-radius: 4px; }
#global-record-detail { background: var(--wash); border-radius: 4px; }
#global-record-detail a { font-weight: 600; }
.global-journey-detail { background: #fff; }
.global-library h4, .global-journey h4, .global-journey h3 { font-weight: 600; letter-spacing: -.01em; }
.global-source-card strong, .global-brief-row dd { font-weight: 600; }

/* Globe: same data and colours for evidence, on navy in place of forest green. */
#global-connection-globe { background: radial-gradient(ellipse at 50% 38%, #1f4a82 0%, #12335d 55%, #0b1f3a 100%); box-shadow: inset 0 0 0 1px rgba(157, 187, 230, .22), 0 10px 30px -16px rgba(11, 31, 58, .6); border-radius: 6px; }
.connection-globe-controls { background: linear-gradient(#0b1f3acc, transparent); }
.connection-globe-dot { border-color: #12335d; }
.connection-globe-node[aria-pressed="true"] .connection-globe-label { background: #12335d; border-color: #9dbbe6; }
.connection-globe-legend, .legend-search { color: #d6e3f5; }
.legend-source { color: #9dbbe6; }

/* Footer: light wash like FindMySite. */
.compliance-footer { background: var(--wash); color: var(--ink); border-top: 1px solid var(--line); }
.compliance-footer .eyebrow { color: var(--accent); }
.compliance-summary strong { color: var(--ink); font-size: 1rem; }
.compliance-summary > p, .compliance-details p { color: var(--muted); }
.compliance-details { border-top-color: var(--line); }
.compliance-details details + details { border-left-color: var(--line); }
.compliance-details summary { color: var(--accent); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .85rem; }
.compliance-details a { color: var(--accent); }
@media (max-width: 760px) { .app-header { min-height: 66px; padding: 0 16px; } .global-library > .detail { font-size: 16px; } .by-physiolayer { display: none; } }