/* YOSS iconography v1: system typography, shared optical sizes and contour SVGs. */
:root{--symbol-size:24px;--symbol-affordance:16px;--symbol-badge-size:36px;--symbol-badge-glyph:16.2px;--symbol-stroke:2}
.icon,.preview-icon,.site-icon{display:inline-block;inline-size:var(--symbol-size);block-size:var(--symbol-size);flex:0 0 auto;overflow:visible;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:var(--symbol-stroke);stroke-linecap:round;stroke-linejoin:round}
.icon-badge{--symbol-tone:var(--ink-teal,var(--ink-accent,#2db8a9));display:inline-flex;align-items:center;justify-content:center;inline-size:var(--symbol-badge-size);block-size:var(--symbol-badge-size);flex:0 0 var(--symbol-badge-size);border-radius:50%;background:color-mix(in srgb,var(--symbol-tone) 22%,transparent);color:var(--symbol-tone);line-height:1;vertical-align:middle}
.icon-badge-green{--symbol-tone:var(--ink-green,var(--score-green,#4dc773))}.icon-badge-amber{--symbol-tone:var(--ink-orange,#fa8c38)}.icon-badge-red{--symbol-tone:var(--ink-red,#eb4d47)}
.icon-badge>.icon,.icon-badge>.preview-icon,.icon-badge>.site-icon{inline-size:var(--symbol-badge-glyph);block-size:var(--symbol-badge-glyph);width:var(--symbol-badge-glyph);height:var(--symbol-badge-glyph);color:inherit;vertical-align:0;stroke-width:var(--symbol-stroke)}
.symbol-affordance,.primary>.icon,.secondary>.icon,.text-btn>.icon,.icon-btn>.icon,.score-bottom>.icon,.page-hint>.icon,.button>.site-icon,.button>.preview-icon,.platform-link>.site-icon,.mini-app>.site-icon,.next>.site-icon{width:var(--symbol-affordance);height:var(--symbol-affordance);inline-size:var(--symbol-affordance);block-size:var(--symbol-affordance)}
.sidebar .nav .icon,.theme-toggle .icon,.theme .site-icon{width:var(--symbol-size);height:var(--symbol-size)}
.text-btn{display:inline-flex;align-items:center;gap:8px}.text-btn>.icon{vertical-align:middle}
.quick .icon-badge>.icon,.record-option .icon-badge>.icon,.choice-glyph .icon-badge>.icon,.preview-quick .icon-badge>.preview-icon{width:var(--symbol-badge-glyph);height:var(--symbol-badge-glyph)}
.choice-glyph{background:transparent;border:0;width:var(--symbol-badge-size);height:var(--symbol-badge-size);padding:0}
.event-icon{width:36px;height:36px;min-width:36px;background:transparent;border:0;border-radius:0}.event-icon>.icon,.core-row>.icon{width:24px;height:24px}
.pattern-icon-heading{display:flex;align-items:center;gap:12px}.pattern-icon-heading .pill{white-space:normal}
.feature-top>.icon-badge{color:var(--symbol-tone)}
.faq summary>.site-icon{flex-shrink:0;color:var(--ink-accent,var(--accent))}.faq details[open] summary>.site-icon{transform:rotate(45deg)}
.preview-nav .preview-icon{width:22px;height:22px;stroke-width:var(--symbol-stroke)}
.preview-quick>span{min-height:80px;gap:6px}.quick{min-height:76px}
@media(max-width:760px){.sidebar .nav button{min-height:48px;font-size:clamp(9px,2.4vw,11px);line-height:1.15;letter-spacing:0;gap:4px}.sidebar .nav .icon{width:22px;height:22px}.quick{min-height:72px;gap:6px}.preview-quick>span{min-height:78px}.preview-nav>span{line-height:1.2}.preview-nav .preview-icon{width:20px;height:20px}}

:root[data-theme=light] .icon-badge{background:#d3efea}:root[data-theme=light] .icon-badge-green{background:#d8f2de}:root[data-theme=light] .icon-badge-amber{background:#fce2c9}:root[data-theme=light] .icon-badge-red{background:#f9d5d3}
.journal-row .icon-btn{min-width:44px;min-height:44px;width:44px;height:44px}

/* Category tiles are larger controls, not compact inline badges. */
.record-option{--symbol-badge-size:48px;--symbol-badge-glyph:28px}
.record-option>.icon-badge{display:inline-flex;align-items:center;justify-content:center;align-self:center}
.record-option>.icon-badge>.icon{display:block;flex:none;margin:0}

/* Use the Lucide contour weight in navigation as well. */
.sidebar .nav .icon{stroke-width:var(--symbol-stroke)}