/*
 * Shared element layer for the blog themes and the admin panel: every native control and text element is
 * defined from the same tokens, so nothing falls back to the browser look.
 * Tokens: --bg --surface --surface-2 --text --muted --line --brand --brand-ink --accent --r --font-b --font-m
 * Everything sits in :where() (specificity 0) so a theme or a component class can always override it.
 */
:root{accent-color:var(--brand)}
html{scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
::selection{background:color-mix(in srgb,var(--brand) 28%,transparent);color:inherit}
:where(a){text-underline-offset:.18em}

/* text fields */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=button],[type=submit],[type=reset],[type=image],[type=hidden]),select,textarea){
 font:inherit;font-size:max(1rem,16px);line-height:1.3;color:var(--text);background-color:var(--surface);border:1px solid var(--line);border-radius:var(--r);
 padding:.62em .85em;max-width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,background-color .15s}
:where(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--text) 32%,var(--line))}
:where(input,select,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
:where(input,select,textarea):disabled{opacity:.55;cursor:not-allowed;background-color:var(--surface-2)}
:where(input,select,textarea):user-invalid{border-color:#d4382c;outline-color:#d4382c}
:where(input,textarea)::placeholder{color:var(--muted);opacity:.85}
:where(textarea){min-height:6.5em;resize:vertical}
:where(input[type=search])::-webkit-search-cancel-button{opacity:.55;cursor:pointer}
:where(input[type=number])::-webkit-inner-spin-button{opacity:.5}
:where(input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week])::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
:where(input[type=color]){width:3.2em;height:2.5em;padding:.2em;background-color:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
:where(input[type=file]){font:inherit;color:var(--muted);max-width:100%}
:where(input[type=file])::file-selector-button{font:inherit;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:.5em .95em;margin-right:.8em;cursor:pointer;transition:border-color .15s}
:where(input[type=file])::file-selector-button:hover{border-color:var(--brand)}

/* select: own arrow (gradients can use the tokens), fully themed list where the browser supports it */
:where(select){appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4em;
 background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
 background-position:calc(100% - 1.15em) 52%,calc(100% - .8em) 52%;background-size:.38em .38em;background-repeat:no-repeat}
:where(select[multiple],select[size]:not([size="1"])){background-image:none;padding-right:.85em;cursor:auto}
:where(option,optgroup){color:var(--text);background-color:var(--surface)}
:where(optgroup){font-weight:700}
@supports (appearance:base-select){
 :where(select),::picker(select){appearance:base-select}
 :where(select:not([multiple],[size])){background-image:none;display:flex;align-items:center;justify-content:space-between;gap:.6em;min-height:2.55em;padding:.45em .85em;line-height:1.3;text-align:left}
 /* the arrow is a small chevron on the right edge, in the muted colour, flipping when the list is open */
 :where(select)::picker-icon{content:"";flex:none;width:.42em;height:.42em;margin:-.2em 0 0 auto;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:rotate .2s}
 :where(select):open::picker-icon{rotate:180deg;margin-top:.15em}
 ::picker(select){border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--surface);color:var(--text);padding:6px;margin-top:6px;box-shadow:0 18px 46px -14px rgba(0,0,0,.42)}
 :where(select) option{padding:.55em .8em;border-radius:max(2px,calc(var(--r) - 2px));cursor:pointer}
 :where(select) option:hover,:where(select) option:focus-visible{background:var(--surface-2)}
 :where(select) option:checked{background:color-mix(in srgb,var(--brand) 14%,transparent);font-weight:600}
 :where(select) option::checkmark{color:var(--brand)}
}

/* checkbox, radio, switch */
:where(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:1.2em;height:1.2em;margin:0 .45em 0 0;padding:0;
 vertical-align:-.22em;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--text) 38%,var(--line));cursor:pointer;transition:background-color .15s,border-color .15s}
