/* =============================================================================
   Enigma Tasks — the phone layer.

   Loaded LAST, and everything here lives inside a media query, so on a desktop this
   file changes nothing. One place to look when a phone renders wrong.

   Why a separate layer at all: the desktop shell is a 268px navigation rail beside the
   content. Reflowed onto a phone it became a wrapping row that consumed 400–810px of
   vertical space before the first task — on the board page it filled the entire screen.
   The app is used on phones by staff in the field, so the phone gets its own chrome
   rather than a squeezed copy of the desktop one.

   Breakpoint is 768px: tablets in landscape keep the rail (there is room for it),
   phones and portrait tablets get the tab bar.
   ============================================================================= */

/* Chrome is desktop-only until the media query below turns it on. */
.et-mtop, .et-mtabs, .et-msheet { display: none; }

@media (max-width: 768px) {

  /* ---------- shell ---------- */

  .et-rail { display: none; }
  .et-app { grid-template-columns: 1fr; }

  /* Top bar height + tab bar height + the iOS home indicator. Content is padded by these
     so nothing is ever parked underneath the fixed chrome. */
  :root { --et-top: 54px; --et-tabs: 58px; }

  /* There are TWO shells in this app: `.et-app` (grid) for the list pages and `.of-shell`
     (flex row) inherited from the Board engine for a board. The phone chrome is rendered
     inside whichever one the page uses, so it must not participate in either layout —
     `position: sticky` left it as a flex ITEM of .of-shell, and a 219px-wide top bar
     squeezed the board itself down to 156px. Fixed takes it out of flow in both. */
  .et-app, .of-shell { padding-top: var(--et-top); }
  .of-shell { display: block; }
  /* .of-main stretched to full height only because it was a flex child. Once .of-shell is a
     block it sizes to its content instead, and the board gets 593px of an available 758 —
     a column that should scroll inside a full screen is squeezed into two-thirds of one.
     .of-shell is `height: 100vh; box-sizing: border-box`, so 100% here is exactly the space
     left under the fixed top bar. */
  .of-main {
    min-width: 0; height: 100%;
    padding-bottom: calc(var(--et-tabs) + env(safe-area-inset-bottom));
  }

  .et-main {
    padding: 14px 14px calc(var(--et-tabs) + env(safe-area-inset-bottom) + 22px);
    max-width: none;
  }

  .et-mtop {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: var(--et-top); padding: 0 12px;
    background: color-mix(in srgb, var(--ob-card) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ob-line);
  }
  /* The mark is 28px but it is also a link to My tasks, so the tappable box around it is
     a full 44 — the icon's size and its target's size are different things. */
  .et-mtop .brand {
    display: grid; place-items: center; flex: none; text-decoration: none;
    width: 44px; height: 44px; margin-left: -8px;
  }
  .et-mtop .et-bloc { width: 28px; height: 28px; }
  .et-mtop .ttl {
    font-size: 15.5px; font-weight: 700; color: var(--ob-ink); letter-spacing: -.015em;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .et-mtop .me {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    border: none; background: var(--acc); color: #fff;
    font: 700 13px/1 var(--ob-font, inherit); font-family: inherit;
    display: grid; place-items: center; cursor: pointer;
  }

  /* The page's own h1 duplicates the top bar title — one of them has to go, and the
     sticky one is the one that stays visible while you scroll. */
  .et-topbar h1 { font-size: 20px; }
  .et-topbar .sub { font-size: 12.5px; }

  /* ---------- tab bar ---------- */

  .et-mtabs {
    display: flex; position: fixed; z-index: 60;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--et-tabs) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--ob-card) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--ob-line);
  }
  .et-mtabs > a, .et-mtabs > button {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: none; cursor: pointer;
    text-decoration: none; color: var(--ob-faint);
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    /* Kills the grey flash Android paints over a tapped link. */
    -webkit-tap-highlight-color: transparent;
  }
  .et-mtabs i { font-size: 19px; line-height: 1; }
  .et-mtabs > a.on { color: var(--acc-deep, var(--acc)); }
  .et-mtabs > a.on i { transform: translateY(-1px); }
  .et-mtabs > a:active, .et-mtabs > button:active { background: var(--ob-line-soft); }

  /* ---------- the "more" sheet ---------- */

  .et-msheet { display: block; position: fixed; inset: 0; z-index: 80; }
  .et-msheet[hidden] { display: none; }
  .et-msheet .scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); }
  .et-msheet .panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--ob-card); border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 40px rgba(15, 23, 42, .18);
    animation: etSheetUp .18s ease-out;
  }
  @keyframes etSheetUp { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
  .et-msheet .grab { width: 38px; height: 4px; border-radius: 3px; background: var(--ob-line); margin: 0 auto 14px; }
  .et-msheet .who { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ob-line); }
  .et-msheet .who .nm { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
  .et-msheet .links { display: flex; flex-direction: column; padding-top: 6px; }
  .et-msheet .links a, .et-msheet .links .out {
    display: flex; align-items: center; gap: 12px;
    min-height: 50px; padding: 0 4px; width: 100%;
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 600; text-align: left;
    color: var(--ob-ink); text-decoration: none;
  }
  .et-msheet .links i { font-size: 17px; color: var(--ob-faint); width: 22px; }
  .et-msheet .links .out { color: var(--ob-danger); }
  .et-msheet .links .out i { color: var(--ob-danger); }

  /* ---------- touch ergonomics ----------
     44px is the floor Apple and Google both publish, and it is the difference between a
     colleague tapping a task and a colleague tapping the task next to it. */

  .et-btn, .ob-btn, .of-btn, .et-chipbtn, .et-filter button, .et-quickdates button {
    min-height: 44px;
  }
  .et-task, .et-mycard, .of-board-card { -webkit-tap-highlight-color: transparent; }
  .et-task { padding: 15px 16px; }

  /* iOS zooms the whole page in when you focus an input under 16px and never zooms back
     out. Every field is bumped to 16px on phones — the ONE place where a font size is a
     behaviour and not a style. */
  input, select, textarea, .ob-input, .obsel input {
    font-size: 16px !important;
  }

  /* ---------- horizontal rows become swipeable, not squeezed ----------
     Board-jump rails, filter chips and stat rows are all "a row of things wider than the
     screen". Wrapping them makes a tall ragged block; scrolling them keeps one clean line
     you flick through. */
  /* `.et-swipe` is applied to the element that IS the row — not its wrapper. Getting that wrong
     turns the row into an unshrinkable flex item and the page grows to its content width instead. */
  .et-boardjump .rail, .et-seg, .et-filter, .et-quickdates, .et-mystats, .et-stats,
  .et-people, .et-handover .ppl {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edges so the row visibly runs off — that is what says "swipe me". */
    margin-left: -14px; margin-right: -14px;
    padding-left: 14px; padding-right: 14px;
  }
  .et-boardjump .rail::-webkit-scrollbar, .et-seg::-webkit-scrollbar, .et-filter::-webkit-scrollbar,
  .et-quickdates::-webkit-scrollbar, .et-mystats::-webkit-scrollbar, .et-stats::-webkit-scrollbar,
  .et-people::-webkit-scrollbar, .et-handover .ppl::-webkit-scrollbar { display: none; }
  .et-boardjump .rail > *, .et-seg > *, .et-filter > *, .et-quickdates > *,
  .et-mystats > *, .et-stats > *, .et-people > *, .et-handover .ppl > * { flex: none; }

  /* An avatar you filter by is a button, so it gets a button's tap area. */
  .et-people > *, .et-handover .ppl > * { min-height: 42px; }

  /* ---------- put the work first ----------
     "My tasks" opened with 638px of chrome above the first task on a 812px screen: a page
     heading, four stat tiles, a board rail, a filter block and a result count. Everything
     there is useful on a desktop, where it costs nothing. On a phone it costs the entire
     screen, so the same information is compressed into strips you swipe. */

  /* The sticky bar already carries the page name — printing it again costs 107px. */
  .et-topbar { margin-bottom: 14px; }
  .et-topbar > div:first-child { display: none; }
  .et-topbar .actions { margin-left: 0; width: 100%; }

  /* Stats become a swipeable strip of pills rather than a 203px grid of tiles. */
  .et-mystats, .et-stats { gap: 8px; margin-bottom: 14px; }
  .et-mystats .et-stat, .et-stats .et-stat {
    flex: none; width: auto; min-width: 104px;
    display: flex; flex-direction: row; align-items: baseline; gap: 7px;
    padding: 10px 13px; border-radius: 11px;
  }
  .et-mystats .et-stat .hint, .et-stats .et-stat .hint { display: none; }
  .et-mystats .et-stat .lb, .et-stats .et-stat .lb { font-size: 11.5px; order: 2; white-space: nowrap; }
  .et-mystats .et-stat .vl, .et-stats .et-stat .vl,
  .et-mystats .et-stat .n, .et-stats .et-stat .n { font-size: 19px; order: 1; }

  /* The board rail keeps its chips and drops its "Your boards / All boards" header line. Each
     chip loses its second line (per-board open/overdue counts) — detail worth having on a
     desktop, but here it doubles the height of a control you are only using to jump. */
  .et-boardjump { margin-bottom: 12px; }
  .et-boardjump .hd { display: none; }
  .et-bjump { min-width: 132px; padding: 9px 12px; }
  .et-bjump .mt, .et-bjump .tp .pv { display: none; }
  .et-boardtag { min-height: 40px; }

  /* Search on its own line, the status chips swiping under it. */
  .et-filters { display: block; margin-bottom: 12px; }
  .et-searchbox { width: 100%; margin-bottom: 9px; }
  .et-seg { gap: 7px; }
  .et-seg button { min-height: 40px; white-space: nowrap; }
  .et-condofilter { width: 100%; margin-top: 9px; }

  /* On My tasks the board <select> and the board rail above it do the same job. The rail is
     the better one to keep — chips are tappable and already on screen. (All tasks keeps its
     select: that one filters by CONDO and has no rail behind it.) */
  #mBoard { display: none; }

  /* The chip counts already say how many — a separate line to repeat it is 15px of nothing. */
  .et-resultline { display: none; }

  .et-grid { grid-template-columns: 1fr !important; }

  /* A wide table scrolls inside ITS OWN box; it must never widen the page. Once the page
     itself scrolls sideways the fixed chrome stays put while the content slides out from
     under it, and every column on /reports is a column you'd have to drag the whole layout
     to read. Squashing the table instead would just make the numbers illegible, so the
     table keeps its natural width and the panel gains the scrollbar. */
  .et-report, .et-tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .et-report > table { min-width: max-content; }

  /* ---------- the board ----------
     Columns stay side-by-side and snap, one at a time, with the next peeking. Stacking
     them vertically would hide the one thing a board is for: where a task sits in the
     flow. Trello and Jira both do this on a phone, so the gesture is already learned. */
  .of-board-body {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px calc(var(--et-tabs) + env(safe-area-inset-bottom) + 12px);
    gap: 12px;
  }
  .of-board-list {
    flex: 0 0 87vw; width: 87vw; min-width: 0; scroll-snap-align: center;
    max-height: none;
  }
  .of-board-list-cards { max-height: none; }
  /* The board's own bars (toolbar, head, hand-over) each wrapped into two or three rows,
     stacking to 230px of chrome above the first card. Scrolling them sideways keeps every
     control reachable — nothing is hidden, it just queues up off-screen — in one row each. */
  .of-topbar, .of-board-head, .et-handover {
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .of-topbar::-webkit-scrollbar, .of-board-head::-webkit-scrollbar,
  .et-handover::-webkit-scrollbar { display: none; }
  .of-topbar > *, .of-board-head > *, .et-handover > * { flex: none; }

  /* The board name is also in the sticky bar above, so here it only has to be tappable for
     rename — it gives up its width first. */
  .of-board-head { padding: 8px 12px; }
  .of-board-head #boardName {
    font-size: 16px; max-width: 40vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .of-board-head .search .of-input { width: 132px !important; }

  /* ---------- card panel ----------
     board.css already widens the drawer to 100% below 900px and it scrolls itself, so this
     only has to reclaim the last of the width and give the content room to breathe under
     the home indicator. Deliberately NOT restructured into a flex column: the panel's only
     child is `.pad`, and its own `overflow-y: auto` is what scrolls. */
  .of-card-panel { max-width: 100vw; border-radius: 0; -webkit-overflow-scrolling: touch; }
  .of-card-panel > .pad {
    padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
  }

  /* Modals get the same treatment once they are taller than the screen. */
  .ob-modal { width: min(100%, 100vw); max-height: 92vh; }
  .ob-modal .bd { max-height: 68vh; overflow-y: auto; }

  /* The needs-attention panel is sticky on desktop; on a phone it is just another block. */
  .et-attention { position: static; max-height: none; }
  .et-attention > #triage { max-height: none; }
}

/* =============================================================================
   Moving a card by touch.

   Keyed on `pointer: coarse`, NOT on width: a touchscreen laptop or a tablet in landscape
   is wide enough to keep the desktop rail but still cannot perform an HTML5 drag. The
   button appears wherever dragging won't work, which is the actual condition.
   ============================================================================= */

.of-card-move { display: none; }

@media (pointer: coarse) {
  .of-board-card { position: relative; }
  .of-card-move {
    display: grid; place-items: center;
    position: absolute; top: 6px; right: 6px;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--ob-line); background: var(--ob-card); color: var(--ob-faint);
    cursor: pointer; font-size: 14px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .of-card-move:active { background: var(--ob-line-soft); color: var(--acc-deep, var(--acc)); }
  /* Keep the title clear of the button rather than letting text run under it. */
  .of-board-card .tt { padding-right: 40px; }
}

.et-movesheet { position: fixed; inset: 0; z-index: 90; }
.et-movesheet .scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); }
.et-movesheet .panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ob-card); border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(15, 23, 42, .18);
  max-height: 84vh; overflow-y: auto;
  animation: etSheetUp .18s ease-out;
}
@keyframes etSheetUp { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
.et-movesheet .grab { width: 38px; height: 4px; border-radius: 3px; background: var(--ob-line); margin: 0 auto 14px; }
.et-movesheet .ttl {
  font-size: 15px; font-weight: 700; color: var(--ob-ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.et-movesheet .sub {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ob-faint); margin: 14px 0 4px;
}
.et-movesheet .opts { display: flex; flex-direction: column; }
.et-movesheet .opt {
  display: flex; align-items: center; gap: 11px;
  min-height: 52px; padding: 0 6px; width: 100%;
  border: none; border-bottom: 1px solid var(--ob-line); background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ob-ink);
  text-align: left; cursor: pointer;
}
.et-movesheet .opt:last-child { border-bottom: none; }
.et-movesheet .opt:active { background: var(--ob-line-soft); }
.et-movesheet .opt .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.et-movesheet .opt .nm { flex: 1; min-width: 0; }
.et-movesheet .opt .hint { font-size: 11px; font-weight: 600; color: var(--ob-faint); flex: none; }
.et-movesheet .opt.cur { opacity: .55; }
.et-movesheet .cancel {
  width: 100%; min-height: 48px; margin-top: 12px;
  border: 1px solid var(--ob-line); border-radius: 11px; background: none;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ob-muted); cursor: pointer;
}

/* Very small phones (SE-class, 320–360px): the tab labels are the first thing to give. */
@media (max-width: 360px) {
  .et-mtabs > a span, .et-mtabs > button span { display: none; }
  .et-mtabs i { font-size: 21px; }
  .of-board-list { flex-basis: 90vw; width: 90vw; }
}