/* Grade preference controls: usable without fonts, storage or network services. */
.cm-grade-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:.88rem; }
.cm-grade-tools span { font-weight:700; padding:7px 12px; background:var(--sand-100); border-radius:6px; }
.cm-grade-tools button,.cm-grade-dialog-actions button { font:inherit; color:var(--ink-700); background:none; border:0; border-bottom:1px solid currentColor; padding:4px 0; cursor:pointer; }
.cm-grade-fallback { display:flex; gap:12px; margin-top:20px; }
.cm-grade-fallback a { padding:8px 18px; border:1px solid var(--ink-300); border-radius:8px; }
.cm-grade-dialog { width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:36px; color:var(--ink-900); background:var(--sand-50); border:1px solid rgb(13 13 17 / .2); border-radius:18px; box-shadow:0 24px 90px #0005; margin:auto; }
.cm-grade-dialog::backdrop { background:rgb(29 29 25 / .48); backdrop-filter:blur(4px); }
.cm-grade-dialog .eyebrow { font-size:.64rem; line-height:1.6; margin-bottom:18px; }
.cm-grade-dialog h2 { font-size:2.15rem; line-height:1.1; margin:0 0 16px; letter-spacing:-.035em; }
.cm-grade-dialog p { font-size:.95rem; line-height:1.65; margin:0 0 22px; }
.cm-grade-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin:26px 0; }
.cm-grade-options button { display:flex; flex-direction:column; gap:7px; align-items:start; padding:20px; color:var(--ink-900); background:var(--sand-100); border:1px solid rgb(13 13 17 / .25); border-radius:9px; cursor:pointer; }
.cm-grade-options button:hover { background:#ddd9ec; border-color:var(--iris-500); }
.cm-grade-options button span { font:600 .9rem var(--font-body); }
.cm-grade-options button strong { font:600 3.2rem/1 var(--font-display); }
.cm-grade-dialog-actions { display:flex; flex-wrap:wrap; gap:14px 20px; font-size:.8rem; }
.cm-grade-dialog .cm-grade-footnote { font-size:.73rem; color:var(--ink-500); border-top:1px solid rgb(13 13 17 / .15); padding-top:18px; margin:24px 0 0; }
.cm-grade-dialog :focus-visible,.cm-hero :focus-visible { outline:3px solid var(--iris-500); outline-offset:5px; }
#grade-dialog-title:focus { outline:none; }
[data-grade-tools][hidden], .cm-grade-fallback[hidden], [data-map-grade][hidden], [data-home-grade][hidden], [data-teleport-grade][hidden] { display:none!important; }
.cm-grade-tools { margin:20px 0 12px; }
[data-grade-status] { font-size:.85rem; line-height:1.5; min-height:1.5em; }
.cm-grade-dialog :focus-visible, [data-grade-tools] :focus-visible, .cm-grade-fallback :focus-visible { outline:3px solid var(--iris-500, #6b57d8); outline-offset:4px; }
@media (max-width:600px) { .cm-grade-dialog { padding:26px; } .cm-grade-dialog h2 { font-size:1.8rem; } .cm-grade-tools { flex-wrap:wrap; } }
@media print { .cm-grade-dialog, .cm-grade-tools, .cm-grade-fallback, [data-grade-status] { display:none!important; } }

.cm-grade-dialog { overflow-wrap:anywhere; }
.cm-grade-options button { min-width:0; padding:clamp(12px,4vw,20px); }