/* Compact deadline interaction and mobile browsing dock. */
.mobile-browse-dock { display: none; }
.deadline-field { margin: 0 0 20px; }
.deadline-field > .form-label { display: block; margin-bottom: 7px; }
.deadline-summary { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.deadline-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e7f0; border-radius: 6px; padding: 6px 10px; min-height: 36px; font-size: 12px; color: #75829a; background: #fafbfd; }
.deadline-chip svg { width: 14px; height: 14px; }
.deadline-chip svg:last-child { width: 11px; color: #9ba5b8; }
.deadline-chip.has-deadline { background: #f3f6ff; color: #526ebf; border-color: #dbe3fa; }
.deadline-clear { width: 30px; height: 34px; margin-left: auto; }
.countdown { display: inline-flex; color: #7288bb; background: #f1f5fc; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown[data-done="true"] { color: #7c9888; background: #f1f6f3; }
.countdown.elapsed, .deadline-preview.elapsed { color: #b37975; background: #fcf2f0; }
.deadline-picker { margin-top: 12px; padding: 16px; background: #fafbfd; border: 1px solid #e3e9f3; border-radius: 8px; }
.deadline-modes { display: flex; align-items: center; gap: 6px; padding-bottom: 18px; }
.deadline-modes button { font-size: 11px; min-height: 34px; padding: 6px 12px; color: #8b97ac; border: 1px solid transparent; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; }
.deadline-modes svg { width: 13px; height: 13px; }
.deadline-modes [aria-pressed="true"] { color: #526ebf; background: white; border-color: #e1e7f3; box-shadow: 0 1px 3px #263c6610; }
.hours-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.hours-heading label { font-size: 11px; color: #8d99ae; }
.hours-heading output { font-size: 14px; font-weight: 600; color: #5c75be; font-variant-numeric: tabular-nums; }
#deadline-hours { width: 100%; height: 30px; margin: 0; cursor: pointer; accent-color: var(--blue); }
.range-scale { display: flex; justify-content: space-between; font-size: 10px; color: #a0aabd; margin-bottom: 12px; }
.hour-presets { display: flex; gap: 7px; }
.hour-presets button { flex: 1; border: 1px solid #e3e8f2; background: white; border-radius: 5px; padding: 6px 3px; min-height: 32px; color: #8d99b0; font-size: 11px; }
.hour-presets button.active { border-color: #cbd7f8; color: #5c75be; background: #f1f5ff; }
#deadline-custom .date-shortcuts { margin: 0 0 12px; }
#deadline-custom .form-group { margin-bottom: 4px; }
#deadline-custom .form-hint { margin-top: 6px; }
.deadline-preview { font-size: 11px; color: #8291ab; line-height: 1.8; margin: 14px 0; padding: 9px 10px; background: #f0f3f8; border-radius: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.deadline-error { font-size: 11px; color: #b45a57; margin: 0 0 10px; }
.deadline-picker-footer { display: flex; align-items: center; gap: 8px; }
.deadline-picker-footer > .text-button { margin-right: auto; font-size: 10px; }
.deadline-picker-footer .button { min-height: 33px; font-size: 11px; padding: 6px 12px; }
@media (max-width: 760px) {
  :root { --mobile-nav-height: 64px; --browse-dock-height: 99px; }
  .topbar { height: 40px; padding: 0 18px; }
  main { padding: 15px 18px calc(var(--mobile-nav-height) + var(--browse-dock-height) + 28px + env(safe-area-inset-bottom)); }
  .page-heading { margin-bottom: 16px; gap: 10px; }
  .eyebrow, .page-heading p { display: none; }
  h1 { font-size: 22px; letter-spacing: -.5px; }
  .page-heading .button { min-height: 38px; font-size: 12px; padding: 7px 12px; }
  .toolbar { gap: 0; }
  .search-field { height: 38px; }
  .filterbar { padding: 9px 0 12px; min-height: 36px; }
  .filter-description { font-size: 10px; }
  .quick-add { margin-bottom: 6px; padding: 7px 9px; }
  .quick-add .button { min-height: 34px; }
  .task-section-label { margin-top: 10px; padding-top: 5px; }
  .task-row { padding: 14px 3px; }
  .mobile-browse-dock { display: flex; flex-direction: column; position: fixed; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 20; height: var(--browse-dock-height); padding: 0 15px; border-top: 1px solid #e7ebf2; background: #fcfdfffa; backdrop-filter: blur(12px); }
  .mobile-browse-dock .tabs { flex: 0 0 45px; height: 45px; width: 100%; gap: 22px; border-bottom: 1px solid #eef0f5; overflow-x: auto; scrollbar-width: none; }
  .mobile-browse-dock .tab { min-height: 44px; font-size: 12px; }
  .mobile-browse-dock .context-filters { flex: 0 0 53px; height: 53px; margin: 0; overflow: hidden; display: flex; align-items: center; }
  .mobile-browse-dock .category-strip, .mobile-browse-dock .task-filter-controls { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; gap: 7px; padding: 3px 0; }
  .mobile-browse-dock .filter-pill { flex-shrink: 0; min-height: 40px; font-size: 11px; padding: 7px 11px; }
  .mobile-browse-dock .task-filter-controls label { flex-shrink: 0; }
  .mobile-browse-dock .task-filter-controls select { min-height: 40px; font-size: 12px; padding: 7px 8px; max-width: 116px; }
  .mobile-browse-dock .text-button { white-space: nowrap; flex-shrink: 0; padding: 0 7px; }
  .mobile-nav { height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 0 20px env(safe-area-inset-bottom); background: #fff; backdrop-filter: none; border-color: #eef0f5; }
  .mobile-nav > button { width: 50%; min-height: 56px; gap: 4px; font-size: 11px; }
  .toast-region { bottom: calc(var(--mobile-nav-height) + var(--browse-dock-height) + 12px + env(safe-area-inset-bottom)); }
  body:has(dialog[open]) .toast-region { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .deadline-picker { padding: 13px; }
  .deadline-chip { min-height: 40px; font-size: 12px; }
  .deadline-modes { padding-bottom: 14px; gap: 3px; }
  .deadline-modes button { min-height: 40px; padding: 7px 10px; font-size: 12px; }
  .hour-presets { gap: 5px; }
  .hour-presets button { min-height: 40px; font-size: 12px; }
  .hours-heading output { font-size: 15px; }
  #deadline-hours { height: 40px; }
  .deadline-preview { font-size: 11px; }
  .deadline-picker-footer { gap: 6px; }
  .deadline-picker-footer .button { min-height: 40px; padding: 7px 11px; font-size: 12px; }
  .deadline-picker-footer > .text-button { font-size: 11px; padding: 0; }
  #deadline-custom .date-shortcuts button { min-height: 38px; }
  #deadline-custom .form-row { gap: 9px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  #deadline-custom .form-control { padding: 10px 5px; }
  .countdown { font-size: 10px; }
}