:where(input[type=checkbox]){border-radius:max(3px,calc(var(--r) / 2.5))}
:where(input[type=radio]){border-radius:50%}
:where(input[type=checkbox],input[type=radio])::before{content:"";width:.62em;height:.62em;transform:scale(0);transition:transform .12s;background:var(--brand-ink)}
:where(input[type=checkbox])::before{clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
:where(input[type=radio])::before{border-radius:50%}
:where(input[type=checkbox],input[type=radio]):checked{background:var(--brand);border-color:var(--brand)}
:where(input[type=checkbox],input[type=radio]):checked::before{transform:scale(1)}
:where(input[type=checkbox]):indeterminate{background:var(--brand);border-color:var(--brand)}
:where(input[type=checkbox]):indeterminate::before{transform:scale(1);clip-path:none;height:.14em;border-radius:1px}
:where(input[type=checkbox],input[type=radio]):hover:not(:disabled){border-color:var(--brand)}
:where(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
:where(input[type=checkbox],input[type=radio]):disabled{opacity:.5;cursor:not-allowed}
:where(input[type=checkbox][role=switch]){width:2.4em;height:1.35em;border-radius:999px;place-content:center start;padding:0 .14em;background:var(--surface-2)}
:where(input[type=checkbox][role=switch])::before{width:.95em;height:.95em;border-radius:50%;clip-path:none;transform:none;background:var(--muted);transition:transform .18s,background-color .18s}
:where(input[type=checkbox][role=switch]):checked{background:var(--brand)}
:where(input[type=checkbox][role=switch]):checked::before{transform:translateX(1.02em);background:var(--brand-ink)}

/* range, progress, meter */
:where(input[type=range]){appearance:none;-webkit-appearance:none;width:100%;height:1.4em;padding:0;background:transparent;border:0;cursor:pointer}
:where(input[type=range])::-webkit-slider-runnable-track{height:.32em;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
:where(input[type=range])::-moz-range-track{height:.32em;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
:where(input[type=range])::-webkit-slider-thumb{-webkit-appearance:none;width:1.15em;height:1.15em;margin-top:calc(-.5em + 0.0em);margin-top:-.46em;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--brand)}
:where(input[type=range])::-moz-range-thumb{width:1.05em;height:1.05em;border-radius:50%;background:var(--brand);border:2px solid var(--surface)}
:where(progress,meter){appearance:none;-webkit-appearance:none;width:100%;min-width:9em;flex:1;height:.6em;border:0;border-radius:999px;background:var(--surface-2);overflow:hidden;vertical-align:middle}
:where(progress)::-webkit-progress-bar{background:var(--surface-2);border-radius:999px}
:where(progress)::-webkit-progress-value{background:var(--brand);border-radius:999px}
:where(progress)::-moz-progress-bar{background:var(--brand);border-radius:999px}
:where(meter)::-webkit-meter-bar{background:var(--surface-2);border:0;height:.6em;border-radius:999px}
:where(meter)::-webkit-meter-optimum-value{background:var(--brand);border-radius:999px}
:where(meter)::-webkit-meter-suboptimum-value{background:#d99a1c;border-radius:999px}
:where(meter)::-webkit-meter-even-less-good-value{background:#d4382c;border-radius:999px}

/* buttons without a class of their own (component buttons keep their own look) */
:where(button:not([class]),input[type=submit],input[type=button],input[type=reset]){font:inherit;font-weight:600;color:var(--brand-ink);background:var(--brand);border:1px solid var(--brand);
 border-radius:var(--r);padding:.62em 1.2em;cursor:pointer;transition:filter .15s,transform .1s}
:where(button:not([class]),input[type=submit],input[type=button],input[type=reset]):hover:not(:disabled){filter:brightness(1.08)}
:where(button:not([class]),input[type=submit],input[type=button],input[type=reset]):active:not(:disabled){transform:translateY(1px)}
:where(button,input[type=submit],input[type=button],input[type=reset]):disabled{opacity:.5;cursor:not-allowed}
:where(button):focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* form structure */
:where(label){cursor:pointer}
:where(fieldset){border:1px solid var(--line);border-radius:var(--r);padding:1em 1.2em;margin:0 0 1em;min-width:0}
:where(legend){padding:0 .5em;font-weight:700;color:var(--text)}
:where(output){font-family:var(--font-m,monospace)}

/* disclosure and dialogs */
:where(details){border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
:where(details>summary){cursor:pointer;padding:.7em 1em;font-weight:600;list-style:none}
:where(details>summary)::-webkit-details-marker{display:none}
:where(details>summary)::after{content:"";float:right;width:.5em;height:.5em;margin-top:.45em;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
:where(details[open]>summary)::after{transform:rotate(-135deg);margin-top:.6em}
:where(details[open]>summary){border-bottom:1px solid var(--line)}
:where(details>:not(summary)){margin-inline:1em}
:where(details>:last-child){margin-bottom:1em}
:where(dialog){color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:1.4em}
:where(dialog)::backdrop{background:rgba(8,8,14,.55)}

/* text-level elements */
:where(hr){border:0;border-top:1px solid var(--line);margin:1.6em 0}
:where(kbd){font:500 .85em var(--font-m,monospace);padding:.12em .5em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface-2)}
:where(mark){background:color-mix(in srgb,var(--accent,var(--brand)) 32%,transparent);color:inherit;padding:0 .2em;border-radius:3px}
:where(code,samp){font-family:var(--font-m,monospace);font-size:.92em}
:where(pre){font:.9em/1.55 var(--font-m,monospace);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:1em;overflow:auto}
:where(abbr[title]){text-decoration:underline dotted;cursor:help}
:where(blockquote){margin:1.2em 0;padding:.3em 0 .3em 1.1em;border-left:3px solid var(--brand);color:var(--muted)}
:where(table){border-collapse:collapse;max-width:100%}
:where(th,td){padding:.55em .8em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
:where(thead th){border-bottom:2px solid var(--line);font-weight:700}
:where(figure){margin:1.2em 0}
:where(figcaption){font-size:.88em;color:var(--muted);margin-top:.5em}
:where(dl){margin:0 0 1em}:where(dt){font-weight:700}:where(dd){margin:0 0 .6em;color:var(--muted)}
:where(small){font-size:.86em}
:where(sub,sup){line-height:0}