/* Life OS — shell bridge for the «مِحْوَر» design system (W0).
   lifeos.css (design r51) is loaded VERBATIM before this file and stays the only source of tokens and
   components. This file only:
   1. self-hosts the two OFL fonts the tokens name;
   2. places the app in the page (sticky side, fixed toast/dialogs, page head, flows, touch targets);
   3. maps the earlier token names and classes onto the design tokens, so a family screen that has not
      moved to the design classes yet still renders in the same palette, theme and type — never a second
      design. Legacy mappings use :where() (zero specificity) so lifeos.css and every family sheet win. */

/* ---------- 1. Fonts (self-hosted, OFL 1.1 — see assets/fonts/*/OFL.txt and SOURCE.json) ---------- */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2") format("woff2"); }
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/markazi-text/MarkaziText-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/markazi-text/MarkaziText-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/markazi-text/MarkaziText-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 2. Earlier token names → design tokens (resolved per theme on the root) ---------- */
.lo {
  --paper: var(--surface); --fg: var(--ink); --muted: var(--ink-3); --soft: var(--accent-soft);
  --accent-strong: var(--accent-soft-ink); --on: var(--on-accent);
  --surface-subtle: var(--surface-2); --surface-raised: var(--surface); --sidebar-bg: var(--surface);
  --focus-ring: var(--accent); --warn-bg: var(--warn-soft); --bad: var(--danger-ink); --bad-bg: var(--danger-soft); --warm: var(--warn);
  --radius: 14px; --radius-sm: 10px; --space: 24px;
  --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-float: var(--shadow-pop);
}

