.kv-mark--img { display: block; } .kv-mark--inline { display: none; }
:root[data-theme="dark"] .kv-mark--img { display: none; } :root[data-theme="dark"] .kv-mark--inline { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-mark--img { display: none; } :root:not([data-theme="light"]) .kv-mark--inline { display: block; } }

/* ---------- Shell additions ---------- */
.finder { display: flex; align-items: center; gap: 8px; height: 38px; width: min(300px, 28vw); padding: 0 6px 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-3); }
[dir="rtl"] .finder { padding: 0 12px 0 6px; }
.finder:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.finder input { flex: 1; min-width: 0; border: 0; background: transparent; height: 36px; font-size: 13.5px; color: var(--ink); outline: none; }
.finder button { height: 28px; padding: 0 10px; border-radius: 7px; border: 0; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 600; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; border: 1px solid transparent; }
.alert--good { background: var(--good-soft); color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.alert--bad { background: var(--critical-soft); color: var(--critical-ink); border-color: color-mix(in srgb, var(--critical) 25%, transparent); }
.alert--warn { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.alert ul { margin: 0; padding-inline-start: 18px; }

/* ---------------------------------------------------------------- the workflow chart
   Who answers to whom, drawn as it is run: a name, the people under it, and one control
   that moves a person from one line to another. Depth is an indent, not a diagram — the
   chart has to stay readable on a phone held in one hand on a site. */
.wf { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.wf__side { display: flex; flex-direction: column; gap: 16px; }
/* The nodes nest in the markup as the people nest on the site, so the tree is drawn from
   real nesting: a rule down the side of each branch and a short elbow onto each name. Logical
   properties do the mirroring, so the tree grows leftwards in Kurdish and Arabic by itself. */
.wf-node .wf-node { margin-inline-start: 17px; padding-inline-start: 20px; border-inline-start: 1px solid var(--border); }
.wf-node .wf-node:last-child { border-inline-start-color: transparent; }
.wf-node__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.wf-node .wf-node > .wf-node__row::before { content: ""; position: absolute; inset-inline-start: -20px; top: 50%;
  width: 20px; border-top: 1px solid var(--border); }
/* the last child's rule stops at its own elbow instead of running past it */
.wf-node .wf-node:last-child > .wf-node__row::after { content: ""; position: absolute; inset-inline-start: -21px;
  top: -8px; height: calc(50% + 8px); border-inline-start: 1px solid var(--border); }
.wf-node__row:hover { background: var(--surface-2); border-color: var(--border); }
.wf-node__row.is-off { opacity: .55; }
/* whoever answers to nobody heads a branch, and is drawn as its head */
.wf__chart > .card__body > .wf-node > .wf-node__row { border-color: var(--border); background: var(--surface-2); }
.wf-node__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wf-node__who > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wf-node__role { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.wf-node__act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-node__pick { display: flex; gap: 6px; }
.wf-node__pick .select { min-width: 150px; }
.wf__road { display: flex; flex-direction: column; gap: 6px; padding-block: 8px; border-top: 1px solid var(--border); }
.wf__road:first-of-type { border-top: 0; }
.wf__steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wf__step { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-3); font-size: 12px; color: var(--ink-2); }
.wf__step.is-named { color: var(--ink); background: var(--accent-soft); }
.wf__arrow { color: var(--ink-3); display: inline-flex; }
[dir="rtl"] .wf__arrow .icon { transform: scaleX(-1); }
/* the same road, shown small on the user form */
.climb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 38px; }
.climb__rung { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-3); font-size: 12.5px; }
.climb__arrow { color: var(--ink-3); display: inline-flex; }
[dir="rtl"] .climb__arrow .icon { transform: scaleX(-1); }
.table--tight td { padding-block: 6px; }
/* the road can wrap to two lines on a narrow screen, so the line explaining it needs air */
.ask-road-note .help { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------- roles
   A role is a thing with a face: the icon it carries appears on the chart, in the people list
   and on the sign-in page, so it is chosen here on a card rather than from a dropdown. */
/* ---------------------------------------------------------------- kinds of work
   The catalogue is a list of things to open, not a form to fill in. Each card says what the
   kind of work is and how much is inside it; changing any of it happens on its own page. */
/* ---------------------------------------------------------------- buildings in setup
   The letter of the building is the thing people know it by — it is the first part of every
   apartment code in it — so the card wears it rather than an icon that says nothing. */
.bldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bldcard { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px;
  color: inherit; text-decoration: none; text-align: start; }
.bldcard__mark { display: grid; place-items: center; inline-size: 52px; block-size: 52px; flex: none;
  border-radius: 14px; background: var(--surface-3); color: var(--ink);
  font-family: var(--font-mono); font-size: 20px; font-weight: 680; letter-spacing: -0.02em; }
.bldcard__body { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; flex: 1 1 auto; }
.bldcard__body > b { font-size: 14.5px; }
.bldcard__facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.bldcard__facts > span { display: inline-flex; align-items: center; gap: 4px; }
.bldcard__state { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.bldcard__state .meter { flex: 1 1 auto; min-inline-size: 60px; }
.bldcard__state > span:not(.meter) { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bldcard__go { color: var(--ink-3); flex: none; }
.bldcard:hover .bldcard__go { color: var(--accent-ink); }
.meter--good .meter__fill { background: var(--good); }
.meter--warning .meter__fill { background: var(--warning); }

.tradegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* .card stacks its children; a card read as one line has to say so itself */
.tradecard { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 14px;
  color: inherit; text-decoration: none; text-align: start; }
.tradecard--off { opacity: .55; }
.tradecard__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
.tradecard__body > b { font-size: 14.5px; }
.tradecard__facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.tradecard__facts > span { display: inline-flex; align-items: center; gap: 4px; }
.tradecard__go { color: var(--ink-3); flex: none; }
.tradecard:hover .tradecard__go { color: var(--accent-ink); }
.trade-ic--lg { inline-size: 46px; block-size: 46px; border-radius: 13px; flex: none; }
.trade-ic--lg .icon { inline-size: 22px; block-size: 22px; }
/* the row that opens under a piece of work when it is being changed */
.itemedit { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }

.rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rolecard { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: inherit; text-decoration: none; transition: border-color .12s, transform .12s; }
.rolecard:hover { border-color: var(--accent); transform: translateY(-1px); }
.rolecard__ic { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none;
  border-radius: 11px; background: var(--surface-3); color: var(--ink-2); }
.rolecard__ic--sm { inline-size: 30px; block-size: 30px; border-radius: 9px; }
.rolecard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rolecard__body small { color: var(--ink-2); font-size: 12.5px; }
.rolecard__facts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.rolecard__facts > span { display: inline-flex; align-items: center; gap: 4px; }
.rolecard__tag { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; color: var(--ink-3); }

.iconpick { display: flex; flex-wrap: wrap; gap: 8px; }
.iconpick__one input { position: absolute; opacity: 0; pointer-events: none; }
.iconpick__one span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 11px; color: var(--ink-2); background: var(--surface-2); }
.iconpick__one input:checked + span { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.iconpick__one input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* every icon there is: a box of its own, so a hundred and more of them do not push the form away */
.iconpick--all { max-block-size: 244px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; }
.iconpick--all .iconpick__one { position: relative; }
.iconpick__one span img { inline-size: 78%; block-size: 78%; object-fit: contain; }
.iconpick__add span { border-style: dashed; color: var(--ink-3); }
.iconpick__add.is-picked span { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.iconpick__add.is-picked .icon { display: none; }

.abilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.abilities__group { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; margin: 0; }
.abilities__group legend { display: inline-flex; align-items: center; gap: 6px; padding-inline: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tick { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; cursor: pointer; }
.tick input { inline-size: 16px; block-size: 16px; flex: none; accent-color: var(--accent); }

/* ---------------------------------------------------------------- the designer
   Dragging needs to say three things without words: this can be picked up, this is moving,
   this is where it would land. */
.wf-node__row[draggable="true"] { cursor: grab; }
.wf-node__row--role { border-color: var(--border); background: var(--surface-2); margin-block: 2px; }
.wf-node__grip { color: var(--ink-3); flex: none; }
.wf-node__row.is-dragging { opacity: .45; cursor: grabbing; }
.wf-node.is-moving > .wf-node__row { outline: 1px dashed var(--ink-3); outline-offset: 2px; }
.wf-node__row.is-over { border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent); }
.dropbar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px;
  padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--ink-3); font-size: 12.5px; }
.dropbar.is-over { border-color: var(--accent); border-style: solid; color: var(--ink); background: var(--accent-soft); }
.plainlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plainlist li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.plainlist li .icon { flex: none; margin-top: 2px; }
@media (max-width: 900px) { .wf { grid-template-columns: 1fr; }
  .wf-node .wf-node { margin-inline-start: 8px; padding-inline-start: 12px; }
  .wf-node .wf-node > .wf-node__row::before { inset-inline-start: -12px; width: 12px; }
  .wf-node .wf-node:last-child > .wf-node__row::after { inset-inline-start: -13px; } }
.sidebar__foot form { margin: 0; }
.nav-item--btn { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: start; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; }
.role-chip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--sb-ink-2); }
:root:lang(ckb) .role-chip, :root:lang(ar) .role-chip { letter-spacing: 0; text-transform: none; }

/* ---------- Tower browser ---------- */
.tower-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tower-tab { display: flex; flex-direction: column; gap: 6px; min-width: 132px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.tower-tab:hover { text-decoration: none; border-color: var(--border-strong); }
.tower-tab.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tower-tab b { font-size: 15px; }
.tower-tab small { font-size: 12px; color: var(--ink-3); }
/* The apartment grid and the floor column beside it must line up row for row — floor 9's bar
   level with floor 9's apartments. Both therefore read their height and spacing from the same
   two numbers, declared here once. */
.ugrid { display: grid; gap: var(--row-gap); --row-h: 62px; --row-gap: 6px; }
.ugrid__row { display: grid; grid-template-columns: 76px repeat(var(--cols), minmax(0, 1fr)); gap: var(--row-gap); align-items: stretch; block-size: var(--row-h); }
.ugrid__floor { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-decoration: none; border-radius: 6px; }
.ugrid__floor:hover { color: var(--accent); text-decoration: underline; }
/* a common-area record still waiting for the office, marked on the floor itself */
.ugrid__floor-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--warning); flex: none; }
.ucell {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  block-size: 100%; padding: 8px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  color: var(--ink); text-decoration: none; isolation: isolate;
}
/* how full the box is, is how much of the work is approved */
.ucell::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--fill, 0%);
  background: color-mix(in srgb, var(--tint, var(--good)) 26%, transparent); z-index: -1; transition: height .2s ease;
}
.ucell::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--tint, var(--good)); opacity: .85; }
.ucell:hover { text-decoration: none; border-color: var(--ink-3); box-shadow: var(--shadow-2); }
.ucell__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ucell__code { font: 600 12px/1 var(--font-mono); }
.ucell__pct { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ucell__type { font-size: 11px; color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Apartment file ---------- */
.apt-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.apt-badge { width: 76px; height: 76px; border-radius: 18px; background: var(--basalt); color: #F5F4F0; display: grid; place-items: center; text-align: center; line-height: 1.05; }
.apt-badge__tower { display: block; font: 700 24px/1 var(--font-latin); }
.apt-badge__unit { display: block; font: 600 11px/1.2 var(--font-mono); color: #E9A845; margin-top: 4px; letter-spacing: 0.04em; }
.apt-title { font-size: 26px; font-weight: 720; letter-spacing: -0.02em; }
:root:lang(ckb) .apt-title, :root:lang(ar) .apt-title { letter-spacing: 0; }
.apt-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-3); font-size: 13.5px; margin-top: 6px; }
.apt-meta span { display: inline-flex; align-items: center; gap: 6px; }
.apt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.apt-kpis > .stat + .stat { border-inline-start: 1px solid var(--border); }
.trade-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); flex: none; }
.trade-ic .icon { width: 18px; height: 18px; }
.trade-name { font-weight: 650; font-size: 14px; line-height: 1.3; }
.trade-status { margin-top: 4px; }
.who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.who__p { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.who__p b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who__p small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.qty-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 6px; color: var(--ink-3); }
.qty-line b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.cost { text-align: end; font-weight: 650; font-variant-numeric: tabular-nums; }
.cost small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.person { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.person b { display: block; font-size: 14px; }
.person small { display: block; color: var(--ink-3); font-size: 12.5px; }
.person .tel { font: 500 12.5px/1.4 var(--font-mono); color: var(--ink-2); direction: ltr; unicode-bidi: isolate; }
.tl-item__row { display: flex; justify-content: space-between; gap: 10px; }
/* The white square holds the code and nothing else. It used to hold the words too, which
   overflowed its fixed 112 px and landed on top of the form underneath. */
.qr-box { inline-size: 104px; block-size: 104px; padding: 7px; border-radius: 12px; background: #fff; border: 1px solid var(--border); flex: none; display: grid; place-items: center; }
.qr-box svg { inline-size: 100%; block-size: 100%; display: block; }

/* the code, and beside it what it is for */
.qrcard { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.qrcard__b { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-inline-size: 0; }
.qrcard__b b { font-size: 13.5px; }
.qrcard__b p { margin: 0; line-height: 1.45; }
@media (max-width: 420px) { .qrcard { flex-direction: column; align-items: flex-start; } }

/* ---------- Forms ---------- */
.form-card { max-width: 860px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); }
.calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.calc b { font-size: 20px; font-variant-numeric: tabular-nums; }
/* A row of the little calculator beside the form. It had no layout at all, so a long value —
   "choose the work and the contractor", standing where a price will go — printed straight over
   its own label. Rows stack; the label holds its ground; the value wraps rather than overrun. */
.calc:has(.calc__row) { flex-direction: column; align-items: stretch; gap: 10px; }
.calc__row { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: 12px; inline-size: 100%; min-inline-size: 0; }
.calc__row > span { flex: none; color: var(--ink-2); font-size: 13px; }
.calc__row > b { min-inline-size: 0; text-align: end; overflow-wrap: anywhere; }
/* a sentence standing in for a number is not a number, and should not shout like one */
.calc__row > b.is-hint { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.calc__row--split { border-top: 1px dashed var(--border); padding-top: 8px; }
.field .error { color: var(--critical-ink); font-size: 12px; }
.input.is-invalid, .select.is-invalid { border-color: var(--critical); }
.lang-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lang-trio .input[lang="ckb"], .lang-trio .input[lang="ar"] { font-family: var(--font-arabic); }

@media (max-width: 1024px) {
  .finder { width: auto; flex: 1; }
  .apt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apt-kpis > .stat:nth-child(3) { border-inline-start: 0; }
  .apt-kpis > .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .apt-head { grid-template-columns: auto minmax(0, 1fr); }
  .apt-head > .page-head__actions { grid-column: 1 / -1; }
  .ugrid__row { grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); }
  .ugrid { --row-h: 54px; --row-gap: 4px; }
  .ucell { padding: 6px; }
  .ucell__code { font-size: 10.5px; }
  .lang-trio { grid-template-columns: minmax(0, 1fr); }
  .finder button { display: none; }
  /* the page title already says where you are; give the space to the menu button and finder */
  .topbar .crumbs { display: none; }
  .topbar__menu, .topbar__tools > * { flex: none; }
  /* the search box gives way rather than pushing the bar past the screen — a bar wider than
     the phone widens the whole page, and in right-to-left it opens scrolled sideways */
  .topbar { min-width: 0; gap: 8px; }
  .finder { min-width: 0; flex: 1 1 0; overflow: hidden; }
  .finder input { width: 0; flex: 1 1 0; }
  .topbar__spacer { display: none; }
  .skip { max-inline-size: calc(100vw - 16px); }
}

/* apartment codes never break across lines */
.table .mono { white-space: nowrap; }

/* ---------------------------------------------------------------- rings, tiles and charts */
.ring { display: block; }
.ring__text { font: 700 22px var(--font-latin); fill: var(--ink); }
.ring__text .ring__foot { font: 500 10px var(--font-sans); fill: var(--ink-3); }
:root:lang(ckb) .ring__text .ring__foot, :root:lang(ar) .ring__text .ring__foot { font-family: var(--font-arabic); font-size: 9px; }
.ring-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ring-legend { display: grid; gap: 6px; flex: 1; min-width: 190px; }
.ring-legend__row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); font-size: 13px; }
.ring-legend__row .grow { text-align: end; }

.mini-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.mini-tile { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 10px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 550; border: 1px solid transparent; }
.mini-tile:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface); }
.mini-tile .icon { color: var(--ink-3); flex: none; }
.mini-tile span { flex: 1; min-width: 0; }

.tower-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; }
.tower-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--ink); text-decoration: none; padding: 10px 6px; border-radius: 12px; }
.tower-ring:hover { background: var(--surface-2); text-decoration: none; }
.tower-ring b { font-size: 13.5px; }

.box-card { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 4px; }
.box-card__value { font: 650 19px/1.2 var(--font-latin); font-variant-numeric: tabular-nums; }

