@import url('./fonts/fonts.css');
@import url('./tokens.css');
/* Component variants. Legacy class aliases allow every existing renderer and
   translated label to use the same rules. New markup uses ui-* and data-variant.
   No business-specific routes, labels or behaviours belong in this file. */
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act,button.submit){
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ui-target);min-width:44px;padding:10px 20px;
  border:1px solid var(--ui-fill);border-radius:var(--ui-radius-capsule);
  background-color:var(--ui-fill);background-image:var(--ui-sheen);color:var(--ui-on-fill);
  box-shadow:var(--ui-lift);font:600 var(--ui-type-button)/1.35 var(--ui-sans);
  text-align:center;text-decoration:none;white-space:normal;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,box-shadow .2s ease,transform .2s ease;
}
:is(.btn,button.submit){width:100%;min-height:var(--ui-target-primary)}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act):is([data-variant=secondary],.sec,.ghost){
  border-color:var(--ui-rule-strong);background-color:transparent;background-image:var(--ui-sheen-outline);
  color:var(--ui-text);box-shadow:var(--ui-lift-outline);
}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act):is([data-variant=destructive],.bad,.danger){
  background-color:transparent;background-image:var(--ui-sheen-outline);color:var(--ui-bad);
  border-color:var(--ui-bad);box-shadow:var(--ui-lift-outline);
}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act):is([data-variant=tertiary],.quiet,.text){
  background:transparent;border-color:transparent;color:var(--ui-muted);box-shadow:none;
  padding-inline:6px;text-decoration:underline;text-underline-offset:3px;font-weight:400;
}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act):is([data-size=compact],.sm,.small){padding:8px 14px;min-height:44px;font-size:var(--ui-type-button)}
@media(hover:hover){
  :is(.ui-button,.btn,button.primary,button.danger,button.act,a.act,button.submit):hover:not(:disabled){filter:brightness(1.06);box-shadow:var(--ui-lift-hover);transform:translateY(-1px)}
  :is(.ui-button,.btn,button.primary,button.danger,button.act,a.act):is(.sec,.ghost,[data-variant=secondary]):hover:not(:disabled){background-color:var(--ui-wash);box-shadow:var(--ui-lift-outline-hover)}
}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act,button.submit):active:not(:disabled){box-shadow:var(--ui-pressed);transform:translateY(0)}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act,button.submit):disabled,
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act)[aria-disabled=true]{
  background:transparent;color:var(--ui-muted);border-color:var(--ui-rule);box-shadow:none;filter:none;
  cursor:not-allowed;opacity:1;transform:none;
}
:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act):is(.quiet,.text,[data-variant=tertiary]):disabled{border-color:transparent}
/* Shared selection variants: segmented for peer views; choice for an answer.
   Their native checked/pressed/expanded state remains the accessibility truth. */
