/* SteveTab shared appearance layer. Load after each app's own stylesheet.
   All existing app styling is restored by removing data-steve-appearance=on.
   Sizes, typography, grid geometry and character artwork stay with each app.
   Values below are web design choices, not Apple's native material metrics. */

/* The controller remains available while the enhancement is switched off. */
.appearance-controls {
  width: min(100%, 420px);
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--border, #e8e9ec);
  border-radius: 20px;
  background: var(--surface, #fff);
  color: var(--text, #202123);
  box-shadow: 0 2px 12px #182b2110;
  font-size: 12px;
  line-height: 1.5;
}
.appearance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.appearance-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  cursor: pointer;
}
.appearance-title { font-size: 13px; font-weight: 600; }
.appearance-note {
  margin: 0;
  color: var(--muted, #626a70);
  font-size: 10px;
  line-height: 1.6;
}
.appearance-controls > .appearance-note { text-align: center; }
.appearance-strength {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 4ch;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.appearance-strength > label { white-space: nowrap; color: var(--muted, #626a70); }
.appearance-value {
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
input.appearance-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border, #d8dee0);
  border-radius: 999px;
  background: var(--control, #e9edef);
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms;
}
input.appearance-switch::before {
  content: "";
  position: absolute;
  inset: -8px -1px;
  border-radius: inherit;
}
input.appearance-switch::after {
  content: "";
  position: absolute;
  inset: 3px auto auto 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #152b2533;
  transition: transform 160ms ease;
}
input.appearance-switch:checked {
  background: var(--accent, #287c5c);
  border-color: var(--accent, #287c5c);
}
input.appearance-switch:checked::after { transform: translateX(16px); }
input.appearance-switch:focus-visible,
input.appearance-range:focus-visible { outline: 2px solid var(--accent, #287c5c); outline-offset: 4px; }
input.appearance-range {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent, #287c5c);
  accent-color: var(--accent, #287c5c);
  cursor: pointer;
}
input.appearance-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent, #287c5c) calc(var(--sa-strength, .65) * 100%), var(--control, #e9edef) 0);
}
input.appearance-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--control, #e9edef); }
input.appearance-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent, #287c5c); }
input.appearance-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 1px solid var(--border, #dde3df);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px #17291f33;
}
input.appearance-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border, #dde3df);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px #17291f33;
}
input.appearance-range:disabled { opacity: .45; cursor: default; }

/* Settings share the sheet material; no glass nested inside glass. */
#settings-dialog .appearance-settings {
  width: 100%;
  padding: 16px 0 10px;
  margin-top: 20px;
  border: 0;
  border-top: 1px solid var(--border, #e8e9ec);
  border-radius: 0;
  gap: 8px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#settings-dialog #theme-mode { min-height: 44px; }
#settings-dialog .appearance-label { margin: 0; align-items: flex-start; gap: 2px; }
#settings-dialog .appearance-row { min-height: 44px; }
#settings-dialog .appearance-strength { grid-template-columns: auto minmax(0, 1fr) 4.5ch; gap: 10px; }
#settings-dialog .appearance-strength > label { margin: 0; font-size: 12px; }
#settings-dialog .appearance-value { white-space: nowrap; }

html[data-steve-appearance="on"] {
  --sa-solid: var(--surface, #fff);
  --sa-ink: var(--text, var(--ink, #202123));
  --sa-fill: rgba(255, 255, 255, var(--sa-glass-alpha, .542));
  --sa-dialog-fill: rgba(255, 255, 255, max(.72, var(--sa-glass-alpha, .542)));
  --sa-dialog-blur: max(18px, var(--sa-blur, 18.3px));
  --sa-line: rgba(138, 154, 160, .28);
  --sa-edge: rgba(255, 255, 255, .92);
  --sa-low-edge: rgba(87, 107, 117, .16);
  --sa-rim: conic-gradient(from 145deg, #ffffff08, #ffffffc9 9%, #ffffff0a 24%, #7c989a30 40%, #fffffff2 58%, #ffffff14 75%, #ffffffad 91%, #ffffff08);
  --sa-layer-image: linear-gradient(145deg, #ffffff75, #ffffff05 42%, #d2e8e50c 65%, #ffffff42);
  --sa-shadow: 0 8px 28px rgba(28, 53, 44, var(--sa-shadow-alpha, .0975));
  --sa-content-shadow: 0 3px 16px rgba(28, 53, 44, calc(var(--sa-shadow-alpha, .0975) * .46));
  --sa-ease: cubic-bezier(.2, .8, .2, 1);
  --muted: #626a70;
}
html[data-steve-appearance="on"]:is([data-theme="dark"], [data-stevetab-theme="dark"]) {
  --sa-fill: rgba(30, 36, 41, var(--sa-glass-dark-alpha, .614));
  --sa-dialog-fill: rgba(30, 36, 41, max(.76, var(--sa-glass-dark-alpha, .614)));
  --sa-line: rgba(174, 195, 191, .25);
  --sa-edge: rgba(236, 255, 247, .22);
  --sa-low-edge: rgba(10, 15, 19, .38);
  --sa-rim: conic-gradient(from 145deg, #ffffff05, #def6f75c 9%, #ffffff03 24%, #01060999 40%, #edfaff73 58%, #ffffff08 75%, #dceaff4d 91%, #ffffff05);
  --sa-layer-image: linear-gradient(135deg, rgba(191, 223, 214, .1), rgba(25, 31, 36, 0) 46%, rgba(95, 110, 130, .08));
  --sa-shadow: 0 8px 28px rgba(0, 0, 0, calc(var(--sa-shadow-alpha, .0975) * 1.8));
  --sa-content-shadow: 0 3px 18px rgba(0, 0, 0, calc(var(--sa-shadow-alpha, .0975) * 1.05));
  --muted: #b1b8c2;
}
/* Pets can inherit the system appearance without writing a theme attribute.
   Match that existing route while respecting either app's explicit light mode. */
@media (prefers-color-scheme: dark) {
  html[data-steve-appearance="on"]:not([data-theme="light"]):not([data-stevetab-theme="light"]) {
    --sa-fill: rgba(30, 36, 41, var(--sa-glass-dark-alpha, .614));
    --sa-dialog-fill: rgba(30, 36, 41, max(.76, var(--sa-glass-dark-alpha, .614)));
    --sa-line: rgba(174, 195, 191, .25);
    --sa-edge: rgba(236, 255, 247, .22);
    --sa-low-edge: rgba(10, 15, 19, .38);
  --sa-rim: conic-gradient(from 145deg, #ffffff05, #def6f75c 9%, #ffffff03 24%, #01060999 40%, #edfaff73 58%, #ffffff08 75%, #dceaff4d 91%, #ffffff05);
    --sa-layer-image: linear-gradient(135deg, rgba(191, 223, 214, .1), rgba(25, 31, 36, 0) 46%, rgba(95, 110, 130, .08));
    --sa-shadow: 0 8px 28px rgba(0, 0, 0, calc(var(--sa-shadow-alpha, .0975) * 1.8));
    --sa-content-shadow: 0 3px 18px rgba(0, 0, 0, calc(var(--sa-shadow-alpha, .0975) * 1.05));
    --muted: #b1b8c2;
  }
  html[data-steve-appearance="on"]:not([data-theme="light"]):not([data-stevetab-theme="light"]) dialog::backdrop { background: rgba(0, 5, 8, .54); }
}

/* One stationary background layer gives real transparent controls color
   to diffuse. It neither intercepts input nor consumes an animation loop. */
html[data-steve-appearance="on"] body {
  isolation: isolate;
  background: var(--bg, #f8f9fb);
}


/* Functional surfaces: their original dimensions and border widths survive. */
html[data-steve-appearance="on"] :is(.appearance-controls, .sa-glass, dialog, .composer, .engine-menu, .segments, .segmented),
html[data-steve-appearance="on"] body[data-appearance-app="files"] :is(.tabs, .search-field, .upload-zone),
html[data-steve-appearance="on"] body[data-appearance-app="body"] .composer-card,
html[data-steve-appearance="on"] body[data-appearance-app="pets"] .tabs,
html[data-steve-appearance="on"] body[data-appearance-app="models"] .sidebar,
html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.stevetab-nav, .bottombar, .text-search, .back-top) {
  background-color: var(--sa-fill);
  background-image: var(--sa-layer-image);
  border-color: var(--sa-line);
  box-shadow: inset 0 1px 0 var(--sa-edge), inset 1px 0 0 #ffffff1a, inset 0 -1px 0 var(--sa-low-edge), 0 1px 3px #102b2210, var(--sa-shadow);
  -webkit-backdrop-filter: blur(var(--sa-blur, 18.3px)) saturate(var(--sa-saturation, 1.325));
  backdrop-filter: blur(var(--sa-blur, 18.3px)) saturate(var(--sa-saturation, 1.325));
  transition-property: background-color, border-color, box-shadow;
  transition-duration: var(--sa-duration, 143ms);
  transition-timing-function: var(--sa-ease);
}
html[data-steve-appearance="on"] dialog::backdrop {
  background: rgba(20, 28, 27, .24);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* Text-heavy sheets need a thicker material than short floating controls,
   even when the global intensity reaches 100. The clamp is intentional. */
html[data-steve-appearance="on"] dialog {
  background-color: var(--sa-dialog-fill) !important;
  background-image: var(--sa-layer-image) !important;
  -webkit-backdrop-filter: blur(var(--sa-dialog-blur)) saturate(var(--sa-saturation, 1.325));
  backdrop-filter: blur(var(--sa-dialog-blur)) saturate(var(--sa-saturation, 1.325));
  box-shadow: inset 0 1px 0 var(--sa-edge), inset 0 -1px 0 var(--sa-low-edge), 0 20px 64px rgba(10, 24, 19, .2);
}
html[data-steve-appearance="on"]:is([data-theme="dark"], [data-stevetab-theme="dark"]) dialog::backdrop { background: rgba(0, 5, 8, .54); }

/* Audited page roots are siblings of native dialogs and have no fixed
   descendants. Blur the content once; keep the modal and its focus untouched. */
html[data-steve-appearance="on"] body[data-appearance-app="home"]:has(> dialog:modal) > #app,
html[data-steve-appearance="on"] body[data-appearance-app="files"]:has(> dialog:modal) > .page,
html[data-steve-appearance="on"] body[data-appearance-app="body"]:has(> dialog:modal) > #body-app,
html[data-steve-appearance="on"] body[data-appearance-app="pets"]:has(> dialog:modal) > .canvas,
html[data-steve-appearance="on"] body[data-appearance-app="models"]:has(> dialog:modal) > #app {
  filter: blur(calc(4px + var(--sa-strength, .65) * 6px));
}
html[data-steve-appearance="on"] body:is([data-appearance-app="home"], [data-appearance-app="files"], [data-appearance-app="body"], [data-appearance-app="pets"], [data-appearance-app="models"]) > dialog::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Light follows the rounded edge; this layer never intercepts controls. */
html[data-steve-appearance="on"] :is(.composer, .segments, .engine-menu, dialog)::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--sa-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--sa-strength, .65);
  pointer-events: none;
}

/* Content keeps an opaque reading surface. A fine highlight and a restrained
   shadow improve hierarchy without making a wall of transparent cards. */
html[data-steve-appearance="on"] :is(.sa-solid, .card:not(.composer-card):not(.sa-glass)),
html[data-steve-appearance="on"] body[data-appearance-app="files"] :is(.file-card, .history-row, .transfer-row, .guest-card, .login-card, .load-error),
html[data-steve-appearance="on"] body[data-appearance-app="body"] .pending-panel,
html[data-steve-appearance="on"] body[data-appearance-app="attention"] :is(.task, .exp, .chapter, .review-item, .miscon) {
  background: var(--sa-solid);
  border-color: var(--sa-line);
  box-shadow: inset 0 1px 0 var(--sa-edge), var(--sa-content-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-steve-appearance="on"] body[data-appearance-app="home"] :is(.quota-detail, .paper-card, .expense-row) { background: var(--sa-solid); }
html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.app-shell, .main-panel, .composer-region) { background: transparent; }
html[data-steve-appearance="on"] body[data-appearance-app="models"] :is(.code-block, .reasoning, .table-scroll, .message-file) { background: var(--sa-solid); }

/* A button can catch a highlight without adding another backdrop-filter. */
html[data-steve-appearance="on"] :is(.icon-button, .round-button, .close, .small-button, .engine-button):not(.primary):not(.danger) {
  border-color: var(--sa-line);
  box-shadow: inset 0 1px 0 var(--sa-edge), 0 2px 8px rgba(20, 36, 28, calc(var(--sa-shadow-alpha, .0975) * .4));
}
html[data-steve-appearance="on"] :is(.segment-indicator, .tab-indicator),
html[data-steve-appearance="on"] .segmented button:is([aria-pressed="true"], [aria-selected="true"]),
html[data-steve-appearance="on"] body[data-appearance-app="pets"] .tab[aria-selected="true"] {
  background: var(--sa-solid);
  box-shadow: inset 0 1px 0 var(--sa-edge), 0 2px 9px rgba(25, 44, 34, calc(var(--sa-shadow-alpha, .0975) * .65));
}
html[data-steve-appearance="on"] :is(.composer, .search-field, .weight-input, .kcal-input):focus-within {
  border-color: var(--accent, var(--teal-deep, var(--brand, #287c5c)));
  box-shadow: inset 0 1px 0 var(--sa-edge), 0 0 0 2px color-mix(in srgb, var(--accent, #287c5c) 18%, transparent), var(--sa-shadow);
}

/* Preserve subject colors on reading and model pages. */
html[data-steve-appearance="on"] body[data-appearance-app="attention"] { --muted: #68717f; }
html[data-steve-appearance="on"][data-stevetab-theme="dark"] body[data-appearance-app="attention"] { --muted: #aab7ca; }
html[data-steve-appearance="on"] body[data-appearance-app="models"] { --muted: #626d62; }
html[data-steve-appearance="on"][data-theme="dark"] body[data-appearance-app="models"] { --muted: #adb8ae; }
html[data-steve-appearance="on"] body[data-appearance-app="attention"] .bottombar { box-shadow: inset 0 1px 0 var(--sa-edge), 0 -6px 28px rgba(24, 41, 34, var(--sa-shadow-alpha, .0975)); }

@media (hover: hover) and (pointer: fine) {
  html[data-steve-appearance="on"] body[data-appearance-app="home"] .card:hover,
  html[data-steve-appearance="on"] body[data-appearance-app="files"] .file-card:hover {
    transform: translateY(calc(0px - var(--sa-lift, 1.3px)));
    box-shadow: inset 0 1px 0 var(--sa-edge), var(--sa-shadow);
    transition: transform var(--sa-duration, 143ms) var(--sa-ease), box-shadow var(--sa-duration, 143ms) var(--sa-ease);
  }
  html[data-steve-appearance="on"] body[data-appearance-app="home"] .editing .card:hover { transform: none; }
}

/* Optional native continuous corners. Ordinary border-radius is the fallback;
   don't clip dialogs, scroll areas, focus outlines or character artwork. */
@supports (corner-shape: squircle) {
  html[data-steve-appearance="on"] :is(.appearance-controls, .composer, .card:not(.sa-glass), .upload-zone, .file-card) { corner-shape: squircle; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-steve-appearance="on"] { --sa-fill: var(--sa-solid) !important; --sa-dialog-fill: var(--sa-solid) !important; --sa-layer-image: none !important; }
  /* Resolve app-specific solid colors at the body where they are defined. */
  html[data-steve-appearance="on"] body { --sa-fill: var(--sa-solid) !important; --sa-dialog-fill: var(--sa-solid) !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-steve-appearance="on"] {
    --sa-fill: var(--sa-solid) !important;
    --sa-dialog-fill: var(--sa-solid) !important;
    --sa-layer-image: none !important;
    --sa-blur: 0px !important;
    --sa-dialog-blur: 0px !important;
    --sa-glow-alpha: 0 !important;
    --sa-line: var(--muted, #626a70);
  }
  html[data-steve-appearance="on"] body { --sa-fill: var(--sa-solid) !important; --sa-dialog-fill: var(--sa-solid) !important; }
  html[data-steve-appearance="on"] dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-steve-appearance="on"] { --sa-duration: 0ms !important; --sa-lift: 0px !important; }
  .appearance-switch, .appearance-switch::after { transition: none !important; }
}
html[data-steve-appearance="on"]:is(.reduced, [data-reduce="true"], [data-reduced="true"], [data-steve-reduced-motion="true"]) { --sa-duration: 0ms !important; --sa-lift: 0px !important; }
html.reduced .appearance-switch,
html.reduced .appearance-switch::after,
html[data-reduce="true"] .appearance-switch,
html[data-reduce="true"] .appearance-switch::after,
html[data-reduced="true"] .appearance-switch,
html[data-reduced="true"] .appearance-switch::after { transition: none !important; }

@media (forced-colors: active) {
  html[data-steve-appearance="on"] {
    --sa-solid: Canvas;
    --sa-fill: Canvas !important;
    --sa-dialog-fill: Canvas !important;
    --sa-line: CanvasText;
    --sa-edge: transparent;
    --sa-low-edge: transparent;
    --sa-layer-image: none !important;
    --sa-shadow: none;
    --sa-content-shadow: none;
    --sa-blur: 0px !important;
    --sa-dialog-blur: 0px !important;
    --sa-glow-alpha: 0 !important;
  }
  html[data-steve-appearance="on"] body::before { display: none; }
  html[data-steve-appearance="on"] body { --sa-solid: Canvas !important; --sa-fill: Canvas !important; --sa-dialog-fill: Canvas !important; }
  html[data-steve-appearance="on"] dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .appearance-controls { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  input.appearance-switch { background: Canvas; border-color: ButtonText; }
  input.appearance-switch::after { background: ButtonText; box-shadow: none; }
  input.appearance-switch:checked { background: Highlight; border-color: Highlight; }
  input.appearance-switch:checked::after { background: HighlightText; }
  input.appearance-range { appearance: auto; -webkit-appearance: auto; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-steve-appearance="on"] :is(.composer, .segments, .engine-menu, dialog)::after { display: none; }
  html[data-steve-appearance="on"] body:has(> dialog:modal) > :is(#app, .page, #body-app, .canvas) { filter: none !important; }
}