/* 小澄涵紫微排盤 V2.0：手機／平板／桌機響應式介面 */
:root { --app-gap: 12px; }
html { width: 100%; min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
  width: 100%; min-height: 100%; margin: 0;
  padding-left: max(8px, env(safe-area-inset-left)) !important;
  padding-right: max(8px, env(safe-area-inset-right)) !important;
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}
button, input, select, label { touch-action: manipulation; }
button, input, select { max-width: 100%; }
.ctrl-panel { width: 100%; box-sizing: border-box; }
.ctrl-panel > div { max-width: 100%; }
.ctrl-group { min-width: 0; max-width: 100%; flex-wrap: wrap; }
#capture-area { width: 100%; min-width: 0; overflow: visible; }
.ziwei-board { width: min(680px, 100%); min-width: 0; flex: 0 0 auto; }
#teaching-toolbar { width: min(680px, 100%); max-width: 680px; box-sizing: border-box; margin-left:auto; margin-right:auto; }
.app-version { width: 100%; max-width: 896px; margin: 12px auto 0; text-align: center; font-size: 10px; color: #A39A94; letter-spacing: .04em; }

@media (max-width: 1024px) {
  body { padding: 10px !important; }
  .ctrl-panel { padding: 12px !important; }
  .ctrl-panel > div { gap: 10px !important; }
  .ctrl-group { gap: 7px !important; }
  #teaching-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  #teaching-toolbar > div:last-child { justify-content: center; }
}

@media (max-width: 767px) {
  :root { --app-gap: 8px; }
  body { padding: max(6px, env(safe-area-inset-top)) 6px max(14px, env(safe-area-inset-bottom)) !important; overflow-x: hidden; }
  .ctrl-panel { padding: 9px !important; border-radius: 10px !important; }
  .ctrl-panel > div { width: 100%; margin-bottom: 8px !important; gap: 8px !important; align-items: stretch !important; }
  .ctrl-panel > div:last-child { margin-bottom: 0 !important; }
  .ctrl-group { width: 100%; padding: 8px !important; gap: 7px !important; align-items: center !important; overflow: visible; }
  .ctrl-label { min-width: auto !important; }
  input.ctrl-input, select.ctrl-input { min-height: 36px; font-size: 16px !important; }
  button { min-height: 36px; }
  .gender-choice, .toolbar-choice, .ctrl-group label { min-height: 30px; align-items: center; }
  #input-city-search { flex: 1 1 150px; width: auto !important; }
  #input-name { flex: 1 1 120px; width: auto !important; }
  #input-decade { flex: 1 1 130px; width: auto !important; min-width: 130px !important; }
  #input-liunian { flex: 1 1 100px; }
  .decade-compact-group { padding-left: 8px !important; padding-right: 8px !important; }
  .sihua-horizontal { flex-wrap: wrap !important; }
  #teaching-toolbar { padding: 8px !important; border-radius: 10px !important; }
  #teaching-toolbar > div:last-child { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; }
  #teaching-toolbar button { width: 100%; margin-left: 0 !important; min-height: 40px; }
  #capture-area { margin-top: 8px !important; }
  .ziwei-board { width: calc(100vw - 12px); max-width: 680px; }
  .center-board { padding: 10px 12px !important; }
  .center-summary > div:first-child { flex-wrap: wrap; justify-content: center; gap: 5px 8px !important; }
  .center-summary .text-xl { font-size: 1rem !important; }
  .center-date-table { font-size: 9px !important; }
  .app-version { margin-top: 8px; font-size: 9px; }
}

@media (max-width: 430px) {
  .ctrl-panel { padding: 7px !important; }
  .ctrl-group { padding: 7px !important; }
  .ctrl-panel .h-4.border-l { display: none; }
  .ctrl-panel .mx-2 { margin-left: 4px !important; margin-right: 4px !important; }
  .ziwei-board { width: calc(100vw - 12px); }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
  .ziwei-board { width: min(calc(100vw - 16px), calc(100vh - 18px)); }
  #capture-area { align-items: flex-start; }
}

@media print {
  .ctrl-panel, #teaching-toolbar, .app-version, body > div[aria-label="網站品牌"] { display: none !important; }
  body { padding: 0 !important; }
  #capture-area { margin: 0 !important; }
  .ziwei-board { width: 190mm !important; max-width: 190mm !important; box-shadow: none !important; }
}


@media (max-width: 767px) {
  .toolbar-collapse-strip { padding:0 2px; }
  .toolbar-collapse-btn { min-height:32px; }
  .calibration-five-grid > * { min-height:28px; font-size:9px; }
  .calibration-status { font-size:7.5px; }
}

/* fix2：教學工具列所有尺寸維持單排，可左右滑動 */
@media (max-width: 1024px) {
  #teaching-toolbar { display: block; }
  #teaching-toolbar.hidden { display: none !important; }
}
@media (max-width: 767px) {
  #teaching-toolbar .teaching-toolbar-single-row { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; justify-content:flex-start; }
  #teaching-toolbar .teaching-toolbar-single-row > button { width:auto !important; min-height:36px; margin-left:0 !important; }
}

/* fix26：手機中宮國曆／農曆標籤完整顯示；不調整任何向心自化線條或邏輯 */
@media (max-width: 767px) {
  .center-date-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .center-date-row {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 32px minmax(46px, 1.35fr) minmax(27px, .72fr) minmax(27px, .72fr) minmax(38px, 1fr) !important;
    column-gap: 2px !important;
    white-space: nowrap !important;
  }

  .center-date-row > span {
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .center-date-row .date-label {
    display: block !important;
    min-width: 32px !important;
    width: 32px !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0 !important;
  }

  .center-date-row > span:nth-child(2) {
    padding-right: 1px !important;
  }

  .center-date-row .date-month,
  .center-date-row .date-day {
    padding-right: 1px !important;
  }
}

@media (max-width: 390px) {
  .center-date-table { font-size: 8.5px !important; }
  .center-date-row {
    grid-template-columns: 30px minmax(43px, 1.35fr) minmax(25px, .72fr) minmax(25px, .72fr) minmax(35px, 1fr) !important;
    column-gap: 1px !important;
  }
  .center-date-row .date-label {
    min-width: 30px !important;
    width: 30px !important;
  }
}

/* ═══ fix31：手機宮職遮蔽修正 ═══
   成因：.palace-role-grid 的欄寬寫死為 minmax(42px,1fr) + minmax(28px,.72fr)，
   加上欄距共需 72px；但 .palace-footer 在手機上的中欄是
   「34px / 28px 固定側欄 + minmax(0,1fr)」，實測 360px 視窗只剩 15.9px。
   role-grid 撐爆中欄後往左右溢出，被 .palace-name-block 的 overflow:hidden
   裁掉左半，本命宮職（交友／疾厄／財帛…）因此缺字。
   修法：側欄改為百分比，讓中欄隨宮格等比放大；role-grid 取消固定最小寬，
   改為純比例分配；宮職與色籤取消 min-width 並微調字級。
   實測 320／360／390／430／600／780px：role-grid 溢出 0px，
   宮職、色籤、歲數、西元、干支皆無截斷。 */
@media (max-width: 780px) {
  .palace-footer {
    grid-template-columns: 29% minmax(0, 1fr) 29% !important;
    column-gap: 1px !important;
  }
  .palace-role-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr) !important;
    column-gap: 1px !important;
    width: 100% !important;
  }
  .palace-role-grid.role-single { grid-template-columns: minmax(0, 1fr) !important; }
  .palace-name-text { min-width: 0 !important; width: 100% !important; }
  .palace-layer-label {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 1px 0 !important;
    font-size: 8.5px !important;
  }
  /* 中欄不再需要裁切保護，取消後即使字級微調也不會缺字 */
  .palace-name-block { overflow: visible !important; }
  .palace-decade-start-age { font-size: 10px !important; }
}
/* ═══ fix32：手機（≤600px）改為單欄宮職 ═══
   前一版為了讓「本命／大限／流年」與「流月／流日／流時」兩欄並存，
   字級被壓到 9.5px～7.5px，實機偏小。
   手機改為只保留左欄（本命宮職／大限／流年），右欄的流月／流日／流時色籤隱藏，
   整個中欄讓給左欄，字級因此可拉回 11px／9px。
   流月、流日、流時仍照常參與排盤與三方四正標示，只是不在宮格內顯示小色籤；
   要在手機上切換這三層，改用最上方的流運快選列即可。 */
@media (max-width: 600px) {
  .palace-role-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .palace-role-grid .role-c2 { display: none !important; }
  .palace-name-text { font-size: 11px !important; }
  .palace-layer-label { font-size: 9px !important; padding: 1px 2px !important; }
  .palace-decade-start-age { font-size: 9px !important; letter-spacing: -0.06em !important; }
}

/* 340px 以下（iPhone SE 一代等）再收一級 */
@media (max-width: 340px) {
  .palace-name-text { font-size: 10px !important; }
  .palace-layer-label { font-size: 8px !important; }
  .palace-decade-start-age { font-size: 8.5px !important; letter-spacing: -0.06em !important; }
}