/* A settings screen's switch rows and its states, as the prototype draws them (A2.html .gblock, .tglrow, .tgl, .oneline);
   values are tokens. */
.gblock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-row);
  margin-top: var(--spacing-gap);
  padding: var(--spacing-md) var(--spacing-window);
  background-color: var(--app-surface);
  border-block: 1px solid var(--app-line-strong);
}

.tglrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  min-height: 48px;
}

.tgll {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.tgll small {
  font-size: var(--font-size-meta);
  font-weight: 400;
  color: var(--app-muted);
  line-height: 1.6;
}

/* the switch: a pill whose knob sits at the start when off and at the end when on (right to left) */
.tgl {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--app-raise);
  cursor: pointer;
  transition: background-color 0.15s;
}

.tgl::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background-color: var(--app-surface);
  transition: inset-inline-start 0.15s;
}

.tgl[aria-checked="true"] {
  border-color: var(--app-btn);
  background-color: var(--app-btn);
}

.tgl[aria-checked="true"]::after {
  inset-inline-start: 23px;
}

.tgl:disabled {
  cursor: progress;
  opacity: 0.6;
}

.oneline {
  margin: var(--spacing-row) var(--spacing-window) 0;
  font-size: var(--font-size-meta);
  color: var(--app-ink-soft);
  line-height: 1.8;
}

/* «ما يفعله الوكيل وحده» (A2.html .glist, .presetradio, .prdot, .prw, .lockrow, details.sec): a heading, then a list of rows
   on the window margin, one divider between two rows, a gap of its own before each part */
.glist {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-sm);
  background-color: var(--app-surface);
  border-block: 1px solid var(--app-line-strong);
}

.glist > * + * {
  border-top: 1px solid var(--app-line);
}

.glist + .hubl,
.oneline + .hubl {
  margin-top: var(--spacing-lg);
}

/* a heading of a settings screen starts on the same window margin as its rows (the report's heading keeps its own) */
.hubl.hubl-window {
  padding-inline: var(--spacing-window);
}

/* a heading with its (!) beside it (T132): the mark is not inside the heading, so the heading keeps its window margin */
.hubhead {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.hubhead > .hubl {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

.presetradio {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-window);
}

.presetradio[tabindex] {
  cursor: pointer;
}

.presetradio.on {
  background-color: var(--app-raise);
}

.prdot {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--app-muted);
  border-radius: var(--radius-pill);
  color: var(--app-btn-ink);
}

.presetradio.on .prdot {
  border-color: var(--app-btn);
  background-color: var(--app-btn);
}

.prdot svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.prw {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--spacing-xs);
  min-width: 0;
}

.prw b,
.lockrow b {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.prw small,
.lockrow small {
  font-size: var(--font-size-meta);
  color: var(--app-muted);
  line-height: 1.6;
}

.lockrow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-window);
}

/* the threshold row sits on the same window margin as the list rows above it */
.glist + .gblock {
  margin-top: var(--spacing-lg);
}

details.sec {
  margin-top: var(--spacing-lg);
  background-color: var(--app-surface);
  border-block: 1px solid var(--app-line-strong);
}

details.sec > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--spacing-window);
  background-color: var(--app-raise);
  font-size: var(--font-size-sm);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

details.sec > summary::-webkit-details-marker {
  display: none;
}

details.sec > .gblock {
  margin-top: 0;
  border-block: 0;
}

/* loading and error: the line, then a full-width progress bar or the button to try again */
.mstate {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-row);
  padding: var(--spacing-md) var(--spacing-window);
}

.mstate p {
  margin: 0;
  font-size: var(--font-size-meta);
  color: var(--app-ink-soft);
  line-height: 1.8;
}

.mprog {
  width: 100%;
  height: 6px;
  accent-color: var(--app-btn);
}

/* «التسعير والأسواق» (DEMO.html .hubl, .field, .frow3, .unitwrap, .selbtn, .vatline, .err, .flp): the titled blocks, the
   fields with their ₪ and % suffixes (one alignment: the suffix after the number, the number left to right), the lines. */
.pricing {
  padding-block-end: var(--spacing-lg);
}

/* its headings are `hubl hubl-window` (on the window margin, above) */
.pricing .hubl {
  margin: var(--spacing-lg) 0 0;
}

.gblock .oneline {
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.field > label {
  font-size: var(--font-size-meta);
  font-weight: 700;
  color: var(--app-ink-soft);
  line-height: 1.5;
}

.frow3,
.frow {
  display: grid;
  gap: var(--spacing-sm);
}

.frow3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.frow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* the one box every control of the form wears */
.unitwrap,
.selbtn,
.field > input,
.field > textarea,
.field > select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding-inline: var(--spacing-sm);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--app-raise);
  color: var(--app-ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.unitwrap {
  display: flex;
  align-items: center;
  direction: ltr;
}

.unitwrap:focus-within {
  outline: 2px solid var(--app-btn);
}

.field input {
  text-align: end;
}

.unitwrap input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
}

