/* Shared controls. Layout and business-specific styling stay in each app. */
.cn-brand-icon { display: block; width: 100%; height: 100%; flex-shrink: 0; }
:is(.portal-brand-mark, .brand-mark, .brandmark):has(.cn-brand-icon) { background: transparent; flex-shrink: 0; }
:root {
  color-scheme: light;
  accent-color: var(--cn-blue);
  scrollbar-color: var(--cn-scroll-thumb) transparent;
  scrollbar-width: thin;
}

*, *::before, *::after { box-sizing: border-box; }
:where(button, input, select, textarea) { font: inherit; }
:where(button, a, input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}
::selection { color: var(--cn-ink); background: var(--cn-blue-soft); }
:where(*) { scrollbar-color: var(--cn-scroll-thumb) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: var(--cn-scroll-thumb); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

button, .cn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cn-control-height);
  padding: 9px 14px;
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius-sm);
  background: var(--cn-surface);
  color: var(--cn-ink);
  font-size: .875rem;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--cn-motion-fast), border-color var(--cn-motion-fast), box-shadow var(--cn-motion-fast);
}
button:hover:where(:not(:disabled)), .cn-button:hover:where(:not([aria-disabled="true"])) { background: var(--cn-control-hover); border-color: var(--cn-border); }
button.primary, .cn-button.primary, .portal-button.primary, .auth-form button[type="submit"] {
  color: white;
  background: var(--cn-blue);
  border-color: var(--cn-blue);
}
button.primary:hover:not(:disabled), .cn-button.primary:hover:not([aria-disabled="true"]), .portal-button.primary:hover, .auth-form button[type="submit"]:hover:not(:disabled) {
  background: #0077ed;
  border-color: #0077ed;
}
button.primary:disabled, .auth-form button[type="submit"]:disabled { background: var(--cn-blue); border-color: var(--cn-blue); }
button.danger, .cn-button.danger { color: var(--cn-red); }
button.danger:hover:not(:disabled), .cn-button.danger:hover:not([aria-disabled="true"]) { border-color: #c9343433; background: #fff4f4; }
button:disabled, .cn-button[aria-disabled="true"] {
  cursor: default;
  opacity: .45;
  box-shadow: none;
}
button:disabled:hover { border-color: var(--cn-border); }
.icon-button, .cn-icon-button { width: 36px; min-width: 36px; min-height: 36px; padding: 8px; }
svg.icon {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle; pointer-events: none;
}

/* These selectors beat legacy page input rules without touching hidden chip inputs. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
textarea:not([hidden]), select:not([hidden]) {
  min-height: var(--cn-control-height);
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cn-field-border, var(--cn-border));
  border-radius: var(--cn-radius-sm);
  color: var(--cn-field-ink, var(--cn-ink));
  background-color: var(--cn-field-surface, var(--cn-surface));
  font-size: .875rem;
  line-height: 1.5;
  transition: border-color var(--cn-motion-fast), box-shadow var(--cn-motion-fast);
}
textarea { resize: vertical; }
input:not([hidden]), select:not([hidden]) { resize: none; }
input::placeholder, textarea::placeholder { color: var(--cn-subtle); opacity: 1; }
:is(input, textarea, select):disabled {
  --cn-field-surface: var(--cn-control-disabled);
  --cn-field-ink: var(--cn-muted);
  cursor: default;
  opacity: .65;
}
:is(input, textarea)[readonly] { --cn-field-surface: var(--cn-control-disabled); }
input[type="date"] { color-scheme: light; }
.search input { padding-inline-start: 40px !important; }
.search svg.icon { top: 50%; transform: translateY(-50%); color: var(--cn-subtle); }

/* Native select fallback retains OS picker, keyboard, labels and FormData. */
select:not([multiple]):not([size]) {
  appearance: none;
  padding-inline-end: 38px;
  background-image: url("/assets/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
select:not([multiple]):not([size]):hover:not(:disabled):not(:focus-visible):not(:open):not([aria-invalid="true"]):not(:user-invalid) { --cn-field-border: #a1a1aa; }
select:disabled { cursor: default; }
select[multiple], select[size] { padding: 6px; }
select[multiple] option, select[size] option { padding: 8px 10px; border-radius: 6px; }

/* Progressive enhancement: the browser manages the picker in its top layer. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) {
    padding-inline-end: 12px;
    background-image: none;
    gap: 12px;
    align-items: center;
    overflow: hidden;
  }
  select:not([multiple]):not([size])::picker-icon {
    content: "";
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-inline-start: auto;
    background: var(--cn-muted);
    mask: url("/assets/icons/chevron-down.svg") center / contain no-repeat;
    transition: rotate var(--cn-motion-fast);
  }
  select:open::picker-icon { rotate: 180deg; }
  select:open { --cn-field-border: var(--cn-blue); box-shadow: 0 0 0 3px var(--cn-focus-ring); }
  select:not([multiple]):not([size])::picker(select) {
    padding: 5px;
    margin-block: 6px;
    border: 1px solid var(--cn-divider);
    border-radius: var(--cn-radius-md);
    background: var(--cn-surface);
    color: var(--cn-ink);
    box-shadow: var(--cn-shadow-menu);
    min-inline-size: anchor-size(width);
    max-inline-size: min(36rem, calc(100vw - 24px));
    max-block-size: min(22rem, 50dvh);
    overflow: auto;
    overscroll-behavior: contain;
  }
  select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cn-ink);
    font-size: .875rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  select:not([multiple]):not([size]) option:checked { background: var(--cn-blue-soft); color: var(--cn-blue); font-weight: 500; }
  select:not([multiple]):not([size]) option:is(:hover, :focus-visible):not(:disabled) { background: #f0f0f4; }
  select:not([multiple]):not([size]) option:focus-visible { outline: 2px solid var(--cn-focus-ring); outline-offset: -2px; }
  select:not([multiple]):not([size]) option:disabled { color: var(--cn-subtle); opacity: .6; }
  select:not([multiple]):not([size]) option::checkmark {
    content: "";
    order: 1; margin-inline-start: auto;
    flex-shrink: 0; width: 16px; height: 16px;
    background: currentColor;
    mask: url("/assets/icons/check.svg") center / contain no-repeat;
  }
  select optgroup { color: var(--cn-muted); font-size: .75rem; padding: 8px 0; }
}

input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.choice-chips input) {
  appearance: none;
  position: relative;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: 18px; height: 18px; min-height: 18px;
  padding: 0; margin: 0;
  border: 1px solid var(--cn-field-border, #aeaeb6);
  border-radius: var(--cn-choice-radius, 5px);
  background: var(--cn-surface);
  vertical-align: middle;
  cursor: pointer;
}
input:is([type="checkbox"], [type="radio"]):not([role="switch"]):not(.choice-chips input):checked,
input[type="checkbox"]:indeterminate { background: var(--cn-blue); border-color: var(--cn-blue); }
input[type="checkbox"]:not([role="switch"]):not(.choice-chips input):is(:checked, :indeterminate)::after {
  content: "";
  width: 14px; height: 14px;
  background: white;
  mask: url("/assets/icons/check.svg") center / contain no-repeat;
}
input[type="checkbox"]:indeterminate::after { mask-image: url("/assets/icons/minus.svg") !important; }
input[type="radio"]:not(.choice-chips input) { --cn-choice-radius: 50%; }
input[type="radio"]:not(.choice-chips input):checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: white; }
input:is([type="checkbox"], [type="radio"]):disabled { cursor: default; opacity: .45; }

input[role="switch"][type="checkbox"] {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 42px; height: 26px; min-height: 26px;
  margin: 0; padding: 0; border: 0; border-radius: 99px;
  background: var(--cn-border); cursor: pointer;
  transition: background-color var(--cn-motion-fast);
}
input[role="switch"][type="checkbox"]::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%; background: white;
  box-shadow: 0 1px 3px #1d1d1f26;
  transition: transform var(--cn-motion-fast);
}
input[role="switch"][type="checkbox"]:checked { background: var(--cn-blue); }
input[role="switch"][type="checkbox"]:checked::after { transform: translateX(16px); }
input[role="switch"][type="checkbox"]:disabled { cursor: default; opacity: .45; }
.choice-chips input:disabled + span { opacity: .45; cursor: default; }
.choice-chips input:not(:disabled) + span { transition: background-color var(--cn-motion-fast), border-color var(--cn-motion-fast); }
.choice-chips label:hover input:not(:disabled) + span { border-color: var(--cn-border); }
.choice-chips label:hover input:checked + span { border-color: var(--cn-blue); }

:is(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--cn-focus-ring);
  outline-offset: 3px;
}
:is(input, textarea, select):focus-visible { --cn-field-border: var(--cn-blue); }
:is(input, textarea, select):is([aria-invalid="true"], :user-invalid) { --cn-field-border: var(--cn-red); }
:is(input, textarea, select):is([aria-invalid="true"], :user-invalid):focus-visible { outline-color: #c9343433; }
.choice-chips input:focus-visible + span { outline: 3px solid var(--cn-focus-ring); outline-offset: 3px; }
.identity-option:focus-within { outline: 3px solid var(--cn-focus-ring); outline-offset: 3px; }

details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--cn-muted);
  min-height: 36px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "";
  width: 14px; height: 14px; flex-shrink: 0;
  background: currentColor;
  mask: url("/assets/icons/chevron-down.svg") center / contain no-repeat;
  rotate: -90deg;
  transition: rotate var(--cn-motion-fast);
}
details[open] > summary::before { rotate: 0deg; }
.dialog { box-shadow: var(--cn-shadow-dialog); }
.dialog-body, .cn-scroll-area { scrollbar-gutter: stable; overscroll-behavior: contain; }
.table-scroll { overscroll-behavior-inline: contain; }
.proof-check { display: flex; align-items: center; gap: 8px; }
.proof-check .icon { width: 16px; height: 16px; color: var(--cn-muted); }
.proof-check.complete .icon { color: var(--cn-green); }
.hero-link { display: inline-flex; align-items: center; gap: 6px; }
.hero-link .icon { width: 16px; height: 16px; }

@media (pointer: coarse) {
  :root { --cn-control-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  textarea:not([hidden]), select:not([hidden]) { font-size: 16px; }
  .icon-button, .cn-icon-button { width: 44px; min-width: 44px; min-height: 44px; }
  select:not([multiple]):not([size]) option { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  input:is([type="checkbox"], [type="radio"]) { appearance: auto !important; }
  input:is([type="checkbox"], [type="radio"])::after { display: none; }
  select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
  select::picker-icon, details > summary::before { background: CanvasText; }
  :is(button, a, input, textarea, select, summary):focus-visible { outline-color: Highlight; }
}