/* Tokens from the IJG website design system (ijg-website/src/app/globals.css). */
:root { --bg:#f5f2ec; --navy:#0e2841; --navy-950:#081a2e; --surface:#fff; --surface-2:#ede8dc; --raised:#fbf9f3; --fg:#0e2841; --body:#3c5063; --muted:#5c6571; --hair:#e4dfd2; --input:#8a8574; --primary:#004c98; --primary-hover:#003a75; --sky:#4095d1; --sky-300:#7fb8e0; --wash:#f3f7fb; --on-navy:#f5f2ec; --on-navy-muted:rgb(245 242 236 / .74); --down:#c0504d; --pos:#1b6e63; --neg:#a8403d; --caution:#8a5a0b; --serif:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 1rem/1.6 var(--sans); }
[hidden] { display:none !important; }
.wrap { max-width:1200px; margin-inline:auto; padding-inline:max(16px,1.25rem); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; text-wrap:balance; margin:0; }
.eyebrow { margin:0 0 .4rem; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }
.rule { width:56px; height:3px; margin:.7rem 0; background:var(--primary); border-radius:2px; }
.btn { font:600 .9375rem var(--sans); min-height:44px; padding:0 1.25rem; color:#fff; background:var(--primary); border:0; border-radius:.5rem; cursor:pointer; }
.btn:hover { background:var(--primary-hover); }
.btn:disabled { opacity:.55; cursor:default; }
.btn.small { min-height:36px; font-size:.875rem; padding:0 .9rem; }
.btn.out { color:var(--primary); background:transparent; border:1px solid var(--primary); }
.btn.out:hover { background:var(--wash); }
.link { font:inherit; font-size:.875rem; color:inherit; background:none; border:0; text-decoration:underline; cursor:pointer; padding:0; }
input,select,textarea { font:inherit; font-size:.9375rem; color:var(--fg); background:var(--surface); border:1px solid var(--input); border-radius:.5rem; padding:.55rem .7rem; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.top :focus-visible { outline-color:var(--sky-300); }
.error { min-height:1.3em; margin:.5rem 0; color:var(--neg); font-size:.875rem; }
.ok { color:var(--pos); font-size:.875rem; }
.login { min-height:100%; display:grid; place-items:center; padding:1rem; background:linear-gradient(160deg,var(--navy),var(--navy-950)); }
.login-card { width:min(100%,24rem); padding:2rem; display:flex; flex-direction:column; background:var(--surface); border-radius:1.25rem; }
.login-card h1 { font-size:2rem; }
.login-card label { margin-top:.75rem; font-size:.875rem; font-weight:600; }
.top { background:var(--navy); color:var(--on-navy); border-top:3px solid var(--sky); }
.top-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; min-height:60px; padding-block:.4rem; }
.brand { font:400 1.35rem var(--serif); }
.brand em { color:var(--sky-300); }
#nav { display:flex; flex-wrap:wrap; gap:.25rem; flex:1; }
#nav button { font:500 .9375rem var(--sans); color:var(--on-navy-muted); background:none; border:0; border-bottom:2px solid transparent; padding:.4rem .7rem; cursor:pointer; }
#nav button[aria-current=page] { color:var(--on-navy); border-color:var(--sky-300); }
#nav .badge { margin-left:.35rem; padding:0 .4rem; border-radius:99px; color:var(--navy); background:var(--sky-300); font-size:.75rem; font-weight:600; }
.who { display:flex; gap:.75rem; align-items:center; font-size:.875rem; color:var(--on-navy-muted); }
.env { background:var(--wash); border-bottom:1px solid var(--hair); color:var(--body); font-size:.8125rem; padding-block:.5rem; }
.hero { background:linear-gradient(160deg,var(--navy),var(--navy-950)); color:var(--on-navy); padding-block:2rem; }
.hero .eyebrow { color:var(--sky-300); }
.hero h1 { font-size:clamp(2.1rem,4vw,3rem); line-height:1.08; letter-spacing:-.022em; }
.lead { margin:.8rem 0 0; max-width:42em; font-size:1.0625rem; color:var(--on-navy-muted); }
.lead b { color:var(--on-navy); font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:1.25rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid rgb(245 242 236 / .18); }
.stat b { display:block; font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif); color:var(--sky-300); }
.stat span { font-size:.8125rem; color:var(--on-navy-muted); }
.page { display:flex; flex-direction:column; gap:1.25rem; padding-block:1.5rem 3rem; }
.card { background:var(--surface); border:1px solid var(--hair); border-radius:1rem; padding:1.5rem; min-width:0; }
.card h2 { font-size:clamp(1.4rem,2.4vw,1.75rem); line-height:1.2; letter-spacing:-.012em; }
.note { margin:0 0 1rem; max-width:40em; font-size:.9375rem; color:var(--body); }
.head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:flex-start; }
.head > div:first-child { flex:1 1 20rem; min-width:0; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; font-variant-numeric:tabular-nums; }
th { text-align:left; font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:.5rem .75rem; border-bottom:1px solid var(--input); white-space:nowrap; }
td { padding:.65rem .75rem; border-bottom:1px solid var(--hair); color:var(--body); }
td:first-child { color:var(--fg); font-weight:500; }
.n { text-align:right; }
.act-add { color:var(--pos); font-weight:600; } .act-review { color:var(--caution); font-weight:600; } .act-route,.act-new { color:var(--muted); font-weight:600; }
.legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.8125rem; color:var(--muted); }
.sw { display:inline-block; width:.6rem; height:.6rem; margin-right:.3rem; border-radius:2px; }
.c0 { background:var(--primary); } .c1 { background:var(--sky); } .c2 { background:var(--down); }
.bar-row { display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:.25rem .75rem; align-items:center; padding-block:.35rem; font-size:.875rem; }
.track { display:flex; align-items:center; gap:2px; height:20px; }
.track i { display:block; height:100%; border-radius:2px; min-width:0; }
.track span { margin-left:.35rem; font-size:.8125rem; color:var(--muted); }
@media (max-width:40rem) { .bar-row { grid-template-columns:1fr; } }
.inbox { display:grid; grid-template-columns:minmax(16rem,22rem) minmax(0,1fr); gap:1rem; height:calc(100vh - 170px); min-height:30rem; }
.list,.thread { background:var(--surface); border:1px solid var(--hair); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.list-head,.thread-head { padding:1rem; border-bottom:1px solid var(--hair); }
.list-head h2,.thread-head h2 { font-size:1.25rem; }
.chats { overflow-y:auto; flex:1; }
.chat { display:block; width:100%; text-align:left; font:inherit; padding:.75rem 1rem; background:none; border:0; border-bottom:1px solid var(--hair); cursor:pointer; color:var(--fg); }
.chat:hover { background:var(--raised); } .chat[aria-current=true] { background:var(--wash); box-shadow:inset 3px 0 0 var(--primary); }
.chat-top { display:flex; justify-content:space-between; gap:.5rem; font-weight:600; font-size:.9375rem; }
.chat p { margin:.1rem 0 0; font-size:.8125rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot { padding:0 .45rem; border-radius:99px; background:var(--primary); color:#fff; font-size:.75rem; }
.pill { display:inline-block; padding:0 .5rem; border:1px solid var(--primary); border-radius:99px; color:var(--primary); font-size:.6875rem; font-weight:600; letter-spacing:.04em; }
.pill.warn { border-color:var(--caution); color:var(--caution); }
.thread-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; align-items:center; }
.meta { font-size:.8125rem; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem; padding:1rem; background:var(--raised); }
.msg { max-width:min(80%,34em); padding:.5rem .75rem; border-radius:.75rem; font-size:.9375rem; overflow-wrap:anywhere; white-space:pre-wrap; }
.msg small { display:block; margin-bottom:.1rem; font-size:.6875rem; font-weight:600; opacity:.8; }
.msg.contact { align-self:flex-start; background:var(--surface); border:1px solid var(--hair); }
.msg.bot { align-self:flex-end; background:var(--surface-2); color:var(--body); }
.msg.human { align-self:flex-end; background:var(--primary); color:#fff; }
.composer { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--hair); }
.composer textarea { flex:1; min-width:0; resize:none; }
.empty { margin:auto; padding:2rem; color:var(--muted); text-align:center; }
.form-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.form-row input { flex:1 1 11rem; min-width:0; }
.secret { padding:.75rem 1rem; margin-bottom:1rem; background:var(--wash); border-left:4px solid var(--primary); border-radius:.5rem; font-size:.875rem; overflow-wrap:anywhere; }
@media (max-width:50rem) { .inbox { grid-template-columns:1fr; height:auto; } .chats { max-height:16rem; } .thread { min-height:26rem; } }