/* TRELLAN: the settings screens. Report 258; the screens, report 262.

   Page-specific rules for this area only, after trellan.css and
   trellan-shell.css. Scope every rule to the page (its own class or
   `.t-<kind>` wrapper); do not restyle shared components here.
   See planning/trellan-screen-guide.md.

   The pages: `.ofs-page` (every /settings/ page, `settings/*.html`),
   `.teams-page`, `.team-page`, `.team-new-page` (Departments) and
   `.sa-page` (Adealia support access). Boards: the "settings" list in
   design/trellan-canvas/qa/by-page.json. */

/* ── 1. The page: 1120 wide, centred, as the boards ─────────────────── */
.ofs-page > *, .teams-page > *, .team-page > *, .team-new-page > *, .sa-page > * {
  max-width: 1120px; margin-inline: auto; width: 100%; box-sizing: border-box;
}
.ofs-page .of-head, .teams-page .of-head, .team-page .of-head,
.team-new-page .of-head, .sa-page .of-head { margin-bottom: 24px; }
.ofs-page .of-head__line, .teams-page .of-head__line, .team-page .of-head__line,
.team-new-page .of-head__line, .sa-page .of-head__line { margin-top: 6px; }
.ofs-page .of-head__back, .teams-page .of-head__back, .team-page .of-head__back,
.team-new-page .of-head__back, .sa-page .of-head__back,
.ofs-page .ofs-back {
  color: var(--leaf); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
/* The form pages (an office, removing a state or a photo, a new
   department): a 760 column, centred. */
.ofs-page.t-form > *, .team-new-page > * { max-width: 760px; margin-inline: auto; width: 100%; box-sizing: border-box; }

/* The header's two names: "Settings", or the chosen section on a phone. */
.ofs-head .ofs-head__here, .ofs-head .ofs-head__back { display: none; }

/* ── 2. The list of sections ────────────────────────────────────────── */
.ofs-page .of-settings { gap: 32px; flex-wrap: nowrap; }
.ofs-page .of-settings__nav { flex: 0 0 200px; border-top: 1px solid var(--ink); }
.ofs-page .of-settings__link { min-height: 0; padding: 14px 12px; line-height: 1.3; }
.ofs-page .of-settings__link .of-settings__chev { display: none; }
.ofs-page .of-settings__body { gap: 24px; }
.ofs-page .of-settings__back, .ofs-page .of-settings[data-chosen] .of-settings__back { display: none; }

/* ── 3. A section card: 24 px, title 20 px, lists under an ink rule ─── */
.ofs-page .of-section,
.ofs-page .of-section--flush { padding: 24px; gap: 18px; margin: 0; overflow: visible; }
.ofs-page .of-section > .of-section__head,
.ofs-page .of-section--flush > .of-section__head { padding: 0; gap: 6px 12px; }
.ofs-page .of-section__title { font-size: 20px; letter-spacing: 1.8px; }
.ofs-page .of-section__body { padding: 0; }
.ofs-page .of-section--flush > .of-section__body { border-top: 1px solid var(--ink); }

.ofs-page .ofs-line { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--hairline); }
.ofs-page .ofs-line__key {
  flex: 0 0 48px; font-family: var(--font-display); font-weight: 500;
  font-size: 14px; letter-spacing: 2px; color: var(--ink);
}
.ofs-page .ofs-line__act { margin-left: auto; }
.ofs-page .ofs-line .of-danger,
.ofs-page .ofs-photo__acts .of-danger,
.team-page .of-danger {
  height: auto; font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--alert-fg); text-decoration: none;
}
.ofs-page .ofs-empty { padding: 14px 0; border-top: 0; }

