/* THL Hybrid Notes — member workspace.
   Calm-clinical premium design system. Inter is SELF-HOSTED below
   (assets/fonts/, variable 400-700): no Google Fonts request from a
   member-only clinical tool (GDPR + availability).
   All classes hn- prefixed and scoped under .hn-app to resist theme bleed. */

/* Inter variable font, latin + latin-ext subsets (Inter v20). */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.hn-app{
  --hn-bg:#e7ebf2; --hn-surface:#fff; --hn-sidebar:#fbfcfe;
  /* navy rail + on-rail tokens */
  --hn-rail:#2d3748; --hn-rail-2:#252d39;
  --hn-rt:rgba(255,255,255,.74); --hn-rt-2:rgba(255,255,255,.44);
  --hn-rhover:rgba(255,255,255,.07); --hn-rline:rgba(255,255,255,.10);
  --hn-ink:#1b2433; --hn-ink-2:#566072; --hn-ink-3:#8a93a4;
  --hn-line:#e3e8ef; --hn-line-2:#eef1f6;
  --hn-navy:#2d3748; --hn-navy-2:#222c39; --hn-blue:#7aafc9; --hn-blue-deep:#5b93b0;
  --hn-blue-tint:rgba(122,175,201,.15);
  --hn-grey-text:#6b7280;
  --hn-sh-sm:0 1px 2px rgba(16,24,40,.05);
  --hn-sh-md:0 2px 8px rgba(16,24,40,.06),0 12px 30px rgba(16,24,40,.09);
  --hn-sh-card:0 1px 2px rgba(20,30,50,.04),0 16px 34px -12px rgba(20,30,50,.20);
  --hn-r-card:18px; --hn-r-ctrl:11px;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  color:var(--hn-ink); letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
}
.hn-app *{box-sizing:border-box;}

.hn-shell{display:flex;height:min(820px,80vh);min-height:560px;background:var(--hn-surface);
  border:1px solid var(--hn-line);border-radius:var(--hn-r-card);box-shadow:var(--hn-sh-md);overflow:hidden;}

