/* Opt-in controls. Colour is selected by the consumer, not by the action name. */
:root{
 --ui-target:2.75rem;--ui-pad-block:.65rem;--ui-pad-inline:1.1rem;
 --ui-gap:.5rem;--ui-border:2px;--ui-shadow:3px 3px 0 var(--ink);
 --ui-arrow-inset:1rem;--ui-select-clearance:2.5rem;
}
.csw-ui-button.csw-ui-button{
 appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-gap);
 min-height:var(--ui-target);min-width:var(--ui-target);max-width:100%;
 padding:var(--ui-pad-block) var(--ui-pad-inline);border:var(--ui-border) solid var(--ink);border-radius:0;
 font:inherit;font-weight:600;line-height:1.3;text-align:center;text-decoration:none;
 white-space:normal;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation;
 background:var(--ui-fill,var(--paper));color:var(--ui-label,var(--ink));
}
.csw-ui-button[data-ui-tone=red]{--ui-fill:var(--red-text);--ui-label:var(--paper)}
.csw-ui-button[data-ui-tone=navy]{--ui-fill:var(--ink);--ui-label:var(--paper)}
.csw-ui-button[data-ui-tone=blue]{--ui-fill:var(--pale-teal);--ui-label:var(--ink)}
.csw-ui-button[data-ui-tone=neutral]{--ui-fill:var(--paper);--ui-label:var(--ink)}
.csw-ui-button.csw-ui-button[data-ui-variant=raised]{box-shadow:var(--ui-shadow)}
.csw-ui-button.csw-ui-button[data-ui-variant=text]{background:transparent;color:var(--ink);border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:.2em}
.csw-ui-button.csw-ui-button:disabled,.csw-ui-button.csw-ui-button[aria-disabled=true]{opacity:.5;box-shadow:none;cursor:default}
/* Hover is feedback only on devices that have a pointing cursor. */
@media(hover:hover) and (pointer:fine){
 .csw-ui-button.csw-ui-button:not(:disabled):not([aria-disabled=true]):hover{filter:brightness(.94);text-decoration:underline;text-underline-offset:.2em}
}
.csw-ui-select.csw-ui-select{
 box-sizing:border-box;appearance:none;border-radius:0;max-width:100%;min-width:0;min-height:var(--ui-target);
 padding:.6rem var(--ui-select-clearance) .6rem .65rem;font:inherit;font-size:max(1rem,16px);line-height:1.4;
 color:var(--ink);background-color:var(--paper);border:var(--ui-border) solid var(--ink);
 background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
 background-position:right calc(var(--ui-arrow-inset) + 5px) center,right var(--ui-arrow-inset) center;
 background-size:5px 5px;background-repeat:no-repeat;
}
.csw-ui-select:disabled{opacity:.5;cursor:default}
.csw-ui-disclosure{border:1px solid var(--line);padding:.5rem}
.csw-ui-disclosure>summary{min-height:var(--ui-target);box-sizing:border-box;padding:.5rem;cursor:pointer;overflow-wrap:anywhere}
:is(.csw-ui-button,.csw-ui-select,.csw-ui-disclosure>summary):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
:is(.csw-ui-button,.csw-ui-select,.csw-ui-disclosure>summary):focus:not(:focus-visible){outline:none}
@media(forced-colors:active){
 .csw-ui-select.csw-ui-select{appearance:auto;background-image:none}
 .csw-ui-button.csw-ui-button{border-color:ButtonText;box-shadow:none}
 :is(.csw-ui-button,.csw-ui-select,.csw-ui-disclosure>summary):focus-visible{outline-color:Highlight}
}

/* Keep the native disclosure marker and leave space before its label. */
.csw-ui-disclosure>summary{list-style-position:outside;margin-inline-start:1.1rem;padding-inline-start:.2rem}
.csw-ui-disclosure-body{display:grid;gap:1rem;padding:.75rem .5rem .5rem;justify-items:start}
.csw-ui-disclosure-body>p{margin:0}

.csw-ui-select.csw-ui-select[data-pointer-focus]:focus{outline:none}