/* Shared presentation only. Loaded on every document after page styles.
   This layer is declared before legacy layers so targeted important rules have
   predictable precedence, without changing navigation or interaction state. */
@layer stControlConsistency {
  :root {
    --st-peer-bg: var(--sc-button-bg, var(--sc-accent-soft, #e3f1eb));
    --st-peer-hover: var(--sc-button-bg-hover, var(--sc-surface-soft, #d8ebe3));
    --st-peer-border: var(--sc-button-border, var(--sc-control-border, #8fb8a7));
    --st-peer-text: var(--sc-button-text, var(--sc-text, #174c3a));
  }

  /* Language, theme and Menu are peers: one size, baseline and palette. */
  html[data-theme] :is(header, .ticknotes-return) :is(
    #language, #headerThemeSelect, #ticknotesThemeSelect,
    .st-colors-menu > summary, .st-menu-trigger,
    #groupInstallOpen, #stNavLayoutShortcut,
    .ticknotes-header-actions > button
  ) {
    box-sizing: border-box !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-block: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--st-peer-border) !important;
    border-radius: 10px !important;
    background: var(--st-peer-bg) !important;
    color: var(--st-peer-text) !important;
    font: 600 14px/1.35 var(--st-body, Inter, system-ui, sans-serif) !important;
    box-shadow: none !important;
    vertical-align: middle !important;
  }
  html[data-theme] :is(header, .ticknotes-return) :is(
    #language, #headerThemeSelect, #ticknotesThemeSelect
  ) {
    padding-inline-end: 28px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html[data-theme] :is(header, .ticknotes-return) :is(
    .header-theme-control, .ticknotes-theme-control, .group-language,
    .language-picker, .st-colors-menu
  ) {
    align-self: center !important;
    margin-block: 0 !important;
    min-width: 0 !important;
  }
  html[data-theme] :is(.group-language, .language-picker, .ticknotes-theme-control) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  html[data-theme] .group-header .st-colors-menu > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  html[data-theme] :is(.ticknotes-return, .ticknotes-header-actions, .top-actions) {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* Equal-status actions share a fill; selected and destructive states retain
     meaning. Only actual action rows are targeted, never diary choice artwork,
     calendar cells, hourglasses, task status colors or the brand ring. */
  html[data-theme] :is(
    .today-manage-actions, .st-start-actions, .st-eod-actions,
    .group-controls, .group-social-nav, .group-rename-actions, .group-adjust,
    .group-install-actions, .tick-day-controls, .tick-conflict-actions,
    .tick-modal-actions, .pr-actions, .actions, .settings-data-actions,
    .auth-actions, .hero-links
  ) > :is(button, a):not(.tick-danger):not(.social-danger):not(.danger):not(#confirmDelete) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    max-width: 100% !important;
    margin-block: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--st-peer-border) !important;
    border-radius: 10px !important;
    background: var(--st-peer-bg) !important;
    color: var(--st-peer-text) !important;
    font: 600 14px/1.4 var(--st-body, Inter, system-ui, sans-serif) !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: none !important;
  }
  html[data-theme] :is(
    .group-controls, .group-social-nav, .group-rename-actions, .group-adjust,
    .group-install-actions, .tick-day-controls, .tick-conflict-actions,
    .tick-modal-actions, .pr-actions, .actions, .settings-data-actions,
    .auth-actions, .st-eod-actions, .hero-links
  ) {
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  html[data-theme] :is(.group-social-nav, .group-controls, .st-eod-actions, .actions) {
    align-items: stretch !important;
  }
  html[data-theme] :is(.group-social-nav, .group-controls, .actions, .st-eod-actions)
    > :is(button, a)[aria-pressed="true"] {
    border-color: var(--sc-accent-strong) !important;
    box-shadow: inset 0 0 0 1px var(--sc-accent-strong) !important;
  }
  html[data-theme] :is(.tick-day-controls input, .group-adjust input) {
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin-block: 0 !important;
  }
  html[data-theme] .group-wrap > .group-install-entry {
    margin: 0 0 16px !important;
  }
  html[data-theme] .ticknotes-return {
    display: flex;
    justify-content: space-between;
  }
  html[data-theme] .tick-day-controls .tick-danger {
    min-height: 44px !important;
    border-radius: 10px !important;
    color: var(--sc-danger, #a51e29) !important;
    background: var(--sc-surface) !important;
    border-color: var(--sc-control-border) !important;
  }

  /* Guide pages used a second hard-coded palette. Resolve those existing
     variables to the same theme so they no longer create white/green islands. */
  html[data-theme] {
    --ink: var(--sc-text);
    --muted: var(--sc-muted);
    --teal: var(--sc-link);
    --teal-light: var(--sc-accent-soft);
    --line: var(--sc-border);
    --bg: var(--sc-bg);
    --paper: var(--sc-surface);
  }
  html[data-theme] .shell :is(.preview-window, .visual-card, .window-bar,
    .step-tag, .focus-screen, .tip, .focus-tools span) {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
  }

  @media (hover: hover) {
    html[data-theme] :is(header, .ticknotes-return) :is(
      #language, #headerThemeSelect, #ticknotesThemeSelect,
      .st-colors-menu > summary, .st-menu-trigger
    ):hover {
      background: var(--st-peer-hover) !important;
    }
    html[data-theme] :is(.group-social-nav, .group-controls, .actions,
      .st-eod-actions, .tick-day-controls, .pr-actions, .hero-links)
      > :is(button, a):not(:disabled):not(.tick-danger):hover {
      background: var(--st-peer-hover) !important;
      color: var(--st-peer-text) !important;
    }
  }
  @media (max-width: 760px) {
    html[data-theme] .group-timer-page .group-header {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(100px, 120px) auto !important;
      gap: 12px 8px !important;
    }
    .group-header .group-logo { grid-column: 1 / 3 !important; min-width: 0 !important; }
    .group-header .group-back { grid-column: 3 !important; justify-self: end !important; }
    html[data-theme] .group-header .group-language {
      grid-row: 2 !important; grid-column: 1 !important;
      width: 100% !important; margin: 0 !important;
    }
    html[data-theme] .group-header .group-language label {
      position: absolute !important; width: 1px !important; height: 1px !important;
      padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important;
    }
    html[data-theme] .group-header #language { width: 100% !important; }
    html[data-theme] .group-header .header-theme-control {
      grid-row: 2 !important; grid-column: 2 !important; width: 100% !important;
    }
    html[data-theme] .group-header #headerThemeSelect { width: 100% !important; }
    .group-header .st-colors-menu { grid-row: 2 !important; grid-column: 3 !important; }
    html[data-theme] .group-social-nav { width: 100% !important; }
    html[data-theme] .group-social-nav > :is(button, a) { flex: 1 1 140px !important; }
  }
  @media (max-width: 480px) {
    html[data-theme] .group-timer-page .group-header {
      grid-template-columns: minmax(0, 1fr) 104px auto !important;
      padding-inline: 14px !important;
    }
    html[data-theme] .group-header :is(#language, #headerThemeSelect, .st-colors-menu > summary) {
      font-size: 13px !important;
      padding-inline-start: 9px !important;
    }
    html[data-theme] :is(.st-eod-actions, .tick-actions, .pr-actions) > :is(button, a) {
      flex: 1 1 140px !important;
      min-width: 0 !important;
    }
    html[data-theme] .tick-day-controls { max-width: 100% !important; }
    html[data-theme] .tick-day-controls input[type="date"] { flex: 1 1 145px; min-width: 0; }
  }
  /* A scoped display rule must never make a hidden action visible. */
  html[data-theme] body [hidden] { display: none !important; }
}