/* Compact optional accessories; all surfaces follow the active theme. */
.direction-instruments { display:flex; align-items:center; justify-content:flex-end; gap:5px; width:100px; max-width:100%; flex-shrink:0; }
.direction-clock { color:var(--alpha-sub); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.3; letter-spacing:0; white-space:nowrap; }
.direction-compass-toggle { position:relative; display:grid; place-items:center; width:44px; min-width:44px; min-height:44px; height:44px; padding:5px; margin:0; border:1px solid var(--alpha-border); border-radius:50%; background:var(--alpha-surface-secondary); color:var(--alpha-primary); cursor:pointer; }
.direction-compass-toggle:hover { background:var(--alpha-surface-hover); }
.direction-compass-toggle:focus-visible,.direction-compass-panel button:focus-visible { outline:3px solid var(--alpha-focus); outline-offset:3px; }
.direction-compass-dial { width:30px; height:30px; display:block; }
.direction-compass-dot { position:absolute; right:5px; bottom:5px; width:7px; height:7px; border:1px solid var(--alpha-surface-secondary); border-radius:50%; background:var(--alpha-sub); }
[data-compass-state="active"] .direction-compass-dot { background:var(--alpha-success); }
[data-compass-state="imprecise"] .direction-compass-dot { background:var(--alpha-warning); }
.direction-needle { transform-box:view-box; transform-origin:20px 20px; }
.direction-compass-panel { position:fixed; inset:0; margin:auto; box-sizing:border-box; width:min(360px,calc(100% - 32px)); max-width:calc(100% - 32px); max-height:calc(100dvh - 32px); padding:20px; overflow:auto; overscroll-behavior:contain; color:var(--alpha-text); background:var(--alpha-surface); border:1px solid var(--alpha-border); border-radius:24px; box-shadow:var(--alpha-shadow); font-family:inherit; }
.direction-compass-panel:not([open]) { display:none; }
.direction-compass-panel::backdrop { background:rgb(6 17 36 / 55%); }
.direction-compass-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.direction-compass-panel h2 { margin:0; font-size:20px; line-height:1.3; color:var(--alpha-text); }
.direction-compass-close { display:grid; place-items:center; width:44px; min-height:44px; padding:0; flex-shrink:0; color:var(--alpha-sub); background:var(--alpha-surface-secondary); border:1px solid var(--alpha-border); border-radius:14px; font-size:24px; line-height:1; cursor:pointer; }
.direction-compass-panel p { overflow-wrap:anywhere; }
.direction-compass-description { margin:14px 0 16px; color:var(--alpha-sub); font-size:14px; line-height:1.6; }
.direction-compass-large { display:block; width:88px; height:88px; margin:0 auto; color:var(--alpha-primary); }
.direction-compass-value { margin:12px 0 4px; text-align:center; font-size:28px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2; color:var(--alpha-text); }
.direction-compass-status { margin:0; text-align:center; font-size:15px; font-weight:700; line-height:1.5; color:var(--alpha-text); }
.direction-compass-detail { min-height:44px; margin:8px 0 16px; text-align:center; color:var(--alpha-sub); font-size:13px; line-height:1.6; }
.direction-compass-action { display:block; width:100%; min-height:44px; padding:12px 14px; border:1px solid var(--alpha-primary); border-radius:14px; background:var(--alpha-primary); color:var(--alpha-on-primary); font-family:inherit; font-size:14px; font-weight:700; line-height:1.4; cursor:pointer; }
.direction-compass-action:disabled { opacity:.7; cursor:wait; }
.direction-compass-privacy { margin:14px 0 0; color:var(--alpha-sub); font-size:12px; line-height:1.6; }
@media (max-width:359px) { .direction-instruments { width:96px; gap:3px; } .direction-compass-panel { padding:16px; } }
@media (max-height:470px) { .direction-compass-large { width:54px; height:54px; } .direction-compass-description { margin:8px 0; } .direction-compass-detail { margin:6px 0 10px; min-height:0; } }
@media (prefers-reduced-motion:reduce) { .direction-needle { transition:none; } }