/* A card's foot: the add form or the Save, on the card, not a grey band. */
.ofs-page .ofs-foot { padding: 18px 0 0; border-top: 0; background: none; gap: 6px; }
.ofs-page .ofs-hint, .ofs-page .ui-hint { font-size: 13px; color: var(--gray); }
.ofs-page .ofs-inline { gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ofs-page .ofs-inline .ui-btn { height: 44px; min-height: 44px; }
.ofs-page .ofs-input { height: 44px; border-color: var(--edge); }
.ofs-page textarea.ofs-input { height: auto; padding: 10px 12px; }
.ofs-page #settingsStates .ofs-inline input.ofs-input--code { flex: 0 1 200px; width: 200px; text-transform: uppercase; }
.ofs-page .ofs-input--zone { flex: 0 1 380px; }

/* Check boxes: 18 px, Leaf. The label is a sentence (no caps). */
.ofs-page input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--leaf); }
.ofs-page .ofs-inline > label, .ofs-page .ofs-check {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15px; color: var(--ink);
}
.ofs-page .ofs-inline:has(> label) { align-items: center; gap: 12px; }

/* The offices: a row, its people under it, a chevron. */
.ofs-page #settingsOffices .of-row { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--hairline); }
.ofs-page #settingsOffices .of-row:hover { background: var(--mist); }
.ofs-page #settingsOffices .of-row__title { font-weight: 600; color: var(--ink); }
.ofs-page #settingsOffices .of-row__sub { font-size: 13px; color: var(--gray); }

/* ── 4. Company details: two columns of fields ──────────────────────── */
.ofs-page .cd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; max-width: none; }
.ofs-page .cd-form > p { grid-column: 1 / -1; margin: 4px 0 0; }
.ofs-page .cd-form > label, .ofs-page .cd-qb > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ofs-page .cd-form .ui-input, .ofs-page .cd-qb .ui-input, .ofs-page .cd-qb .ofs-input { width: 100%; }
.ofs-page .cd-help {
  display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--gray);
}
.ofs-page .cd-qb {
  border: 0; margin: 0; padding: 16px 0; display: grid; gap: 12px 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline);
}
.ofs-page #qbPacket form { border-top: 1px solid var(--ink); }
.ofs-page .cd-qb legend { float: left; width: 100%; grid-column: 1 / -1; padding: 0; margin: 0; }
.ofs-page .cd-qb legend strong { display: block; color: var(--ink); font-weight: 600; }
.ofs-page .cd-qb legend .cd-help { font-size: 13px; }
.ofs-page .cd-qb > label { justify-content: flex-end; }

/* ── 5. Role names ──────────────────────────────────────────────────── */
.ofs-page .ofs-role { padding: 10px 0; }
.ofs-page .ofs-role__name { flex: 0 0 180px; font-weight: 600; color: var(--ink); }
.ofs-page .ofs-role__input { flex: 0 1 360px; }
.ofs-page #settingsRoles .ui-hint { margin: 18px 0 0; max-width: 640px; }

/* ── 6. Reminders ───────────────────────────────────────────────────── */
.ofs-page .ofs-sub { display: flex; flex-direction: column; gap: 6px; }
.ofs-page .ofs-sub__back { align-self: flex-start; margin-bottom: 4px; }
.ofs-page .ofs-sub__title { margin: 0; font-size: 20px; letter-spacing: 1.8px; }
.ofs-page .ofs-sub__line, .ofs-page.ui-page p.ofs-sub__line { margin: 0; color: var(--gray); max-width: none; }
.ofs-page .ofs-reminders .of-list { border-top: 1px solid var(--hairline); }
.ofs-page .settings-cadence { display: flex; flex-direction: column; gap: 12px; }
.ofs-page .ofs-sentence { line-height: 2.9; margin: 0; }
.ofs-page .ofs-sentence .ofs-input { height: 40px; margin: 0 4px; }
.ofs-page .settings-cadence__default { margin: 0; }
.ofs-page .settings-cadence .settings-cadence__on { align-self: flex-start; margin: 0; justify-content: flex-start; }
.ofs-page.ui-page p.ofs-hint { max-width: none; }
.ofs-page .ofs-foot:has(> .ui-btn + .ui-btn) { flex-direction: row; align-items: center; gap: 12px; }
.ofs-page .ofs-reminder-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ofs-page .ofs-sample {
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  background: var(--mist); border-left: 2px solid var(--green);
}
.ofs-page .ofs-sample b { color: var(--ink); font-weight: 600; }
.ofs-page .ofs-sample span { font-size: 13px; color: var(--gray); }
.ofs-page .of-section__head:has(.ofs-pill-right) { flex-wrap: nowrap; align-items: baseline; }
.ofs-page .ofs-pill-right { margin-left: auto; flex: none; }

