/* ============================================================
   Ariz.Social — macOS / UNIX skin
   Admin → Server settings → Appearance → Custom CSS

   Fixes the iOS blank-page bug (light UI + dark text tokens).
   Sidebar / toolbar / status-bar chrome. Accent stays rose + AZ flag.
   ============================================================ */

/* Raw brand. No assumed theme here — iOS often skips data-color-scheme. */
:root {
  --az-navy: #002664;
  --az-red: #bb133e;
  --az-gold: #c9a227;
  --az-copper: #ce5c17;
  --az-rose: #c73654;
  --az-rose-hot: #e23b5a;
  --az-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --az-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --az-radius: 10px;
  --az-radius-sm: 6px;
  --az-radius-pill: 999px;
  --az-sidebar-w: 280px;
}

/* ---- Theme: follow Mastodon + the OS. Light is the safe default. ---- */
:root,
html[data-color-scheme="light"],
html.theme-mastodon-light,
html[data-user-theme="mastodon-light"],
body.theme-mastodon-light,
.theme-mastodon-light {
  --az-text: #1d1d1f;
  --az-muted: #6e6e73;
  --az-faint: #8e8e93;
  --az-window: #f5f5f7;
  --az-sidebar: rgba(232, 232, 237, 0.92);
  --az-content: #ffffff;
  --az-raised: #f2f2f7;
  --az-hairline: rgba(60, 60, 67, 0.18);
  --az-hairline-strong: rgba(60, 60, 67, 0.29);
  --az-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 24px rgba(0, 0, 0, 0.06);
  --az-focus: 0 0 0 3px color-mix(in srgb, var(--az-rose) 35%, transparent);
  --az-accent: var(--az-rose);
  --az-accent-text: #ffffff;

  --background-color: var(--az-window);
  --background-color-tint: rgba(245, 245, 247, 0.86);
  --background-border-color: var(--az-hairline);
  --surface-background-color: var(--az-content);
  --surface-variant-background-color: var(--az-raised);
  --surface-variant-active-background-color: #e8e8ed;
  --surface-border-color: var(--az-hairline);
  --dropdown-background-color: rgba(255, 255, 255, 0.86);
  --dropdown-border-color: var(--az-hairline-strong);
  --dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.16),
    0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --modal-background-color: rgba(245, 245, 247, 0.72);
  --modal-background-variant-color: rgba(255, 255, 255, 0.92);
  --modal-border-color: var(--az-hairline);
  --input-background-color: var(--az-raised);
  --input-placeholder-color: var(--az-faint);
  --on-input-color: var(--az-text);
  --avatar-border-radius: 8px;
  --outline-focus-default: 2px solid var(--az-rose);

  --color-text-primary: var(--az-text);
  --color-text-secondary: var(--az-muted);
  --color-text-tertiary: var(--az-faint);
  --color-text-inverted: #f5f5f7;
  --color-text-brand: var(--az-rose);
  --color-text-brand-soft: #a12b43;
  --color-text-on-brand-base: #fff;
  --color-text-status-links: var(--az-rose);
  --color-text-favourite-highlight: var(--az-gold);
  --color-text-bookmark-highlight: var(--az-copper);
  --color-bg-primary: var(--az-window);
  --color-bg-secondary: var(--az-content);
  --color-bg-tertiary: var(--az-raised);
  --color-bg-brand-base: var(--az-rose);
  --color-bg-brand-base-hover: var(--az-rose-hot);
  --color-bg-brand-soft: color-mix(in srgb, var(--az-rose) 12%, transparent);
  --color-bg-overlay: rgba(0, 0, 0, 0.28);
  --color-border-primary: var(--az-hairline);
  --color-border-brand: color-mix(in srgb, var(--az-rose) 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --az-text: #f5f5f7;
    --az-muted: #a1a1a6;
    --az-faint: #6e6e73;
    --az-window: #1c1c1e;
    --az-sidebar: rgba(44, 44, 46, 0.92);
    --az-content: #2c2c2e;
    --az-raised: #3a3a3c;
    --az-hairline: rgba(255, 255, 255, 0.1);
    --az-hairline-strong: rgba(255, 255, 255, 0.18);
    --az-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 12px 32px rgba(0, 0, 0, 0.35);
    --az-accent: var(--az-rose-hot);
    --az-accent-text: #fff;

    --background-color: var(--az-window);
    --background-color-tint: rgba(28, 28, 30, 0.86);
    --background-border-color: var(--az-hairline);
    --surface-background-color: var(--az-content);
    --surface-variant-background-color: var(--az-raised);
    --surface-variant-active-background-color: #48484a;
    --dropdown-background-color: rgba(44, 44, 46, 0.88);
    --dropdown-border-color: var(--az-hairline-strong);
    --modal-background-color: rgba(28, 28, 30, 0.72);
    --input-background-color: #1c1c1e;
    --input-placeholder-color: var(--az-faint);
    --on-input-color: var(--az-text);

    --color-text-primary: var(--az-text);
    --color-text-secondary: var(--az-muted);
    --color-text-tertiary: var(--az-faint);
    --color-text-inverted: #1d1d1f;
    --color-text-brand: #ff6b84;
    --color-text-on-brand-base: #fff;
    --color-text-status-links: #ff6b84;
    --color-bg-primary: var(--az-window);
    --color-bg-secondary: var(--az-content);
    --color-bg-tertiary: var(--az-raised);
    --color-bg-brand-base: var(--az-rose);
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    --color-border-primary: var(--az-hairline);
  }
}

