/* TitleAgent AI portal — design system extracted from the TitleAgent Portal
   mockup. Editorial, square-cornered, evidence-first: IBM Plex Sans body,
   Plex Mono for identifiers/numbers, Plex Serif for quoted source text.
   Tones: teal #0E5C55 (verified/healthy), amber #8F620C (attention),
   oxide #8E2A24 (critical/contradicted), violet #453C8C (agent/governed).
   Module-specific styles stay inline in that content file — this sheet only
   carries the shared language. */

html, body { margin:0; padding:0; background:#F2F1ED; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
body { font-family:'IBM Plex Sans', system-ui, sans-serif; color:#16181C; font-size:13px; line-height:1.45; }
a { color:#0E5C55; text-decoration:none; }
a:hover { color:#093F3A; text-decoration:underline; }
::selection { background:#FBEAB8; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#CFCCC3; border-radius:0; }
::-webkit-scrollbar-track { background:transparent; }
@keyframes taPulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@keyframes taSpin { to { transform:rotate(360deg) } }

.mono  { font-family:'IBM Plex Mono', monospace; }
.serif { font-family:'IBM Plex Serif', serif; }

/* ---------- application shell ---------- */
.ta-app    { display:flex; min-height:100vh; background:#F2F1ED; }
.ta-side   { width:214px; flex:0 0 214px; background:#14161A; border-right:1px solid #000;
             position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.ta-main   { flex:1; min-width:1100px; display:flex; flex-direction:column; }
.ta-topbar { height:46px; flex:0 0 46px; background:#FFFFFF; border-bottom:1px solid #D8D5CC;
             display:flex; align-items:center; gap:14px; padding:0 16px; position:sticky; top:0; z-index:40; }
.ta-content { padding:16px; }

/* sidebar */
.ta-side-brand { padding:14px 14px 12px; border-bottom:1px solid #2B2F37; }
.ta-side-logo  { width:22px; height:22px; border:1.5px solid #3EA396; display:grid; place-items:center;
                 font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:#3EA396; }
.ta-tenant     { margin-top:10px; padding:6px 8px; background:#1C1F25; border:1px solid #2B2F37;
                 display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.ta-navgroup   { padding:12px 0 2px; }
.ta-navgroup-label { padding:0 14px 6px; font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:#5D646E; }
.ta-nav        { display:flex; align-items:center; gap:8px; padding:5px 14px; font-size:12px; cursor:pointer;
                 color:#9AA1AB; border-left:2px solid transparent; }
.ta-nav:hover  { background:#1C1F25; color:#EDEFF2; text-decoration:none; }
.ta-nav.active { color:#EDEFF2; background:#1C1F25; border-left-color:#3EA396; }
.ta-nav .glyph { font-family:'IBM Plex Mono',monospace; font-size:10px; width:13px; flex:0 0 13px; opacity:.75; }
.ta-nav .lbl   { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-nav .bdg   { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#767D88; }
.ta-nav .bdg.warn { color:#D9A441; }
.ta-nav .bdg.crit { color:#C97A72; }
.ta-side-foot  { margin-top:auto; padding:12px 14px; border-top:1px solid #2B2F37; }

/* topbar atoms */
.ta-search   { display:flex; align-items:center; gap:7px; flex:0 0 380px; height:28px; padding:0 9px;
               background:#F6F5F1; border:1px solid #DFDCD3; cursor:text; }
.ta-search input { border:0; outline:0; background:transparent; flex:1; font-family:inherit;
               font-size:12px; color:#16181C; }
.ta-search input::placeholder { color:#8B9099; }
.ta-scope    { padding:2px 7px; background:#F6F5F1; border:1px solid #DFDCD3; font-size:11px; color:#5B6069; }
.ta-agents-pill { display:flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid #CFE0DC;
               background:#E9F2F0; cursor:pointer; }
.ta-avatar   { width:24px; height:24px; background:#14161A; color:#EDEFF2; display:grid; place-items:center;
               font-family:'IBM Plex Mono',monospace; font-size:10px; }

/* ---------- panels, tables, labels ---------- */
.ta-panel      { background:#FFFFFF; border:1px solid #DFDCD3; }
.ta-panel-hd   { padding:9px 12px; border-bottom:1px solid #E3E1DA; display:flex; align-items:center;
                 justify-content:space-between; gap:8px; }
.ta-panel-title{ font-size:12.5px; font-weight:600; }
.ta-panel-sub  { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8B9099; }
.ta-link       { font-size:11px; color:#0E5C55; cursor:pointer; }
.ta-note       { font-size:10.5px; color:#5B6069; line-height:1.5; }
.ta-label      { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#8B9099; }

/* grid table: set grid-template-columns inline per table (mockup pattern) */
.ta-thead      { display:grid; gap:0; padding:6px 12px; border-bottom:1px solid #E3E1DA; background:#FAF9F6;
                 font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:#8B9099; }
.ta-row        { display:grid; gap:0; padding:8px 12px; border-bottom:1px solid #EFEDE7; align-items:center; }
.ta-row.click  { cursor:pointer; }
.ta-row.click:hover { background:#FAF9F6; }
.ta-row.current{ box-shadow:inset 2px 0 0 #0E5C55; }
.ta-id         { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:#0E5C55; }
.ta-dim        { font-size:10px; color:#8B9099; }
.ta-cell-main  { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-cell-sub   { font-size:10.5px; color:#5B6069; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* KPI strip: 1px gap grid over the border color */
.ta-kpis       { display:grid; gap:1px; background:#DFDCD3; border:1px solid #DFDCD3; }
.ta-kpi        { background:#FFFFFF; padding:10px 12px; }
.ta-kpi .k-label { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#8B9099; height:24px; }
.ta-kpi .k-value { font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; letter-spacing:-1px; }
.ta-kpi .k-unit  { font-size:10.5px; color:#8B9099; }
.ta-kpi .k-sub   { font-size:10.5px; color:#5B6069; margin-top:2px; }

/* ---------- badges / chips / swatches ---------- */
.ta-badge  { display:inline-block; padding:1.5px 6px; background:#F1F0EA; border:1px solid #DFDCD3;
             color:#5B6069; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
             letter-spacing:.04em; white-space:nowrap; }
.ta-chip   { display:inline-block; padding:1.5px 6px; background:#F1F0EA; border:1px solid #DFDCD3;
             color:#5B6069; font-size:10px; font-weight:500; white-space:nowrap; }
.ta-agent-chip { display:inline-flex; align-items:center; gap:4px; padding:1.5px 6px; background:#ECEAF7;
             border:1px solid #D6D2EE; font-size:10px; color:#453C8C; }
.ta-cov    { display:inline-block; width:11px; height:7px; background:#DFDCD3; }
.ta-dot    { display:inline-block; width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.ta-pulse  { animation:taPulse 2s infinite; }

/* ---------- buttons ---------- */
.ta-btn        { display:inline-block; padding:5px 10px; background:#14161A; color:#EDEFF2; font-size:11.5px;
                 font-weight:500; cursor:pointer; border:1px solid #14161A; font-family:inherit; }
.ta-btn:hover  { background:#2B2F37; }
.ta-btn-ghost  { display:inline-block; padding:4px 10px; border:1px solid #DFDCD3; background:#FFFFFF;
                 font-size:11.5px; cursor:pointer; color:#2C3138; font-family:inherit; }
.ta-btn-ghost:hover { border-color:#8B9099; }
.ta-btn-teal   { display:inline-block; padding:5px 10px; border:1px solid #CFE0DC; background:#E3EEEC;
                 color:#0E5C55; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.ta-btn-teal:hover { border-color:#0E5C55; }
.ta-btn-ox     { display:inline-block; padding:5px 10px; border:1px solid #E8C4BE; background:#F9E7E4;
                 color:#8E2A24; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.ta-btn-ox:hover { border-color:#8E2A24; }
.ta-btn-sm     { padding:3px 8px; font-size:10.5px; }
.ta-btn[disabled], .ta-btn-ghost[disabled], .ta-btn-teal[disabled], .ta-btn-ox[disabled]
               { opacity:.45; cursor:not-allowed; }

/* ---------- tabs ---------- */
.ta-tabs   { display:flex; gap:0; overflow-x:auto; }
.ta-tab    { padding:8px 12px; font-size:12px; cursor:pointer; white-space:nowrap; color:#5B6069;
             border-bottom:2px solid transparent; margin-bottom:-1px; }
.ta-tab:hover  { color:#16181C; text-decoration:none; }
.ta-tab.active { color:#16181C; font-weight:600; border-bottom-color:#0E5C55; }
.ta-tab .cnt   { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8B9099; margin-left:5px; }

/* filter pills (files saved views etc.) */
.ta-pill        { padding:4px 9px; border:1px solid #DFDCD3; background:#FFFFFF; font-size:11.5px;
                  cursor:pointer; color:#2C3138; }
.ta-pill.active { border-color:#14161A; background:#14161A; color:#EDEFF2; }
.ta-pill-sm     { padding:2px 7px; border:1px solid #DFDCD3; background:#FAF9F6; font-size:10px;
                  cursor:pointer; color:#5B6069; }
.ta-pill-sm.active { border-color:#14161A; background:#14161A; color:#EDEFF2; }

/* ---------- forms ---------- */
.ta-input, .ta-select, .ta-textarea {
    font-family:inherit; font-size:12px; color:#16181C; background:#FFFFFF;
    border:1px solid #DFDCD3; padding:6px 8px; outline:none; border-radius:0; width:100%;
}
.ta-input:focus, .ta-select:focus, .ta-textarea:focus { border-color:#0E5C55; }
.ta-textarea { resize:vertical; min-height:64px; line-height:1.5; }
.ta-field    { margin-bottom:10px; }
.ta-field > label { display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
    color:#8B9099; margin-bottom:4px; }

/* ---------- modal / drawer / toast (portal.js drives these) ---------- */
.ta-overlay { position:fixed; inset:0; background:rgba(20,22,26,.45); z-index:90; display:none; }
.ta-modal   { position:fixed; top:8vh; left:50%; transform:translateX(-50%); width:640px; max-width:94vw;
              max-height:82vh; overflow-y:auto; background:#FFFFFF; border:1px solid #14161A;
              box-shadow:0 18px 60px rgba(20,22,26,.35); z-index:95; display:none; }
.ta-modal-hd { padding:11px 14px; border-bottom:1px solid #E3E1DA; display:flex; align-items:center;
              justify-content:space-between; position:sticky; top:0; background:#FFFFFF; }
.ta-modal-title { font-size:13.5px; font-weight:600; }
.ta-modal-bd { padding:14px; }
.ta-modal-ft { padding:11px 14px; border-top:1px solid #E3E1DA; display:flex; justify-content:flex-end; gap:8px; }
.ta-x        { cursor:pointer; color:#8B9099; font-size:14px; padding:2px 6px; }
.ta-x:hover  { color:#16181C; }

.ta-drawer  { position:fixed; top:0; right:0; bottom:0; width:560px; max-width:92vw; background:#FFFFFF;
              border-left:1px solid #14161A; box-shadow:-14px 0 50px rgba(20,22,26,.28); z-index:95;
              display:none; overflow-y:auto; }

#ta-toasts  { position:fixed; bottom:18px; right:18px; z-index:120; display:flex; flex-direction:column; gap:8px; }
.ta-toast   { min-width:260px; max-width:420px; background:#14161A; color:#EDEFF2; padding:10px 12px;
              font-size:12px; border-left:3px solid #3EA396; box-shadow:0 10px 30px rgba(20,22,26,.35); }
.ta-toast.err  { border-left-color:#C97A72; }
.ta-toast.warn { border-left-color:#D9A441; }
.ta-toast .t-title { font-weight:600; margin-bottom:2px; }
.ta-toast .t-body  { color:#C9CDD4; font-size:11.5px; }

/* loading */
#ta-loading { position:fixed; inset:0; background:rgba(242,241,237,.6); z-index:110; display:none;
              place-items:center; }
.ta-spinner { width:26px; height:26px; border:3px solid #DFDCD3; border-top-color:#0E5C55;
              border-radius:50%; animation:taSpin .8s linear infinite; }

/* ---------- misc ---------- */
.ta-empty  { padding:26px 16px; text-align:center; color:#8B9099; font-size:12px; }
.ta-kv     { display:flex; gap:8px; font-size:11.5px; padding:4px 0; }
.ta-kv .k  { color:#8B9099; flex:0 0 148px; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding-top:1px; }
.ta-kv .v  { color:#2C3138; flex:1; min-width:0; }
.ta-meter  { height:5px; background:#EFEDE7; position:relative; }
.ta-meter > span { position:absolute; left:0; top:0; bottom:0; background:#0E5C55; }
.ta-quote  { font-family:'IBM Plex Serif',serif; font-size:12.5px; line-height:1.6; color:#2C3138;
             background:#FAF9F6; border-left:2px solid #DFDCD3; padding:8px 12px; }
.ta-code   { font-family:'IBM Plex Mono',monospace; font-size:11px; background:#F6F5F1;
             border:1px solid #DFDCD3; padding:1px 5px; }
.ta-hr     { border:0; border-top:1px solid #E3E1DA; margin:12px 0; }
.ta-login-msg { padding:8px 10px; font-size:12px; border:1px solid #E0C9A8; background:#F8EFDB; color:#8F620C; margin-bottom:12px; }