/* Schedule, the Thread, and the office on a phone (docs/UI-CLEAN.md O15, O17, O32-O34). Loads after styles.css. */

/* ---------- Schedule ---------- */
.icon-only { width: 32px; padding: 0; justify-content: center; }
.page-head .sub.one { max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-stop, .import-panel > .panel { margin-bottom: 16px; }
.add-stop .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.import-panel { margin-bottom: 16px; }
/* a menu opened from a table row is placed on the screen, so the table's scroll box can't cut it off */
.menu.fixed { position: fixed; left: auto; }
.head-menu .menu { min-width: 260px; }

/* ---------- the Thread: a chat ---------- */

/* ---------- tap targets: a finger needs 44px ---------- */
@media (max-width: 900px), (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  input[type="checkbox"]::before { width: 18px; height: 18px; }
  input[type="radio"]::before { width: 10px; height: 10px; }
  input[type="checkbox"]:indeterminate::before { width: 12px; height: 2px; }
  .check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; align-items: center; }
  .check input { width: 24px; height: 24px; }
  /* a link in a table is 44px tall to touch without changing how the row looks */
  .t td a:not(.btn) { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* a bare box in a table cell: drawn 24px, hit 44px (the pseudo-element below is part of the input to a finger), and the row doesn't grow */
  .t td.pick input, .prefs td.c input, .prefs input[type="radio"] { position: relative; }
  .t td.pick input::after, .prefs td.c input::after, .prefs input[type="radio"]::after { content: ""; position: absolute; inset: -10px; }
  .icon-only { width: 40px; }
}

/* ---------- a fade where a row of tabs scrolls on ---------- */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes edge-fade {
  0% { --fade-l: 0px; --fade-r: 28px; }
  8%, 92% { --fade-l: 28px; --fade-r: 28px; }
  100% { --fade-l: 28px; --fade-r: 0px; }
}
@supports (animation-timeline: scroll()) {
  /* .utabs and the Settings nav scroll too when they don't fit (a cut-off "Thei" with nothing to say there's more) */
  .tablist, .topbar-tabs, .seg, .utabs, .settings-nav {
    animation: edge-fade linear both; animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  }
}

/* ---------- the office on a phone: the main pages in a bar at the bottom (on a screen, not on paper) ---------- */
@media screen and (max-width: 900px) {
  :root { --bar-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 35; border-bottom: 0; border-top: 1px solid var(--hair);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
  /* a phone held sideways is 390px tall: More scrolls rather than running off the top */
  .nav-more-list { top: auto; bottom: calc(100% + 6px); max-height: calc(100vh - var(--bar-h) - 12px); overflow-y: auto; }
  /* the alerts list fits the screen (it hung 34px off the left edge), and a toast sits above the bar */
  .bell-menu { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; }
  .toast { bottom: calc(var(--bar-h) + 12px); max-width: calc(100vw - 24px); }
  .main { padding-bottom: calc(var(--bar-h) + 24px); }
  /* the top bar: the page's name, the assistant and the account; the bell and What's new live in the bar and More */
  .topbar-icons > a.round { display: none; }
  .notes { bottom: calc(var(--bar-h) + 12px); }
}

/* ---------- tables become cards under 720px (on a screen: a printed Letter page is 720px wide too) ---------- */
@media screen and (max-width: 720px) {
  .table-wrap:has(> table.t[data-cards]) { border: 0; background: none; overflow: visible; margin: 0; }
  .table-wrap > table.t[data-cards] { min-width: 0; }
  table.t[data-cards], table.t[data-cards] tbody { display: block; }
  table.t[data-cards] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t[data-cards] tbody { display: grid; gap: 0; }
  /* a row is a block of lines under a hairline: no card, no box (docs/DESIGN-SYSTEM.md 5) */
  table.t[data-cards] tr { display: flex; flex-direction: column; padding: 6px 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; }
  table.t[data-cards] tr.group { padding: 0; border: 0; background: none; }
  table.t[data-cards] tr.group { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0; border-radius: var(--r-sm); overflow: hidden; }
  table.t[data-cards] tr.group td { display: block; height: auto; padding: 8px 10px; }
  table.t[data-cards] tr.group td:first-child { flex: 1; min-width: 0; }
  /* a group's heading line is not a card: no column names on it, and its empty cells take no room (Who owes) */
  table.t[data-cards] tr.group td::before { content: none; }
  table.t[data-cards] tr.group td:empty { display: none; }
  /* height: auto: .t td's 44px is a minimum in a table but a cap in a card, and two-line text spilled onto the next row */
  table.t[data-cards] td { display: grid; grid-template-columns: minmax(78px, 32%) minmax(0, 1fr); gap: 4px 12px; align-items: baseline;
    height: auto; padding: 6px 8px; border-bottom: 0; border: 0; text-align: left; }
  /* a cell holding a list of things gets the whole width, its name above it */
  table.t[data-cards] td:has(.login-line, ul, form) { grid-template-columns: minmax(0, 1fr); }
  /* every part of a cell sits beside its name (a second part, like the line under a pill, wrapped under the name and was cut off) */
  table.t[data-cards] td:not(:has(.login-line, ul, form)) > * { grid-column: 2; }
  /* a cell that stays on one line in a table (a date, a keep-for time) wraps in a card: a long one pushed the page sideways (State rules) */
  table.t[data-cards] td.nowrap { white-space: normal; }
  table.t[data-cards] td::before { content: attr(data-label); font-size: var(--fs-meta); font-weight: var(--w-medium); color: var(--ink-3); }
  table.t[data-cards] td[data-title] { order: -1; display: block; padding-top: 10px; font-size: 16px; }
  table.t[data-cards] td[data-title]::before { content: none; }
  table.t[data-cards] td:not([data-label]) { display: block; }
  table.t[data-cards] td:not([data-label])::before { content: none; }
  table.t[data-cards] td:empty { display: none; }
  table.t[data-cards] td.num, table.t[data-cards] td.right { text-align: left; }
  table.t[data-cards] .sub.one { max-width: none; }
  table.t[data-cards] td.act { width: auto; white-space: normal; padding-left: 12px; }
  table.t[data-cards] tr.dim { opacity: 0.75; }
}