/* ════════════════════════════════════════════════════════════════
   POINT OF CARE · CHROME · v1.1
   Canonical header, drawer, footer, and left rail styles.

   v1.1 alignment fix: the rail extends from top:0 (not top:64px),
   making the rail's right border one uninterrupted vertical line from
   the top of the page to the bottom. The owl-trigger lives inside the
   rail at the top, occupying the header height slot. No separate
   header-rule element — the rail's border IS the vertical rule.

   Deployed via Netlify Snippet Injection. Companion: /chrome.js
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
     POINT OF CARE · CHROME REFERENCE
     The canonical header, drawer, and footer applied across every
     interior page. The index does NOT receive the header (decision: no
     chrome on the threshold — the fork is the only way in).

     Header — relative position, never fixed in v1. Owl-trigger top-left,
     wordmark beside it (clicks → /request-conversation). Right slot
     reserved for the operator sign-in door when that tier ships.

     Drawer — slides in left-to-right, ~320px wide, partial overlay (page
     remains visible behind the dim backdrop). Uniform within class:
     multi-child sections expand on click; single-child sections link
     directly to their destination. Operations and Modules are muted
     today — present in the architecture, awaiting the operator tier.

     Footer — the locked positioning stack: operational truth, made
     perceptible, quietly. Closing the gap... Before continuity breaks
     (owl-muted). An Initiative of SJM Succession Partners. © stamp last.
     ════════════════════════════════════════════════════════════════ */

  :root {
    --ink:         #1F2937;
    --ink-deep:    #161D2A;
    --ink-deeper:  #0F1520;
    --paper:       #F8F5EE;
    --cream:       #E8E2D5;
    --slate:       #475569;
    --muted:       #6B7280;
    --muted-deep:  #4B5563;
    --rule:        #2A3140;
    --rule-soft:   #1F2533;
    --rule-bright: #3A4254;
    --gold:        #C9A961;
    --gold-dim:    #A88E4F;
    --gold-faint:  #6B5733;
    --gold-soft:   rgba(201,169,97,0.10);
    --focus-ring:  #2F5773;

    --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono:  'DM Mono', 'SF Mono', Consolas, Menlo, monospace;
    --serif: 'Playfair Display', Georgia, 'Iowan Old Style', 'Times New Roman', serif;

    --drawer-w: 320px;
  }

  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  ::selection { background:rgba(201,169,97,0.22); color:var(--paper); }

  html, body { background:var(--ink-deep); }
  body {
    color:var(--cream); font-family:var(--sans); font-weight:400; line-height:1.6;
    -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
  }
  body.drawer-open { overflow:hidden; }

  /* canonical gold grid */
  body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      linear-gradient(rgba(201,169,97,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201,169,97,0.035) 1px, transparent 1px);
    background-size:64px 64px;
  }

  /* ════════════════════════════════════════════
     CHROME LAYOUT — header band + persistent left rail.

     The vertical rule between the owl and the wordmark in the header IS
     the same rule that descends as the left rail down the entire viewport.
     One uninterrupted muted line, defining the chrome's left edge.

     Receded state: band, owl, wordmark, rules — all muted by default. On
     hover, the band brightens. The rail icons sit one level beneath the
     band's resting opacity — quieter still — and brighten on their own
     hover. Inhabited, attentive, quietly consequential.

     Rail width: 56px (room for 24px icon + 16px breathing on each side).
     Content margin-left: 56px on desktop to clear the rail.
     Mobile (<720px): rail hides; only the header owl opens the drawer.
     ════════════════════════════════════════════ */

  :root {
    --rail-w: 56px;
    --band-rest: 0.55;      /* opacity of header band elements at rest */
    --rail-icon-rest: 0.30; /* opacity of rail icons at rest (one level beneath) */
    --rule-rest: rgba(201,169,97,0.18);
    --rule-active: rgba(201,169,97,0.42);
  }

  /* HEADER BAND — sits BESIDE the rail (margin-left:rail-w), not above it.
     The rail's right border is the single uninterrupted vertical line
     from top to bottom of the viewport — no separate header-rule needed.
     The owl button sits INSIDE the rail's footprint, not in the header. */
  .poc-header {
    position:relative; z-index:5;
    margin-left:var(--rail-w);
    display:flex; align-items:center;
    height:64px;
    padding:0 clamp(20px, 3vw, 36px) 0 0;
    border-bottom:1px solid var(--rule-rest);
    background:var(--ink-deep);
    transition:border-color 0.4s ease;
  }
  .poc-header:hover { border-bottom-color:var(--rule-active); }
  .poc-header-left { display:flex; align-items:center; gap:0; height:100%; }

  /* Wordmark sits at the left of the header content area, with a small
     inset from the rail edge so it doesn't crowd the vertical rule. */
  .poc-wordmark {
    display:flex; align-items:center; height:100%;
    padding:0 0 0 20px;
    font-family:var(--serif); font-weight:400; font-size:17px;
    color:var(--paper); text-decoration:none; letter-spacing:-0.005em;
    line-height:1;
    white-space:pre;
    opacity:var(--band-rest);
    transition:opacity 0.35s ease;
  }
  .poc-wordmark em { font-style:italic; color:var(--gold); }
  .poc-wordmark .tm {
    font-size:0.55em; vertical-align:0.5em; color:var(--gold);
    margin-left:1px; font-style:normal;
  }
  .poc-wordmark:hover { opacity:1; }
  .poc-wordmark:focus-visible { opacity:1; outline-offset:4px; }

  .poc-header-right { margin-left:auto; min-height:24px; }

  /* ════════════════════════════════════════════
     LEFT RAIL — full-viewport persistent column.
     The rail's right border is the single uninterrupted vertical line
     from the top of the page to the bottom. The owl-trigger sits
     INSIDE the rail at the top, occupying the header's height slot.
     ════════════════════════════════════════════ */
  .poc-rail {
    position:fixed; left:0; top:0; bottom:0; width:var(--rail-w);
    z-index:6; background:var(--ink-deep);
    border-right:1px solid var(--rule-rest);
    display:flex; flex-direction:column; align-items:center;
    transition:border-color 0.4s ease;
  }
  .poc-rail:hover { border-right-color:var(--rule-active); }

  /* Owl-trigger sits at the TOP of the rail, occupying the same height
     as the header band so the horizontal divider beneath the band lines
     up exactly with the divider beneath the owl. Receded at rest. */
  .owl-trigger {
    width:100%; height:64px; padding:0; border:none; background:transparent;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid var(--rule-rest);
    opacity:var(--band-rest);
    transition:opacity 0.35s ease, transform 0.35s ease, border-color 0.4s ease;
  }
  .owl-trigger img { width:24px; height:38px; object-fit:contain; display:block; }
  .owl-trigger:hover { opacity:1; }
  .owl-trigger:focus-visible { outline-offset:-4px; opacity:1; }
  .poc-rail:hover .owl-trigger { border-bottom-color:var(--rule-active); }

  /* Rail icons start beneath the owl, with a small breathing space */
  .rail-icons {
    display:flex; flex-direction:column; align-items:center;
    padding-top:20px; gap:6px;
  }

  /* Rail icons — one level beneath the band's resting opacity */
  .rail-icon {
    width:40px; height:40px; padding:0; border:none; background:transparent;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--gold-dim);
    opacity:var(--rail-icon-rest);
    transition:opacity 0.35s ease, color 0.35s ease;
    position:relative;
  }
  .rail-icon svg {
    width:18px; height:18px; display:block;
    stroke:currentColor; stroke-width:1.25; fill:none;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .rail-icon:hover, .rail-icon:focus-visible { opacity:1; outline:none; }
  .rail-icon:focus-visible::after {
    content:''; position:absolute; inset:6px;
    border:1px solid var(--focus-ring);
  }

  /* Tooltip on rail icon hover — quiet label appears to the right */
  .rail-icon::before {
    content:attr(data-label);
    position:absolute; left:calc(100% + 12px); top:50%;
    transform:translateY(-50%) translateX(-4px);
    font-family:var(--mono); font-size:9px; font-weight:500;
    letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-dim);
    background:var(--ink-deeper); padding:6px 10px;
    border:1px solid var(--rule);
    white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .rail-icon:hover::before, .rail-icon:focus-visible::before {
    opacity:1; transform:translateY(-50%) translateX(0);
  }

  .rail-icon.muted {
    opacity:0.15; cursor:not-allowed; pointer-events:none;
  }

  /* When the drawer is open, the rail dims slightly and the rule
     brightens — the rail belongs to the drawer's territory. */
  body.drawer-open .poc-rail { opacity:0.7; }

  /* Content on every page sits inside the rail's right edge.
     Pages apply .has-chrome to their main/body container. */
  .has-chrome { margin-left:var(--rail-w); }

  /* ════════════════════════════════════════════
     DRAWER — slides in left-to-right, ~320px.
     Backdrop dims the page. Closes on outside click, Escape,
     owl press again, or link follow.
     ════════════════════════════════════════════ */
  .drawer-backdrop {
    position:fixed; inset:0; z-index:50;
    background:rgba(10,15,24,0.62);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    opacity:0; pointer-events:none;
    transition:opacity 0.4s ease;
  }
  .drawer-backdrop.open { opacity:1; pointer-events:auto; }

  .drawer {
    position:fixed; top:0; left:var(--rail-w); bottom:0; z-index:51;
    width:var(--drawer-w); max-width:calc(88vw - var(--rail-w));
    background:var(--ink-deeper);
    border-right:1px solid var(--rule);
    transform:translateX(calc(-100% - var(--rail-w)));
    pointer-events:none; visibility:hidden;
    transition:transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.42s;
    display:flex; flex-direction:column;
    box-shadow:8px 0 32px rgba(0,0,0,0.32);
  }
  .drawer.open {
    transform:translateX(0); pointer-events:auto; visibility:visible;
    transition:transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
  }

  /* Drawer header — owl repeats inside, wordmark, close affordance.
     The owl inside the drawer is a quiet anchor — the visitor sees the
     same mark that opened the drawer, holding the space. */
  .drawer-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px 16px;
    border-bottom:1px solid var(--rule-soft);
  }
  .drawer-head-mark { display:flex; align-items:center; gap:12px; }
  .drawer-head-mark .owl-mini {
    width:18px; height:28px; opacity:0.85;
    display:flex; align-items:center; justify-content:center;
  }
  .drawer-head-mark .owl-mini img { width:100%; height:100%; object-fit:contain; display:block; }
  .drawer-head-mark .label {
    font-family:var(--mono); font-size:9px; font-weight:500;
    letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dim);
  }
  .drawer-close {
    width:30px; height:30px; padding:0; border:none; background:transparent;
    cursor:pointer; color:var(--muted); transition:color 0.3s ease;
    display:flex; align-items:center; justify-content:center;
  }
  .drawer-close:hover { color:var(--paper); }
  .drawer-close svg { width:14px; height:14px; }

  .drawer-body {
    flex:1; overflow-y:auto; padding:6px 0 32px;
    scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
  }
  .drawer-body::-webkit-scrollbar { width:6px; }
  .drawer-body::-webkit-scrollbar-thumb { background:var(--rule); border-radius:3px; }

  /* Home link — top item, above the rest */
  .drawer-home {
    display:flex; align-items:center; gap:10px;
    padding:16px 22px;
    font-family:var(--mono); font-size:10px; font-weight:500;
    letter-spacing:0.20em; text-transform:uppercase; color:var(--cream);
    text-decoration:none; border-bottom:1px solid var(--rule-soft);
    transition:color 0.3s ease, background 0.3s ease;
  }
  .drawer-home:hover { color:var(--gold); background:var(--gold-soft); }
  .drawer-home .arr { opacity:0.5; transition:transform 0.3s ease, opacity 0.3s ease; }
  .drawer-home:hover .arr { transform:translateX(3px); opacity:1; }

  /* Search field */
  .drawer-search {
    padding:14px 22px;
    border-bottom:1px solid var(--rule-soft);
  }
  .drawer-search-wrap {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px;
    background:var(--ink-deep); border:1px solid var(--rule);
    transition:border-color 0.3s ease;
  }
  .drawer-search-wrap:focus-within { border-color:var(--gold-faint); }
  .drawer-search-wrap svg { width:13px; height:13px; color:var(--muted); flex-shrink:0; }
  .drawer-search-input {
    flex:1; border:none; background:transparent; outline:none;
    font-family:var(--sans); font-size:13px; color:var(--paper);
    min-width:0;
  }
  .drawer-search-input::placeholder { color:var(--muted-deep); }

  /* Category styling — uniform within class.
     Multi-child sections expand on click. Single-child (or section
     headings with children) collapse to direct links. */
  .drawer-section { padding:6px 0; }

  /* Top-level: a parent expander OR a direct link */
  .drawer-cat {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:13px 22px;
    font-family:var(--mono); font-size:10px; font-weight:500;
    letter-spacing:0.20em; text-transform:uppercase; color:var(--cream);
    text-decoration:none; background:transparent; border:none;
    cursor:pointer; transition:color 0.3s ease, background 0.3s ease;
    text-align:left;
  }
  .drawer-cat:hover { color:var(--gold); background:var(--gold-soft); }
  .drawer-cat .chev {
    width:9px; height:9px; transition:transform 0.35s ease;
    color:var(--muted); flex-shrink:0;
  }
  .drawer-cat[aria-expanded="true"] .chev { transform:rotate(180deg); color:var(--gold-dim); }
  .drawer-cat .arr {
    width:12px; opacity:0.5; transition:transform 0.3s ease, opacity 0.3s ease;
    color:var(--muted);
  }
  .drawer-cat:hover .arr { transform:translateX(3px); opacity:1; color:var(--gold); }

  /* Muted state — present but not yet active (operator tier) */
  .drawer-cat.muted {
    color:var(--muted-deep); cursor:not-allowed; pointer-events:none;
  }
  .drawer-cat.muted::after {
    content:'pending'; font-family:var(--mono); font-size:8px;
    letter-spacing:0.16em; color:var(--muted-deep); margin-left:auto;
    border:1px solid var(--rule); padding:2px 6px;
  }
  .drawer-cat.muted .chev,
  .drawer-cat.muted .arr { display:none; }

  /* Expandable contents (max-height transition for clean reveal) */
  .drawer-sub {
    max-height:0; overflow:hidden;
    transition:max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .drawer-sub.open { max-height:600px; }
  .drawer-sub-inner { padding:4px 0 8px; }

  /* Sub-item links and section sub-heads */
  .drawer-sub-head {
    /* "Daily Encounters" style: a section heading inside Surfaces.
       Not clickable, not an expander — a quiet grouping label. */
    display:block; padding:10px 22px 4px 36px;
    font-family:var(--mono); font-size:8.5px; font-weight:500;
    letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dim);
  }
  .drawer-sub a, .drawer-sub button.drawer-cat-nested {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 22px 9px 36px;
    font-family:var(--sans); font-size:13px; font-weight:400;
    color:var(--cream); text-decoration:none;
    background:transparent; border:none; width:100%; text-align:left;
    cursor:pointer; transition:color 0.3s ease, background 0.3s ease, padding-left 0.3s ease;
  }
  .drawer-sub a:hover, .drawer-sub button.drawer-cat-nested:hover {
    color:var(--gold); background:var(--gold-soft); padding-left:40px;
  }
  /* Nested expander (e.g., Orientation, Daily Encounters, Doctrine,
     Conversation inside Surfaces). The chevron rotates same as top-level. */
  .drawer-sub button.drawer-cat-nested .chev { width:8px; height:8px; }
  .drawer-sub button.drawer-cat-nested[aria-expanded="true"] .chev { transform:rotate(180deg); }
  /* Doubly nested items (e.g., Daily Encounters children) */
  .drawer-sub .drawer-sub a { padding-left:52px; font-size:12.5px; }
  .drawer-sub .drawer-sub a:hover { padding-left:56px; }

  .drawer-cat-arr-only { /* a top-level direct link has → not ▾ */ }

  /* Quiet rule between top-level sections */
  .drawer-section + .drawer-section {
    border-top:1px solid var(--rule-soft);
  }

  /* ════════════════════════════════════════════
     MAIN — sample content showing the chrome in context.
     This region gets replaced per-page when applying the chrome.
     ════════════════════════════════════════════ */
  .sample {
    position:relative; z-index:1;
    max-width:760px; margin:0 auto; padding:80px 32px;
  }
  .sample h1 {
    font-family:var(--serif); font-weight:400; font-size:clamp(32px, 4vw, 44px);
    color:var(--paper); letter-spacing:-0.02em; line-height:1.1;
    margin-bottom:24px;
  }
  .sample h1 em { font-style:italic; color:var(--gold); }
  .sample-eyebrow {
    font-family:var(--mono); font-size:10px; font-weight:500;
    letter-spacing:0.28em; text-transform:uppercase; color:var(--gold-dim);
    margin-bottom:24px;
  }
  .sample p {
    font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.7;
    color:var(--cream); margin-bottom:18px; max-width:620px;
  }
  .sample p em { color:var(--paper); font-style:italic; }
  .sample-note {
    margin-top:48px; padding:18px 22px;
    border:1px solid var(--rule); background:var(--ink-deeper);
    font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
    color:var(--muted); line-height:1.7;
  }
  .sample-note strong { color:var(--gold-dim); font-weight:500; }

  /* ════════════════════════════════════════════
     FOOTER — locked canonical stack, applied identically.
     ════════════════════════════════════════════ */
  .poc-footer {
    position:relative; z-index:1;
    margin-top:120px; padding:64px 32px 56px;
    border-top:1px solid var(--rule);
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:0;
  }
  .footer-owl {
    width:28px; height:44px; opacity:0.22;
    margin-bottom:22px;
    display:flex; align-items:center; justify-content:center;
  }
  .footer-owl img { width:100%; height:100%; object-fit:contain; display:block; }
  .footer-mark {
    font-family:var(--serif); font-weight:400; font-size:14px;
    color:var(--cream); letter-spacing:-0.005em; line-height:1;
    margin-bottom:22px;
  }
  .footer-mark em { font-style:italic; color:var(--gold-dim); }
  .footer-mark .tm {
    font-size:0.55em; vertical-align:0.5em; color:var(--gold-dim); margin-left:1px;
  }
  .footer-thesis {
    font-family:var(--mono); font-size:10px; font-weight:400;
    letter-spacing:0.20em; text-transform:uppercase; color:var(--gold-dim);
    line-height:1.7; margin-bottom:14px;
  }
  .footer-restate {
    font-family:var(--mono); font-size:9px; font-weight:400;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-dim);
    opacity:0.72; line-height:1.7; max-width:540px;
  }
  .footer-posture {
    font-family:var(--mono); font-size:9px; font-weight:400;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-dim);
    opacity:0.22; line-height:1.7; margin-top:4px;
  }
  .footer-initiative {
    font-family:var(--mono); font-size:9px; font-weight:400;
    letter-spacing:0.20em; text-transform:uppercase; color:var(--muted);
    margin-top:40px;
  }
  .footer-copy {
    font-family:var(--mono); font-size:9px; font-weight:400;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-deep);
    margin-top:14px;
  }

  /* ════════════════════════════════════════════
     RESPONSIVE
     Below 720px: rail collapses to just the owl button at the top
     (the icons hide). Header resets to start at left:0 (no rail margin).
     Owl stays at the top-left of the viewport as the only drawer trigger.
     ════════════════════════════════════════════ */
  @media (max-width:720px) {
    .poc-rail {
      top:0; bottom:auto; height:56px; width:56px;
      border-right:1px solid var(--rule-rest);
      border-bottom:1px solid var(--rule-rest);
    }
    .poc-rail .owl-trigger { height:56px; border-bottom:none; }
    .poc-rail .rail-icons { display:none; }
    .poc-header { margin-left:56px; height:56px; padding:0 18px 0 0; }
    .has-chrome { margin-left:0; }
    .drawer { left:0; max-width:88vw; transform:translateX(-100%); }
    .drawer.open { transform:translateX(0); }
  }
  @media (max-width:640px) {
    .poc-wordmark { font-size:15px; padding:0 0 0 16px; }
    .poc-rail, .poc-header { height:52px; }
    .poc-rail { width:52px; }
    .poc-rail .owl-trigger { height:52px; }
    .poc-rail .owl-trigger img { width:22px; height:34px; }
    .poc-header { margin-left:52px; }
    :root { --drawer-w: 300px; }
    .sample { padding:48px 22px; }
    .sample h1 { font-size:30px; }
    .poc-footer { padding:48px 22px 40px; margin-top:80px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:0.01ms !important;
      transition-duration:0.01ms !important;
    }
  }