/* Scoped component styles. Load AFTER your existing Bootstrap/site CSS. */
.tn-editor { --tn-green:#3e6248; --tn-soft:#edf3eb; --tn-line:#d9e2d6; color:#29382d; font-family:inherit; }
.tn-editor *, .tn-editor *::before, .tn-editor *::after { box-sizing:border-box; }
.tn-editor [hidden] { display:none!important; }
.tn-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.tn-heading h3 { margin:0; font:1.35rem/1.3 Georgia,serif; color:#29382d; }
.tn-kicker { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:#687867; }
.tn-help { margin:0 0 18px; color:#647064; font-size:.84rem; line-height:1.6; }
.tn-list { border:1px solid var(--tn-line); border-radius:10px; overflow:hidden; background:#fff; }
.tn-row { display:grid; grid-template-columns:30px minmax(0,1fr) 44px; gap:8px; align-items:center; padding:10px 8px 10px 12px; }
.tn-row + .tn-row { border-top:1px solid #e9eee6; }
.tn-number { display:flex; align-items:center; justify-content:center; min-width:28px; height:28px; border-radius:50%; color:var(--tn-green); background:var(--tn-soft); font-size:.78rem; font-weight:600; }
.tn-editor .tn-input { min-width:0; width:100%; min-height:44px; padding:10px 12px; border:1px solid #dde3d9; border-radius:6px; background:#fff; color:#29382d; font:inherit; font-size:16px; line-height:1.4; }
.tn-input::placeholder { color:#879184; }
.tn-remove { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:6px; background:transparent; color:#798475; cursor:pointer; }
.tn-remove:hover { color:#884d3e; background:#f8eee9; }
.tn-remove svg { width:17px; height:17px; }
.tn-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 14px; padding:7px 0; }
.tn-editor .tn-link { min-height:44px; padding:8px 2px; border:0; background:transparent; color:var(--tn-green); font:inherit; font-size:.83rem; font-weight:600; text-decoration:underline; text-decoration-color:#bdcdb8; text-underline-offset:4px; cursor:pointer; }
.tn-link:hover { text-decoration-color:currentColor; }
.tn-editor input:focus-visible, .tn-editor textarea:focus-visible, .tn-editor button:focus-visible { outline:2px solid var(--tn-green); outline-offset:2px; box-shadow:0 0 0 4px #3e624815; }
.tn-paste { margin:4px 0 16px; padding:16px; border:1px solid var(--tn-line); background:#f5f8f1; border-radius:8px; }
.tn-paste label { font-size:.9rem; font-weight:600; }
.tn-paste p { margin:6px 0 12px; font-size:.8rem; line-height:1.5; color:#647064; }
.tn-editor textarea { width:100%; padding:12px; border:1px solid var(--tn-line); border-radius:6px; background:white; font:inherit; font-size:16px; line-height:1.6; resize:vertical; }
.tn-paste-actions { display:flex; align-items:center; gap:16px; margin-top:10px; }
.tn-editor .tn-button { min-height:44px; padding:10px 18px; background:var(--tn-green); color:#fff; border:1px solid var(--tn-green); border-radius:6px; font:inherit; font-size:.85rem; cursor:pointer; }
.tn-paste .tn-paste-error { color:#934a35; }
.tn-feedback { padding:14px 16px; border-radius:8px; background:var(--tn-soft); }
.tn-count { margin:0; color:var(--tn-green); font-size:.83rem; font-weight:600; }
.tn-hint { margin:5px 0 0; color:#60705e; font-size:.77rem; line-height:1.6; }
.tn-undo { margin-top:8px; color:#647064; font-size:.8rem; }
.tn-keyboard { margin:12px 0 0; color:#748070; font-size:.73rem; }
@media(max-width:400px) { .tn-kicker { display:none; } .tn-row { gap:6px; padding-left:8px; grid-template-columns:26px minmax(0,1fr) 44px; } .tn-number { min-width:26px; height:26px; } }
.tn-editor .tn-fields { min-width:0; }
.tn-editor .tn-field label { display:block; margin-bottom:5px; font-size:.78rem; font-weight:600; color:#50614d; }
.tn-editor[data-kind="names"] .tn-field label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tn-editor[data-kind="stories"] .tn-fields { display:grid; gap:12px; }
.tn-editor[data-kind="stories"] .tn-row { align-items:start; padding-top:16px; padding-bottom:16px; }
.tn-editor[data-kind="stories"] .tn-number { margin-top:25px; }
.tn-editor[data-kind="stories"] .tn-remove { margin-top:20px; }
.tn-editor[data-kind="guests"] .tn-fields { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:12px; }
.tn-editor[data-kind="guests"] .tn-number { margin-top:23px; }
.tn-editor[data-kind="guests"] .tn-remove { margin-top:23px; }
.tn-modal .modal-content { border:1px solid #d9e2d6; border-radius:16px; background:#fffefa; color:#29382d; }
.tn-modal .modal-header { background:#edf3eb; border-bottom:1px solid #d9e2d6; padding:22px 26px; }
.tn-modal .modal-title { font:1.65rem Georgia,serif; }
.tn-modal-eyebrow { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:#62725c; margin:0 0 6px; }
.tn-modal .modal-body { padding:24px 26px; }
.tn-modal .modal-footer { padding:14px 26px; border-top:1px solid #d9e2d6; background:#fffefa; }
.tn-modal .tn-save-note { flex:1 1 220px; font-size:.75rem; line-height:1.5; color:#66745f; margin-right:12px; }
.tn-modal .btn-close { min-width:24px; min-height:24px; padding:10px; }
@media(max-width:575.98px) { .tn-modal .modal-content { border:0; border-radius:0; } .tn-modal .modal-header,.tn-modal .modal-body,.tn-modal .modal-footer { padding:16px; } .tn-editor[data-kind="guests"] .tn-fields { grid-template-columns:minmax(0,1fr); gap:8px; } .tn-modal .tn-save-note { flex-basis:100%; margin:0 0 8px; } }