html[data-color-scheme="dark"],
html[data-user-theme="dark"],
html:where(:not(.theme-mastodon-light)):where(:not([data-user-theme="mastodon-light"])):where([data-color-scheme="dark"]) {
  --az-text: #f5f5f7;
  --az-muted: #a1a1a6;
  --az-faint: #6e6e73;
  --az-window: #1c1c1e;
  --az-sidebar: rgba(44, 44, 46, 0.92);
  --az-content: #2c2c2e;
  --az-raised: #3a3a3c;
  --az-hairline: rgba(255, 255, 255, 0.1);
  --az-hairline-strong: rgba(255, 255, 255, 0.18);
  --az-accent: var(--az-rose-hot);
  --az-accent-text: #fff;
  --background-color: var(--az-window);
  --surface-background-color: var(--az-content);
  --color-text-primary: #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-brand: #ff6b84;
  --color-text-status-links: #ff6b84;
  --color-bg-primary: #1c1c1e;
  --color-bg-secondary: #2c2c2e;
}

/* ---- Chassis. No full-viewport overlay. That blanked iOS. ---- */
html,
body {
  background: var(--az-window, #f5f5f7);
  color: var(--az-text, #1d1d1f);
  font-family: var(--az-system);
  letter-spacing: -0.016em;
}

.ui,
.app-holder,
.columns-area,
.columns-area__panels,
.column,
.scrollable,
.drawer,
.public-layout,
.landing-page {
  color: var(--az-text, #1d1d1f);
}

/* Logged-in shell sits above anything leftover */
.ui,
.app-holder {
  position: relative;
  z-index: 1;
  background: var(--az-window);
}

/* Auth / OAuth / empty sign-in webviews: do not chrome them */
.public-layout .container,
.public-layout .content,
form#edit_user,
.oauth-authorize,
.session-new,
.simple_form {
  position: relative;
  z-index: 2;
  color: var(--az-text, #1d1d1f);
}

/* ---- macOS window: left sidebar, center document, right inspector ---- */
@media (min-width: 1175px) {
  .columns-area__panels {
    background: var(--az-window);
  }

  /* LEFT — Finder-style info sidebar */
  .columns-area__panels__pane--start,
  .drawer {
    background: var(--az-sidebar) !important;
    border-right: 0.5px solid var(--az-hairline) !important;
    box-shadow: none !important;
  }

  .drawer__inner,
  .drawer__inner__mastodon,
  .navigation-panel,
  .compose-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .drawer__header,
  .navigation-bar {
    background: transparent !important;
    border-bottom: 0.5px solid var(--az-hairline);
  }

  /* CENTER — document */
  .columns-area__panels__pane--fluid .column,
  .column {
    background: var(--az-content) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* RIGHT — utility / getting-started as inspector */
  .columns-area__panels__pane--end .column,
  .getting-started,
  .getting-started__wrapper {
    background: var(--az-sidebar) !important;
    border-left: 0.5px solid var(--az-hairline);
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ---- Toolbar (column headers = titlebar) ---- */
.column-header,
.column-back-button,
.account__section-headline,
.notification__filter-bar,
.search-results__header,
.ui__header,
.tabs-bar,
.tabs-bar__wrapper {
  background: color-mix(in srgb, var(--az-content) 72%, transparent) !important;
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 0.5px solid var(--az-hairline) !important;
  color: var(--az-text) !important;
  box-shadow: none !important;
}

.column-header__title,
.column-header h1,
.column-back-button {
  font-weight: 590;
  letter-spacing: -0.022em;
}

.column-header__buttons,
.column-header__button,
.ui__header__links {
  gap: 2px;
}

.column-header__button,
.icon-button {
  border-radius: var(--az-radius-sm);
}

.column-header__button:hover,
.icon-button:hover {
  background: color-mix(in srgb, var(--az-rose) 10%, transparent);
}

/* ---- Bottom status / compose dock (mobile + compact) ---- */
@media (max-width: 1174px) {
  .ui,
  .columns-area,
  .column,
  .scrollable {
    background: var(--az-window) !important;
    color: var(--az-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* iOS: hide the mascot stamp that was sitting on an empty cream field */
  .drawer__inner__mastodon {
    background-image: none !important;
    min-height: 0 !important;
    flex: 0 !important;
  }

  .tabs-bar__wrapper,
  .ui__header,
  .navigation-panel__logo {
    background: color-mix(in srgb, var(--az-window) 80%, transparent) !important;
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
  }

  .compose-form,
  .compose-panel {
    background: var(--az-content) !important;
    border-top: 0.5px solid var(--az-hairline) !important;
    border-radius: var(--az-radius) var(--az-radius) 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
  }

  .column,
  .drawer,
  .getting-started,
  .scrollable,
  .search-results,
  .detailed-status {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Safe area so iOS chrome doesn't eat the last toot */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ui,
  .tabs-bar__wrapper,
  .compose-form__publish {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- Lists / posts ---- */
.status,
.conversation,
.notification,
.notification-group {
  background: transparent;
  border-bottom: 0.5px solid var(--az-hairline) !important;
  color: var(--az-text);
}

.status__content,
.reply-indicator__content,
.detailed-status__content {
  color: var(--az-text);
}

.status:hover,
.conversation:hover,
.notification:hover {
  background: color-mix(in srgb, var(--az-rose) 5%, transparent);
}

.status.status-direct:not(.read),
.status__wrapper-direct {
  background: color-mix(in srgb, var(--az-navy) 8%, var(--az-content)) !important;
  box-shadow: inset 3px 0 0 var(--az-gold);
}

.status__content a,
.reply-indicator__content a,
.edit-indicator__content a,
.status-link {
  color: var(--az-rose) !important;
}

.status__content a:hover {
  color: var(--az-copper) !important;
}

.display-name__account,
.status__relative-time,
.getting-started__footer,
.column-subheading {
  font-family: var(--az-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--az-muted);
}

/* ---- Sidebar rows ---- */
.column-link,
.column-link--transparent,
.navigation-panel a {
  border-radius: 8px;
  margin: 1px 8px;
  color: var(--az-text);
}

.column-link:hover,
.column-link--transparent:hover {
  background: color-mix(in srgb, var(--az-rose) 10%, transparent) !important;
}

.column-link.active {
  background: color-mix(in srgb, var(--az-rose) 14%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--az-rose);
  font-weight: 590;
}

/* ---- Inputs ---- */
.search__input,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.simple_form input,
.simple_form textarea,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  background: var(--az-raised) !important;
  color: var(--az-text) !important;
  border: 0.5px solid var(--az-hairline-strong) !important;
  border-radius: var(--az-radius-sm) !important;
  box-shadow: none;
}

.search__input:focus,
.compose-form .autosuggest-textarea__textarea:focus,
input:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--az-rose) !important;
  box-shadow: var(--az-focus) !important;
}

/* ---- Buttons = macOS rounded push ---- */
.button,
.button.button-primary,
.compose-form__publish-button-wrapper .button,
.sign-in-banner .button,
.public-layout .button,
.simple_form .block-button {
  background: var(--az-rose) !important;
  color: var(--az-accent-text) !important;
  border: 0 !important;
  border-radius: var(--az-radius-sm) !important;
  font-weight: 590;
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.25) inset;
}

.button:hover,
.button.button-primary:hover {
  filter: brightness(1.05);
}

.button.button-secondary,
.button.button-tertiary,
.button-alternative,
.button-alternative-2 {
  background: var(--az-raised) !important;
  color: var(--az-text) !important;
  border: 0.5px solid var(--az-hairline-strong) !important;
  box-shadow: none !important;
}

.icon-button.active,
.star-icon.active,
.icon-button.active.star-icon {
  color: var(--az-gold) !important;
}

/* ---- Menus / sheets ---- */
.dropdown-menu,
.privacy-dropdown__dropdown,
.language-dropdown__dropdown,
.emoji-mart,
.modal-root__modal,
.boost-modal,
.confirmation-modal,
.actions-modal,
.report-modal {
  background: var(--dropdown-background-color) !important;
  border: 0.5px solid var(--dropdown-border-color) !important;
  border-radius: 12px !important;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--dropdown-shadow) !important;
  color: var(--az-text);
}

.dropdown-menu__item a:hover,
.dropdown-menu__item button:hover,
.privacy-dropdown__option:hover,
.privacy-dropdown__option.active {
  background: color-mix(in srgb, var(--az-rose) 12%, transparent) !important;
  color: var(--az-text) !important;
}

/* ---- Profile / public ---- */
.account__header__bar,
.account__header > div {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--az-navy) 18%, var(--az-content)) 0%,
    var(--az-content) 100%
  );
}

.account__header__fields dt {
  color: var(--az-faint) !important;
  font-family: var(--az-mono);
  font-size: 11px;
}

.account__header__fields dd {
  color: var(--az-text) !important;
}

.account__avatar,
.account__avatar-overlay-base {
  border-radius: 8px !important;
}

.public-layout .header,
.public-layout .footer {
  background: var(--az-sidebar) !important;
  border-color: var(--az-hairline) !important;
}

/* ---- Cards / media ---- */
.status-card,
.media-gallery,
.audio-player,
.video-player {
  border-radius: var(--az-radius-sm) !important;
  border: 0.5px solid var(--az-hairline);
}

.poll__chart,
.poll__chart.leading {
  background: var(--az-rose) !important;
}

.hashtag,
a.hashtag {
  color: var(--az-copper) !important;
}

/* ---- Toggles / filters ---- */
.react-toggle-track {
  background: var(--az-raised) !important;
  border-radius: var(--az-radius-pill) !important;
}
.react-toggle--checked .react-toggle-track {
  background: var(--az-rose) !important;
}

.account__section-headline a.active::after,
.notification__filter-bar button.active::after {
  background: var(--az-rose) !important;
  border-bottom-color: var(--az-rose) !important;
}

.flash-message,
.notice-widget,
.compose-form__warning {
  background: color-mix(in srgb, var(--az-gold) 16%, var(--az-content)) !important;
  border: 0.5px solid color-mix(in srgb, var(--az-gold) 40%, transparent) !important;
  color: var(--az-text) !important;
  border-radius: var(--az-radius-sm);
}

/* ---- Admin ---- */
.admin-wrapper,
.admin-wrapper .content,
.admin-wrapper .sidebar-wrapper {
  background: var(--az-window);
  color: var(--az-text);
}

.admin-wrapper .sidebar a.selected {
  box-shadow: inset 3px 0 0 var(--az-rose);
  background: color-mix(in srgb, var(--az-rose) 12%, transparent);
}

/* ---- Scrollbars (desktop). Thin. No rose racing stripe on iOS. ---- */
@media (hover: hover) and (pointer: fine) {
  .scrollable,
  .drawer__inner,
  .column {
    scrollbar-width: thin;
    scrollbar-color: var(--az-faint) transparent;
  }
}

::selection {
  background: color-mix(in srgb, var(--az-rose) 40%, transparent);
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--az-rose);
  outline-offset: 2px;
}

.nothing-here {
  color: var(--az-muted);
}