:is(.ui-segments,.devtabs){display:flex;align-items:stretch;gap:3px;padding:3px;border:1px solid var(--ui-rule-strong);border-radius:999px;background:var(--ui-surface)}
:is(.ui-segments>button,.devtab){flex:1 1 0;min-width:0;min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--ui-muted);font:600 var(--ui-type-button)/1.3 var(--ui-sans);cursor:pointer}
:is(.ui-segments>button,.devtab):is(.on,[aria-pressed=true],[aria-selected=true]){background-color:var(--ui-fill);background-image:var(--ui-sheen);color:var(--ui-on-fill);box-shadow:var(--ui-lift)}
:is(.ui-choice,.choice,.opt,.devopt){
  min-height:48px;gap:12px;padding:12px 16px;border:1px solid var(--ui-rule-strong);
  border-radius:var(--ui-radius-control);background:transparent;color:var(--ui-text);
  font:400 var(--ui-type-body)/1.45 var(--ui-sans);text-align:left;box-shadow:none;
}
:is(.ui-choice,.choice,.opt,.devopt):is(.on,[aria-pressed=true],[aria-checked=true]),
:is(.ui-choice,.opt):has(input:checked){border-color:var(--ui-fill);background:var(--ui-wash);color:var(--ui-text)}
.choice .choicetick{color:var(--ui-fill)}
:is(.ui-choice,.choice,.opt,.devopt):hover{background:var(--ui-wash)}
:is(.ui-choice,.opt) input:is([type=checkbox],[type=radio]){width:18px;height:18px;flex:none;accent-color:var(--ui-fill)}
/* Labelled checkboxes stay checkboxes, not switches. The label owns the target. */
:is(.ui-check,.testtoggle,.consent){display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-family:var(--ui-sans)}
:is(.ui-check,.testtoggle,.consent) input{width:18px;height:18px;min-height:18px;min-width:18px;margin:0;flex:none;accent-color:var(--ui-fill)}
/* Compact field variant, with a 16px input floor on phones. */
.ui-field{display:grid;gap:var(--ui-gap-label);min-width:0}
.ui-field>label{font-size:var(--ui-type-label);font-weight:500;color:var(--ui-text)}
:is(.ui-input,.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),.field select,.field textarea){
  min-width:0;min-height:44px;width:100%;padding:var(--control-pad-y,11px) var(--control-pad-x,14px);padding-inline-end:var(--control-pad-end,var(--control-pad-x,14px));border:1px solid var(--ui-rule-strong);
  border-radius:var(--ui-radius-control);background-color:var(--ui-surface);color:var(--ui-text);
  font:400 var(--control-font,var(--ui-type-input))/1.5 var(--ui-sans);box-shadow:none;
}
:is(.ui-input,.field input,.field select,.field textarea):is([aria-invalid=true],.bad){border-color:var(--ui-bad)}
:is(.ui-actions,.actions,.acts){gap:12px;align-items:stretch}
.ui-actions{display:flex;flex-wrap:wrap;margin-top:var(--ui-gap-action)}
.ui-actions[data-align=end]{justify-content:flex-end}
.ui-stack{display:grid;gap:var(--ui-space-4)}
.ui-stack[data-gap=section]{gap:var(--ui-gap-section)}
.ui-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;min-width:0;padding:12px 0;border-bottom:1px solid var(--ui-rule)}
.ui-panel{background:var(--ui-surface);border:1px solid var(--ui-rule);border-radius:var(--ui-radius-control);padding:20px}
.ui-panel[data-variant=section]{background:transparent;border:0;border-radius:0;padding:0}
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--ui-fill);outline-offset:3px}
@media(max-width:640px){.ui-actions{flex-direction:column}.ui-row{align-items:flex-start;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){:is(.ui-button,.btn,button.primary,button.danger,button.act,a.act,button.submit){transition:none;transform:none}}

/* Native select behaviour, with one consistently inset indicator. */
:is(.ui-select,.field select):not([multiple]){
 appearance:none;-webkit-appearance:none;--control-pad-end:44px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%239dafcc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px;
}
.ui-icon-button{
 display:inline-flex;align-items:center;justify-content:center;flex:none;
 width:44px;min-width:44px;height:44px;padding:0;border:1px solid var(--ui-rule-strong);border-radius:50%;
 background-color:transparent;background-image:var(--ui-sheen-outline);color:var(--ui-text);
 box-shadow:var(--ui-lift-outline);font:400 22px/1 var(--ui-sans);cursor:pointer;
}
.ui-icon-button:hover{background-color:var(--ui-wash);box-shadow:var(--ui-lift-outline-hover)}
.ui-icon-button:active{box-shadow:var(--ui-pressed)}
.ui-icon-button[aria-expanded=true]{background-color:var(--ui-fill);color:var(--ui-on-fill);background-image:var(--ui-sheen)}
@media(forced-colors:active){:is(.ui-select,.field select):not([multiple]){appearance:auto;background-image:none}}

/* Origination List/Board control, in the active surface's colour variant. */
.ui-view-switch{display:inline-flex;padding:3px;margin-bottom:6px;border:1px solid var(--ui-rule-strong);border-radius:999px;background:var(--ui-surface)}
.ui-view-switch button{appearance:none;border:0;background:transparent;color:var(--ui-muted);font:600 12.5px/1 var(--ui-sans);min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;box-shadow:none}
.ui-view-switch button:hover{color:var(--ui-text);background:var(--ui-wash);transform:none}
.ui-view-switch button.on{background:var(--ui-fill);color:var(--ui-on-fill);box-shadow:inset 0 1px 0 #ffffff24,0 1px 2px #04091240}

/* Shared form composition: a field owns its label gap; the stack owns field gaps. */
.ui-form-stack{display:grid;gap:var(--ui-gap-field)}
.ui-form-stack>.ui-field{margin:0;display:grid;gap:var(--ui-gap-label)}
.ui-form-stack>.ui-field>.lbl,.ui-form-stack>.ui-field>input,.ui-form-stack>.ui-field>select{margin:0}

.ui-menu-disclosure{margin:0 0 var(--ui-gap-field);border:1px solid var(--ui-rule);border-radius:var(--ui-radius-control);background:var(--ui-surface)}
.ui-menu-disclosure>summary{display:flex;align-items:center;gap:16px;min-height:56px;padding:12px 18px;list-style:none;cursor:pointer;font:400 var(--ui-type-body)/1.4 var(--ui-sans);color:var(--ui-text)}
.ui-menu-disclosure>summary::-webkit-details-marker{display:none}.ui-menu-disclosure>summary>span:first-of-type{flex:1}
.ui-menu-disclosure .menu-caret{width:8px;height:8px;border-right:1.5px solid var(--ui-muted);border-bottom:1.5px solid var(--ui-muted);transform:rotate(-45deg);flex:none;margin-right:4px}
.ui-menu-disclosure[open]>summary{border-bottom:1px solid var(--ui-rule)}.ui-menu-disclosure[open] .menu-caret{transform:rotate(45deg)}
.ui-menu-disclosure>summary:hover{background:var(--ui-wash)}.menu-disclosure-content{padding:20px;min-width:0}.menu-disclosure-content>.card{margin-top:16px}.menu-disclosure-content>.card:first-child{margin-top:0}