/* Shared component contract. Brand colors/fonts live only in brand/brand.css.
   View styles own placement; this file owns control geometry and interaction states. */
:root {
  --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px;
  --ui-space-4:16px; --ui-space-5:24px; --ui-space-6:32px;
  --ui-control-height:40px; --ui-control-padding:12px;
  --ui-control-radius:10px; --ui-panel-radius:16px;
  --ui-field-wide-width:240px;
  --ui-line:1px solid var(--color-mist);
  --ui-focus:2px solid var(--color-cobalt);
}
:where(.ui-button,.ui-field,.ui-dialog,.ui-panel,.ui-card,.ui-toolbar,.ui-segmented,.ui-tabs,.ui-disclosure),:where(.ui-dialog,.ui-panel,.ui-card,.ui-toolbar,.ui-segmented,.ui-tabs,.ui-disclosure) * { box-sizing:border-box; }
:where(button,input,select,textarea,a,summary) { -webkit-tap-highlight-color:transparent; }
:where(button,input,select,textarea,a,summary,[tabindex]):focus-visible {
  outline:var(--ui-focus); outline-offset:3px;
}
.ui-button {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ui-space-2);
  min-height:var(--ui-control-height); min-width:0; max-width:100%;
  padding:8px var(--ui-control-padding); border:var(--ui-line);
  border-radius:var(--ui-control-radius); background:var(--color-white);
  color:var(--color-ink); font:500 12px/1.5 var(--font-body);
  text-align:center; text-decoration:none; white-space:normal; overflow-wrap:anywhere;
  cursor:pointer; flex-shrink:0;
}
.ui-button:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color:transparent; background:var(--color-tint);
}
.ui-button--primary { background:var(--color-cobalt); border-color:var(--color-cobalt); color:var(--color-white); }
.ui-button--primary:hover:not(:disabled) { background:var(--color-ink); border-color:var(--color-ink); }
.ui-button--quiet { background:transparent; border-color:transparent; }
.ui-button--icon { width:var(--ui-control-height); padding:8px; font-size:18px; }
.ui-button:disabled,.ui-button[aria-disabled="true"],.ui-field:disabled {
  opacity:.45; cursor:not-allowed; box-shadow:none;
}
.ui-field {
  display:block; min-width:0; max-width:100%; min-height:var(--ui-control-height);
  border:var(--ui-line); border-radius:var(--ui-control-radius);
  padding:9px var(--ui-control-padding); background-color:var(--color-white);
  color:var(--color-ink); font:400 12px/1.5 var(--font-body);
}
.ui-toolbar>.ui-field.ui-field--wide { flex:0 0 var(--ui-field-wide-width); min-width:var(--ui-field-wide-width); }
.ui-field::placeholder { color:var(--color-slate); opacity:1; }
select.ui-field {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  /* 12px inset + 12px icon + 12px text clearance. */
  padding-inline-end:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-slate) 50%),linear-gradient(135deg,var(--color-slate) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  text-overflow:ellipsis;
}
select.ui-field:dir(rtl) { background-position:17px 50%,12px 50%; }
label.ui-field { display:flex; gap:var(--ui-space-2); align-items:center; }
label.ui-field:focus-within { outline:var(--ui-focus); outline-offset:3px; }
label.ui-field>input { width:100%; min-width:0; border:0; padding:0; background:transparent; font:inherit; color:inherit; outline:none; }
textarea.ui-field { min-height:160px; resize:vertical; }
.ui-toolbar { display:flex; flex-wrap:wrap; gap:var(--ui-space-3); align-items:center; }
/* One rounded selection surface, with no enclosing nested box. */
.ui-segmented { display:flex; align-items:stretch; gap:4px; padding:0; border:0; background:transparent; }
.ui-segmented>.ui-button { min-height:var(--ui-control-height); padding:8px 16px; border:0; border-radius:12px; background:transparent; color:var(--color-slate); }
.ui-segmented>.ui-button[aria-pressed="true"] { background:var(--color-white); color:var(--color-ink); font-weight:600; }
.ui-segmented>.ui-button:hover:not(:disabled) { background:color-mix(in srgb,var(--color-white) 70%,transparent); color:var(--color-ink); }
.ui-panel { min-width:0; border:0; border-radius:var(--ui-panel-radius); background:transparent; box-shadow:none; }
.ui-card { min-width:0; padding:20px; border:1px solid transparent; border-radius:var(--ui-panel-radius); background:var(--color-white); color:var(--color-ink); overflow-wrap:anywhere; box-shadow:none; }
.ui-card--interactive { cursor:pointer; text-align:left; }
.ui-card--interactive:hover { background:color-mix(in srgb,var(--color-white) 85%,var(--color-mist)); }
.ui-card--interactive[aria-pressed="true"] { border-color:color-mix(in srgb,var(--color-cobalt) 50%,var(--color-white)); background:var(--color-white); }
.ui-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:0; border:0; }
.ui-tabs>.ui-button { border:0; border-radius:10px; padding-inline:12px; background:transparent; color:var(--color-slate); }
.ui-tabs>.ui-button:hover:not(:disabled) { background:var(--color-ivory); }
.ui-tabs>.ui-button[aria-pressed="true"] { background:var(--color-ivory); color:var(--color-ink); font-weight:600; }
.ui-disclosure>summary { min-height:var(--ui-control-height); display:flex; align-items:center; gap:var(--ui-space-3); cursor:pointer; list-style:none; }
.ui-disclosure>summary::-webkit-details-marker { display:none; }
.ui-disclosure>summary::before { display:none; }
.ui-disclosure>summary>.ui-icon { color:var(--color-slate); transition:transform .15s; }
.ui-disclosure[open]>summary>.ui-icon { transform:rotate(90deg); }
.ui-dialog { width:min(650px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:auto; padding:var(--ui-space-5); border:var(--ui-line); border-radius:var(--ui-panel-radius); color:var(--color-ink); background:var(--color-white); font:400 14px/1.6 var(--font-body); }
.ui-dialog::backdrop { background:color-mix(in srgb,var(--color-ink) 45%,transparent); }
.ui-dialog h3 { margin:0 0 var(--ui-space-4); font-size:18px; }
.ui-dialog .ui-field { width:100%; }
@media(pointer:coarse) { :root { --ui-control-height:44px; } }
@media(max-width:600px) {
  /* Match buttons to the 16px fields even on narrow desktop windows. */
  :root { --ui-control-height:44px; }
  input.ui-field,select.ui-field,textarea.ui-field,label.ui-field { font-size:16px; }
  .ui-toolbar>.ui-field.ui-field--wide { flex:1 1 100%; min-width:0; width:100%; }
  .ui-dialog { padding:var(--ui-space-4); }
}
@media(forced-colors:active) { select.ui-field { appearance:auto; background-image:none; padding-inline-end:12px; } }
.ui-button--link { padding-inline:0; border-color:transparent; justify-content:flex-start; text-align:left; }
.ui-button--link:hover:not(:disabled) { background:transparent; border-color:transparent; text-decoration:underline; text-underline-offset:3px; }
.ui-button--row { width:100%; justify-content:flex-start; padding:12px var(--ui-space-3); border:0; border-radius:10px; background:transparent; text-align:left; }

/* Links stay in the prose; external resources are never rendered as extra cards. */
.resource-link { color:var(--color-cobalt); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.resource-link:hover { color:var(--color-ink); text-decoration-thickness:2px; }
.resource-link:visited { color:var(--color-slate); }

/* Modal structure is shared even when a feature keeps a persistent dialog. */
.ui-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ui-space-4); margin-bottom:var(--ui-space-5); }
.ui-dialog-header h2 { min-width:0; margin:0; font:600 23px/1.35 var(--font-display); letter-spacing:-.5px; overflow-wrap:anywhere; }
.ui-dialog-header>.ui-button { flex-shrink:0; }
.ui-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ui-space-3); margin-top:var(--ui-space-4); }
.ui-button--secondary { border-color:var(--color-mist); background:var(--color-white); }
.ui-button--secondary:hover:not(:disabled) { border-color:var(--color-slate); }
.ui-description { margin:0 0 var(--ui-space-4); color:var(--color-slate); line-height:1.7; overflow-wrap:anywhere; }
.ui-notice { padding:var(--ui-space-4); margin:var(--ui-space-4) 0; background:var(--color-ivory); border-radius:var(--ui-control-radius); overflow-wrap:anywhere; }
.ui-notice:empty { display:none; }
.ui-section { padding:var(--ui-space-4); margin-block:var(--ui-space-4); border:var(--ui-line); border-radius:var(--ui-panel-radius); }
.ui-section h3 { margin:0 0 var(--ui-space-2); }
@media(max-width:600px) {
  .ui-dialog-header h2 { font-size:20px; }
  .ui-actions>.ui-button { flex:1 1 auto; }
}