/* =========================================================
   ASIBA+ 枠組み足場（test-waku）
   親切UI / ガイド強化 v3.12.8

   目的:
   - 追加機能が増えた現状でも「何をどう入力すればいいか」が迷わない導線を追加
   - 重要な操作（計算→確認→DL→設定）を視覚的にわかりやすく
   - 影響範囲は基本 #waku-app 配下のみ（ガイド用 overlay は #waku-app に挿入）
========================================================= */

/* ---------------------------------------------------------
   Manual / Help buttons (top area)
--------------------------------------------------------- */
#waku-app .summary-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--asiba-border);
  background: var(--asiba-surface-2);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  user-select: none;
}

#waku-app .summary-toggle-btn:hover {
  text-decoration: none;
  filter: brightness(0.98);
}

/* ---------------------------------------------------------
   Form polish (fieldset / labels / inputs)
--------------------------------------------------------- */
#waku-app .form-section fieldset {
  border: 1px solid var(--asiba-border);
  border-radius: 14px;
  padding: 12px 12px 14px;
  margin: 12px 0;
  background: var(--asiba-surface-2);
}

#waku-app .form-section legend {
  font-weight: 900;
  font-size: 13px;
  padding: 0 6px;
}

#waku-app .form-section label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--asiba-muted);
  margin: 8px 0 4px;
}

#waku-app .form-section :is(input[type="text"], input[type="date"], select, textarea) {
  width: 100%;
  border: 1px solid var(--asiba-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}

#waku-app .form-section textarea {
  resize: vertical;
}

#waku-app .form-section .note {
  font-size: 12px;
  color: var(--asiba-muted);
  margin-top: 6px;
}

#waku-app .form-section .range-output {
  font-size: 12px;
  color: var(--asiba-muted);
  margin-top: 6px;
}

#waku-app .form-section .sub-options {
  margin-top: 10px;
  padding: 10px 10px;
  border: 1px dashed var(--asiba-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
}

/* ---------------------------------------------------------
   Friendly anchor (巾木 → 幅変更へ戻る)
--------------------------------------------------------- */
#waku-app .asiba-back-to-widthchange,
#waku-app .asiba-anchor-box {
  margin-top: 10px;
  padding: 10px 10px;
  border: 1px dashed var(--asiba-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.015);
}

#waku-app .asiba-anchor-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  text-decoration: underline;
  color: #2563eb;
}

#waku-app .asiba-anchor-btn:hover {
  filter: brightness(0.95);
}

#waku-app .asiba-anchor-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--asiba-muted);
  line-height: 1.55;
}

#waku-app .asiba-jump-highlight {
  outline: 3px solid rgba(37,99,235,0.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* ---------------------------------------------------------
   Fixed footer layout
--------------------------------------------------------- */
#waku-app .fixed-footer .button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#waku-app .fixed-footer .button-row.top-row {
  margin-bottom: 8px;
}

#waku-app .fixed-footer .button-row .btn {
  flex: 1 1 140px;
  min-height: 42px;
}

@media (max-width: 640px) {
  #waku-app .fixed-footer .button-row .btn {
    flex: 1 1 46%;
  }
}

/* PCでもサマリーを使えるように（既存JSが inline で display:none を入れても上書き） */
#waku-app #toggleSummaryBtn {
  display: inline-flex !important;
}

/* ---------------------------------------------------------
   QuickStart card
--------------------------------------------------------- */
#waku-app .asiba-quickstart {
  border: 1px solid var(--asiba-border);
  border-radius: 14px;
  background: var(--asiba-surface-2);
  padding: 12px;
  margin: 10px 0 12px;
}

#waku-app .asiba-quickstart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#waku-app .asiba-quickstart-title {
  font-weight: 900;
  font-size: 14px;
}

#waku-app .asiba-quickstart-close {
  border: 1px solid var(--asiba-border);
  background: rgba(255,255,255,0.9);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
}

#waku-app .asiba-quickstart ol {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--asiba-text);
}

#waku-app .asiba-quickstart li {
  margin: 6px 0;
}

#waku-app .asiba-quickstart .asiba-quickstart-note {
  font-size: 12px;
  color: var(--asiba-muted);
  margin-top: 10px;
  line-height: 1.6;
}

#waku-app .asiba-quickstart-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#waku-app .asiba-quickstart-actions .btn {
  padding: 9px 10px;
}

/* ---------------------------------------------------------
   Mode labels (1面 / 建物4面)
--------------------------------------------------------- */

#waku-app .asiba-mode-label {
  border: 1px solid var(--asiba-border);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.015);
  margin: 12px 0 8px;
}

#waku-app .asiba-mode-label.asiba-mode-single {
  border-color: #3b82f6;
}

#waku-app .asiba-mode-label.asiba-mode-building {
  border-color: #10b981;
  background: rgba(0,0,0,0.03);
}