.viz-cols { width: 100%; height: auto; }
.viz-x { font: 500 10.5px var(--font-sans); fill: var(--axis-label); }
i.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* all buildings, one line per floor */
.floors-chart { display: flex; gap: 14px; justify-content: space-between; }
.floors-col { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: center; }
.floors-col__name { font: 600 13px var(--font-mono); color: var(--ink); text-decoration: none; }
.floors-col__bars { display: grid; gap: 2px; width: 100%; }
.floor-bar { display: block; height: 7px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.floor-bar__fill { display: block; height: 100%; border-radius: 3px; }
.floors-col__pct { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ring-wrap { justify-content: center; }
  .floors-chart { gap: 8px; }
}

/* ---------------------------------------------------------------- the apartment file */
.stat--ring { display: flex; align-items: center; gap: 14px; }
.trade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.trade-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.trade-card--done { background: linear-gradient(180deg, color-mix(in srgb, var(--good) 5%, transparent), transparent 60%); }
.trade-card--not_started { opacity: .72; }
.trade-card__head { display: flex; align-items: center; gap: 12px; }
.trade-card__head b { font-size: 14.5px; font-weight: 650; }
.trade-card__state { margin-top: 3px; }
.trade-card__head .ring { flex: none; }
.trade-card__items { display: grid; gap: 7px; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; }
.item-row__name { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row__qty { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-row__qty .muted { font-size: 11.5px; }
.item-row__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.item-row__bar i { display: block; height: 100%; border-radius: 2px; }
.item-row--over .item-row__name { color: var(--critical-ink); font-weight: 600; }
.trade-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.trade-card__foot .who__p { color: var(--ink); text-decoration: none; }
.trade-card__foot .who__p:hover { text-decoration: underline; }
.people { display: grid; gap: 10px; padding: 14px 16px; }
.person { color: var(--ink); text-decoration: none; align-items: center; }
.person:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-2); }
.tl-item__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kv > span { font-size: 12px; color: var(--ink-3); }
.tel { font: 500 12.5px/1.4 var(--font-mono); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ---------------------------------------------------------------- tabs, chips and small parts */
.tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-inline-start: 6px; border-radius: 9px; background: var(--surface-3); font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.tab.is-active .tab__count { background: var(--ink); color: var(--on-primary); }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-grid .chip { gap: 8px; }
.unit-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
.unit-chip form { display: inline-flex; }
.icon-btn--xs { width: 22px; height: 22px; border-radius: 6px; }
.caps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 16px; }
.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rate-row label { font-size: 13px; min-width: 0; }
.rate-row label small { display: block; color: var(--ink-3); font-size: 11.5px; }
.rate-row input.num { max-width: 110px; text-align: end; }
.row--void td { opacity: .55; }
.row--group td { background: var(--surface-2); font-size: 12.5px; }
.row--late td { background: color-mix(in srgb, var(--critical) 6%, transparent); }

/* the sale plan builder */
.plan-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.plan-choice input { position: absolute; opacity: 0; pointer-events: none; }
.plan-choice > span { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.plan-choice > span b { font-size: 13.5px; }
.plan-choice > span small { color: var(--ink-3); font-size: 12px; }
.plan-choice > span .icon { color: var(--ink-3); }
.plan-choice input:checked + span { border-color: var(--ink); background: var(--surface-2); box-shadow: var(--shadow-1); }
.plan-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-preview { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-height: 320px; overflow-y: auto; }
.plan-preview__head { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--surface-2); }

/* attendance */
.att-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.att-day { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); }
.att-day--present { background: color-mix(in srgb, var(--good) 22%, transparent); }
.att-day--half { background: color-mix(in srgb, var(--warning) 26%, transparent); }
.att-day--absent { background: color-mix(in srgb, var(--critical) 20%, transparent); }
.att-day--leave { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.att-strip--sm { gap: 2px; }
.att-dot { width: 9px; height: 14px; border-radius: 3px; background: var(--surface-3); display: inline-block; }
.att-dot--present { background: var(--good); } .att-dot--half { background: var(--warning); }
.att-dot--absent { background: var(--critical); } .att-dot--leave { background: var(--accent); }
.att-swatch--present { background: var(--good); } .att-swatch--half { background: var(--warning); }
.att-swatch--absent { background: var(--critical); } .att-swatch--leave { background: var(--accent); }
.att-seg { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: 9px; }
.att-opt input { position: absolute; opacity: 0; }
.att-opt > span { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 7px; font-size: 12px; cursor: pointer; color: var(--ink-3); }
.att-opt input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.att-opt--present input:checked + span { color: var(--good-ink); }
.att-opt--absent input:checked + span { color: var(--critical-ink); }
.qr-box--lg { inline-size: 150px; block-size: 150px; }

/* printed documents: the item lines under a kind of work */
@media print { .doc-item td { font-size: 8.5pt; } }

/* ---------------------------------------------------------------- home, grouped by part of the business */
.home-sec { display: grid; gap: var(--gap); margin-bottom: 30px; }
.home-sec__head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 0; }
.home-sec__head h2 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
:root:lang(ckb) .home-sec__head h2, :root:lang(ar) .home-sec__head h2 { letter-spacing: 0; }
.home-sec__head p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.home-sec__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink-2); }
.home-sec__ic .icon { width: 19px; height: 19px; }
.home-sec__ic--site { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-ink); }
.home-sec__ic--sales { background: color-mix(in srgb, var(--ochre) 18%, transparent); color: var(--ochre-ink); }
.home-sec__ic--money { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-ink); }
.home-sec__ic--store { background: color-mix(in srgb, var(--series-7) 15%, transparent); color: var(--series-7); }
.home-sec__ic--people { background: color-mix(in srgb, var(--series-5) 18%, transparent); color: var(--series-5); }
.stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.boxes-row { gap: var(--gap); }
.boxes-row .box-card { background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.boxes-row .box-card:hover { border-color: var(--border-strong); text-decoration: none; }
.box-card .muted .icon { width: 13px; height: 13px; margin-inline-end: 4px; vertical-align: -2px; }

.finder-card__form { display: grid; gap: 12px; padding: 16px 20px; }
.finder-card__title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.finder-card__title .icon { color: var(--ink-3); }
.finder-card__fields { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.finder-card__code { align-self: end; }

@media (max-width: 1024px) {
  .stat-row--3, .stat-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder-card__fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home-sec { margin-bottom: 22px; }
  .home-sec__head h2 { font-size: 15px; }
  .stat-row--3, .stat-row--4 { grid-template-columns: minmax(0, 1fr); }
}

/* the apartment cell carries its type, its buyer and its warnings */
.ucell__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.ucell__owner { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-size: 10.5px; color: var(--ink-2); }
.ucell__owner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px; }
.ucell__owner .icon { flex: none; opacity: .75; }

/* on a dark screen the fill needs more strength to read as a filled box */
:root[data-theme="dark"] .ucell::before { background: color-mix(in srgb, var(--tint, var(--good)) 42%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ucell::before { background: color-mix(in srgb, var(--tint, var(--good)) 42%, transparent); }
}

@media (max-width: 640px) {
  .ucell { padding: 6px 7px; gap: 4px; }
  .ucell__owner, .ucell__type { display: none; }
  .ugrid { --row-h: 58px; --row-gap: 3px; }
}

.show-mobile-only { display: none; }
@media (max-width: 640px) {
  .show-mobile-only { display: revert; }
  .ucell__code { font-size: 13px; }
  .ugrid__floor { font-size: 11px; }
}

@media (max-width: 640px) {
  /* four cells on a narrow screen: keep the number and its mark on one line */
  .ucell { padding: 5px 6px; }
  .ucell__pct { gap: 2px; font-size: 11px; }
  .ucell__pct .icon { width: 11px; height: 11px; }
  .ucell__code { font-size: 12px; }
}

/* ---------------------------------------------------------------- design preview screens */
.preview-banner { margin-bottom: var(--gap); }
.flow-steps { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: var(--gap); }
.flow-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-primary); font-size: 12px; font-weight: 700; margin-inline-end: 8px; }
.q-legend { display: flex; flex-wrap: wrap; gap: 8px; }

/* the four marks an engineer can give */
.q-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.q-choices--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.q-choice > input { position: absolute; opacity: 0; pointer-events: none; }   /* the radio itself, not a field inside the card */
.q-choice > span { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); height: 100%; }
.q-choice > span b { font-size: 13.5px; }
.q-choice > span small { color: var(--ink-3); font-size: 12px; }
.q-choice > span .icon { color: var(--ink-3); }
.q-choice input:checked + span { border-color: var(--ink); background: var(--surface-2); box-shadow: var(--shadow-1); }
.q-choice--good input:checked + span { border-color: var(--good); background: var(--good-soft); }
.q-choice--good input:checked + span .icon { color: var(--good-ink); }
.q-choice--accent input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.q-choice--accent input:checked + span .icon { color: var(--accent-ink); }
.q-choice--warning input:checked + span { border-color: var(--warning); background: var(--warning-soft); }
.q-choice--warning input:checked + span .icon { color: var(--warning-ink); }
.q-choice--critical input:checked + span { border-color: var(--critical); background: var(--critical-soft); }
.q-choice--critical input:checked + span .icon { color: var(--critical-ink); }
.q-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* one engineer's report */
.report-card { border-top: 3px solid var(--border-strong); }
.report-card--good { border-top-color: var(--good); }
.report-card--accent { border-top-color: var(--accent); }
.report-card--warning { border-top-color: var(--warning); }
.report-card--critical { border-top-color: var(--critical); }
.report-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.report-figure b { font: 700 34px/1 var(--font-latin); font-variant-numeric: tabular-nums; }
.report-figure > span:first-of-type { font-size: 15px; color: var(--ink-2); }
.report-figure .muted { flex-basis: 100%; }
.report-note { display: flex; gap: 8px; margin: 0; padding: 11px 13px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.report-note .icon { color: var(--ink-3); flex: none; margin-top: 2px; }
.photo-thumb { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); }
.decide-row { display: flex; gap: 10px; flex-wrap: wrap; }
.decide-row .btn { flex: 1; min-width: 160px; }

/* the weekly run */
.pick-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #fff; }
.pick-dot--part { background: var(--warning); color: #3a2a00; }
.row--picked td { background: color-mix(in srgb, var(--good) 7%, transparent); }
.row--partial td { background: color-mix(in srgb, var(--warning) 10%, transparent); }
.stage-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--gap); }
.stage-switch .seg-link { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
.stage-switch .seg-link[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--border); }
.quick-amounts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════════
   Design refresh — softer surfaces, clearer hierarchy, quieter lines.
   Layered over the base design system, so every screen picks it up at once.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  /* shadows do the work that hard borders used to do */
  --shadow-1: 0 1px 2px rgba(28, 27, 24, .04), 0 1px 1px rgba(28, 27, 24, .03);
  --shadow-2: 0 6px 20px -6px rgba(28, 27, 24, .12), 0 1px 3px rgba(28, 27, 24, .05);
  --shadow-3: 0 24px 48px -16px rgba(28, 27, 24, .22), 0 2px 8px rgba(28, 27, 24, .06);
  --border: #E8E5DE;
  --border-strong: #D5D1C7;
  --surface: #FFFFFF;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="dark"], :root[data-theme="dark"] * {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 28px -10px rgba(0, 0, 0, .6);
  --shadow-3: 0 30px 60px -20px rgba(0, 0, 0, .75);
}
:root[data-theme="dark"] {
  --surface: #1D1C1A;
  --surface-2: #232220;
  --surface-3: #2B2926;
  --border: #302E2A;
  --border-strong: #454239;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1D1C1A;
    --surface-2: #232220;
    --surface-3: #2B2926;
    --border: #302E2A;
    --border-strong: #454239;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 10px 28px -10px rgba(0, 0, 0, .6);
    --shadow-3: 0 30px 60px -20px rgba(0, 0, 0, .75);
  }
}

/* ---------- surfaces ---------- */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
a.card:hover, .card--hover:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); text-decoration: none; }
.card__head { padding: 20px 22px 0; }
.card__title { font-size: 15.5px; font-weight: 670; letter-spacing: -0.006em; }
.card__sub { font-size: 13px; margin-top: 4px; line-height: 1.45; }
.card__body { padding: 18px 22px 22px; }
.card__foot { padding: 14px 22px; font-size: 13px; }
.card--pad { padding: 22px; }

