/*
 * Alloy Firefox chrome — Helium-style ultra-compact horizontal, Akari Dawn
 *
 * Applies Alloy's default light theme (Akari Dawn) to Firefox's chrome and
 * slims the tab strip, address bar, and toolbar to their smallest legible
 * form. No vertical tabs. No bookmarks toolbar. No title/menu bar.
 *
 * The palette is warm-clay paper caught in lantern light — Japanese-alley
 * aesthetic, by way of Shu Kutsuzawa's Akari theme (MIT). See
 * makeover's themes/akari-dawn.toml for the canonical hex values and
 * docs/TOKENS.md for the derivation of border-subtle / border-strong.
 *
 * Requires: toolkit.legacyUserProfileCustomizations.stylesheets = true
 * (set in usr/lib64/firefox/mozilla.cfg as a system default).
 */

:root {
  color-scheme: light;

  /* Akari Dawn — source: makeover's themes/akari-dawn.toml. */
  --alloy-surface-sunken:  #cfc4b6;
  --alloy-surface:         #e4ded6;
  --alloy-surface-raised:  #ede7de;
  --alloy-surface-overlay: #f0ece4;
  --alloy-border-subtle:   #dad2c7;    /* derived: mix border, surface 60% */
  --alloy-border:          #cabeae;
  --alloy-border-strong:   #7f786d;    /* derived: mix border, text-primary 65% */
  --alloy-text-muted:      #514b45;
  --alloy-text-secondary:  #222d38;
  --alloy-text-primary:    #1a1816;

  --alloy-tab-height:      26px;
  --alloy-navbar-height:   34px;
  --alloy-urlbar-height:   24px;
}

/* -------------------------------------------------------------------
 * Window chrome removal
 * ------------------------------------------------------------------- */

/* Title bar and menu bar entirely off — Sway owns window decoration. */
#titlebar-buttonbox-container { display: none !important; }
#toolbar-menubar             { display: none !important; height: 0 !important; }

/* Bookmarks toolbar off — keyboard-driven, invoke via Ctrl-B if needed. */
#PersonalToolbar             { display: none !important; }

/* Sidebar off — no vertical UI on the side. */
#sidebar-box { display: none !important; }
#sidebar-splitter[hidden="false"] { display: none !important; }

/* -------------------------------------------------------------------
 * Tab strip — thin, no gaps, no close button until hover
 * ------------------------------------------------------------------- */

#TabsToolbar,
#tabbrowser-tabs {
  background: var(--alloy-surface) !important;
  height:     var(--alloy-tab-height) !important;
  min-height: var(--alloy-tab-height) !important;
  max-height: var(--alloy-tab-height) !important;
}

.tabbrowser-tab {
  height:     var(--alloy-tab-height) !important;
  min-height: var(--alloy-tab-height) !important;
  max-height: var(--alloy-tab-height) !important;
}

.tab-background {
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.tabbrowser-tab:not([selected]):hover .tab-background {
  background: var(--alloy-surface-raised) !important;
}

.tabbrowser-tab[selected] .tab-background {
  background: var(--alloy-surface-raised) !important;
  border-bottom: 1px solid var(--alloy-border-strong) !important;
}

.tab-content {
  padding-inline: 8px !important;
}

.tab-label {
  color: var(--alloy-text-secondary) !important;
  font-size: 11px !important;
}

.tabbrowser-tab[selected] .tab-label {
  color: var(--alloy-text-primary) !important;
}

.tab-icon-image {
  margin-inline-end: 6px !important;
}

/* Close button hidden until hover on the tab. */
.tab-close-button {
  visibility: hidden !important;
  padding: 0 !important;
  margin-inline-start: 4px !important;
}
.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
}

/* "New tab" plus button, slim. */
#tabs-newtab-button,
#new-tab-button {
  padding: 0 6px !important;
}
#tabs-newtab-button .toolbarbutton-icon,
#new-tab-button .toolbarbutton-icon {
  width: 12px !important;
  height: 12px !important;
}

/* -------------------------------------------------------------------
 * Nav bar (address row) — compact
 * ------------------------------------------------------------------- */

#nav-bar {
  background: var(--alloy-surface) !important;
  min-height: var(--alloy-navbar-height) !important;
  max-height: var(--alloy-navbar-height) !important;
  border-bottom: 1px solid var(--alloy-border-subtle) !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
}

#urlbar-container {
  min-height: var(--alloy-urlbar-height) !important;
  padding-block: 0 !important;
}

#urlbar {
  min-height: var(--alloy-urlbar-height) !important;
  font-size: 12px !important;
}

#urlbar-background {
  background: var(--alloy-surface-raised) !important;
  border: 1px solid var(--alloy-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

#urlbar[focused="true"] > #urlbar-background {
  border-color: var(--alloy-border-strong) !important;
  box-shadow: none !important;
}

#urlbar-input {
  color: var(--alloy-text-primary) !important;
}

.urlbar-input-box::placeholder,
#urlbar-input::placeholder {
  color: var(--alloy-text-muted) !important;
}

/* Extension buttons and back/forward — compact padding. */
.toolbarbutton-1 {
  padding-inline: 2px !important;
}
.toolbarbutton-1 > .toolbarbutton-icon {
  padding: 4px !important;
}

/* -------------------------------------------------------------------
 * Content area separator (subtle)
 * ------------------------------------------------------------------- */

#navigator-toolbox {
  border-bottom: 1px solid var(--alloy-border-subtle) !important;
}

/* -------------------------------------------------------------------
 * Popups (menus, popouts) — Alloy overlay tier
 * ------------------------------------------------------------------- */

panel,
menupopup {
  --arrowpanel-background: var(--alloy-surface-overlay) !important;
  --arrowpanel-color:      var(--alloy-text-primary) !important;
  --arrowpanel-border-color: var(--alloy-border) !important;
}