/*
 * Action-component layer. Load this file after readability.css.
 * It keeps copy at 16px, supplementary notes at 14px, and action controls at 16px.
 */

body {
  font-size: 16px;
}

.ui-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.action-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.action-icon--trailing {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.button[data-action-icon],
.text-link[data-action-icon],
#copy-estimate[data-action-icon] {
  display: inline-grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  font-size: 16px;
}

.button[data-action-icon]:has(.action-mark),
.text-link[data-action-icon]:has(.action-mark),
#copy-estimate[data-action-icon]:has(.action-mark) {
  grid-template-columns: 22px minmax(0, 1fr) 18px;
}

.button-icon {
  grid-column: 1;
  grid-row: 1;
}

.button-label {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.action-mark {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  min-width: 18px;
}

.button .action-mark {
  margin-left: 0;
}

.text-link .button-label,
.text-link:hover .button-label,
.text-link:hover .button-icon {
  transform: none;
}

/* Header CTA stays hidden by the existing mobile rule; only desktop gets its grid layout. */
@media (min-width: 961px) {
  .header-cta[data-action-icon] {
    display: inline-grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-width: 0;
  }
}

.schedule-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: -4px 0 30px;
}

.schedule-tools .button {
  min-height: 56px;
  padding-inline: 20px;
}

.schedule-tools-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* The three flyer actions remain a vertical, equal-width set. */
.flyer-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.flyer-actions > [data-action-icon] {
  width: 100%;
  max-width: none;
}

.flyer-actions > .button[data-action-icon] {
  min-height: auto;
  height: auto;
}

.flyer-actions > .text-link[data-action-icon] {
  min-height: 52px;
}

/* Quiet interaction feedback: no glow, only a reserved one-pixel press movement. */
.button[data-action-icon]:hover,
.text-link[data-action-icon]:hover,
#copy-estimate[data-action-icon]:hover {
  box-shadow: none;
  filter: brightness(1.035);
}

.button[data-action-icon]:active,
.text-link[data-action-icon]:active,
#copy-estimate[data-action-icon]:active {
  transform: translateY(1px);
}

.button-outline[data-action-icon]:hover {
  background: rgba(199, 181, 143, 0.1);
}

.button-gold[data-action-icon]:hover {
  background: #d3bf95;
}

#copy-estimate[data-action-icon] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 0;
  min-height: 48px;
  text-align: left;
}

#motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

#motion-label {
  font: inherit;
}

.motion-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.stepper button .control-icon,
.flyer-dialog-actions button .control-icon {
  width: 22px;
  height: 22px;
  margin: auto;
}

.reading-progress {
  position: fixed;
  z-index: 130;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(199, 181, 143, 0.16);
}

.reading-progress > div {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gold);
  transition: transform 120ms linear;
}

/* This is intentionally global: motion reduction must never leave a decorative transition. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  transition: none !important;
}

@media (max-width: 640px) {
  .schedule-tools {
    align-items: stretch;
    margin-bottom: 26px;
  }

  .schedule-tools .button {
    width: 100%;
  }

  .button[data-action-icon],
  .text-link[data-action-icon],
  #copy-estimate[data-action-icon] {
    font-size: 16px;
  }

  .flyer-actions > .button[data-action-icon] {
    min-height: auto;
    height: auto;
  }
}

@media (max-width: 320px) {
  .button-label {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* 既存の高詳細度display:flexより明示的に揃える。 */
.hero-actions .button[data-action-icon],
.contact-option .button[data-action-icon],
.estimate-result .button[data-action-icon],
.flyer-copy .flyer-actions > .button[data-action-icon],
.flyer-copy .flyer-actions > .text-link[data-action-icon] {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  justify-content: initial;
  gap: 4px 12px;
}
.hero-actions .button[data-action-icon]:has(.action-mark),
.flyer-copy .flyer-actions > .text-link[data-action-icon]:has(.action-mark) {
  grid-template-columns: 22px minmax(0,1fr) 18px;
}
.button-label { font:inherit; line-height:inherit; text-align:left; white-space:normal; }
.action-icon.button-icon { width:22px; height:22px; transform:none!important; }
.button[data-action-icon] .action-mark .action-icon { transform:none; }
.button[data-action-icon]:hover .action-mark .action-icon { transform:translateX(2px); }
#motion-toggle:disabled { opacity:.65; cursor:default; }
@media(max-width:380px) {
  .flyer-copy .flyer-actions > .button[data-action-icon] { height:84px; min-height:84px; padding-block:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .button[data-action-icon]:hover .action-mark .action-icon { transform:none; }
}
.motion-paused .button[data-action-icon]:hover .action-mark .action-icon { transform:none; }