/* mobile-other: phone (≤760px) and tablet (761–1100px) layout — see the matching builder's notes */
/* Home, Emerald Vault (/vault, /import), Settings and the sign-in screen.
   Phone: app-style grouped lists with 16px gutters, 44px fields, 40px+ taps; tables turn into lists.
   Tablet: three home cards a row, a slimmer vault sidebar, fewer vault columns, and the Users and
   Errors tables as stacked cards when narrow. Desktop (over 1100px) is untouched. */

/* ================================================================ tablet */
@media (min-width: 761px) and (max-width: 1100px) {
  /* home: the three apps side by side */
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main.home, .main.settings { padding-left: 32px; padding-right: 32px; }

  /* vault: a slimmer sidebar; Saved by and Updated drop so the list fits without scrolling */
  #vaults-page { grid-template-columns: 216px minmax(0, 1fr); }
  #items-table th:nth-child(5), #items-table td:nth-child(5),
  #items-table th:nth-child(6), #items-table td:nth-child(6) { display: none; }
}

/* ================================================================ phone + tablet */
@media (max-width: 1100px) {
  /* Account: a long signed-in devices list scrolls in its own box, so Password and Sign out stay in reach */
  #sessions-list { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 761px) and (max-width: 900px) {
  /* ...and Folder and Tags too when narrower still */
  #items-table th:nth-child(3), #items-table td:nth-child(3),
  #items-table th:nth-child(4), #items-table td:nth-child(4) { display: none; }
}