/* Its words. */
.ofs-page .settings-wording-form { display: flex; flex-direction: column; gap: 14px; }
.ofs-page .settings-wording-form .ofs-field .ofs-hint { font-size: 13px; }
.ofs-page .ofs-fields-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.ofs-page .ofs-fields-list li {
  display: flex; gap: 12px; align-items: baseline; margin: 0;
  padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--charcoal);
}
.ofs-page .ofs-fields-list code {
  flex: none; padding: 2px 6px; background: var(--mist); border: 1px solid var(--hairline);
  font-size: 13px; color: var(--ink);
}

/* ── 7. Colors & photos ─────────────────────────────────────────────── */
.ofs-page .ofs-colors { display: flex; flex-wrap: wrap; gap: 16px; }
.ofs-page .ofs-colors .ofs-field { flex: 0 1 240px; }
.ofs-page .ofs-color { width: 100%; height: 44px; padding: 4px; border: 1px solid var(--edge); background: #FFFFFF; }
.ofs-page .ofs-photo { gap: 16px; align-items: center; flex-wrap: nowrap; }
.ofs-page .ofs-photo__thumb { width: 96px; height: 54px; object-fit: cover; flex: none; }
.ofs-page .ofs-photo__place { flex: none; font-family: var(--font-display); font-weight: 300; font-size: 20px; color: var(--ink); }
.ofs-page .ofs-photo__alt { flex: 1 1 auto; min-width: 0; }
.ofs-page .ofs-photo__alt .ofs-inline { flex-wrap: nowrap; }
.ofs-page .ofs-photo__alt .ofs-input { flex: 1 1 auto; min-width: 0; }
.ofs-page .ofs-photo__acts { display: flex; align-items: center; gap: 4px; flex: none; }
.ofs-page .ofs-photo__acts form { margin: 0; }
.ofs-page .ofs-photo__acts .of-danger { padding: 0 8px; }
.ofs-page .ofs-photo__big { display: block; max-width: 100%; width: 480px; aspect-ratio: 2 / 1; object-fit: cover; }
.ofs-page .ofs-photo__file { padding: 9px 12px; }
.ofs-page #settingsPhotoAdd .ofs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── 8. Fee plans: a plan is a row that opens ───────────────────────── */
.ofs-page #feePlans .of-section__body { border-top: 1px solid var(--ink); }
.ofs-page .fp-plan { border-bottom: 1px solid var(--hairline); padding: 0; }
.ofs-page .fp-plan > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 12px 0; color: var(--ink);
}
.ofs-page .fp-plan > summary::-webkit-details-marker { display: none; }
.ofs-page .fp-plan > summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px;
  border-right: 1.5px solid var(--gray); border-bottom: 1.5px solid var(--gray); transform: rotate(-45deg);
}
.ofs-page .fp-plan[open] > summary::after { transform: rotate(45deg); }
.ofs-page .fp-plan > summary:hover { background: var(--mist); }
.ofs-page .fp-plan__what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ofs-page .fp-plan__what strong { font-weight: 600; }
.ofs-page .fp-help { font-size: 13px; color: var(--gray); }
.ofs-page .fp-plan__for { flex: none; font-size: 13px; color: var(--gray); text-align: right; max-width: 220px; }
.ofs-page .fp-plan__for-line { display: none; }
.ofs-page .fp-plan--add { border-bottom: 0; }
.ofs-page .fp-plan--add > summary {
  display: inline-flex; margin-top: 18px; padding: 0 22px; min-height: 44px;
  border: 1px solid var(--ink); font-family: var(--font-display); font-weight: 500;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
}
.ofs-page .fp-plan--add > summary::after { display: none; }
.ofs-page .fp-form { display: grid; gap: 12px; margin: 4px 0 18px; max-width: 560px; }
.ofs-page .fp-form > label { display: flex; flex-direction: column; gap: 6px; }
.ofs-page .fp-form > label:has(> input[type="checkbox"]) {
  flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: var(--ink);
}
.ofs-page .fp-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ofs-page .fp-amounts > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ofs-page .fp-amounts .ui-input { width: 100%; }
.ofs-page .fp-form > p { margin: 0; }
.ofs-page #qbStandards form { border-top: 1px solid var(--ink); }
.ofs-page .fp-line { display: flex; align-items: center; gap: 16px; padding: 10px 0; flex-wrap: nowrap; }
.ofs-page .fp-line > span { flex: 0 0 280px; font-weight: 600; color: var(--ink); }
.ofs-page .fp-line > .ofs-input { flex: 1 1 auto; min-width: 0; }

