/* responsive.css — every breakpoint in the app, in one file.
 *
 * Narrowing, in max-width order:
 *   1080px  laptop: the sidebar narrows, side-by-side panels stack.
 *    820px  tablet: the topbar tightens.
 *    720px  MOBILE: the sidebar becomes a drawer and the ticket table becomes
 *           cards. This value is mirrored by MOBILE_MAX_PX in core/layout.js,
 *           which decides what the hamburger does; tests/layout.test.mjs fails
 *           if the two drift apart.
 *    480px  small phone: the last few things give way.
 *
 * Widening, in min-width order:
 *   1600px  the content caps step up.
 *   2200px  and again, for 1440p and ultrawide monitors.
 *
 * Note what does NOT grow with the screen: .wrap.narrow (the forms) and the
 * prose measures in views/ticket-detail.css. A wider input or a longer line is
 * harder to use, not easier — only the tables benefit. */

@media (max-width:1080px){
  .sidebar{width:218px}
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .tickets .thead,.tickets .row{grid-template-columns:58px minmax(0,2fr) minmax(0,1fr) 92px 110px 78px}
  .tickets.agent .thead,.tickets.agent .row{grid-template-columns:58px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 92px 110px 78px}
  main{padding:22px 20px 44px}
}

@media (max-width:820px){
  .search{width:150px}
  .me .n,.me .t{display:none}
  .me{padding:5px 6px}
  .topbar{gap:10px;padding:0 14px}
  /* The divider is centred in the topbar's gap, which just narrowed. */
  .me::before{left:-5px}
}

/* ---------- mobile ---------- */
@media (max-width:720px){

  /* The sidebar slides in over the page instead of taking a share of it. It is
     a sheet at this size, so it takes the sheet's material and its curve. */
  .sidebar{
    position:fixed;
    z-index:60;
    top:0;
    left:0;
    height:100dvh;
    width:min(292px,84vw);
    background:var(--glass-strong);
    transform:translateX(-100%);
    transition:transform var(--t-slow);
  }
  .app.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}

  /* The icon rail is a desktop idea. If the window was narrowed from a desktop
     size the class may still be on, so its effects are reverted here rather
     than left to make the drawer unreadable. */
  .app.collapsed .sidebar{width:min(292px,84vw)}
  .app.collapsed .sidebar .label,
  .app.collapsed .sidebar .eyebrow,
  .app.collapsed .sidebar .badge{display:revert}
  .app.collapsed .nav-item,
  .app.collapsed .role-item{justify-content:flex-start;padding-left:11px;padding-right:11px}

  .app.nav-open .scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:55;
    background:var(--scrim);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    animation:scrimIn 180ms ease-out both;
  }

  .topbar{height:56px;gap:8px;padding:0 10px}
  main{padding:16px 14px 40px}

  /* Anything typed into is set at 16px here, whatever the design says. Safari
     on iOS zooms the whole page in when a focused input is smaller than that,
     and then leaves the reader scrolled sideways on a layout built not to
     scroll sideways. This is the one place a size is a platform requirement
     rather than a choice. */
  .field,textarea.field,.search input,.tax-row input.name{font-size:16px}

  /* A finger is not a pointer: every control that was sized for a cursor gets
     the platform's 44px minimum back before it is asked to be tapped. */
  .icon-btn,.icon-btn.sm{width:40px;height:40px}
  .field{height:44px}
  .field.sm{height:40px}
  .dd-field{height:44px}
  .dd-field-sm,.dd-compact,.dd-chip{height:40px}
  .pg-num,.pg-step{min-width:40px;height:40px}
  .modal .x{width:36px;height:36px}
  .nav-item,.role-item{padding-top:11px;padding-bottom:11px}
  .btn{height:42px;padding:0 18px}
  .rm{padding:10px 14px}

  /* Ticket rows stop being a grid and become stacked cards: id and time on the
     first line, the subject across the second, everything else wrapping under
     it. Cells are addressed by position because the markup gives most of them
     no class, and the agent variant carries one extra column. */
  .tickets .thead{display:none}
  .tickets .row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    padding:15px 16px;
  }
  .tickets .row > *{min-width:0}
  .tickets .row > :first-child{order:1}
  .tickets .row > :last-child{order:1;margin-left:auto}
  .tickets .row > :nth-child(2){order:2;flex:1 1 100%}
  .tickets .row > :nth-child(n+3):nth-last-child(n+2){order:3}
  .tickets .row .subline{margin-top:3px}

  /* The roster gets the same treatment, minus the counters. Three actions do
     not fit beside the role at this width, so the last cell takes a line of
     its own and the buttons share it. */
  .users .thead{display:none}
  .users .row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:14px 16px}
  .users .row > :nth-child(1){flex:1 1 100%}
  .users .row > :nth-child(3),
  .users .row > :nth-child(4){display:none}
  .users .row > :last-child{margin-left:auto}
  .users .row > .row-actions{flex:1 1 100%;justify-content:flex-start;margin-left:0}
  .users .row-actions .rm{flex:1 1 auto;text-align:center}

  /* Forms: roomier taps, less chrome. */
  .pad{padding:20px 18px}
  .pri-pick{flex-wrap:wrap;gap:4px}
  .pri-pick button{flex:1 1 calc(50% - 4px);height:38px}
  .form-actions{flex-wrap:wrap}
  .form-actions .btn{flex:1 1 100%}
  .form-actions .spacer{display:none}

  /* Ticket detail: the thread is the content, so it gets the width back. */
  .t-title{font-size:21px}
  .comment{padding:16px}
  .composer{padding:16px}
  .comment .who{gap:6px}
  .event{padding:12px 16px}

  /* Two taxonomy cards side by side do not fit, and a taxonomy row holds three
     controls that need to wrap rather than squeeze. */
  .tax-grid{grid-template-columns:minmax(0,1fr)}
  .tax-row{flex-wrap:wrap;padding:12px 16px}
  .tax-row input.name{flex:1 1 100%}
  .tax-add{padding:14px 16px}

  .pager{gap:10px;justify-content:center}
  .pg-pages{margin-left:0}
  .pg-range{width:100%;text-align:center}
}

