:root { --ink:#17221c; --green:#285d45; --cream:#f6f1e7; --paper:#fffdf8; --line:#ddd4c3; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.55 Georgia, serif; }
.shell { width:min(920px, calc(100% - 32px)); margin:60px auto; }
.eyebrow { color:var(--green); font:600 12px/1.2 Arial,sans-serif; letter-spacing:.12em; }
h1 { font-size:clamp(2.6rem,8vw,4.6rem); line-height:1; margin:.2rem 0 .6rem; }
.lead { max-width:700px; font-size:1.15rem; }
label { display:block; margin-top:2rem; font-weight:bold; }
.search { display:flex; gap:.6rem; margin-top:.5rem; }
input, select { min-width:0; padding:.85rem 1rem; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--paper); }
input { flex:1; }
select { display:block; width:min(290px,100%); margin-top:.5rem; }
button { padding:.85rem 1.2rem; border:0; border-radius:8px; background:var(--green); color:white; font:600 14px Arial,sans-serif; cursor:pointer; }
.status { min-height:1.6em; color:#655e51; font-style:italic; }
#results { display:grid; gap:14px; margin-top:1.3rem; }
article { padding:18px 22px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
h2 { margin:0 0 .35rem; font:700 14px Arial,sans-serif; text-transform:uppercase; letter-spacing:.07em; color:var(--green); }
article p { margin:.25rem 0; font-size:1.1rem; }
.variant { display:inline-block; margin:.15rem .25rem .15rem 0; padding:.12rem .5rem; border-radius:999px; background:#e6efe9; color:var(--green); font-weight:bold; }
.contextual { color:var(--green); border-bottom:1px dotted var(--green); cursor:help; }
.variant-mark { display:inline-block; margin-left:.28rem; font:700 .75em Arial,sans-serif; user-select:none; }
.alternative-mark::after { content:'↕'; }
.context-mark::after { content:'ⓘ'; }
.unknown { color:#655e51; font-style:italic; text-decoration:underline dotted #9a9181; text-underline-offset:3px; }
.has-tooltip { position:relative; cursor:help; outline:none; }
.has-tooltip::after { content:attr(data-tooltip); position:absolute; z-index:1; left:0; bottom:calc(100% + 8px); width:max-content; max-width:260px; padding:.5rem .65rem; border-radius:6px; background:#17221c; color:#fff; font:normal .82rem/1.35 Arial,sans-serif; opacity:0; pointer-events:none; transform:translateY(3px); transition:opacity .15s,transform .15s; }
.has-tooltip:hover::after, .has-tooltip:focus::after { opacity:1; transform:translateY(0); }
.detail { margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line); }
.detail:first-child { margin-top:0; padding-top:0; border-top:0; }
.detail-label { margin-bottom:.35rem; color:var(--green); font:600 .84rem/1.3 Arial,sans-serif; }
a { color:#145b8a; overflow-wrap:anywhere; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th,td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); } thead { color:var(--green); font:600 12px Arial,sans-serif; text-transform:uppercase; } tbody th { font-weight:bold; }
@media (max-width:600px) { .shell{margin:32px auto}.search{flex-direction:column}button{width:100%} }