#waku-app .asiba-mode-label .asiba-mode-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#waku-app .asiba-mode-label .asiba-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.10);
  color: var(--asiba-text);
}

#waku-app .asiba-mode-label.asiba-mode-single .asiba-mode-badge {
  background: rgba(59,130,246,0.15);
}

#waku-app .asiba-mode-label.asiba-mode-building .asiba-mode-badge {
  background: rgba(16,185,129,0.15);
}

#waku-app .asiba-mode-label .asiba-mode-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

#waku-app .asiba-mode-label .asiba-mode-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--asiba-muted);
  line-height: 1.6;
}

/* 建物4面の見出しが二重になるのを防ぐ（上のモード見出しで案内） */
#waku-app #asibaBuildingAutoAssign.asiba-building-title-hidden > h3 {
  display: none !important;
}



/* ---------------------------------------------------------
   Mode cards (1面 / 建物4面)
--------------------------------------------------------- */
#waku-app .asiba-mode-card {
  border: 1px solid var(--asiba-border);
  border-radius: 16px;
  padding: 12px;
  background: var(--asiba-surface-2);
  margin: 14px 0 12px;
}

#waku-app .asiba-mode-card .asiba-card-head {
  padding: 0 2px 10px;
}

#waku-app .asiba-mode-card .asiba-card-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#waku-app .asiba-mode-card .asiba-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--asiba-text);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--asiba-border);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}

#waku-app .asiba-mode-card .asiba-mode-toggle input[type="checkbox"] {
  transform: scale(1.1);
}

/* モード排他（片方ON中はもう片方をOFFにしてから切替） */
#waku-app .asiba-mode-lock-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--asiba-text);
  background: rgba(0,0,0,0.04);
  border: 1px dashed var(--asiba-border);
  border-radius: 12px;
  padding: 8px 10px;
  line-height: 1.6;
}

/* 注意書き内の「連動スイッチ」 */
#waku-app .asiba-mode-lock-note .asiba-mode-lock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#waku-app .asiba-mode-lock-note .asiba-mode-lock-text {
  flex: 1 1 260px;
}

#waku-app .asiba-mode-lock-note .asiba-mode-lock-action {
  flex: 0 0 auto;
}

#waku-app .asiba-mode-toggle.asiba-mode-toggle-mini {
  padding: 5px 10px;
  font-size: 12px;
}

#waku-app .asiba-mode-toggle.asiba-mode-toggle-mini input[type="checkbox"] {
  transform: scale(1.05);
}

#waku-app label.asiba-disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
}

#waku-app label.asiba-disabled input[type="checkbox"] {
  cursor: not-allowed !important;
}

/* 1面モードはチェックONのときだけ入力欄を表示 */
#waku-app #asibaSingleModeWrap .asiba-single-body {
  display: none;
  margin-top: 8px;
}

#waku-app #asibaSingleModeWrap.asiba-enabled .asiba-single-body {
  display: block;
}

#waku-app .asiba-mode-card .asiba-card-title {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}

#waku-app .asiba-mode-card .asiba-card-desc {
  font-size: 12px;
  color: var(--asiba-muted);
  line-height: 1.6;
}

#waku-app .asiba-mode-card fieldset {
  margin: 10px 0;
}

/* カードの見分け */
#waku-app .asiba-mode-card.asiba-mode-card-single {
  border-color: #3b82f6;
}

#waku-app .asiba-mode-card.asiba-mode-card-building {
  border-color: #10b981;
  background: rgba(0,0,0,0.03);
}

/* 建物UIはカード内で二重枠にならないように調整 */
#waku-app #asibaBuildingModeWrap #asibaBuildingAutoAssign {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 共通オプションのまとめ */
#waku-app #asibaCommonOptionsWrap {
  border: 1px solid var(--asiba-border);
  border-radius: 16px;
  padding: 12px;
  background: var(--asiba-surface-2);
  margin: 14px 0 12px;
}

#waku-app #asibaCommonOptionsWrap .asiba-common-head {
  padding: 0 2px 10px;
}

#waku-app #asibaCommonOptionsWrap .asiba-common-title {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}

#waku-app #asibaCommonOptionsWrap .asiba-common-desc {
  font-size: 12px;
  color: var(--asiba-muted);
  line-height: 1.6;
}

#waku-app #asibaCommonOptionsWrap fieldset {
  margin: 10px 0;
}

#waku-app #asibaCommonOptionsWrap .asiba-advanced {
  margin: 10px 0;
}

#waku-app .asiba-dlformat-note {
  font-size: 12px;
  color: var(--asiba-muted);
  margin-top: 6px;
}
/* ---------------------------------------------------------
   Floating Help Button (FAB)
--------------------------------------------------------- */
#waku-app #asibaHelpFab {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  z-index: 100000;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: var(--asiba-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  cursor: pointer;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

#waku-app #asibaHelpFab:active {
  transform: translateY(1px);
}

