/* Tablet workspace: portrait uses a reachable dock; landscape keeps a compact rail.
   Phone layouts (750px and below) remain in aurora2.css. */
@media (min-width: 751px) and (max-width: 1366px) {
  .shell {
    gap: 18px;
  }
  .main,
  #view,
  .heading > div,
  .panel-head > div,
  .card-grid > *,
  .dashboard-grid > * {
    min-width: 0;
  }
  .main {
    padding: 0 24px 32px;
  }
  .topbar {
    min-height: 80px;
    height: auto;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 0;
  }
  .top-meta {
    gap: 12px;
    min-width: 0;
  }
  .top-meta > .pill,
  .top-meta > span:last-child,
  .quick-open kbd {
    display: none;
  }
  .heading {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin: 24px 0;
    padding-bottom: 16px;
  }
  .heading > div:first-child {
    flex: 1 1 360px;
  }
  .heading .actions {
    max-width: 100%;
    flex: 1 1 280px;
    justify-content: flex-start;
  }
  .actions,
  .sheet-toolbar,
  .sheet-filters,
  .filters,
  .toolbar,
  .module-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  .actions .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  :is(.btn, .nav button, .mobile-dock button, .module-tabs button,
    .quick-open, .quick-result, .text-link, .row-action, .logout,
    .theme-picker select, .theme-picker button, .close) {
    min-height: 44px;
  }
  :is(.row-action, .close, .logout) {
    min-width: 44px;
  }
  .btn,
  .quick-open {
    padding: 12px 16px;
  }
  .theme-picker select {
    min-width: 105px;
    padding: 10px 12px;
  }
  .panel-head {
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px;
  }
  .stats,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .stat {
    padding: 22px;
    min-width: 0;
  }
  .stat .number {
    font-size: clamp(23px, 2.8vw, 32px);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .stat label {
    padding-right: 36px;
    line-height: 1.5;
  }
  .collaborator-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
  }
  .collaborator-card {
    padding: 22px;
    gap: 14px;
  }
  .custody-slots {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 18px;
  }
  .custody-slot {
    gap: 12px;
    padding: 20px;
  }
  .custody-slot > .btn {
    margin-top: 4px;
  }
  .report-card.feature {
    flex-wrap: wrap;
    gap: 20px;
  }
  .report-card.feature > div {
    flex: 1 1 360px;
    min-width: 0;
  }
  .module-tabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 6px;
    gap: 8px;
    scroll-padding-inline: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .module-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 16px;
  }
  .filters .search,
  .sheet-filters input {
    flex: 1 1 260px;
    min-width: min(100%, 240px);
  }
  .filters select,
  .sheet-filters select,
  .sheet-view-settings input,
  .sheet-view-settings select {
    max-width: 100%;
    min-height: 46px;
  }
  .table-wrap,
  .sheet-scroll {
    overflow: auto;
    max-width: 100%;
    scrollbar-width: auto;
    scrollbar-gutter: stable;
    scroll-padding: 16px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .sheet-scroll {
    max-height: min(62dvh, 640px);
    scroll-padding-top: 52px;
  }
  .sheet-table td :is(input, select),
  .sheet-table td span {
    min-height: 48px;
    padding: 14px 16px;
  }
  .table-footer {
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 22px;
  }
  .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) {
    min-height: 46px;
  }
  .check-filter,
  .transfer-list label,
  .sheet-columns label {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .check-filter input,
  .transfer-list input,
  .sheet-columns input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  dialog {
    width: min(820px, calc(100vw - 48px));
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
    scrollbar-gutter: stable;
    scroll-padding-block: 88px;
    -webkit-overflow-scrolling: touch;
  }
  #modal-body {
    min-width: 0;
  }
  .modal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 18px 24px;
    gap: 16px;
    background: var(--surface);
  }
  .modal-head h2 {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .modal-head .close {
    flex-shrink: 0;
  }
  .modal-content {
    padding: 24px;
  }
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  #quick-dialog {
    width: min(680px, calc(100vw - 48px));
  }
  .quick-results {
    max-height: min(50dvh, 520px);
    gap: 8px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
  .quick-result {
    min-height: 52px;
    padding: 14px 16px;
  }
  .auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 20px;
    width: calc(100% - 40px);
  }
  .auth-story,
  .auth-form {
    padding: 36px;
  }
  .auth-form form {
    width: 100%;
  }
}

