/* Calendar controls share the warm utility surfaces, rather than browser chrome. */
.crab-h5 .compose-event-fields .dt-native, .crab-h5 .organizer-planner-page .schedule-compose .dt-native { display: none; }
.crab-h5 .dt-trigger { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 66px; padding: 10px 12px; border: 1px solid #BFC9CB; border-radius: 14px; background: #FFFEFB; text-align: left; color: var(--ink); }
.crab-h5 .dt-trigger-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: #E6F1F8; color: #365F78; }
.crab-h5 .dt-trigger-icon svg { width: 22px; height: 22px; }
.crab-h5 .dt-trigger-copy { display: grid; flex: 1; min-width: 0; gap: 3px; font: 400 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-trigger-copy > span { color: var(--ink-2); }
.crab-h5 .dt-trigger-copy strong { font-weight: 700; }
.crab-h5 .dt-trigger-copy small { color: #5C6670; font-size: 14px; font-variant-numeric: tabular-nums; }
.crab-h5 .dt-trigger-copy small span { margin-left: 6px; font-size: 11px; }
.crab-h5 .dt-trigger-chevron { width: 18px; height: 18px; flex: none; color: #777780; }
.crab-h5 .dt-trigger-chevron svg { width: 100%; height: 100%; }
.crab-h5 .dt-trigger:focus-visible, .crab-h5 .dt-sheet :is(button,input):focus-visible { outline: 3px solid #427EB9; outline-offset: 2px; }
.crab-h5 .dt-trigger[aria-expanded="true"] { border-color: #427EB9; background: #F3F8FC; }
.crab-h5 .dt-trigger[aria-invalid="true"] { border-color: #B95240; }
.crab-h5 .dt-layer { position: absolute; z-index: 180; inset: 0; display: flex; align-items: end; justify-content: center; isolation: isolate; }
.crab-h5 .dt-scrim { position: absolute; inset: 0; z-index: -1; background: #201C225C; }
.crab-h5 .dt-sheet { display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: calc(100% - var(--h5-safe-top) - 12px); padding: 0; border: 1px solid #CBC9C3; border-bottom: 0; border-radius: 26px 26px 0 0; background: #FFFCF7; color: var(--ink); box-shadow: 0 -12px 36px #201C2214; overflow: hidden; }
.crab-h5 .dt-heading { display: flex; flex: none; align-items: start; gap: 12px; padding: 21px 20px 12px; background: linear-gradient(180deg,#F5F5EA,#EDF4F5); border-bottom: 1px solid #DEE3DE; }
.crab-h5 .dt-heading > div { flex: 1; min-width: 0; }
.crab-h5 .dt-heading h2 { margin: 0; font: 700 23px/1.4 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-heading p { margin: 5px 0 0; color: #5C6670; font: 400 12px/1.6 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 10px; border: 1px solid #C3CDCF; border-radius: 50%; background: #FFFEFB; }
.crab-h5 .dt-close svg { width: 22px; height: 22px; }
.crab-h5 .dt-body { flex: 1; min-height: 0; padding: 10px 20px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.crab-h5 .dt-calendar-nav { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 8px; margin-bottom: 6px; }
.crab-h5 .dt-calendar-nav h3 { margin: 0; text-align: center; font: 700 17px/1.5 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-calendar-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid #D5DAD5; border-radius: 13px; background: #FFFEFB; color: var(--ink); }
.crab-h5 .dt-calendar-nav button:disabled { opacity: .35; }
.crab-h5 .dt-calendar-nav svg { width: 20px; height: 20px; }
.crab-h5 .dt-prev svg { transform: rotate(180deg); }
.crab-h5 .dt-weekdays, .crab-h5 .dt-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.crab-h5 .dt-weekdays > span { display: grid; place-items: center; min-width: 0; min-height: 28px; color: #706D74; font: 500 12px/1.4 var(--sans); text-align: center; overflow-wrap: anywhere; }
.crab-h5 .dt-week > button { display: grid; place-items: center; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 500 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.crab-h5 .dt-week > button > span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; }
.crab-h5 .dt-week > button[aria-current="date"] > span { border-color: #9CBCD2; background: #EAF4FB; }
.crab-h5 .dt-week > button[aria-selected="true"] > span { border-color: var(--ink); background: #FF9B81; color: var(--ink); box-shadow: 1px 1px 0 var(--ink); font-weight: 700; }
.crab-h5 .dt-week > button:focus-visible { position: relative; z-index: 1; outline-offset: -2px; border-radius: 10px; }
.crab-h5 .dt-time { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #DEE3DE; }
.crab-h5 .dt-today { flex: 0 1 auto; min-width: 0; min-height: 44px; max-width: 45%; padding: 8px 12px; border: 1px solid #C4D5DC; border-radius: 12px; background: #EDF5FA; color: #365F78; font: 700 13px/1.5 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-time-entry { display: flex; align-items: end; gap: 8px; }
.crab-h5 .dt-time-entry label { display: grid; gap: 5px; color: #5C6670; font: 500 12px/1.5 var(--sans); text-align: center; }
.crab-h5 .dt-time-entry > span { display: grid; align-items: center; height: 50px; font: 700 24px/1 var(--sans); }
.crab-h5 .dt-time-entry input { box-sizing: border-box; width: 62px; height: 50px; min-width: 0; padding: 6px 3px; border: 1px solid #BFC9CB; border-radius: 12px; background: #F0F6FA; color: var(--ink); font: 700 24px/1.4 var(--sans); font-variant-numeric: tabular-nums; text-align: center; }
.crab-h5 .dt-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFE3DC; color: #8F2E22; font: 400 13px/1.6 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-error[hidden] { display: none; }
.crab-h5 .dt-footer { display: grid; grid-template-columns: 1fr 1fr 1.3fr; flex: none; gap: 12px; padding: 14px 20px calc(18px + env(safe-area-inset-bottom,0px)); border-top: 1px solid #DEE3DE; background: #FFFCF7; }
.crab-h5 .dt-footer button { min-width: 0; min-height: 50px; padding: 10px 12px; border-radius: 14px; font: 700 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.crab-h5 .dt-cancel { border: 1px solid #C9CFCA; background: #FFFEFB; color: var(--ink); }
.crab-h5 .dt-footer .dt-clear { padding-inline: 4px; border: 0; background: transparent; color: #5C6670; font-size: 13px; font-weight: 500; }
.crab-h5 .dt-confirm { border: var(--comic-line); background: var(--coral); color: var(--ink); box-shadow: var(--crab-small-shadow); }
@media(max-width:360px) {
  .crab-h5 .dt-heading { padding-inline: 16px; }
  .crab-h5 .dt-body { padding-inline: 16px; }
  .crab-h5 .dt-calendar { margin-inline: -11px; }
  .crab-h5 .dt-footer { padding-inline: 16px; }
  .crab-h5 .dt-layer:lang(ja) .dt-footer { grid-template-columns: .9fr 1.2fr 1.2fr; }
  .crab-h5 .dt-layer:lang(ja) .dt-cancel { padding-inline: 8px; }
  .crab-h5 .dt-trigger { gap: 9px; padding-inline: 10px; }
}