/* THE RECORD — notes (S1640), the conversation under each one (S1642), and notes people love to use (S1645 NT).
   The panel is docked to the right edge with a clear edge: the paper and the notes scroll separately, the page moves
   over and the menu folds away (the Hypothesis side-by-side idea), and the handle sits in the middle of the side —
   notes open and close from there. Inside, no boxes and no pills: a person first (face, name, when), the kind as its
   emoji and word in its own colour, the words, one hairline line to reply; corners slightly rounded, never capsules.
   Type never under 15 px; the one blue #125CA5 and the red #9B1B1B (THE STANDARD §13); nothing drawn down the side
   of any text (S1635 law 34). Recogito's own sheet is not loaded; the rules its fallback renderer needs are below. */
:root{--trn-ink:#111111;--trn-dim:#4B5563;--trn-soft:#6B7280;--trn-rule:#E5E7EB;--trn-band:#F4F6F8;--trn-blue:#125CA5;--trn-red:#9B1B1B;
  --trn-yellow:#FFD60A;--trn-face:"Source Sans 3",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --trn-emoji-face:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  --trn-w:380px;--trn-handle:#2563EB;--trn-handle-ink:#FFFFFF;--trn-r:8px}
@media (max-width:1099px){:root{--trn-w:350px}}

.r6o-annotatable{position:relative}
.r6o-annotatable .r6o-span-highlight-layer{position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none;overflow:hidden;user-select:none;-webkit-user-select:none;z-index:1}
.r6o-annotatable .r6o-span-highlight-layer.hidden{display:none}
.r6o-annotatable .r6o-span-highlight-layer .r6o-annotation{position:absolute;display:block;border-style:solid;border-width:0;box-sizing:content-box}
.tr-annotated.no-focus-outline:focus{outline:none}
.tr-annotated.hovered *{cursor:pointer}
::highlight(trn-draft){background-color:rgba(37,99,235,.2)}

/* the panel beside the page: opening it moves the page over and folds the menu away in ONE step, with the words
   being read held in place (notes.js, "the reading place") — nothing moves but the menu and the panel (K3-M23) */
html.trn-open body{padding-right:var(--trn-w)!important}
html.trn-open.trn-menu body{padding-left:0!important}
html.trn-open body{overflow-wrap:anywhere}
html.trn-open aside.side{transform:translateX(-102%)!important;visibility:hidden!important}
html.trn-open .trn-fold{transform:translateX(-100%)!important;visibility:hidden!important}
html.trn-open.trn-menu-nav main{margin-left:0!important}

/* S1645 NT — the motion (his M13: "someone should go, oh wow, that's really smooth"). One movement, drawn by the
   browser's View Transitions from pictures of before and after (notes.js, "the motion"): the notes glide in from the
   right, the menu glides out to the left, the page settles over between them with its words softly re-set, and the
   NOTES handle rides across with the panel's edge. Quick to start, gentle to land (the "decelerate" curve the best
   side panels use); closing is a little quicker. The page is laid out once, underneath, with the reading line held. */
.tr-panel{view-transition-name:trn-panel}
.tr-tab{view-transition-name:trn-tab}
/* the menu is named only while it shows, so it slides (never fades to grey) as it goes and as it comes back */
html.trn-menu:not(.trn-open) .trn-fold,html.trn-menu:not(.trn-open) aside.side{view-transition-name:trn-menu}
/* ONE clock for every piece (his M16: the menu lagged and showed the space behind it; closing, the page "bounced out and
   hit the menu" — each piece had its own timing). Same length, same curve, so the page's edge stays on the menu's edge. */
:root{--trn-move:.34s;--trn-curve:cubic-bezier(.32,.72,0,1)}
html.trn-closing{--trn-move:.3s}
::view-transition-group(*){animation-duration:var(--trn-move);animation-timing-function:var(--trn-curve)}
/* the page: its words NEVER dim (his M13b — any blend of the old and new line breaks turns black words grey: the
   flash). The words take their new line breaks the instant he clicks, then the page glides into place, solid the
   whole way — the way a layout change is animated when the words must stay readable (FLIP). Nothing fades. */
::view-transition-old(trn-page),::view-transition-old(root){display:none}
::view-transition-new(trn-page),::view-transition-new(root){animation:none;opacity:1}
::view-transition-new(trn-page){height:100%;width:auto;object-fit:none;object-position:left top}
/* what moves over what: the page underneath, the menu and the notes over it, the NOTES handle on top */
::view-transition-group(trn-page){z-index:1}
::view-transition-group(trn-menu),::view-transition-group(trn-panel){z-index:2}
::view-transition-group(trn-tab){z-index:3}
/* the notes arrive from the right edge and leave the same way */
::view-transition-new(trn-panel):only-child{animation:trn-from-right var(--trn-move) var(--trn-curve) both}
::view-transition-old(trn-panel):only-child{animation:trn-to-right var(--trn-move) var(--trn-curve) both}
/* the menu folds away to the left and comes back from there */
::view-transition-old(trn-menu):only-child{animation:trn-to-left var(--trn-move) var(--trn-curve) both}
::view-transition-new(trn-menu):only-child{animation:trn-from-left var(--trn-move) var(--trn-curve) both}
@keyframes trn-from-right{from{transform:translateX(100%)}}
@keyframes trn-to-right{to{transform:translateX(100%)}}
@keyframes trn-from-left{from{transform:translateX(-100%)}}
@keyframes trn-to-left{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* the bar over selected words: slightly rounded, words not boxes; on a site with kinds each has its emoji */
.tr-bar{position:fixed;z-index:99990;display:flex;flex-wrap:wrap;gap:2px;padding:4px;background:rgba(15,23,42,.97);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tr-bar button{font:600 15px/1 var(--trn-face);color:#fff;background:none;border:0;border-radius:7px;padding:0 12px;min-height:42px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent}
.tr-bar button:hover,.tr-bar button:focus-visible{background:rgba(255,255,255,.1);outline:none}
.tr-bar.trn-kinds-bar button:hover,.tr-bar.trn-kinds-bar button:focus-visible{box-shadow:inset 0 -2px 0 var(--c,#fff)}
.trn-emoji{font-family:var(--trn-emoji-face);font-style:normal;line-height:1}

/* writing: in the panel, never over the words — a soft slightly-rounded sheet, not a bordered box */
.tr-card{background:#F8FAFC;color:var(--trn-ink);border:0;border-radius:10px;padding:14px 14px 12px;margin:10px 0 8px;font:17px/1.5 var(--trn-face)}
.tr-card label{display:block;font:600 15px/1.3 var(--trn-face);color:var(--trn-dim);margin:10px 0 6px}
.tr-card textarea,.trn-replybox{display:block;width:100%;min-height:48px;font:17px/1.5 var(--trn-face);color:var(--trn-ink);border:0;border-bottom:1px solid #CBD5E1;border-radius:0;padding:8px 2px;resize:none;box-sizing:border-box;background:transparent;field-sizing:content;max-height:16em}
.tr-card textarea{min-height:72px}
.tr-card textarea:focus,.trn-replybox:focus{outline:none;border-bottom:2px solid var(--trn-blue);padding-bottom:7px}
.tr-card textarea::placeholder,.trn-replybox::placeholder{color:#94A3B8}
.trn-field{display:flex;align-items:flex-end;gap:6px}
.trn-field textarea{flex:1}
.tr-row{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;align-items:center}
.tr-btn{font:600 15px/1 var(--trn-face);min-height:36px;padding:0 10px;border:0;border-radius:var(--trn-r);background:none;color:var(--trn-dim);cursor:pointer}
.tr-btn:hover{background:var(--trn-band);color:var(--trn-ink)}
.tr-btn.go{background:var(--trn-blue);color:#fff;padding:0 16px}
.tr-btn.go:hover{background:#0E4A86;color:#fff}
.tr-btn.stop{color:var(--trn-red)}
.tr-btn:focus-visible{outline:2px solid var(--trn-blue);outline-offset:2px}
.tr-hint{font:15px/1.45 var(--trn-face);color:var(--trn-soft);margin:8px 0 0}

/* what a note says: a person first, the kind in its colour, the words */
.trn-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:30px;margin:0 0 6px}
.trn-who .trn-name,.trn-who .trn-when{white-space:nowrap}
.trn-who.small{gap:8px;min-height:24px;margin:0 0 2px}
.trn-face{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font:600 12px/1 var(--trn-face);letter-spacing:.02em;color:#fff;background:var(--hue,#475569)}
.trn-face.small{width:22px;height:22px;font-size:10px}
.trn-name{font:600 15.5px/1.2 var(--trn-face);color:var(--trn-ink)}
.trn-when{font:400 15px/1.2 var(--trn-face);color:var(--trn-soft)}
.trn-kindline{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--trn-face);color:var(--c,var(--trn-dim));white-space:nowrap}
.trn-kindbtn{border:0;background:none;cursor:pointer;padding:6px 6px;border-radius:7px}
.trn-kindbtn:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.trn-caret{font-size:12px;opacity:.7}
.trn-kindword{margin-left:auto;font:600 15px/1.2 var(--trn-face);color:var(--trn-soft);white-space:nowrap}
.trn-kindword.strike,.trn-kindword.suggest{color:var(--trn-red)}
.trn-kindpick{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 2px}
.trn-kindpick button{border:0;background:none;cursor:pointer;padding:5px 2px;display:inline-flex;align-items:center;gap:5px;font:600 15px/1 var(--trn-face);color:var(--c);opacity:.72;border-radius:6px}
.trn-kindpick button[aria-checked="true"],.trn-kindpick button:hover{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tr-kind{display:inline-block;font:700 15px/1 var(--trn-face);padding:0;margin:0 0 8px;color:var(--trn-dim)}
.tr-quote{margin:0 0 8px;font:italic 16px/1.45 Georgia,"Source Serif 4",serif;color:var(--trn-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tr-quote.trn-onpage{font:600 15px/1.3 var(--trn-face);font-style:normal;color:var(--trn-soft)}
.tr-quote.x{text-decoration:line-through;text-decoration-color:var(--trn-red);text-decoration-thickness:2px}
.tr-body{margin:0 0 6px;font:17px/1.55 var(--trn-face);color:var(--trn-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.tr-repl{margin:0 0 8px;color:var(--trn-ink);font:17px/1.5 var(--trn-face);white-space:pre-wrap}
.tr-repl b{font-weight:600;color:var(--trn-blue)}
.tr-meta{margin:0;font:15px/1.4 var(--trn-face);color:var(--trn-soft)}
.tr-moved{margin:0 0 8px;font:600 15px/1.4 var(--trn-face);color:var(--trn-red)}
.tr-err{margin:8px 0 0;font:600 15px/1.4 var(--trn-face);color:var(--trn-red)}
.trn-notice{color:var(--trn-dim)}

/* THE HANDLE — in the middle of the right edge (his words: "I liked when we opened it, closed it from the middle"):
   slightly rounded on the page side, one clean colour, the word and the count; with the panel open it rides the
   panel's edge and closes it. Never a pill. */
.tr-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1003;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--trn-handle);color:var(--trn-handle-ink);border:0;border-radius:10px 0 0 10px;padding:16px 10px 14px;cursor:pointer;
  box-shadow:-6px 6px 20px rgba(15,23,42,.18);font:600 15px/1 var(--trn-face);transition:right .0s,padding .15s ease,box-shadow .15s ease}
.tr-tab .trn-tabword{writing-mode:vertical-rl;letter-spacing:.08em}
.tr-tab .trn-emoji{font-size:17px}
.tr-tab b{font:700 15px/1 var(--trn-face);opacity:.95}
.tr-tab:hover,.tr-tab:focus-visible{padding-right:14px;box-shadow:-8px 8px 26px rgba(15,23,42,.26);outline:none}
html.trn-open .tr-tab{right:var(--trn-w)}

/* the panel: white, a clear edge, its own scroll */
.tr-panel{position:fixed;top:0;right:0;bottom:0;width:var(--trn-w);z-index:1002;background:#FFFFFF;color:var(--trn-ink);
  box-shadow:-1px 0 0 #D5DAE1,-14px 0 30px rgba(15,23,42,.07);display:flex;flex-direction:column;font:17px/1.5 var(--trn-face)}
.tr-panel[hidden],.tr-bar[hidden],.tr-tab[hidden],.tr-ui [hidden]{display:none!important}
.tr-head{position:relative;padding:18px 20px 10px;background:#fff}
.tr-head h2{font:700 21px/1.2 var(--trn-face);margin:0 0 2px;letter-spacing:-.005em;padding-right:90px}
.tr-head h2:focus{outline:none}
.tr-head p{margin:0;font:15px/1.4 var(--trn-face);color:var(--trn-soft);padding-right:90px}
.tr-x{position:absolute;top:14px;right:12px;font:600 15px/1 var(--trn-face);min-height:36px;padding:0 10px;border:0;border-radius:var(--trn-r);background:none;color:var(--trn-dim);cursor:pointer}
.tr-x:hover{background:var(--trn-band);color:var(--trn-ink)}
.tr-tools{display:flex;flex-direction:column;gap:10px;padding:4px 20px 12px;background:#fff;border-bottom:1px solid var(--trn-rule)}
.tr-tools > .tr-btn{align-self:flex-start}
.trn-filters{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.tr-filter{display:inline-flex;gap:2px;border:0}
.tr-filter button{font:600 15px/1 var(--trn-face);min-height:32px;padding:0 8px;border:0;border-radius:7px;background:none;color:var(--trn-soft);cursor:pointer}
.tr-filter button:hover{color:var(--trn-ink);background:var(--trn-band)}
.tr-filter button[aria-pressed="true"]{color:var(--trn-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.trn-tagfilter,.trn-tagpick,.trn-kindfilter{display:flex;flex-wrap:wrap;gap:2px 12px}
.trn-tagpick{margin:10px 0 0}
.trn-chip{font:600 15px/1 var(--trn-face);padding:7px 8px;border-radius:7px;border:0;background:none;color:var(--trn-soft);cursor:pointer}
.trn-chip:hover{background:var(--trn-band);color:var(--trn-ink)}
.trn-chip[aria-pressed="true"],.trn-chip.on,.trn-chip[aria-checked="true"]{color:var(--trn-blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;background:none}
.trn-kindkey{display:inline-flex;align-items:center;gap:5px;font:600 15px/1 var(--trn-face);min-height:30px;padding:0 4px;border:0;border-radius:7px;background:none;color:var(--c);opacity:.8;cursor:pointer}
.trn-kindkey:hover{opacity:1;background:color-mix(in srgb,var(--c) 9%,transparent)}
.trn-kindkey[aria-pressed="true"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.trn-lane{font-style:italic}
.trn-tags{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0}
.trn-tagword{font:600 15px/1.3 var(--trn-face);color:var(--trn-blue)}
.tr-scroll{flex:1;overflow-y:auto;padding:6px 12px 28px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.tr-group{font:700 15px/1.3 var(--trn-face);color:var(--trn-soft);margin:18px 8px 6px}
.tr-empty{font:17px/1.5 var(--trn-face);color:var(--trn-dim);margin:20px 8px}

/* one conversation: no card — space, a hairline between, a soft wash in its own colour when it is lit */
.tr-item{background:none;border:0;border-bottom:1px solid var(--trn-rule);border-radius:0;padding:16px 10px 14px;margin:0;cursor:pointer;transition:background-color .15s ease}
.tr-item:hover{background:#FAFBFC}
.tr-item.trn-lit,.tr-item.on{background:color-mix(in srgb,var(--c,#2563EB) 8%,#fff)}
.tr-item.on{box-shadow:0 0 0 2px color-mix(in srgb,var(--c,#2563EB) 40%,transparent)}
.tr-item.trn-is-done{opacity:.72}
.tr-item.trn-is-done:hover{opacity:1}
.tr-item .tr-btn{min-height:32px;padding:0 8px}
.trn-done-line{margin:8px 0 0;font:600 15px/1.4 var(--trn-face);color:var(--trn-soft)}
.trn-replies{margin:10px 0 0 38px}
.trn-re{padding:8px 0;margin:0;background:none;border-radius:0}
.trn-re + .trn-re{border-top:1px solid #EEF0F3}
.trn-re .tr-body{margin:2px 0 0 30px}
.trn-re .tr-card{margin:0}
.trn-mini{margin-top:4px;margin-left:30px}
.trn-reply{display:flex;gap:8px;align-items:flex-end;margin:10px 0 0 38px}
.trn-reply .trn-face{margin-bottom:10px}
.trn-replybox{min-height:40px;flex:1}
.trn-acts{margin-left:30px}
.trn-confirm{align-items:center}
.tr-foot{padding:12px 20px 16px;background:#fff;border-top:1px solid var(--trn-rule);display:flex;flex-wrap:wrap;gap:8px 22px;font:15px/1.4 var(--trn-face)}
.tr-foot a{color:var(--trn-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.tr-wait{margin:12px 14px 0;padding:12px 14px;border:0;border-radius:10px;font:16px/1.45 var(--trn-face);background:#FEF2F2;color:var(--trn-ink)}

/* emoji reactions: at a glance, no capsules */
.trn-reacts{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:8px 0 0 30px}
.trn-react{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;font:500 16px/1 var(--trn-face);background:none;color:var(--trn-ink)}
.trn-react b{font:600 15px/1 var(--trn-face);color:var(--trn-dim)}
.trn-react:hover{background:var(--trn-band)}
.trn-react[aria-pressed="true"]{background:#EFF6FF}
.trn-react[aria-pressed="true"] b{color:var(--trn-blue)}
.trn-react.trn-add{opacity:.6;font-size:15px}
.trn-react.trn-add:hover{opacity:1}
.trn-pick{display:inline-flex;gap:2px}
.trn-pick[hidden]{display:none}
.trn-pick button{border:0;background:none;font:20px/1 var(--trn-emoji-face);cursor:pointer;padding:4px 5px;border-radius:7px}
.trn-pick button:hover{background:var(--trn-band)}

/* the microphone: tap, talk, tap again */
.trn-mic{flex:0 0 auto;width:36px;height:36px;display:inline-grid;place-items:center;border:0;border-radius:var(--trn-r);background:none;color:var(--trn-soft);cursor:pointer;margin-bottom:4px}
.trn-mic svg{width:19px;height:19px}
.trn-mic:hover{background:var(--trn-band);color:var(--trn-ink)}
.trn-mic.trn-live{background:#E11D48;color:#fff;animation:trn-pulse 1.2s ease-in-out infinite}
.trn-mic.trn-busy{opacity:.55;cursor:progress}
@keyframes trn-pulse{50%{box-shadow:0 0 0 6px rgba(225,29,72,.18)}}

/* the top of the panel on a site with kinds: how to leave a great note, said plainly */
.trn-guide{padding:2px 0 4px}
.trn-lead{margin:0;font:600 16px/1.4 var(--trn-face);color:var(--trn-ink)}
.trn-how{margin:4px 0 12px;padding-left:20px;font:16px/1.5 var(--trn-face);color:var(--trn-dim)}
.trn-how li{margin:2px 0}
.trn-first{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;border-bottom:1px solid #CBD5E1;background:none;padding:10px 2px;font:17px/1.4 var(--trn-face);color:#94A3B8;cursor:text}
.trn-first:hover{border-bottom-color:var(--trn-blue);color:var(--trn-dim)}
.trn-stuck{margin:12px 0 2px;font:15px/1.4 var(--trn-face);color:var(--trn-soft)}
.trn-stuck-list{margin:0;padding-left:20px;font:15px/1.55 var(--trn-face);color:var(--trn-soft)}
.trn-stuck-list button,.trn-open-note button{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--trn-dim);text-decoration:underline;text-decoration-color:#CBD5E1;text-underline-offset:3px;text-align:left}
.trn-stuck-list button:hover,.trn-open-note button:hover{color:var(--trn-ink);text-decoration-color:var(--trn-ink)}
.trn-open-note{margin:12px 0 0;font:15px/1.5 var(--trn-face);color:var(--trn-soft)}

/* a mark in the margin beside each conversation: the record's numbered flag; on a site with kinds, the kind's emoji
   (no square). Suggested words are written in after the crossed-out words, redline style. */
.tr-overlay{position:absolute;top:0;left:0;width:0;height:0;z-index:30;pointer-events:none}
.tr-pin{position:absolute;pointer-events:auto;cursor:pointer;font:700 15px/1 var(--trn-face);color:var(--trn-ink);background:#FFF3B0;
  border:0;min-width:22px;height:22px;padding:0 5px;border-radius:6px;box-sizing:border-box}
.tr-pin.suggest{background:#E0ECFB;color:var(--trn-blue)}
.tr-pin.trn-emoji-pin{background:none;font:17px/1 var(--trn-emoji-face);padding:0;min-width:0;height:auto}
.tr-pin.trn-emoji-pin:hover{transform:scale(1.15)}
ins.tr-ins{color:var(--trn-blue);font-weight:600;text-decoration-line:underline;text-decoration-style:double;text-decoration-color:var(--trn-blue);
  text-underline-offset:3px;background:none;margin-left:.3em;cursor:pointer}
ins.tr-ins:hover{background:#FFF7CC}

/* a phone: no room beside the page — the panel is a sheet over it; the handle waits at the side */
@media (max-width:759px){html.trn-open body{padding-right:0!important}.tr-panel{width:100vw}html.trn-open .tr-tab{display:none}}
/* ── S1645 NT: the open door — sign in with your email and a 6-digit code; your face, your photo ── */
.trn-face{position:relative;overflow:hidden}
.trn-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.trn-door{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--trn-rule)}
.trn-door-lead{margin:0 0 4px;font:700 19px/1.3 var(--trn-face);color:var(--trn-ink)}
.trn-door-why{margin:0 0 12px;font:16px/1.5 var(--trn-face);color:var(--trn-dim)}
.trn-door-step{display:grid;gap:10px}
.trn-door-step .tr-btn.go{justify-self:start;min-height:42px;font-size:16px}
.trn-field{font:17px/1.4 var(--trn-face);color:var(--trn-ink);background:#fff;border:1px solid #CBD5E1;border-radius:8px;padding:10px 12px;width:100%;box-sizing:border-box}
.trn-field:focus{outline:none;border-color:var(--trn-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--trn-blue) 18%,transparent)}
.trn-code{font:600 22px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3em;max-width:13ch}
.trn-code::placeholder{font:17px/1.4 var(--trn-face);letter-spacing:normal}
.trn-door-sent{margin:0;font:16px/1.5 var(--trn-face);color:var(--trn-dim)}
.trn-door-sent b{color:var(--trn-ink);font-weight:600}
.trn-door-alt{margin:0;font:15px/1.4 var(--trn-face);color:var(--trn-soft)}
.trn-door-say{margin:8px 0 0;font:600 15px/1.4 var(--trn-face);color:var(--trn-red)}
.trn-door-say:empty{display:none}
.trn-guard:empty{display:none}
.trn-link{border:0;background:none;padding:0;cursor:pointer;font:600 15px/1.4 var(--trn-face);color:var(--trn-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.trn-link:hover{color:#0E4A86}
.trn-you{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--trn-rule)}
.trn-you-face{border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.trn-you-face .trn-face{width:44px;height:44px;font-size:16px}
.trn-you-face:focus-visible{outline:2px solid var(--trn-blue);outline-offset:2px}
.trn-you-text{display:grid;gap:2px;min-width:0}
.trn-you-name{font:700 17px/1.25 var(--trn-face);color:var(--trn-ink)}
.trn-you-acts{font:15px/1.4 var(--trn-face);color:var(--trn-soft)}
.trn-you-say{font:15px/1.4 var(--trn-face);color:var(--trn-dim)}
.trn-you-say:empty{display:none}
/* a reader who has not signed in reads everything; the ways to write wait for the sign-in */
html.trn-reader .trn-reply,html.trn-reader .trn-add,html.trn-reader .trn-done,html.trn-reader .trn-kindbtn,html.trn-reader .trn-first,html.trn-reader .trn-stuck,html.trn-reader .trn-stuck-list{display:none!important}
html.trn-reader .trn-react{pointer-events:none}
@media print{.tr-tab,.tr-panel,.tr-bar,.tr-overlay{display:none!important}ins.tr-ins{color:#111}html.trn-open body{padding-right:0!important}}

/* ── what changed (S1642 K3, step 2): the redline, the landing on a page, the What-changed page ── */
::highlight(trn-change){background-color:rgba(18,92,165,.18)}
a.tr-btn{display:inline-flex;align-items:center;text-decoration:none}
.tr-kind.ch{color:var(--trn-blue)}
.ch-red{font:18px/1.6 var(--trn-face);color:var(--trn-ink);margin:6px 0 4px;overflow-wrap:anywhere;max-width:88ch}
.ch-red del{color:var(--trn-red);text-decoration:line-through;text-decoration-thickness:2px}
.ch-red ins{color:var(--trn-blue);text-decoration:none;background:rgba(18,92,165,.12);border-radius:3px;padding:0 2px}
.trn-change-card{background:#F1F6FC}
.tr-panel .ch-red{font-size:17px}
.ch-page{font:700 21px/1.3 var(--trn-face);margin:28px 0 10px}
.ch-page a{color:var(--trn-ink)!important;text-decoration:none!important;background:none!important}.ch-page a:hover{color:var(--trn-blue)!important}
.ch-badge{display:inline-block;margin-left:10px;padding:5px 9px;border-radius:6px;background:var(--trn-blue);color:#fff;font:700 15px/1 var(--trn-face);letter-spacing:.02em;vertical-align:top}
.ch-item.ch-new{border-color:var(--trn-blue);box-shadow:0 0 0 1px var(--trn-blue)}
.ch-item.ch-checked{background:#F4F6F8}
.ch-cites,.ch-note,.ch-meta{font:16px/1.45 var(--trn-face);color:var(--trn-dim);margin:8px 0 0;max-width:88ch}
.ch-note a,.ch-ripple a{color:var(--trn-blue)}
.ch-ripple{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:16px/1.4 var(--trn-face);max-width:88ch}
.ch-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0}
.ch-more{margin-top:8px}
/* S1645 M18: the one box at the top */
.trn-quickwrap{display:grid;gap:10px}
.trn-quick{display:block;width:100%;box-sizing:border-box;min-height:84px;font:17px/1.5 var(--trn-face);color:var(--trn-ink);background:#fff;border:1px solid #CBD5E1;border-radius:8px;padding:10px 12px;resize:none;field-sizing:content;max-height:14em}
.trn-quick:focus{outline:none;border-color:var(--trn-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--trn-blue) 18%,transparent)}
.trn-quickwrap .tr-row .tr-btn.go{min-height:40px;font-size:16px}
.trn-door-simple{margin:4px 0 0;padding:14px 0 0;border-bottom:0;border-top:1px solid var(--trn-rule)}
.trn-quickwrap>.trn-field{border:0;padding:0;background:none;box-shadow:none;display:flex;gap:8px;align-items:flex-start;width:100%}.trn-quickwrap>.trn-field .trn-quick{flex:1}
/* his M19: kinds as their emoji alone */
.tr-bar.trn-kinds-bar button.trn-emoji-btn{font:20px/1 var(--trn-emoji-face);padding:0 10px;min-width:44px;justify-content:center}
.trn-kindline .trn-emoji,.trn-kindbtn .trn-emoji,.trn-kindpick .trn-emoji,.trn-kindkey .trn-emoji{font-size:19px}
/* his M20: on the bar, each icon with its word small underneath; on a note, its kind as a big emoji you see at a glance */
.tr-bar.trn-kinds-bar button.trn-emoji-btn{flex-direction:column;gap:4px;min-height:58px;min-width:58px;padding:7px 8px 6px;justify-content:center}
.trn-bar-icon{font:22px/1 var(--trn-emoji-face)}
.trn-bar-word{font:600 11px/1 var(--trn-face);letter-spacing:.02em;color:rgba(255,255,255,.82);white-space:nowrap}
.tr-bar.trn-kinds-bar button.trn-emoji-btn:hover .trn-bar-word{color:#fff}
.trn-who .trn-kindline .trn-emoji,.trn-who .trn-kindbtn .trn-emoji{font-size:30px;line-height:1}
.trn-who{align-items:center}
/* ── his M22: "I don't even know where one begins and the next one ends" — every note is its own card ── */
.tr-scroll{background:#F1F4F8;padding:12px 12px 28px}
.tr-item{background:#fff;border:1px solid #E2E8F0;border-radius:10px;margin:0 0 12px;padding:14px 14px 12px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.tr-item.trn-lit,.tr-item.on{background:#fff;border-color:var(--c,#2563EB);box-shadow:0 0 0 2px color-mix(in srgb,var(--c,#2563EB) 30%,transparent)}
.tr-item.trn-is-done{opacity:.75}
.tr-group{margin:6px 2px 10px}
.trn-replies{margin:10px 0 0;padding:8px 0 0 12px;border-left:2px solid #E2E8F0}
/* the kind: a big emoji like a stamp — no underline, no box, no word beside it */
.trn-kindline,.trn-kindbtn{text-decoration:none!important;border:0!important;box-shadow:none!important;background:none!important}
.trn-kindbtn .trn-caret{font-size:11px;color:var(--trn-soft)}
/* words small under the icons where you pick a kind */
.trn-kindpick button,.trn-kindkey{flex-direction:column;gap:3px;min-width:52px;padding:6px 4px}
.trn-pick-word{font:600 11px/1 var(--trn-face);color:var(--c,var(--trn-dim));white-space:nowrap}
/* the tips: one quiet line that opens */
.trn-tips{margin:10px 0 0;font:15px/1.5 var(--trn-face);color:var(--trn-dim)}
.trn-tips summary{cursor:pointer;font:600 14px/1.4 var(--trn-face);color:var(--trn-soft);list-style:none}
.trn-tips summary::before{content:"＋ ";color:var(--trn-soft)}
.trn-tips[open] summary::before{content:"－ "}
.trn-tips .trn-how,.trn-tips .trn-stuck-list{margin:6px 0 8px;padding-left:18px}
.trn-door-start{min-height:42px;font-size:16px}.trn-door:has(.trn-door-body[hidden]){padding-bottom:12px}