/* ================================================================ phone + narrow tablet */
/* Users and Errors: each row a card (a grouped list on the phone) instead of a cut-off table */
@media (max-width: 900px) {
  :is(#people-table, #errors-table), :is(#people-table, #errors-table) tbody { display: block; }
  :is(#people-table, #errors-table) thead { display: none; }
  :is(#people-table, #errors-table) td { height: auto; max-width: none; padding: 0; border: 0; white-space: normal; overflow: visible; }
  :is(#people-table, #errors-table) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; padding: 14px 16px; }
  :is(#people-table, #errors-table) tbody tr + tr { border-top: 1px solid var(--line); }

  /* person on top; status pills and when last active below; the actions on the right */
  #people-table td:nth-child(1) { grid-column: 1 / -1; }
  #people-table td:nth-child(1) .cell-main b { overflow-wrap: anywhere; white-space: normal; }
  #people-table td:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; grid-column: 1; grid-row: 2; padding-left: 48px; }
  #people-table td:nth-child(3) { display: block; grid-column: 1; grid-row: 3; padding-left: 48px; color: var(--muted); font-size: 12px; line-height: 16px; }
  #people-table td:nth-child(3)::before { content: "Last active "; }
  #people-table tr:not(:has(.pill.ok)) td:nth-child(3) { display: none; } /* invites haven't been active */
  #people-table td.actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; grid-column: 2; grid-row: 2 / span 2; align-self: center; padding: 0; margin-right: -8px; }
  #people-table td.actions .icon-btn { width: 40px; height: 40px; }

  /* errors: the message first, then where and when; the count on the right */
  #errors-table td.msg { grid-column: 1 / -1; grid-row: 1; max-width: none; font-size: 14px; line-height: 20px; }
  #errors-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 13px; }
  #errors-table td:nth-child(1) { grid-column: 1; grid-row: 3; color: var(--muted); font-size: 12px; line-height: 16px; }
  #errors-table td.num { grid-column: 2; grid-row: 2 / span 2; align-self: center; color: var(--muted); font-size: 13px; }
  #errors-table td.num::after { content: "×"; }
}

/* ================================================================ phone */
@media (max-width: 760px) {
  /* 16px text in every box so the phone doesn't zoom in when you type; 44px tall */
  :is(#signin-screen, #home-page, #vaults-page, #settings-layout, #import-page) :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea) { font-size: 16px; }
  :is(#vaults-page, #settings-layout, #import-page) :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select) { height: 44px; min-height: 44px; }
  /* buttons on these pages: 44px, small ones 40px */
  :is(#vaults-page, #settings-layout, #import-page) .btn { min-height: 44px; }
  :is(#vaults-page, #settings-layout, #import-page) :is(.btn.small, .btn.danger-text) { height: 40px; min-height: 40px; }
  :is(#vaults-page, #settings-layout) .icon-btn { width: 40px; height: 40px; }
  :is(#vaults-page, #settings-layout) .icon-btn svg { width: 20px; height: 20px; }

  /* ---------------- home: a large title, then the apps as one grouped list ---------------- */
  .main.home { padding: 24px 16px var(--dock-clear, 144px); }
  .home-head h2 { font-size: 34px; line-height: 1.05; letter-spacing: -.02em; }
  .app-grid { display: flex; flex-direction: column; gap: 0; margin-top: 24px; overflow: hidden; border-radius: 16px; background: var(--glass); box-shadow: var(--elevation); }
  .app-card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center;
    min-height: 72px; padding: 14px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  .app-card:hover { background: none; box-shadow: none; transform: none; }
  .app-card:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .app-card:focus-visible { outline-offset: -2px; border-radius: 16px; }
  /* a hairline between rows, starting after the icon (only between rows that show) */
  .app-card:not([hidden]) ~ .app-card:not([hidden])::before { content: ""; position: absolute; top: 0; right: 0; left: 74px; height: 1px; background: var(--line); }
  .app-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .app-icon svg { width: 22px; height: 22px; }
  .app-name { grid-column: 2; align-self: end; font-size: 16px; line-height: 22px; }
  .app-meta { grid-column: 2; align-self: start; min-height: 0; margin: 0; padding: 0; font-size: 13px; line-height: 18px; }
  .app-meta:empty { display: none; }
  .app-card:has(.app-meta:empty) .app-name { grid-row: 1 / span 2; align-self: center; }
  .app-go, .app-card:hover .app-go { position: static; grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; transform: none; }

  /* ---------------- vault: vault, folder and tag pickers as chip rows above the list ---------------- */
  /* the sidebar's parts join the page so they can sit above (pickers) and below (new vault / folder) */
  #app-screen #vaults-page { display: flex; flex-direction: column; padding-bottom: var(--dock-clear, 144px); }
  #vaults-page .sidebar { display: contents; }
  #vaults-page .side-label { display: none; }
  #vault-nav, #folder-nav, #tag-nav {
    display: flex; gap: 8px; margin: 0; padding: 0 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch;
  }
  :is(#vault-nav, #folder-nav, #tag-nav)::-webkit-scrollbar { display: none; }
  #vault-nav { order: 1; padding-top: 16px; }
  #folder-nav { order: 2; padding-top: 8px; }
  #tag-nav { order: 3; padding-top: 8px; }
  #tag-nav:empty { display: none; }
  #vaults-page > .main { order: 4; padding: 20px 16px 8px; }
  #new-vault-form { order: 5; margin: 24px 16px 0; }
  #new-folder-form { order: 6; margin: 8px 16px 0; }
  /* while the round + button shows, the new vault / folder rows stop short of its column so it never covers their own + */
  #app-screen:has(#fab:not([hidden])) #vaults-page .side-new { margin-right: 88px; }

  /* a chip: 40px tall, its count after the name */
  #vaults-page .vault-link {
    flex: none; gap: 8px; width: auto; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
    background: none; color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  #vaults-page .vault-link:hover { background: none; }
  #vaults-page .vault-link:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
  #vaults-page .vault-link.active { border-color: transparent; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
  #vaults-page .vault-link small { color: inherit; font-size: 12px; font-weight: 600; opacity: .7; }
  /* vaults read as the main choice: filled when picked */
  #vault-nav .vault-link.active { background: var(--accent); color: var(--on-accent); }
  #vault-nav .vault-link.active small { opacity: .75; }
  /* folders: the picked one shows Rename / Delete in place of its count (no hover on a phone) */
  #folder-nav .folder-link .label svg { width: 16px; height: 16px; color: inherit; opacity: .8; }
  #folder-nav .folder-link:hover small { display: inline; }
  #folder-nav .folder-link:hover .tools { display: none; }
  #folder-nav .folder-link.active:has(.tools) { padding-right: 2px; }
  #folder-nav .folder-link.active:has(.tools) small { display: none; }
  #folder-nav .folder-link.active .tools { display: flex; gap: 0; margin-left: 2px; }
  #folder-nav .folder-link .tools .icon-btn { width: 36px; height: 36px; color: inherit; }
  #folder-nav .folder-link .tools svg { width: 16px; height: 16px; }
  /* tags: lighter chips */
  #tag-nav .tag-chip { flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--line); font-size: 13px; }
  #tag-nav .tag-chip.active { border-color: transparent; }

  /* title, search and the list */
  #vaults-page .main-head { gap: 12px; }
  #vaults-page .main-head h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
  #vaults-page .head-actions { flex-wrap: wrap; }
  /* the Import tab is up in the hidden top tabs on a phone, so the header's Import CSV comes back */
  #app-screen:has(#vaults-page) #vaults-page #import-btn:not([hidden]) { display: inline-flex; }
  #vaults-page .search {
    margin-top: 16px; padding-left: 42px; border-radius: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7abb4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center; background-size: 18px;
  }
  #vaults-page .table-wrap { margin-top: 12px; border-radius: 16px; overflow: hidden; }
  /* each login is a row: picture, name and site, then its quick buttons */
  #items-table, #items-table tbody { display: block; }
  #items-table thead { display: none; }
  #items-table tbody tr { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 8px 6px 8px 16px; -webkit-tap-highlight-color: transparent; }
  #items-table tbody tr + tr { border-top: 1px solid var(--line); }
  #items-table tbody tr.clickable:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
  #items-table tbody tr.clickable:hover td { background: none; }
  #items-table td { display: none; height: auto; padding: 0; border: 0; }
  #items-table td:first-child { display: block; flex: 1 1 auto; min-width: 0; max-width: none; }
  #items-table td.actions { display: flex; flex: none; align-items: center; gap: 0; }
  #items-table .avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
  #items-table .cell-main b { font-size: 16px; line-height: 22px; white-space: nowrap; }
  #items-table .cell-main small { font-size: 13px; line-height: 18px; white-space: nowrap; }
  /* trash rows (not clickable): how long each has left, then Restore / Delete forever */
  #items-table tbody tr:not(.clickable) td:nth-child(6) { display: block; flex: none; color: var(--muted); font-size: 12px; text-align: right; }
  #items-table tbody tr:not(.clickable) td:nth-child(6) > span:first-child { display: none; }
  #items-table td.actions .btn.small { height: 40px; }
  #vaults-page .empty { padding: 40px 16px; }

  /* new vault / new folder: their own rounded rows at the bottom */
  #vaults-page .side-new { gap: 4px; padding: 4px 4px 4px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
  #vaults-page .side-new input { height: 44px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; }
  #vaults-page .side-new .icon-btn { width: 44px; height: 44px; }

  /* ---------------- import ---------------- */
  #import-page .main { padding: 20px 16px var(--dock-clear, 144px); }
  #import-page .main-head h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
  #import-page .drop { padding: 36px 20px; }
  #import-page .map-grid { gap: 6px; }
  #import-page .map-grid > label:not(.check) { margin-top: 10px; }
  #import-page .check { min-height: 44px; white-space: normal; }
  #import-page .check input { width: 20px; height: 20px; }
  #import-page .panel-foot { flex-direction: column-reverse; gap: 8px; }
  #import-page .panel-foot .btn { width: 100%; height: 48px; margin: 0; }

  /* ---------------- settings ---------------- */
  /* the app bar already says "Settings"; the tabs become one segmented control that fits the width
     (every tab, the open one included, always shows; it scrolls sideways only if a phone is too narrow) */
  .main.settings { padding: 12px 16px var(--dock-clear, 144px); }
  .settings-head { display: none; }
  .settings-tabs {
    flex-wrap: nowrap; gap: 2px; margin: 4px 0 0; padding: 3px; border: 0; border-radius: 13px;
    background: color-mix(in srgb, var(--text) 7%, transparent); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tabs a { flex: 1 0 auto; justify-content: center; gap: 6px; min-width: 44px; height: 40px; padding: 0 6px; border: 0; border-radius: 10px; font-size: 14px; -webkit-tap-highlight-color: transparent; }
  .settings-tabs a:active:not(.active) { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .settings-tabs a svg { display: none; }
  .settings-tabs a.active { background: var(--primary, var(--text)); color: var(--on-primary, var(--bg)); }
  .settings-tabs a.active::after { display: none; }
  .settings-tabs a.active .count { background: color-mix(in srgb, var(--on-primary, #16181d) 14%, transparent); color: inherit; }
  /* Email / AI On-Off: a small status dot instead of a word, so the five tabs keep fitting in one row
     (the On/Off text stays in the DOM for screen readers; the Users count keeps its number) */
  #email-state:not(:empty), #ai-state:not(:empty) {
    flex: none; width: 8px; min-width: 0; height: 8px; padding: 0; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden; background: var(--accent); color: transparent;
  }
  #email-state.off:not(:empty), #ai-state.off:not(:empty) { background: color-mix(in srgb, var(--text) 30%, transparent); }
  .settings-tabs a.active #email-state:not(:empty), .settings-tabs a.active #ai-state:not(:empty) { background: currentColor; opacity: .9; }
  .settings-tabs a.active #email-state.off:not(:empty), .settings-tabs a.active #ai-state.off:not(:empty) { background: currentColor; opacity: .35; }
  .settings-pane { padding-top: 16px; }
  .settings-pane .tab-sub { margin-bottom: 0; font-size: 14px; line-height: 20px; }
  .settings-pane > .sheet:first-of-type, .settings-pane > .invite-bar:first-of-type { margin-top: 12px; }

  /* each section a rounded group with a short heading */
  .settings-pane .sheet { gap: 14px; margin-top: 16px; padding: 18px 16px; border-radius: 16px; }
  .settings-pane .sheet h3 { font-size: 16px; line-height: 22px; }
  .settings-pane .sheet .muted { font-size: 14px; line-height: 20px; }
  .settings-pane .form-narrow { max-width: none; }
  /* buttons fill the width, side by side when there are a few */
  .settings-pane .sheet .btn, .settings-pane .sheet .btn.small { height: 44px; min-height: 44px; }
  .settings-pane .row-btns { width: 100%; }
  .settings-pane .row-btns .btn { flex: 1 1 auto; }
  .settings-pane .sheet-row { gap: 14px; }
  .settings-pane .sheet-row > .btn { align-self: stretch; }
  .settings-pane .sheet-row .row-actions { width: 100%; }
  .settings-pane .sheet-row .row-actions .btn { flex: 1 1 0; }
  .settings-pane form > div:only-child > .btn:only-child, .settings-pane .stack > div > .btn:only-child { width: 100%; }
  #tfa-sheet .sheet-row { gap: 14px; }
  #tfa-sheet .sheet-row > .btn { align-self: stretch; }

  /* Users: invite box over the list */
  .invite-bar:not(.compact) { gap: 8px; margin-top: 12px; }
  .invite-bar:not(.compact) input[type=email] { flex: 1 1 100%; max-width: none; }
  .invite-bar:not(.compact) .btn { flex: 1 1 100%; height: 44px; }
  #people-page .table-wrap { margin-top: 16px; border-radius: 16px; }
  #people-page .spaced-head { margin-top: 32px; }
  #people-page .spaced-head h2 { font-size: 22px; line-height: 28px; }
  #people-page .notice { flex-wrap: wrap; }
  /* your own photo button: a 44px target around the 36px picture, without moving the row */
  #people-table .face-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: -4px; }

  /* Email / AI / Limits forms: one column, full-width boxes */
  .smtp-grid { gap: 14px; }
  .limits-grid { gap: 16px; }
  .limits-grid .field input { max-width: none; }

  /* Account: photo, switches, lists */
  .photo-row { gap: 16px; }
  .photo-row .row-btns { flex: 1 1 auto; width: auto; flex-direction: column; align-items: stretch; }
  .switch-row { min-height: 48px; margin: -4px 0; font-size: 15px; }
  .switch-row input { width: 22px; height: 22px; }
  .settings-pane .list { border-radius: 14px; }
  .settings-pane .list-row { min-height: 60px; padding: 8px 8px 8px 14px; }
  .settings-pane .list-row.check { color: var(--text); white-space: normal; }
  .settings-pane .list-row.check input { width: 22px; height: 22px; flex: none; }
  #sessions-list .list-row b { flex-wrap: wrap; white-space: normal; }
  #sessions-list .list-row .btn { flex: none; }
  .backup-grid { gap: 8px 24px; }
  .tfa-qr img { margin: 0 auto; }

  /* ---------------- Access panel: each row's name across the top, its four ticks below ---------------- */
  #access-panel .pma-grid, #access-panel .pma-grid tbody { display: block; width: 100%; }
  #access-panel .pma-grid thead { display: none; }
  #access-panel .pma-grid tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
  #access-panel .pma-grid tbody tr:last-child { border-bottom: 0; }
  #access-panel .pma-grid tbody :is(th, td) { padding: 0; border: 0; }
  #access-panel .pma-grid tbody th { grid-column: 1 / -1; padding-bottom: 6px; }
  #access-panel .pma-grid tbody th b { font-size: 14px; line-height: 20px; }
  #access-panel .pma-grid tbody th small { font-size: 12px; line-height: 17px; }
  #access-panel .pma-grid td { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-height: 60px; }
  #access-panel .pma-grid td::before { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; line-height: 16px; text-transform: uppercase; }
  #access-panel .pma-grid td:nth-of-type(1)::before { content: "See"; }
  #access-panel .pma-grid td:nth-of-type(2)::before { content: "Add"; }
  #access-panel .pma-grid td:nth-of-type(3)::before { content: "Edit"; }
  #access-panel .pma-grid td:nth-of-type(4)::before { content: "Delete"; }
  #access-panel .pma-grid td > :is(.pma-box, .pma-na) { display: grid; place-items: center; margin-top: 10px; }
  #access-panel .pma-grid td > .pma-na { height: 20px; margin-top: 10px; }
  #access-panel .perm-cell { width: 44px; height: 44px; }
  #access-panel .pma-box { width: 22px; height: 22px; }
  #access-panel .pma-opt { min-height: 56px; padding: 12px 14px; }
  #access-panel .pma-presets { gap: 8px; }
  #access-panel .access-app-head { align-items: flex-start; }
  #access-panel .access-app .perms { gap: 8px; }
  #access-panel .access-app .perm { height: 40px; }

  /* ---------------- sign-in: an app's welcome screen ---------------- */
  #signin-screen .auth {
    display: flex; flex-direction: column; max-width: none; min-height: 100vh; min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 32px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(20px, env(safe-area-inset-left, 0px));
  }
  #signin-screen .auth .wordmark { margin-bottom: 36px; }
  #signin-screen .auth h1 { font-size: 36px; line-height: 1.05; letter-spacing: -.02em; }
  #signin-screen .auth .sub { font-size: 16px; line-height: 24px; }
  #signin-screen .auth form { margin-top: 32px; }
  #signin-screen .auth input:not([type=checkbox]) { height: 52px; border-radius: 14px; font-size: 17px; }
  #signin-screen .auth .btn.primary { height: 52px; border-radius: 999px; }
  #signin-screen .auth .link-btn { min-height: 40px; }
  #signin-screen .auth .link-btn + .link-btn { margin-top: -8px; }
  #signin-screen .auth .check { min-height: 44px; white-space: normal; }
  #signin-screen .auth .check input { width: 22px; height: 22px; flex: none; }
  #signin-screen .auth-foot { margin-top: auto; padding-top: 20px; }
}

/* very narrow phones: the settings tabs still fit in one row */
@media (max-width: 359px) {
  .settings-tabs a { gap: 4px; min-width: 40px; padding: 0 4px; font-size: 13px; }
  .settings-tabs .count { min-width: 18px; padding: 0 5px; }
}

/* very narrow phones: the vault list keeps room for names */
@media (max-width: 360px) {
  #items-table td.actions .icon-btn { width: 40px; }
  #items-table tbody tr { padding-left: 12px; }
}