.unitwrap input:focus {
  outline: none;
}

.unitsuffix {
  flex: none;
  padding-inline-start: var(--spacing-sm);
  font-size: var(--font-size-meta);
  color: var(--app-muted);
}

.selbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: start;
  cursor: pointer;
}

.selbtn::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border: solid var(--app-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vatline {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 44px;
}

.vatline .unitwrap {
  flex: 1;
  width: auto;
}

.vatline .oneline {
  margin: 0;
}

/* a refused value and a note: a bar of the danger colour beside the line, never a coloured box round the text */
.err,
.wline {
  display: block;
  margin: 0;
  padding-inline-start: var(--spacing-sm);
  border-inline-start: 3px solid var(--color-danger);
  font-size: var(--font-size-meta);
  color: var(--app-ink);
  line-height: 1.7;
}

.wline[hidden] {
  display: none;
}

.notes .wline {
  margin: var(--spacing-gap) var(--spacing-window) 0;
}

.endact {
  margin: var(--spacing-lg) var(--spacing-window) 0;
}

.mbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mrow {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.mw {
  min-width: 0;
  font-size: var(--font-size-sm);
}

/* a row of the settings hub (A2.html .mrow, .mic, .mw b/small): the icon in its box, the name and its line, the chevron */
.hubrow {
  gap: var(--spacing-gap);
  width: 100%;
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-window);
  border: 0;
  background-color: transparent;
  color: var(--app-ink);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.hubrow + .hubrow {
  border-top: 1px solid var(--app-line);
}

.hubrow .mic {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
}

.hubrow svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hubrow > svg {
  flex: none;
  color: var(--app-muted);
}

.hubrow .mw {
  flex: 1;
}

.hubrow .mw b,
.hubrow .mw small {
  display: block;
}

.hubrow .mw small {
  color: var(--app-muted);
  font-size: var(--font-size-meta);
}

/* the hub's first heading keeps the prototype's space under the bar (A2.html .hubl margin-top) */
.hubl.hubtop {
  margin-top: var(--spacing-lg);
}

/* one's own sheet: the line under the role sits on the sheet's own gap */
.msheet .oneline.mine {
  margin: 0;
}

/* the markets sheet: a tick and the market's name */
.fl {
  display: flex;
  flex-direction: column;
}

.flp {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--app-ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-align: start;
  cursor: pointer;
}

.fck {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 2px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
}

.fck.on {
  border-color: var(--app-btn);
  background-color: var(--app-btn);
}

.fck.on::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 6px;
  width: 5px;
  height: 11px;
  border: solid var(--app-btn-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* «الوضع الجاهز» (DEMO.html .presetradio.off, .prnote, .costline, .route): a mode not yet tested stays visible, dimmed, with its
   note; the cost range keeps one line; the (i) sheet's route is a row of the three engines with a gap between */
.presetradio.off {
  opacity: 0.55;
}

.presetradio .costline {
  flex: none;
  font-size: var(--font-size-meta);
  color: var(--app-ink-soft);
}

.prw .prnote {
  color: var(--app-btn);
}

.route {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.oneline + .oneline,
.oneline + .err {
  margin-top: var(--spacing-gap);
}

.oneline + .err {
  margin-inline: var(--spacing-window);
}

/* «الاتصالات» (DEMO.html .addact, .fgh, .tres, .lnk.danger): the add button under the list, the keys' heading, the test's
   answer as a bar beside the line (never a coloured box round it), the key's «إزالة»; every value is a token */
.addact {
  padding: var(--spacing-md) var(--spacing-window) 0;
}

.msheet .fgh {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-meta);
  font-weight: 800;
  color: var(--app-ink-soft);
}

.tres {
  margin: 0;
  padding-inline-start: var(--spacing-sm);
  border-inline-start: 3px solid var(--color-danger);
  font-size: var(--font-size-meta);
  color: var(--app-ink);
  line-height: 1.7;
}

.tres.ok {
  border-inline-start-color: var(--color-success);
}

.msheet .lnk {
  min-height: 44px;
  padding: 0 var(--spacing-sm);
  border: 0;
  background-color: transparent;
  color: var(--app-btn);
  font-family: inherit;
  font-size: var(--font-size-title);
  font-weight: 800;
  cursor: pointer;
}

.msheet .lnk.danger {
  color: var(--color-danger);
}

.msheet .lnk:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.msheet .connstack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.msheet .connstack > div:empty,
.msheet-body > div:empty {
  display: none;
}