/* ── 9. Support access (the settings card) ──────────────────────────── */
.ofs-page .ofs-visits { display: flex; align-items: center; gap: 24px; padding: 16px; background: var(--mist); }
.ofs-page .ofs-visits b { display: block; font-family: var(--font-display); font-weight: 300; font-size: 24px; color: var(--ink); }

/* Adealia support access, the record (`support_access/index.html`). */
.sa-page .ui-page-head { max-width: 1120px; margin: 0 auto 24px; width: 100%; box-sizing: border-box; }
.sa-page .ui-page-head h1 { font-weight: 300; font-size: 32px; letter-spacing: 2px; margin-top: 8px; }
.sa-page .ui-page-head__sub { font-size: 15px; color: var(--gray); max-width: 72ch; margin-top: 6px; }
.sa-page .ui-stack { max-width: 1120px; margin-inline: auto; width: 100%; box-sizing: border-box; }
.sa-page .ui-state { padding: 40px 24px; border: 1px solid var(--hairline); text-align: center; }
.sa-page .ui-state__title { font-weight: 300; font-size: 20px; letter-spacing: 1.8px; }
.sa-page .ui-state__ico { color: var(--leaf); }

/* ── 10. Remove a state, remove a photo ─────────────────────────────── */
.ofs-page .ofs-consequences { list-style: none; padding: 0; margin: 0; gap: 0; border-top: 1px solid var(--ink); }
.ofs-page .ofs-consequences li {
  position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--hairline); color: var(--ink);
}
.ofs-page .ofs-consequences li::before {
  content: ""; position: absolute; left: 2px; top: 20px; width: 6px; height: 6px; background: var(--charcoal);
}
.ofs-page.t-form .of-formbar { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.ofs-page .of-section .of-formbar { margin: 0; padding: 0; border: 0; background: none; position: static; box-shadow: none; }

/* ── 11. Departments ────────────────────────────────────────────────── */
.teams-page .teams-row__lead.is-missing {
  justify-self: start; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; background: var(--warn-bg); color: var(--warn-fg); font-size: 13px;
}
.teams-page .teams-row__lead.is-missing::before { content: ""; width: 8px; height: 8px; background: var(--warn-dot); }
.teams-page .teams-row__waiting { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.team-new-page .team-form, .team-page .team-form { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.team-new-page .team-form__title { margin: 0; font-size: 20px; letter-spacing: 1.8px; }
.team-new-page .settings-field, .team-page .settings-field {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gray);
}
.team-new-page .settings-field input, .team-page .settings-field input,
.team-page .settings-field select {
  height: 44px; width: 100%; font-family: var(--font-sans); font-size: 15px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.team-new-page .of-formbar { border-top: 1px solid var(--hairline); padding-top: 18px; margin-top: 4px; }

/* One department: cards of 24 px, titles 20 px light, caps field labels,
   fields one under the other, the holder with a square avatar. */
.team-page .of-detail { gap: 24px; }
.team-page .ui-card { padding: 24px; margin: 0 0 24px; display: flex; flex-direction: column; gap: 14px; }
.team-page .ui-card__head { margin: 0; padding: 0; }
.team-page.ui-page .ui-card h2.ui-card__title { font-weight: 300; font-size: 20px; letter-spacing: 1.8px; margin: 0; }
.team-page .lic-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.team-page .lic-item { padding: 10px 0; border: 0; border-bottom: 1px solid var(--hairline); background: none; margin: 0; }
.team-page .lic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-page .lic-name { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.team-page .team-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; background: var(--charcoal); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 1px;
}
.team-page .prof-grid { display: flex; flex-direction: column; gap: 14px; }
.team-page .prof-grid > label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gray);
}
.team-page .prof-grid select, .team-page .prof-grid input {
  height: 44px; width: 100%; font-family: var(--font-sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.team-page #firmRoleAdd { display: flex; align-items: flex-end; gap: 10px; }
.team-page #firmRoleAdd .prof-grid { flex: 1 1 auto; min-width: 0; }
.team-page #firmRoleAdd .lic-actions { margin: 0; }
.team-page #firmRoleAdd .lic-actions .ui-btn { min-height: 44px; }
.team-page .lic-actions { margin: 14px 0 0; }
.team-page .ui-hint, .team-page .prof-note { font-size: 13px; color: var(--gray); margin: 0; }
.team-page #firmRoleLead .prof-note { font-size: 15px; }
.team-page .of-detail__aside .ui-card { padding: 20px; }
.team-page .teams-archive { padding: 0; background: none; border: 0; cursor: pointer; }
@media (max-width: 759.98px) {
  .team-page .ui-card { padding: 16px; }
  .team-page #firmRoleAdd { flex-direction: column; align-items: stretch; }
  /* The board's order on a phone: the facts, the three cards, Archive
     last. The aside's two parts join the column so each can be placed. */
  .team-page .of-detail { display: flex; flex-direction: column; gap: 0; }
  .team-page .of-detail__aside { display: contents; }
  .team-page .of-detail__aside > .of-facts { order: 0; margin-bottom: 16px; align-self: stretch; width: 100%; box-sizing: border-box; }
  .team-page .of-detail__main { order: 1; }
  .team-page .of-detail__aside > :not(.of-facts) { order: 2; align-self: stretch; width: 100%; box-sizing: border-box; }
  .team-page .lic-actions .ui-btn { width: 100%; justify-content: center; }
}

/* ── 12. Phone ──────────────────────────────────────────────────────── */
@media (max-width: 759.98px) {
  .ofs-page .of-settings { flex-wrap: wrap; gap: 16px; }
  /* A chosen section: "‹ Settings", then the section's own name. */
  .ofs-page:has(.of-settings[data-chosen]) .ofs-head__all { display: none; }
  .ofs-page:has(.of-settings[data-chosen]) .ofs-head__here,
  .ofs-page:has(.of-settings[data-chosen]) .ofs-head__back { display: inline-flex; }
  .ofs-page:has(.of-settings[data-chosen]) .ofs-head__back { min-height: 44px; margin-bottom: 4px; }
  .ofs-page:has(.of-settings[data-chosen]):not(:has(#settingsStates)) .ofs-head .of-head__line { display: none; }
  .ofs-page .of-head { margin-bottom: 16px; }
  .ofs-page .ofs-head--sub .of-head__line { display: none; }
  .ofs-page .ofs-sub__back, .ofs-page .ofs-sub__title { display: none; }
  .ofs-page .ofs-sub:not(:has(.ofs-sub__line)) { display: none; }

  /* The list of sections, as the phone board: icon, sentence-case words,
     a chevron, a hairline under each. */
  .ofs-page .of-settings__nav {
    flex: 1 1 100%; padding: 0; border: 0; border-top: 1px solid var(--ink); background: none;
  }
  .ofs-page .of-settings__link {
    gap: 16px; padding: 18px 0; min-height: 64px;
    font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0;
    text-transform: none; color: var(--ink);
  }
  .ofs-page .of-settings__link[aria-current] { background: none; box-shadow: none; font-weight: 600; }
  .ofs-page .of-settings__link .ms { display: inline-block; font-size: 22px; color: var(--charcoal); }
  .ofs-page .of-settings__link .of-settings__chev { display: inline-block; margin-left: auto; color: var(--charcoal); }

  .ofs-page .of-section, .ofs-page .of-section--flush { padding: 16px; gap: 16px; }
  .ofs-page .ofs-line { padding: 14px 0; flex-wrap: nowrap; }
  .ofs-page .ofs-line__text { flex: 1 1 auto; font-size: 14px; }
  /* Report 269: a state's line has a long counts text and a long hint, so it
     wraps; with nowrap, "727 licenses, 727 brokers" was squeezed to one
     word per line beside the hint. */
  .ofs-page #settingsStates .ofs-line { flex-wrap: wrap; }
  .ofs-page .ofs-inline { flex-direction: column; align-items: stretch; }
  .ofs-page .ofs-inline .ui-btn, .ofs-page .ofs-foot .ui-btn,
  .ofs-page .ofs-actions .ui-btn, .ofs-page .cd-form > p .ui-btn,
  .ofs-page .fp-form .ui-btn, .ofs-page .ofs-reminder-acts .ui-btn { width: 100%; justify-content: center; align-self: stretch; }
  .ofs-page #settingsStates .ofs-inline input.ofs-input--code, .ofs-page .ofs-input--zone { width: 100%; flex: none; max-width: none; }
  .ofs-page .ofs-inline > label { min-height: 44px; }
  .ofs-page .ofs-foot:has(> .ui-btn + .ui-btn) { flex-direction: column; align-items: stretch; }

  /* The first card of company details, fee plans and support access
     says the page's own name; on a phone the title above says it. */
  .ofs-page #companyDetails > .of-section__head .of-section__title,
  .ofs-page #feePlans > .of-section__head .of-section__title,
  .ofs-page #settingsSupportAccess > .of-section__head .of-section__title { display: none; }

  .ofs-page .cd-form, .ofs-page .cd-qb { grid-template-columns: minmax(0, 1fr); }
  .ofs-page .ofs-role { flex-direction: column; align-items: stretch; gap: 6px; }
  .ofs-page .ofs-role__name, .ofs-page .ofs-role__input { flex: none; max-width: none; }
  .ofs-page .ofs-photo { flex-wrap: wrap; }
  .ofs-page .ofs-photo__alt { flex: 1 1 100%; }
  .ofs-page .ofs-photo__alt .ofs-inline { flex-direction: row; }
  .ofs-page .ofs-photo__alt .ofs-inline .ui-btn { width: auto; }
  .ofs-page #settingsPhotoAdd .ofs-fields { grid-template-columns: minmax(0, 1fr); }
  .ofs-page .fp-plan__what { font-size: 15px; }
  .ofs-page .fp-plan__for { display: none; }
  .ofs-page .fp-plan__for-line { display: block; color: var(--charcoal); }
  .ofs-page .fp-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofs-page .fp-line { flex-direction: column; align-items: stretch; gap: 6px; }
  .ofs-page .fp-line > span { flex: none; }
  .ofs-page .ofs-sentence { line-height: 2.9; }
  .ofs-page .of-formbar .ui-btn { flex: 1 1 100%; justify-content: center; }
  .ofs-page .ofs-photo__big { width: 100%; }
}