/* Quiet reference layer: navy glass, turquoise ink, warm gold navigation. */
.vocabulary-launcher { max-width:720px; margin:4px auto 18px; display:flex; align-items:center; gap:14px; }
.vocabulary-launcher p { margin:0; color:#aabfd0; font-size:12px; line-height:1.5; }
.vocabulary-open { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; flex-shrink:0; padding:10px 14px; border:1px solid #3a6574; border-radius:12px; background:linear-gradient(130deg,#1b3449,#142738); color:#b3f2e6; font-family:inherit; font-weight:600; font-size:13px; line-height:1.3; cursor:pointer; }
.vocabulary-open svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.vocabulary-launcher--compact { justify-content:flex-end; margin-bottom:10px; }
.vocabulary-term { display:inline; padding:0; margin:0; border:0; border-radius:2px; background:none; color:inherit; font:inherit; line-height:inherit; text-align:inherit; text-decoration:underline dotted #74c7bd; text-underline-offset:4px; cursor:pointer; }
.vocabulary-term:hover { color:#a8f4e5; text-decoration-style:solid; }
.vocabulary-overlay { position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(3,9,18,.84); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); overscroll-behavior:contain; }
.vocabulary-sheet { display:flex; flex-direction:column; width:100%; max-width:620px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); min-height:0; box-sizing:border-box; padding:26px 26px 12px; border:1px solid #42616e; border-radius:26px; background:radial-gradient(ellipse at 100% 0,rgba(40,105,115,.2),transparent 55%),#101d2e; box-shadow:0 28px 100px #0008,inset 0 1px #aacfc91c; color:#edf4fa; animation:vocabulary-enter .18s ease-out; }
.vocabulary-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-shrink:0; }
.vocabulary-eyebrow { display:block; color:#e6c987; font-size:10px; font-weight:700; letter-spacing:1.7px; line-height:1.5; }
.vocabulary-head h2 { margin:6px 0 0; font-size:30px; line-height:1.15; letter-spacing:-1px; font-weight:700; }
.vocabulary-close.secondary-action { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin:0; border:1px solid #486072; border-radius:50%; background:#192c3f; color:#d2e6f0; box-shadow:none; font-family:inherit; font-weight:300; font-size:30px; line-height:1; }
.vocabulary-intro { margin:14px 0 20px; font-size:14px; line-height:1.55; color:#bdcddd; flex-shrink:0; }
.vocabulary-search-label { font-size:12px; font-weight:600; color:#c1d2df; margin-bottom:7px; }
.vocabulary-search { width:100%; min-width:0; min-height:46px; box-sizing:border-box; padding:12px 14px; border:1px solid #43596d; border-radius:12px; background:#0b1625; color:#f1f6fb; font:inherit; font-size:16px; flex-shrink:0; }
.vocabulary-search::placeholder { color:#91a9bd; }
.vocabulary-filters { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:15px 0 10px; border-bottom:1px solid #2d4255; flex-shrink:0; }
.vocabulary-filters button { min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:#b4c7d8; font-family:inherit; font-size:12px; cursor:pointer; }
.vocabulary-filters button[aria-pressed=true] { border-color:#3d7779; background:#16383e; color:#b5f5e8; }
.vocabulary-filters button:disabled { opacity:.45; cursor:default; }
.vocabulary-count { margin-left:auto; color:#9db2c6; font-size:11px; font-variant-numeric:tabular-nums; }
.vocabulary-list { overflow-y:auto; min-height:0; padding:4px 2px 18px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.vocabulary-group { margin:20px 0 10px; color:#94b0c1; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; }
.vocabulary-card { margin-bottom:7px; border:1px solid #2a4257; border-radius:12px; background:#142538; overflow:hidden; }
.vocabulary-card summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:48px; padding:12px 15px; box-sizing:border-box; list-style:none; color:#dce9f4; font-size:15px; font-weight:600; cursor:pointer; }
.vocabulary-card summary::-webkit-details-marker { display:none; }
.vocabulary-plus { color:#87bdb9; font-size:20px; font-weight:400; flex-shrink:0; }
.vocabulary-card[open] { border-color:#4c8d8b; background:linear-gradient(120deg,#163337,#142638); }
.vocabulary-card[open] summary { color:#b5f5e8; }
.vocabulary-card[open] .vocabulary-plus { transform:rotate(45deg); }
.vocabulary-definition { padding:0 15px 16px; }
.vocabulary-definition p { margin:0; color:#d4e1ec; font-size:16px; line-height:1.65; }
.vocabulary-example { margin-top:14px; border-left:2px solid #d8b971; padding:2px 0 2px 12px; }
.vocabulary-example strong { display:block; margin-bottom:5px; color:#e8ca8f; font-size:11px; font-weight:600; }
.vocabulary-example p { font-size:14px; color:#c5d4df; }
.vocabulary-empty { padding:20px 8px; color:#c3d5e3; font-size:15px; line-height:1.5; }
.vocabulary-reset { min-height:44px; padding:10px 14px; border:1px solid #457b7c; border-radius:10px; background:#17373d; color:#b5f5e8; font-family:inherit; }
.vocabulary-update-note { margin:0 0 14px; border-left:2px solid #e6c987; padding:10px 12px; background:#17283b; color:#d5e2ef; font-size:14px; line-height:1.55; }
.vocabulary-overlay :focus-visible,.vocabulary-open:focus-visible,.vocabulary-term:focus-visible { outline:2px solid #f3d288; outline-offset:3px; }
.vocabulary-sheet,.vocabulary-definition,.vocabulary-card summary { overflow-wrap:anywhere; }
@keyframes vocabulary-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .vocabulary-overlay { align-items:flex-end; padding:12px 8px 8px; } .vocabulary-sheet { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); padding:22px 18px 8px; border-radius:24px 24px 18px 18px; } .vocabulary-launcher { gap:10px; } .vocabulary-launcher p { font-size:11px; } }
@media(max-width:360px) { .vocabulary-launcher:not(.vocabulary-launcher--compact) { align-items:flex-start; flex-direction:column; gap:6px; } .vocabulary-sheet { padding:18px 14px 8px; } .vocabulary-head h2 { font-size:27px; } }
@media(max-height:440px) { .vocabulary-overlay { padding:8px; align-items:center; } .vocabulary-sheet { max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); padding:12px 18px 4px; } .vocabulary-eyebrow,.vocabulary-intro,.vocabulary-search-label { display:none; } .vocabulary-head h2 { font-size:23px; margin:0; } .vocabulary-head { margin-bottom:8px; } .vocabulary-search { min-height:40px; padding:8px 12px; } .vocabulary-filters { padding:3px 0; } }
@media(prefers-reduced-motion:reduce) { .vocabulary-sheet { animation:none; } }