/* sidebar — navy rail */
.hn-side{width:248px;flex:0 0 248px;background:linear-gradient(180deg,var(--hn-rail),var(--hn-rail-2));display:flex;flex-direction:column;}
.hn-brand{display:flex;align-items:center;gap:12px;padding:22px 20px 18px;}
.hn-brand__icon{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.hn-brand__icon svg{width:34px;height:34px;}
@keyframes hn-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.hn-brand__name{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.1;color:#fff;}
.hn-brand__name .a{color:var(--hn-blue);}
.hn-brand__beta{font-size:9px;font-weight:700;letter-spacing:.12em;color:#bcd5e4;background:rgba(255,255,255,.09);border-radius:999px;padding:2px 7px;margin-top:4px;display:inline-block;}
.hn-nav{padding:6px 12px;flex:1;}
.hn-nav__label{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--hn-rt-2);padding:10px 12px 7px;}
.hn-nav__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;text-align:left;padding:9px 12px;border-radius:10px;color:var(--hn-rt);font:inherit;font-size:14px;font-weight:500;cursor:pointer;margin-bottom:2px;transition:background .15s,color .15s;}
.hn-nav__item svg{width:18px;height:18px;color:var(--hn-rt-2);transition:color .15s;}
.hn-nav__item:hover{background:var(--hn-rhover);color:#fff;}
.hn-nav__item:hover svg{color:#fff;}
.hn-nav__item.is-active{background:rgba(122,175,201,.16);color:#fff;font-weight:600;}
.hn-nav__item.is-active svg{color:var(--hn-blue);}
.hn-nav__item.is-active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--hn-blue);}
.hn-side__foot{padding:10px 12px 14px;border-top:1px solid var(--hn-rline);}
.hn-side__user{display:flex;align-items:center;gap:10px;padding:7px 12px;}
.hn-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#7aafc9,#5b93b0);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.12);}
.hn-side__name{flex:1;min-width:0;font-size:13px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* "Back to The Hybrid Layer" — bottom row, aligned with the nav items above */
.hn-backlink{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;margin-top:4px;border-radius:10px;text-decoration:none;color:var(--hn-rt);font-size:13px;font-weight:500;transition:background .15s,color .15s;}
.hn-backlink:hover{background:var(--hn-rhover);color:#fff;}
.hn-backlink__mark{flex:0 0 auto;width:18px;height:18px;display:flex;flex-direction:column;justify-content:center;gap:2.5px;}
.hn-backlink__mark i{display:block;height:3.5px;border-radius:1px;}
.hn-backlink__mark i:nth-child(1){background:#cdd3da;width:100%;}
.hn-backlink__mark i:nth-child(2){background:var(--hn-blue);width:100%;}
.hn-backlink__mark i:nth-child(3){background:#fff;width:62%;}
.hn-backlink__txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hn-backlink__chev{flex:0 0 auto;color:var(--hn-rt-2);transition:transform .15s,color .15s;display:flex;}
.hn-backlink:hover .hn-backlink__chev{color:var(--hn-blue);transform:translateX(2px);}

/* main — soft canvas */
.hn-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--hn-bg);}
.hn-topbar{padding:22px 30px 8px;flex:0 0 auto;}
.hn-topbar h1{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0;}
.hn-topbar .hn-sub{color:var(--hn-ink-3);font-size:13px;margin-top:4px;}
.hn-view{flex:1;min-height:0;overflow:auto;padding:18px 30px 28px;}
.hn-view[hidden]{display:none;}

/* buttons */
.hn-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--hn-r-ctrl);font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;}
.hn-btn svg{width:16px;height:16px;}
.hn-btn--primary{background:var(--hn-navy);color:#fff;padding:11px 20px;box-shadow:var(--hn-sh-sm);}
.hn-btn--primary:hover{background:var(--hn-navy-2);transform:translateY(-1px);box-shadow:var(--hn-sh-md);}
.hn-btn--primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
.hn-btn--icon{background:var(--hn-surface);color:var(--hn-ink-2);border-color:var(--hn-line);padding:8px 12px;font-size:13px;}
.hn-btn--icon:hover{border-color:#d6dbe4;color:var(--hn-ink);}
.hn-btn--ghost{background:var(--hn-surface);color:var(--hn-ink);border-color:var(--hn-line);padding:9px 14px;}
.hn-btn--ghost:hover{border-color:#d6dbe4;transform:translateY(-1px);box-shadow:var(--hn-sh-sm);}

/* compose — white cards on soft canvas, recessed wells inside */
.hn-compose{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;height:100%;}
.hn-pane{background:var(--hn-surface);border:1px solid rgba(20,30,50,.05);border-radius:var(--hn-r-card);box-shadow:var(--hn-sh-card);display:flex;flex-direction:column;overflow:hidden;}
.hn-pane__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 14px;flex:0 0 auto;}
.hn-pane__head h2{font-size:13px;font-weight:700;letter-spacing:.005em;margin:0;display:flex;align-items:center;gap:9px;color:var(--hn-ink);}
.hn-pane__body{padding:0 20px 18px;flex:1;display:flex;flex-direction:column;min-height:0;}
.hn-case{flex:1;width:100%;border:1px solid #eaeef4;border-radius:13px;background:#f7f9fc;box-shadow:inset 0 1px 2px rgba(16,24,40,.04);font:inherit;font-size:14.5px;line-height:1.65;resize:none;color:var(--hn-ink);padding:16px 18px;min-height:0;transition:border-color .15s,box-shadow .15s;}
.hn-case:focus{outline:none;border-color:var(--hn-blue);box-shadow:inset 0 1px 2px rgba(16,24,40,.04),0 0 0 3px var(--hn-blue-tint);}
.hn-case::placeholder{color:var(--hn-ink-3);}
.hn-tools{display:flex;align-items:center;gap:10px;margin-top:14px;flex:0 0 auto;}
.hn-tools .hn-spacer{flex:1;}
.hn-paper{flex:1;background:#f7f9fc;border:1px solid #eaeef4;border-radius:13px;box-shadow:inset 0 1px 2px rgba(16,24,40,.04);padding:18px 20px;font-size:14.5px;line-height:1.72;color:#2a3342;white-space:pre-wrap;overflow:auto;min-height:0;}
.hn-paper:focus{outline:none;border-color:var(--hn-blue);box-shadow:inset 0 1px 2px rgba(16,24,40,.04),0 0 0 3px var(--hn-blue-tint);}
.hn-paper--empty{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--hn-ink-3);font-size:14px;background:var(--hn-line-2);border-style:dashed;}
.hn-note-foot{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--hn-ink-3);font-size:12.5px;flex:0 0 auto;}
/* AI follow-up suggestion — shown below the note, kept OUT of the note + Copy */
.hn-followup{margin-top:12px;border:1px solid var(--hn-line);background:#fbfcfe;border-radius:12px;padding:11px 14px;flex:0 0 auto;}
.hn-followup__head{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-blue-deep);margin-bottom:5px;}
.hn-followup__head svg{width:13px;height:13px;}
.hn-followup__body{font-size:13px;line-height:1.55;color:var(--hn-ink-2);white-space:pre-wrap;}
.hn-dot{width:6px;height:6px;border-radius:50%;background:#37b26a;box-shadow:0 0 0 3px rgba(55,178,106,.16);}
.hn-spin{width:15px;height:15px;border:2px solid var(--hn-line);border-top-color:var(--hn-blue-deep);border-radius:50%;animation:hn-spin .7s linear infinite;}
@keyframes hn-spin{to{transform:rotate(360deg)}}
/* Generation loader — equaliser bars + staged status, shown in the note pane */
.hn-paper--loading{display:flex;align-items:center;justify-content:center;}
.hn-loader{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;padding:20px;}
.hn-loader__viz{display:flex;align-items:flex-end;gap:5px;height:34px;}
.hn-loader__viz i{display:block;width:5px;height:9px;border-radius:3px;background:linear-gradient(180deg,var(--hn-blue),var(--hn-blue-deep));animation:hn-eq 1.1s ease-in-out infinite;}
.hn-loader__viz i:nth-child(2){animation-delay:.15s;}
.hn-loader__viz i:nth-child(3){animation-delay:.3s;}
.hn-loader__viz i:nth-child(4){animation-delay:.45s;}
.hn-loader__viz i:nth-child(5){animation-delay:.6s;}
@keyframes hn-eq{0%,100%{height:9px;}50%{height:32px;}}
.hn-loader__msg{font-size:14px;font-weight:600;color:var(--hn-ink-2);min-height:1.2em;}
.hn-loader__hint{font-size:12px;color:var(--hn-ink-3);}

/* panels (library / profile) */
.hn-panel{background:var(--hn-surface);border:1px solid rgba(20,30,50,.05);border-radius:var(--hn-r-card);box-shadow:var(--hn-sh-card);margin-bottom:18px;max-width:760px;overflow:hidden;}
.hn-panel__head{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--hn-line-2);}
.hn-panel__head h2{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0;}
.hn-panel__head .hn-sub{color:var(--hn-ink-3);font-size:12.5px;}
.hn-status{margin-left:auto;font-size:12.5px;color:var(--hn-ink-3);display:inline-flex;align-items:center;gap:5px;}
.hn-status--ok{color:#2e9e57;}
.hn-status--err{color:#c0392b;}
.hn-status svg{width:13px;height:13px;}
.hn-rows{padding:6px 20px 14px;}
.hn-row{border-bottom:1px solid var(--hn-line-2);}
.hn-row:last-child{border-bottom:none;}
.hn-row__head{display:flex;align-items:center;gap:10px;padding:13px 6px;border-radius:10px;cursor:pointer;transition:background .12s;}
.hn-row__head:hover{background:var(--hn-line-2);}
.hn-row__title{flex:1;min-width:0;background:none;border:none;text-align:left;font:inherit;font-size:14.5px;font-weight:600;color:var(--hn-ink);cursor:pointer;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hn-row__title--ph{color:var(--hn-ink-3);font-weight:500;font-style:italic;}
.hn-row__tag{font-size:10px;text-transform:uppercase;letter-spacing:.05em;background:var(--hn-line-2);color:var(--hn-ink-2);border:1px solid var(--hn-line);border-radius:999px;padding:2px 9px;font-weight:600;flex:0 0 auto;}
.hn-row__ctrl{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;}
.hn-row__btn{background:none;border:none;cursor:pointer;color:var(--hn-ink-3);padding:6px;border-radius:8px;line-height:0;opacity:.6;transition:opacity .15s,color .15s,background .15s;}
.hn-row__head:hover .hn-row__btn{opacity:1;}
.hn-row__btn svg{width:16px;height:16px;display:block;}
.hn-row__btn--trash:hover{color:#d4382f;background:#fbeaea;}
.hn-row__btn--toggle:hover{color:var(--hn-ink);background:#fff;box-shadow:var(--hn-sh-sm);}
.hn-row__body{display:none;padding:2px 6px 16px;}
.hn-row.is-open>.hn-row__body{display:block;animation:hn-fade .18s ease both;}
@keyframes hn-fade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.hn-row__preview{color:var(--hn-ink-2);font-size:13.5px;line-height:1.6;margin:0;white-space:pre-wrap;}
/* Open/editing row: lift it into a contained card so the active item is clearly
   distinct from the collapsed rows above/below, and its internal "Add block"
   reads as nested inside (not a sibling of the library's "Add exam form"). */
.hn-row.is-open{background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:14px;box-shadow:var(--hn-sh-sm);margin:10px 0;}
.hn-row.is-open>.hn-row__head{padding:14px 14px 12px;border-radius:14px 14px 0 0;}
.hn-row.is-open>.hn-row__head:hover{background:none;}
.hn-row.is-open .hn-row__title{font-size:15.5px;font-weight:700;color:var(--hn-navy);white-space:normal;}
.hn-row.is-open>.hn-row__body{padding:0 16px 16px;}

.hn-add{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 40px);margin:4px 20px 18px;border:1px dashed #cdd4df;background:none;border-radius:10px;padding:11px;font:inherit;font-weight:600;font-size:13.5px;color:var(--hn-ink-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.hn-add:hover{border-color:var(--hn-blue);background:var(--hn-blue-tint);color:var(--hn-navy);}
.hn-add:disabled{opacity:.5;cursor:not-allowed;}
.hn-add svg{width:16px;height:16px;}

/* inputs / fields / chips */
.hn-input{width:100%;border:1px solid var(--hn-line);border-radius:10px;padding:10px 13px;font:inherit;font-size:14.5px;color:var(--hn-ink);background:var(--hn-surface);transition:border-color .15s,box-shadow .15s;}
.hn-input:focus{outline:none;border-color:var(--hn-blue);box-shadow:0 0 0 3px var(--hn-blue-tint);}
.hn-textarea{resize:vertical;line-height:1.55;min-height:96px;}
select.hn-select{max-width:320px;cursor:pointer;background:var(--hn-surface);}
.hn-cascade-hint{margin-top:8px;font-size:12px;color:var(--hn-ink-3);min-height:1em;}
.hn-app .hn-linkbtn{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--hn-blue-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.hn-app .hn-linkbtn:hover,.hn-app .hn-linkbtn:focus,.hn-app .hn-linkbtn:active{color:var(--hn-navy) !important;background:none !important;}
.hn-name-input{font-weight:600;margin-bottom:10px;}
.hn-field{padding:15px 0;border-bottom:1px solid var(--hn-line-2);}
.hn-field:last-child{border-bottom:none;}
.hn-field__label{display:block;font-weight:600;font-size:14px;margin-bottom:4px;}
.hn-field__help{color:var(--hn-ink-3);font-size:12.5px;margin:0 0 9px;line-height:1.45;}
.hn-chips{display:flex;gap:8px;flex-wrap:wrap;}
.hn-chip{border:1px solid var(--hn-line);border-radius:10px;padding:8px 14px;font-size:13.5px;cursor:pointer;color:var(--hn-ink-2);transition:border-color .15s,background .15s;}
.hn-chip:hover{border-color:#d6dbe4;}
.hn-chip.is-checked{border-color:var(--hn-blue);background:var(--hn-blue-tint);color:var(--hn-navy);font-weight:600;}
.hn-chip input{display:none;}

/* CTA (logged-out / non-member) */
.hn-cta{max-width:600px;margin:0 auto;text-align:center;padding:48px 24px;color:#2d3748;}
.hn-cta h2{font-size:24px;font-weight:700;}
.hn-cta p{color:#5a6573;line-height:1.55;}
.hn-cta .hn-btn{background:#2d3748!important;color:#fff!important;border-color:#2d3748!important;padding:11px 20px;}
.hn-cta .hn-btn:hover,.hn-cta .hn-btn:focus,.hn-cta .hn-btn:active{background:#222c39!important;border-color:#222c39!important;outline:none;}
.hn-cta__link{display:inline-block;margin-left:14px;color:#2d3748;}

/* Full-screen app takeover (dedicated template) */
body.hn-fullscreen{margin:0;height:100vh;overflow:hidden;background:var(--hn-bg,#e7ebf2);}
body.hn-fullscreen #thl-hn-app{height:100vh;}
body.hn-fullscreen.admin-bar #thl-hn-app{height:calc(100vh - 32px);}
@media screen and (max-width:782px){body.hn-fullscreen.admin-bar #thl-hn-app{height:calc(100vh - 46px);}}
body.hn-fullscreen .hn-shell{height:100%;border:none;border-radius:0;box-shadow:none;}

@media (max-width:1080px){
  body.hn-fullscreen{height:auto;overflow:auto;}
  body.hn-fullscreen #thl-hn-app,body.hn-fullscreen.admin-bar #thl-hn-app{height:auto;}
  .hn-shell{height:auto;flex-direction:column;}
  .hn-side{width:auto;flex:none;border-bottom:1px solid var(--hn-rline);}
  .hn-brand{padding:16px 20px;}
  .hn-nav{display:flex;align-items:center;gap:4px;overflow:auto;flex:1;}
  .hn-nav__label{display:none;}
  .hn-nav__item.is-active::before{display:none;}
  .hn-side__foot{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:none;}
  .hn-side__user{flex:1;margin:0;}
  .hn-backlink{width:auto;margin:0;}
  .hn-backlink__txt{display:none;}
  .hn-compose{grid-template-columns:1fr;height:auto;}
  .hn-pane{min-height:340px;}
}

/* ---- Compose: note controls, refine bar, version history (4b-2) ---- */
.hn-note-ctrl{display:flex;align-items:center;gap:8px;}
.hn-icononly{padding:8px;}
.hn-icononly svg{width:16px;height:16px;}
.hn-btn--icon:disabled{opacity:.45;cursor:default;}

.hn-verwrap{position:relative;}
.hn-ver{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hn-line);background:var(--hn-surface);border-radius:8px;padding:7px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--hn-ink-2);cursor:pointer;transition:border-color .15s,color .15s;}
.hn-ver:hover{border-color:#d6dbe4;color:var(--hn-ink);}
.hn-ver svg{width:13px;height:13px;}
.hn-vermenu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:170px;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:10px;box-shadow:var(--hn-sh-md);padding:5px;}
.hn-vermenu__item{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;color:var(--hn-ink-2);padding:8px 10px;border-radius:7px;cursor:pointer;}
.hn-vermenu__item:hover{background:var(--hn-line-2);color:var(--hn-ink);}
.hn-vermenu__item.is-active{background:var(--hn-blue-tint);color:var(--hn-navy);font-weight:600;}

.hn-refine{margin-top:14px;flex:0 0 auto;}
.hn-refine__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.hn-chip-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hn-line);background:var(--hn-surface);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:500;color:var(--hn-ink-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.hn-chip-action:hover{border-color:var(--hn-blue);background:var(--hn-blue-tint);color:var(--hn-navy);}
.hn-refine__bar{display:flex;align-items:center;gap:10px;border:1px solid var(--hn-line);background:var(--hn-surface);border-radius:12px;padding:8px 8px 8px 14px;box-shadow:var(--hn-sh-sm);transition:border-color .15s,box-shadow .15s;}
.hn-refine__bar:focus-within{border-color:var(--hn-blue);box-shadow:0 0 0 3px var(--hn-blue-tint);}
.hn-refine__spark{display:flex;flex:0 0 auto;color:var(--hn-blue-deep);}
.hn-refine__spark svg{width:17px;height:17px;}
.hn-refine__input{flex:1;border:none;background:none;font:inherit;font-size:14px;color:var(--hn-ink);}
.hn-refine__input:focus{outline:none;}
.hn-refine__input::placeholder{color:var(--hn-ink-3);}
.hn-refine__input:disabled{opacity:.6;}
.hn-refine__send{width:34px;height:34px;border-radius:9px;border:none;background:var(--hn-navy);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s,transform .12s;}
.hn-refine__send:hover{background:var(--hn-navy-2);transform:translateY(-1px);}
.hn-refine__send:disabled{opacity:.5;cursor:default;transform:none;}
.hn-refine__send svg{width:16px;height:16px;}

/* Inline selection popover */
.hn-selpop{position:fixed;z-index:60;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:12px;box-shadow:var(--hn-sh-md);padding:7px;display:flex;align-items:center;gap:5px;animation:hn-pop .12s ease both;}
.hn-selpop[hidden]{display:none;}
.hn-selpop.is-busy{opacity:.7;pointer-events:none;}
@keyframes hn-pop{from{opacity:0;transform:translateY(4px) scale(.98);}to{opacity:1;transform:none;}}
.hn-selpop__spark{display:flex;color:var(--hn-blue-deep);margin:0 2px 0 4px;}
.hn-selpop__spark svg{width:15px;height:15px;}
.hn-selpop__btn{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--hn-ink-2);padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .12s,color .12s;}
.hn-selpop__btn:hover{background:var(--hn-blue-tint);color:var(--hn-navy);}
.hn-selpop__div{width:1px;height:18px;background:var(--hn-line);}
.hn-selpop__input{border:none;background:none;font:inherit;font-size:12.5px;color:var(--hn-ink);width:150px;}
.hn-selpop__input:focus{outline:none;}

/* ===================================================================
   4c — library sub-tabs, procedure pill editor, form block editor,
   fill modal + clinical charts, mobile bottom tab bar.
   =================================================================== */

/* ---- Library sub-tabs ---- */
/* Sticky sub-tab bar: full-width canvas band (negative margins cancel the view
   padding) so rows scroll under it cleanly while the pill stays pinned. */
/* Sticky within .hn-view--library (which drops its own top padding so the
   bar pins FLUSH at the scrollport top). The old negative top margin made
   the sticky offset land 18px low, letting scrolled content paint in the
   gap above the bar (the v1.0.1 "white strip" glitch). */
.hn-libtabs-bar{position:sticky;top:0;z-index:20;background:var(--hn-bg);margin:0 -30px 0;padding:18px 30px 16px;box-shadow:0 6px 12px -10px rgba(20,30,50,.22);}
.hn-view--library{padding-top:0;}
.hn-libtabs{display:inline-flex;gap:2px;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:12px;padding:4px;box-shadow:var(--hn-sh-sm);max-width:100%;overflow:auto;}
.hn-libtab{display:inline-flex;align-items:center;gap:8px;border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--hn-ink-2);padding:8px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s;}
.hn-libtab:hover{color:var(--hn-ink);}
.hn-libtab.is-active{background:var(--hn-blue-tint);color:var(--hn-navy);}
.hn-libtab__n{font-size:11.5px;font-weight:700;color:var(--hn-ink-3);background:var(--hn-line-2);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center;}
.hn-libtab.is-active .hn-libtab__n{color:var(--hn-blue-deep);background:var(--hn-surface);}
.hn-row__tag--form{background:var(--hn-blue-tint);color:var(--hn-blue-deep);border-color:rgba(122,175,201,.4);}

/* ---- Tiny add buttons / inline menus (shared) ---- */
.hn-tinyadd{display:inline-flex;align-items:center;gap:6px;border:1px dashed #cdd4df;background:none;border-radius:9px;padding:8px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--hn-ink-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.hn-tinyadd:hover{border-color:var(--hn-blue);background:var(--hn-blue-tint);color:var(--hn-navy);}
.hn-tinyadd svg{width:13px;height:13px;}
.hn-menu{z-index:80;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:12px;box-shadow:var(--hn-sh-md);padding:6px;min-width:260px;max-height:300px;overflow:auto;}
.hn-menu__label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-ink-3);padding:8px 10px 4px;}
.hn-menu__empty{font-size:12.5px;color:var(--hn-ink-3);padding:6px 10px 10px;}
.hn-menu__item{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;text-align:left;padding:9px 10px;border-radius:8px;font:inherit;font-size:13.5px;color:var(--hn-ink);cursor:pointer;}
.hn-menu__item svg{width:14px;height:14px;color:var(--hn-blue-deep);flex:0 0 auto;}
.hn-menu__item:hover{background:var(--hn-blue-tint);}

/* ---- Procedure pill editor ---- */
.hn-proc-editor{padding-top:2px;}
.hn-proc-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.hn-proc-doc{border:1px solid var(--hn-line);border-radius:12px;background:var(--hn-surface);padding:14px 16px;font-size:14px;line-height:2.1;color:var(--hn-ink);min-height:150px;}
.hn-proc-doc:focus{outline:none;border-color:var(--hn-blue);box-shadow:0 0 0 3px var(--hn-blue-tint);}
.hn-proc-line{display:block;min-height:1.6em;}
.hn-pill{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;background:var(--hn-blue-tint);border:1px solid rgba(122,175,201,.5);color:var(--hn-navy);border-radius:999px;padding:2px 4px 2px 9px;font-size:12.5px;font-weight:600;line-height:1;margin:2px 1px;user-select:none;}
.hn-pill svg{width:12px;height:12px;color:var(--hn-blue-deep);}
.hn-pill__name{white-space:nowrap;}
.hn-pill__x{width:18px;height:18px;border:none;background:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--hn-ink-3);cursor:pointer;padding:0;transition:background .12s,color .12s;}
.hn-pill__x:hover{background:rgba(212,56,47,.12);color:#d4382f;}
.hn-pill__x svg{width:11px;height:11px;color:inherit;}
.hn-proc-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--hn-ink-3);margin-top:8px;}
.hn-proc-hint svg{width:13px;height:13px;flex:0 0 auto;}

/* ---- Form block editor ---- */
.hn-blk-editor{padding-top:2px;}
.hn-blk-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.hn-blk{border:1px solid var(--hn-line);border-radius:12px;background:var(--hn-surface);transition:box-shadow .15s,border-color .15s;}
.hn-blk:hover{box-shadow:var(--hn-sh-sm);}
.hn-blk.is-locked{background:#fbfcfe;}
.hn-blk.is-dragging{opacity:.5;}
.hn-blk--over{box-shadow:inset 0 2px 0 var(--hn-blue);}
.hn-blk__bar{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;}
.hn-blk__grip{color:#c8cfda;cursor:grab;width:15px;height:15px;flex:0 0 auto;display:flex;}
.hn-blk__grip svg{width:15px;height:15px;}
.hn-blk__type{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;border-radius:999px;padding:3px 9px;flex:0 0 auto;}
.hn-blk__type.is-heading{background:#eef2f7;color:var(--hn-ink-2);}
.hn-blk__type.is-field{background:var(--hn-blue-tint);color:var(--hn-blue-deep);}
.hn-blk__type.is-sentence{background:#fdf2e8;color:#b8742a;}
.hn-blk__main{flex:1;min-width:0;}
.hn-blk__title{font-size:14px;font-weight:600;color:var(--hn-ink);overflow:hidden;text-overflow:ellipsis;}
.hn-blk__meta{font-size:12px;color:var(--hn-ink-3);margin-top:2px;}
.hn-blk__cond{display:inline-block;font-size:11px;color:var(--hn-blue-deep);background:var(--hn-blue-tint);border-radius:6px;padding:1px 7px;margin-top:5px;}
.hn-blk__act{display:flex;gap:2px;flex:0 0 auto;}
.hn-blk__act-btn{background:none;border:none;color:var(--hn-ink-3);cursor:pointer;padding:6px;border-radius:8px;line-height:0;transition:color .12s,background .12s;}
.hn-blk__act-btn svg{width:15px;height:15px;display:block;}
.hn-blk__act-btn:hover{color:var(--hn-ink);background:var(--hn-line-2);}
.hn-blk__act-btn--del:hover{color:#d4382f;background:#fbeaea;}
.hn-blk__edit{display:none;border-top:1px solid var(--hn-line-2);padding:14px;}
.hn-blk.is-open>.hn-blk__edit{display:block;animation:hn-fade .18s ease both;}
.hn-fld{margin-bottom:14px;}
.hn-fld>label{display:block;font-weight:600;font-size:13px;margin-bottom:5px;color:var(--hn-ink);}
.hn-fld__help{color:var(--hn-ink-3);font-size:12px;line-height:1.5;margin:0 0 8px;}
.hn-seg{display:inline-flex;border:1px solid var(--hn-line);border-radius:9px;overflow:hidden;flex-wrap:wrap;}
.hn-seg__btn{border:none;background:var(--hn-surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--hn-ink-2);padding:7px 12px;cursor:pointer;border-right:1px solid var(--hn-line);}
.hn-seg__btn:last-child{border-right:none;}
.hn-seg__btn.is-on{background:var(--hn-navy);color:#fff;}
/* Answer-type picker — icon grid (basic kinds + clinical widgets) */
.hn-kindgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px;}
.hn-kindgrid__btn{display:flex;align-items:center;gap:9px;border:1px solid var(--hn-line);background:var(--hn-surface);border-radius:10px;padding:9px 11px;font:inherit;font-size:12.5px;font-weight:600;color:var(--hn-ink-2);cursor:pointer;text-align:left;transition:border-color .14s,background .14s,color .14s;}
.hn-kindgrid__btn svg{width:17px;height:17px;flex:0 0 auto;color:var(--hn-ink-3);transition:color .14s;}
.hn-kindgrid__btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hn-kindgrid__btn:hover{border-color:#cdd5e1;background:var(--hn-line-2);}
.hn-kindgrid__btn.is-on{border-color:var(--hn-blue);background:var(--hn-blue-tint);color:var(--hn-navy);}
.hn-kindgrid__btn.is-on svg{color:var(--hn-blue-deep);}
.hn-opts{display:flex;flex-direction:column;gap:7px;}
.hn-opt-row{display:flex;align-items:center;gap:8px;}
.hn-opt-row .hn-input{flex:1;}
.hn-opt__del{background:none;border:none;color:var(--hn-ink-3);cursor:pointer;padding:6px;border-radius:7px;line-height:0;}
.hn-opt__del svg{width:15px;height:15px;display:block;}
.hn-opt__del:hover{color:#d4382f;background:var(--hn-line-2);}
.hn-cond{margin-top:6px;}
.hn-cond__toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hn-ink-2);cursor:pointer;}
.hn-cond__rule{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
.hn-cond__rule:empty{display:none;}
.hn-cond__lead{font-size:13px;color:var(--hn-ink-3);}
.hn-cond__sel{width:auto;min-width:130px;padding:7px 10px;}
.hn-cond__val .hn-input{min-width:130px;width:auto;}
.hn-parts{display:flex;flex-direction:column;gap:7px;}
.hn-part-row{display:flex;align-items:center;gap:8px;}
.hn-part-row .hn-input{flex:1;}
.hn-part__tag{font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--hn-ink-2);background:var(--hn-line-2);border-radius:999px;padding:3px 8px;flex:0 0 auto;}
.hn-part__tag--input{background:var(--hn-blue-tint);color:var(--hn-blue-deep);}
.hn-parts-add{display:flex;gap:8px;margin-top:8px;}
.hn-add-block-wrap{position:relative;margin-top:12px;}
/* Compact, solid sub-action — visually distinct from the dashed full-width
   library-level "Add exam form" so the two don't read as identical twins. */
.hn-add-block{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hn-line);background:var(--hn-line-2);border-radius:9px;padding:8px 14px;font:inherit;font-weight:600;font-size:12.5px;color:var(--hn-ink-2);cursor:pointer;}
.hn-add-block:hover{border-color:#cdd5e1;background:#e6eaf1;color:var(--hn-ink);}
.hn-add-block svg{width:16px;height:16px;}
.hn-addblock-menu{display:none;margin-top:8px;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:12px;box-shadow:var(--hn-sh-sm);padding:8px 12px 12px;}
.hn-addblock-menu.is-open{display:block;}
.hn-addblock-menu .hn-menu__label{padding:12px 2px 7px;}
.hn-addblock-menu .hn-menu__label:first-child{padding-top:4px;}

/* ---- Fill modal ---- */
.hn-scrim{position:fixed;inset:0;background:rgba(20,28,42,.42);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow:auto;}
.hn-modal{width:100%;max-width:560px;background:var(--hn-surface);border-radius:18px;box-shadow:var(--hn-sh-md);overflow:hidden;animation:hn-pop .14s ease both;display:flex;flex-direction:column;max-height:calc(100vh - 96px);}
/* Exam-form fill modal: wide enough that the full 16-tooth arch + 6-site perio
   grid render without horizontal scrolling (charts expand to fill it). */
.hn-modal--wide{max-width:min(1200px,96vw);}
.hn-modal__head{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;border-bottom:1px solid var(--hn-line-2);flex:0 0 auto;}
.hn-modal__titles{flex:1;}
.hn-modal__titles h2{font-size:16px;font-weight:700;margin:0;}
.hn-modal__sub{font-size:12.5px;color:var(--hn-ink-3);margin-top:3px;}
.hn-modal__x{background:none;border:none;color:var(--hn-ink-3);cursor:pointer;padding:7px;border-radius:8px;line-height:0;}
.hn-modal__x svg{width:18px;height:18px;display:block;}
.hn-modal__x:hover{background:var(--hn-line-2);color:var(--hn-ink);}
.hn-modal__body{padding:18px 22px;overflow:auto;flex:1;}
.hn-modal__foot{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--hn-line-2);background:#fcfdfe;flex:0 0 auto;}
.hn-modal__foot .hn-spacer{flex:1;}
.hn-pick-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--hn-line);border-radius:12px;background:var(--hn-surface);padding:15px 16px;cursor:pointer;margin-bottom:10px;transition:border-color .15s,box-shadow .15s,transform .12s;}
.hn-pick-card:hover{border-color:#cdd5e1;background:var(--hn-line-2);box-shadow:var(--hn-sh-sm);transform:translateY(-1px);}
.hn-pick-card__ic{width:40px;height:40px;border-radius:11px;background:var(--hn-line-2);color:var(--hn-ink-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid var(--hn-line);}
.hn-pick-card__ic svg{width:20px;height:20px;}
.hn-pick-card__t{font-size:14.5px;font-weight:700;display:block;}
.hn-pick-card__s{font-size:12.5px;color:var(--hn-ink-3);display:block;margin-top:2px;}

/* ---- Fill fields ---- */
.hn-ff-section{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hn-blue-deep);margin:22px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--hn-line-2);}
.hn-ff-section:first-child{margin-top:0;}
.hn-ff-field{margin-bottom:14px;}
.hn-ff-field--inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hn-ff-label{font-size:13px;font-weight:700;color:var(--hn-navy);}
.hn-ff-field--inline .hn-ff-label::after{content:":";color:var(--hn-ink-3);font-weight:500;}
.hn-ff-field:not(.hn-ff-field--inline) .hn-ff-label{display:block;margin-bottom:7px;}
.hn-ff-chips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;}
.hn-ff-chip{appearance:none;display:inline-flex;align-items:center;padding:7px 14px;background:#eef2f6;color:var(--hn-navy);border:1px solid #d6dee5;border-radius:999px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .14s,border-color .14s,color .14s;}
.hn-ff-chip:hover{background:var(--hn-blue-tint);border-color:var(--hn-blue);}
.hn-ff-chip.is-selected{background:var(--hn-navy);color:#fff;border-color:var(--hn-navy);}
.hn-ff-chip--other{font-style:italic;}
.hn-ff-text,.hn-ff-num{appearance:none;background:#fafbfc;color:var(--hn-navy);border:1px solid var(--hn-line);border-radius:8px;padding:8px 11px;font:inherit;font-size:14px;}
.hn-ff-text{min-width:160px;}
.hn-ff-num{width:110px;}
.hn-ff-numwrap{display:inline-flex;align-items:center;gap:6px;}
.hn-ff-unit{font-size:13px;color:var(--hn-ink-3);}
.hn-ff-textarea{display:block;width:100%;background:#fafbfc;color:var(--hn-navy);border:1px solid var(--hn-line);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;line-height:1.5;min-height:70px;resize:vertical;}
.hn-ff-text:focus,.hn-ff-num:focus,.hn-ff-textarea:focus{outline:none;border-color:var(--hn-blue);background:#fff;box-shadow:0 0 0 3px var(--hn-blue-tint);}
.hn-ff-checkrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--hn-ink);cursor:pointer;}
.hn-ff-check{width:18px;height:18px;accent-color:var(--hn-blue);cursor:pointer;}
.hn-ff-free{font-size:14px;color:var(--hn-ink-2);line-height:1.6;white-space:pre-wrap;margin-bottom:14px;}
.hn-ff-sentence{line-height:2.2;font-size:14px;color:var(--hn-navy);margin-bottom:14px;}
.hn-ff-sentence__eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hn-ink-3);margin-bottom:4px;}
.hn-ff-sentence__line .hn-ff-num,.hn-ff-sentence__line .hn-ff-text{margin:0 3px;}

/* ---- BPE ---- */
.hn-bpe{max-width:440px;}
.hn-bpe__nil{appearance:none;font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid #cbd5e1;background:#f1f5f9;color:var(--hn-navy);cursor:pointer;margin-bottom:10px;}
.hn-bpe__nil.is-on{background:var(--hn-navy);color:#fff;border-color:var(--hn-navy);}
.hn-bpe__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:rgba(122,175,201,.06);padding:10px;border-radius:14px;border:1px solid rgba(122,175,201,.25);}
.hn-bpe__cell{display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 6px;background:var(--hn-surface);border-radius:10px;border:1px solid #e5e7eb;}
.hn-bpe__lbl{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--hn-blue-deep);text-transform:uppercase;}
.hn-bpe__scores{display:flex;gap:4px;}
.hn-bpe__s{width:26px;height:26px;border:1px solid #cbd5e1;background:var(--hn-surface);color:var(--hn-navy);border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .1s,color .1s,border-color .1s;}
.hn-bpe__s:hover{border-color:var(--hn-blue);}
.hn-bpe__s.is-on{background:var(--hn-navy);color:#fff;border-color:var(--hn-navy);}
.hn-bpe__star{width:26px;height:26px;border:1px solid #cbd5e1;background:var(--hn-surface);color:var(--hn-ink-3);border-radius:8px;font:inherit;font-weight:700;cursor:pointer;}
.hn-bpe__star.is-on{background:var(--hn-blue);color:#fff;border-color:var(--hn-blue);}

/* ---- Tooth chart / custom chart ---- */
.hn-tc__tabs,.hn-pc__tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px;}
.hn-tc__tab,.hn-pc__tab{border:1px solid var(--hn-line);background:var(--hn-surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--hn-ink-2);padding:6px 12px;border-radius:8px;cursor:pointer;}
.hn-tc__tab.is-active,.hn-pc__tab.is-active{background:var(--hn-blue-tint);border-color:var(--hn-blue);color:var(--hn-navy);}
.hn-tc__toolbar{margin-bottom:10px;}
.hn-tc__hint{font-size:12.5px;color:var(--hn-ink-3);}
.hn-tchart{border:1px solid var(--hn-line);border-radius:12px;padding:14px;background:var(--hn-surface);overflow-x:auto;}
.hn-tchart__arch{display:flex;gap:3px;justify-content:center;margin-bottom:6px;flex-wrap:nowrap;}
.hn-tchart__arch:last-child{margin-bottom:0;}
.hn-tooth{width:28px;height:36px;border:1px solid #d6dee5;border-radius:5px 5px 8px 8px;background:var(--hn-surface);font-size:9.5px;font-weight:600;color:var(--hn-ink-3);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;cursor:pointer;flex:0 0 auto;transition:border-color .12s,background .12s;}
.hn-tooth:hover{border-color:var(--hn-blue);}
.hn-tooth.is-flagged{background:var(--hn-blue-tint);border-color:var(--hn-blue);color:var(--hn-navy);font-weight:700;}
.hn-tooth.is-disabled{opacity:.4;cursor:default;}
.hn-tooth.is-disabled:hover{border-color:#d6dee5;}
.hn-cc .hn-ff-chips{margin-bottom:10px;}
.hn-pop{z-index:120;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:12px;box-shadow:var(--hn-sh-md);width:270px;}
.hn-pop__inner{padding:14px;}
.hn-pop__title{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--hn-ink);}
.hn-pop__surfs{display:flex;gap:6px;margin-bottom:10px;}
.hn-pop__foot{display:flex;justify-content:flex-end;margin-top:10px;}
.hn-pop .hn-btn--soft{background:var(--hn-navy);color:#fff;padding:7px 14px;border-radius:8px;border:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}

/* ---- Perio chart ---- */
.hn-pc__body{overflow-x:auto;}
.hn-pc__arch{display:flex;flex-direction:column;gap:10px;}
.hn-pc__row{display:flex;gap:5px;justify-content:center;flex-wrap:nowrap;}
.hn-pc__tooth{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;}
.hn-pc__num{font-size:9.5px;font-weight:700;color:var(--hn-ink-3);}
.hn-pc__sites{display:grid;grid-template-columns:repeat(3,20px);gap:2px;}
.hn-pc__site{width:20px;height:22px;border:1px solid #d6dee5;border-radius:4px;background:#fafbfc;font:inherit;font-size:10px;text-align:center;padding:0;color:var(--hn-navy);-moz-appearance:textfield;}
.hn-pc__site::-webkit-outer-spin-button,.hn-pc__site::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.hn-pc__site:focus{outline:none;border-color:var(--hn-blue);background:#fff;}
.hn-pc__bop{display:grid;grid-template-columns:repeat(2,20px);gap:2px;}
.hn-pc__dot{width:20px;height:20px;border:1px solid #d6dee5;border-radius:5px;background:var(--hn-surface);font-size:9px;font-weight:700;color:var(--hn-ink-3);cursor:pointer;padding:0;}
.hn-pc__dot.is-on{background:#d4382f;border-color:#d4382f;color:#fff;}

/* ---- Radiograph report ---- */
.hn-rad>.hn-ff-label{display:block;margin-bottom:8px;}
.hn-rad__entries{margin-top:12px;display:flex;flex-direction:column;gap:12px;}
.hn-rad__entry{border:1px solid var(--hn-line);border-radius:12px;padding:14px;background:#fcfdfe;display:flex;flex-direction:column;gap:10px;}
.hn-rad__row{display:flex;flex-direction:column;gap:6px;}
.hn-rad__region:empty{display:none;}
.hn-rad__teeth{display:flex;flex-direction:column;gap:4px;overflow-x:auto;padding-bottom:2px;}
.hn-rad__teeth-row{display:flex;gap:3px;justify-content:center;}
.hn-rad__rm{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--hn-ink-3);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;}
.hn-rad__rm:hover{color:#d4382f;}
.hn-rad__rm svg{width:14px;height:14px;}

/* ---- Mobile bottom tab bar ---- */
.hn-botnav{display:none;}
@media (hover:none){
  .hn-row__btn{opacity:1;}
  .hn-blk__grip{cursor:grab;}
}
@media (max-width:640px){
  .hn-side{display:none;}
  .hn-botnav{display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;z-index:90;background:rgba(255,255,255,.95);border-top:1px solid var(--hn-line);padding-bottom:env(safe-area-inset-bottom);}
  .hn-botnav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;font:inherit;font-size:11px;font-weight:600;color:var(--hn-ink-3);cursor:pointer;}
  .hn-botnav__item svg{width:23px;height:23px;}
  .hn-botnav__item.is-active{color:var(--hn-blue-deep);}
  .hn-view{padding-bottom:74px;}
  .hn-modal{max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;}
  .hn-scrim{padding:0;align-items:flex-end;}
  .hn-libtabs{display:flex;width:100%;}
}

/* ---- Row drag handle + harden title against theme accent bleed ---- */
.hn-row__grip{opacity:0;cursor:grab;color:#c8cfda;display:flex;flex:0 0 auto;width:15px;transition:opacity .15s;}
.hn-row__grip svg{width:15px;height:15px;}
.hn-row__head:hover .hn-row__grip{opacity:1;}
.hn-row--dragging{opacity:.5;}
.hn-row--over{box-shadow:inset 0 2px 0 var(--hn-blue);border-radius:10px;}
@media (hover:none){.hn-row__grip{opacity:1;}}
.hn-app .hn-row__title,
.hn-app .hn-row__title:hover,
.hn-app .hn-row__title:focus,
.hn-app .hn-row__title:focus-visible,
.hn-app .hn-row__title:active{background:none !important;box-shadow:none !important;outline:none;}

/* ---- Pill drag-to-reorder (procedure editor) ---- */
.hn-pill{cursor:grab;}
.hn-pill:active{cursor:grabbing;}
.hn-pill--dragging{opacity:.45;}
.hn-pill-caret{display:inline-block;width:2px;height:1.05em;background:var(--hn-blue-deep);vertical-align:text-bottom;margin:0 1px;border-radius:1px;box-shadow:0 0 0 1px rgba(122,175,201,.3);animation:hn-caret-blink .8s steps(1) infinite;}
@keyframes hn-caret-blink{50%{opacity:.25;}}

/* ---- Keep interactive TEXT readable regardless of theme (Kadence) state bleed.
       (Background bleed was hardened above; this pins the text colour too, so
       hover/focus/active never flip row titles or tabs to white-on-light.) ---- */
.hn-app .hn-row__title,
.hn-app .hn-row__title:hover,
.hn-app .hn-row__title:focus,
.hn-app .hn-row__title:focus-visible,
.hn-app .hn-row__title:active{color:var(--hn-ink) !important;}
.hn-app .hn-row__title--ph,
.hn-app .hn-row__title--ph:hover,
.hn-app .hn-row__title--ph:focus{color:var(--hn-ink-3) !important;}
.hn-app .hn-libtab,
.hn-app .hn-libtab:hover,
.hn-app .hn-libtab:focus,
.hn-app .hn-libtab:focus-visible,
.hn-app .hn-libtab:active{background:none !important;box-shadow:none !important;outline:none;color:var(--hn-ink-2) !important;}
.hn-app .hn-libtab:hover{color:var(--hn-ink) !important;}
.hn-app .hn-libtab.is-active,
.hn-app .hn-libtab.is-active:hover,
.hn-app .hn-libtab.is-active:focus{background:var(--hn-blue-tint) !important;color:var(--hn-navy) !important;}
/* nav lives on the NAVY rail — pin to light on-rail colours, not dark */
.hn-app .hn-nav__item,
.hn-app .hn-nav__item:active{color:var(--hn-rt) !important;}
.hn-app .hn-nav__item:hover,
.hn-app .hn-nav__item:focus,
.hn-app .hn-nav__item.is-active,
.hn-app .hn-nav__item.is-active:hover,
.hn-app .hn-nav__item.is-active:focus{color:#fff !important;}
.hn-app .hn-menu__item,
.hn-app .hn-menu__item:hover,
.hn-app .hn-menu__item:focus,
.hn-app .hn-menu__item:active{color:var(--hn-ink) !important;}
.hn-app .hn-pick-card__t{color:var(--hn-ink) !important;}
.hn-app .hn-pick-card__s{color:var(--hn-ink-3) !important;}
.hn-app .hn-pick-card,
.hn-app .hn-pick-card:hover,
.hn-app .hn-pick-card:focus,
.hn-app .hn-pick-card:active{color:var(--hn-ink) !important;}

/* ---- Kadence state-bleed hardening, pass 2 ----------------------------------
   Fill-field + editor controls that predate the verbatim chart port (which
   hardened its own buttons). Pin BOTH background and text colour across
   hover/focus/focus-visible/active so the theme's button hover colour can never
   bleed white-on-light. Each control's resting/selected look is fully asserted. */
/* Choice chips (pick_one / pick_many fill fields) — the reported one */
.hn-app .hn-ff-chip:hover,.hn-app .hn-ff-chip:focus,.hn-app .hn-ff-chip:focus-visible,.hn-app .hn-ff-chip:active{background:var(--hn-blue-tint) !important;border-color:var(--hn-blue) !important;color:var(--hn-navy) !important;}
.hn-app .hn-ff-chip.is-selected,.hn-app .hn-ff-chip.is-selected:hover,.hn-app .hn-ff-chip.is-selected:focus,.hn-app .hn-ff-chip.is-selected:active{background:var(--hn-navy) !important;border-color:var(--hn-navy) !important;color:#fff !important;}
/* Segmented control (answer type / layout / sentence parts) — no hover rule before */
.hn-app .hn-seg__btn:hover,.hn-app .hn-seg__btn:focus,.hn-app .hn-seg__btn:focus-visible,.hn-app .hn-seg__btn:active{background:var(--hn-line-2) !important;color:var(--hn-ink) !important;}
.hn-app .hn-seg__btn.is-on,.hn-app .hn-seg__btn.is-on:hover,.hn-app .hn-seg__btn.is-on:focus,.hn-app .hn-seg__btn.is-on:active{background:var(--hn-navy) !important;color:#fff !important;}
/* Answer-type icon grid */
.hn-app .hn-kindgrid__btn:hover,.hn-app .hn-kindgrid__btn:focus,.hn-app .hn-kindgrid__btn:focus-visible,.hn-app .hn-kindgrid__btn:active{background:var(--hn-line-2) !important;color:var(--hn-ink) !important;}
.hn-app .hn-kindgrid__btn.is-on,.hn-app .hn-kindgrid__btn.is-on:hover,.hn-app .hn-kindgrid__btn.is-on:focus,.hn-app .hn-kindgrid__btn.is-on:active{background:var(--hn-blue-tint) !important;border-color:var(--hn-blue) !important;color:var(--hn-navy) !important;}
/* Profile chips */
.hn-app .hn-chip:hover,.hn-app .hn-chip:focus,.hn-app .hn-chip:focus-visible,.hn-app .hn-chip:active{background:none !important;border-color:#d6dbe4 !important;color:var(--hn-ink-2) !important;}
.hn-app .hn-chip.is-checked,.hn-app .hn-chip.is-checked:hover,.hn-app .hn-chip.is-checked:focus,.hn-app .hn-chip.is-checked:active{background:var(--hn-blue-tint) !important;border-color:var(--hn-blue) !important;color:var(--hn-navy) !important;}
/* BPE score / nil / star buttons */
.hn-app .hn-bpe__s:hover,.hn-app .hn-bpe__s:focus,.hn-app .hn-bpe__s:focus-visible,.hn-app .hn-bpe__s:active,
.hn-app .hn-bpe__nil:hover,.hn-app .hn-bpe__nil:focus,.hn-app .hn-bpe__nil:focus-visible,.hn-app .hn-bpe__nil:active{background:var(--hn-surface) !important;border-color:var(--hn-blue) !important;color:var(--hn-navy) !important;}
.hn-app .hn-bpe__s.is-on,.hn-app .hn-bpe__s.is-on:hover,.hn-app .hn-bpe__nil.is-on,.hn-app .hn-bpe__nil.is-on:hover{background:var(--hn-navy) !important;border-color:var(--hn-navy) !important;color:#fff !important;}
.hn-app .hn-bpe__star:hover,.hn-app .hn-bpe__star:focus,.hn-app .hn-bpe__star:focus-visible,.hn-app .hn-bpe__star:active{background:var(--hn-surface) !important;color:var(--hn-ink-3) !important;}
.hn-app .hn-bpe__star.is-on,.hn-app .hn-bpe__star.is-on:hover{background:var(--hn-blue) !important;border-color:var(--hn-blue) !important;color:#fff !important;}
/* Custom-chart tooth buttons */
.hn-app .hn-tooth:hover,.hn-app .hn-tooth:focus,.hn-app .hn-tooth:focus-visible,.hn-app .hn-tooth:active{background:var(--hn-surface) !important;border-color:var(--hn-blue) !important;color:var(--hn-ink-3) !important;}
.hn-app .hn-tooth.is-flagged,.hn-app .hn-tooth.is-flagged:hover,.hn-app .hn-tooth.is-flagged:focus{background:var(--hn-blue-tint) !important;border-color:var(--hn-blue) !important;color:var(--hn-navy) !important;}
/* Dashed/ghost action buttons — keep their intended colour through focus/active too */
.hn-app .hn-tinyadd:hover,.hn-app .hn-tinyadd:focus,.hn-app .hn-tinyadd:focus-visible,.hn-app .hn-tinyadd:active,
.hn-app .hn-add:hover,.hn-app .hn-add:focus,.hn-app .hn-add:focus-visible,.hn-app .hn-add:active,
.hn-app .hn-add-block:hover,.hn-app .hn-add-block:focus,.hn-app .hn-add-block:focus-visible,.hn-app .hn-add-block:active,
.hn-app .hn-chip-action:hover,.hn-app .hn-chip-action:focus,.hn-app .hn-chip-action:focus-visible,.hn-app .hn-chip-action:active{color:var(--hn-navy) !important;}
.hn-app .hn-chip-action:focus,.hn-app .hn-chip-action:focus-visible{background:var(--hn-surface) !important;}

/* ---- Kadence state-bleed hardening, pass 3 (definitive sweep) ---------------
   Every remaining interactive control whose base colour was NOT already pinned
   with !important (the chart/radiograph controls already are). Chart/fill chips
   are covered above. Text controls pinned across all states; icon buttons pinned
   on focus/active (their :hover colours kept); add-buttons get focus/active
   background pinned so no accent "sticks" after a click. After this there should
   be no un-hardened interactive hn- control left — keep new controls to this
   pattern. */
/* text menu / toggle / nav-like controls */
.hn-app .hn-vermenu__item,.hn-app .hn-vermenu__item:hover,.hn-app .hn-vermenu__item:focus,.hn-app .hn-vermenu__item:focus-visible,.hn-app .hn-vermenu__item:active{color:var(--hn-ink) !important;}
.hn-app .hn-vermenu__item.is-active,.hn-app .hn-vermenu__item.is-active:hover,.hn-app .hn-vermenu__item.is-active:focus{color:var(--hn-navy) !important;}
.hn-app .hn-selpop__btn,.hn-app .hn-selpop__btn:hover,.hn-app .hn-selpop__btn:focus,.hn-app .hn-selpop__btn:focus-visible,.hn-app .hn-selpop__btn:active{color:var(--hn-ink) !important;}
.hn-app .hn-cond__toggle,.hn-app .hn-cond__toggle:hover,.hn-app .hn-cond__toggle:focus{color:var(--hn-ink-2) !important;}
.hn-app .hn-rad__rm,.hn-app .hn-rad__rm:focus,.hn-app .hn-rad__rm:focus-visible,.hn-app .hn-rad__rm:active{color:var(--hn-ink-3) !important;}
.hn-app .hn-rad__rm:hover{color:#d4382f !important;}
.hn-app .hn-botnav__item,.hn-app .hn-botnav__item:hover,.hn-app .hn-botnav__item:focus,.hn-app .hn-botnav__item:active{color:var(--hn-ink-3) !important;}
.hn-app .hn-botnav__item.is-active,.hn-app .hn-botnav__item.is-active:hover,.hn-app .hn-botnav__item.is-active:focus{color:var(--hn-blue-deep) !important;}
/* icon buttons — never let focus/active flip them white/invisible; keep :hover colours */
.hn-app .hn-row__btn:focus,.hn-app .hn-row__btn:focus-visible,.hn-app .hn-row__btn:active,
.hn-app .hn-blk__act-btn:focus,.hn-app .hn-blk__act-btn:focus-visible,.hn-app .hn-blk__act-btn:active,
.hn-app .hn-blk__grip:focus,.hn-app .hn-blk__grip:active,
.hn-app .hn-pill__x:focus,.hn-app .hn-pill__x:focus-visible,.hn-app .hn-pill__x:active,
.hn-app .hn-modal__x:focus,.hn-app .hn-modal__x:focus-visible,.hn-app .hn-modal__x:active,
.hn-app .hn-opt__del:focus,.hn-app .hn-opt__del:focus-visible,.hn-app .hn-opt__del:active{color:var(--hn-ink-3) !important;background:none !important;}
/* add-buttons — pin focus/active background so no accent sticks after a click */
.hn-app .hn-add:focus,.hn-app .hn-add:focus-visible,.hn-app .hn-add:active{background:none !important;color:var(--hn-ink-2) !important;}
.hn-app .hn-add-block:focus,.hn-app .hn-add-block:focus-visible,.hn-app .hn-add-block:active{background:var(--hn-line-2) !important;color:var(--hn-ink-2) !important;}
.hn-app .hn-tinyadd:focus,.hn-app .hn-tinyadd:focus-visible,.hn-app .hn-tinyadd:active{background:none !important;}


/* ===========================================================================
   CHART WIDGETS — ported verbatim from legacy hybrid-notes-core.php
   (lines 6475-8238). Tooth chart + perio chart. Open Sans font-family
   swapped for inherit (app uses Inter). --hn-grey-text added to .hn-app.
   =========================================================================== */
/* ===========================================================================
   PASS 2 — TOOTH CHART
   Multi-finding tabs, surface wheels with SVG, scoring popovers, primary
   teeth toggle, TSL generalised/localised mode, per-tooth notes. Fully
   brand-aligned: navy #2d3748, accent #7aafc9, light grey #e1e4e2, Open
   Sans. Each finding tab has its own accent colour (see TC_TABS in JS).
   =========================================================================== */

.hn-tc{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  /* Expand to fill the (now-wider) modal so the full 16-tooth row
     fits without horizontal scrolling. */
  max-width:100%;
  background:#fafbfc;
  border:1px solid rgba(122,175,201,.25);
  border-radius:14px;
  padding:14px 14px 18px;
  position:relative;
  font-family:inherit;
  color:#2d3748;
}

/* Mixed dentition — when primary teeth are toggled on, both rows of
   primary teeth render BELOW the adult chart with a small section
   label, since a real mouth in mixed dentition contains both at
   once and the dentist marks whichever is clinically present. */
.hn-tc__primary-label-row{
  margin-top:14px;
  padding:6px 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9ca3af;
  border-top:1px dashed #e5e7eb;
}
.hn-tc__row--primary{
  /* Primary teeth visually distinguished from adult — slightly
     smaller wheels + a subtle softer fill so they don't compete
     for the eye. */
  opacity:.95;
}
.hn-tc__row--primary .hn-tc__tooth{
  /* primary row has fewer teeth — keep them a touch smaller than the adult row */
  max-width:56px;
}
.hn-tc__row--primary .hn-tc__tooth-num{
  font-size:10.5px;
  color:#9ca3af;
}

/* ---- Tabs ---------------------------------------------------------------- */
.hn-tc__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:10px;
}
.hn-tc__tab{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:999px;
  border:1px solid #e5e7eb; background:#ffffff; color:#4b5563;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
  --tc-tab-accent:#7aafc9;
}
.hn-tc__tab:hover{
  background:rgba(122,175,201,.10);
  border-color:rgba(122,175,201,.45);
  color:#2d3748;
}
.hn-tc__tab.is-active{
  background:#2d3748;
  border-color:#2d3748;
  color:#ffffff;
  box-shadow:inset 0 -2px 0 var(--tc-tab-accent);
}
.hn-tc__tab-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--tc-tab-accent);
}

/* ---- Toolbar ------------------------------------------------------------- */
.hn-tc__toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:0 2px;
}
.hn-tc__nil{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:999px;
  border:1px solid #cbd5e1; background:#f1f5f9; color:#2d3748;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.hn-tc__nil:hover{ background:#e2e8f0; }
.hn-tc__nil.is-selected{
  background:#2d3748; color:#ffffff; border-color:#2d3748;
}
.hn-tc__mode{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:#4b5563;
}
.hn-tc__mode-label{ font-weight:600; }
.hn-tc__mode-btn{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:8px;
  border:1px solid #cbd5e1; background:#ffffff; color:#2d3748;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.hn-tc__mode-btn:hover{ background:rgba(122,175,201,.10); }
.hn-tc__mode-btn.is-selected{
  background:#7aafc9; color:#ffffff; border-color:#7aafc9;
}
.hn-tc__primary{ margin-left:auto; }
.hn-tc__primary-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:#4b5563; cursor:pointer;
}
.hn-tc__primary-label input{ accent-color:#7aafc9; }
.hn-tc__clear{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:6px;
  border:1px solid transparent; background:transparent;
  color:#9ca3af; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.hn-tc__clear:hover{ background:#fee2e2; color:#b91c1c; }

/* ---- Chart body ---------------------------------------------------------- */
.hn-tc__body{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
}
.hn-tc__arch{
  display:flex; flex-direction:column; gap:14px;
  padding:8px 4px 4px;
}
.hn-tc__row{
  display:flex; justify-content:center; gap:5px;
}
.hn-tc__row--upper{
  /* Outer arch curves up: shift outer teeth down so the centre teeth
     sit a touch higher. */
}
.hn-tc__row--lower{
  /* Lower arch curves down: shift outer teeth up. */
}

/* ---- Individual tooth ---------------------------------------------------- */
.hn-tc__tooth{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  /* Grow to fill the available modal width (bigger = easier to click a
     surface) but cap so teeth never get cartoonishly large. */
  flex:1 1 0; min-width:36px; max-width:66px;
  --tc-mark-color:#7aafc9;
}
.hn-tc__tooth-num{
  font-size:11px; font-weight:600; color:#6b7280;
  padding:2px 4px; border-radius:4px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.hn-tc__tooth-num:hover{
  background:rgba(45,55,72,.08);
  color:#2d3748;
}
.hn-tc__tooth.has-note .hn-tc__tooth-num{
  background:rgba(245,158,11,.18);
  color:#92400e;
  position:relative;
}
.hn-tc__tooth.has-note .hn-tc__tooth-num::after{
  content:'';
  position:absolute; top:-2px; right:-2px;
  width:6px; height:6px; border-radius:50%;
  background:#f59e0b;
  box-shadow:0 0 0 2px #fafbfc;
}

/* Tooth wheel SVG */
.hn-tc-tooth__svg{
  width:100%; height:auto; aspect-ratio:1/1;
  display:block;
  cursor:pointer;
  transition:transform .12s ease;
}
.hn-tc__tooth:hover .hn-tc-tooth__svg{
  transform:scale(1.04);
}
.hn-tc-tooth__zone{
  fill:#ffffff;
  stroke:#cbd5e1;
  stroke-width:1;
  transition:fill .12s ease, stroke .12s ease;
}
.hn-tc-tooth__zone:hover{
  fill:rgba(122,175,201,.18);
  stroke:rgba(122,175,201,.55);
}
.hn-tc-tooth__zone.is-marked{
  fill:var(--tc-mark-color);
  stroke:var(--tc-mark-color);
  fill-opacity:0.75;
}
.hn-tc-tooth__zone.is-marked:hover{
  fill-opacity:0.9;
}
.hn-tc-tooth__score{
  font-family:inherit;
  font-size:9.5px;
  font-weight:700;
  fill:#ffffff;
  pointer-events:none;
  paint-order:stroke;
  stroke:rgba(0,0,0,.35);
  stroke-width:0.6;
}
/* Mobility tab — simplified visualisation. Surface wheel zones are
   hidden entirely; each tooth becomes a single circle with the grade
   number displayed prominently in the centre. Default state (grade 0)
   renders faintly so the baseline is visible without being noisy.
   Higher grades render in progressively darker purple to make
   abnormal teeth scan-readable. */
.hn-tc__tooth.is-mobility .hn-tc-tooth__zone[data-zone="n"],
.hn-tc__tooth.is-mobility .hn-tc-tooth__zone[data-zone="s"],
.hn-tc__tooth.is-mobility .hn-tc-tooth__zone[data-zone="e"],
.hn-tc__tooth.is-mobility .hn-tc-tooth__zone[data-zone="w"]{
  fill:transparent !important;
  stroke:transparent !important;
  pointer-events:none;
}
.hn-tc__tooth.is-mobility .hn-tc-tooth__zone[data-zone="o"]{
  /* Expand the centre disc to fill the whole tooth area so a single
     clickable circle replaces the surface wheel. */
  r:18 !important;
  cx:24 !important; cy:24 !important;
  fill:#f3f4f6;
  stroke:#cbd5e1;
  stroke-width:1.2;
  transition:fill .12s ease, stroke .12s ease;
}
.hn-tc__tooth.is-mobility .hn-tc-tooth__zone[data-zone="o"]:hover{
  fill:rgba(139,92,246,.18) !important;
  stroke:rgba(139,92,246,.55) !important;
}
.hn-tc__tooth.is-mobility[data-mobility-grade="1"] .hn-tc-tooth__zone[data-zone="o"]{
  fill:#c4b5fd;
  stroke:#a78bfa;
}
.hn-tc__tooth.is-mobility[data-mobility-grade="2"] .hn-tc-tooth__zone[data-zone="o"]{
  fill:#8b5cf6;
  stroke:#7c3aed;
}
.hn-tc__tooth.is-mobility[data-mobility-grade="3"] .hn-tc-tooth__zone[data-zone="o"]{
  fill:#6d28d9;
  stroke:#5b21b6;
}
/* Grade number rendered prominently in the disc. Default-0 is faint;
   non-zero grades are white/bold for contrast against the purple fill. */
.hn-tc__tooth.is-mobility .hn-tc-tooth__score[data-score-anchor="o"]{
  font-size:13px;
  font-weight:700;
  fill:#9ca3af;
  stroke:none;
}
.hn-tc__tooth.is-mobility[data-mobility-grade="1"] .hn-tc-tooth__score[data-score-anchor="o"],
.hn-tc__tooth.is-mobility[data-mobility-grade="2"] .hn-tc-tooth__score[data-score-anchor="o"],
.hn-tc__tooth.is-mobility[data-mobility-grade="3"] .hn-tc-tooth__score[data-score-anchor="o"]{
  fill:#ffffff;
  paint-order:stroke;
  stroke:rgba(0,0,0,.30);
  stroke-width:0.8;
}
.hn-tc__tooth.is-mobility .hn-tc-tooth__score[data-score-anchor="n"],
.hn-tc__tooth.is-mobility .hn-tc-tooth__score[data-score-anchor="s"],
.hn-tc__tooth.is-mobility .hn-tc-tooth__score[data-score-anchor="e"],
.hn-tc__tooth.is-mobility .hn-tc-tooth__score[data-score-anchor="w"]{
  display:none;
}
/* Instruction line shown above the mobility chart. */
.hn-tc__mobility-hint{
  margin:0 0 8px;
  padding:8px 12px;
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.25);
  border-radius:8px;
  font-size:12.5px;
  color:#4b5563;
  line-height:1.55;
}

/* ---- BEWE grid (TSL generalised) ----------------------------------------- */
.hn-tc__bewe{
  display:flex; flex-direction:column; gap:10px;
  padding:8px 4px;
}
.hn-tc__bewe-hint{
  margin:0; font-size:12.5px; color:#6b7280; line-height:1.5;
}
.hn-tc__bewe-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  background:rgba(245,158,11,.06);
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(245,158,11,.30);
}
.hn-tc__bewe-cell{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 6px;
  background:#ffffff; border-radius:10px;
  border:1px solid #e5e7eb;
}
.hn-tc__bewe-cell-label{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:#f59e0b; text-transform:uppercase;
}
.hn-tc__bewe-scores{ display:flex; gap:4px; }
.hn-tc__bewe-score{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12.5px; font-weight:700;
  width:30px; height:30px; padding:0;
  border:1px solid #cbd5e1; background:#ffffff; color:#2d3748;
  border-radius:8px;
  cursor:pointer;
  transition:background .1s ease, color .1s ease, border-color .1s ease;
}
.hn-tc__bewe-score:hover{ background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.55); }
.hn-tc__bewe-score.is-selected{
  background:#f59e0b; border-color:#f59e0b; color:#ffffff;
}

.hn-tc__notes-hint{
  margin:0; font-size:12.5px; color:#6b7280; line-height:1.55;
  padding:8px 2px 0;
  border-top:1px solid #e5e7eb;
}

/* ---- Popovers (note + score) ----------------------------------------
   Floating popovers attached to document.body. position:fixed so they
   escape the form-fill modal's overflow:hidden clipping — top-right
   teeth (17, 18) used to lose their popovers off the modal edge.
   Smart placement (via positionPopoverNear) keeps them on-screen.

   Width range bumped 260-320 → 320-720. The score popover for
   defective restorations uses the wide end with a two-column
   layout (material grid left, defects checklist right) so the
   dentist can see and pick both without scrolling. ICDAS scores
   use a single horizontal row of seven 80px buttons rather than
   the previous vertical list. */
.hn-tc__note-popover,
.hn-tc__score-popover{
  position:fixed !important;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(15,20,30,.22), 0 4px 12px rgba(15,20,30,.10);
  padding:14px 16px;
  /* Sit ABOVE the form-fill modal (z-index 99996). Popovers attach
     to document.body to escape the modal's overflow:hidden clipping,
     but doing so puts them in document-body's stacking context where
     the modal's z-index would otherwise win — popovers would render
     blurred BEHIND the modal backdrop. 100000 keeps them on top. */
  z-index:100000 !important;
  font-size:13px;
  color:#2d3748;
  font-family:inherit;
}
.hn-tc__note-popover{
  min-width:300px;
  max-width:360px;
}
.hn-tc__score-popover{
  /* Width adapts to content. Caries / ICDAS = single-row width
     (about 620px). Defective restorations = two-column layout
     fitting in ~700px. Min 320 so even single-mat-only views
     stay reasonable. Max-width clamped via JS positioning to
     viewport - 24px so popovers never push off-screen. */
  min-width:320px;
  max-width:720px;
  width:auto;
}
.hn-tc__note-popover[hidden],
.hn-tc__score-popover[hidden]{ display:none; }
.hn-tc__note-label{
  display:block; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#6b7280;
  margin:0 0 6px;
}
.hn-tc__note-input{
  width:100%;
  border:1px solid #cbd5e1; border-radius:8px;
  padding:8px 10px;
  font-family:inherit; font-size:13px;
  resize:vertical;
  background:#fafbfc;
  box-sizing:border-box;
}
.hn-tc__note-input:focus{
  outline:none; border-color:#7aafc9; background:#ffffff;
  box-shadow:0 0 0 3px rgba(122,175,201,.20);
}
.hn-tc__note-actions,
.hn-tc__score-footer{
  display:flex; justify-content:space-between; gap:6px;
  margin-top:10px;
}
.hn-tc__note-clear,
.hn-tc__score-clear{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:6px;
  border:1px solid transparent; background:transparent;
  color:#9ca3af; cursor:pointer;
}
.hn-tc__note-clear:hover,
.hn-tc__score-clear:hover{ background:#fee2e2; color:#b91c1c; }
.hn-tc__note-done,
.hn-tc__score-close{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:6px 14px; border-radius:999px;
  border:1px solid #2d3748; background:#2d3748; color:#ffffff;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.hn-tc__note-done:hover,
.hn-tc__score-close:hover{ background:#3a4757; }

.hn-tc__score-header{
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#6b7280;
  margin:0 0 8px;
}
.hn-tc__score-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:360px; overflow-y:auto;
}
/* Caries — horizontal row of 7 ICDAS chips, no vertical scroll. */
.hn-tc__score-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  max-height:none;
}
.hn-tc__score-chip{
  -webkit-appearance:none; appearance:none;
  font-family:inherit;
  width:82px;
  padding:8px 6px 6px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#2d3748 !important;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  transition:background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.hn-tc__score-chip:hover{
  background:rgba(220,38,38,.10) !important;
  border-color:rgba(220,38,38,.45) !important;
  color:#2d3748 !important;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(220,38,38,.12);
}
.hn-tc__score-chip.is-selected,
.hn-tc__score-chip.is-selected:hover{
  background:#dc2626 !important;
  border-color:#dc2626 !important;
  color:#ffffff !important;
}
.hn-tc__score-chip-num{
  font-size:22px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
}
.hn-tc__score-chip-desc{
  font-size:10.5px;
  font-weight:600;
  text-align:center;
  line-height:1.2;
  opacity:.82;
}
.hn-tc__score-chip.is-selected .hn-tc__score-chip-desc{ opacity:1; }

/* Restorations — two columns (material left, defects right). */
.hn-tc__score-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
.hn-tc__score-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hn-tc__score-opt{
  -webkit-appearance:none; appearance:none;
  text-align:left;
  font-family:inherit; font-size:12.5px;
  padding:7px 10px; border-radius:8px;
  border:1px solid transparent; background:#f1f5f9; color:#2d3748 !important;
  cursor:pointer;
  transition:background .1s ease, color .1s ease, border-color .1s ease;
}
.hn-tc__score-opt:hover{
  background:rgba(122,175,201,.18) !important;
  border-color:rgba(122,175,201,.45) !important;
  color:#2d3748 !important;
}
.hn-tc__score-opt.is-selected,
.hn-tc__score-opt.is-selected:hover{
  background:#2d3748 !important;
  color:#ffffff !important;
  border-color:#2d3748 !important;
}

/* --- Radiograph report (Pass 4) ----------------------------------------
   Repeater field. Top-level status pick (5 chips). When status =
   "Taken this visit", a list of radiograph-entry cards renders below
   with an "Add radiograph" button at the bottom. Each entry card has
   per-type sub-fields (BW side / PA tooth picker / CBCT region),
   justification chips, quality, findings textarea (mic-attached),
   bone levels. Mini PA tooth picker is a compact 2-row 16-tooth view
   with selected teeth shown as removable chips above. */
.hn-rad{
  display:flex; flex-direction:column;
  gap:14px;
  width:100%;
  background:#fafbfc;
  border:1px solid rgba(122,175,201,.25);
  border-radius:12px;
  padding:14px;
  font-family:inherit;
  color:#2d3748;
}
.hn-rad__section-label{
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#6b7280;
}
.hn-rad__status{
  display:flex; flex-direction:column; gap:6px;
}
.hn-rad__status-chips{
  display:flex; flex-wrap:wrap; gap:6px;
}
.hn-rad__status-chip{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:999px;
  border:1px solid #cbd5e1; background:#ffffff; color:#2d3748 !important;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.hn-rad__status-chip:hover{
  background:rgba(122,175,201,.10) !important;
}
.hn-rad__status-chip.is-selected,
.hn-rad__status-chip.is-selected:hover{
  background:#2d3748 !important;
  color:#ffffff !important;
  border-color:#2d3748 !important;
}
.hn-rad__status-other{
  width:100%; max-width:420px;
  border:1px solid #cbd5e1; border-radius:8px;
  padding:7px 10px;
  font-family:inherit; font-size:13px;
  color:#2d3748; background:#fff;
  box-sizing:border-box;
}
.hn-rad__status-other:focus{
  outline:none; border-color:#7aafc9;
  box-shadow:0 0 0 3px rgba(122,175,201,.20);
}

.hn-rad__entries{
  display:flex; flex-direction:column; gap:10px;
}
.hn-rad__empty{
  margin:0; font-style:italic; font-size:12.5px;
  color:#6b7280;
}
.hn-rad__entry{
  position:relative;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;
}
.hn-rad__entry-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:2px;
}
.hn-rad__entry-num{
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#7aafc9;
}
.hn-rad__entry-remove{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px;
  border:none; background:transparent;
  color:#9ca3af !important;
  font-size:18px; line-height:1;
  cursor:pointer; border-radius:50%;
  transition:background .12s ease, color .12s ease;
}
.hn-rad__entry-remove:hover{
  background:#fee2e2;
  color:#b91c1c !important;
}
.hn-rad__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13px;
}
.hn-rad__row--stack{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.hn-rad__row-label{
  font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:#6b7280;
  min-width:110px;
  flex-shrink:0;
}
.hn-rad__chips{
  display:flex; flex-wrap:wrap; gap:5px;
  flex:1; min-width:0;
}
.hn-rad__chip{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:999px;
  border:1px solid #cbd5e1; background:#ffffff; color:#2d3748 !important;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.hn-rad__chip:hover{
  background:rgba(122,175,201,.12) !important;
}
.hn-rad__chip.is-selected,
.hn-rad__chip.is-selected:hover{
  background:#7aafc9 !important;
  color:#ffffff !important;
  border-color:#7aafc9 !important;
}
.hn-rad__chip--other{
  font-style:italic;
  border-style:dashed;
}
.hn-rad__text-input{
  flex:1; min-width:180px;
  border:1px solid #cbd5e1; border-radius:8px;
  padding:6px 10px;
  font-family:inherit; font-size:13px;
  color:#2d3748; background:#fff;
  box-sizing:border-box;
}
.hn-rad__text-input--mini{
  flex-basis:100%;
  margin-top:4px;
}
.hn-rad__text-input:focus{
  outline:none; border-color:#7aafc9;
  box-shadow:0 0 0 3px rgba(122,175,201,.20);
}
.hn-rad__textarea-anchor{
  /* Wraps the findings textarea so the aux mic + recording banner
     host anchor to JUST this box, not the surrounding row. */
  position:relative;
  width:100%;
  display:block;
}
.hn-rad__textarea{
  width:100%;
  border:1px solid #cbd5e1; border-radius:8px;
  padding:8px 10px;
  font-family:inherit; font-size:13px; line-height:1.45;
  color:#2d3748; background:#fff;
  resize:vertical;
  box-sizing:border-box;
  /* Reserve room at the bottom for the aux mic so typed text never
     runs underneath it. */
  padding-bottom:44px;
}
.hn-rad__textarea:focus{
  outline:none; border-color:#7aafc9;
  box-shadow:0 0 0 3px rgba(122,175,201,.20);
}
.hn-rad__add{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:10px;
  border:1px dashed #cbd5e1; background:transparent; color:#2d3748 !important;
  cursor:pointer;
  margin-top:4px;
  transition:background .12s ease, border-color .12s ease;
}
.hn-rad__add:hover{
  background:rgba(122,175,201,.10) !important;
  border-color:rgba(122,175,201,.55) !important;
}

/* Mini PA tooth picker */
.hn-rad__pa-chips{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:6px 8px;
  min-height:32px;
  background:rgba(122,175,201,.06);
  border-radius:8px;
}
.hn-rad__pa-chips-empty{
  font-size:11.5px; color:#9ca3af; font-style:italic;
  padding:4px 0;
}
.hn-rad__pa-chip{
  display:inline-flex; align-items:center; gap:3px;
  background:#7aafc9; color:#ffffff;
  border-radius:999px;
  padding:3px 4px 3px 10px;
  font-size:12px; font-weight:600;
}
.hn-rad__pa-chip-remove{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px;
  border:none; background:rgba(255,255,255,.20);
  color:#ffffff !important;
  font-size:13px; line-height:1;
  cursor:pointer; border-radius:50%;
  transition:background .12s ease;
}
.hn-rad__pa-chip-remove:hover{
  background:rgba(255,255,255,.40);
}
.hn-rad__pa-mini{
  display:flex; flex-direction:column; gap:4px;
  padding:8px;
  background:#fafbfc;
  border:1px solid #e5e7eb;
  border-radius:8px;
}
.hn-rad__pa-mini-row{
  display:flex; gap:3px;
  justify-content:center;
  flex-wrap:wrap;
}
.hn-rad__pa-tooth{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:10.5px; font-weight:600;
  width:32px; height:28px;
  padding:0;
  border:1px solid #cbd5e1; background:#ffffff; color:#4b5563 !important;
  border-radius:6px;
  cursor:pointer;
  transition:background .1s ease, color .1s ease, border-color .1s ease;
}
.hn-rad__pa-tooth:hover{
  background:rgba(122,175,201,.18) !important;
  border-color:rgba(122,175,201,.55) !important;
  color:#2d3748 !important;
}
.hn-rad__pa-tooth.is-selected,
.hn-rad__pa-tooth.is-selected:hover{
  background:#7aafc9 !important;
  border-color:#7aafc9 !important;
  color:#ffffff !important;
}

/* --- Conditional visibility section (block config modal) ----------------- */
.hn-ft-cfg__cond{
  margin-top:18px;
  display:flex; flex-direction:column; gap:8px;
}
.hn-ft-cfg__cond-divider{
  height:1px;
  background:#e5e7eb;
  margin:4px 0 6px;
}
.hn-ft-cfg__cond-title{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:2px;
}
.hn-ft-cfg__cond-radio{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
  color:#2d3748;
  cursor:pointer;
  padding:6px 0;
}
.hn-ft-cfg__cond-radio input{ accent-color:#7aafc9; }
.hn-ft-cfg__cond-rule{
  margin-left:24px;
  padding:10px 12px;
  background:rgba(122,175,201,.06);
  border:1px solid rgba(122,175,201,.20);
  border-radius:8px;
  display:flex; flex-direction:column; gap:10px;
}
.hn-ft-cfg__cond-rule[hidden]{ display:none; }
.hn-ft-cfg__cond-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12.5px;
  color:#2d3748;
}
.hn-ft-cfg__cond-row-label{
  font-size:12px;
  color:#4b5563;
  min-width:140px;
}
.hn-ft-cfg__cond-select,
.hn-ft-cfg__cond-value-input{
  -webkit-appearance:none; appearance:none;
  background:#ffffff;
  border:1px solid #cbd5e1;
  border-radius:6px;
  padding:6px 28px 6px 10px;
  font-family:inherit; font-size:12.5px;
  color:#2d3748;
  cursor:pointer;
  min-width:180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.hn-ft-cfg__cond-value-input{
  background-image:none;
  padding-right:10px;
  cursor:text;
}
.hn-ft-cfg__cond-select:focus,
.hn-ft-cfg__cond-value-input:focus{
  outline:none;
  border-color:#7aafc9;
  box-shadow:0 0 0 3px rgba(122,175,201,.20);
}
.hn-ft-cfg__cond-value-host{
  flex:1; min-width:180px;
  display:flex; flex-direction:column; gap:4px;
}
.hn-ft-cfg__cond-multi{
  display:flex; flex-direction:column; gap:4px;
}
.hn-ft-cfg__cond-multi-row{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px;
  cursor:pointer;
  padding:3px 4px;
  border-radius:4px;
}
.hn-ft-cfg__cond-multi-row:hover{
  background:rgba(122,175,201,.10);
}
.hn-ft-cfg__cond-multi-row input{ accent-color:#7aafc9; }
.hn-ft-cfg__cond-empty{
  font-size:12px;
  font-style:italic;
  color:#9ca3af;
  padding:4px 0;
}
.hn-ft-cfg__cond-hint{
  margin:4px 0 0;
  font-size:11.5px;
  color:#6b7280;
  font-style:italic;
}
.hn-ft-block__cond-chip{
  display:inline-flex; align-items:center;
  font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  background:rgba(122,175,201,.18);
  color:#2d3748;
  padding:3px 8px;
  border-radius:999px;
  margin-right:4px;
  cursor:default;
}

/* --- Score popover: header sub-text + separate-lesion toggle --- */
.hn-tc__score-header-title{
  font-size:12px; font-weight:700;
  color:#2d3748;
  letter-spacing:.02em;
  text-transform:none;
  margin-bottom:3px;
}
.hn-tc__score-header-sub{
  font-size:11.5px;
  color:#6b7280;
  line-height:1.45;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.hn-tc__score-separate-row{
  display:flex; align-items:center; gap:8px;
  margin:8px 0 0;
  padding:8px 10px;
  background:rgba(122,175,201,.10);
  border:1px dashed rgba(122,175,201,.45);
  border-radius:8px;
  font-size:12px;
  color:#2d3748;
  cursor:pointer;
}
.hn-tc__score-separate-row input{
  accent-color:#7aafc9;
  margin:0;
}

/* --- TSL finding rows (Pass 3) --- */
.hn-tc__tsl-findings{
  display:flex; flex-direction:column; gap:6px;
  padding:8px;
  background:rgba(245,158,11,.05);
  border:1px solid rgba(245,158,11,.20);
  border-radius:10px;
  margin-bottom:8px;
}
.hn-tc__tsl-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-left:3px solid var(--tsl-row-accent, #cbd5e1);
  border-radius:8px;
  font-size:12.5px;
  --tsl-row-accent: #cbd5e1;
}
.hn-tc__tsl-row.is-active-finding{
  border-color:var(--tsl-row-accent);
  box-shadow:0 0 0 2px var(--tsl-row-accent), 0 1px 3px rgba(45,55,72,.05);
}
.hn-tc__tsl-row-header{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700;
  color:#2d3748 !important;
  padding:4px 6px;
  border-radius:6px;
  min-width:90px;
}
.hn-tc__tsl-row-header:hover{
  background:rgba(45,55,72,.06);
}
.hn-tc__tsl-row-swatch{
  display:inline-block;
  width:10px; height:10px; border-radius:50%;
  background:var(--tsl-row-accent);
}
.hn-tc__tsl-row-severity,
.hn-tc__tsl-row-distribution{
  display:inline-flex; align-items:center; gap:3px;
  flex-wrap:wrap;
}
.hn-tc__tsl-severity-label,
.hn-tc__tsl-dist-label{
  font-size:11px; color:#6b7280; font-weight:600;
  margin-right:4px;
  letter-spacing:.02em;
}
.hn-tc__tsl-sev,
.hn-tc__tsl-dist{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:999px;
  border:1px solid #cbd5e1; background:#ffffff; color:#2d3748 !important;
  cursor:pointer;
  transition:background .1s ease, border-color .1s ease, color .1s ease;
}
.hn-tc__tsl-sev:hover,
.hn-tc__tsl-dist:hover{
  background:rgba(245,158,11,.10) !important;
}
.hn-tc__tsl-sev.is-selected,
.hn-tc__tsl-sev.is-selected:hover{
  background:#2d3748 !important;
  color:#ffffff !important;
  border-color:#2d3748 !important;
}
.hn-tc__tsl-dist.is-selected,
.hn-tc__tsl-dist.is-selected:hover{
  background:var(--tsl-row-accent) !important;
  color:#ffffff !important;
  border-color:var(--tsl-row-accent) !important;
}
.hn-tc__tsl-active-hint{
  margin:0;
  padding:6px 10px;
  background:rgba(245,158,11,.12);
  border:1px solid var(--tsl-row-accent, rgba(245,158,11,.40));
  border-radius:8px;
  font-size:12px;
  color:#2d3748;
}

/* --- BEWE expandable section (under the chart in TSL tab) --- */
.hn-tc__bewe-section{
  margin-top:14px;
  border-top:1px dashed #e5e7eb;
  padding-top:12px;
}
.hn-tc__bewe-toggle{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-size:13px;
  color:#4b5563 !important;
  padding:6px 8px;
  border-radius:6px;
}
.hn-tc__bewe-toggle:hover{
  background:rgba(45,55,72,.06);
  color:#2d3748 !important;
}
.hn-tc__bewe-toggle-chev{
  font-size:10px;
  opacity:.65;
  width:12px;
  text-align:center;
}
.hn-tc__bewe-summary{
  margin-top:8px;
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.30);
  color:#2d3748;
}
.hn-tc__bewe-summary.is-low{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.30);
}
.hn-tc__bewe-summary.is-medium{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.35);
}
.hn-tc__bewe-summary.is-high{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.35);
}
.hn-tc__bewe-summary.is-very-high{
  background:rgba(127,29,29,.12);
  border-color:rgba(127,29,29,.45);
}
.hn-tc__bewe-summary-label{
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#6b7280;
}
.hn-tc__bewe-summary-sum{
  font-size:18px; font-weight:800;
  color:#2d3748;
  font-variant-numeric: tabular-nums;
}
.hn-tc__bewe-summary-arrow{
  color:#9ca3af; margin:0 4px;
}
.hn-tc__bewe-summary-risk{
  font-size:13px; font-weight:600;
  color:#2d3748;
}
.hn-tc__bewe-summary-empty{
  font-style:italic;
  color:#6b7280;
  font-size:12px;
}

/* --- Restoration popover: section labels + material grid + defects --- */
.hn-tc__score-section-label{
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#6b7280;
  margin:4px 0 2px;
}
.hn-tc__score-mat-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:4px;
}
.hn-tc__score-opt--other{
  font-style:italic;
  border:1px dashed #cbd5e1;
  background:transparent;
}
.hn-tc__score-other-input{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:7px 10px;
  font-family:inherit; font-size:12.5px;
  color:#2d3748;
  background:#fafbfc;
  box-sizing:border-box;
}
.hn-tc__score-other-input:focus{
  outline:none;
  border-color:#7aafc9;
  background:#fff;
  box-shadow:0 0 0 3px rgba(122,175,201,.2);
}
.hn-tc__score-defects{
  display:flex; flex-direction:column; gap:4px;
  padding:4px 0;
}
.hn-tc__score-defect-row{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:#2d3748;
  cursor:pointer;
  padding:4px 6px;
  border-radius:6px;
}
.hn-tc__score-defect-row:hover{
  background:rgba(122,175,201,.10);
}
.hn-tc__score-defect-row input[type="checkbox"]{
  accent-color:#7aafc9;
  margin:0;
}
.hn-tc__score-defect-row--other{
  font-style:italic;
}

/* --- Hover-contrast sweep — defensive !important rules so Kadence's
       theme defaults can't lighten the text on the chart buttons.
       Covers the Nil button (chart), the BPE-grid score buttons, the
       BEWE score buttons, the tab buttons, the mode toggles, and the
       primary-teeth label. */
.hn-tc__nil,
.hn-tc__nil:hover,
.hn-tc__nil:focus,
.hn-tc__nil:focus-visible{
  color:#2d3748 !important;
}
.hn-tc__nil:hover{
  background:#cbd5e1 !important;
  border-color:#94a3b8 !important;
}
.hn-tc__nil.is-selected,
.hn-tc__nil.is-selected:hover{
  background:#2d3748 !important;
  color:#ffffff !important;
  border-color:#2d3748 !important;
}
.hn-tc__mode-btn,
.hn-tc__mode-btn:hover,
.hn-tc__mode-btn:focus,
.hn-tc__mode-btn:focus-visible{
  color:#2d3748 !important;
}
.hn-tc__mode-btn:hover{
  background:rgba(122,175,201,.18) !important;
}
.hn-tc__mode-btn.is-selected,
.hn-tc__mode-btn.is-selected:hover{
  background:#7aafc9 !important;
  color:#ffffff !important;
  border-color:#7aafc9 !important;
}
.hn-tc__clear,
.hn-tc__clear:hover{
  color:#9ca3af !important;
}
.hn-tc__clear:hover{
  background:#fee2e2 !important;
  color:#b91c1c !important;
}
.hn-tc__tab,
.hn-tc__tab:hover,
.hn-tc__tab:focus,
.hn-tc__tab:focus-visible{
  color:#4b5563 !important;
}
.hn-tc__tab:hover{
  background:rgba(122,175,201,.10) !important;
  color:#2d3748 !important;
}
.hn-tc__tab.is-active,
.hn-tc__tab.is-active:hover{
  background:#2d3748 !important;
  color:#ffffff !important;
}
.hn-ff-bpe__score,
.hn-ff-bpe__score:hover,
.hn-ff-bpe__score:focus,
.hn-ff-bpe__score:focus-visible{
  color:#2d3748 !important;
}
.hn-ff-bpe__score:hover{
  background:rgba(122,175,201,.18) !important;
}
.hn-ff-bpe__score.is-selected,
.hn-ff-bpe__score.is-selected:hover{
  background:#2d3748 !important;
  color:#ffffff !important;
  border-color:#2d3748 !important;
}
.hn-tc__bewe-score,
.hn-tc__bewe-score:hover,
.hn-tc__bewe-score:focus,
.hn-tc__bewe-score:focus-visible{
  color:#2d3748 !important;
}
.hn-tc__bewe-score:hover{
  background:rgba(245,158,11,.18) !important;
}
.hn-tc__bewe-score.is-selected,
.hn-tc__bewe-score.is-selected:hover{
  background:#f59e0b !important;
  color:#ffffff !important;
  border-color:#f59e0b !important;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 720px){
  .hn-tc__row{ flex-wrap:wrap; gap:3px; }
  .hn-tc__tooth{ flex:0 0 auto; min-width:0; max-width:none; }
  .hn-tc-tooth__svg{ width:42px; height:42px; aspect-ratio:auto; }
  .hn-tc__tab{ padding:6px 12px; font-size:12.5px; }
  .hn-tc__bewe-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px){
  .hn-app .hn-ft-bar{ grid-template-columns:1fr; }
  .hn-ff-modal{ padding:12px; }
  .hn-ff-modal__header{ padding:18px 18px 10px; }
  .hn-ff-modal__body{ padding:14px 18px; }
  .hn-ff-modal__tail-hint,
  .hn-ff-modal__footer{ padding-left:18px;padding-right:18px; }
  .hn-ff-bpe__grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ===========================================================================
   PASS 6 — PERIO CHART (diamond layout rework)
   Focused periodontal charting — pocket depths, recession, BoP/plaque,
   furcation. PPD / Recession render a 6-site diamond grid per tooth with
   always-visible numeric inputs. BoP / Plaque renders a 4-site cross
   grid with click boxes; toolbar carries a mode selector (BoP / Plaque)
   that determines which marker the next click toggles. Furcation keeps
   a click-tooth-opens-popover pattern (multi-face grade selection
   doesn't fit inline). All per-quadrant layouts mirror correctly:
   buccal at top for uppers, lingual at top for lowers; mesial on the
   inner side of each quadrant (Q1+Q5: right; Q2+Q6: left; Q3+Q7: left;
   Q4+Q8: right). See PC_TABS / pcQuadrantClass in JS.
   =========================================================================== */

.hn-pc{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;          /* contain horizontal scroll inside .hn-pc__row */
  background:#fafbfc;
  border:1px solid rgba(122,175,201,.25);
  border-radius:14px;
  padding:14px 14px 18px;
  position:relative;
  /* In the wide modal the full 16-tooth arch (≈1024px) now fits without
     scrolling. On narrower viewports the chart scrolls WITHIN itself rather
     than clipping or giving the whole modal a horizontal scrollbar. */
  overflow-x:auto;
  overflow-y:visible;
}

/* ---- Tab strip ---------------------------------------------------------- */
.hn-pc__tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  border-bottom:1px solid rgba(45,55,72,.08);
  padding-bottom:10px;
  margin-bottom:0;
}
.hn-pc__tab,
.hn-pc__tab:hover,
.hn-pc__tab:focus,
.hn-pc__tab:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:#fff !important;
  color:var(--hn-grey-text) !important;
  border:1px solid rgba(45,55,72,.12) !important;
  border-radius:999px;
  padding:8px 14px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.005em;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:none !important;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.hn-pc__tab:hover{
  background:rgba(122,175,201,.08) !important;
  border-color:rgba(45,55,72,.18) !important;
  color:#2d3748 !important;
}
.hn-pc__tab.is-active,
.hn-pc__tab.is-active:hover{
  background:var(--pc-tab-accent, #2d3748) !important;
  color:#fff !important;
  border-color:var(--pc-tab-accent, #2d3748) !important;
}
.hn-pc__tab-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--pc-tab-accent, #2d3748);
  flex-shrink:0;
}
.hn-pc__tab.is-active .hn-pc__tab-dot{ background:#fff; }

/* ---- Toolbar ------------------------------------------------------------ */
.hn-pc__toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.hn-pc__nil,
.hn-pc__nil:hover,
.hn-pc__nil:focus,
.hn-pc__nil:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:#fff !important;
  color:var(--hn-grey-text) !important;
  border:1px solid rgba(45,55,72,.18) !important;
  border-radius:999px;padding:7px 14px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:none !important;
}
.hn-pc__nil:hover{
  background:rgba(45,55,72,.04) !important;
  color:#2d3748 !important;
}
.hn-pc__nil.is-selected,
.hn-pc__nil.is-selected:hover{
  background:#2d3748 !important;color:#fff !important;border-color:#2d3748 !important;
}
.hn-pc__clear,
.hn-pc__clear:hover,
.hn-pc__clear:focus,
.hn-pc__clear:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:transparent !important;
  color:var(--hn-grey-text) !important;
  border:1px dashed rgba(45,55,72,.22) !important;
  border-radius:999px;padding:6px 12px;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  box-shadow:none !important;
  margin-left:auto;
}
.hn-pc__clear:hover{
  background:rgba(45,55,72,.04) !important;
  color:#2d3748 !important;
  border-color:rgba(45,55,72,.4) !important;
}

/* Body — wraps the arch. Flex children of .hn-pc default to
   min-width:auto which would let them expand to fit content; force
   min-width:0 so the body collapses to its parent's width and lets
   .hn-pc__row handle the horizontal scroll. */
.hn-pc__body{
  width:100%;
  min-width:0;
}

/* ---- Arch ---------------------------------------------------------------- */
.hn-pc__arch{
  display:flex;flex-direction:column;gap:8px;
  padding:6px 4px;
  width:100%;
  min-width:0;
}
.hn-pc__row{
  display:flex;gap:4px;
  /* flex-start (not center) keeps the leftmost tooth visible when the
     row overflows — centering with overflow scrolls the left edge off
     by default. */
  justify-content:flex-start;
  width:100%;
  min-width:0;
}
.hn-pc__row--upper{ margin-bottom:0; }
.hn-pc__row--lower{ margin-top:6px; padding-top:6px; border-top:1px dashed rgba(45,55,72,.08); }

/* ---- BoP / Plaque mode buttons (toolbar) --------------------------------
   Pill-group toggle that determines which marker is applied when a site
   in the chart is clicked. Mirrors TSL's active-finding picker. */
.hn-pc__modes{
  display:inline-flex;
  border:1px solid rgba(45,55,72,.18);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.hn-pc__mode,
.hn-pc__mode:focus,
.hn-pc__mode:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:transparent !important;
  color:var(--hn-grey-text) !important;
  border:0 !important;
  padding:6px 14px;
  font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;
  box-shadow:none !important;
}
.hn-pc__mode:hover{ background:rgba(45,55,72,.04) !important; color:#2d3748 !important; }
.hn-pc__mode + .hn-pc__mode{
  border-left:1px solid rgba(45,55,72,.12) !important;
}
.hn-pc__mode.is-selected,
.hn-pc__mode.is-selected:hover{
  background:var(--pc-mode-accent, #2d3748) !important;
  color:#fff !important;
}

/* ---- Tooth cells (PPD / Recession / BoP-Plaque) --------------------------
   Each tooth is a CSS grid. Sites are placed via grid-area; the per-tooth
   quadrant class (.hn-pc__tooth--upper-mright, etc.) flips placements so
   buccal/lingual and mesial/distal end up where the dentist expects.
   The tooth number sits dead-centre. */
.hn-pc__tooth{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:center;
  justify-items:center;
  padding:2px;
  flex-shrink:0;
}
.hn-pc__tooth-num{
  font-size:11px;font-weight:700;color:#2d3748;
  line-height:1;
  pointer-events:none;
  user-select:none;
}

/* 6-site numeric (PPD / Recession) */
.hn-pc__tooth--numeric{
  width:64px;
  grid-template-rows: auto auto auto auto auto;
  gap:1px;
}
.hn-pc__tooth--numeric .hn-pc__tooth-num{
  grid-row:3;grid-column:2;
}

/* 4-site BoP/Plaque cross */
.hn-pc__tooth--bp{
  width:60px;
  grid-template-rows: auto auto auto;
  gap:2px;
}
.hn-pc__tooth--bp .hn-pc__tooth-num{
  grid-row:2;grid-column:2;
}

/* Numeric site input */
.hn-pc__site--input,
.hn-pc__site--input:focus,
.hn-pc__site--input:focus-visible{
  appearance:none;-webkit-appearance:none;
  -moz-appearance:textfield;
  width:22px;height:22px;
  text-align:center;
  font-family:inherit;font-size:11px;font-weight:600;color:#2d3748 !important;
  background:#fff !important;
  border:1px solid rgba(45,55,72,.18) !important;
  border-radius:4px;
  padding:0;
  outline:none;
  box-shadow:none !important;
}
.hn-pc__site--input::-webkit-outer-spin-button,
.hn-pc__site--input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.hn-pc__site--input:focus-visible{
  border-color:#7aafc9 !important;
  box-shadow:0 0 0 2px rgba(122,175,201,.28) !important;
}
.hn-pc__site--input:hover{
  border-color:rgba(45,55,72,.3) !important;
}

/* BoP/Plaque site click box */
.hn-pc__site--bp,
.hn-pc__site--bp:focus,
.hn-pc__site--bp:focus-visible{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;
  background:#fff !important;
  border:1px solid rgba(45,55,72,.22) !important;
  border-radius:3px;
  padding:0;cursor:pointer;
  box-shadow:none !important;
  transition:background .12s ease,border-color .12s ease;
}
.hn-pc__site--bp:hover{ border-color:rgba(45,55,72,.45) !important; }
.hn-pc__site--bp.has-bop:not(.has-plaque){
  background:#dc2626 !important;border-color:#dc2626 !important;
}
.hn-pc__site--bp.has-plaque:not(.has-bop){
  background:#7aafc9 !important;border-color:#7aafc9 !important;
}
.hn-pc__site--bp.has-bop.has-plaque{
  background:linear-gradient(135deg, #dc2626 0%, #dc2626 50%, #7aafc9 50%, #7aafc9 100%) !important;
  border-color:#2d3748 !important;
}

/* Per-quadrant grid placements ------------------------------------------- */
/* B / L (centre top + centre bottom). For uppers, buccal at top; for
   lowers, lingual at top. */
.hn-pc__tooth--upper-mright [data-site="B"],
.hn-pc__tooth--upper-mleft  [data-site="B"]{ grid-row:1;grid-column:2; }
.hn-pc__tooth--upper-mright [data-site="L"],
.hn-pc__tooth--upper-mleft  [data-site="L"]{ grid-row:5;grid-column:2; }
.hn-pc__tooth--lower-mright [data-site="L"],
.hn-pc__tooth--lower-mleft  [data-site="L"]{ grid-row:1;grid-column:2; }
.hn-pc__tooth--lower-mright [data-site="B"],
.hn-pc__tooth--lower-mleft  [data-site="B"]{ grid-row:5;grid-column:2; }

/* BoP/Plaque tab uses a 3-row grid — shift centre sites to row 1 / row 3 */
.hn-pc__tooth--bp.hn-pc__tooth--upper-mright [data-site="B"],
.hn-pc__tooth--bp.hn-pc__tooth--upper-mleft  [data-site="B"]{ grid-row:1; }
.hn-pc__tooth--bp.hn-pc__tooth--upper-mright [data-site="L"],
.hn-pc__tooth--bp.hn-pc__tooth--upper-mleft  [data-site="L"]{ grid-row:3; }
.hn-pc__tooth--bp.hn-pc__tooth--lower-mright [data-site="L"],
.hn-pc__tooth--bp.hn-pc__tooth--lower-mleft  [data-site="L"]{ grid-row:1; }
.hn-pc__tooth--bp.hn-pc__tooth--lower-mright [data-site="B"],
.hn-pc__tooth--bp.hn-pc__tooth--lower-mleft  [data-site="B"]{ grid-row:3; }

/* Corner sites: MB / DB (upper outer row) + ML / DL (upper inner row) ---- */
/* Upper teeth — MB+DB in row 2, ML+DL in row 4 */
.hn-pc__tooth--upper-mright [data-site="MB"]{ grid-row:2;grid-column:3; }
.hn-pc__tooth--upper-mright [data-site="DB"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--upper-mright [data-site="ML"]{ grid-row:4;grid-column:3; }
.hn-pc__tooth--upper-mright [data-site="DL"]{ grid-row:4;grid-column:1; }

.hn-pc__tooth--upper-mleft  [data-site="MB"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--upper-mleft  [data-site="DB"]{ grid-row:2;grid-column:3; }
.hn-pc__tooth--upper-mleft  [data-site="ML"]{ grid-row:4;grid-column:1; }
.hn-pc__tooth--upper-mleft  [data-site="DL"]{ grid-row:4;grid-column:3; }

/* Lower teeth — MB+DB in row 4 (buccal at bottom), ML+DL in row 2 (lingual at top) */
.hn-pc__tooth--lower-mright [data-site="MB"]{ grid-row:4;grid-column:3; }
.hn-pc__tooth--lower-mright [data-site="DB"]{ grid-row:4;grid-column:1; }
.hn-pc__tooth--lower-mright [data-site="ML"]{ grid-row:2;grid-column:3; }
.hn-pc__tooth--lower-mright [data-site="DL"]{ grid-row:2;grid-column:1; }

.hn-pc__tooth--lower-mleft  [data-site="MB"]{ grid-row:4;grid-column:1; }
.hn-pc__tooth--lower-mleft  [data-site="DB"]{ grid-row:4;grid-column:3; }
.hn-pc__tooth--lower-mleft  [data-site="ML"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--lower-mleft  [data-site="DL"]{ grid-row:2;grid-column:3; }

/* BoP/Plaque M / D — row 2 (middle row of 3-row grid) */
.hn-pc__tooth--bp.hn-pc__tooth--upper-mright [data-site="M"]{ grid-row:2;grid-column:3; }
.hn-pc__tooth--bp.hn-pc__tooth--upper-mright [data-site="D"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--bp.hn-pc__tooth--upper-mleft  [data-site="M"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--bp.hn-pc__tooth--upper-mleft  [data-site="D"]{ grid-row:2;grid-column:3; }
.hn-pc__tooth--bp.hn-pc__tooth--lower-mright [data-site="M"]{ grid-row:2;grid-column:3; }
.hn-pc__tooth--bp.hn-pc__tooth--lower-mright [data-site="D"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--bp.hn-pc__tooth--lower-mleft  [data-site="M"]{ grid-row:2;grid-column:1; }
.hn-pc__tooth--bp.hn-pc__tooth--lower-mleft  [data-site="D"]{ grid-row:2;grid-column:3; }

/* ---- Furcation tooth button (clickable, opens popover) -------------------
   Furcation tab keeps the click-tooth-opens-popover pattern since multi-
   face grade selection doesn't fit inline. Styled as a small flat button
   with a count badge for any existing entries. */
.hn-pc__tooth--furc,
.hn-pc__tooth--furc:focus,
.hn-pc__tooth--furc:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:#fff !important;
  color:#2d3748 !important;
  border:1px solid rgba(45,55,72,.14) !important;
  border-radius:8px;
  padding:8px 4px 4px;
  min-width:44px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  box-shadow:none !important;
  transition:background .12s ease,border-color .12s ease,transform .1s ease;
  /* Override the grid template so the simple button stacks vertically */
  grid-template-columns:none;
  grid-template-rows:none;
}
.hn-pc__tooth--furc:hover{
  background:rgba(122,175,201,.08) !important;
  border-color:#7aafc9 !important;
  transform:translateY(-1px);
}
.hn-pc__tooth--furc.is-open,
.hn-pc__tooth--furc.is-open:hover{
  background:#2d3748 !important;color:#fff !important;
  border-color:#2d3748 !important;
}
.hn-pc__tooth--furc.is-disabled,
.hn-pc__tooth--furc.is-disabled:hover{
  opacity:.4;cursor:not-allowed;
  background:#f5f7f8 !important;
  border-color:rgba(45,55,72,.08) !important;
  transform:none;
}
.hn-pc__tooth--furc .hn-pc__tooth-num{ font-size:13px; }
.hn-pc__tooth-indicator{
  display:flex;gap:2px;align-items:center;justify-content:center;
  min-height:14px;
}
.hn-pc__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:14px;padding:0 4px;
  border-radius:7px;
  font-size:10.5px;font-weight:700;line-height:1;
}
.hn-pc__badge--furc{
  background:#8b5cf6;color:#fff;
}
.hn-pc__tooth--furc.is-open .hn-pc__badge{ outline:1px solid rgba(255,255,255,.4); }

/* ---- Site popover ------------------------------------------------------- */
.hn-pc__site-popover,
.hn-pc__floating-popover{
  position:fixed;
  background:#fff;
  border:1px solid rgba(45,55,72,.12);
  border-radius:12px;
  box-shadow:0 18px 36px -16px rgba(20,30,50,.32), 0 4px 12px -6px rgba(20,30,50,.18);
  padding:14px 14px 12px;
  width:min(320px, calc(100vw - 32px));
  z-index:99997;
}
.hn-pc__site-popover[hidden]{ display:none; }
.hn-pc__popover-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.hn-pc__popover-title{
  font-size:13px;font-weight:700;color:#2d3748;
}
.hn-pc__popover-close,
.hn-pc__popover-close:hover,
.hn-pc__popover-close:focus,
.hn-pc__popover-close:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:transparent !important;border:0 !important;
  color:var(--hn-grey-text) !important;
  font-size:20px;line-height:1;cursor:pointer;
  padding:0 6px;border-radius:6px;
  box-shadow:none !important;
}
.hn-pc__popover-close:hover{
  background:rgba(45,55,72,.06) !important;color:#2d3748 !important;
}
.hn-pc__popover-hint{
  margin:0 0 10px;font-size:11.5px;color:var(--hn-grey-text);
}

/* Furcation rows */
.hn-pc__furc-list{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:10px;
}
.hn-pc__furc-row{
  display:flex;align-items:center;gap:10px;
}
.hn-pc__furc-face{
  flex-shrink:0;width:120px;
  font-size:12.5px;font-weight:600;color:#2d3748;
}
.hn-pc__furc-grades{
  display:flex;gap:4px;flex:1;
}
.hn-pc__furc-grade,
.hn-pc__furc-grade:focus,
.hn-pc__furc-grade:focus-visible{
  appearance:none;-webkit-appearance:none;
  background:rgba(45,55,72,.04) !important;
  color:var(--hn-grey-text) !important;
  border:1px solid rgba(45,55,72,.14) !important;
  border-radius:8px;padding:5px 10px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  flex:1;min-width:32px;
  box-shadow:none !important;
}
.hn-pc__furc-grade:hover{ background:rgba(45,55,72,.08) !important; color:#2d3748 !important; }
.hn-pc__furc-grade.is-selected,
.hn-pc__furc-grade.is-selected:hover{
  background:#8b5cf6 !important;color:#fff !important;border-color:#8b5cf6 !important;
}
.hn-pc__furc-grade--none.is-selected,
.hn-pc__furc-grade--none.is-selected:hover{
  background:rgba(45,55,72,.12) !important;color:#2d3748 !important;border-color:rgba(45,55,72,.18) !important;
}

.hn-pc__popover-actions{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(45,55,72,.08);
}
.hn-pc__popover-clear,
.hn-pc__popover-clear:focus,
.hn-pc__popover-clear:focus-visible,
.hn-pc__popover-done,
.hn-pc__popover-done:focus,
.hn-pc__popover-done:focus-visible{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border-radius:999px;padding:6px 14px;
  box-shadow:none !important;
}
.hn-pc__popover-clear{
  background:transparent !important;
  color:var(--hn-grey-text) !important;
  border:1px solid rgba(45,55,72,.18) !important;
  margin-right:auto;
}
.hn-pc__popover-clear:hover{
  background:rgba(45,55,72,.04) !important;color:#2d3748 !important;
}
.hn-pc__popover-done{
  background:#2d3748 !important;color:#fff !important;border:0 !important;
}
.hn-pc__popover-done:hover{ background:#3a4757 !important; }

/* Responsive */
.hn-pc__row{
  /* Allow horizontal scroll on narrow screens; full row needs ~1024px
     at default cell widths. The diamond cells don't flex-shrink without
     losing legibility, so scrolling is preferable. */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width: 720px){
  .hn-pc__tooth--numeric{ width:56px; }
  .hn-pc__tooth--bp{ width:52px; }
  .hn-pc__site--input{ width:20px;height:20px;font-size:10.5px; }
  .hn-pc__site--bp{ width:16px;height:16px; }
  .hn-pc__tooth-num{ font-size:10.5px; }
  .hn-pc__tab{ padding:6px 12px; font-size:12.5px; }
}


/* ===========================================================================
   v0.10.0 — hybrid compose, diff view, draft restore, library export
   =========================================================================== */

/* Draft-to-draft diff view (compose) */
.hn-app .hn-paper--diff{cursor:default}
.hn-app .hn-diff-line{min-height:1.2em}
.hn-app .hn-diff-ins{background:rgba(34,197,94,.14);color:#15803d;border-radius:3px;padding:0 1px}
.hn-app .hn-diff-del{background:rgba(220,38,38,.12);color:#b91c1c;text-decoration:line-through;border-radius:3px;padding:0 1px}
.hn-app .hn-btn.is-on,.hn-app .hn-btn.is-on:hover{background:#e3edf4 !important;color:#2d3748 !important;border-color:#7aafc9 !important}

/* Restore-previous-session banner (compose) */
.hn-app .hn-restore{display:flex;align-items:center;gap:12px;background:#fdf6e3;border:1px solid #ecd9a0;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.hn-app .hn-restore__txt{flex:1;font-size:13px;color:#6b5d33}
.hn-app .hn-restore__btn{flex:none}

/* Richer empty state (note pane) */
.hn-app .hn-empty p{margin:0 0 10px;font-weight:600}
.hn-app .hn-empty ol{margin:0;padding-left:20px;text-align:left;display:inline-block}
.hn-app .hn-empty li{margin:0 0 6px;line-height:1.45}

/* Quiet daily-allowance note in the compose footer */
.hn-app .hn-foot-remaining{color:#b45309;font-weight:600}

/* Library export button sits at the end of the panel head */
.hn-app .hn-libexport{margin-left:10px;flex:none}

/* ===========================================================================
   v1.0.0 — voice dictation, seeding-sync pills, help + feedback, polish
   =========================================================================== */

/* GLOBAL HIDDEN GUARD. Several components set their own display, which
   silently beats the UA's [hidden]{display:none} (this is exactly how the
   voice banner shipped visible in v1.0.0). One defensive rule ends the
   whole bug class: hidden means hidden, everywhere in the app. */
.hn-app [hidden]{display:none !important}

/* Help group on the rail (How to use / Send feedback) */
.hn-app .hn-nav__label--gap{margin-top:22px}
.hn-app .hn-nav__item--quiet{opacity:.85}
.hn-app .hn-howto h3{margin:14px 0 4px;font-size:13.5px;font-weight:700;color:#2d3748}
.hn-app .hn-howto:first-child h3{margin-top:2px}
.hn-app .hn-howto p{margin:0;font-size:13px;line-height:1.55;color:#4a5568}

/* Voice dictation banner */
.hn-app .hn-voice{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 14px;border:1px solid #e6b8b8;border-radius:12px;background:linear-gradient(180deg,#fdf7f7,#fbf1f1);box-shadow:0 1px 6px rgba(180,40,40,.06)}
.hn-app .hn-voice__dot{flex:none;width:10px;height:10px;border-radius:50%;background:#dc2626;animation:hn-voice-pulse 1.3s ease-in-out infinite}
.hn-app .hn-voice__dot.is-finalising{animation:none;background:#b45309}
@keyframes hn-voice-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.hn-app .hn-voice__live{flex:1;min-width:0;font-size:13px;color:#4a5568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
.hn-app .hn-voice__live.is-warn{color:#b45309;font-weight:600;direction:ltr}
.hn-app .hn-voice__timer{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:#7b8794}
.hn-app .hn-voice__device{flex:none;max-width:150px;font-size:12px;color:#5a6b85;border:1px solid #e3d4d4;border-radius:8px;background:#fff;padding:4px 6px}
.hn-app .hn-voice__stop{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:none;border-radius:9px;background:#dc2626 !important;color:#fff !important;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s}
.hn-app .hn-voice__stop:hover{background:#b91c1c !important}
.hn-app .hn-voice__stop svg{width:14px;height:14px}
.hn-app .hn-voice-btn span{white-space:nowrap}

/* "Generate with AI" alternative for form-only cases */
.hn-app .hn-ai-alt{color:#5a6b85}

/* Seeding-sync update pill + modal actions */
.hn-app .hn-updpill{flex:none;margin-left:8px;padding:3px 10px;border:1px solid #ecd9a0;border-radius:999px;background:#fdf6e3 !important;color:#8a6d1a !important;font-size:11.5px;font-weight:600;cursor:pointer;transition:box-shadow .15s}
.hn-app .hn-updpill:hover{box-shadow:0 1px 5px rgba(160,120,20,.18)}
.hn-app .hn-upd-actions{display:flex;gap:10px;margin-top:16px}

/* ---- Premium polish pass -------------------------------------------------- */

/* View transitions: gentle rise on switch */
.hn-app .hn-view:not([hidden]){animation:hn-view-in .22s ease-out}
@keyframes hn-view-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Consistent, visible keyboard focus */
.hn-app :focus-visible{outline:2px solid #7aafc9;outline-offset:2px;border-radius:4px}

/* Slimmer, calmer scrollbars in the work surfaces */
.hn-app .hn-paper::-webkit-scrollbar,.hn-app .hn-case::-webkit-scrollbar,.hn-app .hn-view::-webkit-scrollbar,.hn-app .hn-modal__body::-webkit-scrollbar{width:9px}
.hn-app .hn-paper::-webkit-scrollbar-thumb,.hn-app .hn-case::-webkit-scrollbar-thumb,.hn-app .hn-view::-webkit-scrollbar-thumb,.hn-app .hn-modal__body::-webkit-scrollbar-thumb{background:#c9d2de;border-radius:8px;border:2px solid transparent;background-clip:content-box}
.hn-app .hn-paper::-webkit-scrollbar-thumb:hover,.hn-app .hn-view::-webkit-scrollbar-thumb:hover{background:#a9b6c6;border:2px solid transparent;background-clip:content-box}

/* Modal entrance */
.hn-app .hn-scrim{animation:hn-scrim-in .16s ease-out}
@keyframes hn-scrim-in{from{opacity:0}to{opacity:1}}
.hn-app .hn-modal{animation:hn-modal-in .2s cubic-bezier(.2,.9,.3,1.2)}
@keyframes hn-modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Respect reduced-motion preferences across all app animation */
@media (prefers-reduced-motion: reduce){
  .hn-app *,.hn-app *::before,.hn-app *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Mobile tweaks */
@media (max-width: 900px){
  .hn-app .hn-voice__device{display:none}
}