/*
 * ============================================================
 * SEHL EXECUTIVE OS
 * NATIVE RESPONSIVE CORE
 * ============================================================
 *
 * Desktop
 * Laptop
 * iPad / tablet
 * iPhone / Android
 * Portrait / Landscape
 * Touch
 * PWA standalone
 * Browser mode
 *
 * Esta hoja carga DESPUÉS del CSS principal.
 * ============================================================
 */

:root {
  --sehl-safe-top: env(safe-area-inset-top, 0px);
  --sehl-safe-right: env(safe-area-inset-right, 0px);
  --sehl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sehl-safe-left: env(safe-area-inset-left, 0px);

  --sehl-topbar-h: 92px;
  --sehl-touch: 44px;
}


/* ============================================================
   FOUNDATION
   ============================================================ */

html,
body,
#root {
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

html {
  overflow-x: hidden;
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

#root,
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell,
.main,
.content,
.content > *,
.card,
.personal-workspace,
.personal-panel,
.control-page,
.settings-grid,
.mail-shell,
.files-shell,
.assistant-command,
.chat-main,
.mail-layout,
.files-layout,
.files-content,
.mail-list,
.mail-reader {
  min-width: 0;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   SAFE AREA + DYNAMIC VIEWPORT
   ============================================================ */

.content {
  container-type: inline-size;
  overflow-x: clip;

  padding-left:
    max(
      clamp(18px, 3.2vw, 48px),
      var(--sehl-safe-left)
    );

  padding-right:
    max(
      clamp(18px, 3.2vw, 48px),
      var(--sehl-safe-right)
    );

  padding-bottom:
    max(
      80px,
      calc(28px + var(--sehl-safe-bottom))
    );
}

.side {
  height: 100vh;
  height: 100dvh;

  padding-top:
    max(
      18px,
      var(--sehl-safe-top)
    );

  padding-bottom:
    max(
      12px,
      var(--sehl-safe-bottom)
    );
}

.topbar {
  padding-top:
    max(
      17px,
      var(--sehl-safe-top)
    );

  padding-left:
    max(
      clamp(20px, 3vw, 42px),
      var(--sehl-safe-left)
    );

  padding-right:
    max(
      clamp(20px, 3vw, 42px),
      var(--sehl-safe-right)
    );
}

.install-banner {
  margin-left:
    max(
      24px,
      var(--sehl-safe-left)
    );

  margin-right:
    max(
      24px,
      var(--sehl-safe-right)
    );
}

.drawer-scrim,
.modal-scrim,
.modal-backdrop,
.cmdk-overlay {
  padding-left:
    max(
      20px,
      var(--sehl-safe-left)
    );

  padding-right:
    max(
      20px,
      var(--sehl-safe-right)
    );

  padding-bottom:
    max(
      20px,
      var(--sehl-safe-bottom)
    );
}

.record-drawer {
  height: 100vh;
  height: 100dvh;
  padding-bottom: var(--sehl-safe-bottom);
}

.modal,
.mail-setup,
.files-setup,
.compose-window,
.editor-modal {
  max-height: calc(100vh - 40px);

  max-height:
    calc(
      100dvh
      - 40px
      - var(--sehl-safe-top)
      - var(--sehl-safe-bottom)
    );
}

.assistant-command,
.mail-shell,
.files-shell {
  height: calc(100vh - 138px);

  height:
    calc(
      100dvh
      - 138px
      - var(--sehl-safe-bottom)
    );
}


/* ============================================================
   LOCAL SCROLLING
   ============================================================ */

.work-table-wrap,
.task-table,
.task-board,
.segmented,
.mode-ribbon,
.week-strip,
.bulk-bar,
.files-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.task-board,
.segmented,
.mode-ribbon {
  scroll-snap-type: x proximity;
}

.task-board > *,
.segmented > *,
.mode-ribbon > * {
  scroll-snap-align: start;
}


/* ============================================================
   TABLET / SMALL LAPTOP
   <= 1180
   ============================================================ */

@media (max-width: 1180px) {

  :root {
    --sehl-topbar-h: 78px;
  }


  /* ---------- APP SHELL ---------- */

  .app-shell,
  .app-shell.nav-collapsed {
    display: block;
    min-height: 100dvh;
  }

  .main,
  .nav-collapsed .main {
    width: 100%;
    min-width: 0;
    grid-column: auto;
  }


  /* ---------- NATIVE DRAWER ---------- */

  .side,
  .nav-collapsed .side {
    width: min(310px, 88vw);

    transform:
      translateX(-105%);

    box-shadow:
      28px 0 80px -38px
      var(--black-a78);

    z-index: 70;
  }

  .nav-open .side,
  .nav-open.nav-collapsed .side {
    transform:
      translateX(0);
  }

  .nav-backdrop {
    display: block;

    position: fixed;
    inset: 0;

    z-index: 69;

    border: 0;

    background:
      var(--black-a58);

    backdrop-filter:
      blur(7px);

    -webkit-backdrop-filter:
      blur(7px);
  }

  .mobile-menu {
    display: grid;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    margin-right: 8px;

    border:
      1px solid
      var(--border-default);

    background:
      var(--white-a04);
  }

  .collapse-button,
  .nav-collapsed .collapse-button {
    display: none;
  }


  /* ---------- RESET COLLAPSED MODE ---------- */

  .nav-collapsed .brand-copy,
  .nav-collapsed .quick-create span,
  .nav-collapsed .nav-group h3,
  .nav-collapsed .nav-group .tx,
  .nav-collapsed .side-footer .tx {
    display: initial;
  }

  .nav-collapsed .side-brand {
    justify-content: flex-start;
    padding: 0 5px 14px;
  }

  .nav-collapsed .quick-create {
    width: auto;
    margin: 14px 3px 8px;
  }

  .nav-collapsed
  .snav
  .nav-group
  button {
    width: 100%;

    padding:
      0 10px;

    justify-content:
      flex-start;

    margin-inline:
      0;
  }

  .nav-collapsed
  .snav
  .nav-group
  button.on {
    box-shadow:
      inset 2px 0 0
      var(--accent);
  }

  .nav-collapsed
  .nav-badge {
    position: static;

    transform: none;

    margin-left: auto;

    min-width: 20px;
    height: 20px;

    font-size: 10px;
  }

  .nav-collapsed
  .side-footer {
    grid-template-columns:
      minmax(0, 1fr)
      44px
      44px;
  }

  .nav-collapsed
  .side-footer
  button {
    width: auto;

    min-height: 44px;

    justify-content:
      flex-start;

    padding:
      0 9px;

    margin: 0;
  }

  .nav-collapsed
  .side-footer
  .icon-footer {
    justify-content: center;
    padding: 0;
  }


  /* ---------- TOP BAR ---------- */

  .topbar {
    min-height:
      var(--sehl-topbar-h);

    padding-top:
      max(
        12px,
        var(--sehl-safe-top)
      );

    padding-bottom:
      12px;

    gap:
      12px;
  }

  .topbar-title {
    flex: 1;
  }

  .topbar-title h1 {
    font-size:
      clamp(
        20px,
        2.6vw,
        24px
      );
  }

  .top-actions {
    flex: 0 0 auto;
  }

  .command-action span,
  .top-action kbd {
    display: none;
  }

  .top-action {
    min-height: 42px;
  }

  .top-action.icon {
    width: 42px;
  }


  /* ---------- CONTENT ---------- */

  .content {
    width: 100%;

    padding-top:
      18px;

    padding-left:
      max(
        16px,
        var(--sehl-safe-left)
      );

    padding-right:
      max(
        16px,
        var(--sehl-safe-right)
      );
  }


  /* ---------- HEROES ---------- */

  .work-hero,
  .control-hero,
  .personal-hero {
    align-items:
      flex-start;
  }

  .work-hero,
  .personal-hero {
    flex-direction:
      column;
  }

  .work-hero-stats,
  .personal-stats {
    width: 100%;
    min-width: 0;
  }


  /* ---------- REPORTS ---------- */

  .report-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .report-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .report-grid .span-2,
  .report-grid .span-3 {
    grid-column:
      span 2;
  }


  /* ---------- SETTINGS ---------- */

  .settings-grid {
    grid-template-columns:
      1fr;
  }

  .settings-grid > .card:first-of-type,
  .settings-grid > .card:nth-of-type(2),
  .settings-grid > .card:nth-last-of-type(2),
  .settings-grid > .pill {
    grid-column:
      span 1;
  }


  /* ---------- FULL APP HEIGHTS ---------- */

  .assistant-command,
  .mail-shell,
  .files-shell {
    min-height: 0;

    height:
      calc(
        100vh
        - var(--sehl-topbar-h)
        - 38px
      );

    height:
      calc(
        100dvh
        - var(--sehl-topbar-h)
        - 38px
        - var(--sehl-safe-bottom)
      );
  }

  .content-assistant,
  .content-email,
  .content-files {
    padding-top: 14px;
  }


  /* ---------- EMAIL ---------- */

  .mail-layout {
    grid-template-columns:
      150px
      minmax(270px, 310px)
      minmax(0, 1fr);

    overflow: hidden;
  }


  /* ---------- FILES ---------- */

  .files-layout,
  .files-layout:has(.file-inspector) {
    grid-template-columns:
      140px
      minmax(0, 1fr);

    overflow: hidden;

    position: relative;
  }

  .file-inspector {
    position: absolute;

    z-index: 12;

    inset:
      0 0 0 auto;

    width:
      min(
        340px,
        46vw
      );

    border-left:
      1px solid
      var(--border-default);

    box-shadow:
      -24px 0 60px -36px
      var(--black-a78);
  }


  /* ---------- AGENDA ---------- */

  .agenda-layout {
    grid-template-columns:
      minmax(0, 1fr)
      220px;
  }
}


/* ============================================================
   TABLET PORTRAIT
   <= 920
   ============================================================ */

@media (max-width: 920px) {

  :root {
    --sehl-topbar-h: 72px;
  }

  .topbar {
    min-height:
      var(--sehl-topbar-h);
  }

  .topbar-title p {
    display: none;
  }

  .connection,
  .top-action span,
  .top-action kbd {
    display: none;
  }

  .content {
    padding-top:
      14px;

    padding-left:
      max(
        12px,
        var(--sehl-safe-left)
      );

    padding-right:
      max(
        12px,
        var(--sehl-safe-right)
      );
  }


  /* ---------- APP SURFACES ---------- */

  .card,
  .personal-panel,
  .work-panel,
  .assistant-command,
  .mail-toolbar,
  .files-toolbar,
  .mail-layout,
  .files-layout {
    border-radius:
      18px;
  }


  /* ---------- GRIDS ---------- */

  .g2,
  .report-grid,
  .settings-grid {
    grid-template-columns:
      1fr;
  }

  .report-grid .span-2,
  .report-grid .span-3 {
    grid-column:
      span 1;
  }

  .report-metrics,
  .metric-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .filter-bar {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* ---------- WORK CENTER ---------- */

  .record-list .work-card {
    grid-template-columns:
      minmax(130px, .7fr)
      minmax(0, 1fr);
  }

  .record-list
  .work-card-foot,
  .record-list
  .tag-row {
    display: none;
  }


  /* ---------- ASSISTANT ---------- */

  .assistant-command {
    grid-template-columns:
      minmax(0, 1fr);

    position: relative;
  }

  .chat-sidebar {
    position: absolute;

    inset:
      0 auto 0 0;

    width:
      min(
        340px,
        86vw
      );

    transform:
      translateX(-105%);

    box-shadow:
      var(--shadow-float);
  }

  .chat-sidebar.mobile-open {
    transform:
      translateX(0);

    opacity: 1;

    pointer-events:
      auto;
  }

  .chat-mobile-scrim {
    display: block;

    position: absolute;
    inset: 0;

    z-index: 3;

    border: 0;

    background:
      var(--black-a58);

    backdrop-filter:
      blur(5px);
  }

  .desktop-only {
    display:
      none !important;
  }

  .mobile-only {
    display:
      grid !important;
  }


  /* ---------- EMAIL: APP NAVIGATION ---------- */

  .mail-layout {
    position: relative;

    grid-template-columns:
      118px
      minmax(0, 1fr);

    overflow: hidden;
  }

  .mail-folders {
    padding-inline:
      7px;
  }

  .mail-folders > button {
    min-height: 44px;

    padding:
      0 7px;

    grid-template-columns:
      19px
      minmax(0, 1fr);
  }

  .mail-folders > button em,
  .mail-connection {
    display: none;
  }

  .mail-list {
    border-right: 0;
  }

  .mail-reader {
    display: none;

    position: absolute;
    inset: 0;

    z-index: 8;

    background:
      var(--surface-1);
  }

  .mail-reader.open {
    display: block;
  }

  .reader-back {
    display:
      grid !important;
  }


  /* ---------- FILES: APP NAVIGATION ---------- */

  .files-layout,
  .files-layout:has(.file-inspector) {
    grid-template-columns:
      116px
      minmax(0, 1fr);
  }

  .files-rail {
    padding-inline:
      7px;
  }

  .files-rail > button {
    min-height: 44px;

    padding:
      0 7px;
  }

  .storage-summary {
    display: none;
  }

  .file-list > header,
  .file-line {
    min-width: 0;

    grid-template-columns:
      minmax(0, 1fr)
      90px;

    gap:
      9px;
  }

  .file-list > header span:nth-child(2),
  .file-line > span:nth-child(2),
  .file-list > header span:nth-child(3),
  .file-line > span:nth-child(3) {
    display: none;
  }

  .file-grid {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(120px, 1fr)
      );
  }

  .file-inspector {
    top: 0;
    bottom: 0;

    width:
      min(
        360px,
        78vw
      );
  }


  /* ---------- AGENDA ---------- */

  .agenda-layout {
    grid-template-columns:
      1fr;
  }

  .agenda-timeline {
    border-right:
      0;
  }

  .agenda-reminders {
    border-top:
      1px solid
      var(--border-subtle);
  }

  .week-strip {
    grid-template-columns:
      repeat(
        7,
        minmax(48px, 1fr)
      );

    overflow-x:
      auto;
  }

  .week-arrow {
    display:
      none !important;
  }


  /* ---------- TOOLBARS ---------- */

  .personal-toolbar,
  .work-toolbar,
  .mail-toolbar,
  .files-toolbar {
    flex-wrap:
      wrap;
  }

  .personal-toolbar .search-box,
  .work-toolbar .search-box,
  .mail-search,
  .files-search {
    min-width:
      100%;

    max-width:
      none;

    order:
      -1;
  }
}


/* ============================================================
   PHONE
   <= 680
   ============================================================ */

@media (max-width: 680px) {

  :root {
    --sehl-topbar-h: 64px;
  }

  body {
    overscroll-behavior-y:
      contain;
  }


  /* ---------- TOP BAR ---------- */

  .topbar {
    min-height:
      var(--sehl-topbar-h);

    padding-top:
      max(
        8px,
        var(--sehl-safe-top)
      );

    padding-bottom:
      8px;

    padding-left:
      max(
        8px,
        var(--sehl-safe-left)
      );

    padding-right:
      max(
        8px,
        var(--sehl-safe-right)
      );

    gap:
      7px;
  }

  .mobile-menu {
    width: 44px;
    height: 44px;

    margin-right:
      4px;
  }

  .breadcrumb {
    display: none;
  }

  .topbar-title h1 {
    margin: 0;

    font-size:
      18px;

    line-height:
      1.1;
  }

  .top-actions {
    gap: 4px;
  }

  .top-action,
  .top-action.icon {
    width: 42px;
    min-width: 42px;

    height: 42px;
    min-height: 42px;

    padding: 0;

    justify-content:
      center;
  }

  .connection,
  .command-action {
    display: none;
  }


  /* ---------- CONTENT ---------- */

  .content,
  .content-assistant,
  .content-email,
  .content-files {
    padding-top:
      8px;

    padding-left:
      max(
        7px,
        var(--sehl-safe-left)
      );

    padding-right:
      max(
        7px,
        var(--sehl-safe-right)
      );

    padding-bottom:
      max(
        64px,
        calc(
          20px
          + var(--sehl-safe-bottom)
        )
      );
  }

  .install-banner {
    margin:
      7px
      max(7px, var(--sehl-safe-right))
      0
      max(7px, var(--sehl-safe-left));

    border-radius:
      14px;
  }


  /* ---------- SURFACES ---------- */

  .card,
  .personal-hero,
  .personal-panel,
  .work-hero,
  .work-panel,
  .control-hero,
  .report-card,
  .approval-card,
  .automation-card,
  .routine-card {
    border-radius:
      16px;
  }

  .card {
    padding: 16px;
  }


  /* ---------- DASHBOARD ---------- */

  .hero,
  .control-hero {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .hero .hero-orb {
    display: none;
  }

  .qa {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .qa button {
    min-height:
      92px;

    padding:
      14px 8px;
  }

  .tiles {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* ---------- REPORTS ---------- */

  .report-metrics,
  .metric-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .report-metrics article {
    min-height:
      92px;

    padding:
      12px;

    grid-template-columns:
      30px
      minmax(0, 1fr);
  }

  .metric-icon {
    width: 30px;
    height: 30px;
  }

  .report-metrics b {
    font-size:
      19px;
  }


  /* ---------- FORMS ---------- */

  .filter-bar,
  .form-grid,
  .automation-options,
  .drawer-body,
  .setup-grid {
    grid-template-columns:
      1fr;
  }

  .form-grid .span-2,
  .drawer-body .span-2,
  .setup-grid .span-2 {
    grid-column:
      span 1;
  }


  /* ---------- HEROES ---------- */

  .personal-hero,
  .work-hero,
  .control-hero {
    padding:
      17px;
  }

  .personal-stats,
  .work-hero-stats {
    width: 100%;
    min-width: 0;
  }

  .personal-stats > div,
  .work-hero-stats > div {
    min-width: 0;

    padding:
      10px;
  }

  .personal-stats b,
  .work-hero-stats b {
    font-size:
      19px;
  }


  /* ---------- TOOLBARS ---------- */

  .personal-toolbar > select,
  .personal-toolbar .btn,
  .personal-toolbar .tool-button,
  .work-toolbar .btn,
  .mail-toolbar .btn,
  .files-toolbar .btn {
    flex:
      1 1 auto;
  }


  /* ---------- APP WINDOWS ---------- */

  .assistant-command,
  .mail-shell,
  .files-shell {
    min-height: 0;

    height:
      calc(
        100vh
        - var(--sehl-topbar-h)
        - 16px
      );

    height:
      calc(
        100dvh
        - var(--sehl-topbar-h)
        - 16px
        - var(--sehl-safe-bottom)
      );

    border-radius:
      14px;
  }


  /* ---------- ASSISTANT ---------- */

  .assistant-command {
    overflow: hidden;
  }

  .chat-main {
    grid-template-rows:
      52px
      44px
      minmax(0, 1fr)
      auto;
  }

  .chat-main .mode-ribbon {
    margin:
      4px 6px;
  }

  .mode-ribbon button {
    min-width:
      44px;

    min-height:
      36px;
  }

  .mode-ribbon button span {
    display:
      none;
  }

  .conversation-card {
    margin-inline:
      5px;

    padding:
      14px 9px;
  }

  .bubble {
    max-width:
      94%;

    font-size:
      13px;
  }

  .assistant-composer {
    margin:
      5px;

    padding-bottom:
      max(
        0px,
        var(--sehl-safe-bottom)
      );
  }


  /* ---------- EMAIL ---------- */

  .mail-toolbar,
  .files-toolbar {
    padding:
      6px;

    gap:
      5px;
  }

  .mail-layout {
    grid-template-columns:
      96px
      minmax(0, 1fr);
  }

  .mail-folders {
    padding-inline:
      4px;
  }

  .mail-folders > button {
    padding:
      0 5px;

    gap:
      5px;

    font-size:
      9px;
  }

  .mail-folder-label {
    margin-inline:
      5px;
  }

  .mail-reader {
    overflow-y:
      auto;
  }

  .reader-content {
    padding:
      16px
      13px
      max(
        20px,
        var(--sehl-safe-bottom)
      );
  }

  .reader-actions {
    position:
      sticky;

    top: 0;

    z-index:
      4;

    gap:
      4px;
  }

  .reader-actions button {
    font-size: 0;
  }

  .reader-actions button svg {
    margin: 0;
  }

  .reader-actions select {
    max-width:
      110px;
  }


  /* ---------- FILES ---------- */

  .files-layout,
  .files-layout:has(.file-inspector) {
    grid-template-columns:
      92px
      minmax(0, 1fr);
  }

  .files-rail {
    padding-inline:
      4px;
  }

  .files-rail > button {
    min-height:
      54px;

    padding:
      5px 3px;

    flex-direction:
      column;

    justify-content:
      center;

    gap:
      3px;

    font-size:
      8px;

    text-align:
      center;
  }

  .files-pathbar {
    min-height:
      46px;

    overflow-x:
      auto;

    white-space:
      nowrap;

    scrollbar-width:
      none;
  }

  .files-pathbar::-webkit-scrollbar {
    display:
      none;
  }

  .files-pathbar select,
  .files-pathbar > .icon-btn:not(.active) {
    display:
      none;
  }

  .file-list > header,
  .file-line {
    grid-template-columns:
      minmax(0, 1fr)
      74px;

    padding-inline:
      9px;

    min-height:
      50px;
  }

  .file-grid {
    padding:
      9px;

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(104px, 1fr)
      );

    gap:
      7px;
  }

  .file-grid > button {
    min-height:
      112px;

    padding:
      10px 7px;
  }

  .file-inspector {
    width:
      min(
        360px,
        88vw
      );

    padding-bottom:
      max(
        14px,
        var(--sehl-safe-bottom)
      );
  }


  /* ---------- FILE ORGANIZER ---------- */

  .organizer-drawer {
    position:
      fixed;

    z-index:
      95;

    inset:
      auto 0 0 0;

    width:
      100%;

    max-height:
      min(
        78vh,
        calc(
          100dvh
          - 70px
        )
      );

    padding-bottom:
      var(--sehl-safe-bottom);

    border-radius:
      20px 20px 0 0;
  }

  .organizer-controls {
    flex-wrap:
      wrap;
  }

  .organizer-controls select {
    min-width:
      100%;
  }


  /* ---------- AGENDA ---------- */

  .agenda-event {
    grid-template-columns:
      54px
      3px
      minmax(0, 1fr)
      34px;

    gap:
      7px;
  }

  .event-copy p {
    white-space:
      normal;

    display:
      -webkit-box;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp:
      2;
  }


  /* ---------- REMINDERS ---------- */

  .reminder-card {
    grid-template-columns:
      1fr;
  }

  .reminder-time {
    min-height:
      auto;

    padding:
      0 0 9px;

    border-right:
      0;

    border-bottom:
      1px solid
      var(--border-subtle);
  }

  .reminder-actions {
    grid-column:
      1;

    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }

  .channel-grid,
  .notes-collection.grid {
    grid-template-columns:
      1fr;
  }


  /* ---------- KANBAN ---------- */

  .task-board {
    grid-template-columns:
      repeat(
        7,
        minmax(82vw, 1fr)
      );

    overflow-x:
      auto;

    padding-bottom:
      8px;
  }


  /* ---------- TABLES ---------- */

  .work-table,
  .task-table table {
    min-width:
      720px;
  }


  /* ---------- WORK RECORDS ---------- */

  .record-list .work-card {
    grid-template-columns:
      1fr;
  }

  .record-list
  .work-card-head {
    display:
      none;
  }


  /* ---------- TIMELINE ---------- */

  .timeline-item {
    grid-template-columns:
      72px
      15px
      minmax(0, 1fr);

    gap:
      8px;
  }

  .timeline-item > time {
    font-size:
      8px;
  }


  /* ---------- AUTOMATIONS ---------- */

  .schema-row,
  .schema-row.field-schema,
  .automation-row {
    grid-template-columns:
      1fr
      1fr
      40px;
  }

  .schema-row.field-schema
  input:nth-of-type(2),

  .schema-row.field-schema
  input:nth-of-type(3) {
    display:
      none;
  }

  .automation-card {
    grid-template-columns:
      40px
      minmax(0, 1fr);
  }

  .card-actions {
    grid-column:
      span 2;

    justify-content:
      flex-end;

    padding-top:
      9px;

    border-top:
      1px solid
      var(--border-subtle);
  }


  /* ---------- APPROVALS ---------- */

  .approval-card > header {
    grid-template-columns:
      36px
      minmax(0, 1fr);
  }

  .approval-card > header time {
    grid-column:
      2;
  }

  .approval-card footer {
    flex-wrap:
      wrap;
  }

  .approval-card footer .btn {
    flex:
      1 1 120px;
  }


  /* ==========================================================
     NATIVE MODALS / SHEETS
     ========================================================== */

  .drawer-scrim,
  .modal-scrim,
  .modal-backdrop {
    padding:
      0;

    align-items:
      flex-end;
  }

  .record-drawer {
    width:
      100%;

    border-left:
      0;

    border-radius:
      20px 20px 0 0;
  }

  .drawer-head,
  .modal-head {
    min-height:
      64px;

    padding:
      13px 15px;
  }

  .drawer-body,
  .modal-body {
    padding:
      15px;
  }

  .drawer-foot,
  .modal-foot {
    padding:
      10px
      12px
      max(
        10px,
        var(--sehl-safe-bottom)
      );
  }

  .modal,
  .modal.wide,
  .mail-setup,
  .files-setup,
  .compose-window,
  .editor-modal,
  .editor-modal.wide {
    width:
      100%;

    max-width:
      none;

    max-height:
      calc(
        100vh
        - max(
          8px,
          var(--sehl-safe-top)
        )
      );

    max-height:
      calc(
        100dvh
        - max(
          8px,
          var(--sehl-safe-top)
        )
      );

    border-radius:
      20px 20px 0 0;
  }

  .mail-setup,
  .files-setup {
    padding:
      17px
      14px
      max(
        17px,
        var(--sehl-safe-bottom)
      );
  }

  .compose-window > footer {
    padding-bottom:
      max(
        9px,
        var(--sehl-safe-bottom)
      );
  }


  /* ---------- COMMAND PALETTE ---------- */

  .cmdk-overlay {
    padding:
      max(
        10px,
        var(--sehl-safe-top)
      )
      max(
        8px,
        var(--sehl-safe-right)
      )
      max(
        10px,
        var(--sehl-safe-bottom)
      )
      max(
        8px,
        var(--sehl-safe-left)
      );

    align-items:
      flex-start;
  }

  .cmdk {
    width:
      100%;

    margin-top:
      6px;

    border-radius:
      16px;
  }
}


/* ============================================================
   VERY NARROW PHONES
   <= 430
   ============================================================ */

@media (max-width: 430px) {

  .side,
  .nav-collapsed .side {
    width:
      min(
        330px,
        92vw
      );
  }

  .topbar-title h1 {
    max-width:
      42vw;

    overflow:
      hidden;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }

  .top-action,
  .top-action.icon {
    width:
      40px;

    min-width:
      40px;
  }

  .content {
    padding-left:
      max(
        5px,
        var(--sehl-safe-left)
      );

    padding-right:
      max(
        5px,
        var(--sehl-safe-right)
      );
  }

  .qa,
  .tiles,
  .report-metrics {
    gap:
      7px;
  }

  .report-metrics article {
    padding:
      9px;
  }

  .mail-layout {
    grid-template-columns:
      86px
      minmax(0, 1fr);
  }

  .mail-folders > button {
    font-size:
      8px;
  }

  .files-layout,
  .files-layout:has(.file-inspector) {
    grid-template-columns:
      78px
      minmax(0, 1fr);
  }

  .files-rail > button {
    font-size:
      7px;
  }

  .file-list > header,
  .file-line {
    grid-template-columns:
      minmax(0, 1fr)
      62px;
  }

  .file-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .personal-stats > div {
    padding:
      8px 6px;
  }

  .personal-stats span {
    font-size:
      7px;
  }

  .report-metrics b,
  .personal-stats b {
    font-size:
      17px;
  }

  .agenda-event {
    grid-template-columns:
      48px
      3px
      minmax(0, 1fr)
      32px;

    padding-inline:
      6px;
  }
}


/* ============================================================
   LANDSCAPE PHONE / SHORT WINDOW
   ============================================================ */

@media (max-height: 560px) and (orientation: landscape) {

  :root {
    --sehl-topbar-h:
      56px;
  }

  .topbar {
    min-height:
      56px;

    padding-top:
      max(
        6px,
        var(--sehl-safe-top)
      );

    padding-bottom:
      6px;
  }

  .topbar-title h1 {
    font-size:
      17px;
  }

  .content,
  .content-assistant,
  .content-email,
  .content-files {
    padding-top:
      5px;
  }

  .assistant-command,
  .mail-shell,
  .files-shell {
    height:
      calc(
        100dvh
        - 62px
        - var(--sehl-safe-bottom)
      );
  }

  .modal,
  .modal.wide,
  .mail-setup,
  .files-setup,
  .compose-window,
  .editor-modal,
  .editor-modal.wide {
    max-height:
      calc(
        100dvh
        - max(
          4px,
          var(--sehl-safe-top)
        )
      );
  }
}


/* ============================================================
   TOUCH DEVICES
   ============================================================ */

@media (pointer: coarse) {

  button,
  [role="button"],
  .iconbtn,
  .icon-only,
  .tool-button,
  .icon-btn,
  .top-action,
  .snav .nav-group button,
  .side-footer button {
    min-height:
      var(--sehl-touch);
  }

  .icon-only,
  .icon-btn,
  .tool-button {
    min-width:
      var(--sehl-touch);
  }

  button,
  a,
  select,
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-tap-highlight-color:
      transparent;
  }

  .snav .nav-group button,
  .mail-folders > button,
  .files-rail > button {
    touch-action:
      manipulation;
  }
}


/* ============================================================
   iOS INPUT ZOOM PROTECTION
   ============================================================ */

@supports (-webkit-touch-callout: none) {

  @media (max-width: 680px) {

    input,
    textarea,
    select {
      font-size:
        16px;
    }

    .mail-search input,
    .files-search input,
    .chat-search input {
      font-size:
        16px;
    }
  }
}


/* ============================================================
   INSTALLED PWA
   ============================================================ */

@media (display-mode: standalone) {

  body {
    min-height:
      100dvh;
  }

  .topbar {
    padding-top:
      max(
        12px,
        var(--sehl-safe-top)
      );
  }

  .content {
    padding-bottom:
      max(
        28px,
        calc(
          18px
          + var(--sehl-safe-bottom)
        )
      );
  }
}


/* ============================================================
   TOUCH WITHOUT HOVER
   ============================================================ */

@media (hover: none) {

  .qa button:hover,
  .file-grid > button:hover,
  .top-action:hover,
  .snav .nav-group button:hover {
    transform:
      none;
  }
}