/* Source: app/assets/stylesheets/application.css */
@media (min-width: 769px) {
  html.sidebar-collapsed .sidebar { width: var(--sidebar-rail); padding: var(--toddyi-size-0-75rem) var(--toddyi-size-0-6rem); }
  /* Labels go, glyphs stay. This used to read "every span in a nav link that
     is not .nav-emoji", written when the glyphs were emoji — and #272 replaced
     them with the brand icon set, in .nav-icon spans. The exception no longer
     described anything, so the rule hid the icons too and the rail rendered as
     a column of empty boxes, the current page among them as a bare coloured
     pill. Naming the labels is what makes the rule say what it means. (#303) */
  html.sidebar-collapsed .sidebar__label { display: none; }
  html.sidebar-collapsed .brand,
  html.sidebar-collapsed .sidebar__head,
  html.sidebar-collapsed .nav-link,
  html.sidebar-collapsed .sidebar__action { justify-content: center; }
  html.sidebar-collapsed .sidebar__head { flex-direction: column; gap: var(--toddyi-size-0-4rem); }
  html.sidebar-collapsed .sidebar__collapse svg { transform: rotate(180deg); }
  html.sidebar-collapsed .nav-link,
  html.sidebar-collapsed .sidebar__action { gap: 0; }
}

/* Source: app/assets/stylesheets/application.css */
@media (max-width: 768px) {
  /* Fixed positioning ignores body padding, so the drawer has to reserve
     space for the Android status bar and gesture-nav strip explicitly.
     `--safe-*` tokens come from application.css and read as 0px in any
     non-notched context, so the desktop/browser layout is unchanged. */
  .sidebar {
    position: fixed;
    top: var(--safe-top); left: 0;
    height: calc(var(--toddyi-size-100vh) - var(--safe-top) - var(--safe-bottom));
    width: var(--sidebar-w);
    transform: translateX(-100%);
    box-shadow: 0 0 30px var(--toddyi-app-shadow);
  }
  html.sidebar-open .sidebar { transform: translateX(0); }
  html.sidebar-open .sidebar-overlay { display: block; }
  .topbar__burger { display: inline-flex; }
  .sidebar__collapse { display: none; }
}

/* Source: app/assets/stylesheets/components/datetime_picker.css */
@media (max-width: 720px) {
  .nav-links .nav-link span { display: none; }
  .hide-on-mobile { display: none; }
}

/* Source: app/assets/stylesheets/components/datetime_picker.css */
@media (max-width: 600px) {
  .new-task-btn .btn-text { display: none; }
  .new-task-btn { padding: var(--toddyi-size-0-7rem); border-radius: var(--toddyi-size-50pct); aspect-ratio: 1 / 1; justify-content: center; }
}

/* Source: app/assets/stylesheets/features/productivity.css */
@media (max-width: 600px) {
  .fc .fc-toolbar { flex-direction: column; gap: var(--toddyi-size-0-5rem); }
  .fc .fc-toolbar-title { font-size: var(--toddyi-size-1-05rem); }
}

/* Source: app/assets/stylesheets/features/productivity.css */
@media (max-width: 600px) {
  /* Drop the axis labels (they need horizontal room the phone does not have)
     but keep the 2x2 grid — a matrix that becomes a vertical list is not a
     matrix any more (#285). Quadrant titles still convey urgency/importance. */
  .matrix-grid { grid-template-columns: 1fr; }
  .matrix-axis-x, .matrix-axis-y { display: none; }
  .matrix { grid-column: 1; }
  .matrix-quad { min-height: var(--toddyi-size-140px); padding: var(--toddyi-size-0-5rem); }
  .matrix-quad__header strong { font-size: var(--toddyi-size-0-9rem); }
  .matrix-quad__header small { font-size: var(--toddyi-size-0-7rem); }
}