/* 統一控制項基線與面板內距，保留各色系及既有操作。 */
:root {
  --panel-inset: 16px;
  --control-height: 40px;
}
.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
}
.month-controls select {
  margin: 0;
  width: auto;
}
#cal {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
#cal .d {
  justify-content: flex-start;
}
#cal .d em {
  min-height: 22px;
  margin: 0;
}
#cal .d .c {
  text-align: center;
  width: 100%;
}
#compact-actions-anchor:empty {
  display: none;
}
#desktop-actions,
.support-section > summary,
.support-section .support-body,
#section-settings #cfg {
  padding-left: var(--panel-inset);
  padding-right: var(--panel-inset);
}
.support-section > summary > span:first-child {
  min-width: 0;
}
.action-heading h2,
.support-section > summary b {
  line-height: 1.5;
}
.action-heading > span,
.metric-value,
.prow .mu {
  font-variant-numeric: tabular-nums;
}
#desktop-actions .auto-action-row .b,
#desktop-actions .month-action-row .b {
  min-height: var(--control-height);
}
#desktop-actions .auto-settings {
  width: var(--control-height);
}
#cfg .prow {
  align-items: center;
}
#cfg .prow > .row {
  align-items: center;
  gap: 6px;
}
#cfg .prow > .row > .mu {
  min-width: 5ch;
  text-align: center;
  white-space: nowrap;
}
#cfg .support-body,
#cfg .box {
  min-width: 0;
}
#cfg .box > .row:not(.prow) {
  align-items: center;
  gap: 8px;
}
#cfg .box > .row:not(.prow) > :is(input, select, .b) {
  min-height: var(--control-height);
  margin-top: 0;
}

/* 桌面月份切換與匯出共用一列，不用絕對定位預留空白。 */
.desktop-layout .calendar-panel#mainc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 12px;
  padding: var(--panel-inset) var(--panel-inset) 0;
}
.desktop-layout #mainc > .nav {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-right: 0;
}
.desktop-layout #mainc > .calendar-top {
  grid-column: 2;
  grid-row: 1;
  position: static;
  align-self: center;
  margin: 0;
}
.desktop-layout #mainc > .calendar-top .calendar-actions {
  flex-wrap: nowrap;
}
.desktop-layout
  #mainc
  > :is(#last-updated, #compact-actions-anchor, #cal, .calendar-footer) {
  grid-column: 1 / -1;
}
.desktop-layout #mainc > #last-updated {
  margin: 0;
}
.desktop-layout .month-controls :is(.b, select),
.desktop-layout .calendar-actions .export-btn {
  min-height: var(--control-height);
  height: var(--control-height);
}
.desktop-layout .month-controls .arrow {
  width: 34px;
}
.desktop-layout .calendar-footer {
  align-items: center;
  margin-top: 0;
}
.desktop-layout .support-section > summary {
  padding-top: 14px;
  padding-bottom: 14px;
}
.desktop-layout #desktop-actions .assignment-modes .b,
.desktop-layout #desktop-actions .person-chip.b {
  min-height: var(--control-height);
}

/* 窄面板的姓名與權重各用一列，每位人員的開關及按鈕固定對齊。 */
:is(.desktop-layout, .phone-layout) #cfg .prow:has(> .row > .mu) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
:is(.desktop-layout, .phone-layout) #cfg .prow > .row:has(> .mu) {
  display: grid;
  grid-template-columns: 34px 34px minmax(5ch, 1fr) 34px 56px;
  width: 100%;
  margin-left: 0;
}
:is(.desktop-layout, .phone-layout) #cfg .prow > .row:has(> .mu) > .b {
  min-height: var(--control-height);
  padding: 5px;
}
:is(.desktop-layout, .phone-layout) #cfg .prow .est {
  display: none;
}

/* 手機頂列分成品牌／色系及帳號列，左右邊緣對齊內容。 */
.phone-layout {
  --panel-inset: 12px;
  --control-height: 44px;
}
.phone-layout .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
}
.phone-layout .compact-brand {
  min-width: 0;
  gap: 6px;
}
.phone-layout .compact-brand img {
  width: 28px;
  height: 28px;
  flex: none;
}
.phone-layout .compact-brand > span {
  font-size: 15px;
  letter-spacing: 0;
}
.phone-layout .theme-switcher {
  margin: 0;
  justify-self: end;
  gap: 4px;
  font-size: 11px;
}
.phone-layout .theme-switcher select {
  min-height: 40px;
  padding: 6px;
  font-size: 12px;
}
.phone-layout .account {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  gap: 8px;
}
.phone-layout .account #who {
  flex: 1;
  max-width: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-layout .account .b {
  min-height: var(--control-height);
}
.phone-layout .calendar-panel#mainc {
  padding-left: var(--panel-inset);
  padding-right: var(--panel-inset);
}
.phone-layout .phone-monthbar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px auto;
  gap: 6px;
}
.phone-layout .phone-monthbar > .b {
  width: 100%;
  min-width: 0;
}
.phone-layout .phone-monthbar > .phone-month-picker {
  font-size: clamp(15px, 4vw, 18px);
}
.phone-layout .calendar-top {
  padding: 0;
}
.phone-layout .support-section > summary {
  min-height: 56px;
}

@media (min-width: 1000px) and (max-width: 1150px) {
  .desktop-layout {
    --panel-inset: 12px;
  }
  .desktop-layout #mainc > .nav {
    padding-right: 0;
  }
}