@layer components{.notice{--notice-bg:var(--tone-info-bg);--notice-fg:var(--tone-info-fg);--notice-border:var(--tone-info-border);align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--notice-border);border-radius:var(--radius-md);background:var(--notice-bg);color:var(--color-text);flex-wrap:wrap;margin-block:1em;display:flex}.notice[data-tone=success]{--notice-bg:var(--tone-success-bg);--notice-fg:var(--tone-success-fg);--notice-border:var(--tone-success-border)}.notice[data-tone=warn]{--notice-bg:var(--tone-attention-bg);--notice-fg:var(--tone-attention-fg);--notice-border:var(--tone-attention-border)}.notice[data-tone=danger]{--notice-bg:var(--tone-danger-bg);--notice-fg:var(--tone-danger-fg);--notice-border:var(--tone-danger-border)}.notice[data-tone=highlight]{--notice-bg:var(--color-surface);--notice-fg:var(--color-text);--notice-border:var(--color-highlight);box-shadow:inset 0 0 0 1px var(--notice-border)}.highlight-card .notice{--notice-bg:var(--color-surface)}.notice-main{align-items:flex-start;gap:var(--space-3);flex:16rem;min-inline-size:0;display:flex}.notice-icon{color:var(--notice-fg);margin-block:.125rem;font-size:1.25rem}.notice-body{flex:1;min-inline-size:0}.notice-body>:is(p,ul,ol){margin:0}.notice-body>:is(p,ul,ol,dl,div):not(:first-child){margin-block-start:var(--space-1)}.notice-body>.notice-title{font-family:var(--font-head);font-weight:var(--weight-black);color:var(--notice-fg);margin-block-end:var(--space-1)}.notice-action{gap:var(--space-2);flex-wrap:wrap;margin-inline-start:auto;display:flex}.btn{--btn-bg:var(--color-action);--btn-fg:var(--color-on-action);--btn-border:transparent;--btn-bg-hover:var(--color-action-hover);--btn-fg-hover:var(--btn-fg);--btn-border-hover:var(--btn-border);min-block-size:var(--control-h);border:2px solid var(--btn-border);border-radius:var(--radius-sm);background:var(--btn-bg);color:var(--btn-fg);font-family:var(--font-head);font-size:1rem;font-weight:var(--weight-heavy);text-align:center;cursor:pointer;grid-auto-flow:column;place-content:center;place-items:center;gap:.5em;padding:.55rem 1.05rem;line-height:1.3;text-decoration:none;display:inline-grid}.btn svg{flex:none}.btn[data-size=sm]{min-block-size:max(2.25rem, var(--target-min));font-size:var(--step--1);padding:.3rem .75rem}.btn[data-size=lg]{min-block-size:3.25rem;font-size:1.125rem;font-weight:var(--weight-black);padding:.85rem 1.75rem}.btn[data-variant=secondary]{--btn-bg:var(--color-surface);--btn-fg:var(--color-text);--btn-border:var(--color-text);--btn-bg-hover:var(--color-control-hover)}.btn[data-variant=danger]{--btn-bg:var(--color-surface);--btn-fg:var(--color-danger);--btn-border:var(--color-danger);--btn-bg-hover:var(--tone-danger-bg)}.btn[data-variant=outline]{--btn-bg:transparent;--btn-fg:var(--color-link);--btn-border:var(--color-link);--btn-bg-hover:var(--color-action);--btn-fg-hover:var(--color-on-action);font-weight:var(--weight-black)}.btn[data-variant=ghost]{--btn-bg:transparent;--btn-fg:var(--color-text);--btn-bg-hover:color-mix(in srgb, var(--color-text) 8%, transparent)}.btn[data-variant=link]{--btn-bg:transparent;--btn-bg-hover:transparent;--btn-fg:var(--color-link);--btn-fg-hover:var(--color-link-hover);min-block-size:var(--target-min);font-family:var(--font-body);font-weight:var(--weight-bold);border-width:0;padding:.45rem .25rem}:where(p,li,dd,.hint,.muted,.page-header-meta) .btn[data-variant=link],:where(.notice-body)>.btn[data-variant=link]{min-block-size:0;font:inherit;text-underline-offset:.18em;text-decoration-line:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);padding:0}@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled,[aria-disabled=true]){background:var(--btn-bg-hover);color:var(--btn-fg-hover);border-color:var(--btn-border-hover);text-decoration:none}.btn[data-variant=link]:hover:not(:disabled,[aria-disabled=true]){text-decoration-line:underline;text-decoration-color:currentColor}}@media (prefers-reduced-motion:no-preference){.btn{transition-property:background-color,border-color,color,text-decoration-color,box-shadow,translate;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out)}.btn:not([data-variant=link]):active:not(:disabled,[aria-disabled=true]){translate:0 1px}}.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:default}.btn[aria-busy=true]{opacity:1;cursor:progress}.btn>:is(.btn-label,.btn-pending){grid-area:1/1;justify-content:center;align-items:center;gap:.5em;display:inline-flex}.btn-pending{visibility:hidden}.btn-pending:before{content:"";border:.15em solid color-mix(in srgb, currentColor 30%, transparent);border-block-start-color:currentColor;border-radius:50%;flex:none;block-size:1em;inline-size:1em}.btn-pending[data-label]:after{content:attr(data-label)}.btn[aria-busy=true]>.btn-pending{visibility:visible}.btn[aria-busy=true]>.btn-pending:before{animation:1.6s linear infinite btn-spin}@media (prefers-reduced-motion:no-preference){.btn[aria-busy=true]>.btn-pending:before{animation-duration:.7s}}.btn[aria-busy=true]>.btn-pending[data-label]+.btn-label{visibility:hidden}.btn[aria-busy=true]>.btn-pending:not([data-label])+.btn-label{color:#0000}@keyframes btn-spin{to{transform:rotate(1turn)}}@media (forced-colors:active){.btn:disabled,.btn[aria-disabled=true]:not([aria-busy=true]){color:graytext;border-color:graytext}.btn-pending:before{forced-color-adjust:none}}}
