/* Compact duration controls. Shared reminder styling remains in planning-v40. */
#recordDialog .record-date-context { margin-bottom: 20px; }
#recordDialog .record-date-field { min-height: 48px; gap: 12px; }
#recordDialog #recordDate[hidden] { display: none; }
#recordDialog #recordDateButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 44px;
  padding: 7px 0 7px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
#recordDialog #recordDateButton svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
#recordDialog #recordDateButton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#recordDialog #recordTimePanel .duration-fields { display: block; margin: 0 0 12px; }
#recordDialog #recordTimePanel .duration-fields legend { margin-bottom: 9px; }
#recordDialog .duration-input-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(100%, 340px);
}
#recordDialog .duration-input-row:has(.adjustment-toggle[hidden]) {
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  width: min(100%, 250px);
}
#recordDialog .duration-input-row .adjustment-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2px;
  height: 48px;
  margin: 0;
  padding: 2px;
  border-radius: 10px;
  background: var(--entry-fill);
}
#recordDialog .duration-input-row .adjustment-toggle[hidden] { display: none; }
#recordDialog .duration-input-row .adjustment-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 450;
  touch-action: manipulation;
}
#recordDialog .duration-input-row .adjustment-button.is-active {
  color: var(--accent-hover);
  background: #fff;
  box-shadow: 0 1px 4px #192c2317;
}
#recordDialog .duration-input-row label { min-width: 0; }
#recordDialog .duration-input-row input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 38px 0 12px;
  font-size: 21px;
  font-weight: 500;
  appearance: textfield;
  -moz-appearance: textfield;
}
#recordDialog .duration-input-row input::-webkit-inner-spin-button,
#recordDialog .duration-input-row input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#recordDialog .duration-input-row label span { right: 9px; font-size: 12px; }
#recordDialog .duration-input-row .duration-separator { height: 48px; line-height: 46px; text-align: center; font-size: 18px; }
#recordDialog .duration-presets { gap: 8px; margin-bottom: 18px; }
#recordDialog .duration-presets button { padding-inline: 14px; min-height: 38px; }
#recordDialog #newReminderButton {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, white);
  border-radius: 12px;
  color: var(--accent-hover);
  background: var(--accent-soft);
  box-shadow: 0 1px 3px #213a3309;
}
#recordDialog #newReminderButton[hidden] { display: none; }
#recordDialog #newReminderButton svg { width: 25px; height: 25px; stroke-width: 2; }

/* Include tablet landscape, and keep the shortcut inside the visible viewport. */
@media (max-width: 1279px), (pointer: coarse) {
  .app-shell:has(#calendarView:not([hidden])) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  #quickActions {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right, 0px) + var(--quick-vv-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--quick-vv-bottom, 0px));
    display: block;
    width: 60px;
    height: 60px;
    margin: 0;
    transition: none;
  }
  #quickActions[hidden] { display: none; }
  #quickToggle { width: 60px; height: 60px; border-radius: 19px; touch-action: manipulation; }
  #quickToggle svg { width: 30px; height: 30px; }
  #quickActions .quick-menu {
    right: 0;
    bottom: 74px;
    max-height: calc(var(--quick-vv-height, 100dvh) - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}
.calendar-grid [data-date] { touch-action: manipulation; }

@media (max-width: 640px) {
  #recordDialog .record-date-context { margin-bottom: 17px; }
  #recordDialog #recordDateButton { gap: 8px; font-size: 14px; }
  #recordDialog .duration-input-row { gap: 7px; width: 100%; max-width: 340px; }
  #recordDialog .duration-presets { margin-bottom: 16px; }
  #recordDialog #recordTimePanel .duration-fields { margin-bottom: 10px; }
  #recordDialog .dialog-header { align-items: center; }
}
@media (max-width: 360px) {
  #recordDialog .duration-input-row { grid-template-columns: 94px minmax(0, 1fr) 6px minmax(0, 1fr); gap: 5px; }
  #recordDialog .duration-input-row input { padding-left: 9px; padding-right: 32px; font-size: 20px; }
  #recordDialog .duration-input-row label span { right: 6px; font-size: 11px; }
  #recordDialog .duration-presets button { padding-inline: 12px; }
}
@media (hover: hover) and (pointer: fine) {
  #recordDialog #recordDateButton:hover { color: var(--accent-hover); }
  #recordDialog #newReminderButton:hover { background: color-mix(in srgb, var(--accent) 15%, white); }
}