.interaction-page{ min-height:100vh; background:radial-gradient(ellipse at 88% 8%,var(--paper-2),transparent 38%),var(--paper); }
.interaction-bar{ display:flex; justify-content:space-between; align-items:center; min-height:4.2rem; padding:.7rem clamp(1.2rem,5vw,4rem); border-bottom:1px solid var(--rule); }
.interaction-brand{ color:var(--zhu-deep); font-family:var(--font-head); font-size:1.2rem; letter-spacing:.1em; text-decoration:none; }
.interaction-brand small{ margin-left:.45rem; color:var(--ink-3); font-family:var(--font-body); font-size:.72rem; }
.interaction-back{ color:var(--ink-2); font-size:.82rem; text-decoration:none; }
.interaction-back:hover,.interaction-back:focus-visible{ color:var(--zhu-deep); }
.interaction-main{ width:min(74rem,calc(100% - 2.5rem)); margin:0 auto; padding:1.8rem 0 2.5rem; }
.interaction-crumb{ display:flex; align-items:center; gap:.6rem; color:var(--ink-3); font-size:.78rem; }
.interaction-crumb a{ color:var(--zhu-deep); text-decoration:none; }
.interaction-hero{ max-width:47rem; padding:2.4rem 0 1.9rem; }
.interaction-index{ margin:0 0 .45rem; color:var(--zhu-deep); font-size:.75rem; letter-spacing:.18em; }
.interaction-hero h1{ margin:0; font-family:var(--font-head); font-size:clamp(3rem,6vw,4.8rem); font-weight:400; letter-spacing:.18em; line-height:1.25; }
.interaction-hero > p:last-child{ margin:.7rem 0 0; color:var(--ink-2); font-size:1rem; line-height:1.8; }
.interaction-switch{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.6rem; padding-bottom:.8rem; border-bottom:1px solid var(--rule); }
.interaction-switch a{ display:inline-flex; align-items:center; justify-content:center; min-width:5.2rem; min-height:2.55rem; padding:.35rem .85rem; color:var(--ink-2); font-family:var(--font-head); font-size:.95rem; text-decoration:none; transition:background .2s,color .2s; }
.interaction-switch a:hover,.interaction-switch a:focus-visible{ background:var(--paper-2); color:var(--zhu-deep); }
.interaction-switch a[aria-current="page"]{ background:var(--ink); color:var(--paper); }
.interaction-switch button{ min-width:5.2rem; min-height:2.55rem; padding:.35rem .85rem; border:0; background:transparent; color:var(--ink-2); font-family:var(--font-head); font-size:.95rem; cursor:pointer; }
.interaction-switch button:hover,.interaction-switch button:focus-visible{ background:var(--paper-2); color:var(--zhu-deep); }
.interaction-switch button[aria-current="page"]{ background:var(--ink); color:var(--paper); }
.interaction-layout{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(1.2rem,3vw,2.5rem); align-items:start; }
.interaction-compose{ padding:1.4rem; border:1px solid var(--rule); background:color-mix(in srgb,var(--paper) 84%,white); }
.interaction-feed{ min-width:0; }
.interaction-section-head{ display:flex; align-items:baseline; gap:.7rem; padding-bottom:.65rem; border-bottom:1px solid var(--rule); }
.interaction-section-head > span{ color:var(--zhu-deep); font-size:.75rem; }
.interaction-section-head h2{ margin:0; font-family:var(--font-head); font-size:1.4rem; font-weight:400; letter-spacing:.1em; }
.interaction-field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.interaction-field-row:has(> .interaction-field[hidden]){ grid-template-columns:minmax(0,1fr); }
.interaction-field{ display:flex; flex-direction:column; gap:.4rem; margin-top:1.1rem; color:var(--ink-2); font-size:.87rem; }
.interaction-field[hidden]{ display:none; }
.interaction-field span small{ margin-left:.3rem; color:var(--ink-3); font-size:.72rem; }
.interaction-field input,.interaction-field textarea,.owner-field input{ width:100%; min-height:2.8rem; padding:.65rem .75rem; border:1px solid var(--rule); border-radius:0; outline:0; background:var(--paper); color:var(--ink); font:inherit; font-size:.94rem; letter-spacing:.02em; }
.interaction-field textarea{ min-height:10rem; resize:vertical; line-height:1.75; }
.interaction-field input:focus,.interaction-field textarea:focus,.owner-field input:focus{ border-color:var(--zhu-deep); box-shadow:0 0 0 2px color-mix(in srgb,var(--zhu-deep) 14%,transparent); }
.interaction-field input::placeholder,.interaction-field textarea::placeholder{ color:var(--ink-3); opacity:.75; }
.interaction-visibility{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:1.2rem 0 0; padding:0; border:0; }
.interaction-visibility[hidden]{ display:none; }
.interaction-visibility legend{ margin-bottom:.55rem; color:var(--ink-2); font-size:.86rem; }
.interaction-visibility label{ display:flex; align-items:flex-start; gap:.55rem; min-height:4.5rem; padding:.7rem; border:1px solid var(--rule); cursor:pointer; }
.interaction-visibility label:has(input:checked){ border-color:var(--zhu-deep); background:var(--paper-2); }
.interaction-visibility input{ margin:.3rem 0 0; accent-color:var(--zhu-deep); }
.interaction-visibility label span{ color:var(--ink); font-size:.85rem; }
.interaction-visibility label small{ display:block; margin-top:.2rem; color:var(--ink-3); font-size:.72rem; line-height:1.5; }
.interaction-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.interaction-help{ margin:1.1rem 0 .7rem; color:var(--ink-3); font-size:.77rem; line-height:1.7; }
.interaction-actions{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.interaction-actions button,.owner-actions button{ min-height:2.85rem; padding:.55rem 1rem; border:1px solid var(--zhu-deep); background:var(--zhu-deep); color:var(--paper); font:inherit; font-size:.85rem; cursor:pointer; }
.interaction-actions button:hover,.owner-actions button:hover{ background:var(--ink); border-color:var(--ink); }
.interaction-actions button:focus-visible,.owner-actions button:focus-visible{ outline:2px solid var(--zhu-deep); outline-offset:3px; }
.interaction-actions button:disabled{ opacity:.55; cursor:wait; }
.interaction-actions #cancel-reply{ background:transparent; color:var(--ink-2); border-color:var(--rule); }
.interaction-actions #cancel-reply[hidden]{ display:none; }
.interaction-status{ min-height:1.5rem; margin:.75rem 0 0; color:var(--ink-2); font-size:.82rem; }
.interaction-status[data-state="error"]{ color:var(--zhu-deep); }
.interaction-status[data-state="success"]{ color:var(--ink); }
.interaction-feed-note{ margin:.75rem 0 1rem; color:var(--ink-3); font-size:.83rem; line-height:1.7; }
.interaction-list{ display:grid; gap:.75rem; }
.interaction-loading,.interaction-empty,.interaction-error{ margin:0; padding:2rem 1.2rem; border:1px solid var(--rule); color:var(--ink-3); font-size:.88rem; text-align:center; }
.interaction-message{ padding:1.05rem 1.2rem; border:1px solid var(--rule); background:var(--paper); }
.interaction-message-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.interaction-message-head strong{ color:var(--ink); font-family:var(--font-head); font-size:1.02rem; font-weight:400; }
.interaction-message-head time{ color:var(--ink-3); font-size:.7rem; white-space:nowrap; }
.interaction-message-context{ margin:.45rem 0 0; color:var(--zhu-deep); font-size:.78rem; }
.interaction-message-context a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.interaction-message-text{ margin:.6rem 0 0; color:var(--ink-2); font-size:.94rem; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.interaction-message-reply{ display:inline-flex; min-height:2.3rem; align-items:center; margin-top:.6rem; padding:0; border:0; background:none; color:var(--zhu-deep); font:inherit; font-size:.78rem; cursor:pointer; }
.interaction-message-reply:hover{ text-decoration:underline; }
.interaction-replies{ display:grid; gap:.55rem; margin:.8rem 0 0 1rem; padding-left:.9rem; border-left:2px solid var(--paper-3); }
.interaction-replies .interaction-message{ padding:.8rem .9rem; background:color-mix(in srgb,var(--paper) 70%,var(--paper-2)); }
.interaction-footer{ display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--rule); color:var(--ink-3); font-size:.78rem; }
.interaction-footer a{ color:var(--zhu-deep); text-decoration:none; }
.interaction-footer a:hover{ text-decoration:underline; }
.owner-panel{ max-width:35rem; padding:1.5rem; border:1px solid var(--rule); background:var(--paper); }
.owner-field{ display:grid; gap:.5rem; margin-top:1rem; color:var(--ink-2); font-size:.87rem; }
.owner-actions{ display:flex; gap:.65rem; margin-top:1rem; }
.owner-list{ display:grid; gap:.8rem; margin-top:1.4rem; }
.owner-private{ border-color:var(--zhu-deep); }
.owner-delete{ margin-top:.75rem; min-height:2rem; border:1px solid var(--rule); background:transparent; color:var(--zhu-deep); cursor:pointer; }
@media(max-width:850px){ .interaction-layout{ grid-template-columns:1fr; } .interaction-compose{ max-width:42rem; } }
@media(max-width:520px){ .interaction-main{ width:min(100% - 2rem,40rem); } .interaction-bar{ min-height:3.8rem; } .interaction-brand small{ display:none; } .interaction-hero{ padding:1.6rem 0 1.4rem; } .interaction-field-row,.interaction-visibility{ grid-template-columns:1fr; } .interaction-compose{ padding:1rem; } .interaction-footer{ flex-direction:column; } }
@media(prefers-reduced-motion:reduce){ .interaction-switch a{ transition:none; } }

.interaction-hub .interaction-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.interaction-hub .interaction-door h2{font:400 2rem/1.5 var(--font-head);margin:.8rem 0}.interaction-hub .interaction-door{min-height:14rem;background:rgba(245,244,231,.65)}@media(max-width:600px){.interaction-hub .interaction-doors{grid-template-columns:1fr}.interaction-hub .interaction-door{min-height:11rem}}

/* Quiet, legible doorways in the scroll */
.interaction-door{position:relative;border-radius:3px;border-top:1px solid currentColor;background:linear-gradient(135deg,rgba(241,244,229,.83),rgba(230,239,231,.6));transition:transform .2s ease}
.interaction-door:hover{transform:translateY(-3px)}
.interaction-door a::before{content:"";position:absolute;inset:0;z-index:1}.interaction-door:focus-within{outline:2px solid #7b3733;outline-offset:4px}
.interaction-door h2,.interaction-door h3{color:#233e38}.interaction-door p{color:#344a43}
.interaction-door-no{color:#7d4639}.interaction-hub .interaction-door{background:linear-gradient(135deg,rgba(241,244,229,.83),rgba(230,239,231,.6))}
.letter-privacy{padding:12px 0;border-bottom:1px solid var(--rule);color:var(--zhu-deep);font-size:.85rem}
.letter-explanation{padding:1.4rem;border-left:1px solid var(--rule)}.letter-explanation .interaction-feed-note{font-size:1rem;line-height:2.2}
@media(prefers-reduced-motion:reduce){.interaction-door{transition:none}.interaction-door:hover{transform:none}}