/* Yacht Workspace: tablets and phones.

   Loaded after style.css and inventory.css, so it only adds rules for small
   screens and touch input. The desktop layout is untouched.

   Phone  : up to 760px wide. The sidebar becomes a drawer that slides in over
            the page; dialogs rise from the bottom of the screen.
   Tablet : 761px to 1100px. Same layout as desktop, with tighter spacing and
            the sidebar folded away until opened.
   Touch  : any size with a finger instead of a mouse. Bigger tap targets, and
            controls that only showed on hover are always visible. */

/* ---------- full-height pages on phones with moving toolbars ---------- */

@supports (height: 100dvh) {
  .app {
    height: 100dvh;
  }
  .main {
    height: calc(100dvh - 24px);
  }
}

/* ---------- touch input (any size) ---------- */

@media (pointer: coarse) {
  .icon-btn {
    padding: 10px;
  }
  .tab-item {
    min-height: 44px;
  }
  .add-tab-btn {
    min-height: 44px;
  }
  .tb-btn {
    min-width: 36px;
    height: 36px;
  }
  .inv-btn,
  .inv-select,
  .inv-filter-cap,
  .inv-search {
    height: 40px;
  }
  .inv-td {
    height: 46px;
  }
  .inv-input {
    height: 44px;
  }
  .inv-th {
    height: 42px;
  }
  .inv-pv-btn {
    height: 36px;
    min-width: 36px;
  }

  /* controls that only appeared on hover are always there */
  .tab-delete,
  .row-actions,
  .inv-row-actions,
  .inv-th-menu,
  .structure-tab-delete {
    opacity: 1;
  }
  .block-row .row-actions {
    opacity: 0.85;
  }

  /* inputs at 16px, so iOS does not zoom the page when one is focused */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="time"],
  select,
  textarea,
  .inv-input,
  .add-task-input {
    font-size: 16px;
  }
}

/* ---------- tablets ---------- */

@media (min-width: 761px) and (max-width: 1100px) {
  .main-header {
    padding: 16px 24px 10px;
  }
  .toolbar {
    padding: 6px 20px;
  }
  .main-scroll {
    padding: 16px 24px 120px;
  }
  .split-container {
    padding: 0 20px 24px;
  }
  .inv-scroll {
    padding: 16px 20px 80px;
  }
  .inv-checkbar {
    padding: 12px 24px 0;
  }
}

/* The first column and the row number stay in view while the table scrolls sideways. */
@media (max-width: 1100px) {
  .inv-table-fixed .inv-th-rownum,
  .inv-table-fixed .inv-td-rownum {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--bg-elevated);
  }
  .inv-table-fixed .inv-th.inv-col-primary,
  .inv-table-fixed .inv-td.inv-col-primary {
    position: sticky;
    left: var(--rownum-w, 36px);
    z-index: 3;
    background: var(--bg-elevated);
    box-shadow: 1px 0 0 var(--border);
  }
  .inv-table-fixed .inv-th.inv-col-primary {
    z-index: 5;
  }
  .inv-table-fixed .inv-th-rownum {
    z-index: 6;
  }
  .inv-row:hover .inv-td-rownum,
  .inv-row:hover .inv-td.inv-col-primary {
    background: var(--bg-elevated);
  }
}

/* the arrow that opens a table row's card on a phone; hidden everywhere else */
.inv-card-toggle {
  display: none;
}

/* the phone-only "Filters" button next to the search box */
.inv-filter-toggle {
  display: none;
}

/* ---------- phones ---------- */