@media (min-width: 751px) and (max-width: 1366px) and (orientation: landscape) {
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
  }
  .sidebar {
    margin: 12px 0 12px 12px;
    top: 12px;
    height: calc(100dvh - 24px);
    min-height: 0;
    padding: 20px 14px 16px;
    border-radius: 24px;
  }
  .sidebar .brand {
    flex-shrink: 0;
    padding: 0 4px;
  }
  .sidebar .brand img.company-logo {
    width: 146px;
    max-width: 100%;
    padding: 12px;
  }
  .sidebar .nav-label {
    flex-shrink: 0;
    padding: 20px 8px 12px;
    line-height: 1.5;
  }
  .sidebar .nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 6px;
    padding: 3px;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scroll-padding-block: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .nav button {
    flex: 0 0 auto;
    width: 100%;
    padding: 11px 9px;
    min-height: 44px;
    gap: 9px;
    font-size: 11px;
  }
  .sidebar .side-bottom {
    flex-shrink: 0;
    margin-top: 16px;
  }
  .sidebar .connection {
    display: none;
  }
  .sidebar .profile {
    padding: 14px 0 0;
    gap: 8px;
    font-size: 11px;
  }
  .sidebar .profile > div:not(.avatar) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .sidebar .profile .avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }
  .sidebar .profile small {
    font-size: 9px;
  }
  .sidebar .logout {
    flex-shrink: 0;
  }
  .main {
    padding-left: 0;
    padding-right: 24px;
  }
  .mobile-dock {
    display: none;
  }
  .passport {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
  }
}

@media (min-width: 751px) and (max-width: 1366px) and (orientation: portrait) {
  .shell {
    display: block;
  }
  .sidebar {
    position: static;
    height: auto;
    margin: 16px 24px 0;
    padding: 12px 18px;
    border-radius: 22px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  .sidebar .brand,
  .sidebar .brand:has(.company-logo) {
    margin: 0;
    padding: 0;
  }
  .sidebar .brand img.company-logo {
    width: 136px;
    max-width: 136px;
    padding: 10px;
    border-radius: 14px;
  }
  .sidebar .nav,
  .sidebar .nav-label,
  .sidebar .connection {
    display: none;
  }
  .sidebar .side-bottom {
    margin: 0;
    padding: 0;
  }
  .sidebar .profile {
    border: 0;
    padding: 0;
    max-width: 320px;
  }
  .sidebar .profile > div:not(.avatar) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .main {
    padding: 0 24px calc(120px + env(safe-area-inset-bottom));
  }
  .mobile-dock {
    display: flex;
    position: fixed;
    z-index: 30;
    left: max(24px, calc((100vw - 720px) / 2));
    right: max(24px, calc((100vw - 720px) / 2));
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface);
    box-shadow: 0 8px 30px #102b2228;
    justify-content: space-around;
    gap: 10px;
  }
  .mobile-dock button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 6px;
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: 17px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }
  .mobile-dock button .icon {
    width: 22px;
    height: 22px;
  }
  .mobile-dock button.active {
    background: var(--surface-soft);
    color: var(--accent);
  }
  .mobile-dock button:focus-visible {
    outline-offset: -3px;
  }
  #toast {
    bottom: calc(112px + env(safe-area-inset-bottom));
  }
  .auth {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-story {
    min-height: 290px;
    padding: 36px 44px;
    gap: 28px;
  }
  .auth-story h1 {
    font-size: 42px;
    max-width: 560px;
  }
  .auth-story::before,
  .auth-story::after {
    display: none;
  }
  .auth-form {
    padding: 44px;
  }
  .auth-form form {
    max-width: 540px;
  }
}

@media (min-width: 751px) and (max-width: 1366px) and (any-pointer: coarse) {
  /* The browser can still pan the document when a gesture starts on a control.
     Only native tables are explicit two-axis scrolling surfaces. */
  :is(.field, .filters, .sheet-filters, .request-input, .quick-search,
    .sheet-view-settings) :is(input, select, textarea) {
    font-size: 16px;
  }
  .sheet-table td :is(input, select) {
    font-size: 16px;
  }
  :is(.btn, .mobile-dock button, .module-tabs button, .quick-result,
    .row-action, .text-link, .close) {
    -webkit-tap-highlight-color: transparent;
  }
}