/* Size guides plugin — structural styles. Colours come from the active theme's tokens. */
.sg-wrap {
    --sg-primary: var(--color-theme-primary, var(--theme-primary, #4f46e5));
    --sg-text: var(--color-theme-text, var(--theme-text, #18181b));
    --sg-muted: var(--color-theme-muted, var(--theme-text-muted, #71717a));
    --sg-border: var(--color-theme-border, var(--theme-border, #e4e4e7));
    --sg-surface: var(--color-theme-surface, var(--theme-surface, #fff));
    margin-top: .75rem;
}
.sg-trigger { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: var(--sg-text); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sg-trigger:hover { color: var(--sg-primary); }
.sg-trigger svg { width: 1.2rem; height: 1.2rem; }
.sg-dialog { width: min(48rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 1rem; background: var(--sg-surface); color: var(--sg-text); }
.sg-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.sg-panel { padding: 1.5rem; }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.sg-head h3 { margin: 0; font-family: var(--font-title, inherit); font-size: 1.35rem; font-weight: 600; }
.sg-close { border: 0; background: none; color: var(--sg-muted); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.sg-text { margin: 0 0 1rem; color: var(--sg-muted); font-size: .9rem; line-height: 1.6; }
.sg-subtitle { margin: 1.25rem 0 .4rem; font-size: 1rem; font-weight: 600; }
.sg-table-wrap { overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: center; }
.sg-table th { padding: .6rem .75rem; background: var(--sg-primary); color: var(--color-theme-on-primary, #fff); font-weight: 600; white-space: nowrap; }
.sg-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--sg-border); }
.sg-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .025); }
.sg-table td:first-child { font-weight: 700; }
.sg-finder { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sg-border); }
.sg-finder-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.sg-finder-field { display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; font-weight: 600; }
.sg-finder-field input { width: 7rem; padding: .5rem .65rem; border: 1px solid var(--sg-border); border-radius: .6rem; background: transparent; color: inherit; font: inherit; font-weight: 400; }
.sg-finder-button { padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: var(--sg-primary); color: var(--color-theme-on-primary, #fff); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.sg-finder-result { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; padding: .75rem 1rem; border-radius: .75rem; background: rgba(0, 0, 0, .04); }
.sg-finder-result strong { font-size: 1.35rem; color: var(--sg-primary); }
.sg-finder-result .sg-text { width: 100%; margin: 0; }