/* * NHAR Application Manager — UI styles, shared by the wp-admin pages and * the front-end shortcode ([nhar_applications]) reviewers use. * * Fixed light/white palette by design — no dark-mode variant. Every class * and custom property is prefixed nhar- / --nhar- so nothing here can * collide with WordPress admin's own styles, a theme's front-end styles, * or another plugin's. */ #nhar-app{ --nhar-bg:#FFFFFF; --nhar-surface:#FFFFFF; --nhar-surface-2:#F7F6F2; --nhar-ink:#1E2624; --nhar-ink-soft:#5B6360; --nhar-ink-faint:#8A9390; --nhar-border:#E2DFD5; --nhar-border-strong:#CFCABC; --nhar-accent:#2F6459; --nhar-accent-strong:#1F4B42; --nhar-accent-soft:#DCEAE6; --nhar-accent-contrast:#FFFFFF; --nhar-good:#3E7D3A; --nhar-good-soft:#E4F2E1; --nhar-warn:#A9781F; --nhar-warn-soft:#F5EAD4; --nhar-danger:#B14434; --nhar-danger-soft:#F6E2DE; --nhar-neutral:#8A8378; --nhar-neutral-soft:#EFEBE3; --nhar-shadow: 0 1px 2px rgba(30,38,36,.06), 0 8px 24px -12px rgba(30,38,36,.18); --nhar-focus: #2F6459; } #nhar-app *{box-sizing:border-box;} #nhar-app{ background:var(--nhar-bg); color:var(--nhar-ink); font-family:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; line-height:1.5; padding:24px 4px 64px; } /* wp-admin gives #wpbody-content its own side padding — bleed under it so the panel lines up with the rest of the admin screen. WordPress stamps "wp-admin" on for every backend screen and never on the front end, so this rule only ever applies inside wp-admin. */ body.wp-admin #nhar-app{ margin:0 -20px; padding:22px 24px 64px; } #nhar-app h1,#nhar-app h2,#nhar-app h3{font-family:"Fraunces","Iowan Old Style",Georgia,serif;text-wrap:balance;margin:0;} #nhar-app .nhar-mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;} #nhar-app a{color:inherit;} #nhar-app button{font-family:inherit;font-size:inherit;} #nhar-app select,#nhar-app input[type=text],#nhar-app textarea{font-family:inherit;font-size:inherit;color:var(--nhar-ink);} #nhar-app :focus-visible{outline:2px solid var(--nhar-focus);outline-offset:2px;} /* Widened (was 1180px) per reviewer feedback that the list view had too much dead margin on wide screens, squishing the data columns. */ #nhar-app .nhar-shell{max-width:1640px;margin:0 auto;} #nhar-app .nhar-topbar{ display:flex;align-items:baseline;justify-content:space-between;gap:24px; margin-bottom:18px;flex-wrap:wrap; } #nhar-app .nhar-brand{display:flex;align-items:baseline;gap:10px;} #nhar-app .nhar-brand h1{font-size:24px;font-weight:600;letter-spacing:.2px;} #nhar-app .nhar-brand .nhar-org{color:var(--nhar-ink-faint);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;} #nhar-app .nhar-tabs{display:flex;gap:4px;align-items:flex-end;margin-top:6px;flex-wrap:wrap;} #nhar-app .nhar-tab{ appearance:none;border:1px solid var(--nhar-border);border-bottom:none; background:var(--nhar-surface-2);color:var(--nhar-ink-soft); padding:9px 16px 8px;border-radius:8px 8px 0 0; font:inherit;font-weight:600;font-size:13px;cursor:pointer;position:relative;top:1px; text-decoration:none;display:inline-block; } #nhar-app .nhar-tab .nhar-count{ font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:11px; color:var(--nhar-ink-faint);margin-left:6px; } #nhar-app .nhar-tab.is-active{ background:var(--nhar-surface);color:var(--nhar-ink); border-color:var(--nhar-border-strong);box-shadow:0 -1px 0 var(--nhar-surface); } #nhar-app .nhar-tab.is-active .nhar-count{color:var(--nhar-accent);} #nhar-app .nhar-tab:hover:not(.is-active){color:var(--nhar-ink);} #nhar-app .nhar-panel{ background:var(--nhar-surface);border:1px solid var(--nhar-border-strong); border-radius:0 10px 10px 10px;box-shadow:var(--nhar-shadow); padding:18px 20px 22px; } /* ---------- list toolbar ---------- */ #nhar-app .nhar-list-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;} #nhar-app .nhar-search{ display:flex;align-items:center;gap:8px;border:1px solid var(--nhar-border-strong);border-radius:7px; padding:7px 10px;background:var(--nhar-surface-2);flex:1 1 220px;max-width:320px; } #nhar-app .nhar-search svg{flex:none;color:var(--nhar-ink-faint);} #nhar-app .nhar-search input{border:none;background:transparent;outline:none;width:100%;color:var(--nhar-ink);} #nhar-app .nhar-search input::placeholder{color:var(--nhar-ink-faint);} #nhar-app .nhar-seg{display:flex;border:1px solid var(--nhar-border-strong);border-radius:7px;overflow:hidden;} #nhar-app .nhar-seg button,#nhar-app .nhar-seg a{ border:none;background:var(--nhar-surface-2);color:var(--nhar-ink-soft); padding:7px 13px;cursor:pointer;font-weight:600;font-size:12.5px; border-right:1px solid var(--nhar-border-strong); text-decoration:none;display:inline-block;line-height:1.4; } #nhar-app .nhar-seg button:last-child,#nhar-app .nhar-seg a:last-child{border-right:none;} #nhar-app .nhar-seg button[aria-pressed="true"],#nhar-app .nhar-seg a[aria-pressed="true"]{background:var(--nhar-accent);color:var(--nhar-accent-contrast);} #nhar-app .nhar-spacer{flex:1;} #nhar-app .nhar-result-count{color:var(--nhar-ink-faint);font-size:12.5px;} #nhar-app select.nhar-select{ border:1px solid var(--nhar-border-strong);border-radius:6px;background:var(--nhar-surface-2); padding:6px 8px;color:var(--nhar-ink); } /* ---------- table ---------- */ #nhar-app table.nhar-list{width:100%;border-collapse:collapse;} #nhar-app table.nhar-list th{ text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--nhar-ink-faint);font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--nhar-border-strong); white-space:nowrap; } #nhar-app table.nhar-list td{padding:9px 10px;border-bottom:1px solid var(--nhar-border);vertical-align:middle;} #nhar-app table.nhar-list tbody tr{cursor:pointer;transition:background .1s ease;} #nhar-app table.nhar-list tbody tr:hover{background:var(--nhar-surface-2);} #nhar-app table.nhar-list tbody tr:last-child td{border-bottom:none;} #nhar-app .nhar-cell-name{font-weight:600;} #nhar-app .nhar-cell-sub{color:var(--nhar-ink-soft);font-size:12.5px;margin-top:1px;} #nhar-app .nhar-cell-contact{color:var(--nhar-ink-soft);font-size:12.5px;} #nhar-app .nhar-tags{display:flex;flex-wrap:wrap;gap:4px;max-width:220px;} #nhar-app .nhar-tag{ background:var(--nhar-neutral-soft);color:var(--nhar-ink-soft);border-radius:5px; padding:2px 6px;font-size:11px;font-weight:600;white-space:nowrap; border:1px solid transparent;font-family:inherit;cursor:pointer;transition:background .1s ease,color .1s ease; } #nhar-app .nhar-tag:hover{border-color:var(--nhar-border-strong);} #nhar-app .nhar-tag.is-on{background:var(--nhar-accent-soft);color:var(--nhar-accent-strong);} #nhar-app .nhar-tag.is-on:hover{border-color:var(--nhar-accent);} #nhar-app .nhar-pri{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:11px;letter-spacing:.03em;} #nhar-app .nhar-pri.HIGH{color:var(--nhar-danger);} #nhar-app .nhar-pri.MED{color:var(--nhar-warn);} #nhar-app .nhar-pri.LOW{color:var(--nhar-ink-faint);} #nhar-app .nhar-pri .nhar-dot{width:6px;height:6px;border-radius:50%;background:currentColor;} #nhar-app .nhar-pill{ display:inline-flex;align-items:center;gap:5px;border-radius:20px; padding:3px 10px 3px 8px;font-size:11.5px;font-weight:600;white-space:nowrap; } #nhar-app .nhar-pill .nhar-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;} #nhar-app .nhar-pill.s-neutral{background:var(--nhar-neutral-soft);color:var(--nhar-ink-soft);} #nhar-app .nhar-pill.s-warn{background:var(--nhar-warn-soft);color:var(--nhar-warn);} #nhar-app .nhar-pill.s-good{background:var(--nhar-good-soft);color:var(--nhar-good);} #nhar-app .nhar-pill.s-danger{background:var(--nhar-danger-soft);color:var(--nhar-danger);} #nhar-app .nhar-pill .nhar-mail{opacity:.85;} #nhar-app select.nhar-inline-select{ border:1px solid transparent;background:transparent;color:var(--nhar-ink); border-radius:6px;padding:5px 6px;max-width:168px;cursor:pointer; } #nhar-app select.nhar-inline-select:hover{border-color:var(--nhar-border-strong);background:var(--nhar-surface-2);} #nhar-app input.nhar-inline-text{ border:1px solid transparent;background:transparent;color:var(--nhar-ink); border-radius:6px;padding:5px 6px;width:100%;max-width:170px; } #nhar-app input.nhar-inline-text:hover,#nhar-app input.nhar-inline-text:focus{border-color:var(--nhar-border-strong);background:var(--nhar-surface-2);} #nhar-app input.nhar-inline-text::placeholder{color:var(--nhar-ink-faint);} /* A reviewer-entered Alt pet gets its own highlight so it stands out in the list at a glance, same idea as the Priority/Status pills. */ #nhar-app input.nhar-inline-text.has-value{ border-color:var(--nhar-warn);background:var(--nhar-warn-soft);color:var(--nhar-warn);font-weight:600; } #nhar-app input.nhar-inline-text.has-value:hover,#nhar-app input.nhar-inline-text.has-value:focus{border-color:var(--nhar-warn);} #nhar-app .nhar-closed-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--nhar-ink-soft);font-size:12.5px;} #nhar-app .nhar-closed-toggle input{accent-color:var(--nhar-accent);width:15px;height:15px;cursor:pointer;} /* Bigger and highlighted in yellow per reviewer feedback — the plain faint icon was easy to miss in the last (actions) list column. */ #nhar-app .nhar-quicknote-trigger{ display:inline-flex;align-items:center;justify-content:center;vertical-align:middle; border:1px solid #E9D879;background:#FFF3B0;color:#8A6D00;cursor:pointer; padding:6px;border-radius:7px;line-height:0; } #nhar-app .nhar-quicknote-trigger:hover{background:#FCE688;border-color:#D8BE3E;color:#5F4A00;} #nhar-app .nhar-saved-flash{ display:inline-block;margin-left:6px;color:var(--nhar-good);font-size:11px;font-weight:700; opacity:0;transition:opacity .25s ease; } #nhar-app .nhar-saved-flash.show{opacity:1;} #nhar-app .nhar-error-flash{ display:inline-block;margin-left:6px;color:var(--nhar-danger);font-size:11px;font-weight:700; opacity:0;transition:opacity .25s ease; } #nhar-app .nhar-error-flash.show{opacity:1;} #nhar-app .nhar-empty-row td{padding:36px 10px;text-align:center;color:var(--nhar-ink-faint);} #nhar-app .nhar-pagination{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:14px;font-size:12.5px;color:var(--nhar-ink-soft);} #nhar-app .nhar-pagination a, #nhar-app .nhar-pagination span.disabled{ border:1px solid var(--nhar-border-strong);border-radius:6px;padding:5px 10px;text-decoration:none;color:var(--nhar-ink); } #nhar-app .nhar-pagination span.disabled{opacity:.4;pointer-events:none;} /* ---------- detail view ---------- */ #nhar-app .nhar-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;} /* Sticky at the same top offset already proven safe for .nhar-sidebar below (works underneath wp-admin's fixed admin bar, and on the front-end shortcode page) — per the user's request that "back to list" not require scrolling back up to find, on a page that can run long once notes pile up. */ #nhar-app .nhar-back-btn{ display:inline-flex;align-items:center;gap:6px;background:var(--nhar-bg);border:none;color:var(--nhar-accent-strong); font-weight:600;cursor:pointer;padding:6px 8px;margin:-6px 0 10px -8px;font-size:13px;text-decoration:none; position:sticky;top:32px;z-index:40;border-radius:6px;box-shadow:0 1px 2px rgba(30,38,36,.05); } #nhar-app .nhar-back-btn:hover{text-decoration:underline;background:var(--nhar-surface-2);} #nhar-app .nhar-detail-title h2{font-size:22px;} #nhar-app .nhar-detail-title .nhar-meta{color:var(--nhar-ink-faint);font-size:12.5px;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;} #nhar-app .nhar-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;} @media (max-width:880px){#nhar-app .nhar-detail-grid{grid-template-columns:1fr;}} #nhar-app .nhar-app-col{} #nhar-app .nhar-app-section{ border:1px solid var(--nhar-border);border-radius:9px;background:var(--nhar-surface-2); padding:14px 16px 16px;margin-bottom:14px; } #nhar-app .nhar-app-section h3{font-size:14px;font-weight:600;color:var(--nhar-accent-strong);margin-bottom:10px;} #nhar-app .nhar-app-section .nhar-join-note{font-size:11.5px;color:var(--nhar-ink-faint);margin:-6px 0 12px;font-style:italic;} #nhar-app .nhar-field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;} @media (max-width:560px){#nhar-app .nhar-field-grid{grid-template-columns:1fr;}} #nhar-app .nhar-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--nhar-ink-faint);margin-bottom:2px;} #nhar-app .nhar-field .nhar-val{color:var(--nhar-ink);} #nhar-app .nhar-field .nhar-val.long{line-height:1.5;white-space:pre-wrap;} #nhar-app .nhar-field.span2{grid-column:1 / -1;} #nhar-app .nhar-sidebar{position:sticky;top:32px;display:flex;flex-direction:column;gap:14px;} #nhar-app .nhar-card{ border:1px solid var(--nhar-border-strong);border-radius:9px;background:var(--nhar-surface); padding:14px 16px 16px;box-shadow:var(--nhar-shadow); } #nhar-app .nhar-card h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--nhar-ink-faint);margin-bottom:12px;font-family:"Archivo";font-weight:700;} #nhar-app .nhar-form-row{margin-bottom:12px;} #nhar-app .nhar-form-row:last-child{margin-bottom:0;} #nhar-app .nhar-form-row label{display:block;font-size:12px;font-weight:600;color:var(--nhar-ink-soft);margin-bottom:5px;} #nhar-app .nhar-form-row select,#nhar-app .nhar-form-row input[type=text]{ width:100%;border:1px solid var(--nhar-border-strong);border-radius:6px;background:var(--nhar-surface-2); padding:8px 9px; } #nhar-app .nhar-segrow{display:flex;border:1px solid var(--nhar-border-strong);border-radius:6px;overflow:hidden;} #nhar-app .nhar-segrow button{flex:1;border:none;background:var(--nhar-surface-2);color:var(--nhar-ink-soft);padding:7px 0;font-weight:700;font-size:12px;cursor:pointer;border-right:1px solid var(--nhar-border-strong);} #nhar-app .nhar-segrow button:last-child{border-right:none;} #nhar-app .nhar-segrow button[aria-pressed="true"].HIGH{background:var(--nhar-danger);color:#fff;} #nhar-app .nhar-segrow button[aria-pressed="true"].MED{background:var(--nhar-warn);color:#fff;} #nhar-app .nhar-segrow button[aria-pressed="true"].LOW{background:var(--nhar-ink-faint);color:#fff;} #nhar-app .nhar-segrow button[aria-pressed="true"].NONE{background:var(--nhar-ink-faint);color:#fff;} #nhar-app .nhar-checks{display:flex;flex-direction:column;gap:7px;} #nhar-app .nhar-checks label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--nhar-ink);cursor:pointer;} #nhar-app .nhar-checks input{accent-color:var(--nhar-accent);width:15px;height:15px;} #nhar-app .nhar-email-hint{ display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:11.5px; color:var(--nhar-accent-strong);background:var(--nhar-accent-soft);border-radius:6px;padding:7px 9px;line-height:1.4; } /* Brick-colored reminder that Reviewer/Priority/Alt/Status/Progress are a batch that only saves on the Update click below it — reviewers were missing this and assuming those fields autosaved like Closed does. */ #nhar-app .nhar-update-hint{ color:var(--nhar-danger);background:var(--nhar-danger-soft);border-radius:6px; padding:8px 10px;font-size:11.5px;font-weight:600;line-height:1.4;margin-bottom:10px; } #nhar-app .nhar-closed-card{display:flex;align-items:center;justify-content:space-between;gap:10px;} #nhar-app .nhar-closed-card .nhar-txt{font-size:12.5px;color:var(--nhar-ink-soft);} #nhar-app .nhar-switch{position:relative;width:38px;height:22px;flex:none;} #nhar-app .nhar-switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;} #nhar-app .nhar-switch .nhar-track{position:absolute;inset:0;background:var(--nhar-border-strong);border-radius:20px;transition:background .15s ease;} #nhar-app .nhar-switch .nhar-knob{ position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--nhar-surface);border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease; } #nhar-app .nhar-switch input:checked + .nhar-track{background:var(--nhar-accent);} #nhar-app .nhar-switch input:checked + .nhar-track + .nhar-knob{transform:translateX(16px);} #nhar-app .nhar-autosave{font-size:11px;color:var(--nhar-good);font-weight:600;opacity:0;transition:opacity .3s ease;margin-top:8px;} #nhar-app .nhar-autosave.show{opacity:1;} #nhar-app .nhar-autosave.is-error{color:var(--nhar-danger);} /* full-width touchpoint notes, below the app/sidebar columns */ #nhar-app .nhar-notes-full{margin-top:18px;} #nhar-app .nhar-notes-full > h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--nhar-ink-faint);font-weight:700;margin-bottom:10px;} /* One column, newest at the bottom (chronological, matching the composer right below) — a multi-column grid made longer notes hard to read and scattered a conversation's notes out of order across columns. */ #nhar-app .nhar-notes-history{display:flex;flex-direction:column;gap:10px;max-width:760px;} #nhar-app .nhar-note-card{ border:1px solid var(--nhar-border);border-left:3px solid var(--nhar-border-strong);border-radius:7px; background:var(--nhar-surface-2);padding:10px 12px; } #nhar-app .nhar-note-card.is-system{border-left-color:var(--nhar-accent);} #nhar-app .nhar-note-card .nhar-note-meta{font-size:10.5px;color:var(--nhar-ink-faint);margin-bottom:4px;display:flex;gap:6px;} #nhar-app .nhar-note-card .nhar-note-body{font-size:12.5px;color:var(--nhar-ink);line-height:1.5;white-space:pre-wrap;} #nhar-app .nhar-note-card.is-system .nhar-note-body{color:var(--nhar-ink-soft);font-style:italic;} #nhar-app .nhar-notes-empty{color:var(--nhar-ink-faint);font-size:12.5px;} /* note composer, docked to the bottom of the viewport so the application stays visible (scrollable) above it while typing */ #nhar-app .nhar-note-dock{ position:fixed;left:0;right:0;bottom:0;z-index:9999; background:var(--nhar-surface);border-top:1px solid var(--nhar-border-strong); box-shadow:0 -10px 26px -14px rgba(20,26,24,.28); } #nhar-app .nhar-note-dock-inner{max-width:1640px;margin:0 auto;padding:12px 24px 16px;} #nhar-app .nhar-note-dock-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;} #nhar-app .nhar-note-dock-head h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--nhar-ink-faint);font-weight:700;} #nhar-app .nhar-note-dock-row{display:flex;gap:12px;align-items:flex-end;} /* Bigger and highlighted per reviewer feedback — the composer was easy to miss entirely against the rest of the (mostly white/cream) panel. */ #nhar-app .nhar-note-dock-row textarea{ flex:1;border:1.5px solid #E9D879;background:#FFFAE0;color:var(--nhar-ink); padding:14px 16px;resize:vertical;min-height:120px;max-height:300px;line-height:1.55;font-size:14.5px; border-radius:8px;box-shadow:0 1px 3px rgba(180,150,20,.12); } #nhar-app .nhar-note-dock-row textarea:focus{border-color:#D8BE3E;background:#FFF9CC;} #nhar-app .nhar-note-dock-row textarea::placeholder{color:#9C8F55;} #nhar-app .nhar-note-dock-side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:none;width:220px;} #nhar-app .nhar-note-email-row{display:flex;flex-direction:column;gap:5px;} #nhar-app .nhar-note-email-row label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--nhar-ink-soft);cursor:pointer;text-align:left;} #nhar-app .nhar-note-email-row input{accent-color:var(--nhar-accent);flex:none;} #nhar-app .nhar-note-dock-side .nhar-btn{width:100%;} #nhar-app .nhar-note-spacer{height:150px;} /* dynamic height set by JS to match the dock */ #nhar-app .nhar-btn{ border:none;border-radius:6px;padding:8px 14px;font-weight:600;font-size:12.5px;cursor:pointer; background:var(--nhar-accent);color:var(--nhar-accent-contrast); } #nhar-app .nhar-btn:hover{background:var(--nhar-accent-strong);} #nhar-app .nhar-btn.is-ghost{background:transparent;color:var(--nhar-accent-strong);border:1px solid var(--nhar-border-strong);} #nhar-app .nhar-btn.is-ghost:hover{background:var(--nhar-accent-soft);} #nhar-app .nhar-btn:disabled{opacity:.5;cursor:default;} /* ---------- quick-note popup (list page) ---------- */ #nhar-app .nhar-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;} #nhar-app .nhar-modal[hidden]{display:none;} #nhar-app .nhar-modal-backdrop{position:absolute;inset:0;background:rgba(20,26,24,.42);} #nhar-app .nhar-modal-card{ position:relative;background:var(--nhar-surface);border-radius:10px;border:1px solid var(--nhar-border-strong); box-shadow:var(--nhar-shadow);padding:18px 20px 16px;width:100%;max-width:420px; } #nhar-app .nhar-modal-card h3{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:baseline;gap:8px;} #nhar-app .nhar-modal-card h3 .nhar-mono{font-size:11.5px;color:var(--nhar-ink-faint);font-weight:400;} #nhar-app .nhar-modal-card textarea{ width:100%;border:1px solid var(--nhar-border-strong);border-radius:7px;background:var(--nhar-surface-2); padding:10px 12px;resize:vertical;min-height:96px;line-height:1.5;color:var(--nhar-ink); } #nhar-app .nhar-modal-error{color:var(--nhar-danger);font-size:12px;margin-top:8px;} #nhar-app .nhar-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;} /* ---------- AJAX navigation ---------- */ #nhar-app.is-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease .1s;} #nhar-app .nhar-foot-note{margin-top:26px;font-size:11.5px;color:var(--nhar-ink-faint);text-align:center;} #nhar-app .nhar-notice{ border-radius:8px;padding:10px 14px;font-size:12.5px;margin-bottom:14px; background:var(--nhar-accent-soft);color:var(--nhar-accent-strong);border:1px solid var(--nhar-border); } #nhar-app .nhar-notice.is-error{background:var(--nhar-danger-soft);color:var(--nhar-danger);}