:root{
    --paper: #f4f1ea;
    --paper-soft: #ece7db;
    --row-a: #faf8f2;
    --row-b: #eee9dc;
    --ink: #262220;
    --ink-soft: #5c554d;
    --ink-faint: #8a8276;
    --rule: #d8d0bf;
    --navy: #26364a;
    --navy-soft: #3d5068;
    --brick: #9c3b2e;
    --brick-soft: #c0574a;
    --gold: #b0863a;
    --topbar-h: 118px;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Public Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background: var(--gold); color:#fff; }

  /* ---------- Top bar ---------- */
  header.top{
    position:sticky; top:0; z-index:50;
    background:var(--paper);
    border-bottom:3px solid var(--navy);
  }
  .top-inner{
    padding:20px clamp(16px,4vw,36px) 0;
  }
  .brand-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px; letter-spacing:0.08em;
    color:var(--navy-soft);
    margin:0 0 2px;
  }
  h1.brand{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:clamp(22px,3vw,30px);
    margin:0;
    color:var(--navy);
    letter-spacing:0.01em;
  }
  .clock{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--ink-faint);
    white-space:nowrap;
  }
  nav.tabs{
    display:flex; gap:2px;
    margin-top:16px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  nav.tabs::-webkit-scrollbar{ display:none; }
  nav.tabs button{
    font-family:'Oswald', sans-serif;
    font-weight:500;
    font-size:14.5px;
    letter-spacing:0.02em;
    background:transparent;
    border:none;
    color:var(--ink-soft);
    padding:10px 16px;
    cursor:pointer;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.tabs button:hover{ color:var(--navy); }
  nav.tabs button.active{
    color:var(--navy);
    border-bottom-color:var(--brick);
  }

  /* ---------- Panels ---------- */
  main{ padding:28px clamp(16px,4vw,36px) 60px; max-width:1180px; margin:0 auto; }
  .panel{ display:none; }
  .panel.active{ display:block; }

  /* ---------- Home ---------- */
  /* Two data blocks then a plain link row. Section headings borrow the rule-
     under-Oswald treatment the Checklist and Protocols groups already use. */
  .home-block{ margin-bottom:26px; }
  .home-block h2{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; color:var(--navy);
    margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule);
  }
  .home-quiet{
    margin:0; font-size:13px; color:var(--ink-faint); line-height:1.55;
  }
  .home-quiet a{ color:var(--brick); }

  /* One recent note, or the daily highlight — same row treatment, same as the
     striped list rows elsewhere. */
  .home-note, .home-highlight{
    display:block; text-decoration:none; color:inherit;
    border:1px solid var(--rule); border-bottom:none; background:var(--row-a);
    padding:11px 14px;
  }
  .home-note:nth-child(even){ background:var(--row-b); }
  .home-note:last-child{ border-bottom:1px solid var(--rule); }
  .home-highlight{
    border-bottom:1px solid var(--rule);
    border-left:4px solid var(--gold); background:var(--paper-soft);
  }
  .home-note:hover, .home-highlight:hover{ border-color:var(--navy-soft); }

  .home-note-top{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  }
  .home-note-top .subject{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--brick); white-space:nowrap;
  }
  .home-note-top .session{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; color:var(--navy);
  }
  .home-note-top .when{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);
    margin-left:auto; white-space:nowrap;
  }
  .home-note-snippet{
    margin:5px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.5;
  }

  /* Plain text links — deliberately no cards, descriptions or status badges. */
  .home-tools{
    display:flex; gap:18px; flex-wrap:wrap;
    padding-top:14px; border-top:1px solid var(--rule);
  }
  .home-tools a{
    font-family:'Oswald',sans-serif; font-weight:500; font-size:14px;
    color:var(--ink-soft); text-decoration:none;
    border-bottom:1px solid transparent; padding-bottom:1px;
  }
  .home-tools a:hover{ color:var(--navy); border-bottom-color:var(--brick); }

  /* Placeholder tool panel */
  .placeholder{
    border:1px dashed var(--rule);
    background:var(--row-a);
    padding:32px clamp(20px,4vw,44px);
    text-align:left;
    max-width:64ch;
  }
  .placeholder .tag{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
    color:var(--brick); text-transform:uppercase; margin-bottom:10px;
  }
  .placeholder h2{
    font-family:'Oswald', sans-serif; font-weight:600; font-size:21px;
    color:var(--navy); margin:0 0 12px;
  }
  .placeholder p{ color:var(--ink-soft); line-height:1.6; margin:0 0 10px; }
  .placeholder ul{ color:var(--ink-soft); line-height:1.7; padding-left:20px; margin:0 0 14px;}

  /* ---------- Notes ---------- */
  .notes-shell{
    display:grid;
    grid-template-columns: 240px 1fr;
    gap:0;
    border:1px solid var(--rule);
    min-height:560px;
    background:var(--row-a);
  }
  @media (max-width: 760px){
    .notes-shell{ grid-template-columns: 1fr; }
    .notes-sidebar{ border-right:none !important; border-bottom:1px solid var(--rule); }
  }
  .notes-sidebar{
    border-right:1px solid var(--rule);
    background:var(--paper-soft);
    padding:16px 14px;
    overflow-y:auto;
    max-height:720px;
  }
  /* Section header with its add action on the same line. */
  .sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
  }
  .sidebar-head .sidebar-label{ margin:0; }
  .sidebar-head .btn{ flex:0 0 auto; }
  .sidebar-label{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em;
    color:var(--ink-faint); text-transform:uppercase; margin:14px 0 8px;
  }
  .sidebar-label:first-child{ margin-top:0; }
  .book-item{
    display:flex; align-items:center; justify-content:space-between; gap:7px;
    padding:8px 10px; margin-bottom:2px; cursor:pointer;
    font-family:'Oswald',sans-serif; font-size:14.5px; color:var(--ink);
    border-left:3px solid transparent;
  }
  .book-item:hover{ background:var(--row-a); }
  .book-item.active{ border-left-color:var(--brick); background:var(--row-a); color:var(--navy); font-weight:600;}
  .book-item .count{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); }
  /* Sessions nested under their own subject row. */
  .book-group{ margin-bottom:2px; }
  .book-group.open{ margin-bottom:10px; }
  .book-children{
    margin:2px 0 0 10px;
    padding:2px 0 4px 4px;
    border-left:1px solid var(--rule);
  }
  .book-children .btn-row{ margin-top:6px; padding-left:14px; }
  .book-children .inline-form{ padding-left:14px; }

  .chapter-item{
    padding:7px 10px 7px 8px; margin-bottom:1px; cursor:pointer;
    font-size:13px; color:var(--ink-soft); border-left:3px solid transparent;
    display:flex; align-items:center; justify-content:space-between; gap:6px;
  }
  .book-item .row-name, .chapter-item .row-name{
    flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* These rows are click targets, not prose. Making them unselectable stops a
     press-and-drag highlighting their text instead of moving the row. */
  .book-item, .chapter-item{
    -webkit-user-select:none;
    user-select:none;
  }
  .chapter-item:hover{ background:var(--row-a); }
  .chapter-item.active{ border-left-color:var(--gold); background:var(--row-a); color:var(--navy); font-weight:600; }
  .chapter-date{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); white-space:nowrap;}

  .btn{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.03em;
    background:var(--navy); color:#fff; border:none; padding:7px 12px;
    cursor:pointer; transition:background .15s ease;
  }
  .btn:hover{ background:var(--navy-soft); }
  .btn.ghost{
    background:transparent; color:var(--navy); border:1px solid var(--navy);
  }
  .btn.ghost:hover{ background:var(--navy); color:#fff; }
  .btn.danger{ background:transparent; color:var(--brick); border:1px solid var(--brick-soft); }
  .btn.danger:hover{ background:var(--brick); color:#fff; }
  .btn.small{ padding:4px 9px; font-size:10.5px; }
  .btn-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

  .notes-main{ display:flex; flex-direction:column; min-height:560px; }
  .notes-toolbar{
    padding:14px 20px; border-bottom:1px solid var(--rule);
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  .search-box{
    flex:1; min-width:200px;
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--rule); background:var(--paper); padding:7px 12px;
  }
  .search-box input{
    border:none; background:transparent; outline:none; flex:1;
    font-family:'Public Sans',sans-serif; font-size:13.5px; color:var(--ink);
  }
  .search-box svg{ flex-shrink:0; opacity:.55; }

  .search-results{
    padding:14px 20px; overflow-y:auto;
  }
  .search-hit{
    border:1px solid var(--rule); background:var(--paper); padding:12px 14px;
    margin-bottom:10px; cursor:pointer;
  }
  .search-hit:hover{ border-color:var(--navy-soft); }
  .search-hit .loc{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--brick); margin-bottom:4px;
  }
  .search-hit .snippet{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
  .search-hit mark{ background:#f0d98a; color:var(--ink); padding:0 1px; }

  .chapter-header{
    padding:16px 20px 12px; border-bottom:1px solid var(--rule);
  }
  .chapter-header input.title{
    font-family:'Oswald', sans-serif; font-weight:600; font-size:20px;
    color:var(--navy); border:none; background:transparent; outline:none;
    width:100%; padding:2px 0;
  }
  .chapter-meta{ display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap;}
  .chapter-meta input.date{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint);
    border:none; background:transparent; outline:none;
  }
  .save-state{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); }

  textarea.notebody{
    flex:1; width:100%; border:none; outline:none; resize:none;
    background:transparent; color:var(--ink);
    font-family:'Public Sans', sans-serif; font-size:15px; line-height:1.7;
    padding:18px 20px 24px;
  }

  .empty-state{
    flex:1; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:10px; color:var(--ink-faint); text-align:center; padding:40px;
  }
  .empty-state h3{ font-family:'Oswald',sans-serif; color:var(--ink-soft); font-weight:500; margin:0; font-size:16px;}
  .empty-state p{ margin:0; font-size:13px; max-width:36ch; }

  /* modal-ish inline prompt */
  .inline-form{
    display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;
  }
  .inline-form input{
    font-family:'Public Sans',sans-serif; font-size:13px; padding:6px 9px;
    border:1px solid var(--rule); background:var(--paper); flex:1; min-width:110px;
  }

  footer.disclaimer{
    max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,36px) 40px;
    color:var(--ink-faint); font-size:11.5px; line-height:1.6; border-top:1px solid var(--rule);
    padding-top:16px; margin-top:20px;
  }

  /* ---------- Added for the deployed app ---------- */

  /* Tabs are real links now, not buttons. */
  nav.tabs a{
    font-family:'Oswald', sans-serif;
    font-weight:500;
    font-size:14.5px;
    letter-spacing:0.02em;
    background:transparent;
    border:none;
    color:var(--ink-soft);
    padding:10px 16px;
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
    border-bottom:3px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.tabs a:hover{ color:var(--navy); }
  nav.tabs a.active{
    color:var(--navy);
    border-bottom-color:var(--brick);
  }

  .brand-side{ display:flex; align-items:center; gap:14px; }
  .logout-link{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.04em;
    color:var(--ink-faint); background:none; border:none; cursor:pointer; padding:0;
    text-decoration:underline; text-underline-offset:3px;
  }
  .logout-link:hover{ color:var(--brick); }

  /* Connection / sync banner */
  .banner{
    display:none;
    border:1px solid var(--brick-soft); background:#f7e7e3; color:var(--brick);
    font-family:'IBM Plex Mono',monospace; font-size:12px;
    padding:9px 14px; margin-bottom:16px;
  }
  .banner.show{ display:block; }

  /* Book row actions */
  .book-item .book-actions,
  .chapter-item .chapter-actions{ display:none; gap:6px; }
  .book-item:hover .book-actions,
  .book-item.active .book-actions{ display:flex; }
  .icon-btn{
    background:none; border:none; cursor:pointer; padding:0 2px;
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);
    line-height:1;
  }
  .icon-btn:hover{ color:var(--brick); }
  .book-item .right{ display:flex; align-items:center; gap:8px; }

  /* Move-chapter control in the chapter header */
  .chapter-meta select{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);
    background:var(--paper); border:1px solid var(--rule); padding:4px 6px;
  }
  .save-state.error{ color:var(--brick); }

  /* Search result count line */
  .search-count{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;
  }

  /* ---------- Login ---------- */
  body.login-page{
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .login-card{
    border:1px solid var(--rule); background:var(--row-a);
    padding:34px clamp(22px,5vw,40px); max-width:380px; width:100%;
    border-top:3px solid var(--navy);
  }
  .login-card .eyebrow{ margin-bottom:4px; }
  .login-card h1{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:26px;
    color:var(--navy); margin:0 0 6px;
  }
  .login-card p.sub{ margin:0 0 22px; font-size:13px; color:var(--ink-soft); line-height:1.5; }
  .login-card input{
    width:100%; font-family:'IBM Plex Mono',monospace; font-size:15px;
    padding:11px 12px; border:1px solid var(--rule); background:var(--paper);
    color:var(--ink); outline:none; letter-spacing:0.08em;
  }
  .login-card input:focus{ border-color:var(--navy-soft); }
  .login-card .btn{ width:100%; margin-top:12px; padding:11px; font-size:12.5px; }
  .login-error{
    display:none; margin-top:12px; font-family:'IBM Plex Mono',monospace;
    font-size:11.5px; color:var(--brick);
  }
  .login-error.show{ display:block; }

  /* ---------- Checklist ---------- */
  .checklist-section{ margin-bottom:26px; }
  .checklist-section h3{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:16px;
    color:var(--navy); margin:0 0 10px; padding-bottom:6px;
    border-bottom:1px solid var(--rule);
  }
  .check-row{
    display:flex; align-items:flex-start; gap:10px;
    padding:9px 12px; border:1px solid var(--rule); border-bottom:none;
    background:var(--row-a); font-size:13.5px; color:var(--ink); line-height:1.45;
  }
  .check-row:nth-child(even){ background:var(--row-b); }
  .check-row:last-child{ border-bottom:1px solid var(--rule); }
  .check-row input[type=checkbox]{
    margin-top:2px; width:16px; height:16px; accent-color:var(--navy); flex-shrink:0; cursor:pointer;
  }
  .check-row.done label{ color:var(--ink-faint); text-decoration:line-through; }
  .check-row label{ cursor:pointer; }
  .checklist-progress{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-faint);
    margin-bottom:18px;
  }

  /* ---------- Protocols ---------- */
  .protocol-head{
    border:1px solid var(--rule); border-top:3px solid var(--navy);
    background:var(--row-a); padding:20px clamp(18px,3vw,28px) 18px; margin-bottom:16px;
  }
  .protocol-head .tag{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
    color:var(--brick); text-transform:uppercase; margin-bottom:6px;
  }
  .protocol-head h2{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:21px;
    color:var(--navy); margin:0 0 14px;
  }

  /* Revision banner — the "which version am I reading" strip. */
  .revision{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    border-left:4px solid var(--gold); background:var(--paper-soft);
    padding:11px 14px; margin-bottom:12px;
  }
  .revision .label{
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:3px;
  }
  .revision .date{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:19px;
    color:var(--navy); letter-spacing:0.01em; line-height:1.1;
  }
  .revision .meta{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);
    line-height:1.6;
  }
  .revision-note{
    font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0;
    padding-left:14px; border-left:2px solid var(--rule);
  }
  .revision-note a{ color:var(--brick); }

  .protocol-toolbar{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
  }
  .protocol-toolbar .search-box{ flex:1; min-width:220px; background:var(--row-a); }
  .protocol-status{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap;
  }

  .cat-group{ margin-bottom:22px; }
  .cat-group h3{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; color:var(--navy);
    margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--rule);
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  }
  .cat-group h3 .n{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); font-weight:400;
  }

  .proto-row{
    border:1px solid var(--rule); border-bottom:none; background:var(--row-a);
  }
  .proto-row:last-child{ border-bottom:1px solid var(--rule); }
  .proto-row:nth-child(even){ background:var(--row-b); }
  .proto-row > button{
    width:100%; display:flex; align-items:baseline; gap:12px; text-align:left;
    background:none; border:none; cursor:pointer; padding:10px 13px;
    font-family:inherit; color:var(--ink);
  }
  .proto-row > button:hover{ color:var(--brick); }
  .proto-row .code{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--brick);
    flex-shrink:0; min-width:48px; letter-spacing:0.02em;
  }
  .proto-row .name{
    font-family:'Public Sans',sans-serif; font-size:13.5px; line-height:1.4; flex:1;
  }
  .proto-row .pages{
    font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint);
    flex-shrink:0; white-space:nowrap;
  }
  .proto-row.open > button .name{ font-weight:600; color:var(--navy); }
  .proto-body{
    display:none; padding:4px 16px 18px; background:var(--paper);
    border-top:1px solid var(--rule);
  }
  .proto-row.open .proto-body{ display:block; }
  /* Readable measure — the body must not span the full container. */
  .po-body{
    max-width:700px;
    font-family:'Public Sans',sans-serif;
    font-size:14px;
    line-height:1.72;
    color:var(--ink);
  }

  .po-body .po-h{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
    letter-spacing:0.04em; text-transform:uppercase;
    color:var(--navy); margin:20px 0 8px; padding-bottom:4px;
    border-bottom:1px solid var(--rule);
  }
  .po-body > .po-h:first-child{ margin-top:6px; }
  .po-body .po-p{ margin:0 0 10px; }

  .po-list{ list-style:none; margin:0; padding:0; }
  /* Each nesting level steps in from its parent. */
  .po-list.po-d1{ margin-left:6px; }
  .po-list.po-d2{ margin-left:4px; }
  .po-list.po-d3{ margin-left:4px; }

  .po-item{
    display:flex; align-items:baseline; gap:9px;
    margin-bottom:4px;
  }
  /* Breathing room between top-level points so section breaks are scannable. */
  .po-body > .po-list > .po-item{ margin-bottom:13px; }
  .po-body > .po-list > .po-item:last-child{ margin-bottom:4px; }

  .po-mk{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    color:var(--brick); flex-shrink:0; min-width:19px;
    line-height:1.85;
  }
  .po-tx{ flex:1; min-width:0; }
  /* A nested list sits under its parent's text, not under the marker. */
  .po-tx > .po-list{ margin-top:6px; }

  /* Deeper levels are quieter, so the eye tracks the top level first. */
  .po-list.po-d1 > .po-item > .po-mk{ color:var(--navy-soft); }
  .po-list.po-d2 > .po-item > .po-mk,
  .po-list.po-d3 > .po-item > .po-mk{ color:var(--gold); }
  .po-list.po-d2 > .po-item,
  .po-list.po-d3 > .po-item{ font-size:13.5px; color:var(--ink-soft); }

  @media (max-width: 620px){
    .po-body{ font-size:13.5px; }
    .po-mk{ min-width:17px; }
  }
  .proto-body .src{
    max-width:700px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint);
    margin-top:12px; padding-top:8px; border-top:1px solid var(--rule);
  }

  .proto-hit{
    border:1px solid var(--rule); background:var(--row-a); padding:12px 14px;
    margin-bottom:9px; cursor:pointer;
  }
  .proto-hit:hover{ border-color:var(--navy-soft); }
  .proto-hit .loc{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--brick); margin-bottom:4px;
  }
  .proto-hit .name{
    font-family:'Oswald',sans-serif; font-weight:500; font-size:14.5px; color:var(--navy); margin-bottom:5px;
  }
  .proto-hit .snippet{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
  .proto-hit mark{ background:#f0d98a; color:var(--ink); padding:0 1px; }

  .proto-error{
    border:1px solid var(--brick-soft); border-left:4px solid var(--brick);
    background:#f7e7e3; padding:16px 18px;
  }
  .proto-error h3{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:16px;
    color:var(--brick); margin:0 0 8px;
  }
  .proto-error p{ margin:0 0 8px; font-size:13px; color:var(--ink); line-height:1.55; }
  .proto-error code{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    background:var(--paper); padding:1px 5px; border:1px solid var(--rule);
  }

  /* ---------- What's New (change list) ---------- */
  .whatsnew{
    border:1px solid var(--rule); border-left:4px solid var(--brick);
    background:var(--row-a); margin-bottom:16px;
  }
  .whatsnew[hidden]{ display:none; }
  .whatsnew > summary{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    padding:12px 15px; cursor:pointer; list-style:none;
    user-select:none;
  }
  .whatsnew > summary::-webkit-details-marker{ display:none; }
  .whatsnew > summary:hover .wn-title{ color:var(--brick); }
  .wn-chev{
    display:inline-block; width:0; height:0; flex-shrink:0;
    border-left:6px solid var(--brick);
    border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
    transition:transform .15s ease; transform-origin:25% 50%;
  }
  .whatsnew[open] > summary .wn-chev{ transform:rotate(90deg); }
  .wn-title{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15px;
    color:var(--navy); letter-spacing:0.01em;
  }
  .wn-rev{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);
    letter-spacing:0.04em;
  }
  .wn-count{
    margin-left:auto;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    color:var(--brick); border:1px solid #e0b3ab; background:var(--paper);
    padding:2px 8px; white-space:nowrap;
  }

  .wn-body{ padding:2px 15px 14px; border-top:1px solid var(--rule); }
  .wn-entry{
    padding:11px 0; border-bottom:1px solid var(--rule);
    max-width:720px;
  }
  .wn-entry:last-child{ border-bottom:none; }
  .wn-entry-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .wn-code{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--brick);
    flex-shrink:0; min-width:46px;
  }
  .wn-name{
    font-family:'Oswald',sans-serif; font-weight:500; font-size:14px; color:var(--navy);
  }
  .wn-details{ list-style:none; margin:6px 0 0; padding:0 0 0 56px; }
  .wn-details li{
    font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:3px;
    position:relative; padding-left:13px;
  }
  .wn-details li::before{
    content:'+'; position:absolute; left:0; top:0;
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold);
  }
  .wn-jump{
    margin:7px 0 0 56px;
    font-family:'IBM Plex Mono',monospace; font-size:11px;
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--navy); text-decoration:underline; text-underline-offset:3px;
  }
  .wn-jump:hover{ color:var(--brick); }
  .wn-jump .arrow{ text-decoration:none; }

  /* Entries whose code names a family rather than one section. */
  .wn-flag{
    margin:7px 0 0 56px; padding:7px 10px;
    border:1px solid var(--rule); background:var(--paper-soft);
    font-size:12px; color:var(--ink-soft); line-height:1.5;
  }
  .wn-flag strong{ color:var(--navy); font-weight:600; }
  .wn-flag.unmatched{ border-color:#e0b3ab; background:#f7e7e3; color:var(--brick); }
  .wn-flag .wn-jump{ margin:5px 14px 0 0; display:inline-block; }

  @media (max-width: 620px){
    .wn-details, .wn-jump, .wn-flag{ margin-left:0; padding-left:13px; }
    .wn-count{ margin-left:0; }
  }

  /* ---------- Diagram pages rendered from the source PDF ---------- */
  .po-diagram{ max-width:1180px; }

  /* Image beside the text toggle on wide viewports, stacked when narrow.
     ~60/40; minmax(0,…) stops a wide page image forcing the grid open. */
  .po-split{
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    gap:20px;
    align-items:start;
  }
  .po-pages{ min-width:0; }
  .po-aside{ min-width:0; }
  @media (max-width: 860px){
    .po-split{ grid-template-columns:minmax(0,1fr); gap:4px; }
  }
  .po-notice{
    display:flex; gap:9px; align-items:flex-start;
    border:1px solid var(--rule); border-left:4px solid var(--gold);
    background:var(--paper-soft); padding:10px 13px; margin-bottom:12px;
    font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  }
  .po-notice.reduced{ border-left-color:var(--brick); background:#f7e7e3; color:var(--brick); }
  .po-notice strong{ color:var(--navy); font-weight:600; }
  .po-notice.reduced strong{ color:var(--brick); }

  .po-page{
    display:block; width:100%; height:auto; margin:0 0 12px;
    border:1px solid var(--rule); background:#fff;
  }
  .po-pagenum{
    font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint);
    margin:-6px 0 14px;
  }

  /* Extracted text stays available underneath, collapsed, because search
     matches against it and it is still useful for copy/paste. */
  .po-textfallback{ margin-top:0; max-width:720px; }
  .po-aside .po-textfallback{ margin-top:0; max-width:none; }
  .po-aside .po-textfallback > summary{ border-top:none; padding-top:0; }
  .po-aside .po-body{ max-width:none; }
  .po-textfallback > summary{
    cursor:pointer; list-style:none;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--navy);
    padding:7px 0; border-top:1px solid var(--rule);
  }
  .po-textfallback > summary::-webkit-details-marker{ display:none; }
  .po-textfallback > summary:hover{ color:var(--brick); }
  .po-textfallback > summary::before{ content:'+ '; color:var(--gold); }
  .po-textfallback[open] > summary::before{ content:'– '; }

  /* A text page inside an otherwise diagram-rendered section. */
  .po-textpage{ max-width:720px; margin-bottom:18px; }
  .po-textpage .po-body{ max-width:none; }
  .po-textpage .po-pagenum{ margin:8px 0 0; padding-top:6px; border-top:1px solid var(--rule); }
  .po-diagram > .po-split{ margin-bottom:18px; }

  /* ---------- Drag-to-reorder ---------- */
  /* Dragging starts from a grip rather than the whole row, so a finger can
     still scroll the sidebar. touch-action:none stops the browser claiming the
     gesture as a scroll before pointermove fires. */
  .grip{
    flex:0 0 auto;
    cursor:grab;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    color:var(--ink-faint);
    font-size:12px;
    line-height:1;
    padding:3px 2px;
    opacity:.45;
    transition:opacity .15s ease, color .15s ease;
  }
  .grip:hover{ opacity:1; color:var(--navy); }
  .grip:active{ cursor:grabbing; }
  .book-item:hover .grip, .book-item.active .grip,
  .chapter-item:hover .grip, .chapter-item.active .grip{ opacity:.85; }

  .book-group.dragging > .book-item,
  .chapter-item.dragging{
    background:var(--row-a);
    outline:1px solid var(--navy-soft);
    opacity:.9;
  }
  .book-group.dragging{ opacity:.9; }
  /* While a drag is in flight, rows should not look clickable. */
  .reordering .book-item, .reordering .chapter-item{ cursor:grabbing; }

  /* Belt and braces for the duration of a drag, including anything the pointer
     passes over on its way. */
  body.dragging-active, body.dragging-active *{
    -webkit-user-select:none !important;
    user-select:none !important;
    cursor:grabbing !important;
  }

  /* ---------- Login / signup fields ---------- */
  /* The passcode gate had one unlabelled box; real credentials need labels,
     so these extend .login-card rather than replacing any of it. */
  .login-card .field-label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
    margin:0 0 5px;
  }
  .login-card .field-label + input{ margin-bottom:14px; }
  .login-card .field-hint{
    margin:-10px 0 14px; font-family:'IBM Plex Mono',monospace;
    font-size:10.5px; color:var(--ink-faint);
  }
  .login-card input{ letter-spacing:normal; }
  .login-card input[type=password]{ letter-spacing:0.08em; }
  .login-foot{
    margin:16px 0 0; padding-top:14px; border-top:1px solid var(--rule);
    font-size:12px; color:var(--ink-soft); line-height:1.5;
  }
  .login-foot a{ color:var(--brick); }

  /* ---------- Admin & Feedback page heads ---------- */
  /* One treatment, two pages — shared rather than restated so they cannot
     drift apart. Same box as .protocol-head: navy top rule, tag, title, blurb. */
  .admin-head,
  .feedback-head{
    border:1px solid var(--rule); border-top:3px solid var(--navy);
    background:var(--row-a); padding:20px clamp(18px,3vw,28px) 18px; margin-bottom:20px;
  }
  .admin-head .tag,
  .feedback-head .tag{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
    color:var(--brick); text-transform:uppercase; margin-bottom:6px;
  }
  .admin-head h2,
  .feedback-head h2{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:21px;
    color:var(--navy); margin:0 0 6px;
  }
  .admin-head p,
  .feedback-head p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.55; max-width:68ch; }
  .admin-section{ margin-bottom:30px; }
  .admin-section > h3{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; color:var(--navy);
    margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule);
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  }
  .admin-section > h3 .n{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); font-weight:400;
  }

  /* One invite link. Revoked links stay listed — the record of who joined
     through them is the reason the row exists. */
  .invite-row{
    border:1px solid var(--rule); border-bottom:none; background:var(--row-a);
    padding:13px 15px;
  }
  .invite-row:last-child{ border-bottom:1px solid var(--rule); }
  .invite-row:nth-child(even){ background:var(--row-b); }
  .invite-row.revoked{ background:var(--paper-soft); }
  .invite-top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .invite-label{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15.5px; color:var(--navy);
  }
  .invite-row.revoked .invite-label{ color:var(--ink-faint); text-decoration:line-through; }
  .invite-state{
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; padding:2px 7px; border:1px solid currentColor;
  }
  .invite-state.active{ color:var(--navy-soft); }
  .invite-state.revoked{ color:var(--brick); }
  .invite-state.full{ color:var(--gold); }
  .invite-count{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);
    margin-left:auto; white-space:nowrap;
  }
  .invite-url{
    display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap;
  }
  .invite-url code{
    flex:1; min-width:220px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    color:var(--ink-soft); background:var(--paper); border:1px solid var(--rule);
    padding:6px 9px; overflow-x:auto; white-space:nowrap;
  }
  .invite-row.revoked .invite-url code{ color:var(--ink-faint); text-decoration:line-through; }
  .invite-signups{
    margin-top:9px; font-family:'IBM Plex Mono',monospace; font-size:11px;
    color:var(--ink-faint); line-height:1.7;
  }
  .invite-signups strong{ color:var(--ink-soft); font-weight:500; }
  .invite-meta{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);
    margin-top:7px;
  }

  /* New-link form */
  .new-invite{
    border:1px solid var(--rule); background:var(--row-a); padding:14px 15px; margin-top:12px;
    display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  }
  .new-invite .fld{ display:flex; flex-direction:column; gap:5px; }
  .new-invite .fld.grow{ flex:1; min-width:200px; }
  .new-invite label{
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .new-invite input{
    font-family:'Public Sans',sans-serif; font-size:13.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--rule); padding:8px 10px; outline:none;
  }
  .new-invite input:focus{ border-color:var(--navy-soft); }
  .new-invite input.uses{ width:130px; }
  .admin-error{
    display:none; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    color:var(--brick); margin-top:8px;
  }
  .admin-error.show{ display:block; }

  /* Feedback list */
  .fb-row{
    border:1px solid var(--rule); border-bottom:none; background:var(--row-a);
    padding:12px 15px;
  }
  .fb-row:last-child{ border-bottom:1px solid var(--rule); }
  .fb-row:nth-child(even){ background:var(--row-b); }
  .fb-meta{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px;
  }
  .fb-meta .who{ color:var(--brick); }
  .fb-section{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--navy-soft);
  }
  .fb-body{ font-size:13.5px; line-height:1.55; color:var(--ink); white-space:pre-wrap; margin:0; }

  /* ---------- Feedback tab ---------- */
  /* The form's action row: Send, with the email alternative beside it. */
  .feedback-actions{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px;
  }
  .feedback-actions .or{ font-size:12.5px; color:var(--ink-soft); }
  .feedback-actions .or a{ color:var(--brick); }
  .fb-form{
    border:1px solid var(--rule); border-left:4px solid var(--gold);
    background:var(--paper-soft); padding:14px 15px; margin-top:12px;
  }
  .fb-form .tagged{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint);
    margin:0 0 8px;
  }
  .fb-form .tagged strong{ color:var(--navy-soft); font-weight:500; }
  .fb-form textarea{
    width:100%; min-height:96px; resize:vertical;
    font-family:'Public Sans',sans-serif; font-size:13.5px; line-height:1.55; color:var(--ink);
    background:var(--paper); border:1px solid var(--rule); padding:9px 11px; outline:none;
  }
  .fb-form textarea:focus{ border-color:var(--navy-soft); }
  .fb-note{
    font-family:'IBM Plex Mono',monospace; font-size:11px; margin-top:8px; color:var(--ink-faint);
  }
  .fb-note.error{ color:var(--brick); }
  .fb-note.ok{ color:var(--navy-soft); }

  .who-label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint);
    white-space:nowrap;
  }
  a.logout-link{ display:inline-block; }

  /* Two-step revoke, in the row it belongs to. */
  .invite-confirm{
    margin-top:9px; padding:10px 12px;
    border:1px solid var(--brick-soft); border-left:4px solid var(--brick);
    background:var(--paper); font-size:12.5px; color:var(--ink-soft); line-height:1.5;
  }
  .invite-confirm .btn-row{ margin-top:8px; }