/* ============================================================================ MISHWAR — Logistics Dispatch — app.css Design system + every component. Implements SPEC.md §5.1 §5.2 §5.3 §5.6. Rules this file obeys: - Only the classes in §5.6 exist. Nothing else. - Every colour is declared in bare :root first, then overridden for dark. - Light is the default. prefers-color-scheme is deliberately NOT consulted; the theme comes only from . - Mobile first, 360x640. 44px minimum touch target, no exceptions. - RTL comes from logical properties. The only [dir="rtl"] rule in the file is the picker chevron glyph, which genuinely has to point the other way. - No @import, no webfont, no external URL of any kind (CSP default-src 'self'). ========================================================================== */ /* ---------------------------------------------------------------- 1. Tokens */ :root { /* MISHWAR — light, the default */ --c-bg: #F3F7F5; --c-surface: #FFFFFF; --c-surface-2: #E8F3F0; --c-ink: #0E211D; --c-muted: #5E7570; --c-line: #DBE8E4; --c-accent: #0C6F5F; --c-accent-ink: #FFFFFF; --c-accent-soft: #E1F0EC; --c-warn: #B04A1E; --c-warn-soft: #FBEEDF; --c-danger: #A32217; --c-danger-soft: #FBE9E7; --s-open-bg: #FBEEDF; --s-open-fg: #96551A; --s-taken-bg: #E1F0EC; --s-taken-fg: #0C6F5F; --s-done-bg: #E7EEF9; --s-done-fg: #2C4E8A; --s-cancel-bg: #EFEFEF; --s-cancel-fg: #6B6B6B; --shadow-1: 0 1px 2px rgba(11, 40, 36, .05), 0 6px 16px rgba(11, 40, 36, .05); /* supporting colours — also declared here first, overridden below */ --c-backdrop: rgba(11, 40, 36, .48); --c-focus: #0C6F5F; --c-skeleton: #DBE8E4; /* Shared geometry — identical in both themes */ --r-card: 16px; --r-input: 12px; --r-pill: 999px; --r-glyph: 10px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --tap: 44px; --appbar-h: 56px; --nav-h: 56px; --safe-b: env(safe-area-inset-bottom, 0px); --nav-total: calc(var(--nav-h) + var(--safe-b)); --col: 640px; --font: "Segoe UI", system-ui, -apple-system, sans-serif; color-scheme: light; } :root[data-theme="dark"] { /* MISHWAR DARK — Waypoint graphite + signal blue */ --c-bg: #0E1216; --c-surface: #161B21; --c-surface-2: #1B2229; --c-ink: #E6EBF0; --c-muted: #8B96A3; --c-line: #232A32; --c-accent: #5AA6E8; --c-accent-ink: #08121C; --c-accent-soft: #152836; --c-warn: #F0B45E; --c-warn-soft: #3A2A0E; --c-danger: #F08A7E; --c-danger-soft: #3A211D; --s-open-bg: #3A2A0E; --s-open-fg: #F0B45E; --s-taken-bg: #152836; --s-taken-fg: #7FBFF0; --s-done-bg: #12301F; --s-done-fg: #68C88C; --s-cancel-bg: #1B2229; --s-cancel-fg: #7C8794; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --c-backdrop: rgba(0, 0, 0, .62); --c-focus: #5AA6E8; --c-skeleton: #232A32; color-scheme: dark; } /* ------------------------------------------------------------- 2. Baseline */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font); font-size: 15px; line-height: 1.5; /* `anywhere`, not `break-word`: it is the only one that also shrinks the min-content size, so an unbroken 60-character filename or university name cannot push a flex or grid item wider than the 360px screen. */ overflow-wrap: anywhere; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { max-inline-size: 100%; block-size: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Visible focus on every interactive element. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } @keyframes mw-spin { to { transform: rotate(360deg); } } @keyframes mw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* --------------------------------------------------------------- 3. Layout */ .app { display: flex; flex-direction: column; min-block-size: 100dvh; background: var(--c-bg); } .appbar { position: sticky; inset-block-start: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-3); inline-size: 100%; max-inline-size: var(--col); margin-inline: auto; min-block-size: var(--appbar-h); max-block-size: 40dvh; padding-inline: var(--sp-4); background: var(--c-surface); border-block-end: 1px solid var(--c-line); } .appbar__brand { margin-inline-end: auto; min-inline-size: 0; font-size: 17px; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__glyph { flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--r-glyph); background: var(--c-accent); color: var(--c-accent-ink); font-size: 14px; font-weight: 800; } .appbar__who { min-inline-size: 0; max-inline-size: 40%; color: var(--c-muted); font-size: 13px; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__actions { flex: none; display: flex; align-items: center; gap: var(--sp-1); } .view { flex: 1 1 auto; inline-size: 100%; max-inline-size: var(--col); margin-inline: auto; padding-inline: var(--sp-4); padding-block-end: calc(var(--nav-total) + var(--sp-4)); } .view--pad { padding-block-start: var(--sp-4); } .bottomnav { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 45; display: flex; justify-content: center; background: var(--c-surface); border-block-start: 1px solid var(--c-line); padding-block-end: var(--safe-b); } .bottomnav__item { position: relative; flex: 1 1 0; max-inline-size: 160px; min-inline-size: 0; min-block-size: var(--nav-h); display: grid; place-items: center; align-content: center; gap: 2px; padding-block: var(--sp-2); padding-inline: var(--sp-1); border: 0; background: none; color: var(--c-muted); font-size: 11px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .bottomnav__item--on { color: var(--c-accent); font-weight: 700; } .actionbar { position: sticky; inset-block-end: var(--nav-total); z-index: 30; display: flex; align-items: center; gap: var(--sp-2); max-block-size: 96px; /* It is the last child of .view, so it eats .view's bottom clearance: at the very end of the scroll it then rests exactly on top of .bottomnav instead of dropping into the padding and leaving a gap. */ margin-inline: calc(var(--sp-4) * -1); margin-block-end: calc((var(--nav-total) + var(--sp-4)) * -1); padding-inline: var(--sp-4); padding-block: var(--sp-2); background: var(--c-bg); border-block-start: 1px solid var(--c-line); } .actionbar > .btn { flex: 1 1 auto; } /* ------------------------------------------------------------ 4. Structure */ .card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--sp-4); } .card--flat { background: var(--c-surface-2); box-shadow: none; border-color: transparent; } .card--dim { background: var(--c-surface-2); box-shadow: none; color: var(--c-muted); } .card--dim .task__name { color: var(--c-muted); text-decoration: line-through; } .stack { display: flex; flex-direction: column; gap: var(--sp-3); min-inline-size: 0; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-inline-size: 0; } .split { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-inline-size: 0; } /* Flex and grid items default to min-*-size:auto and refuse to shrink below their content. Long names, universities and filenames arrive from the server, so every row that lays children out gets the guard once. */ .stack > *, .cluster > *, .split > *, .task > *, .task__meta > *, .list__row > *, .log__item > *, .actionbar > * { min-inline-size: 0; } .section-title { color: var(--c-muted); font-size: 13px; font-weight: 700; text-align: start; } .muted { color: var(--c-muted); } .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; unicode-bidi: isolate; } .empty { padding-block: var(--sp-7); padding-inline: var(--sp-4); color: var(--c-muted); font-size: 14px; text-align: center; text-wrap: balance; } /* ----------------------------------------------------------------- 5. Task */ /* Same box metrics as .card, so `class="card task"` produces one identical result whichever rule wins the cascade. */ .task { display: grid; gap: var(--sp-2); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--sp-4); min-inline-size: 0; } .card--dim.task, .card--flat.task { box-shadow: none; } .task__name { font-size: 16px; font-weight: 700; line-height: 1.3; text-align: start; } .task__sub { color: var(--c-muted); font-size: 14px; text-align: start; } .task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); color: var(--c-muted); font-size: 13px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .task__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-1); } .task__actions > .btn { flex: 1 1 auto; } .chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 24px; padding-block: 2px; padding-inline: 10px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-muted); font-size: 12px; font-weight: 600; white-space: nowrap; } .chip--open { background: var(--s-open-bg); color: var(--s-open-fg); } .chip--taken { background: var(--s-taken-bg); color: var(--s-taken-fg); } .chip--done { background: var(--s-done-bg); color: var(--s-done-fg); } .chip--cancel { background: var(--s-cancel-bg); color: var(--s-cancel-fg); } .chip--warn { background: var(--c-warn-soft); color: var(--c-warn); } /* ----------------------------------------------------------------- 6. Tabs */ .tabs { display: flex; gap: var(--sp-1); overflow-x: auto; overscroll-behavior-inline: contain; border-block-end: 1px solid var(--c-line); margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); } /* The strip scrolls by thumb; a visible bar would eat a row of height and render as a wide grey slab under the tabs in dark mode. */ .tabs, .seg { scrollbar-width: none; } .tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap); padding-inline: var(--sp-3); border: 0; border-block-end: 2px solid transparent; background: none; color: var(--c-muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; } .tab--on { color: var(--c-accent); border-block-end-color: var(--c-accent); } .tab__count { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 20px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .tab--on .tab__count { background: var(--c-accent-soft); color: var(--c-accent); } /* ----------------------------------------------------------------- 7. Form */ .field { display: grid; gap: 6px; min-inline-size: 0; margin-block-end: var(--sp-4); } .label { color: var(--c-ink); font-size: 13px; font-weight: 700; text-align: start; } .input, .textarea, .select { inline-size: 100%; min-inline-size: 0; min-block-size: var(--tap); padding-block: 10px; padding-inline: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-input); background: var(--c-surface); color: var(--c-ink); font-size: 16px; /* 16px stops iOS zooming the page on focus */ text-align: start; } .input::placeholder, .textarea::placeholder { color: var(--c-muted); opacity: 1; } .input:focus, .textarea:focus, .select:focus, .searchbar:focus-within { border-color: var(--c-accent); } .textarea { min-block-size: 96px; resize: vertical; line-height: 1.5; } /* Native appearance is kept on purpose: the browser's own arrow already mirrors itself in RTL and needs no image. */ .select { padding-inline-end: var(--sp-2); } .input--err { border-color: var(--c-danger); background: var(--c-danger-soft); } .checkbox { display: flex; align-items: center; gap: 10px; min-block-size: var(--tap); font-size: 15px; text-align: start; cursor: pointer; } .checkbox input { flex: none; inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--c-accent); } .help { color: var(--c-muted); font-size: 12px; text-align: start; } .error { color: var(--c-danger); font-size: 13px; font-weight: 600; text-align: start; } .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; } .two > .field { margin-block-end: 0; } .searchbar { display: flex; align-items: center; gap: var(--sp-2); inline-size: 100%; min-inline-size: 0; min-block-size: var(--tap); padding-inline: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-input); background: var(--c-surface); color: var(--c-ink); font-size: 16px; text-align: start; } .searchbar input { flex: 1 1 auto; min-inline-size: 0; min-block-size: 42px; padding: 0; border: 0; background: none; font-size: 16px; } .searchbar input:focus { outline: none; } .daterange { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); align-items: center; } /* Sheet triggers: a full-width control that opens a searchable sheet. */ .countrypicker, .typepicker { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); inline-size: 100%; min-inline-size: 0; min-block-size: var(--tap); padding-block: 10px; padding-inline: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-input); background: var(--c-surface); color: var(--c-ink); font-size: 16px; text-align: start; cursor: pointer; } .countrypicker::after, .typepicker::after { content: "\203A"; /* › */ flex: none; color: var(--c-muted); font-size: 20px; line-height: 1; } .dashed { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); inline-size: 100%; min-block-size: var(--tap); padding: var(--sp-4); border: 1px dashed var(--c-line); border-radius: var(--r-input); background: none; color: var(--c-muted); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; } /* --------------------------------------------------------------- 8. Button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-block-size: var(--tap); min-inline-size: var(--tap); padding-block: 8px; padding-inline: var(--sp-4); border: 1px solid transparent; border-radius: var(--r-input); background: var(--c-surface-2); color: var(--c-ink); font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; user-select: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn--primary { background: var(--c-accent); color: var(--c-accent-ink); } .btn--ghost { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); } .btn--quiet { background: none; border-color: transparent; color: var(--c-accent); font-weight: 600; } .btn--danger { background: var(--c-danger-soft); color: var(--c-danger); } .btn--wide { inline-size: 100%; } .btn--sm { padding-inline: 10px; font-size: 13px; } .spinner { flex: none; display: inline-block; inline-size: 16px; block-size: 16px; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; animation: mw-spin .7s linear infinite; vertical-align: -2px; } /* ------------------------------------------------------------- 9. Feedback */ .toast { position: fixed; z-index: 70; inset-inline: var(--sp-4); inset-block-end: calc(var(--nav-total) + var(--sp-3)); max-inline-size: calc(var(--col) - var(--sp-7)); margin-inline: auto; padding-block: var(--sp-3); padding-inline: var(--sp-4); border-radius: var(--r-input); background: var(--c-ink); color: var(--c-bg); font-size: 14px; font-weight: 600; text-align: start; box-shadow: var(--shadow-1); } .toast--err { background: var(--c-danger); color: var(--c-surface); } .banner { padding-block: var(--sp-3); padding-inline: var(--sp-3); border: 1px solid var(--c-line); border-inline-start: 4px solid var(--c-accent); border-radius: var(--r-input); background: var(--c-accent-soft); color: var(--c-ink); font-size: 14px; text-align: start; } .banner--warn { background: var(--c-warn-soft); border-color: var(--c-warn-soft); border-inline-start-color: var(--c-warn); } .banner--err { background: var(--c-danger-soft); border-color: var(--c-danger-soft); border-inline-start-color: var(--c-danger); } .backdrop { position: fixed; inset: 0; z-index: 50; border: 0; padding: 0; background: var(--c-backdrop); } .sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; } .sheet__panel { inline-size: 100%; max-inline-size: var(--col); max-block-size: 85dvh; overflow-y: auto; overscroll-behavior: contain; border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); background: var(--c-surface); border-block-start: 1px solid var(--c-line); padding-inline: var(--sp-4); padding-block: var(--sp-4) calc(var(--sp-4) + var(--safe-b)); box-shadow: var(--shadow-1); } /* ---------------------------------------------------------------- 10. Files */ .files { display: grid; gap: var(--sp-2); } .file { display: flex; align-items: center; gap: 10px; min-block-size: var(--tap); min-inline-size: 0; padding-block: 6px; padding-inline: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-input); background: var(--c-surface); font-size: 14px; text-align: start; } .file > * { min-inline-size: 0; } /* The filename takes the slack and truncates; without this it is the only flexible child that shrinks and "passport.jpg" breaks across two lines at 360. */ .file > .btn { flex: 1 1 auto; min-inline-size: 0; justify-content: flex-start; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .file > .muted { flex: none; white-space: nowrap; } .file__ext { flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--r-glyph); background: var(--c-accent-soft); color: var(--c-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; } .file__del { flex: none; margin-inline-start: auto; display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border: 0; border-radius: var(--r-input); background: none; color: var(--c-muted); font-size: 18px; line-height: 1; cursor: pointer; } .file__del:hover { color: var(--c-danger); } .progress { inline-size: 100%; block-size: 6px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; } .progress__bar { inline-size: 0; block-size: 100%; border-radius: var(--r-pill); background: var(--c-accent); transition: inline-size .2s ease; } /* -------------------------------------------------------------- 11. Profile */ .avatar { flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent); font-size: 19px; font-weight: 800; text-transform: uppercase; } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .stat { display: grid; gap: 2px; align-content: center; padding-block: var(--sp-3); padding-inline: var(--sp-2); border-radius: var(--r-input); background: var(--c-surface-2); color: var(--c-ink); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: center; } .stat .muted { font-size: 12px; font-weight: 600; line-height: 1.25; } .list { display: grid; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); overflow: hidden; } .list__row { display: flex; align-items: center; gap: var(--sp-3); min-block-size: var(--tap); min-inline-size: 0; padding-block: 10px; padding-inline: var(--sp-3); color: inherit; font-size: 14px; text-align: start; text-decoration: none; background: none; border: 0; } .list__row + .list__row { border-block-start: 1px solid var(--c-line); } .list__val { margin-inline-start: auto; color: var(--c-muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: end; } .seg { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-pill); background: var(--c-surface-2); max-inline-size: 100%; overflow-x: auto; } .seg__opt { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); padding-inline: var(--sp-4); border: 0; border-radius: var(--r-pill); background: none; color: var(--c-muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; } .seg__opt--on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1); } /* ------------------------------------------------------------------ 12. Log */ .log { display: grid; } .log__item { display: grid; gap: 2px; padding-block: 10px; min-inline-size: 0; font-size: 14px; text-align: start; } .log__item + .log__item { border-block-start: 1px solid var(--c-line); } .log__time { color: var(--c-muted); font-size: 12px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; unicode-bidi: isolate; } .badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--c-danger); color: var(--c-surface); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .bottomnav__item .badge { position: absolute; inset-block-start: 6px; inset-inline-start: calc(50% + 4px); } .pill { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 24px; padding-inline: 10px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-muted); font-size: 12px; font-weight: 600; white-space: nowrap; } .skeleton { min-block-size: 14px; border-radius: var(--r-input); background: linear-gradient(90deg, var(--c-skeleton) 0%, var(--c-surface) 50%, var(--c-skeleton) 100%); background-size: 200% 100%; animation: mw-shimmer 1.4s linear infinite; color: transparent; user-select: none; } /* ---------------------------------------------------------------- 13. State */ [hidden] { display: none !important; } [disabled], .btn[disabled], [aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } [aria-busy="true"] { cursor: progress; } .btn[aria-busy="true"] { opacity: .8; pointer-events: none; } /* The one direction-aware glyph in the file: a chevron has to point the way the reader is going. Everything else mirrors through logical properties. */ [dir="rtl"] .countrypicker::after, [dir="rtl"] .typepicker::after { content: "\2039"; /* ‹ */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ===================================================================== Driver step checklist (D16–D32) Logical properties only — the tick sits at the inline start in both directions, so nothing here needs an [dir] override. ===================================================================== */ .section-title__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .chip--steps { font-variant-numeric: tabular-nums; } .steps { display: flex; flex-direction: column; } .step { display: flex; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-3); border-block-end: 1px solid var(--c-line); } .step:last-child { border-block-end: 0; } /* 44px minimum — this is tapped one-handed, outdoors, holding a suitcase. */ .step__check { flex: 0 0 auto; inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px; display: grid; place-items: center; border: 2px solid var(--c-line); border-radius: var(--r-glyph); background: transparent; color: transparent; cursor: pointer; } .step__check.is-done { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); } .step__check.is-locked { opacity: .45; cursor: not-allowed; } .step__tick { font-size: 20px; font-weight: 700; line-height: 1; } .step__body { flex: 1 1 auto; min-inline-size: 0; /* or a long note refuses to wrap — see the de/ grid bug */ display: flex; flex-direction: column; gap: var(--sp-1); } .step__label { font-weight: 600; overflow-wrap: anywhere; } .step__sub { font-size: 13px; } .step__note { font-size: 13px; padding: var(--sp-2); border-radius: var(--r-input); background: var(--c-accent-soft); overflow-wrap: anywhere; } .step__actions { flex: 0 0 auto; } .step--done .step__label { color: var(--c-muted); } @media (max-width: 480px) { .step { flex-wrap: wrap; } .step__actions { inline-size: 100%; padding-inline-start: calc(44px + var(--sp-3)); } } .step__logname { font-weight: 600; overflow-wrap: anywhere; }