@media (max-width: 640px) {
  #waku-app #asibaHelpFab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 116px);
  }
}

/* ---------------------------------------------------------
   Tiny help icons + tooltip
--------------------------------------------------------- */
#waku-app .asiba-help-icon {
  margin-left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--asiba-border);
  background: rgba(255,255,255,0.95);
  color: var(--asiba-muted);
  font-size: 12px;
  line-height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#waku-app .asiba-tooltip {
  position: fixed;
  max-width: 320px;
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.6;
  z-index: 100000;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* ---------------------------------------------------------
   Help modal
--------------------------------------------------------- */
#waku-app #asibaHelpModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#waku-app #asibaHelpModal.open {
  display: flex;
}

#waku-app #asibaHelpModal .asiba-help-box {
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--asiba-surface);
  border-radius: 16px;
  border: 1px solid var(--asiba-border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  padding: 16px 16px 14px;
}

#waku-app #asibaHelpModal .asiba-help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#waku-app #asibaHelpModal .asiba-help-header h2 {
  font-size: 16px;
}

#waku-app #asibaHelpModal .asiba-help-close {
  border: 1px solid var(--asiba-border);
  background: var(--asiba-surface-2);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}

#waku-app #asibaHelpModal .asiba-help-body {
  font-size: 13px;
  line-height: 1.7;
}

#waku-app #asibaHelpModal .asiba-help-body h3 {
  font-size: 14px;
  margin: 14px 0 6px;
}

#waku-app #asibaHelpModal .asiba-help-body ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

#waku-app #asibaHelpModal .asiba-help-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ---------------------------------------------------------
   Guided tour overlay
--------------------------------------------------------- */
#waku-app #asibaTourOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  /* ツアー中もフォーム入力できるように、基本はクリックを透過 */
  pointer-events: none;
}

#waku-app #asibaTourHighlight {
  position: fixed;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  /* 追従中の transition は「ズレ」に見えるため無効化 */
  transition: none;
  will-change: left, top, width, height;
  /* ハイライト枠が入力操作を邪魔しないように */
  pointer-events: none;
}

#waku-app #asibaTourPopover {
  position: fixed;
  will-change: left, top;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--asiba-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  /* ボタン操作はできるように */
  pointer-events: auto;
}

#waku-app #asibaTourPopover .asiba-tour-title {
  font-weight: 900;
  margin-bottom: 6px;
}

#waku-app #asibaTourPopover .asiba-tour-text {
  font-size: 13px;
  line-height: 1.6;
}

#waku-app #asibaTourPopover .asiba-tour-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ツアー中の入力案内（小さめ） */
#waku-app #asibaTourPopover .asiba-tour-livehint {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   Advanced options wrapper
--------------------------------------------------------- */
#waku-app details.asiba-advanced {
  border: 1px solid var(--asiba-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--asiba-surface-2);
  margin: 12px 0;
}

#waku-app details.asiba-advanced > summary {
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

#waku-app details.asiba-advanced > summary::-webkit-details-marker {
  display: none;
}

#waku-app details.asiba-advanced .asiba-advanced-note {
  font-size: 12px;
  color: var(--asiba-muted);
  margin-top: 6px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Building auto assign: collapse body until enabled
--------------------------------------------------------- */
#waku-app #asibaBuildingAutoAssign .asiba-building-body {
  display: none;
}

#waku-app #asibaBuildingAutoAssign.asiba-enabled .asiba-building-body {
  display: block;
}

#waku-app #asibaBuildingAutoAssign .asiba-building-hint {
  margin: 8px 0 10px;
  font-size: 12px;
  color: var(--asiba-muted);
  line-height: 1.55;
}

/* ---------------------------------------------------------
   建物4面モード時：壁つなぎ長さは自動選択（UIは非表示）
--------------------------------------------------------- */
#waku-app .asiba-kabe-length-auto-note {
  display: none;
  margin: 6px 0 10px;
  padding: 8px 10px;
  border: 1px dashed var(--asiba-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  font-size: 12px;
  color: var(--asiba-muted);
  line-height: 1.6;
}

#waku-app.asiba-building-mode-on .asiba-kabe-length-auto-note {
  display: block;
}

#waku-app.asiba-building-mode-on label[for="kabeTsunagiLength"],
#waku-app.asiba-building-mode-on #kabeTsunagiLength {
  display: none !important;
}

/* ---------------------------------------------------------
   Settings card descriptions
--------------------------------------------------------- */
#waku-app #estimateSettingsContainer .settings-card .settings-card-desc {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

#waku-app #estimateSettingsContainer .asiba-settings-guide {
  grid-column: 1 / -1;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

#waku-app #estimateSettingsContainer .asiba-settings-guide h3 {
  font-size: 14px;
  margin-bottom: 6px;
}

#waku-app #estimateSettingsContainer .asiba-settings-guide p {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.7;
}