@media (max-width:480px){
  .page-sub{display:none}
  /* Only the avatar is left by now; the divider beside it is clutter. */
  .me{padding:5px 6px}
  .me::before{display:none}
  .search{max-width:38vw}
  .filters{gap:8px}
  .t-title{font-size:19px}
  .card{border-radius:var(--r-lg)}

  /* The sign-in card on a phone: less frame, more form. */
  .auth{padding:16px}
  .auth-card{padding:18px}
  .auth-wrap{gap:16px}

  /* The account cards: the padding around them is worth more as content, and
     a save button reachable with a thumb spans the card. */
  .account-id,.account-card{padding:16px}
  .account-id{gap:12px}
  .account-id .avatar{width:40px;height:40px;font-size:14px}
  /* The sign-out button drops under the name rather than squeezing it. */
  .account-id{flex-wrap:wrap}
  .account-id .account-signout{width:100%;margin-top:6px}
  .account-actions{margin-top:16px}
  .account-actions .btn{width:100%}

  /* A dialog on a phone: it comes up from the bottom edge and keeps its top
     corners, which is the shape the platform gives a sheet. The two footer
     buttons stop fitting side by side at a comfortable size. */
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{max-width:none;max-height:92dvh;border-radius:var(--r-2xl) var(--r-2xl) 0 0;border-bottom:0}
  .modal .foot{flex-direction:column-reverse;padding-bottom:22px}
  .modal .foot .btn{width:100%}
}

/* ---------- large desktop ----------
   Above this the 1200px cap starts to look like a mistake rather than a
   choice: on a 2560px monitor it left more than 500px empty on each side.
   The tables take the extra room; forms and prose do not, because
   a 1400px-wide input or a 110-character line is harder to use, not easier. */
@media (min-width:1600px){
  main{padding:30px 44px 64px}
  .wrap{max-width:1440px}
  .wrap.detail{max-width:1360px}
  .wrap.mid{max-width:1200px}
  .wrap.narrow{max-width:760px}
  .detail-grid{grid-template-columns:minmax(0,1fr) 330px}
}

/* ---------- very large desktop (1440p and up) ---------- */
@media (min-width:2200px){
  .sidebar{width:276px}
  main{padding:34px 52px 72px}
  .wrap{max-width:1600px}
  .wrap.detail{max-width:1520px}
  .wrap.mid{max-width:1320px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:1ms!important}
}