/*
 * Shell-owned appearance contract for application chrome.
 *
 * Apps compose the semantic classes below and keep only their own layout and
 * domain styling locally. All neutral shades are derived from the signed-in
 * profile's solid widget surface. Every foreground comes from the shell's
 * contrast-picked ink instead of assuming a light-on-dark theme.
 */
:root,
.theme-scope {
  --ui-surface: var(--shell-surface, #161616);
  --ui-ink: var(--shell-surface-ink, #f5f5f5);
  --ui-muted-ink: color-mix(in srgb, var(--ui-ink) 64%, var(--ui-surface));
  --ui-highlight: color-mix(in srgb, var(--ui-surface), #fff 58%);
  --ui-light: color-mix(in srgb, var(--ui-surface), #fff 20%);
  --ui-raised: color-mix(in srgb, var(--ui-surface), var(--ui-ink) 7%);
  --ui-hover: color-mix(in srgb, var(--ui-surface), var(--ui-ink) 13%);
  --ui-sunken: color-mix(in srgb, var(--ui-surface), #000 38%);
  --ui-dark: color-mix(in srgb, var(--ui-surface), #000 72%);
  --ui-border: color-mix(in srgb, var(--ui-surface), var(--ui-ink) 22%);
  --ui-grid: color-mix(in srgb, var(--ui-surface), var(--ui-ink) 14%);
  --ui-accent: var(--shell-accent, #4a9eff);
  --ui-accent-mid: var(--shell-accent-mid, #254a70);
  --ui-accent-mid-ink: var(--shell-accent-ink, #f2f2f2);
  --ui-accent-dark: var(--shell-accent-dark, #1d3a57);
  --ui-accent-dark-ink: var(--shell-accent-dark-ink, #f5f5f5);
  --ui-accent-strong: var(--shell-accent-strong, #3a6fa8);
  --ui-danger: color-mix(in srgb, var(--ui-surface), #b92828 22%);
  --ui-danger-border: color-mix(in srgb, var(--ui-border), #b92828 55%);
  --ui-danger-ink: var(--ui-ink);
  --ui-field: var(--shell-field, #111111);
  --ui-field-ink: var(--shell-field-ink, #f5f5f5);
  --ui-field-muted: color-mix(in srgb, var(--ui-field-ink) 58%, var(--ui-field));
}

.chrome-window {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: min(var(--shell-radius, 0px), 28px);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow:
    inset 1px 1px var(--ui-light),
    inset -1px -1px var(--ui-dark),
    4px 5px 18px rgb(0 0 0 / 45%);
  font-family: var(--shell-font, Arial, Tahoma, sans-serif);
}

.chrome-titlebar {
  min-height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 2px 2px 0;
  padding: 0 .3rem 0 .35rem;
  background: linear-gradient(90deg, var(--ui-accent-dark), var(--ui-accent-mid));
  color: var(--ui-accent-mid-ink);
}

.chrome-titlebar-icon {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--ui-dark);
  background: var(--ui-surface);
  box-shadow: inset 1px 1px var(--ui-highlight), inset -2px -2px var(--ui-sunken);
}

.chrome-titlebar-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 2px;
  top: 4px;
  height: 1px;
  background: var(--ui-muted-ink);
  box-shadow: 0 3px var(--ui-muted-ink), 0 6px var(--ui-muted-ink);
}

.chrome-body {
  margin: 0 2px 2px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: inset 1px 1px var(--ui-dark), inset -1px -1px var(--ui-light);
}

.chrome-button {
  border: 1px solid var(--ui-border);
  border-radius: min(var(--shell-radius, 0px), 8px);
  background: var(--ui-raised);
  color: var(--ui-ink);
  box-shadow: inset 1px 1px var(--ui-light), inset -1px -1px var(--ui-dark);
  font-family: var(--shell-font, Arial, Tahoma, sans-serif);
  transition: none;
  cursor: pointer;
}

.chrome-button:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}

.chrome-button:active {
  box-shadow: inset 1px 1px var(--ui-dark), inset -1px -1px var(--ui-light);
}

.chrome-button:focus-visible,
.chrome-field:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -4px;
}

.chrome-button-primary {
  border-color: var(--ui-accent-strong);
  background: var(--ui-accent-dark);
  color: var(--ui-accent-dark-ink);
}

.chrome-button-primary:hover {
  background: var(--ui-accent-mid);
  color: var(--ui-accent-mid-ink);
}

.chrome-button-danger {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger);
  color: var(--ui-danger-ink);
}

.chrome-field {
  border: 1px solid var(--ui-border);
  border-radius: min(var(--shell-radius, 0px), 8px);
  background: var(--ui-field);
  color: var(--ui-field-ink);
  caret-color: var(--ui-field-ink);
  box-shadow: inset 1px 1px var(--ui-dark), inset -1px -1px var(--ui-light);
  font: inherit;
}

.chrome-field::placeholder {
  color: var(--ui-field-muted);
  opacity: 1;
}

select.chrome-field option {
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.chrome-row {
  border: 1px solid var(--ui-border);
  background: var(--ui-raised);
  color: var(--ui-ink);
  box-shadow: inset 1px 1px var(--ui-light);
}

.chrome-muted {
  color: var(--ui-muted-ink);
}

.theme-layout {
  column-gap: var(--shell-space, 1rem);
  row-gap: var(--shell-space, 1rem);
}