@media (max-width: 760px) {
  html,
  body {
    overflow: hidden;
  }

  /* the sheet fills the screen */
  .app {
    padding: 0 !important;
    gap: 0 !important;
    background: var(--bg-elevated) !important;
  }
  .main {
    margin: 0 !important;
    height: 100vh !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-elevated) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @supports (height: 100dvh) {
    .main {
      height: 100dvh !important;
    }
  }

  /* the sidebar is a drawer over the page */
  .sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: min(86vw, 340px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    background: var(--sidebar-bg) !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 1 !important;
    transform: translateX(0);
    transition: transform 0.26s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }
  .side-collapsed .sidebar {
    transform: translateX(-106%);
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
    transition: transform 0.26s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s linear 0.26s;
  }
  .sidebar > * {
    min-width: 0 !important;
  }
  .resizer {
    display: none !important;
  }
  .app:not(.side-collapsed)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(0, 0, 0, 0.42);
  }
  .main-header {
    padding: 14px 14px 10px 62px !important;
  }
  /* On an iPhone the page runs under the status bar: everything starts below it, and the menu
     button sits in the same place as the header row, so it can always be tapped. */
  .main {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  /* The menu button: a 44 x 44 pt touch target (Apple's minimum), drawn as a round button so it reads
     as a control. It is centred on the header's first row, so the header does not grow. */
  .side-expand {
    top: calc(9px + env(safe-area-inset-top, 0px));
    left: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.07);
  }
  .side-expand svg {
    width: 22px;
    height: 22px;
  }
  .side-expand:active {
    background: var(--tab-hover);
  }

  /* the sheet's header */
  .tab-title-display,
  .general-title {
    font-size: 22px;
  }
  .tab-title-display {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    line-height: 1.2;
  }
  .main-header-top-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .main-header-controls-row {
    flex-wrap: wrap;
  }
  .person-selector-btn {
    margin-left: 0;
  }
  /* iOS zooms into any text field set smaller than 16px, and the Home Screen app can stay zoomed
     afterwards (the right side of the page, with the user icon, is then off screen). So on a phone no
     field is smaller than 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  textarea,
  select,
  [contenteditable="true"],
  [contenteditable=""] {
    font-size: 16px !important;
  }
  /* The Workspace header is one row: title, the Workspace | Structure switch, the user icon.
     The title takes what is left (it wraps to its own line only on a very narrow screen). */
  .main-header-controls-row:has(.segmented-control) {
    flex-wrap: wrap;
    gap: 6px 6px;
  }
  .main-header:has(.segmented-control) {
    padding-left: 58px !important;
    padding-right: 10px !important;
  }
  .main-header-controls-row:has(.segmented-control) .tab-title-display {
    flex: 1 1 44px;
    min-width: 44px;
    overflow: hidden;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main-header-controls-row .segmented-control {
    flex: 0 0 auto;
  }
  .main-header-controls-row .segmented-option {
    padding: 0 9px;
    font-size: 12px;
  }
  @media (max-width: 400px) {
    .main-header-controls-row .segmented-option {
      padding: 0 7px;
      font-size: 11.5px;
    }
  }
  /* Tighter formatting toolbar; "Mark change" is an icon at the end of its last row */
  .toolbar {
    padding: 4px 6px;
    gap: 1px;
  }
  .toolbar .tb-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
  }
  .toolbar .tb-sep {
    margin: 0 2px;
  }
  .mark-change-link {
    margin-left: auto;
    width: 32px;
    height: 30px;
    padding: 0;
    justify-content: center;
  }
  .mark-change-link span {
    display: none;
  }
  .structure-tabs-row {
    padding: 0 12px;
    overflow-x: auto;
  }
  .main-scroll {
    padding: 14px 14px 100px;
  }

  /* Workspace: Tasks and Notes one above the other */
  .main-scroll.split-layout {
    overflow-y: auto;
  }
  .split-container {
    flex-direction: column;
    flex: none;
    overflow: visible;
    padding: 0 14px 28px;
    gap: 22px;
  }
  .workspace-panel,
  .split-container .notes-pane {
    width: 100% !important;
    height: auto !important;
    overflow: visible;
    transition: none;
    padding: 0 !important;
  }
  .workspace-panel .panel-full-content,
  .workspace-panel.panel-collapsed .panel-full-content {
    display: block;
    min-width: 0;
  }
  .workspace-panel .panel-collapsed-strip,
  .panel-collapsed-strip,
  .panel-expand-btn,
  .pane-splitter {
    display: none !important;
  }
  .block-row {
    min-height: 44px;
  }

  /* dialogs rise from the bottom */
  .export-modal-overlay {
    align-items: flex-end;
  }
  .export-modal,
  .export-handoff-modal,
  .inv-detail,
  .inv-addcol,
  .task-detail-modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  @supports (height: 100dvh) {
    .export-modal,
    .export-handoff-modal,
    .inv-detail,
    .inv-addcol,
    .task-detail-modal {
      max-height: 94dvh;
    }
  }
  .search-modal {
    width: calc(100vw - 20px) !important;
  }
  .search-modal-overlay {
    align-items: flex-start;
    padding-top: 12px;
  }
  .recur-popover,
  .person-popover {
    max-width: calc(100vw - 16px);
  }

  /* Inventory */
  .inv-scroll {
    padding: 12px 14px 80px;
  }
  /* the banner starts to the right of the menu button, like the page header does */
  .inv-checkbar {
    padding: 10px 14px 0 62px;
  }
  .inv-toolbar {
    gap: 8px;
  }
  .inv-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .inv-select {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    max-width: none;
  }
  .inv-header-right {
    margin-left: 0;
    flex-wrap: wrap;
  }
  .inv-range {
    gap: 8px;
  }
  /* Expiring within: all five options fit on one line without a scroll box, which
     would clip the raised active option at the top and bottom. */
  .inv-range-switch {
    width: 100%;
    max-width: 100%;
    margin: 4px 0;
    justify-content: space-between;
    overflow: visible;
  }
  .inv-range-switch button {
    flex: 1 1 auto;
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
  }
  .inv-range-switch button.active {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* two figures per row, divider between each pair */
  .inv-dash-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }
  .inv-dash-stat {
    padding: 0 16px;
  }
  .inv-dash-stat:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
  .inv-dash-value {
    font-size: 28px;
  }
  .inv-table-wrap {
    max-height: none;
  }
  .inv-detail-title {
    font-size: 17px;
  }
  .inv-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .inv-profile-head {
    padding-right: 0;
  }
  /* "Check in progress": a compact three-line card instead of a tall block */
  .inv-checkbar {
    gap: 6px;
  }
  .inv-checkcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  .inv-checkcard-text {
    min-width: 0;
  }
  .inv-checkcard-title {
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
  }
  .inv-checkcard-title strong {
    flex-shrink: 0;
  }
  .inv-checkcard-scope {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  .inv-checkcard-sub {
    display: none;
  }
  .inv-checkcard-prog {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: none;
  }
  .inv-checkcard-count {
    margin: 0;
    flex-shrink: 0;
    font-size: 12px;
    white-space: nowrap;
  }
  .inv-checkcard-prog .inv-pv-progress {
    flex: 1;
    min-width: 30px;
  }
  .inv-checkcard-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .inv-checkcard-actions .inv-btn {
    height: 32px;
    padding: 0 8px;
    justify-content: center;
    font-size: 13px;
    white-space: nowrap;
  }

  /* the plan: the Check Mode list moves under the plan */
  .inv-pv-body {
    flex-direction: column;
  }
  .inv-pv-panel {
    width: 100%;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  /* Check screen: a short strip of the plan on top, the equipment list below it
     gets the rest of the screen and scrolls on its own. */
  .inv-plan-frame:has(.inv-pv.checking) {
    min-height: calc(100dvh - 204px);
  }
  .inv-pv.checking .inv-pv-bar {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px 8px;
  }
  .inv-pv.checking .inv-pv-bar .inv-pv-group,
  .inv-pv.checking .inv-pv-bar .inv-spacer {
    display: none;
  }
  .inv-pv.checking .inv-pv-hint {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .inv-pv.checking .inv-pv-check-banner {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inv-pv.checking .inv-pv-hint .inv-pv-btn {
    flex-shrink: 0;
  }
  .inv-pv.checking .inv-pv-body .inv-pv-scroll {
    flex: 0 0 27%;
    min-height: 140px;
  }
  .inv-pv.checking .inv-pv-panel {
    flex: 1 1 0;
    min-height: 0;
  }
  .inv-pv-panel-head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 12px;
  }
  .inv-pv-panel-scope {
    display: none;
  }
  .inv-pv-progress-text {
    order: 1;
    font-size: 15px;
  }
  .inv-pv-panel-sub {
    order: 2;
    margin-left: auto;
  }
  .inv-pv-panel-head .inv-pv-progress {
    order: 3;
    flex: 1 0 100%;
  }
  .inv-pv-panel-head .inv-pv-filter {
    order: 4;
    flex: 1 0 100%;
    display: flex;
  }
  .inv-pv-panel-head .inv-pv-filter button {
    flex: 1;
    padding: 0 8px;
    white-space: nowrap;
  }
  .inv-pv-list {
    padding: 4px 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .inv-pv-row {
    min-height: 46px;
    padding: 8px 10px;
  }
  .inv-pv-row-mark {
    width: 20px;
    height: 20px;
    line-height: 17px;
    font-size: 12px;
  }
  .inv-pv-row-main {
    font-size: 14px;
  }
  .inv-pv-panel-foot {
    padding: 8px 12px;
  }
  .inv-pv-bar {
    gap: 8px;
    padding: 8px;
  }
  .inv-pv-scroll {
    padding: 8px;
  }
  .inv-pop {
    max-height: calc(100vh - 16px);
  }


  /* ---------- Inventory tables as cards: no sideways scrolling on a phone ---------- */

  .inv-table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .inv-table,
  .inv-table tbody {
    display: block;
    width: auto !important; /* the table carries an inline width for the sideways layout */
    min-width: 0;
  }
  .inv-table colgroup,
  .inv-table thead,
  .inv-table .inv-td.inv-td-fill {
    display: none;
  }
  .inv-table .inv-td {
    display: block;
    height: auto;
    border-bottom: none;
    overflow: visible;
  }
  .inv-table .inv-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    margin: 0 0 10px;
    padding: 10px 12px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-elevated);
  }
  .inv-table .inv-row:hover .inv-td,
  .inv-table .inv-row.selected .inv-td,
  .inv-table .inv-row .inv-td {
    background: transparent;
  }
  .inv-table .inv-row.inv-flash {
    background: color-mix(in srgb, var(--inv-amber) 18%, var(--bg-elevated));
    transition: background 1.6s ease-out;
  }

  /* category table: head line = number, name, actions */
  .inv-table-fixed .inv-td-rownum {
    position: static;
    order: 0;
    flex: 0 0 auto;
    padding: 0;
    align-self: center;
    text-align: left;
  }
  .inv-table-fixed .inv-rownum-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .inv-table-fixed .inv-rownum {
    transform: none;
    min-width: 26px;
    height: 26px;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
  }
  .inv-table-fixed .inv-td.inv-col-primary {
    position: static;
    order: 1;
    flex: 1 1 70px;
    min-width: 0;
    box-shadow: none;
  }
  .inv-table-fixed .inv-td.inv-col-primary .inv-input {
    height: 34px;
    padding: 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: transparent;
  }
  .inv-table-fixed .inv-td-actions {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    align-self: center;
  }
  .inv-table-fixed .inv-row-actions {
    opacity: 1;
    gap: 2px;
  }
  .inv-table-fixed .inv-row-btn {
    width: 30px;
    height: 34px;
  }
  .inv-table-fixed .inv-row-btn svg {
    width: 16px;
    height: 16px;
  }

  /* the fields: two to a line, name above value */
  .inv-table-fixed .inv-row > .inv-td:not(.inv-td-rownum, .inv-col-primary, .inv-td-actions) {
    order: 4;
    flex: 0 0 calc(50% - 5px);
    min-width: 0;
  }
  .inv-table-fixed .inv-row > .inv-td[data-label]:not(.inv-col-primary)::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 2px 2px;
    overflow: hidden;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* the facts that matter come first: dates (with their status colour), then the location */
  .inv-table-fixed .inv-row > .inv-td.inv-td-date:not(.inv-col-primary) {
    order: 3;
  }
  .inv-table-fixed .inv-row > .inv-td.inv-td-loc {
    order: 3;
    flex-basis: 100%;
  }
  .inv-table-fixed .inv-row > .inv-td.inv-td-notes,
  .inv-table-fixed .inv-row > .inv-td.inv-td-plan,
  .inv-table-fixed .inv-row > .inv-td.inv-td-deck {
    order: 5;
  }
  .inv-table-fixed .inv-plan-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* closed card: header, dates and location. Everything else opens with the arrow. */
  .inv-table-fixed .inv-row:not(.open) > .inv-td:not(.inv-td-rownum, .inv-col-primary, .inv-td-actions, .inv-td-date, .inv-td-loc):not(:has(.inv-notes-cell.has)) {
    display: none;
  }
  .inv-table-fixed .inv-card-toggle {
    display: inline-flex;
  }
  .inv-table-fixed .inv-card-toggle svg {
    transition: transform 0.15s ease;
  }
  .inv-table-fixed .inv-row.open .inv-card-toggle svg {
    transform: rotate(180deg);
  }
  .inv-table-fixed .inv-td:not(.inv-col-primary) .inv-input {
    height: 34px;
    padding: 0 9px;
    border-radius: 9px;
    background: var(--bg);
    font-size: 14.5px;
  }
  .inv-table-fixed .inv-td-date.tracked .inv-input {
    width: auto;
    max-width: 100%;
    height: 32px;
    margin: 0;
  }
  .inv-table-fixed .inv-td-date .inv-input {
    min-width: 0;
  }
  .inv-table-fixed .inv-plan-cell,
  .inv-table-fixed .inv-notes-cell {
    min-height: 34px;
  }

  /* group overview: a compact card per item */
  .inv-overview-table .inv-row-link {
    gap: 4px 12px;
    align-items: center;
    padding: 10px 12px 11px;
  }
  .inv-overview-table .inv-td:last-child {
    display: none;
  }
  .inv-overview-table .inv-td-text {
    padding: 0;
    white-space: normal;
  }
  .inv-overview-table .inv-td-rownum {
    order: -1;
    flex: 0 0 auto;
    padding: 0;
    text-align: left;
  }
  .inv-overview-table .inv-rownum {
    min-width: 26px;
    height: 26px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
  }
  .inv-overview-table .inv-ov-cat {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .inv-overview-table .inv-ov-due {
    order: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }
  .inv-overview-table .inv-ov-due.is-empty {
    display: none;
  }
  .inv-overview-table .inv-due {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 14px;
  }
  .inv-overview-table .inv-due-col {
    margin: 0;
    font-size: 11px;
  }
  .inv-overview-table .inv-ov-main {
    order: 2;
    flex: 1 0 100%;
    min-width: 0;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
  }
  .inv-overview-table .inv-ov-loc,
  .inv-overview-table .inv-ov-deck {
    order: 3;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: 12.5px;
  }
  .inv-overview-table .inv-ov-loc::before {
    content: "Location  ";
    color: var(--text-faint);
  }
  .inv-overview-table .inv-ov-deck::before {
    content: "Deck  ";
    color: var(--text-faint);
  }
  .inv-overview-table .inv-ov-loc.is-empty,
  .inv-overview-table .inv-ov-deck.is-empty {
    display: none;
  }


  /* ---------- Inventory header and toolbar: compact, so the cards get the screen ---------- */

  .main-header:has(.inv-crumb) {
    padding: 8px 14px 6px 62px !important;
  }
  .main-header:has(.inv-crumb) .inv-crumb {
    min-height: 26px; /* lines up with the menu button */
    padding-bottom: 0;
    font-size: 12px;
  }
  .main-header:has(.inv-crumb) .main-header-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .main-header:has(.inv-crumb) .main-header-controls-row .tab-title-display {
    order: 0;
    flex: 1 1 0;
    min-width: 90px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main-header:has(.inv-crumb) .main-header-controls-row .inv-plan-toggle {
    order: 1;
    flex: 0 0 auto;
  }
  /* slimmer segments, so the switch fits beside the title */
  .main-header:has(.inv-crumb) .inv-plan-toggle button {
    padding: 0 11px;
    font-size: 12px;
  }
  .main-header:has(.inv-crumb) .main-header-controls-row .inv-more {
    order: 2;
    margin-left: 0 !important;
    padding: 6px;
  }
  /* phones keep the earlier header order: the flexible space is not used */
  .inv-hdr-spacer {
    display: none;
  }
  .main-header:not(:has(.inv-crumb)) .main-header-controls-row .inv-marker-switch {
    order: 1;
  }
  .main-header:not(:has(.inv-crumb)) .main-header-controls-row .inv-more {
    order: 2;
    margin-left: auto !important;
  }
  .main-header:has(.inv-crumb) .main-header-controls-row .inv-summary {
    order: 3;
    flex: 1 0 100%;
    gap: 5px;
  }
  .main-header:has(.inv-crumb) .inv-pill {
    height: 22px;
    padding: 0 8px;
    font-size: 11.5px;
  }

  .inv-toolbar.has-filters {
    gap: 6px 8px;
  }
  .main-header:has(.inv-crumb) {
    gap: 6px;
  }
  .inv-toolbar.has-filters .inv-search {
    flex: 1 1 calc(100% - 110px);
    min-width: 0;
    height: 38px;
  }
  .inv-toolbar.has-filters .inv-filter-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    align-items: center;
    white-space: nowrap;
  }
  .inv-toolbar.has-filters .inv-filter-toggle.on {
    border-color: var(--text-muted);
    font-weight: 600;
  }
  .inv-toolbar.has-filters:not(.filters-open) .inv-filter-cap {
    display: none;
  }
  /* open: the capsule becomes a two-column panel, thin lines between the cells */
  .inv-toolbar.has-filters .inv-filter-cap {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    height: auto;
    border-radius: 22px;
    background: var(--border-strong);
  }
  .inv-toolbar.has-filters .inv-fsel {
    background: var(--bg-elevated);
    height: 42px;
    width: auto;
    flex: none;
  }
  .inv-toolbar.has-filters .inv-fsel::before {
    display: none;
  }
  .inv-toolbar.has-filters .inv-fsel {
    border-radius: 0;
  }
  .inv-toolbar.has-filters .inv-fsel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .inv-toolbar.has-filters .inv-fsel:has(option:checked:not(:first-child)) {
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-elevated);
  }
  .inv-toolbar.has-filters .inv-fsel .inv-select {
    max-width: none;
    height: 100%;
    font-size: 14px;
  }
  .inv-toolbar.has-filters .inv-count {
    flex: 1 0 100%;
    margin: 0 4px;
    font-size: 12px;
  }
  .inv-toolbar.has-filters .inv-count:empty {
    display: none;
  }
  .inv-toolbar .inv-spacer {
    display: none;
  }
  /* category controls: Items line, then search and filters, then the three actions on one line */
  .inv-cat-controls {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "bar"
      "actions";
    gap: 8px;
  }
  .inv-cat-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 6px;
  }
  .inv-cat-actions .inv-btn {
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    justify-content: center;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inv-cat-actions .inv-split-btn {
    height: 38px;
    min-width: 0;
  }
  .inv-cat-actions .inv-split-part {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* cards: a soft tinted page behind them, so each card reads as its own object */
  .inv-scroll {
    background: color-mix(in srgb, var(--bg) 88%, var(--bg-elevated));
  }
  .inv-table .inv-row,
  .inv-overview-table .inv-row-link {
    border-color: color-mix(in srgb, var(--text) 11%, transparent);
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.07), 0 2px 8px rgba(28, 27, 25, 0.04);
  }

  /* Calendar: weekdays as single letters, and the grid uses almost the full width */
  .cal-title .mo-full,
  .cal-month-grid:not(.cal-panel) .mo-full {
    display: none;
  }
  .cal-title .mo-short,
  .cal-month-grid:not(.cal-panel) .mo-short {
    display: inline;
  }
  .cal-month-grid:not(.cal-panel) .cal-date-strip {
    font-size: 11px;
    padding: 0 1px;
  }
  .cal-month-grid:not(.cal-panel) .cal-date-label {
    white-space: nowrap;
  }
  .cal-month-grid:not(.cal-panel) .cal-weekday-header .wd-full {
    display: none;
  }
  .cal-month-grid:not(.cal-panel) .cal-weekday-header .wd-short {
    display: inline;
  }
  .cal-weekday-header {
    font-size: 12px;
  }
  .main-scroll.calendar-layout {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 12px;
  }
  .calendar-view {
    padding: 8px 5px 0;
  }
  .cal-month-grid.cal-panel {
    max-width: none;
  }
  .cal-month-grid {
    border-radius: 8px;
  }
  .cal-panel-body {
    padding: 4px;
  }
  .cal-day-cell {
    height: 92px;
    padding: 4px 3px 4px;
    gap: 3px;
  }

  /* The person selector is just a person icon */
  .person-selector-btn {
    font-size: 0;
    gap: 0;
    min-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
  }
  .person-selector-btn .person-name {
    display: none;
  }
  .person-selector-icon {
    color: var(--text);
  }
  .person-selector-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Back button in the archive: a light pill instead of a dark block */
  .archive-back-btn {
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.06);
  }
  /* Back on the left, the person icon on the right, the title on its own line below */
  .archive-header-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .archive-header-row .archive-back-btn {
    order: 1;
  }
  .archive-header-row .person-selector-btn {
    order: 2;
  }
  .archive-header-row .archive-title {
    order: 3;
    flex: 1 0 100%;
    font-size: 20px;
  }
  .archive-back-btn:active {
    background: var(--tab-hover);
  }
  .archive-back-btn svg {
    color: var(--text-muted);
  }

  .home-screen {
    padding-left: 16px;
    padding-right: 16px;
  }
  .module-grid {
    margin-top: 32px;
    gap: 14px;
  }

  .sync-pill {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* narrow phones */
@media (max-width: 420px) {
  .inv-dash-value {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none !important;
  }
}