/* Reusable controls. Table geometry belongs in schedule.css; booking form in editor.css. */
.icon {width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; pointer-events: none}
.button {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 10px 14px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: var(--weight-bold); line-height: 1.2; cursor: pointer; touch-action: manipulation}
.button:hover:not(:disabled) {background: var(--color-hover)}
.button--primary {background: var(--color-action); border-color: var(--color-action); color: var(--color-surface)}
.button--primary:hover:not(:disabled) {background: var(--color-action-hover); border-color: var(--color-action-hover)}
.button--soft {background: var(--color-action-soft); border-color: var(--color-action-border); color: var(--color-action)}
.button--soft:hover:not(:disabled) {background: var(--color-action-soft-hover)}
.button--quiet {background: transparent; border-color: transparent; color: var(--color-secondary)}
.button--danger {background: var(--color-danger); border-color: var(--color-danger); color: var(--color-surface)}
.button--danger:hover:not(:disabled) {background: var(--color-danger-hover); border-color: var(--color-danger-hover)}
.button--dangerQuiet {background: transparent; border-color: transparent; color: var(--color-danger)}
.button--dangerQuiet:hover:not(:disabled) {background: transparent; color: var(--color-danger-hover)}
.button--icon {width: var(--control-height); min-width: var(--control-height); padding: 10px}
.button:disabled {opacity: .5; cursor: default}
.button[aria-busy=true] {opacity: .8; cursor: progress}
.button[aria-busy=true] .icon {animation: ui-spin 1s linear infinite}
:where(button,input,select,textarea,summary,a,[tabindex]):focus-visible {outline: 2px solid var(--color-action); outline-offset: 2px}
.fieldControl {display: block; width: 100%; min-width: 0; min-height: var(--control-height); margin-top: 5px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); padding: 10px; background: var(--color-surface); color: var(--color-heading); font: var(--weight-normal) var(--font-control)/1.3 var(--font-family)}
.fieldControl::placeholder {color: var(--color-placeholder); opacity: 1}
.fieldControl:hover:not(:disabled) {border-color: var(--color-secondary)}
.fieldControl:disabled {background: var(--color-page); color: var(--color-muted); cursor: default}
.fieldControl[aria-invalid=true], .phone:has([aria-invalid=true]) {border-color: var(--color-danger)}
.fieldError {display: block; margin-top: var(--space-1); font-size: var(--font-label); font-weight: var(--weight-normal); line-height: 1.4; color: var(--color-danger)}
.fieldError:empty {display: none}
.notice {padding: var(--space-3); border: 1px solid var(--color-info-border); border-radius: var(--radius-control); background: var(--color-info-bg); color: var(--color-text); font-size: var(--font-table); line-height: 1.4; overflow-wrap: anywhere}
.notice[data-tone=error] {background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger)}
.notice[data-tone=warning] {background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-text)}
.notice:is([data-tone=warning],[data-tone=error]):not(:empty) {display: flex; align-items: flex-start; gap: var(--space-2)}
.notice:is([data-tone=warning],[data-tone=error]) > .icon {margin-top: 1px; color: var(--color-danger)}
.noticeBody {min-width: 0}
.notice[data-tone=warning] strong {color: var(--color-danger); font-size: var(--font-body)}
.notice[data-tone=success] {background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success)}
.notice strong {display: block; margin-bottom: var(--space-1)}
@keyframes ui-spin {to {transform: rotate(360deg)}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation: none !important; transition: none !important; scroll-behavior: auto !important}}
@media(prefers-reduced-motion:no-preference) {.button,.fieldControl {transition: background-color var(--motion-fast), border-color var(--motion-fast)}}
@media(prefers-reduced-motion:no-preference) {
  dialog[open] {animation: dialog-enter 140ms ease-out;}
}
@keyframes dialog-enter {from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)}}

.confirmDialog {width: min(420px,calc(100vw - 32px)); border: 1px solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-6); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-notice)}
.confirmDialog::backdrop {background: var(--color-backdrop)}
.confirmDialog h2 {font-size: 20px; color: var(--color-heading); margin: 0 0 var(--space-3)}
.confirmDialog p {margin: 0 0 var(--space-5)}
.dialogActions {display: flex; flex-direction: column; gap: var(--space-2)}

/* Editor decisions sit in the top layer; the form keeps its position behind them. */
dialog.editorDecision {width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:18px;border:0;border-radius:12px;overflow:auto;overscroll-behavior:contain;}
.editorDecision h2 {font-size:18px;line-height:1.3;margin:0 0 10px;}
#confirmation.editorDecision h2 {color:var(--color-danger);}
.editorDecision :is(#removeContext,#editConfirmContext) {margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--color-secondary);overflow-wrap:anywhere;}
.editorDecision :is(#removeContext,#editConfirmContext) p {margin:6px 0;}
.editorDecision .pair {gap:8px;align-items:stretch;margin-top:12px;}
.editorDecision .pair .button {width:100%;min-height:40px;padding:8px 10px;}
.decisionChoices {display:flex;flex-direction:column;gap:8px;margin:12px 0 8px;}
.decisionChoice {display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:10px 12px;text-align:left;white-space:normal;line-height:1.3;}
.decisionChoice small {display:block;font-size:12px;font-weight:400;line-height:1.35;opacity:.85;}
.editorDecision .decisionChoices + .button {width:100%;min-height:40px;}
@media(max-width:760px) {dialog.editorDecision {padding:16px;max-height:calc(100dvh - 24px);}}

.decisionHeader {display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;}
.decisionHeader h2 {flex:1;margin:3px 0 0;}
.decisionHeader .button {flex:0 0 32px;width:32px;min-width:32px;min-height:32px;padding:5px;margin:-4px -4px 0 0;}