/*
 * Tablets and phones. Loaded last, so it overrides the icon rail that the
 * shared app.css uses below 760px: here the sidebar becomes a drawer opened
 * from a top bar, tables become cards and every control is finger-sized.
 */
.mobile-bar,.nav-backdrop,.nav-close{display:none}
/* Grid children default to min-width:auto, so a wide table or chart would
   stretch its column past the screen instead of scrolling inside its card. */
.two-col>*,.metrics-grid>*,.conversation-layout>*,.thread>*,.stack>*,.field-row>*,.stack-form>*,.stack-form label>*{min-width:0}
input,select,textarea{max-width:100%}

@media (max-width:900px){
  html,body{overflow-x:hidden}
  /* Top bar + drawer */
  .mobile-bar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;background:#11110f;color:#fff;
    padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
  .mobile-bar .brand{flex:1;min-width:0}
  .mobile-bar .brand-logo{height:20px}
  .mobile-bar .brand-product{font-size:12px;white-space:nowrap}
  .nav-toggle,.mobile-compose{width:42px;height:42px;border-radius:10px;border:0;background:#252522;color:#fff;display:grid;place-items:center;font-size:18px;cursor:pointer;flex:none}
  .nav-toggle span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
  .sidebar{width:min(300px,86vw);padding:20px 16px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));
    transform:translateX(-102%);transition:transform .22s ease;z-index:50;box-shadow:12px 0 40px rgba(0,0,0,.35);overflow-y:auto}
  body.nav-open .sidebar{transform:none}
  body.nav-open{overflow:hidden}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(10,12,16,.5);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .nav-close{display:grid;position:absolute;top:calc(14px + env(safe-area-inset-top));right:12px;width:38px;height:38px;border-radius:9px;border:0;background:#252522;color:#fff;font-size:18px;place-items:center;cursor:pointer}
  .sidebar .brand-product{display:inline}
  .sidebar .brand-logo{height:22px}
  .nav a,.nav a:not(.active){font-size:15px;justify-content:flex-start;padding:13px 12px}
  .nav a span{font-size:16px}
  .sidebar-foot .user-chip>div:last-child{display:grid}
  .link-button{display:inline-block;font-size:14px;padding:12px 0 0}
  .main{margin-left:0;padding:18px 16px 60px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .table-card{max-width:none}
}
@media (prefers-reduced-motion:reduce){.sidebar,.nav-backdrop{transition:none}}

@media (max-width:760px){
  body{font-size:15px}
  /* Headings and page actions */
  .page-head{gap:14px;margin-bottom:16px}
  .page-head h1{font-size:26px}
  .conversation-head h1{font-size:22px;overflow-wrap:anywhere}
  .head-actions{width:100%;gap:8px}
  .head-actions>*{flex:1 1 auto}
  .head-actions form .btn,.head-actions>.btn{width:100%}
  .pending-pill{width:100%;justify-content:center;padding:11px 14px;font-size:13px}
  .segmented{width:100%}
  .segmented a{flex:1;text-align:center;padding:10px 6px}

  /* Finger-sized controls; 16px inputs so iOS does not zoom in */
  .btn{min-height:44px;padding:11px 14px;font-size:14px}
  .btn-small{min-height:38px;padding:8px 11px;font-size:13px}
  input,select,textarea,.stack-form input,.stack-form select,.filters input,.filters select,.login-form input,.inline-form input,.inline-form select,.survey-inline select,.conversation-side select{font-size:16px!important;min-height:44px}
  input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px}
  .stack-form label,.login-form label{font-size:13px}
  .stack-form label.check{font-size:14px}
  .reply-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .reply-actions .btn,.reply-actions form,.reply-actions form .btn{width:100%}
  .survey-inline{display:grid;grid-template-columns:1fr auto;gap:8px}
  .inline-form{flex-wrap:wrap}
  .inline-form input,.inline-form select{min-width:0;flex:1 1 160px}
  .link-action{padding:12px 0 4px;font-size:14px}
  .flash{font-size:14px}

  /* Dashboard */
  .metrics-grid{grid-template-columns:1fr 1fr;gap:10px}
  .metric-card{padding:14px}
  .metric-card strong{font-size:24px}
  .metric-card small{font-size:11px}
  .metric-card .delta{white-space:normal;font-size:10px}
  .backlog-strip{grid-template-columns:1fr 1fr}
  .backlog-strip>*{padding:12px 14px}
  .chart{height:170px}
  .panel{padding:16px}
  .panel-head{flex-wrap:wrap;gap:8px}
  .rating-row{grid-template-columns:118px 1fr 24px}
  .table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Inbox: each row becomes a card */
  .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -16px 12px;padding:0 16px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;padding:12px 12px;font-size:13px}
  .filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .filters input[type=search]{grid-column:1/-1}
  .head-actions:has(> form + .btn){display:grid;grid-template-columns:1fr 1fr}
  .filters input{min-width:0}
  .inbox-table thead{display:none}
  .inbox-table,.inbox-table tbody{display:block}
  .inbox-table tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"from time" "subject subject" "status assigned";gap:4px 10px;padding:14px 16px;border-bottom:1px solid #edf0f4}
  .inbox-table tr:last-child{border-bottom:0}
  .inbox-table td{display:block;padding:0;border:0;min-width:0;width:auto!important}
  .inbox-table td:nth-child(1){grid-area:from}
  .inbox-table td:nth-child(2){grid-area:subject}
  .inbox-table td:nth-child(3){grid-area:status;display:flex;align-items:center;gap:8px}
  .inbox-table td:nth-child(3) span{margin:0}
  .inbox-table td:nth-child(4){grid-area:assigned;text-align:right;font-size:11px;color:#64748b;align-self:center}
  .inbox-table td:nth-child(5){grid-area:time;text-align:right}
  .inbox-table td:nth-child(5) span{display:none}
  .inbox-table td:nth-child(5) strong{font-size:11px;font-weight:600!important;color:#64748b}
  .inbox-table .from-cell strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inbox-table .from-cell span{display:none}
  .inbox-table .subject-cell strong{font-size:14px}
  .inbox-table .subject-cell span{max-width:none;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}
  .inbox-table tr.unread td:first-child{box-shadow:none}
  .inbox-table tr.unread{box-shadow:inset 3px 0 0 var(--blue)}
  .inbox-table tr td[colspan]{grid-column:1/-1}
  .pager{flex-wrap:wrap}

  /* Conversation */
  .message{padding:14px}
  .message header{grid-template-columns:30px 1fr;row-gap:2px}
  .message time{grid-column:2;font-size:11px}
  .message-who span{white-space:normal}
  .message-body{font-size:15px;line-height:1.55}
  .html-preview iframe{height:320px}
  .attachments{display:grid}
  .attachment{width:100%}
  .att-actions{gap:16px;font-size:14px}
  .att-actions a{padding:6px 0}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .stack-form{grid-template-columns:minmax(0,1fr)}
  .stack-form input,.stack-form select,.stack-form textarea{width:100%}
  .attach-field input[type=file]{width:100%;font-size:14px!important}
  .reply-panel textarea{min-height:200px}
  .facts>div{grid-template-columns:110px 1fr}

  /* Team table: stacked rows */
  .team-table thead{display:none}
  .team-table,.team-table tbody,.team-table tr,.team-table td{display:block}
  .team-table tr{padding:14px 16px;border-bottom:1px solid #edf0f4}
  .team-table td{padding:4px 0;border:0}
  .team-table td[data-label]::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8a95a6;font-weight:700;margin-bottom:2px}
  .row-actions{gap:8px;margin-top:6px}

  /* Sign-in and survey pages */
  .login-wrap{padding:16px;padding-top:calc(16px + env(safe-area-inset-top));align-items:start}
  .login-panel{padding:28px 20px;border-radius:16px;margin-top:4vh}
  .rating-options{gap:6px}
  .rating-option span{min-height:64px}
  .rating-option b{font-size:20px}
  .error-page{margin:60px auto}
}

@media (max-width:380px){
  .metrics-grid,.backlog-strip{grid-template-columns:1fr}
  .mobile-bar .brand-product{display:none}
}