/* ---------- 3. The app in the page ---------- */
html.lo { min-height: 100%; scroll-padding-block: 24px; }
html.lo body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-ui); text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
.lo .shell { min-height: 100vh; min-height: 100dvh; }
.lo .side .brand { color: inherit; }
.lo .navlink .ic { flex: none; }
@media (min-width: 1024px) {
  .lo .side { position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.lo .main { min-height: 100vh; }
.lo .content { outline: none; }
.lo .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 70; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 9px; }
.lo .skip-link:focus { top: 12px; }

/* Page head: the route's h1 always exists; a page with its own hero keeps it for assistive tech only. */
.lo .pagehead .ph-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.lo .pagehead .h1 { overflow-wrap: anywhere; }
.lo .pagehead #page-back:empty, .lo .pagehead #page-sub:empty, .lo .pagehead #page-actions:empty { display: none; }
.lo .pagehead[data-head="sr"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lo .crumbs a, .lo .crumbs button { color: var(--accent-soft-ink); display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.lo[data-theme="dark"] .crumbs a, .lo[data-theme="dark"] .crumbs button { color: var(--accent); }
.lo .view { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Overlays the boards draw inside a frame become fixed to the viewport in the app. */
.lo #toast.toast { position: fixed; bottom: 24px; inset-inline-start: 24px; max-width: min(560px, calc(100vw - 48px)); }
.lo .scrim[data-layer] { position: fixed; z-index: 50; overflow-y: auto; }
.lo .scrim[data-layer] .dialog { max-height: calc(100dvh - 80px); }
.lo .drawer[data-layer] { position: fixed; }
@media (max-width: 640px) {
  .lo #toast.toast { bottom: 16px; inset-inline: 16px; max-width: none; }
  .lo .scrim[data-layer] { padding: 16px 12px; }
}

/* Full-page flows without the shell (B27 onboarding, browser pairing). */
html.lo body[data-flow] .shell { display: none; }
.lo .flow { max-width: 960px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 640px) { .lo .flow { padding: 24px 16px 48px; gap: 22px; } }
.lo .flow .dots { display: flex; gap: 6px; }
.lo .flow .dots span { height: 4px; flex: 1; border-radius: 999px; background: var(--line-2); }

/* Touch: 44px targets on coarse pointers at phone widths (the design's controls are 32–40px on desktop). */
@media (max-width: 640px) and (pointer: coarse) {
  .lo .navlink, .lo .navmore, .lo .btn, .lo .seg button, .lo .seg a, .lo .tabs a, .lo .tabs button, .lo .chip-btn, .lo .menu button, .lo .menu a,
  .lo :where(.button, .tab, .list-row, .chip-x, .back-link) { min-height: 44px; }
  .lo .btn-icon { min-width: 44px; }
  .lo :where(.input, .select, .textarea, input, select, textarea) { font-size: 16px; }
}

/* A save-state line may carry a full sentence (the controllers' honest wording). */
.lo .save-state.state, .lo .state.wrap { white-space: normal; }
.lo .note > .grow { min-width: 0; }
.lo .note ul.issues { margin-top: 6px; padding-inline-start: 18px; list-style: disc; }
.lo .note strong { font-weight: 600; }

/* ---------- 4. Earlier classes → design look (zero specificity: never over lifeos.css or a family sheet) ---------- */
:where(.lo) :where(h2:not([class]), h3:not([class]), h4:not([class])) { font-weight: 600; line-height: 1.4; }
:where(.lo) :where(.main h2:not([class])) { font-size: 18px; }
:where(.lo) :where(.main h3:not([class])) { font-size: 15.5px; }
:where(.lo) :where(.main h4:not([class])) { font-size: 13.5px; color: var(--ink-2); }
:where(.lo) :where(.main p:not([class])) { margin-block: 0; }
/* Bare links keep a link's look (lifeos.css resets .lo a to plain text; the design uses .link). */
.lo a:not([class]) { color: var(--accent-soft-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.lo[data-theme="dark"] a:not([class]) { color: var(--accent); }

:where(.lo) :where(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="url"], input[type="email"], input[type="password"], select, textarea) {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.5; }
:where(.lo) :where(textarea) { min-height: 96px; resize: vertical; line-height: 1.6; }
:where(.lo) :where(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:where(.lo) :where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
:where(.lo) :where(input[type="file"]) { max-width: 100%; font-size: 13.5px; }
:where(.lo) :where(input, select, textarea)::placeholder { color: var(--ink-3); }

/* Earlier button classes: one step above lifeos.css's `.lo button` reset (0,1,1) so they keep a button's look;
   a family sheet's own `.x .button` rule (equal specificity, loaded later) still wins. */
.lo .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 14.5px; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease); }
.lo .button:hover:not(:disabled) { background: var(--surface-2); }
.lo .button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lo .button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.lo .button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.lo .button.danger { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.lo .button:disabled, .lo .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

:where(.lo) :where(.main .tag) { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; max-width: 100%; }
:where(.lo) :where(.main .tag.warn) { background: var(--warn-soft); color: var(--warn-ink); }
:where(.lo) :where(.main .tag.bad) { background: var(--danger-soft); color: var(--danger-ink); }
:where(.lo) :where(.main .tag.plain) { background: transparent; border: 1px solid var(--line-2); }

:where(.lo) :where(.notice) { display: block; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-ink); font-size: 14px; line-height: 1.55; }
:where(.lo) :where(.error-box) { display: block; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); color: var(--danger-ink); font-size: 14px; line-height: 1.55; }
:where(.lo) :where(.notice.note, .error-box.note) { display: flex; }

:where(.lo) :where(.two) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
:where(.lo) :where(.settings-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
:where(.lo) :where(.inline) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
:where(.lo) :where(.form) { display: grid; gap: 16px; }
:where(.lo) :where(.form label, label.field) { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-width: 0; }
:where(.lo) :where(.field-row) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:where(.lo) :where(.check) { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); font-size: 14px; }
.lo .list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: start; cursor: pointer; border-radius: 0; }
.lo .list-row:hover { background: var(--surface-2); }
.lo .list-row[aria-current="true"] { background: var(--accent-soft); }
.lo .tabs :is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]) { color: var(--ink); border-bottom-color: var(--accent); }
:where(.lo) :where(.save-state[data-state="saved"]) { color: var(--ok-ink); }
:where(.lo) :where(.save-state[data-state="saving"], .save-state[data-state="dirty"], .save-state[data-state="unknown"], .save-state[data-state="scope_changed"]) { color: var(--warn-ink); }
:where(.lo) :where(.save-state[data-state="failed"], .save-state[data-state="conflict"]) { color: var(--danger-ink); }
:where(.lo) :where(.history-item) { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
:where(.lo) :where(.diff) { margin: 4px 0 0; padding: 0; list-style: none; }
:where(.lo) :where(.diff del) { background: var(--danger-soft); color: var(--danger-ink); border-radius: 3px; padding: 0 2px; }
:where(.lo) :where(.diff ins) { background: var(--ok-soft); color: var(--ok-ink); text-decoration: none; border-radius: 3px; padding: 0 2px; }
:where(.lo) :where(.compare) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); margin: 8px 0; }
:where(.lo) :where(.compare > div) { padding: 12px 14px; min-width: 0; }
:where(.lo) :where(.compare > div + div) { border-inline-start: 1px solid var(--line); }
:where(.lo) :where(.clip) { max-height: 140px; overflow: auto; white-space: pre-wrap; font-size: 13px; }
:where(.lo) :where(.metric) { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.lo :is(.entry-card, .note-card, .file-card, .work-card) { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.lo :is(.entry-card, .note-card)[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.lo :is(.work-card, .task-row, .file-card).is-archived { border-style: dashed; opacity: .85; }
:where(.lo) :where(.empty-state) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink-2); }
:where(.lo) :where(.plain-list) { display: grid; gap: 6px; }
:where(.lo) :where(details.fold) { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
:where(.lo) :where(details.fold > summary) { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.lo .back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--accent-soft-ink); }
.lo .chip-x { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 999px; color: var(--ink-3); }

/* Shared form and result layout from the earlier sheet, still emitted by typed-form.js (W0) and family pages
   that have not moved to design classes yet (form-grid, typed-form, ms-*, result*, upload*). Design tokens only. */
:where(.lo) :where(.typed-form) { display: grid; gap: 16px; }
:where(.lo) :where(.form-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
:where(.lo) :where(.form-grid .field-title, .form-grid .field-desiredResult, .form-grid .field-successCriterion, .form-grid .field-outcome,
  .form-grid .field-detail-description, .form-grid .field-detail-context, .form-grid .field-detail-rolesText, .form-grid .field-detail-milestones) { grid-column: 1 / -1; }
:where(.lo) :where(.typed-form .field, .form-grid .field) { display: grid; gap: 6px; min-width: 0; }
:where(.lo) :where(.field-label) { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
:where(.lo) :where(.req) { color: var(--danger-ink); }
:where(.lo) :where(.field-hint) { font-size: 12.5px; color: var(--ink-3); }
:where(.lo) :where(.field-error) { font-size: 12.5px; color: var(--danger-ink); }
:where(.lo) :where(.field-error:empty, .ops-box:empty, .page-msg:empty, .count-line:empty, .filter-chips:empty, .context-chips:empty, .upload-status:empty) { display: none; }
:where(.lo) :where([aria-invalid="true"]) { border-color: var(--danger); }
:where(.lo) :where(.input-title) { font-size: 17px; }
:where(.lo) :where(.form-actions) { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
:where(.lo) :where(.ms-editor, .ms-list, .ms-view) { display: grid; gap: 10px; min-width: 0; }
:where(.lo) :where(.ms-row) { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
:where(.lo) :where(.ms-fields) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; align-items: end; }
:where(.lo) :where(.ms-fields .ms-title) { grid-column: 1 / -1; }
:where(.lo) :where(.ms-actions) { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.lo) :where(.prose) { white-space: pre-wrap; overflow-wrap: anywhere; }
:where(.lo) :where(.op-line) { font-size: 12.5px; color: var(--warn-ink); }
:where(.lo) :where(.result) { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
:where(.lo) :where(.result-head) { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
:where(.lo) :where(.result-label, .result-line, .result-note) { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
:where(.lo) :where(.result-value) { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
:where(.lo) :where(.is-unmeasured .result-value) { font-size: 15px; font-weight: 500; color: var(--ink-3); }
:where(.lo) :where(.warn-text) { color: var(--warn-ink); }
:where(.lo) :where(.upload) { display: grid; gap: 8px; }
:where(.lo) :where(.upload-row) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:where(.lo) :where(.upload progress) { width: 100%; height: 6px; accent-color: var(--accent); }
:where(.lo) :where(.saved-line) { color: var(--ok-ink); }
:where(.lo) :where(.visually-hidden) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Stacked panels inside a plain wrapper (earlier pages had a bottom margin on .panel). */
:where(.lo) :where(div:not([class]) > * + .panel) { margin-top: 16px; }
:where(.lo) :where(.table-wrap table:not(.tbl)) { width: 100%; border-collapse: collapse; font-size: 14px; }
:where(.lo) :where(.table-wrap table:not(.tbl) th) { font-weight: 600; color: var(--ink-3); font-size: 12.5px; text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
:where(.lo) :where(.table-wrap table:not(.tbl) td) { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* A one-span meter from the earlier screens (lifeos .meter expects .track/.fill). */
.lo .meter:has(> span:only-child) { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.lo .meter > span:only-child { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* «details.menu» / «details.picker» containers of the earlier work screens are not the design's .menu/.picker panels. */
.lo details.menu, .lo details.picker { display: inline-block; position: relative; min-width: 0; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.lo details.picker[open] { display: block; flex-basis: 100%; }
:where(.lo) :where(.menu-items) { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 40; display: grid; gap: 2px; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); }

@media (max-width: 1023px) {
  :where(.lo) :where(.two, .settings-grid) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :where(.lo) :where(.field-row, .compare, .form-grid) { grid-template-columns: minmax(0, 1fr); }
  :where(.lo) :where(.compare > div + div) { border-inline-start: 0; border-top: 1px solid var(--line); }
}