/* Shared phone/tablet layout. The menu uses native details and works without JavaScript. */
.mobile-menu{display:none}
.sidebar .desktop-nav{display:flex}
.main,.login-wrapper,.top,.top-right,.entity,.entity-body,.task-card{min-width:0}
.entity-body strong,.task-card p,.panel p,.panel h2,.panel h3,.panel li{overflow-wrap:anywhere}
.entity .edit-link{display:inline-flex;align-items:center;min-height:44px}
.table-wrap{overscroll-behavior-x:contain}
button.small{min-height:44px}
select{min-width:0;max-width:100%;text-overflow:ellipsis}
.login-wrapper{min-height:100vh;min-height:100dvh}
.task-card .form>div:last-child{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:960px){
  .sidebar{position:static;width:100%;padding:16px 20px;overflow:visible;border-right:0;border-bottom:1px solid var(--border);gap:14px}
  .sidebar .desktop-nav,.sidebar .nav-caption,.sidebar .side-bottom{display:none}
  .mobile-menu{display:block;margin:0;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
  .mobile-menu summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;min-height:48px;list-style:none;color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary::after{content:'+';font-size:21px;line-height:1;color:var(--accent)}
  .mobile-menu[open] summary::after{content:'−'}
  .mobile-menu .mobile-current{color:var(--muted);font-size:12px;font-weight:400;flex:1;text-align:right;overflow-wrap:anywhere}
  .sidebar .mobile-menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:visible;padding:5px 8px 10px}
  .sidebar .mobile-menu nav a{min-height:48px;padding:10px;white-space:normal;font-size:13px;gap:10px}
  .sidebar .mobile-menu .nav-dot{flex:0 0 7px}
  .main{margin-left:0;width:100%;padding:24px 20px}
  .top{gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:28px}
  .top h1{font-size:27px;line-height:1.2;margin-top:8px;overflow-wrap:anywhere}
  .top-right{gap:10px;justify-content:flex-start;flex-wrap:wrap}
  .intro{margin-top:-10px;line-height:1.6}
  .two-col,.settings-grid{grid-template-columns:minmax(0,1fr)}
  .pill{display:none}
  .form input:not([type=checkbox]),.form textarea,.form select{font-size:16px;min-height:46px}
  .form .check{min-height:44px;align-items:center}
  .form input[type=checkbox]{width:20px;height:20px}
}
@media(max-width:600px){
  .sidebar{padding:12px 14px;gap:12px}
  .brand{font-size:12px;gap:10px}
  .brandmark{font-size:21px;padding:4px 11px}
  .main{padding:22px 12px 14px}
  .top{gap:12px;margin-bottom:26px}
  .top>div:first-child{flex-basis:100%}
  .top h1{font-size:25px}
  .profile{max-width:calc(100vw - 120px);overflow-wrap:anywhere}
  .panel{padding:16px;border-radius:12px;margin-bottom:16px}
  .panel h2{line-height:1.4;font-size:17px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
  .stat{padding:16px 13px;min-height:132px}
  .stat small{line-height:1.4;min-height:34px;margin-bottom:8px}
  .stat strong{font-size:30px}
  .stat span{font-size:11px;line-height:1.4}
  .entity{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start;padding:18px 0}
  .entity-icon{width:40px;padding:8px 0;text-align:center}
  .entity-body{grid-column:2}
  .entity>.edit-link,.entity>form{grid-column:2;justify-self:stretch}
  .entity>.edit-link{justify-content:center;border:1px solid var(--border);border-radius:8px}
  .entity>form button{width:100%}
  .entity-body:first-child{grid-column:1/-1}
  .tags{font-size:11px;line-height:1.6}
  .task-card .panel-heading{align-items:flex-start}
  .task-card h3{font-size:16px;line-height:1.5;flex-basis:100%}
  .task-card .form>div:last-child>button{flex:1 1 180px}
  .field-grid,.roles-grid,.endpoint-row{grid-template-columns:minmax(0,1fr)}
  .button-row>form,.button-row>.button{flex-basis:100%}
  .settings-tabs{gap:5px;margin-bottom:18px}
  .settings-tabs a{padding:10px 6px;line-height:1.4;text-align:center;min-height:52px}
  pre{padding:12px;font-size:12px;line-height:1.6;max-width:100%}
  summary{min-height:44px;display:flex;align-items:center;line-height:1.5}
  .login-wrapper{padding:18px 12px}
  .login-card{padding:26px 22px}
  .login-card h1{margin-top:30px;font-size:26px}
  /* Retain table semantics and labels while presenting each row as a readable card. */
  .table-wrap{overflow:visible}
  table.responsive-table{display:block;width:100%;text-align:left}
  .responsive-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .responsive-table tbody{display:grid;gap:14px;min-width:0}
  .responsive-table tr{display:block;padding:10px 12px;background:#10151f;border:1px solid var(--border);border-radius:10px;min-width:0}
  .responsive-table td{display:grid;grid-template-columns:85px minmax(0,1fr);gap:10px;padding:10px 0;min-width:0;border-bottom:1px solid #262c3a;overflow-wrap:anywhere;font-size:13px}
  .responsive-table td::before{content:attr(data-label);color:var(--muted);font-size:11px;line-height:1.6;letter-spacing:.02em}
  .responsive-table td:last-child{border-bottom:0}
  .responsive-table td>*{min-width:0;max-width:100%}
  .responsive-table td>details,.responsive-table td>form,.responsive-table td>pre{grid-column:1/-1}
  .responsive-table td>small{grid-column:2}
  .responsive-table td>.state{justify-self:start}
  .responsive-table td>form{display:flex;gap:8px;flex-wrap:wrap}
  .responsive-table td>form>button{flex:1 1 100px}
}
@media(max-width:360px){
  .sidebar .mobile-menu nav{grid-template-columns:minmax(0,1fr)}
  .mobile-menu .mobile-current{max-width:170px}
  .responsive-table td{grid-template-columns:72px minmax(0,1fr);gap:8px}
}