/* ---------- headings ---------- */
.page-head { margin-bottom: 22px; }
.page-head__title { font-size: 29px; font-weight: 720; letter-spacing: -0.025em; line-height: 1.15; }
:root:lang(ckb) .page-head__title, :root:lang(ar) .page-head__title { letter-spacing: 0; font-weight: 700; }
.eyebrow { font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
:root:lang(ckb) .eyebrow, :root:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.section-title { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

/* ---------- numbers ---------- */
.stat { padding: 20px 22px; gap: 7px; }
.stat__label { font-size: 12.5px; font-weight: 550; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.stat__label .icon { width: 15px; height: 15px; opacity: .9; }
.stat__value { font-size: 28px; font-weight: 680; letter-spacing: -0.03em; }
:root:lang(ckb) .stat__value, :root:lang(ar) .stat__value { letter-spacing: -0.01em; }
.stat__foot { font-size: 12.5px; color: var(--ink-3); }
.box-card { border-radius: var(--radius); padding: 15px 17px; }
.box-card__value { font-size: 20px; font-weight: 680; letter-spacing: -0.02em; }

/* ---------- controls ---------- */
.btn {
  border-radius: 10px; font-weight: 600; letter-spacing: -0.003em;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { box-shadow: 0 1px 2px rgba(28, 27, 24, .16); }
.btn--lg { border-radius: 12px; }
.input, .select, .textarea { border-radius: 10px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input--lg { border-radius: 12px; }
.input-group { border-radius: 10px; overflow: hidden; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- chips ---------- */
.chip { border-radius: 999px; font-size: 12px; font-weight: 600; padding: 4px 10px; }
.chip--sm { font-size: 11.5px; padding: 3px 8px; }

/* ---------- tables ---------- */
.table { font-size: 13.2px; }
.table th {
  font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
:root:lang(ckb) .table th, :root:lang(ar) .table th { letter-spacing: 0; text-transform: none; font-size: 12px; }
.table td { padding: 13px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.table tbody tr { transition: background-color .12s var(--ease); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-3) 45%, transparent); }
.cell-sub { font-size: 11.8px; margin-top: 2px; }

/* ---------- the shell ---------- */
.topbar { backdrop-filter: saturate(1.6) blur(10px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); }
.sidebar { background: linear-gradient(180deg, var(--sb-bg-2), var(--sb-bg) 42%); }
.nav-item {
  border-radius: 10px; font-size: 13.6px; font-weight: 550; position: relative;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.nav-item .icon { opacity: .85; }
.nav-item.is-active { background: var(--sb-active); color: var(--sb-ink); font-weight: 650; }
.nav-item.is-active .icon { opacity: 1; color: var(--ochre); }
.nav-item.is-active::before {
  content: ""; position: absolute; inset-inline-start: -10px; top: 50%; translate: 0 -50%;
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--ochre);
}
[dir="rtl"] .nav-item.is-active::before { border-radius: 3px 0 0 3px; }
.nav-group__label { font-size: 10.5px; letter-spacing: .12em; }
:root:lang(ckb) .nav-group__label, :root:lang(ar) .nav-group__label { letter-spacing: 0; font-size: 11.5px; }

/* ---------- lists ---------- */
.list-item { border-radius: var(--radius); transition: background-color .14s var(--ease); }
.list-item:hover { background: var(--surface-2); text-decoration: none; }
.ibadge { border-radius: 10px; }
.meter, .meter__fill { border-radius: 999px; }

/* ---------- tabs ---------- */
.tab { border-radius: 10px 10px 0 0; font-weight: 600; }
.tabs { gap: 2px; }

/* ---------- the apartment grid keeps its own rhythm ---------- */
.ucell { border-radius: 11px; transition: box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease); }
.ucell:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.trade-card { border-radius: var(--radius-lg); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.trade-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.home-sec__ic { border-radius: 12px; }
.mini-tile, .tower-ring { border-radius: 12px; transition: background-color .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease); }
.mini-tile:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover, .ucell:hover, .trade-card:hover, .mini-tile:hover { transform: none; }
}

/* quieter bars inside the work cards: the ring carries the state, the bars just show the measure */
.item-row__bar { height: 3px; background: color-mix(in srgb, var(--ink-3) 14%, transparent); }
.item-row__bar i { opacity: .8; }
.trade-card--done .item-row__bar i { opacity: .55; }
.item-row__name { font-size: 12.8px; }
.item-row__qty { font-size: 12.8px; }

/* a filter row is a row: its fields size to their content, not to the whole width */
.filters .input, .filters .select { width: auto; min-width: 150px; max-width: 240px; }
.filters .input[type="date"] { min-width: 132px; }
@media (max-width: 640px) {
  .filters { gap: 8px; }
  .filters .input, .filters .select { flex: 1 1 140px; max-width: none; }
}

/* inside a table the action buttons stay quiet; the big one at the foot stays strong */
.table .btn--good { background: var(--good-soft); color: var(--good-ink); border-color: transparent; box-shadow: none; }
.table .btn--good:hover { background: var(--good); color: #fff; }
.table .btn--danger { background: var(--critical-soft); color: var(--critical-ink); border-color: transparent; }
.table .btn--danger:hover { background: var(--critical); color: #fff; }

/* ---------------------------------------------------------------
   Navigation progress
   A hairline across the top that starts the instant a link or form
   is used. It never reaches the end on its own — the arriving page
   finishes it — so it always reads as "working", never as a lie.
   --------------------------------------------------------------- */
.navbar-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 200;
  block-size: 2px;
  inline-size: 0;
  background: linear-gradient(90deg, var(--accent), var(--ochre));
  box-shadow: 0 0 8px rgba(37, 106, 191, 0.5);
  border-end-end-radius: 2px;
  pointer-events: none;
}
.navbar-progress.is-running { animation: bz-progress 12s cubic-bezier(.12, .78, .28, 1) forwards; }
.navbar-progress.is-done    { inline-size: 100%; opacity: 0; transition: inline-size .12s ease, opacity .22s ease .1s; animation: none; }

@keyframes bz-progress {
  0%   { inline-size: 0; }
  12%  { inline-size: 42%; }   /* fast at first: most screens land in here */
  40%  { inline-size: 74%; }
  100% { inline-size: 92%; }   /* then crawls, leaving the last slice to the new page */
}

@media (prefers-reduced-motion: reduce) {
  .navbar-progress.is-running { animation: none; inline-size: 100%; opacity: .7; }
}

/* ---------------------------------------------------------------
   Silfa: choosing the work that a payment covers
   --------------------------------------------------------------- */

/* the amount box that appears on a ticked job, so one job can be paid in part */
.part-amount {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-inline-start: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}
.part-amount:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.part-amount__addon { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.part-amount .input {
  inline-size: 104px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 2px 8px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.part-amount .input:focus { box-shadow: none; }

/* a job left out of this payment stays readable but steps back */
.row--void td { opacity: .5; }

/* the apartment-share line under a total: informative, not a number to pay */
.row--quiet th {
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
}

/* a fuller empty state than a single line of text */
.empty__title { font-weight: 650; color: var(--ink-2); font-size: 15px; }
.empty__sub { color: var(--ink-3); max-inline-size: 42ch; }

/* a hint that has turned into a requirement */
.hint--critical { color: var(--critical-ink); }

/* ---------------------------------------------------------------
   Stages: where a request stands (sent → part paid → paid)
   --------------------------------------------------------------- */
.stages {
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.stage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface);
  color: var(--ink-3);
}
.stage__dot {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
}
.stage__label { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.stage__label b { font-size: 13px; color: var(--ink-2); }
.stage__label small { font-size: 11.5px; color: var(--ink-3); }
.stage.is-done { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.stage.is-done .stage__dot { background: var(--good); border-color: var(--good); color: #fff; }
.stage.is-done .stage__label b { color: var(--ink); }
.stage.is-current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.stage.is-cancelled { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
.stage.is-cancelled .stage__dot { background: var(--critical); border-color: var(--critical); color: #fff; }
@media (max-width: 720px) { .stages { grid-auto-flow: row; } }

/* ---------------------------------------------------------------
   Estimates: where the money goes, and how sure we are
   --------------------------------------------------------------- */
.split-bar { display: flex; block-size: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.split-bar > span { display: block; min-inline-size: 2px; }
.split-bar > span + span { border-inline-start: 2px solid var(--surface); }
.legend--stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.legend--stack > span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend--stack b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.prose h3 { font-size: 14px; margin: 18px 0 6px; }
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 10px; line-height: 1.6; max-inline-size: 78ch; }

/* ---------------------------------------------------------------
   The S-curve: planned, spent, earned
   --------------------------------------------------------------- */
.scurve { inline-size: 100%; block-size: auto; display: block; }
.scurve__grid { stroke: var(--border); stroke-width: 1; }
.scurve__tick { font-size: 10.5px; fill: var(--ink-3); font-family: inherit; }
.scurve__today { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.legend--chart { margin-top: 8px; }

/* ---------------------------------------------------------------
   Field mode: gloves on, sun out — bigger targets, bigger type
   --------------------------------------------------------------- */
:root[data-field="on"] { font-size: 17px; }
:root[data-field="on"] .btn, :root[data-field="on"] .input, :root[data-field="on"] .select, :root[data-field="on"] .textarea { min-block-size: 52px; font-size: 16px; }
:root[data-field="on"] .btn--sm, :root[data-field="on"] .input--sm { min-block-size: 44px; font-size: 15px; }
:root[data-field="on"] .q-choice > span, :root[data-field="on"] .plan-choice > span { padding: 18px; }
:root[data-field="on"] .check input { inline-size: 26px; block-size: 26px; }
:root[data-field="on"] .table td, :root[data-field="on"] .table th { padding-block: 14px; }
:root[data-field="on"] .nav__link { min-block-size: 50px; }
:root[data-field="on"] .stat__value { font-size: 30px; }
.topbar__btn.is-on { background: var(--accent-soft); color: var(--accent-ink); }

/* what is waiting to be sent while the phone has no signal */
.outbox-badge { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 150; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-2, 0 6px 20px rgba(0,0,0,.25)); font-size: 13.5px; }
.outbox-badge[hidden] { display: none; }
.outbox-badge b { font-variant-numeric: tabular-nums; }

/* exposure per contractor: two thin bars, paid ahead and held back */
.expo { display: grid; gap: 4px; }
.expo__bar { display: block; block-size: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.expo__bar i { display: block; block-size: 100%; border-radius: 3px; }
.stat-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stat-row--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.offline { min-block-size: 100vh; display: grid; place-content: center; text-align: center; gap: 12px; padding: 24px; }
.offline h1 { font-size: 24px; margin: 8px 0 0; }
.offline p { max-inline-size: 40ch; color: var(--ink-3); margin: 0 auto; }
.offline img { margin: 0 auto; }

/* ---------------------------------------------------------------
   The drawer: groups that fold, so a long Accounting list stays calm
   --------------------------------------------------------------- */
.nav-group__label {
  display: flex; align-items: center; gap: 6px; inline-size: 100%;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--sb-ink-3); padding: 6px 10px; border-radius: 8px; text-align: start;
}
.nav-group__label:hover { color: var(--sb-ink); background: var(--sb-hover); }
.nav-group__label > span:first-child { flex: 1; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-group__badge { font-size: 10px; font-weight: 700; min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: rgba(208, 59, 59, 0.22); color: #FFB4B0; letter-spacing: 0; }
.nav-group__chev { transition: transform .18s var(--ease); opacity: .7; }
.nav-group.is-open .nav-group__chev { transform: rotate(180deg); }
.nav-group__items { display: none; }
.nav-group.is-open .nav-group__items { display: block; }
.app.is-collapsed .nav-group__items { display: block; }
.app.is-collapsed .nav-group__label { display: none; }

/* ---------------------------------------------------------------
   Toasts: a confirmation that shows up, then gets out of the way
   --------------------------------------------------------------- */
.toast {
  position: fixed; inset-block-start: calc(var(--topbar-h, 56px) + 12px); inset-inline-end: 20px; z-index: 180;
  display: flex; align-items: center; gap: 10px; max-inline-size: min(480px, calc(100vw - 32px));
  padding: 12px 12px 12px 14px; border-radius: 14px; font-size: 13.5px;
  background: var(--ink); color: var(--surface); box-shadow: var(--shadow-3, 0 12px 30px rgba(0,0,0,.28));
  animation: toast-in .28s var(--ease) both;
}
.toast--good .icon:first-child { color: var(--good); }
.toast__close { margin-inline-start: auto; border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; }
.toast__close:hover { opacity: 1; background: rgba(255,255,255,.12); }
.toast.is-leaving { animation: toast-out .22s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-leaving { animation: none; } }

/* ---------------------------------------------------------------
   Accounting pages
   --------------------------------------------------------------- */
.filters--period { align-items: center; }
.filters--period .seg { flex-wrap: wrap; }
.filters--period .seg-link { padding: 5px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
.filters--period .seg-link[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--border); }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item { display: flex; align-items: center; gap: 12px; padding: 12px var(--pad, 20px); border-top: 1px solid var(--border); font-size: 13.5px; }
.checklist__item:first-child { border-top: 0; }
.checklist__mark .icon { inline-size: 20px; block-size: 20px; }
.checklist__item.is-done { color: var(--ink-3); }
.checklist__item.is-done .checklist__mark { color: var(--good); }
.checklist__item.is-open .checklist__mark { color: var(--warning); }

.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.report-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.report-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); text-decoration: none; }
.report-tile__icon { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ochre-ink); flex: 0 0 auto; }
.report-tile > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.report-tile b { font-size: 13.5px; }
.report-tile small { color: var(--ink-3); font-size: 12px; }
.report-tile__go { margin-inline-start: auto; color: var(--ink-3); }
[dir="rtl"] .report-tile__go { transform: scaleX(-1); }

.aging-bar { display: flex; block-size: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); margin: 0 0 var(--gap); }
.aging-bar > span { display: block; min-inline-size: 3px; }
.aging-bar > span + span { border-inline-start: 2px solid var(--surface); }

/* the accounting overview: one card per journal, the way accountants read a day */
.journal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.jcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.jcard__head { display: flex; align-items: center; gap: 10px; }
.jcard__icon { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ochre-ink); }
.jcard__title { font-size: 13px; font-weight: 650; }
.jcard__sub { font-size: 12px; color: var(--ink-3); }
.jcard__value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.jcard__foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.jcard__foot .btn { padding-inline: 10px; }

/* ===============================================================
   Forms, the modern way
   A form reads top to bottom in sections. Each section says what it
   is about on one side and asks on the other. The amount and the
   currency sit together; a date offers today and yesterday; a long
   list is searched, not scrolled; the buttons stay in reach.
   =============================================================== */
.form-page { max-inline-size: 1080px; }
.form-page.form-page--rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.form-page .form-card { max-inline-size: none; }
@media (max-width: 1100px) { .form-page.form-page--rail { grid-template-columns: 1fr; } .fsummary { position: static; } }

.fsec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 32px; padding: 22px var(--pad, 22px); border-top: 1px solid var(--border); }
.fsec:first-child { border-top: 0; }
.fsec__title { font-size: 15px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.fsec__title .icon { color: var(--ochre-ink); }
.fsec__sub { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.fsec__body { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
@media (max-width: 860px) { .fsec { grid-template-columns: 1fr; gap: 10px; padding-inline: 16px; } }

.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.fgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .fgrid--2, .fgrid--3, .fgrid--4 { grid-template-columns: 1fr; } }
.field--2 { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 720px) { .field--2 { grid-column: auto; } }

.field .label { font-size: 13px; font-weight: 600; color: var(--ink-2); gap: 8px; }
.field .help { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin: 0; }
.field__error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--critical-ink); font-weight: 500; }
.field:has(.field__error) .input, .field:has(.field__error) .select, .field:has(.field__error) .textarea { border-color: var(--critical); }
.input, .select { block-size: 46px; font-size: 15px; padding-inline: 14px; }
.input--lg { block-size: 56px; font-size: 20px; padding-inline: 16px; }
.input--sm, .select--sm { block-size: 34px; font-size: 13px; padding-inline: 10px; }
/* the chevron keeps its own room; a label too long for the box ends in dots, never under it */
.select { padding-inline-end: 34px; text-overflow: ellipsis; }
.select--sm { padding-inline-end: 30px; background-position: right 8px center; }
[dir="rtl"] .select--sm { background-position: left 8px center; }
.textarea { padding: 12px 14px; font-size: 15px; }

/* amount + currency as one control */
.money { display: flex; align-items: stretch; }
.money .input { flex: 1; min-inline-size: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.money__ccy { display: flex; border: 1px solid var(--border-strong); border-inline-start: 0; border-radius: 0 12px 12px 0; overflow: hidden; background: var(--surface-2); }
[dir="rtl"] .money__ccy { border-radius: 12px 0 0 12px; }
.money__opt { position: relative; display: grid; place-items: center; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--ink-3); cursor: pointer; min-inline-size: 56px; }
.money__opt input { position: absolute; opacity: 0; pointer-events: none; }
.money__opt input:checked + span { color: var(--ink); }
.money__opt:has(input:checked) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.money__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.money:focus-within .money__ccy { border-color: var(--accent); }

/* a date, with the answers people give most */
.datef { display: flex; flex-direction: column; gap: 8px; }
.datef__chips { display: flex; gap: 6px; }
.datef__chips .chip { cursor: pointer; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12px; }
.datef__chips .chip:hover { border-color: var(--border-strong); color: var(--ink); }

/* buttons that stay in reach on a long form */
.form-actions--sticky {
  position: sticky; inset-block-end: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px var(--pad, 22px); border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-end-start-radius: var(--radius-lg, 14px); border-end-end-radius: var(--radius-lg, 14px);
}
.form-actions__note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); min-inline-size: 0; }
.form-actions__btns { display: flex; gap: 8px; align-items: center; margin-inline-start: auto; }
.btn--lg { block-size: 46px; padding-inline: 20px; font-size: 14.5px; }

/* the rail that says what will happen */
.fsummary { position: sticky; inset-block-start: calc(var(--topbar-h, 56px) + 16px); padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.fsummary__title { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
:root:lang(ckb) .fsummary__title, :root:lang(ar) .fsummary__title { letter-spacing: 0; }
.fsummary__body { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.fsummary .kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.fsummary .kv:last-child { border-bottom: 0; }
.fsummary .kv b { font-variant-numeric: tabular-nums; }
.fsummary__big { font-size: 26px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fsummary__entry { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; font-size: 12.5px; align-items: center; }
.fsummary__entry .side { font-weight: 700; color: var(--ink-3); font-size: 11px; letter-spacing: .06em; }

/* a long list, searched instead of scrolled */
.combo { position: relative; }
.combo > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.combo__input { padding-inline-end: 36px; cursor: text; }
.combo__caret { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.combo__list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30; max-block-size: 280px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-3, 0 12px 30px rgba(0,0,0,.18)); }
.combo__list[hidden] { display: none; }
.combo__item { padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.combo__item small { color: var(--ink-3); }
.combo__item:hover, .combo__item[aria-selected="true"] { background: var(--surface-2); }
.combo__item.is-current { background: var(--accent-soft); color: var(--accent-ink); }
.combo__empty { padding: 10px; color: var(--ink-3); font-size: 13px; }

/* a form's steps, when it has more than one screen's worth */
.stepper { display: flex; gap: 6px; padding: 14px var(--pad, 22px) 0; }
.stepper__step { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); padding-block-end: 12px; border-bottom: 2px solid var(--border); }
.stepper__step b { inline-size: 22px; block-size: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11.5px; border: 1.5px solid var(--border); }
.stepper__step.is-done { color: var(--ink-2); border-color: var(--good); }
.stepper__step.is-done b { background: var(--good); border-color: var(--good); color: #fff; }
.stepper__step.is-current { color: var(--ink); border-color: var(--accent); }
.stepper__step.is-current b { border-color: var(--accent); color: var(--accent-ink); }

/* ===============================================================
   People and requests: a face beside every name, a signature on
   every step, and one road each request walks. Cards you can read
   at arm's length, on a phone, with a glove on.
   =============================================================== */
.avatar--photo { object-fit: cover; display: inline-block; }
.sidebar__user-link { display: flex; align-items: center; gap: 10px; flex: 1; min-inline-size: 0; text-decoration: none; color: inherit; border-radius: 8px; }
.sidebar__user-link:hover { text-decoration: none; }
.sidebar__user-link .avatar { inline-size: 32px; block-size: 32px; }
.text-good { color: var(--good-ink); }
.sig-thumb { block-size: 26px; max-inline-size: 110px; object-fit: contain; vertical-align: middle; filter: var(--sig-filter, none); }
:root[data-theme="dark"] { --sig-filter: invert(1) hue-rotate(180deg) brightness(1.4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sig-filter: invert(1) hue-rotate(180deg) brightness(1.4); } }

/* the four doors of "what do you need?" */
.ask-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-block-end: var(--gap); }
.ask-kind { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; min-block-size: 150px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ask-kind:hover { text-decoration: none; border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ask-kind b { font-size: 17px; }
.ask-kind small { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.ask-kind__ic { inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.ask-kind__ic .icon { inline-size: 22px; block-size: 22px; }
.ask-kind--good .ask-kind__ic { background: var(--good-soft); color: var(--good-ink); }
.ask-kind--accent .ask-kind__ic { background: var(--accent-soft); color: var(--accent-ink); }
.ask-kind--ochre .ask-kind__ic { background: var(--ochre-soft); color: var(--ochre-ink); }
.ask-kind__go { position: absolute; inset-inline-end: 16px; inset-block-start: 22px; color: var(--ink-3); }
.ask-road-note .card__body { padding-block: 14px; }

/* the road: who signs, in what order */
.road { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.road__step { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.road__step > b { flex: none; inline-size: 24px; block-size: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11.5px; border: 1.5px solid var(--border-strong); color: var(--ink-2); background: var(--surface); }
.road__step > span { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.road__step small { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.road__step.is-done > b { background: var(--good); border-color: var(--good); color: #fff; }
.road__step.is-rejected > b { background: var(--critical); border-color: var(--critical); color: #fff; }
.road__step.is-waiting > b { border-color: var(--accent); color: var(--accent-ink); border-style: dashed; }
.road__step.is-skipped { opacity: .5; }
.road--row { flex-direction: row; flex-wrap: wrap; gap: 18px 28px; }
.road--row .road__step { flex: 1 1 160px; }

/* chips that filter a list */
.filter-chips { display: flex; flex-direction: column; gap: 10px; margin-block-end: var(--gap); }
.filter-chips__group { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips .chip { text-decoration: none; cursor: pointer; }
.filter-chips .chip:hover { text-decoration: none; }
.chip__count { display: inline-grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: 9px; background: rgba(255,255,255,.22); font-size: 11px; margin-inline-start: 6px; }
.chip--outline .chip__count { background: var(--surface-3); color: var(--ink-2); }

/* the kind of a request, as a small coloured mark */
.kind-ic { flex: none; inline-size: 30px; block-size: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.kind-ic--money { background: var(--good-soft); color: var(--good-ink); }
.kind-ic--penalty { background: var(--critical-soft); color: var(--critical-ink); }
.app .kind-ic--programme { background: var(--good-soft); color: var(--good-ink); }
.app .kind-ic--measures { background: var(--ochre-soft); color: var(--ochre-ink); }
.kind-ic--task { background: var(--accent-soft); color: var(--accent-ink); }
.kind-ic--leave { background: var(--ochre-soft); color: var(--ochre-ink); }
.list-item--link { text-decoration: none; color: inherit; align-items: center; }
.list-item--link:hover { text-decoration: none; }
.list-item--link .list-item__title { color: var(--ink); }

/* asked · approved · paid */
.amount-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-block-end: 14px; }
.amount-strip > div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.amount-strip small { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
:root:lang(ckb) .amount-strip small, :root:lang(ar) .amount-strip small { letter-spacing: 0; text-transform: none; }
.amount-strip b { font-size: 20px; font-variant-numeric: tabular-nums; }
.amount-strip .is-good { background: var(--good-soft); }
.amount-strip .is-good b { color: var(--good-ink); }
.prose { margin: 0; line-height: 1.6; white-space: normal; }

/* the chain of signatures on a request */
.sigchain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sigchain__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; position: relative; padding-block-end: 20px; }
.sigchain__step::before { content: ""; position: absolute; inset-inline-start: 19px; inset-block-start: 40px; inset-block-end: 0; inline-size: 2px; background: var(--border); }
.sigchain__step:last-child::before { display: none; }
.sigchain__step:last-child { padding-block-end: 0; }
.sigchain__who .avatar { inline-size: 40px; block-size: 40px; font-size: 14px; }
.sigchain__pending { background: var(--surface-2); color: var(--ink-3); border: 1.5px dashed var(--border-strong); }
.sigchain__step.is-waiting .sigchain__pending { border-color: var(--accent); color: var(--accent-ink); }
.sigchain__body { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; padding-block-start: 4px; }
.sigchain__title { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; }
.sigchain__title b { font-weight: 700; }
.sigchain__title small { font-size: 12px; }
.sigchain__meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sigchain__note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.sigchain__sig { margin-block-start: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--border); display: inline-flex; align-items: flex-end; min-block-size: 44px; max-inline-size: 260px; }
.sigchain__sig img { max-block-size: 48px; max-inline-size: 100%; }
.sigchain__typed { font: italic 600 17px "Snell Roundhand", "Segoe Script", cursive; color: #2E2C28; }
.sigchain__step.is-rejected .sigchain__sig { border-color: var(--critical); }
.sigchain__step.is-skipped { opacity: .55; }
:root[data-theme="dark"] .sigchain__sig { background: #F5F4F0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sigchain__sig { background: #F5F4F0; } }

.card--act { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.avatar-row { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.avatar-row__p { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.done-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 0; color: var(--ink-2); }
.done-mark .icon { inline-size: 36px; block-size: 36px; }
.done-mark b { font-size: 16px; color: var(--ink); }
.done-mark small { color: var(--ink-3); }
.done-mark--good .icon { color: var(--good); }
.done-mark--critical .icon { color: var(--critical); }

/* waiting for you */
.inbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); }
.inbox-card .card__foot { padding: 10px 20px; border-top: 1px solid var(--border); font-size: 13px; }
.empty--big { padding: 56px 20px; gap: 6px; }
.empty--big .icon { inline-size: 40px; block-size: 40px; color: var(--good); }
.empty--big b { font-size: 17px; color: var(--ink); }
.empty--big span { max-inline-size: 420px; line-height: 1.5; }

.foryou { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 14px 10px 10px; margin-block-end: var(--gap); }
.foryou__main { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-inline-size: 0; text-decoration: none; color: inherit; padding: 6px; border-radius: 12px; }
.foryou__main:hover { text-decoration: none; background: var(--surface-2); }
.foryou__ic { position: relative; flex: none; inline-size: 48px; block-size: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.foryou__ic .icon { inline-size: 24px; block-size: 24px; }
.foryou__ic.is-hot { background: var(--warning-soft); color: var(--warning-ink); }
.foryou__ic b { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: 11px; background: var(--critical); color: #fff; font-size: 12px; display: grid; place-items: center; border: 2px solid var(--surface); }
.foryou__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.foryou__text b { font-size: 15.5px; }
.foryou__text small { color: var(--ink-3); font-size: 12.5px; }
.foryou__go { color: var(--ink-3); margin-inline-start: auto; }
.foryou__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.foryou__actions .avatar { inline-size: 20px; block-size: 20px; font-size: 9px; }

/* a signature, drawn or uploaded */
.sigpad { display: flex; flex-direction: column; gap: 10px; }
.sigpad__current { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.sigpad__current img { max-block-size: 56px; max-inline-size: 240px; }
.sigpad__draw { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: #fff; overflow: hidden; }
.sigpad__canvas { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.sigpad__hint { position: absolute; inset-inline-start: 14px; inset-block-start: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6E6A61; pointer-events: none; }
.sigpad__line { position: absolute; inset-inline: 24px; inset-block-end: 26%; border-block-end: 1px solid #C9C5BC; pointer-events: none; }
.sigpad__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.photopick { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photopick__frame { position: relative; inline-size: 96px; block-size: 96px; border-radius: 24px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; flex: none; }
.photopick__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.photopick__initials { font-size: 30px; font-weight: 700; color: var(--ink-2); }
.photopick__tools { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; flex: 1 1 240px; }

/* who is who */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-block-end: var(--gap); }
.person-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.person-card .avatar--xl { inline-size: 64px; block-size: 64px; border-radius: 18px; font-size: 20px; }
.person-card__body { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.person-card__body > b { font-size: 15px; }
.person-card__body > small { color: var(--ink-3); font-size: 12.5px; }
.person-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin-block-start: 4px; }
.person-card__meta a, .person-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.person-card__actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }

.q-choice--critical input:checked + span { border-color: var(--critical); background: var(--critical-soft); }
.q-choice--critical input:checked + span .icon { color: var(--critical-ink); }
.q-choice--ochre input:checked + span { border-color: var(--ochre); background: var(--ochre-soft); }
.q-choice--ochre input:checked + span .icon { color: var(--ochre-ink); }
@media (max-width: 720px) {
  .sigchain__step { grid-template-columns: 34px minmax(0, 1fr); }
  .sigchain__who .avatar { inline-size: 34px; block-size: 34px; }
  .sigchain__step::before { inset-inline-start: 16px; }
  .foryou { padding: 8px; }
}
.person-card__role { align-self: start; margin-block: 2px; }
.person-card__body > small:empty { display: none; }
.can-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.can-list li { display: flex; align-items: flex-start; gap: 6px; }
.can-list .icon { flex: none; margin-top: 3px; color: var(--good-ink); }
.note-quote { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); font-style: italic; line-height: 1.5; }
.note-quote .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
tr.is-paid td { opacity: .72; }
tr.is-paid td:last-child { opacity: 1; }
.pay-tick { inline-size: 18px; block-size: 18px; }

/* ---------- The client's own logo and pictures ---------- */
/* A logo is shown on whatever is behind it — never boxed in white, or a see-through
   background would arrive as a white rectangle on every dark screen and letterhead. */
.brand-logo { display: block; inline-size: auto !important; block-size: auto !important; max-block-size: 40px; max-inline-size: 168px; inline-size: auto; block-size: auto; object-fit: contain; }
/* the client's own logo is the first thing anyone sees in the menu: give it the middle of the
   column and room to be read. The file is 260x286, so 64px asks nothing of it. */
.sidebar__brand--logo { padding-block: 16px 12px; }
.sidebar__brand--logo .brand-logo { max-block-size: 64px; }

/* in Setup the logo sits on a chequerboard, so see-through really looks see-through */
.photopick__frame--logo {
  inline-size: 168px; block-size: 110px; border-radius: 14px; background-color: var(--surface);
  background-image: linear-gradient(45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-3) 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, var(--surface-3) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-3) 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.photopick__img--contain { object-fit: contain; padding: 10px; background: none; }

/* pictures of the buildings, in Setup */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shot { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.shot img { display: block; inline-size: 100%; block-size: 110px; object-fit: cover; }
.shot__badge { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--on-primary); font-size: 10.5px; font-weight: 600; }
.shot__remove { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 12px; color: var(--ink-2); background: var(--surface); }
.shot:has(input:checked) { border-color: var(--critical); opacity: .6; }
.shot:has(input:checked) .shot__remove { color: var(--critical-ink); font-weight: 600; }

.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); cursor: pointer; text-align: center; }
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .icon { inline-size: 26px; block-size: 26px; color: var(--ink-3); }
.dropzone b { font-size: 14px; }
.dropzone small { color: var(--ink-3); font-size: 12.5px; }
.help--size { display: flex; align-items: flex-start; gap: 6px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); margin-block-end: 4px; }
.help--size .icon { flex: none; margin-block-start: 2px; }

/* ===============================================================
   Signing in
   Two halves: the site on one side, the door on the other. The
   photographs turn slowly and drift, the words sit on the quiet
   part of the picture, and the form floats on a little warmth.
   =============================================================== */
.lx {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  min-block-size: 100vh; min-block-size: 100dvh; color: #F6F4F0; background: #0F0E0C;
}

/* ── the site, from edge to edge ────────────────────────── */
.lx-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #14120F; }
/* a real <img> with srcset: every screen downloads a copy sharp enough for itself.
   The one on stage settles from a slight lean-in to its true size, so it ends at its sharpest. */
.lx-photo {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 9s cubic-bezier(.2,.6,.2,1);
}
.lx-photo.is-on { opacity: 1; transform: none; }
/* only as much shadow as the words need: deep behind the story, light over the building */
.lx-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,11,9,.78) 0%, rgba(12,11,9,.42) 34%, rgba(12,11,9,.08) 62%, rgba(12,11,9,.35) 100%),
    linear-gradient(180deg, rgba(12,11,9,.55) 0%, rgba(12,11,9,0) 24%, rgba(12,11,9,0) 52%, rgba(12,11,9,.88) 100%),
    radial-gradient(60% 50% at 8% 100%, rgba(200,132,31,.24), transparent 70%);
}
[dir="rtl"] .lx-veil {
  background:
    linear-gradient(270deg, rgba(12,11,9,.78) 0%, rgba(12,11,9,.42) 34%, rgba(12,11,9,.08) 62%, rgba(12,11,9,.35) 100%),
    linear-gradient(180deg, rgba(12,11,9,.55) 0%, rgba(12,11,9,0) 24%, rgba(12,11,9,0) 52%, rgba(12,11,9,.88) 100%),
    radial-gradient(60% 50% at 92% 100%, rgba(200,132,31,.24), transparent 70%);
}
/* the drawing board under it all: a faint grid, strongest where the words sit */
.lx-blueprint {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(70% 65% at 18% 88%, #000 0%, transparent 72%);
          mask-image: radial-gradient(70% 65% at 18% 88%, #000 0%, transparent 72%);
}
[dir="rtl"] .lx-blueprint { -webkit-mask-image: radial-gradient(70% 65% at 82% 88%, #000 0%, transparent 72%); mask-image: radial-gradient(70% 65% at 82% 88%, #000 0%, transparent 72%); }

/* ── what is being built ────────────────────────────────── */
.lx-story {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-block-size: 100vh; min-block-size: 100dvh; padding: 40px 56px 40px; min-inline-size: 0;
}
/* a viewfinder's corner marks, as on a surveyor's sheet */
.lx-story::before {
  content: ""; position: absolute; inset: 18px; pointer-events: none; --c: rgba(255,255,255,.45);
  background:
    linear-gradient(var(--c), var(--c)) left top / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) left top / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) right top / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 1px 22px no-repeat;
}
.lg-mark { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; }
.lg-mark b { font: 750 21px/1 var(--font-latin); letter-spacing: -0.01em; }
.lg-mark__logo { max-block-size: 64px; max-inline-size: 280px; inline-size: auto; block-size: auto; object-fit: contain; filter: drop-shadow(0 2px 14px rgba(0,0,0,.55)); }
/* a client's logo is drawn for paper, so it gets a pale card to sit on instead of the photograph */
.lg-mark--logo {
  padding: 10px 16px; border-radius: 16px; background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.6);
}
.lg-mark--logo .lg-mark__logo { max-block-size: 48px; filter: none; }

.lx-tale { max-inline-size: 760px; animation: lg-rise .7s var(--ease, cubic-bezier(.2,.7,.3,1)) .1s both; }
.lx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #F6F4F0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
:root:lang(ckb) .lx-eyebrow, :root:lang(ar) .lx-eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.lx-eyebrow i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #E9A845; box-shadow: 0 0 0 0 rgba(233,168,69,.6); animation: lx-pulse 2.4s ease-out infinite; }
@keyframes lx-pulse { 0% { box-shadow: 0 0 0 0 rgba(233,168,69,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(233,168,69,0); } }

.lx-tale h2 {
  margin-block-start: 18px; font-size: clamp(40px, 5.6vw, 88px); font-weight: 750; letter-spacing: -0.038em; line-height: .96;
  text-shadow: 0 2px 30px rgba(0,0,0,.45); text-wrap: balance;
}
:root:lang(ckb) .lx-tale h2, :root:lang(ar) .lx-tale h2 { letter-spacing: 0; line-height: 1.3; font-size: clamp(34px, 4.4vw, 68px); }
.lx-client { margin-block-start: 14px; font-size: 17px; color: #E6E1D8; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
/* the client's name may be written in Latin letters on a right-to-left page; it still belongs on the right */
[dir="rtl"] .lx-client { text-align: right; }

.lx-data { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 28px 44px; margin-block-start: 34px; }

/* the towers as the system knows them: one slab per floor, built up as the page opens */
.lx-skyline { display: flex; align-items: flex-end; block-size: 150px; direction: ltr; }
.lx-tower { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; block-size: 100%; inline-size: 46px; }
.lx-tower small { font: 500 10px/1 var(--font-mono); color: rgba(246,244,240,.7); margin-block-end: 6px; opacity: 0; animation: lx-fade .4s ease both; animation-delay: calc(1.1s + var(--i) * .14s); }
.lx-tower__body {
  inline-size: 30px; block-size: calc((100% - 40px) * var(--k)); border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, rgba(246,244,240,.9) 0 62%, transparent 62%) 0 100% / 100% calc(100% / var(--f));
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  animation: lx-rise 1.5s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(.35s + var(--i) * .14s);
}
.lx-tower:first-child .lx-tower__body { background-image: linear-gradient(to top, rgba(233,168,69,.95) 0 62%, transparent 62%); }
.lx-tower b {
  align-self: stretch; margin-block-start: 0; padding-block-start: 8px; text-align: center;
  font: 600 11px/1 var(--font-mono); color: rgba(246,244,240,.8); border-block-start: 1px solid rgba(246,244,240,.4);
}
.lx-tower:first-child b { color: #E9A845; }
@keyframes lx-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lx-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.lx-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 0; margin: 0; padding: 0; }
.lx-specs li { display: flex; flex-direction: column; gap: 4px; padding-inline: 22px; border-inline-start: 1px solid rgba(255,255,255,.22); }
.lx-specs li:first-child { padding-inline-start: 0; border: 0; }
.lx-specs b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.lx-specs span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #CFC8BC; }
:root:lang(ckb) .lx-specs span, :root:lang(ar) .lx-specs span { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* the photographs, to flip through by hand; the one on stage fills its bar while it stays */
.lx-strip { display: flex; align-items: center; gap: 10px; }
.lx-thumb {
  position: relative; flex: none; inline-size: 88px; block-size: 58px; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,.22); background: #14120F; opacity: .62;
  transition: opacity .25s, border-color .25s, transform .25s;
}
.lx-thumb:hover { opacity: .9; transform: translateY(-2px); }
.lx-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lx-thumb.is-on { opacity: 1; border-color: rgba(255,255,255,.9); }
.lx-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lx-thumb i { position: absolute; inset-inline: 8px; inset-block-end: 6px; block-size: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; opacity: 0; }
.lx-thumb.is-on i { opacity: 1; }
.lx-thumb i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .lx-thumb i::after { transform-origin: right; }
.lx-thumb.is-on i::after { animation: lx-fill 8s linear both; }
@keyframes lx-fill { to { transform: scaleX(1); } }
.lx-count { margin-inline-start: 8px; font: 500 12px var(--font-mono); color: rgba(246,244,240,.6); }
.lx-count b { color: #F6F4F0; font-weight: 600; }

.lg-art { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; padding: 8%; }
.lg-art svg { inline-size: 100%; block-size: auto; max-inline-size: 640px; direction: ltr; overflow: visible; }
.lg-art .mono-l { font: 500 10px var(--font-mono); fill: #8F8B81; }

/* ── the door: a pane of glass over the site ─────────────── */
.lx-panel {
  /* only as tall as the form inside it, floating in the middle of the height; it scrolls only when the window is shorter than the form */
  position: relative; align-self: center; display: flex; flex-direction: column;
  inline-size: 460px; max-block-size: calc(100vh - 32px); max-block-size: calc(100dvh - 32px); margin: 16px; margin-inline-start: 0;
  padding: 20px 36px 18px; border-radius: 30px; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--surface) 40%, transparent);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
}
.lx-panel:has(.lg-try) { inline-size: 500px; }
.lx-panel__top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lx-panel__body { display: flex; align-items: center; justify-content: center; padding-block: 20px 22px; }
.lg-card { inline-size: 100%; max-inline-size: 430px; animation: lg-rise .5s var(--ease, cubic-bezier(.2,.7,.3,1)) both; }
.lg-card--wide, .lg-card:has(.lg-try) { max-inline-size: 560px; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lg-head h1 { font-size: 34px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.1; }
:root:lang(ckb) .lg-head h1, :root:lang(ar) .lg-head h1 { letter-spacing: 0; line-height: 1.35; }
.lg-head p { margin-block-start: 8px; color: var(--ink-3); font-size: 15px; }

.lg-form { margin-block-start: 28px; display: flex; flex-direction: column; gap: 16px; }
.lg-form .input-group { border-radius: 14px; background: var(--surface); transition: border-color .16s, box-shadow .16s; }
.lg-form .input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.lg-form .input-group .input { block-size: 52px; font-size: 15.5px; background: transparent; }
.lg-form .input-group__addon { background: transparent; padding-inline: 15px 2px; border: 0; }
.lg-form .input-group__addon .icon { inline-size: 18px; block-size: 18px; color: var(--ink-3); }
.lg-eye { flex: none; inline-size: 50px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-3); border-radius: 0 13px 13px 0; }
[dir="rtl"] .lg-eye { border-radius: 13px 0 0 13px; }
.lg-eye:hover { color: var(--ink); background: var(--surface-2); }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.lg-row .check { font-size: 13.5px; color: var(--ink-2); }
.lg-submit {
  block-size: 54px; font-size: 15.5px; margin-block-start: 6px; border-radius: 14px;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: transform .14s, box-shadow .2s, background-color .16s;
}
.lg-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--primary) 80%, transparent); }
.lg-submit:active { transform: none; }

/* ── try it as someone ──────────────────────────────────── */
.lg-try { margin-block-start: 30px; }
.lg-rule { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 12.5px; }
.lg-rule::before, .lg-rule::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.lg-try__sub { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

.lg-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-block-start: 16px; }
.lg-people form { display: contents; }
.lg-person {
  inline-size: 100%; display: flex; align-items: center; gap: 10px; text-align: start;
  padding: 9px 10px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s, background-color .15s;
}
.lg-person:hover { border-color: var(--ink-3); background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.lg-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-person .avatar { inline-size: 32px; block-size: 32px; font-size: 12px; }
.lg-person__who { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; flex: 1; }
.lg-person__who b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-person__who small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-person__go { flex: none; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
[dir="rtl"] .lg-person__go { transform: translateX(4px); }
.lg-person:hover .lg-person__go, .lg-person:focus-visible .lg-person__go { opacity: 1; transform: none; }

.lg-roles { margin-block-start: 14px; }
.lg-roles summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.lg-roles summary::-webkit-details-marker { display: none; }
.lg-roles summary:hover { border-color: var(--border-strong); color: var(--ink); }
.lg-roles[open] .lg-roles__chev { transform: rotate(180deg); }
.lg-roles__chev { transition: transform .18s; }
.lg-roles__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-block-start: 14px; }
.lg-role { padding: 12px 14px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border); }
.lg-role__head { display: flex; flex-direction: column; gap: 1px; margin-block-end: 8px; }
.lg-role__head b { font-size: 13px; }
.lg-role__head span { font-size: 11.5px; color: var(--ink-3); }

.lg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.lg-foot__by { opacity: .72; }

/* ── smaller screens ────────────────────────────────────── */
@media (max-width: 1180px) {
  .lx-story { padding: 32px 36px; }
  .lx-panel { inline-size: 420px; padding-inline: 28px; }
  .lx-panel:has(.lg-try) { inline-size: 460px; }
  .lx-skyline { block-size: 120px; }
  .lx-tower { inline-size: 38px; }
  .lx-tower__body { inline-size: 24px; }
}
/* a laptop: the screen is wide but not tall, so the story sizes itself to the height and the door packs tighter */
@media (min-width: 961px) and (max-height: 1000px) {
  .lx-story { padding-block: 30px; gap: 22px; }
  .lx-tale h2 { font-size: min(5.6vw, 8.6vh); }
  :root:lang(ckb) .lx-tale h2, :root:lang(ar) .lx-tale h2 { font-size: min(4.4vw, 7vh); }
  .lx-eyebrow + h2 { margin-block-start: 14px; }
  .lx-data { margin-block-start: 24px; }
  .lx-skyline { block-size: 110px; }
  .lx-specs b { font-size: 24px; }
  .lx-panel { padding-block: 16px 14px; }
  .lx-panel__body { padding-block: 16px 12px; }
  .lg-head h1 { font-size: 30px; }
  .lg-form { margin-block-start: 20px; gap: 12px; }
  .lg-form .input-group .input { block-size: 48px; }
  .lg-submit { block-size: 50px; }
  .lg-try { margin-block-start: 20px; }
  .lg-people { margin-block-start: 12px; gap: 6px; }
  .lg-person { padding-block: 7px; }
}
/* a phone: the site above, the door slides up over it as a sheet */
@media (max-width: 960px) {
  .lx { grid-template-columns: minmax(0, 1fr); background: var(--bg); }
  .lx-scene { position: absolute; inset: 0 0 auto; block-size: 64vh; block-size: 64svh; }
  .lx-story { min-block-size: 64vh; min-block-size: 64svh; padding: 22px 22px 52px; gap: 22px; }
  .lx-story::before { inset: 10px; }
  .lx-veil { background: linear-gradient(180deg, rgba(12,11,9,.5) 0%, rgba(12,11,9,.1) 22%, rgba(12,11,9,.62) 48%, rgba(12,11,9,.92) 100%) !important; }
  .lx-blueprint { -webkit-mask-image: linear-gradient(0deg, #000, transparent 60%) !important; mask-image: linear-gradient(0deg, #000, transparent 60%) !important; }
  .lg-mark--logo { padding: 8px 12px; border-radius: 13px; }
  .lg-mark--logo .lg-mark__logo { max-block-size: 34px; }
  .lx-eyebrow { font-size: 10.5px; padding: 5px 11px 5px 9px; }
  .lx-tale h2 { margin-block-start: 12px; font-size: clamp(32px, 9vw, 44px); }
  .lx-client { font-size: 15px; margin-block-start: 8px; }
  .lx-data { margin-block-start: 20px; gap: 18px 28px; }
  .lx-skyline { block-size: 78px; }
  .lx-tower { inline-size: 28px; }
  .lx-tower__body { inline-size: 18px; }
  .lx-tower small { display: none; }
  .lx-tower__body { block-size: calc((100% - 22px) * var(--k)); }
  .lx-specs { flex-wrap: nowrap; }
  .lx-specs b { font-size: 20px; }
  .lx-specs span { font-size: 10px; letter-spacing: .06em; }
  .lx-specs li { padding-inline: 12px; }
  .lx-thumb { inline-size: 58px; block-size: 40px; border-radius: 9px; }
  .lx-count { display: none; }
  .lx-panel, .lx-panel:has(.lg-try) {
    position: relative; inset-block-start: auto; inline-size: auto; block-size: auto; max-block-size: none; margin: -30px 0 0; overflow: visible;
    padding: 20px 20px 24px; border-radius: 28px 28px 0 0; border: 0; background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -24px 40px -24px rgba(0,0,0,.55);
  }
  .lx-panel__body { padding-block: 18px 20px; align-items: flex-start; }
  .lg-card, .lg-card:has(.lg-try) { max-inline-size: 100%; }
}
@media (max-width: 480px) {
  .lx-skyline, .lx-specs__floors { display: none; }
}
/* on a phone the door comes first: the logo, the name and one line, and Sign in on the first screen */
@media screen and (max-width: 480px) {
  .lx-scene { block-size: 196px; }
  .lx-story { min-block-size: 196px; padding: 16px 20px 40px; gap: 10px; justify-content: flex-start; }
  .lx-story::before, .lx-client, .lx-data, .lx-strip { display: none; }
  .lx-eyebrow { margin: 0; }
  .lx-tale h2 { margin-block-start: 6px; font-size: 24px; }
  :root:lang(ckb) .lx-tale h2, :root:lang(ar) .lx-tale h2 { font-size: 24px; }
  .lx-panel__body { padding-block: 6px 14px; }
  .lg-head h1 { font-size: 26px; }
  .lg-head p { margin-block-start: 4px; font-size: 14px; }
  .lg-form { margin-block-start: 14px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-photo, .lx-tower__body, .lx-tower small, .lx-tale, .lg-card { animation: none !important; transition: none !important; opacity: 1; }
  .lx-photo:not(.is-on) { opacity: 0; }
  .lx-eyebrow i, .lx-thumb i { animation: none; display: none; }
  .lg-submit:hover, .lg-person:hover, .lx-thumb:hover { transform: none; }
}

/* ---------- a checkbox that carries its own explanation, for a decision worth pausing over ---------- */
.check--card { align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border-strong); border-radius: 14px; background: var(--surface-2); }
.check--card:hover { border-color: var(--accent); background: var(--accent-soft); }
.check--card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check--card input { margin-block-start: 2px; flex: none; }
.check--card > span { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.check--card b { font-size: 14px; }
.check--card small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }

/* ================================================================ dense, icon-led data entry
   The first cut of these screens gave every section a 220 px column of prose explaining itself.
   Nobody reads an explanation twice, and it cost a third of the form's width — so the words are
   gone and the room went to the fields. What a box means is now carried by an icon beside its
   label and a tooltip on hover, which is quicker to read and survives all three languages. */

/* a section whose title sits on one line above a full-width body */
.fsec--flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fsec--flow .fsec__aside { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fsec--flow .fsec__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.fsec--flow .fsec__title .icon { inline-size: 15px; block-size: 15px; }
.fsec--flow .fsec__sub { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.fsec--flow .fsec__body { gap: 14px; }

/* every label can carry its own icon; the icon says what the box is for */
.field .label .icon { inline-size: 14px; block-size: 14px; color: var(--ink-3); flex: none; }
.field .label > span:first-child { display: inline-flex; align-items: center; gap: 7px; min-inline-size: 0; }

/* "optional" was written out beside thirty labels. One hollow dot says it, and the tooltip
   spells it out for anyone who has not met the dot before. */
.field .label { justify-content: flex-start; gap: 7px; }
.opt { inline-size: 6px; block-size: 6px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; cursor: help; }
.req { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); flex: none; cursor: help; }

/* a choice reduced to icon + name, with the explanation on hover */
.q-choice--mini > span { flex-direction: row; align-items: center; gap: 9px; padding: 10px 13px; }
.q-choice--mini > span b { font-size: 13px; }
.q-choice--mini > span small { display: none; }
.q-choice--mini > span .icon { inline-size: 17px; block-size: 17px; }

/* ---------------------------------------------------------------- the fact grid
   What a profile holds, read at a glance: an icon for the kind of fact, the value large,
   the name of the field small underneath. Replaces a column of "label: value" rows that was
   mostly dashes. A fact with nothing in it dims rather than disappearing, so the shape of the
   file stays the same and the gaps are visible. */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 2px; }
.facts--tight { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fact { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 10px; min-inline-size: 0; }
.fact:hover { background: var(--surface-2); }
.fact__ic { inline-size: 28px; block-size: 28px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; flex: none; }
.fact__ic .icon { inline-size: 15px; block-size: 15px; color: var(--ink-3); }
.fact__b { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.fact__v { font-size: 13.5px; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.fact__v a { color: inherit; }
.fact__k { font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.fact--empty .fact__v { color: var(--ink-3); font-weight: 500; }
.fact--good .fact__ic { background: var(--good-soft); } .fact--good .fact__ic .icon { color: var(--good-ink); }
.fact--warning .fact__ic { background: var(--warning-soft); } .fact--warning .fact__ic .icon { color: var(--warning-ink); }
.fact--critical .fact__ic { background: var(--critical-soft); } .fact--critical .fact__ic .icon { color: var(--critical-ink); }
.fact--accent .fact__ic { background: var(--accent-soft); } .fact--accent .fact__ic .icon { color: var(--accent-ink); }
.fact--wide { grid-column: span 2; }
@media (max-width: 640px) { .fact--wide { grid-column: auto; } }

/* an empty card should not take the room of a full one */
.empty--tight { padding: 18px; font-size: 12.5px; }

/* a row of small facts under a heading, for a card foot */
.chipline { display: flex; flex-wrap: wrap; gap: 6px; }
.chipline .chip { font-size: 11.5px; }

/* the identity block: the face on the left, the name and kind beside it */
.idrow { display: flex; align-items: flex-start; gap: 18px; }
.idrow__fields { display: flex; flex-direction: column; gap: 14px; flex: 1 1 0; min-inline-size: 0; }
.photopick--tight { gap: 10px; flex-direction: column; align-items: flex-start; flex: none; }
.photopick--tight .photopick__frame { inline-size: 84px; block-size: 84px; border-radius: 18px; }
.photopick--tight .photopick__tools { flex-direction: row; align-items: center; gap: 6px; flex: none; }
.photopick--tight .photopick__initials .icon { inline-size: 26px; block-size: 26px; color: var(--ink-3); }
@media (max-width: 640px) { .idrow { flex-direction: column; } }

/* an empty table row should not prop a card open to the height of a full one */
.empty--tight { padding-block: 16px !important; }
/* a card whose body is a lone equation does not need a card's worth of padding */
.card--band .card__body { padding-block: 14px; }

/* ================================================================ building a site, floor by floor
   The tower page used to carry a card and two forms for every floor — thirteen of them on a
   thirteen-storey building, all identical, none of them readable. It is a list now: one line per
   floor, and the line is a door into the floor's own page. */
.floorlist { display: flex; flex-direction: column; }
.floorrow { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-block-start: 1px solid var(--border); text-decoration: none; color: inherit; }
.floorrow:first-child { border-block-start: 0; }
.floorrow:hover { background: var(--surface-2); text-decoration: none; }
.floorrow__n { inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.floorrow--empty .floorrow__n { background: var(--warning-soft); color: var(--warning-ink); }
.floorrow__b { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; flex: 1 1 auto; }
.floorrow__t { font-size: 13.5px; font-weight: 650; }
.floorrow__m { display: flex; flex-wrap: wrap; gap: 5px; }
.floorrow__f { display: flex; align-items: center; gap: 12px; flex: none; }
.floorrow__f b { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.floorrow__f .icon { color: var(--ink-3); }
.floorrow__go { color: var(--ink-3); flex: none; }
@media (max-width: 640px) { .floorrow__f { display: none; } }

/* the apartments standing on one floor, as a plan rather than a list */
/* Two things a floor can be: a plan to read, and two jobs to do about it. The plan comes
   first and gets the full width; the jobs sit under it, side by side. */
.twoup { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); align-items: start; }
/* the cells keep a sensible size on a wide row rather than stretching into billboards */
.uplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.card.span-12 .uplan { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); justify-content: start; }
.uplan__cell { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.uplan__code { font-size: 12.5px; font-weight: 650; }
.uplan__type { font-size: 11.5px; color: var(--ink-2); }
.uplan__area, .uplan__price { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.uplan__x, .uplan__lock { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; }
.uplan__lock .icon { color: var(--ink-3); }

/* one line per apartment type, so a mixed floor is laid down in a single save */
.laylines { display: flex; flex-direction: column; gap: 6px; }
.layline { display: grid; grid-template-columns: minmax(0, 1fr) 76px 92px 28px; gap: 6px; align-items: center; }
.layline--head { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.layline--head span { display: inline-flex; align-items: center; gap: 4px; }
.layline--head .icon { color: var(--ink-3); }

/* a navigation arrow with nowhere to go should look like it */
.icon-btn.is-off { opacity: .35; pointer-events: none; }

/* every floor of the tower as a small square, so the office can jump anywhere in one tap */
.floorstrip { display: flex; flex-wrap: wrap; gap: 5px; margin-block-end: var(--gap); }
.floorstrip__b { inline-size: 38px; block-size: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.floorstrip__b:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.floorstrip__b.is-empty { border-style: dashed; color: var(--ink-3); }
.floorstrip__b.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* the builder's columns, with room for the number and the area */
.layline { grid-template-columns: minmax(0, 1fr) 64px 84px 26px; }
.layline--head span:nth-child(2), .layline--head span:nth-child(3) { justify-content: center; }

/* A segmented control whose choices are links, not buttons — a filter that survives a reload
   and can be opened in a new tab. The rule only ever styled `button`, so every filter built
   out of links came out as one unreadable run of words. */
.seg a { height: 30px; padding: 0 11px; border-radius: 7px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.seg a:hover { color: var(--ink); text-decoration: none; }
.seg a[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border); }
.seg--sm a { height: 26px; padding: 0 9px; font-size: 12px; }
.seg a .muted { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the people we work with
   One card per stakeholder rather than a row in a wide table: the face, what he trades under,
   the contract he is on, and how complete his file is — read by icon, and the whole card is
   the way into his profile. */
.party { position: relative; display: flex; flex-direction: column; }
.party--gone { opacity: .55; }
/* the name's link is stretched over the whole card, so anywhere on it opens the profile —
   while the two buttons in the foot sit above it and keep their own destinations */
.party__name a { color: inherit; text-decoration: none; }
.party__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.party__name a:hover { color: var(--accent-ink); }
.party__go a { position: relative; }
.party__top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.party__id { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
.party__name { font-size: 14.5px; font-weight: 670; letter-spacing: -0.005em; }
.party__sub { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-inline-size: 0; }
.party__sub .truncate { max-inline-size: 15ch; }
.party__dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--ink-3); flex: none; opacity: .6; }
.party__trade { display: inline-flex; align-items: center; gap: 4px; color: var(--tc, var(--ink-3)); white-space: nowrap; }
.party__trade .icon { inline-size: 12px; block-size: 12px; }
.party__kind { inline-size: 26px; block-size: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-3); }
.party__kind .icon { inline-size: 14px; block-size: 14px; color: var(--ink-3); }
.party__kind--company { background: var(--accent-soft); } .party__kind--company .icon { color: var(--accent-ink); }
.party__kind--usta { background: var(--ochre-soft, var(--surface-3)); } .party__kind--usta .icon { color: var(--ochre-ink); }
.party__body { padding: 0 8px 4px; border-block-start: 1px solid var(--border); padding-block-start: 6px; }
.party__foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; border-block-start: 1px solid var(--border); margin-block-start: auto; }
/* The money page's version of the same card. The figure anybody opened the page for — what we
   still owe the man — is the one in large type; the terms sit beside it because a balance
   without the split it was earned under says only half of what happened. */
.party__money { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 2px 16px 12px; }
.party__owed { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.party__owed-v { font-size: 24px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.party__owed-k { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
.party__terms { display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-align: end; min-inline-size: 0; max-inline-size: 60%; }
.party__expo { padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 5px; }
.party__expo-k { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--ink-3); }
.party__expo-k > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.party__foot .party__go { margin-inline-start: auto; display: flex; gap: 4px; }
.party__foot .meter { flex: 1 1 auto; margin: 0; }
.party__pct { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.party__go { display: flex; gap: 4px; flex: none; }

/* A grid whose cards keep their own height.
   The default stretches every card in a row to match the tallest, which is right when two cards
   are meant to read as a pair and wrong when one holds a single line and its neighbour holds
   twenty — then it is just several hundred pixels of nothing. */
.grid--top { align-items: start; }
/* A column of cards inside a grid cell. The grid's own gap only separates the cells, so
   without this the cards stacked in one cell sat flush against each other while every card
   beside them had 20px of air — which is why the page looked unevenly spaced rather than
   densely spaced. */
.side-stack { display: flex; flex-direction: column; gap: var(--gap); min-inline-size: 0; }

/* ---------------------------------------------------------------- taking a payment
   The two figures a clerk actually takes — this instalment, or the whole remainder — are
   buttons, because typing a number that the system already knows is a chance to mistype it. */
/* ---------------------------------------------------------------- the estimate builder
   The shape on screen is the shape of the building: a card per building, a block per kind of
   floor inside it, and the apartments on that floor in a row of small boxes. */
.estb { margin-bottom: 12px; }
.estb__name { font-weight: 640; }
.estf { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface-2); }
.estf + .estf { margin-top: 10px; }
.estf__head { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.estf__head .grow { flex: 1 1 220px; }
.estf__num { flex: 0 0 150px; }
.estf__mix { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* one kind of apartment on this floor: which type prices it, what it is called, how big, how many */
.estrow { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.estrow__type { flex: 1 1 200px; min-inline-size: 0; }
.estrow__name { flex: 1 1 160px; min-inline-size: 0; }
.estrow__n { flex: 0 0 106px; }
.estrow .label { font-size: 11px; }
/* what a floor is made of, listed under its name on the costed breakdown */
.estkinds { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; }
.estkinds > span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.estkinds i { font-style: normal; opacity: .7; }
.estkinds b { font-weight: 700; }
.estf__foot { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
/* what has been drawn so far, counted as it is typed */
.estsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.estsum > div { display: flex; flex-direction: column; gap: 2px; }
.estsum b { font-size: 20px; font-weight: 680; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.estsum span { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 720px) { .estf__num { flex: 1 1 120px; } }

/* ---------------------------------------------------------------- the costing sheet
   A bill of quantities is a long document read in sections. Each section is a card, each line
   a row, and what the whole thing comes to follows the engineer down the page. */
/* the way through a long sheet: a chip a section, and the sections themselves fold shut */
.costbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); position: sticky; inset-block-start: calc(var(--topbar-h) + 4px); z-index: 3; }
.costnav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-inline-size: 0; }
.costnav__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); font-size: 12px; cursor: pointer; }
.costnav__chip:hover { color: var(--ink); border-color: var(--accent); }
.costnav__chip.is-priced { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.costnav__chip i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.costbar__acts { display: flex; align-items: center; gap: 10px; flex: none; }
.check--sm { font-size: 12px; }

.costsec__fold { display: grid; place-items: center; inline-size: 28px; block-size: 28px; flex: none;
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer; border-radius: 8px; }
.costsec__fold:hover { background: var(--surface-3); color: var(--ink); }
.costsec.is-folded .card__body, .costsec.is-folded .card__foot { display: none; }
.costsec.is-folded [data-fold] .icon { transform: rotate(-90deg); }
[dir="rtl"] .costsec.is-folded [data-fold] .icon { transform: rotate(90deg); }
.costsec.is-priced > .card__head { box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .costsec.is-priced > .card__head { box-shadow: inset -3px 0 0 var(--accent); }
/* the name is the column that is read; everything else is a number of known width */
.costtable__name { min-inline-size: 240px; }
#sections.only-priced .costline.is-zero { display: none; }
/* a section with nothing priced in it has nothing to review, so it stands down entirely */
#sections.only-priced .costsec:not(.is-priced) { display: none; }
/* the plan of work: a kind of work nobody has planned folds away, so the page opens on what
   has actually been thought about */
/* the planning workspace: how much of the project has had its metres written down */
/* ---------------------------------------------------------------- reading the books
   A bar anybody can read: the name, a bar whose length is the share, and the figure. No axes
   to interpret, no legend to remember — the longest bar took the most money. */
.barline { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 7px 0; }
.barline + .barline { border-top: 1px solid var(--border); }
.barline__k { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 168px; font-size: 13px; min-inline-size: 0; }
.barline__bar { flex: 1 1 auto; block-size: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-inline-size: 40px; }
.barline__bar i { display: block; block-size: 100%; border-radius: 999px; }
.barline__v { flex: none; font-variant-numeric: tabular-nums; font-weight: 640; text-align: end; min-inline-size: 96px; }
.barline__v small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.barline--big .barline__bar { block-size: 16px; }
.barline--big .barline__v { font-size: 16px; }
.owesplit { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* the sentence under a chart that says what the chart means */
.vizsay { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.vizsay .icon { flex: none; margin-top: 3px; }
.vizkey { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.vizkey > span { display: inline-flex; align-items: center; gap: 5px; }
.vizkey i { inline-size: 10px; block-size: 10px; border-radius: 3px; }
.bignum { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .barline__k { flex-basis: 110px; font-size: 12px; } }

.planbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  padding: 14px 16px; margin-bottom: var(--gap); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2); }
.planbar > div { display: flex; flex-direction: column; gap: 2px; }
.planbar b { font-size: 21px; font-weight: 680; font-variant-numeric: tabular-nums; }
.planbar b small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.planbar span { font-size: 11.5px; color: var(--ink-3); }
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 12px; }
.planb { margin: 0; }
.planrow { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.planrow:first-child { border-top: 0; padding-top: 0; }
.planrow__what { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; flex: 1 1 200px; }
.planrow__what small { font-size: 11.5px; color: var(--ink-3); }
.planrow__act { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; }

.plansec { margin-bottom: 10px; }
.plansec.is-folded .card__body { display: none; }
.plansec.is-folded [data-fold] .icon { transform: rotate(-90deg); }
[dir="rtl"] .plansec.is-folded [data-fold] .icon { transform: rotate(90deg); }
.plansec.is-planned > .card__head { box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .plansec.is-planned > .card__head { box-shadow: inset -3px 0 0 var(--accent); }
.planline.is-zero td { color: var(--ink-3); }
.planline .input { inline-size: 100%; }
.plancard__none { color: var(--ink-3); }

.costsec { margin-bottom: 12px; }
.costsec__name { font-weight: 640; }
.costtable td { padding-block: 5px; }
.costtable .input, .costtable .select { inline-size: 100%; }
/* the unit box is narrow: its words stay whole beside the chevron */
.costtable .select--sm { padding-inline-start: 4px; }
.costline td[data-line-total] { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.costfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: sticky; inset-block-end: 0; background: var(--surface); border-block-start: 1px solid var(--border); z-index: 2; }
.costfoot__sum { display: flex; gap: 22px; flex-wrap: wrap; }
.costfoot__sum > div { display: flex; flex-direction: column; gap: 1px; }
.costfoot__sum b { font-size: 17px; font-weight: 680; font-variant-numeric: tabular-nums; }
.costfoot__sum span { font-size: 11px; color: var(--ink-3); }
.costfoot__grand { color: var(--accent-ink); font-size: 21px; }
@media (max-width: 720px) { .costfoot { position: static; } .costfoot__sum { gap: 14px; } }

.payquick { display: flex; gap: 8px; flex-wrap: wrap; }
.payquick .btn { flex: 1 1 auto; justify-content: center; }
/* the segmented control, as radios so it works without script and reads to a screen reader */
.seg--grow { display: flex; inline-size: 100%; }
.seg__opt { flex: 1 1 0; min-inline-size: 0; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt > span { display: flex; align-items: center; justify-content: center; gap: 6px; block-size: 32px;
  padding-inline: 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap; cursor: pointer; }
.seg__opt input:checked + span { background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--border); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* a plan of 141 instalments gets its own scroll, so the page stays the length of a page */
.table-wrap--tall { max-block-size: 420px; overflow-y: auto; }
.table-wrap--tall thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--surface); }

/* What a file is still missing, gathered into one line instead of a column of dashes */
.stillneed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 14px; padding: 11px 12px; border: 1px dashed var(--border-strong); border-radius: 11px; background: var(--surface-2); }
.stillneed__t { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--warning-ink); flex: none; }
.stillneed .chipline { flex: 1 1 auto; }
.stillneed .btn { flex: none; }

/* a category he is already contracted for, marked on the chooser */
.q-choice__held { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); margin-inline-start: auto; flex: none; }
.q-choice--mini > span { --tc: var(--ink-3); }
.q-choice--mini > span .icon { color: var(--tc); }

/* ---------------------------------------------------------------- one tower, floor by floor
   Beside the grid of apartments, the same building read as a column: one line per floor, top
   floor first, so how far each floor has come can be seen without counting boxes. It replaced a
   chart of every tower's floors, which answered a question the tabs above already answer. */
.ugrid-wrap { display: flex; align-items: flex-start; gap: 34px; }
.ugrid-wrap > .ugrid { flex: 1 1 auto; min-inline-size: 0; }

/* The floors are a panel of their own, not more of the same grid — the apartments give up some
   width for it, and it sits on its own ground so the eye never reads the two as one table.
   The panel is drawn by a pseudo-element that spreads *outside* the column's box: padding here
   would push the first floor down and lose the row-for-row alignment the whole thing is for. */
.flprog { position: relative; flex: 0 1 320px; min-inline-size: 252px; display: grid; gap: var(--row-gap, 6px); }
.flprog::before {
  content: ""; position: absolute; inset: -14px -16px -14px -16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
}
.flprog > * { position: relative; }
/* the column's name sits in the band the legend occupies, without taking a row of its own —
   that is what keeps the first floor level with the first row of apartments */
.flprog__label { position: absolute; inset-block-end: 100%; inset-inline: -16px; padding: 0 16px 12px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.flprog__label .icon { inline-size: 14px; block-size: 14px; color: var(--ink-3); }
.flprog__label .chip { margin-inline-start: auto; }
.flprog__row { display: flex; align-items: center; gap: 11px; block-size: var(--row-h, 62px); padding-inline: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); text-decoration: none; color: inherit; }
.flprog__row:hover { background: var(--surface-3); border-color: var(--ink-3); text-decoration: none; }
.flprog__n { inline-size: 34px; block-size: 30px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.flprog__b { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-inline-size: 0; }
.flprog__b .meter { margin: 0; }
.flprog__m { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flprog__m span { display: inline-flex; align-items: center; gap: 2px; }
.flprog__p { font-size: 14px; font-weight: 650; flex: none; min-inline-size: 48px; text-align: end; font-variant-numeric: tabular-nums; }
.flprog__p small { font-size: 10px; color: var(--ink-3); font-weight: 600; }

/* The floor column's heading floats in the band the legend sits in, so the legend has to stop
   short of it rather than run underneath. */
@media (min-width: 1101px) { .legend--grid { padding-inline-end: 372px; } }

/* On a narrow screen there is no room for both, and a column pinned beside the grid would only
   starve it. Below this the floors go under the apartments and the heading rejoins the flow. */
@media (max-width: 1100px) {
  .ugrid-wrap { flex-direction: column; gap: 30px; }
  .flprog { flex: 1 1 auto; inline-size: 100%; }
  .flprog__label { position: static; padding-block: 0 8px; }
}

/* the space between cost and earnings — amber when the tower is spending faster than it earns */
.scurve__band { fill: color-mix(in srgb, var(--good) 14%, transparent); }
.scurve__band--over { fill: color-mix(in srgb, var(--ochre) 15%, transparent); }
.legend--chart { margin-block-start: 6px; }

/* ---------------------------------------------------------------- project builder
   A rail of the whole project on one side, one step at a time on the other. */
.tk { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.tk-rail { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.tk-rail__i { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--ink-2); font-size: 13px; cursor: pointer; text-decoration: none; min-width: 0; }
.tk-rail__i > span:not(.tk-rail__dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.tk-rail__i small { color: var(--ink-3); font-size: 11.5px; }
.tk-rail__i:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.tk-rail__i.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.tk-rail__i--b { font-weight: 620; color: var(--ink); margin-top: 6px; }
.tk-rail__floors { display: flex; flex-direction: column; gap: 1px; margin-inline-start: 14px; padding-inline-start: 8px; border-inline-start: 1px solid var(--border); }
.tk-rail__i--f { padding-block: 5px; font-size: 12.5px; }
.tk-rail__i--u { padding-block: 4px; font-size: 12px; margin-inline-start: 14px; }
.tk-rail__dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.tk-rail__dot.is-done { background: var(--good-ink); border-color: var(--good-ink); }
.tk-rail__total { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-3); }
.tk-rail__total b { font-size: 16px; color: var(--ink); }
.tk-main { min-width: 0; }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-head { margin-bottom: 16px; }
.tk-h { font-size: 20px; font-weight: 680; margin: 4px 0 4px; }
.tk-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.tk-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.tk-save { font-size: 12.5px; }
.tk-save.is-good { color: var(--good-ink); }
.tk-save.is-bad { color: var(--critical-ink); }
.tk-apts { display: flex; flex-direction: column; gap: 6px; }
.tk-apt { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.tk-apt__name { flex: 1 1 160px; min-width: 0; }
.tk-apt__type { flex: 1 1 190px; min-width: 0; }
.tk-apt__n { flex: 0 0 110px; }
.tk-apt__q { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 7px; }
.tk-quick, .tk-tools, .tk-choice { gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.tk-choice { margin-top: 18px; }
.tk-sum { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tk-sum:empty { display: none; }
.tk-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tk-from { max-width: 340px; }
.tk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; }
.tk-sheet { display: flex; flex-direction: column; gap: 8px; }
.tk-sheet__bar { gap: 8px; flex-wrap: wrap; align-items: center; position: sticky; top: 64px; z-index: 2; background: var(--surface); padding: 6px 0; }
.tk-sheet__bar .grow { flex: 1 1 220px; }
.tk-trade { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tk-trade > summary { display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; list-style: none; }
.tk-trade > summary::-webkit-details-marker { display: none; }
.tk-trade > summary .chip { margin-inline-start: auto; }
.tk-trade[open] > summary { border-bottom: 1px solid var(--border); }
.tk-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 4px 14px; padding: 8px 12px 10px; }
.tk-item { display: grid; grid-template-columns: minmax(0, 1fr) 92px 38px; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; font-size: 13px; }
.tk-item:hover { background: var(--surface-2); }
.tk-item.is-set { background: var(--accent-soft); }
.tk-item.is-set .tk-item__n { color: var(--ink); font-weight: 600; }
.tk-item__n { color: var(--ink-2); min-width: 0; }
.tk-item__u { color: var(--ink-3); font-size: 12px; }
.tk-add { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px 12px; }
.tk-add > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.tk-add__row { gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tk-add__row .grow { flex: 1 1 200px; }
.tk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tk-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.tk-checks .tk-check { padding: 6px 8px; border-radius: 8px; background: var(--surface-2); flex-wrap: wrap; }
.tk-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.tk-option { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.tk-option > b { display: flex; align-items: center; gap: 6px; }
.tk-option .help { margin: 0; flex: 1 1 auto; }
.tk-option .row { gap: 6px; width: 100%; }
.tk-option .row .input { flex: 1 1 auto; min-width: 0; }
.tk-prices .input { width: 110px; text-align: end; }
.tk-flash { margin-bottom: 12px; }
.tk-cost { font-size: 17px; }
.tk-trades { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--border); }
.tk-bill td:first-child { min-width: 200px; }
.input.is-invalid { border-color: var(--critical-ink); box-shadow: 0 0 0 3px var(--critical-soft); }
@media (max-width: 1024px) {
  .tk { grid-template-columns: minmax(0, 1fr); }
  .tk-rail { position: static; max-height: 240px; }
  .tk-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tk-g2, .tk-g3 { grid-template-columns: minmax(0, 1fr); }
  .tk-item { grid-template-columns: minmax(0, 1fr) 84px 32px; }
  .tk-apt__n { flex: 1 1 90px; }
  .tk-sheet__bar { position: static; }
}
.tk-tr { display: inline-flex; align-items: center; gap: 6px; }
.tk-tr .tk-dot { margin-inline-end: 0; }
.tk--wide { grid-template-columns: minmax(0, 1fr); }
.tk--wide .tk-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
.tk--wide .tk-rail__b, .tk--wide .tk-rail__floors { display: none; }
.tk--wide .tk-rail__total { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 10px; }
.tk-tools .btn, .tk-quick .btn, .tk-choice .btn { white-space: normal; height: auto; min-height: 32px; max-width: 100%; text-align: start; }
.tk-from { max-width: 100%; }

/* ---------------------------------------------------------------- ask the data (home, second tab) */
.home-tabs { margin: -4px 0 16px; }
.ask { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ask-side { position: sticky; top: 76px; padding: 8px; max-height: calc(100vh - 96px); overflow: auto; }
.ask-side__head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ask-side__row { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.ask-side__row:hover, .ask-side__row.is-on { background: var(--surface-2); }
.ask-side__row.is-on a { color: var(--accent-ink); }
.ask-side__row a { flex: 1 1 auto; min-width: 0; padding: 7px 9px; color: var(--ink); font-size: 13px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; }
.ask-side__row small { color: var(--ink-3); font-size: 11.5px; }
.ask-side__row .btn { opacity: 0; }
.ask-side__row:hover .btn, .ask-side__row .btn:focus { opacity: 1; }
.ask-side__empty { padding: 4px 9px; }
.ask-main { display: flex; flex-direction: column; min-height: min(72vh, 780px); }
.ask-thread { flex: 1 1 auto; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 260px); }
.ask-msg--q { display: flex; justify-content: flex-end; }
.ask-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; border-end-end-radius: 4px; background: var(--primary); color: var(--on-primary); font-size: 14px; white-space: pre-wrap; }
.ask-failed .ask-bubble { opacity: .55; }
.ask-msg--a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.ask-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.ask-body { min-width: 0; }
.ask-answer { font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ask-answer > :first-child { margin-top: 0; }
.ask-answer > :last-child { margin-bottom: 0; }
.ask-answer p, .ask-answer ul, .ask-answer ol { margin: 0 0 10px; }
.ask-answer ul, .ask-answer ol { padding-inline-start: 20px; }
.ask-answer h1, .ask-answer h2, .ask-answer h3, .ask-answer h4 { font-size: 15px; margin: 14px 0 6px; }
.ask-answer table { border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; display: block; overflow-x: auto; max-width: 100%; }
.ask-answer th, .ask-answer td { border: 1px solid var(--border); padding: 6px 10px; text-align: start; }
.ask-answer th { background: var(--surface-2); font-weight: 650; }
.ask-answer code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.ask-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.ask-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ask-how { margin-top: 6px; font-size: 12.5px; }
.ask-how summary { cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.ask-how ol { margin: 8px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; }
.ask-sql { margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; white-space: pre-wrap; overflow-x: auto; text-align: left; }
.ask-wait .ask-avatar { background: var(--surface-3); }
.ask-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.ask-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: ask-dot 1.2s infinite ease-in-out; }
.ask-dots i:nth-child(2) { animation-delay: .15s; } .ask-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ask-dots i { animation: none; opacity: .6; } }
.ask-error { margin: 0; }
.ask-start { display: flex; flex-direction: column; gap: 18px; margin: auto 0; }
.ask-brief { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--accent-soft); color: var(--ink); text-align: start; cursor: pointer; font: inherit; }
.ask-brief:hover:not(:disabled) { border-color: var(--accent); }
.ask-brief:disabled { cursor: not-allowed; opacity: .6; }
.ask-brief > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.ask-brief small { color: var(--ink-2); font-size: 12.5px; }
.ask-brief__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.ask-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ask-ideas__group { display: flex; flex-direction: column; gap: 6px; }
.ask-ideas__title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.ask-idea { text-align: start; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.ask-idea:hover:not(:disabled) { border-color: var(--border-strong); color: var(--ink); background: var(--surface-2); }
.ask-idea:disabled { cursor: not-allowed; opacity: .6; }
.ask-box { border-top: 1px solid var(--border); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ask-box .textarea { resize: vertical; min-height: 56px; }
.ask-box__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 1024px) {
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask-side { position: static; max-height: 200px; order: 2; }
  .ask-thread { max-height: none; }
}
@media (max-width: 640px) {
  .ask-ideas { grid-template-columns: minmax(0, 1fr); }
  .ask-thread { padding: 14px; }
  .ask-bubble { max-width: 92%; }
}
.ask-settings { margin-bottom: 16px; }
.ask-settings > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; list-style: none; }
.ask-settings > summary::-webkit-details-marker { display: none; }
.ask-settings[open] > summary { border-bottom: 1px solid var(--border); }
.ask-settings__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ask-settings__grid { display: grid; grid-template-columns: 280px minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ask-settings__static { display: flex; align-items: center; color: var(--ink-2); background: var(--surface-2); }
.ask-settings__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1024px) { .ask-settings__grid { grid-template-columns: minmax(0, 1fr); } }
#ask-settings [hidden] { display: none !important; }

/* common areas in the building structure */
.calist { display: flex; flex-direction: column; gap: 4px; }
.calist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); font-size: 13.5px; }
.calist__row b { font-variant-numeric: tabular-nums; }
.calines { display: flex; flex-direction: column; gap: 6px; }
.caline { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
.floorrow__f .text-accent { color: var(--accent-ink); }
.card__foot > b.small { display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- the building grid with many apartments a floor
   Rows share the widest floor's columns; the box carries just the apartment number; the floor
   list goes below the grid; and on a narrow screen the grid scrolls sideways rather than squeeze. */
.ugrid { --cols: 1; }
.ugrid-wrap--dense { flex-direction: column; gap: 22px; }
.ugrid-wrap--dense > .ugrid { inline-size: 100%; overflow-x: auto; padding-bottom: 4px; }
.ugrid--dense { --row-h: 54px; --row-gap: 5px; }
.ugrid--dense .ugrid__row { grid-template-columns: 44px repeat(var(--cols), minmax(56px, 1fr)); }
.ugrid--dense .ucell { padding: 6px 7px; gap: 2px; border-radius: 9px; }
.ugrid--dense .ucell__top { gap: 4px; }
.ugrid--dense .ucell__code--n { font: 700 14px/1 var(--font-mono); }
.ugrid--dense .ucell__pct { font-size: 11px; gap: 2px; }
.ugrid--dense .ucell__pct .icon { width: 11px; height: 11px; }
.ugrid--dense .ucell__type { font-size: 10.5px; white-space: nowrap; }
.ugrid--dense .ucell__owner { display: none; }
/* below the grid the floor list reads as a few columns instead of one long strip */
.ugrid-wrap--dense .flprog::before { display: none; }
.ugrid-wrap--dense .flprog { flex: none; min-inline-size: 0; inline-size: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ugrid-wrap--dense .flprog__label { grid-column: 1 / -1; position: static; }
@media (max-width: 640px) {
  .ugrid--dense .ugrid__row { grid-template-columns: 34px repeat(var(--cols), minmax(48px, 1fr)); }
  .ugrid--dense .ucell__type { display: none; }
}
.ugrid-wrap--dense { margin-top: 10px; }

/* project builder: how a floor's quantities are entered, and how a whole-floor total is shared */
.tk-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tk-mode > b { grid-column: 1 / -1; font-size: 13.5px; }
.tk-mode__o { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.tk-mode__o:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tk-mode__o input { margin-top: 3px; accent-color: var(--accent); }
.tk-mode__o span { display: flex; flex-direction: column; gap: 3px; }
.tk-mode__o small { color: var(--ink-2); font-size: 12.5px; }
.tk-split { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; }
.tk-split > summary { display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.tk-split .table-wrap { max-height: 280px; overflow: auto; }
@media (max-width: 640px) { .tk-mode { grid-template-columns: minmax(0, 1fr); } }

/* payroll: who + period side by side, stacked on a phone */
.payperiod { grid-template-columns: auto 1fr; align-items: end; gap: 20px; }

/* phone: heads, action bars and the payroll period wrap instead of pushing the page sideways */
@media (max-width: 720px) {
  .payperiod { grid-template-columns: 1fr; }
  .card__head { flex-wrap: wrap; }
  .form-actions__btns { flex-wrap: wrap; inline-size: 100%; }
  .form-actions__btns .btn { flex: 1 1 auto; justify-content: center; white-space: normal; block-size: auto; min-block-size: 44px; text-align: center; }
}

/* Some forms set their columns inline (style="grid-template-columns:…"), which outranks the
   phone rule in binazir.css. On a phone those rows fall back to two columns, and no field is
   allowed to push its grid wider than the screen. */
@media (max-width: 720px) {
  .form-grid[style*="repeat(3"], .form-grid[style*="repeat(4"],
  .form-grid[style*="1fr 1fr 1fr"], .form-grid[style*="2fr auto"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-grid > *, .fgrid > * { min-inline-size: 0; }
}

/* a six-figure stat row is two to a line on a narrow phone, so money values fit */
@media (max-width: 480px) {
  .stat-row--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row--6 > .stat:nth-child(3n+1) { border-inline-start: 1px solid var(--border); }
  .stat-row--6 > .stat:nth-child(odd) { border-inline-start: 0; }
}

/* ------------------------------------------------------------------ clocking in from the phone */
.clock { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin-inline: auto; }
.clock__card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.clock__lead { font-size: 15px; color: var(--ink); max-width: 36ch; }
.clock__intro { display: flex; flex-direction: column; gap: 8px; }
.clock__state { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; }
.clock__state-dot { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--ink-3); flex: none; }
.clock__state--in .clock__state-dot { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.clock__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clock__check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.clock__check .icon { flex: none; }
.clock__check[data-state="good"] { background: var(--good-soft); color: var(--good-ink); }
.clock__check[data-state="warn"] { background: var(--warning-soft); color: var(--warning-ink); }
.clock__check[data-state="bad"] { background: var(--critical-soft); color: var(--critical-ink); }
.clock__camera { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #111; }
.clock__camera video { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scaleX(-1); }
.clock__ring { position: absolute; inset: 12% 16% 22%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); pointer-events: none; }
.clock__prompt { position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0; padding: 14px 16px 18px; text-align: center; color: #fff; font-size: 17px; font-weight: 650; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.clock__result { padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.clock__result--good { background: var(--good-soft); color: var(--good-ink); }
.clock__result--bad { background: var(--critical-soft); color: var(--critical-ink); }

/* the office's view of what the phones sent */
.faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.face-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.face-card__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.face-card__pics figure { margin: 0; position: relative; aspect-ratio: 3 / 4; background: var(--surface-3); display: flex; align-items: center; justify-content: center; }
.face-card__pics img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.face-card__pics figcaption { position: absolute; inset-inline-start: 6px; inset-block-start: 6px; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; }
.face-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.punch-pic { inline-size: 44px; block-size: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-3); flex: none; }

/* Setup → Project: the site boundary */
.fence { display: flex; flex-direction: column; gap: 10px; }
.fence__map { block-size: 420px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); z-index: 0; }
.fence__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fence__said { margin-inline-start: auto; }
.fence-dot { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: #E8A33D; color: #1C1B18; font: 700 12px/1 var(--font-sans); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
@media (max-width: 640px) { .fence__map { block-size: 320px; } }

/* ------------------------------------------------------------------ clocking in by phone
   The office's side of it, on a worker's page: the three things that must be true before his
   phone can mark his own day, then the login and the switch that make them true. */
.phone-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.phone-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.phone-step__no { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 600; background: var(--border-strong); color: var(--ink); }
.phone-step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.phone-step__body b { font-size: 13px; font-weight: 600; }
.phone-step__icon { flex: none; margin-inline-start: auto; opacity: .45; }
.phone-step--done { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); background: color-mix(in srgb, var(--good) 7%, transparent); }
.phone-step--done .phone-step__no { background: var(--good); color: #fff; }
.phone-step--done .phone-step__icon { opacity: .8; color: var(--good); }
.phone-step--todo .phone-step__no { background: var(--border-strong); }

.phone-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; align-items: start; }
.phone-pane { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.phone-pane__title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.phone-switch { align-items: flex-start; }
.phone-switch__text { display: flex; flex-direction: column; gap: 2px; }
.phone-face { display: flex; align-items: flex-start; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.phone-face__shot { width: 64px; height: 64px; flex: none; border-radius: var(--radius); object-fit: cover; background: var(--surface-3); }

@media (max-width: 860px) {
  .phone-steps, .phone-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ the worker's own page
   Held in one hand, often in the sun, often by someone who reads slowly. Big type, one thing
   to press, and the state said in words before anything else. */
.clock-hello { display: flex; align-items: center; gap: 14px; margin-bottom: var(--gap); }
.clock-hello__name { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; }
.clock-hello__sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.clock-hello__sub span { display: inline-flex; align-items: center; gap: 5px; }

.clock-now { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; background: var(--surface-2); }
.clock-now__dot { flex: none; inline-size: 14px; block-size: 14px; margin-block-start: 5px; border-radius: 50%; background: var(--ink-3); }
.clock-now__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clock-now__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.clock-now__sub { font-size: 14px; color: var(--ink-2); }
.clock-now--in { background: var(--good-soft); }
.clock-now--in .clock-now__dot { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }
.clock-now--in .clock-now__title { color: var(--good-ink); }

/* Standing off the site is a question put to him, not a door shut in his face. */
.clock-ask { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; text-align: center;
  border: 2px solid var(--warning); border-radius: 14px; background: var(--warning-soft); color: var(--warning-ink); }
.clock-ask .icon--lg { color: var(--warning); }
.clock-ask__title { font-size: 18px; font-weight: 700; }
.clock-ask__text { margin: 0; font-size: 16px; font-weight: 600; max-width: 30ch; }
.clock-ask__note { margin: 0; font-size: 13px; opacity: .85; max-width: 34ch; }
.clock-ask__buttons { display: flex; flex-direction: column; gap: 8px; align-self: stretch; margin-block-start: 6px; }
.clock-ask__buttons .btn { justify-content: center; }
.clock__result--wait { background: var(--surface-2); color: var(--ink-2); }

/* ------------------------------------------------------------ a tap taken off the project
   The one thing on this page that asks the reader to decide something, so the one thing on
   it that is allowed to shout. Everything else here is a quiet record. */
.card--alarm { border-color: var(--critical); box-shadow: 0 0 0 1px var(--critical) inset; }
.card--alarm .card__head { background: var(--critical-soft); }

.offsite { display: flex; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--border); }
.offsite:first-child { border-top: 0; }
.offsite__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.offsite__who { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.offsite__said { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--critical-ink); }
.offsite__said .icon { flex: none; color: var(--critical); }
.offsite__sure { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-2); }
.offsite__sure span { display: inline-flex; align-items: center; gap: 4px; }
.offsite__act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block-start: 4px; }
.offsite__act .input { flex: 1 1 220px; min-width: 0; }

/* in the full list, the same fact said once, in red */
.list-item--offsite { background: color-mix(in srgb, var(--critical) 6%, transparent); }
.list-item--offsite .text-critical { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 700px) {
  .offsite__act .input { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- accounting upgrade (2026-10) */
.alert--info { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.alert--warning { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.row--warn td { background: var(--warning-soft); }
.row--done td { color: var(--ink-3); }
/* a small form that opens in place, from a <details class="pop"> */
details.pop > summary { list-style: none; cursor: pointer; }
details.pop > summary::-webkit-details-marker { display: none; }
.pop__body { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); }
.fin-grid > div { background: var(--surface); padding: 14px 16px; }
.fin-grid__k { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.fin-grid__v { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fin-grid__s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.matrix td.num, .matrix th.num { white-space: nowrap; }
@media (max-width: 640px) { .pop__body { position: fixed; inset-inline: 12px; top: auto; bottom: 12px; } }

/* ---------------------------------------------------------------- financial statements (2026-10-17)
   Laid out the way printed statements are: captions in bold, account lines indented, subtotals
   ruled above, totals ruled above and double-ruled below, figures right-aligned in columns. */
.fs-head { text-align: center; padding: 18px 16px 6px; }
.fs-head__entity { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
:root:lang(ckb) .fs-head__entity, :root:lang(ar) .fs-head__entity { letter-spacing: 0; text-transform: none; }
.fs-head__title { font-size: 20px; font-weight: 750; margin: 4px 0 2px; }
.fs-head__period { font-size: 13.5px; color: var(--ink-2); }
.fs-head__unit { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fs-table th, .fs-table td { padding: 6px 12px; text-align: start; vertical-align: baseline; }
.fs-table thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.fs-table .n { text-align: end; white-space: nowrap; width: 1%; min-width: 120px; }
.fs-table .note { width: 1%; white-space: nowrap; color: var(--ink-3); font-size: 12px; }
.fs-section td { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; padding-top: 18px; color: var(--ink); }
:root:lang(ckb) .fs-section td, :root:lang(ar) .fs-section td { text-transform: none; letter-spacing: 0; font-size: 14px; }
.fs-caption td { font-weight: 700; padding-top: 12px; }
.fs-line td:first-child { padding-inline-start: 24px; }
.fs-acct td { font-size: 12.5px; color: var(--ink-2); padding-top: 2px; padding-bottom: 2px; }
.fs-acct td:first-child { padding-inline-start: 40px; }
.fs-acct a { color: inherit; }
.fs-sub td { font-weight: 700; }
.fs-sub td.n { border-top: 1px solid var(--border-strong); }
.fs-total td { font-weight: 800; }
.fs-total td.n { border-top: 1px solid var(--ink-2); border-bottom: 3px double var(--ink-2); }
.fs-ratio td { color: var(--ink-3); font-size: 12px; }
.fs-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--border); }
.fs-check { display: inline-flex; align-items: center; gap: 6px; }
.fs-table tr.fs-acct:hover td, .fs-table tr.fs-line:hover td { background: var(--surface-2); }
.fs-table .neg { color: var(--critical-ink); }
@media print {
  .fs-table { font-size: 10pt; }
  .fs-acct td { font-size: 9pt; }
  .fs-head { padding-top: 0; }
}

/* ---------------------------------------------------------------- purchases and assets (2026-10-18) */
.q-choices--3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
details.more { margin: 6px 0 4px; }
details.more > summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.asset-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); }
.asset-head > div { background: var(--surface); padding: 12px 16px; }

/* ---------------------------------------------------------------- apps (setup/apps) */
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.appcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; scroll-margin-top: 80px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.appcard:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.appcard--off { background: var(--surface-2, var(--surface)); }
.appcard--off .appcard__ic { background: var(--surface-3); color: var(--ink-3); }
.appcard--planned { border-style: dashed; background: transparent; }
.appcard--planned .appcard__ic { background: var(--ochre-soft); color: var(--ochre-ink); }
.appcard__head { display: flex; gap: 12px; align-items: flex-start; }
.appcard__ic { display: grid; place-items: center; inline-size: 42px; block-size: 42px; flex: none;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.appcard__title { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.appcard__title b { font-size: 15px; }
.appcard__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.appcard__about { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0; }
.appcard__links { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12px; }
.appcard__links > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.appcard__links dt { color: var(--ink-3); min-inline-size: 72px; }
.appcard__links dd { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; }
.appcard__setup { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--warning-ink); }
.appcard__foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.appcard__foot form { margin: 0; }
.appsheet { margin-bottom: 16px; scroll-margin-top: 80px; }
.appsheet__body { display: flex; flex-direction: column; gap: 10px; }
.appsheet__line { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink-2); }
.appsheet__line .icon { flex: none; margin-top: 2px; }
.appsheet__work { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-inline-size: 420px; }
.appsheet__work li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 8px; background: var(--surface-3); font-size: 13px; }
.appsheet__foot { justify-content: flex-end; }
.appsheet__foot form { margin: 0; }
.empty--off > .icon { color: var(--ink-3); }
.empty__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.empty--big .empty__actions .icon { inline-size: 16px; block-size: 16px; color: inherit; }
.empty__needs { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.empty--big .empty__needs .chip { font-size: 12px; }
@media (max-width: 640px) { .appgrid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the app bar (Odoo's way: no sidebar)
   The grid goes home; then the app you are in, its own menu across the top, and the tools.
   An app icon is like a logo: its colour is the same in light and dark, the symbol always white. */
.app.app--top { display: block; }
.app--top .main { min-height: 100vh; }
.appbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 6px;
  block-size: 54px; padding: 0 calc(var(--page-pad) - 8px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border); }
.appbar__home { display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 10px; color: var(--ink-2); flex: none; }
.appbar__home:hover, .appbar__home[aria-current] { background: var(--surface-3); color: var(--ink); }
.appbar__app, .appbar__brand { display: inline-flex; align-items: center; gap: 9px; padding: 0 10px 0 4px; block-size: 38px; flex: 0 1 auto; min-width: 0;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.appbar__app:hover, .appbar__brand:hover { text-decoration: none; }
.appbar__app-name { overflow: hidden; text-overflow: ellipsis; }
.appbar__app-ic { flex: none; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; background: var(--tone); color: #fff; }
.appbar__app-ic .icon { inline-size: 16px; block-size: 16px; }
.appbar__logo { block-size: 30px; inline-size: auto; max-inline-size: 120px; object-fit: contain; }
.appbar__mark { border-radius: 7px; }
.appbar__menu { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.appbar__link { position: relative; display: inline-flex; align-items: center; gap: 6px; block-size: 36px; padding: 0 11px; border-radius: 9px;
  border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.appbar__link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.appbar__link.is-active { color: var(--ink); background: var(--surface-3); }
.appbar__link.is-active::after { content: ""; position: absolute; inset-inline: 11px; inset-block-end: -9px; block-size: 2px; border-radius: 2px; background: var(--ink); }
.appbar__badge { min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 999px; background: var(--critical); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.appbar__drop { inset-inline-end: auto; inset-inline-start: 0; min-inline-size: 230px; }
.appbar .menu__item.is-active { background: var(--surface-3); font-weight: 600; }
.appbar__spacer { flex: 1; min-width: 8px; }
.appbar__tools { display: flex; align-items: center; gap: 4px; flex: none; }
.appbar__tools .lang-btn { block-size: 36px; border-color: transparent; background: transparent; }
.appbar__tools .lang-btn:hover { background: var(--surface-3); }
.appbar__finder { padding: 8px; min-inline-size: 300px; }
.appbar__finder .finder { inline-size: 100%; }
.appbar__user { display: inline-grid; place-items: center; padding: 2px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.appbar__user:hover { box-shadow: 0 0 0 3px var(--surface-3); }
.appbar__usermenu { min-inline-size: 240px; }
.appbar__usermenu form { margin: 0; }
.appbar__who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; }
.appbar__who small { color: var(--ink-3); font-size: 12px; }
.appbar__burger { display: none; }
.appbar__drawer { inset-inline-end: auto; inset-inline-start: 0; min-inline-size: 260px; max-block-size: calc(100vh - 80px); overflow: auto; }
/* a bar that cannot hold its menu folds it into the one button (app.js measures it), and so does a phone */
.appbar.is-cramped .appbar__menu { display: none; }
.appbar.is-cramped .appbar__burger { display: block; }
@media (max-width: 900px) {
  .appbar__menu { display: none; }
  .appbar__burger { display: block; }
  .appbar__drawer { position: fixed; inset-block-start: 58px; inset-inline: 8px; min-inline-size: 0; }
  .appbar__lang, .appbar__ccy span { display: none; }
  .appbar .topbar__btn { display: none; }
}
@media (max-width: 520px) {
  .appbar { padding: 0 6px; gap: 2px; }
  .appbar__ccy, .appbar__tools > [data-action="theme"] { display: none; }   /* light or dark is in the person's own menu */
}

/* ---------------------------------------------------------------- the home screen (launcher.blade.php) */
body.is-home .main { background:
  radial-gradient(1200px 520px at 15% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
  radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--ochre) 10%, transparent), transparent 70%),
  var(--bg); }
.homescreen { max-inline-size: 980px; margin: 18px auto 40px; inline-size: 100%; }
.homescreen__search { display: flex; align-items: center; gap: 10px; max-inline-size: 520px; margin: 0 auto 34px; padding: 0 14px;
  block-size: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.homescreen__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.homescreen__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.homescreen__results { max-inline-size: 520px; margin: -22px auto 28px; padding: 6px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-3); }
.homeresult { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.homeresult:hover, .homeresult:focus-visible { background: var(--surface-3); text-decoration: none; }
.homeresult__dot { inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--tone); flex: none; }
.homeresult__app { color: var(--ink-3); }
.homeresult__app::after { content: " /"; }
.homeresult__label { font-weight: 600; }
.homescreen__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 28px 12px; justify-items: center; }
.appicon { display: flex; flex-direction: column; align-items: center; gap: 10px; inline-size: 112px; padding: 6px 4px;
  border-radius: 14px; color: var(--ink); text-decoration: none; text-align: center; }
.appicon:hover, .appicon:focus-visible { text-decoration: none; }
.appicon[hidden] { display: none; }
.appicon__tile { position: relative; display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 78%, #fff) 0%, var(--tone) 62%);
  color: #fff; box-shadow: 0 8px 18px -10px var(--tone), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform .15s ease, box-shadow .15s ease; }
.appicon__tile .icon { inline-size: 34px; block-size: 34px; stroke-width: 1.8; }
.appicon:hover .appicon__tile, .appicon:focus-visible .appicon__tile { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 26px -12px var(--tone), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.appicon__badge { position: absolute; inset-block-start: -6px; inset-inline-end: -8px; min-inline-size: 22px; block-size: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--critical); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; box-shadow: 0 0 0 2px var(--bg); }
.appicon__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.homescreen__none { text-align: center; color: var(--ink-3); }
@media (max-width: 640px) {
  .homescreen { margin-top: 6px; }
  .homescreen__search { margin-bottom: 24px; }
  .homescreen__grid { grid-template-columns: repeat(4, 1fr); gap: 20px 4px; }
  .appicon { inline-size: 100%; padding: 2px; gap: 7px; }
  .appicon__tile { inline-size: 58px; block-size: 58px; border-radius: 16px; }
  .appicon__tile .icon { inline-size: 28px; block-size: 28px; }
  .appicon__name { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- planning: a place added up from below (plan/_rollup) */
.rollup { scroll-margin-top: 70px; }
.rollup__grand { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; }
.rollup__facts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--ink-2); font-size: 13px; }
.rollup__facts > span { display: inline-flex; align-items: center; gap: 6px; }
.rollup__kind { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.rollup__kind:hover { text-decoration: underline; }
.rollup__sharecol { inline-size: 170px; }
.rollup__sharecol .meter { display: inline-block; inline-size: 110px; vertical-align: middle; margin-inline-end: 6px; }
.rollup__table tfoot th, .rollup__table tfoot td { border-top: 2px solid var(--border-strong); font-weight: 650; }
.rollup__kinds { display: flex; flex-direction: column; gap: 8px; }
.rollup__trade { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 70px; }
.rollup__trade > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.rollup__trade > summary::-webkit-details-marker { display: none; }
.rollup__trade[open] > summary { border-bottom: 1px solid var(--border); }
.rollup__chev { transition: transform .15s; color: var(--ink-3); }
.rollup__trade:not([open]) .rollup__chev { transform: rotate(-90deg); }
[dir="rtl"] .rollup__trade:not([open]) .rollup__chev { transform: rotate(90deg); }
.rollup__trade:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rollup__typed { margin: 8px 0 10px; }
@media (max-width: 640px) { .rollup__sharecol { display: none; } }
.th-sub { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink-3); }
.plan-share { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--accent-ink); }

/* one silfa: its work gathered by kind, each opening to its jobs */
.swork { border-block-start: 1px solid var(--border); }
.swork__group { border-block-end: 1px solid var(--border); }
.swork__group > summary, .swork__row { display: flex; align-items: center; gap: 14px; padding: 11px 18px; }
.swork__group > summary { cursor: pointer; list-style: none; }
.swork__group > summary::-webkit-details-marker { display: none; }
.swork__group > summary:hover { background: var(--surface-2); }
.swork__fold { flex: none; color: var(--ink-3); transition: transform .15s; }
.swork__group:not([open]) .swork__fold { transform: rotate(-90deg); }
:root[dir="rtl"] .swork__group:not([open]) .swork__fold { transform: rotate(90deg); }
.swork__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.swork__name b { display: inline-flex; align-items: center; gap: 6px; }
.swork__name small { color: var(--ink-3); font-size: 12px; }
.swork__fig { color: var(--ink-3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.swork__sum { min-width: 84px; text-align: end; font-variant-numeric: tabular-nums; }
.swork__row { border-block-end: 1px solid var(--border); }
.swork__row--total { justify-content: space-between; background: var(--surface-2); border-block-end: 0; }
.swork__group .table-wrap { border-block-start: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 640px) {
  .swork__group > summary { flex-wrap: wrap; gap: 4px 10px; padding: 11px 14px; }
  .swork__name { flex-basis: calc(100% - 30px); }
  .swork__sum { margin-inline-start: auto; }
}

/* a kind of work's own picture fills its tile, where a line icon sits small in the middle */
.trade-ic .icon--img { inline-size: 76%; block-size: 76%; }

/* the kinds of contract: cards you can read, grouped by how the price works */
.kindpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.kindpick__one { position: relative; display: block; cursor: pointer; }
.kindpick__one input { position: absolute; opacity: 0; pointer-events: none; }
.kindpick__one span { display: flex; flex-direction: column; gap: 3px; block-size: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.kindpick__one span .icon { color: var(--ink-3); }
.kindpick__one small { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.kindpick__one input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.kindpick__one input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* the agreed values on a contract's own page: the label on one side, the value on the other */
.kv.kv--line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block-end: 6px; border-block-end: 1px solid var(--border); }
.kv.kv--line > b { text-align: end; }

/* ---------------------------------------------------------------- tables, alignment and money
   Screen only: printed papers have no .app, so none of this reaches them. */

/* an empty table says so across the whole table, not inside its first column */
.app td.empty, .app th.empty { display: table-cell; text-align: center; }
.app .table td.empty { padding: 32px 20px; }
.app td.empty > .icon { display: block; margin: 0 auto 10px; }
.app .table tbody tr:hover td.empty { background: none; }
/* on a phone the table can be wider than the screen, and its middle would be out of sight */
@media screen and (max-width: 640px) { .app td.empty { text-align: start; } .app td.empty > .icon { margin-inline: 0; } }

/* the total is what people came for: the size of the rows above it, in ink, not a column heading.
   :where keeps this below reports.css, which pins totals on long tables and sizes them for print */
@media screen {
  :where(.app) .table tfoot :is(th, td) {
    position: static; padding-block: 13px; font-size: 13.2px; font-weight: 680; letter-spacing: 0; text-transform: none;
    color: var(--ink); background: var(--surface-2); border-block: 0;
  }
  :root:lang(ckb) :where(.app) .table tfoot th, :root:lang(ar) :where(.app) .table tfoot th { font-size: 13.2px; }
  :where(.app) .table tfoot tr:first-child > * { border-block-start: 2px solid var(--border-strong); }
  :where(.app) .table tfoot tr + tr > * { border-block-start: 1px solid var(--border); }
  :where(.app) .table--compact tfoot :is(th, td) { padding-block: 9px; }
  /* a total that warns keeps its colour */
  :where(.app) .table tfoot .text-good { color: var(--good-ink); }
  :where(.app) .table tfoot .text-warning { color: var(--warning-ink); }
  :where(.app) .table tfoot .text-critical { color: var(--critical-ink); }
}

/* an icon sits in its line of text; in a flex or grid row this changes nothing */
:where(.app) .icon { display: inline-block; vertical-align: -.15em; }
:where(.app) :where(.cell-sub, .muted, .small, .text-warning, .text-critical, .text-good, td, th, p):where(:not(.row, .help, .empty)) > .icon:first-child { margin-inline-end: 4px; }
/* a wrapper that holds nothing but the icon stays the icon's own height */
:where(.app) :where(.tradecard__go, .bldcard__go, .ask-kind__go, .uplan__lock, .rolecard__tag, .checklist__mark, .photopick__initials, .field__tipbtn, .ucell span) > .icon { display: block; }

/* a label and its value on one line: the label at the start, the value at the end */
:where(.app) div.kv, :where(.app) a.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
:where(.app) .kv > span { min-inline-size: 0; }
:where(.app) .kv > b { min-inline-size: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
:where(.app) div.kv--rule { padding-block: 8px; border-block-end: 1px solid var(--border); }
:where(.app) div.kv--rule:last-child { border-block-end: 0; }
/* in a row of facts the label sits over its value */
:where(.app) :is(.cols-2, .cols-3, .cols-4) > div.kv { flex-direction: column; justify-content: flex-start; gap: 2px; }
:where(.app) :is(.cols-2, .cols-3, .cols-4) > div.kv > b { text-align: start; }

/* the label in a sum is the same small line whether the view wrote small or span */
.app .equation__term > span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.app .equation__term--result > span { color: color-mix(in srgb, var(--surface) 70%, transparent); }

/* English screens draw Kurdish names in the real font, not whatever the device has */
:root:lang(en) .app { font-family: "Archivo", "Noto Sans Arabic", system-ui, sans-serif; }

/* dir="auto" keeps a name's letters in order; the page decides which side it sits on */
:where(:root[dir="ltr"] .app) :where(td, h1, h2, p, b, small, span, .cell-sub, .cell-main, .card__sub, .list-item__title, .tl-item__title)[dir="auto"]:where(:not(.num, .empty, .kv > b)) { text-align: left; }
:where(:root[dir="rtl"] .app) :where(td, h1, h2, p, b, small, span, .cell-sub, .cell-main, .card__sub, .list-item__title, .tl-item__title)[dir="auto"]:where(:not(.num, .empty, .kv > b)) { text-align: right; }
:root[dir="ltr"] .app td[dir="auto"] > .cell-flex { direction: ltr; }
:root[dir="rtl"] .app td[dir="auto"] > .cell-flex { direction: rtl; }
.app td[dir="auto"] > div:not(.cell-flex) { unicode-bidi: plaintext; }
/* a dd fills its column, so its value must not swing back to the label's side */
:root[dir="ltr"] .app .kv dd { text-align: right; }
[dir="rtl"] .app .kv dd { text-align: left; }

/* an empty name box on a Kurdish page: the hint reads from the right; typing Latin still flips it */
[dir="rtl"] .app input[dir="auto"]:placeholder-shown, [dir="rtl"] .app textarea[dir="auto"]:placeholder-shown { direction: rtl; text-align: right; }

/* codes stay left to right but sit under their heading */
[dir="rtl"] .app :is(div, td).mono { text-align: right; }
[dir="rtl"] .app td.mono { direction: rtl; unicode-bidi: plaintext; }

/* Kurdish and Arabic: a figure reads left to right in every table, tile and card, so $ and the minus
   stay in front of it and its last digit sits on the right edge. A heading is words: it only moves to that edge. */
[dir="rtl"] .app .table :is(tbody, tfoot) .num:not(input), [dir="rtl"] .app .fs-table :is(tbody, tfoot) .n, [dir="rtl"] .app .je__line:not(.je__line--head) .num,
[dir="rtl"] .app .fin-grid__v, [dir="rtl"] .app .jcard__value { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .app .table thead .num, [dir="rtl"] .app .fs-table thead .n, [dir="rtl"] .app .je__line--head .num { unicode-bidi: plaintext; text-align: right; }
/* a line of words, a chip or a box under the figure keeps the page's own direction */
[dir="rtl"] .app .table :is(tbody, tfoot) .num > :is(div, label, .chip) { direction: rtl; unicode-bidi: plaintext; }
[dir="rtl"] .app .kv :is(dd, b) { unicode-bidi: plaintext; }
/* a figure, or a name in the other script, turns its cell round and swaps its logical padding,
   so at the table's edge the sides are named and every line in the column starts level */
@media screen {
  :where([dir="rtl"] .app .table :is(tbody, tfoot) > tr) > :is(td.num, th.num, td[dir="auto"]):first-child,
  :where([dir="ltr"] .app .table :is(tbody, tfoot) > tr) > td[dir="auto"]:last-child { padding-left: 12px; padding-right: 20px; }
  :where([dir="rtl"] .app .table :is(tbody, tfoot) > tr) > :is(td.num, th.num, td[dir="auto"]):last-child,
  :where([dir="ltr"] .app .table :is(tbody, tfoot) > tr) > td[dir="auto"]:first-child { padding-left: 20px; padding-right: 12px; }
}
@media screen and (max-width: 640px) {
  :where([dir="rtl"] .app .table :is(tbody, tfoot) > tr) > :is(td.num, th.num, td[dir="auto"]):first-child,
  :where([dir="ltr"] .app .table :is(tbody, tfoot) > tr) > td[dir="auto"]:last-child { padding-right: 16px; }
  :where([dir="rtl"] .app .table :is(tbody, tfoot) > tr) > :is(td.num, th.num, td[dir="auto"]):last-child,
  :where([dir="ltr"] .app .table :is(tbody, tfoot) > tr) > td[dir="auto"]:first-child { padding-left: 16px; }
}