/* The clinic's look, taken from the Access forms (shots/form-8.png): a grey title band over a teal body,
   pale green labels with a black shadow, white boxes, light grey buttons whose main words are red and
   bold. Arabic, right to left, in Tahoma. Runs in Chromium 108 and Safari 15: no nesting, :has(),
   @container or text-wrap.

   Phone or PC is the device's, not the width's alone. The phone layout and the phone's controls are for a
   window under 700 px wide, and for a touch-only screen under 700 px high, which is a phone held on its
   side (the S22 is about 823 × 340 then):
     @media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px)
   login.js asks the same question (PHONE). The clinic PC, the program included, has a mouse, so it is
   never touch-only and keeps the PC layout at any size from 700 px wide up.

   This is the Classic look, and the base every look builds on (looks.css and look-<id>.css change only
   what their own :root[data-look] selects). The text size of the device (Settings → المظهر) is --ts: every
   font size here is its size at 100 % times --ts, and so is every height that holds a line of text, so at
   100 % the look is exactly Access's. Above 100 % a few rules change the layout where the larger letters
   need the room; each starts :root[data-text]:not([data-text="100"]), so none can apply at 100 %. */

:root {
  --ts: 1;
  --band: #C0C0C0;
  --teal: #008080;
  --label: #CCFFCC;
  --red: #FF0000;
  --strip: #B00020;
  --button: #F0F0F0;
  --edge: #707070;
  --focus: #FFCC00;
}

/* The text size of this device (Settings → المظهر, look-early.js puts data-text on <html>): every font size
   is its size at 100 % times --ts, and so is every height that holds a line of text. */
:root[data-text="115"] {
  --ts: 1.15;
}

:root[data-text="130"] {
  --ts: 1.3;
}

:root[data-text="150"] {
  --ts: 1.5;
}

:root[data-text="175"] {
  --ts: 1.75;
}

*, *::before, *::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* What only the modern looks show (looks.css): the shared pieces (shell.js: the brand, the side panel, the
   patient's header, the tabs, the toolbar and the bottom bar), and the whole-value box of a long text box
   (long.js). Classic keeps Access's form and its one-line boxes. */
.shell,
.long {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--teal);
  color: #000;
  font-family: Tahoma, Arial, sans-serif;
  font-size: calc(16px * var(--ts));
  line-height: 1.5;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* The title band, grey with a white rule under it, as on every Access form. */
.band {
  background: var(--band);
  border-bottom: 2px solid #FFFFFF;
  box-shadow: 0 1px 0 #808080;
}

.band h1 {
  margin: 0;
  padding: 12px 24px;
  font-size: calc(22px * var(--ts));
  font-weight: bold;
  line-height: 1.3;
}

/* A pale green label with its black shadow to the right and below. */
.label {
  display: block;
  background: var(--label);
  box-shadow: 3px 3px 0 #000;
  padding: 6px 10px;
  font-size: calc(14px * var(--ts));
  font-weight: bold;
  line-height: 1.4;
}

.field {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
}

.box,
.field input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  background: #FFFFFF;
  border: 1px solid var(--edge);
  border-radius: 0;
  font-size: calc(16px * var(--ts));
}

.field input:focus,
.box:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* Access's raised grey button; .btn-main has the red bold words of "الى المراجعات" and "بطاقة جديدة". */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 20px;
  background: var(--button);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #FFFFFF, 2px 2px 0 rgba(0, 0, 0, 0.35);
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

.btn:active {
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
  transform: translate(1px, 1px);
}

.btn:focus-visible,
.link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn[disabled] {
  color: #808080;
  cursor: default;
}

.btn-main {
  color: var(--red);
  font-size: calc(18px * var(--ts));
}

.btn-main[disabled] {
  color: #C08080;
}

.link {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  background: none;
  border: 0;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
}

.note {
  margin: 0 0 18px;
  color: #FFFFFF;
  font-weight: bold;
}

.msg {
  margin: 0 0 18px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
  color: var(--strip);
  font-weight: bold;
}

/* The sign-in page: the form on the right, and on the PC the QR on the left. */
.login-main {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 24px;
}

.login-panel {
  flex: 1 1 340px;
  max-width: 460px;
  min-width: 0;
}

/* Above 100 %, the form may grow with its letters, so a box keeps room beside its label. */
:root[data-text]:not([data-text="100"]) .login-panel {
  max-width: calc(460px * var(--ts));
}

.login-form {
  margin: 0;
}

/* «إعادة إرسال الرمز» counts its 2:00 down in figures of one width, so the button does not twitch. */
.btn-resend {
  font-variant-numeric: tabular-nums;
}

.qr-panel {
  flex: 0 0 260px;
  background: #FFFFFF;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
}

.qr-panel h2 {
  margin: 0;
  padding: 8px 12px;
  background: var(--band);
  border-bottom: 1px solid #000;
  font-size: calc(16px * var(--ts));
}

.qr-panel img {
  display: block;
  width: 220px;
  height: 220px;
  margin: 16px auto 8px;
}

.qr-panel p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: calc(14px * var(--ts));
}

@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  .qr-panel {
    display: none;
  }

  .band h1 {
    padding: 10px 16px;
    font-size: calc(20px * var(--ts));
  }

  .login-main {
    padding: 20px 16px;
  }

  .login-panel {
    flex-basis: 100%;
  }

  .field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .field .label {
    justify-self: start;
  }

  .actions .btn {
    flex: 1 1 auto;
  }
}

/* The offline strip: a 24 px red bar fixed at the top, its words and the waiting count travelling from
   the left edge to the right edge every 14 seconds. It moves with Reduce Motion on too: the owner asked
   for a moving strip, and his phone has Reduce Motion on. */
.strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: calc(24px * var(--ts));
  overflow: hidden;
  background: var(--strip);
  color: #FFFFFF;
  font-size: calc(13px * var(--ts));
  font-weight: bold;
  line-height: calc(24px * var(--ts));
}

.strip-text {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  animation: strip-move 14s linear infinite;
  will-change: transform;
}

@keyframes strip-move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100vw);
  }
}

.strip-on body {
  padding-top: calc(24px * var(--ts));
}

/* The download screen over the page while the device's copy comes down: nothing can be typed under it. */
.download {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--teal);
}

.download-box {
  width: 100%;
  max-width: 440px;
  padding: 20px 24px;
  background: var(--band);
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
}

.download-text {
  margin: 0 0 14px;
  font-size: calc(18px * var(--ts));
  font-weight: bold;
}

.download-bar {
  height: 14px;
  background: #FFFFFF;
  border: 1px solid #000;
  overflow: hidden;
}

.download-fill {
  height: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.2s linear;
}

/* Where a save is: on the device, or on the server too. */
.save-mark {
  font-size: calc(14px * var(--ts));
  font-weight: bold;
  color: #FFFFFF;
}

.save-mark[data-save-mark="pending"] {
  color: var(--focus);
}

/* Something typed on the card is not saved yet. */
.save-mark[data-unsaved-mark] {
  color: #FFC48A;
}

/* The patient card (form 8, البطاقة). From 700 px up, as in Access: the fields on the right, each green
   label to the right of its white box, the name in a larger green box; the red buttons, ✓ and ↶ in the
   middle; the five list buttons, STOP, the binoculars and the exit icon on the left; the record bar at
   the foot. On a phone, one column in that order, with the record bar fixed at the foot; on a phone held
   on its side the record bar comes after the tools instead, so the card has the whole height. */
.card-page {
  padding-bottom: calc(52px * var(--ts));
}

.notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: #FFFF99;
  border-bottom: 1px solid #000;
  font-weight: bold;
}

.notice-text {
  flex: 1 1 auto;
  min-width: 0;
}

.notice-close {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 36px;
  background: var(--button);
  border: 1px solid var(--edge);
  font-size: calc(20px * var(--ts));
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.card-msg {
  margin: 14px 24px 0;
}

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px 48px;
  padding: 28px 24px 24px;
}

.card-fields {
  display: grid;
  grid-template-columns: 9.5em 12em 9.5em;
  column-gap: 18px;
  row-gap: 12px;
  align-items: start;
}

.f {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

.f-wide {
  grid-column: 1 / 4;
}

/* Above 100 %, the card's em columns may narrow (a window not maximised has no room for them at the larger
   sizes): the label keeps its width while it can, the box takes the rest, and the middle buttons wrap. The
   phone's own columns come later and keep theirs. */
:root[data-text]:not([data-text="100"]) .card-fields {
  grid-template-columns: minmax(0, 9.5em) minmax(0, 12em) minmax(0, 9.5em);
}

:root[data-text]:not([data-text="100"]) .f {
  grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr);
}

.f .label {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
}

.f-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.card .box {
  min-height: 34px;
  padding: 4px 8px;
  font-size: calc(15px * var(--ts));
  box-shadow: inset 1px 1px 0 #A0A0A0;
}

.card .box:focus,
.card .check:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.box-number {
  text-align: right;
}

.box-select {
  appearance: auto;
}

/* The name: a larger pale green box with the labels' black shadow. */
.card .box-name {
  min-height: 44px;
  background: var(--label);
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
  font-size: calc(18px * var(--ts));
}

.f-name .label {
  margin-top: 5px;
}

.check {
  width: calc(22px * var(--ts));
  height: calc(22px * var(--ts));
  margin: 6px 0;
  align-self: flex-start;
  accent-color: #404040;
  cursor: pointer;
}

/* Beside a field: why a value can not be kept, a repeated card number, a field to check. */
.f-msg,
.f-warn {
  display: block;
  padding: 2px 8px;
  border: 1px solid #000;
  font-size: calc(13px * var(--ts));
  font-weight: bold;
}

.f-msg {
  background: #FFFFFF;
  color: var(--strip);
}

.f-warn {
  background: #FFFF99;
  color: #000;
}

/* A box brought back from its draft (typed, then the window closed or an update came): not saved yet. */
.f-unsaved {
  display: block;
  padding: 2px 8px;
  background: #FFE0B2;
  border: 1px solid #000;
  color: #000;
  font-size: calc(13px * var(--ts));
  font-weight: bold;
}

.card [data-unsaved] {
  outline: 2px dashed #CC5500;
  outline-offset: 1px;
}

.review-mark {
  align-self: flex-start;
  min-height: 30px;
  padding: 2px 10px;
  background: #FFFF00;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 #000;
  color: #000;
  font-size: calc(13px * var(--ts));
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

.review-mark:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

.mid {
  grid-column: 3;
  min-width: 0;
}

.mid-visits {
  grid-row: 3 / 5;
  align-self: center;
}

.mid-new {
  grid-row: 5 / 7;
  align-self: center;
}

.mid-save {
  grid-row: 7 / 9;
}

.mid .btn-main {
  width: 100%;
  min-height: 56px;
  padding: 6px 10px;
}

.save-buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 10px;
}

.btn-icon {
  width: 46px;
  min-height: 44px;
  padding: 0;
}

.mid-save .save-mark {
  display: block;
  margin-top: 10px;
  text-align: center;
}

.card-lists {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 13em;
}

.btn-list {
  min-height: 40px;
  padding: 4px 12px;
  font-size: calc(15px * var(--ts));
  line-height: 1.35;
  text-align: center;
}

.tools {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.tool {
  width: 48px;
  min-height: 48px;
  padding: 0;
}

.btn-scan {
  display: none;
}

/* Access's record bar: first, previous, the card's place "n من total", next, last, new. Right to left,
   the first end is on the right and each arrow points the way it goes. */
.recbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 2px;
  height: calc(40px * var(--ts));
  padding: 0 12px;
  background: var(--button);
  border-top: 1px solid #808080;
  box-shadow: 0 -1px 0 #FFFFFF inset;
  font-size: calc(14px * var(--ts));
}

.rec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.rec-btn:hover {
  border-color: var(--edge);
  background: #FFFFFF;
}

.rec-btn:focus-visible,
.rec-pos:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.rec-btn[disabled] {
  cursor: default;
}

.rec-btn[disabled] svg {
  opacity: 0.3;
}

.rec-where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px;
  min-width: 0;
}

.rec-pos {
  width: 6em;
  height: calc(28px * var(--ts));
  padding: 0 6px;
  background: #FFFFFF;
  border: 1px solid #808080;
  border-radius: 0;
  font-size: calc(14px * var(--ts));
  text-align: center;
}

.rec-count {
  white-space: nowrap;
}

/* The dialogs: Find, and the values of a field to check. */
.dialog {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  background: var(--teal);
  border: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  color: #000;
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.dialog-band {
  margin: 0;
  padding: 10px 16px;
  background: var(--band);
  border-bottom: 2px solid #FFFFFF;
  font-size: calc(18px * var(--ts));
  font-weight: bold;
}

.dialog-body {
  padding: 16px;
}

.dialog-note {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-weight: bold;
}

/* Wide enough for Find's label beside its box: the PC, and a phone on its side. */
@media (min-width: 700px) {
  .find-dialog .field {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.find-results {
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid #000;
}

.find-results:empty {
  display: none;
}

.find-hit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 0;
  border-bottom: 1px solid #C0C0C0;
  text-align: right;
  cursor: pointer;
}

.find-hit:hover,
.find-hit:focus {
  background: var(--label);
  outline: none;
}

.find-name {
  min-width: 0;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.find-card {
  flex: 0 0 auto;
  color: #404040;
}

.review-what {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-weight: bold;
}

.review-options {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.review-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
}

.review-value {
  flex: 1 1 12em;
  min-width: 0;
  font-size: calc(16px * var(--ts));
  font-weight: bold;
  overflow-wrap: anywhere;
}

.review-meta {
  flex: 1 1 12em;
  min-width: 0;
  font-size: calc(13px * var(--ts));
  color: #404040;
}

/* A new row's values in a review: one field a line, its name before its value. */
.review-fields {
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-field-name {
  font-weight: normal;
  color: #404040;
}

@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  .card-page {
    padding-bottom: calc(68px * var(--ts));
  }

  .card-msg {
    margin: 12px 16px 0;
  }

  .card {
    display: block;
    padding: 16px 16px 20px;
  }

  .card-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
  }

  .f,
  .f-wide {
    grid-column: 1 / -1;
    grid-template-columns: 9em minmax(0, 1fr);
    column-gap: 10px;
  }

  .f .label {
    padding: 4px 8px;
  }

  .card .box {
    min-height: 40px;
    font-size: calc(16px * var(--ts));
  }

  .card .box-name {
    min-height: 46px;
  }

  .f-name .label {
    margin-top: 6px;
  }

  .check {
    width: calc(26px * var(--ts));
    height: calc(26px * var(--ts));
  }

  .review-mark {
    min-height: 40px;
  }

  .mid-save {
    grid-column: 1 / -1;
    grid-row: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
  }

  .save-buttons {
    flex-direction: row;
    justify-content: flex-start;
  }

  .btn-icon {
    width: 52px;
    min-height: 48px;
  }

  .mid-save .save-mark {
    margin-top: 0;
    text-align: right;
  }

  .mid-visits {
    grid-column: 1;
    grid-row: 11;
  }

  .mid-new {
    grid-column: 2;
    grid-row: 11;
  }

  .mid .btn-main {
    min-height: 52px;
  }

  .card-lists {
    width: auto;
    margin-top: 20px;
    gap: 10px;
  }

  .btn-list {
    min-height: 48px;
  }

  .tools {
    justify-content: flex-end;
    gap: 14px;
  }

  .tool-exit {
    display: none;
  }

  .btn-scan {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
  }

  .recbar {
    justify-content: space-between;
    height: calc(56px * var(--ts));
    padding: 0 6px;
  }

  .rec-btn {
    width: 40px;
    height: 44px;
  }

  .rec-where {
    margin: 0 2px;
    gap: 4px;
  }

  .rec-pos {
    width: 4.5em;
    height: calc(36px * var(--ts));
    padding: 0 2px;
  }

  .dialog-body {
    padding: 12px;
  }

  :root[data-text]:not([data-text="100"]) .card-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  :root[data-text]:not([data-text="100"]) .f,
  :root[data-text]:not([data-text="100"]) .f-wide {
    grid-template-columns: 9em minmax(0, 1fr);
  }
}

/* Above 100 %, on a screen under 700 px wide (the phone upright), a label of the card goes above its box,
   so the box keeps the whole width for the larger letters. */
@media (max-width: 699.98px) {
  :root[data-text]:not([data-text="100"]) .f,
  :root[data-text]:not([data-text="100"]) .f-wide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  :root[data-text]:not([data-text="100"]) .f .label {
    justify-self: start;
  }

  :root[data-text]:not([data-text="100"]) .f-name .label {
    margin-top: 0;
  }
}

/* A phone held on its side (a touch-only screen under 700 px high): the height is what is short. The
   record bar is not fixed: it comes after the tools, at the foot of the card. The dialogs come nearer the
   screen's edges, and Find puts its box and its buttons in one row, its results taking the rest. */
@media (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  .card-page {
    padding-bottom: 0;
  }

  .recbar {
    position: static;
  }

  .dialog {
    max-height: calc(100vh - 16px);
  }

  .dialog-band {
    padding: 6px 12px;
  }

  .dialog-body {
    padding: 8px 12px;
  }

  .find-dialog {
    width: 720px;
  }

  .find-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .find-dialog .dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
  }

  .find-dialog .field,
  .find-dialog .actions {
    margin: 0 0 8px;
  }

  .find-dialog .actions {
    flex-wrap: nowrap;
  }

  .find-dialog .dialog-note,
  .find-results {
    grid-column: 1 / -1;
  }

  .find-dialog .dialog-note {
    margin: 0 0 8px;
  }

  .find-dialog .dialog-note:empty {
    margin: 0;
  }

  .find-results {
    align-self: stretch;
    min-height: 0;
    max-height: none;
  }
}

/* The six lists (forms 2 to 7). The grey band holds the title, "الى البطاقة" and the column headers;
   under it, the list's own colour (LISTS[kind].color, set on the page as --list) with one row per record
   and the blank new row last. The visits copy form 3: the title in white with the patient's name in red,
   headers in raised grey boxes, the date under the card number labelled في, tall boxes, the notes pale
   green and the fee grey. On a phone each record is a block with its labels, the new one at the top. */
.list-page {
  background: var(--list, var(--teal));
  padding-bottom: 24px;
}

.sheet {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.kind-visits .sheet {
  max-width: 1140px;
}

.list-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.band .list-title {
  margin: 0;
  padding: 0;
  font-size: calc(22px * var(--ts));
}

.list-name {
  min-width: 0;
  color: var(--red);
  font-size: calc(22px * var(--ts));
  font-weight: bold;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.list-back {
  margin-inline-start: auto;
  min-width: 9em;
  font-size: calc(15px * var(--ts));
}

.kind-visits .list-title,
.kind-hearing .list-title {
  color: #FFFFFF;
  text-shadow: 1px 1px 0 #404040, -1px 1px 0 #404040, 1px -1px 0 #404040, -1px -1px 0 #404040;
}

.kind-visits .list-back {
  color: #800000;
}

.grid {
  display: grid;
  column-gap: 10px;
  align-items: start;
}

.kind-visits .grid {
  grid-template-columns: minmax(8.5em, 10em) repeat(4, minmax(3.5em, 1fr)) 5em 7.5em;
}

.kind-surgery .grid,
.kind-hearing .grid {
  grid-template-columns: minmax(5em, 7em) minmax(8.5em, 9.5em) minmax(5em, 1fr) minmax(5em, 1fr) minmax(5em, 8em) 7.5em;
}

.kind-xray .grid,
.kind-lab .grid,
.kind-pathology .grid {
  grid-template-columns: minmax(5em, 7em) minmax(8.5em, 9.5em) minmax(5em, 1fr) minmax(5em, 1fr) 7.5em;
}

.list-head {
  align-items: end;
  padding-bottom: 8px;
}

.head-cell {
  min-width: 0;
  font-size: calc(13px * var(--ts));
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}

.kind-visits .head-cell {
  padding: 2px 4px;
  background: var(--band);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #808080;
}

.list-msg {
  max-width: 968px;
  margin: 14px auto 0;
}

.list-note {
  max-width: 968px;
  margin: 20px auto;
  padding: 0 16px;
}

.list-rows {
  padding-top: 10px;
}

.row {
  padding: 10px 0;
  border-bottom: 1px solid #000;
}

.kind-visits .row {
  padding: 6px 0;
  border-bottom: 0;
}

.cell {
  min-width: 0;
}

.lf + .lf {
  margin-top: 4px;
}

.cell-label,
.row-new-title {
  display: none;
}

/* في, beside the visit's date: a small raised grey label, as on the form. */
.lf-on {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.lf-on .cell-label {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 6px;
  background: var(--band);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #FFFFFF;
  font-size: calc(13px * var(--ts));
  font-weight: bold;
}

.list .box {
  min-height: 32px;
  padding: 3px 6px;
  font-size: calc(15px * var(--ts));
  box-shadow: inset 1px 1px 0 #A0A0A0;
}

.list .box:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.list .box-tall {
  min-height: calc(52px * var(--ts));
  resize: none;
  line-height: 1.35;
}

.list .box-number,
.list .box-fee {
  text-align: right;
}

/* An empty date box (edit.js marks it box-empty) shows nothing but its calendar while it is not being
   typed in: the browser's own hint, dd/mm/yyyy, is English. Once it is, the hint and the typing show as
   always, and a half-typed date is not empty, so it never hides. */
.box-date.box-empty:not(:focus)::-webkit-datetime-edit {
  color: transparent;
}

.kind-visits [data-column="الملاحظات"] .box {
  background: var(--label);
}

.kind-visits .box-fee {
  background: #D4D0C8;
  text-align: center;
}

.list [data-unsaved] {
  outline: 2px dashed #CC5500;
  outline-offset: 1px;
}

/* A row's own save mark, black on a pale chip so it reads on every list's colour. */
.row-mark {
  align-self: center;
  justify-self: start;
  padding: 2px 6px;
  background: #FFFFFF;
  border: 1px solid #000;
  font-size: calc(12px * var(--ts));
  font-weight: bold;
  line-height: 1.3;
}

.row-mark:empty {
  display: none;
}

.row-mark.save-mark {
  color: #000;
  font-size: calc(12px * var(--ts));
}

.row-mark.save-mark[data-save-mark="pending"] {
  color: #000;
  background: #FFFF99;
}

.row-mark.save-mark[data-save-mark="sent"] {
  background: var(--label);
}

.row-mark.save-mark[data-unsaved-mark] {
  color: #000;
  background: #FFE0B2;
}

@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  /* The sides only: the title row keeps its 10 px above and below, or the band's title touches the top
     edge of the screen and its tallest letters are cut off. */
  .sheet {
    padding-right: 12px;
    padding-left: 12px;
  }

  .list-top {
    gap: 8px 16px;
  }

  .band .list-title,
  .list-name {
    font-size: calc(20px * var(--ts));
  }

  .list-back {
    min-height: 44px;
  }

  .list-head {
    display: none;
  }

  .list-msg {
    margin: 12px 12px 0;
  }

  .list-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
  }

  .row,
  .kind-visits .row {
    display: block;
    padding: 12px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid #000;
    box-shadow: 3px 3px 0 #000;
  }

  .row-new {
    order: -1;
  }

  .row-new-title {
    display: block;
    margin: -12px -12px 12px;
    padding: 6px 12px;
    background: var(--band);
    border-bottom: 1px solid #000;
    font-weight: bold;
  }

  .cell + .cell,
  .lf + .lf {
    margin-top: 10px;
  }

  .lf,
  .lf-on {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }

  .cell-label,
  .lf-on .cell-label {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 8px;
    background: var(--label);
    border: 0;
    box-shadow: 3px 3px 0 #000;
    font-size: calc(14px * var(--ts));
    font-weight: bold;
    line-height: 1.3;
  }

  .list .box {
    min-height: 40px;
    font-size: calc(16px * var(--ts));
  }

  .list .box-tall {
    min-height: calc(60px * var(--ts));
  }

  .row-mark {
    display: inline-block;
    margin-top: 12px;
  }
}

/* Above 100 %, a window under 1100 px wide has no room for a list's columns at the larger sizes (the program
   not maximised): each record is a block with its labels, the new one at the top, as on the phone. */
@media (max-width: 1099.98px) {
  :root[data-text]:not([data-text="100"]) .list-head {
    display: none;
  }

  :root[data-text]:not([data-text="100"]) .list-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
  }

  :root[data-text]:not([data-text="100"]) .row,
  :root[data-text]:not([data-text="100"]) .kind-visits .row {
    display: block;
    padding: 12px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid #000;
    box-shadow: 3px 3px 0 #000;
  }

  :root[data-text]:not([data-text="100"]) .row-new {
    order: -1;
  }

  :root[data-text]:not([data-text="100"]) .row-new-title {
    display: block;
    margin: -12px -12px 12px;
    padding: 6px 12px;
    background: var(--band);
    border-bottom: 1px solid #000;
    font-weight: bold;
  }

  :root[data-text]:not([data-text="100"]) .cell + .cell,
  :root[data-text]:not([data-text="100"]) .lf + .lf {
    margin-top: 10px;
  }

  :root[data-text]:not([data-text="100"]) .lf,
  :root[data-text]:not([data-text="100"]) .lf-on {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }

  :root[data-text]:not([data-text="100"]) .cell-label,
  :root[data-text]:not([data-text="100"]) .lf-on .cell-label {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 8px;
    background: var(--label);
    border: 0;
    box-shadow: 3px 3px 0 #000;
    font-size: calc(14px * var(--ts));
    font-weight: bold;
    line-height: 1.3;
  }

  :root[data-text]:not([data-text="100"]) .row-mark:not(:empty) {
    display: inline-block;
    margin-top: 12px;
  }
}

/* Above 100 %, on a screen under 700 px wide (the phone upright), a list's label goes above its box. */
@media (max-width: 699.98px) {
  :root[data-text]:not([data-text="100"]) .lf,
  :root[data-text]:not([data-text="100"]) .lf-on {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  :root[data-text]:not([data-text="100"]) .cell-label,
  :root[data-text]:not([data-text="100"]) .lf-on .cell-label {
    justify-self: start;
  }
}

/* A grey band with a button at its far end: الإعدادات on the card, الى البطاقة on Settings. */
.band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
}

.band-row h1 {
  flex: 1 1 auto;
  min-width: 0;
}

.band-btn {
  flex: 0 0 auto;
  min-height: 40px;
  margin: 6px 24px;
  padding: 4px 16px;
  font-size: calc(15px * var(--ts));
}

/* Settings: the grey band over the teal body; each section is headed by a pale green label with its black
   shadow, and its content sits on white with the same shadow. One column; from 700 px up the two backup
   lists sit side by side. */
.settings-page {
  padding-bottom: 32px;
}

.settings {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px 8px;
}

.set {
  margin: 0 0 30px;
}

.set-title {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  background: var(--label);
  box-shadow: 3px 3px 0 #000;
  font-size: calc(17px * var(--ts));
  font-weight: bold;
  line-height: 1.4;
}

.set-body {
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
}

.set-notice {
  margin: 0 0 12px;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
}

/* A part after another part, or after the section's own content (the program's backup folder, under the
   two backup lists), is set off by a grey rule with room above and below it. */
.set-part + .set-part,
.set-content + .set-part {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #C0C0C0;
}

.set-sub {
  margin: 0 0 10px;
  font-size: calc(16px * var(--ts));
}

.set-line {
  margin: 0 0 12px;
}

.set-key {
  font-weight: bold;
}

.version {
  font-size: calc(18px * var(--ts));
  font-weight: bold;
}

.set-note {
  margin: 0;
  color: #404040;
  font-weight: bold;
}

.set-said {
  margin: 10px 0 0;
  font-weight: bold;
}

.set-small {
  margin: 8px 0 0;
  font-size: calc(13px * var(--ts));
  color: #404040;
  overflow-wrap: anywhere;
}

.set-actions {
  margin: 14px 0 0;
}

.settings .msg {
  margin: 0 0 12px;
}

.warn {
  margin: 0 0 12px;
  padding: 6px 10px;
  background: #FFFF99;
  border: 1px solid #000;
  color: #800000;
  font-weight: bold;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* About: a row for each download, its name and the version offered, and its button. */
.app-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid #C0C0C0;
}

.app-what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.app-name {
  font-weight: bold;
}

.app-offered {
  color: #404040;
}

.app-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.app-get {
  min-width: 8em;
}

.app-other {
  color: #004080;
  font-size: calc(14px * var(--ts));
}

/* The channel: two choices, each a 44 px target. */
.channel-choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.set-legend {
  margin: 0 0 6px;
  padding: 0;
  font-weight: bold;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-inline-end: 28px;
  cursor: pointer;
}

.choice input {
  width: calc(20px * var(--ts));
  height: calc(20px * var(--ts));
  margin: 0;
}

/* المظهر: the look and the text size of this device, first in Settings. Each choice is a 44 px target, as
   the channel's are. A text size shows its sample letter at its own size, whatever the page's is: the
   sample takes its step's --ts. A look shows its preview (.lp), drawn by its own .lp-<id> rules. */
.appearance-choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.appearance-choices + .appearance-choices {
  margin-top: 14px;
}

.look-choice,
.text-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-inline-end: 28px;
  cursor: pointer;
}

.look-choice {
  flex-wrap: wrap;
  max-width: calc(100% - 28px);
  margin-bottom: 10px;
}

.look-choice input,
.text-choice input {
  flex: 0 0 auto;
  width: calc(20px * var(--ts));
  height: calc(20px * var(--ts));
  margin: 0;
}

.look-words {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}

.look-name,
.text-name {
  font-weight: bold;
}

.look-note {
  color: #404040;
  font-size: calc(13px * var(--ts));
}

.text-sample {
  display: inline-block;
  min-width: 1.3em;
  font-size: calc(22px * var(--ts));
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}

.text-choice[data-size="100"] .text-sample {
  --ts: 1;
}

.text-choice[data-size="115"] .text-sample {
  --ts: 1.15;
}

.text-choice[data-size="130"] .text-sample {
  --ts: 1.3;
}

.text-choice[data-size="150"] .text-sample {
  --ts: 1.5;
}

.text-choice[data-size="175"] .text-sample {
  --ts: 1.75;
}

/* A look's preview: a band, a label, a box holding a made-up name and a button. The shapes are here; each
   look colours its own (.lp-<id>), so a preview shows its look on any page. */
.lp {
  display: inline-block;
  flex: 0 0 auto;
  width: 8.5em;
  border: 1px solid #000;
  vertical-align: middle;
}

.lp-band {
  display: block;
  height: 8px;
}

.lp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
}

.lp-label {
  flex: 0 0 auto;
  width: 2.4em;
  height: 1em;
}

.lp-box {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.5em;
  padding: 0 4px;
  font-size: calc(12px * var(--ts));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lp-button {
  display: block;
  width: 3.2em;
  height: 1.1em;
  margin: 0 6px 6px;
}

/* Classic's preview: Access's grey band, teal body, pale green label, white box and raised grey button. */
.lp-classic {
  background: var(--teal);
  color: #000;
  font-family: Tahoma, Arial, sans-serif;
}

.lp-classic .lp-band {
  background: var(--band);
  border-bottom: 1px solid #FFFFFF;
}

.lp-classic .lp-label {
  background: var(--label);
  box-shadow: 2px 2px 0 #000;
}

.lp-classic .lp-box {
  background: #FFFFFF;
  border: 1px solid var(--edge);
}

.lp-classic .lp-button {
  background: var(--button);
  border: 1px solid var(--edge);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

/* The devices. */
.device-list,
.review-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid #C0C0C0;
}

.device-what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.device-name {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.device-user {
  padding: 0 6px;
  background: var(--band);
  font-size: calc(14px * var(--ts));
}

.device-here {
  padding: 0 6px;
  background: var(--label);
  box-shadow: 2px 2px 0 #000;
  font-size: calc(14px * var(--ts));
  font-weight: bold;
}

.device-seen {
  color: #404040;
  font-size: calc(14px * var(--ts));
}

/* The review list: each review a block, its values as in the review box on the card. */
.review-item {
  padding: 12px 0;
  border-bottom: 1px solid #C0C0C0;
}

.review-item:first-child {
  padding-top: 0;
}

.review-where {
  margin: 0 0 4px;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.review-item .review-what {
  margin: 0 0 10px;
  color: #404040;
}

.review-item .review-options {
  margin: 0 0 10px;
}

.review-item .review-option {
  box-shadow: 2px 2px 0 #000;
}

.review-item .actions {
  margin: 0;
}

/* The backups: a table each, the cloud on the right and the clinic PC on the left. */
.backups-both {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}

.backups-side {
  flex: 1 1 340px;
  min-width: 0;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--ts));
}

.table th,
.table td {
  padding: 4px 8px;
  border: 1px solid #808080;
  text-align: right;
  vertical-align: middle;
}

.table thead th {
  background: var(--band);
  border-color: #000;
}

.table .btn {
  min-height: 36px;
  padding: 2px 12px;
  font-size: calc(14px * var(--ts));
}

/* A link that looks like a button: a cloud backup's download, and الاتصال بكمبيوتر العيادة. */
a.btn {
  text-decoration: none;
}

.backup-download {
  color: #000;
}

.switch-what {
  margin: 0 0 12px;
}

/* The administrator's part: the upload's progress bar and its counts before and after. */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.upload-progress {
  margin: 12px 0;
}

.upload-step {
  margin: 0 0 6px;
  font-weight: bold;
}

.bar {
  height: 14px;
  background: #FFFFFF;
  border: 1px solid #000;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.2s linear;
}

.upload-result {
  margin: 12px 0 0;
}

.counts {
  max-width: 560px;
  margin: 0 0 12px;
}

.counts tbody th {
  font-weight: normal;
}

.counts td {
  width: 6.5em;
  font-variant-numeric: tabular-nums;
}

.counts-fewer td {
  color: var(--strip);
  font-weight: bold;
}

.admin-dialog .field {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.admin-dialog .field .label {
  justify-self: start;
}

.admin-dialog .warn {
  margin-bottom: 14px;
}

/* The phone's scanner: the back camera in a square with a white aim, then the PC to approve in a white
   panel with the black shadow, and the buttons wide enough for a thumb. */
.scan {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 24px;
}

.scan-msg {
  margin-bottom: 16px;
}

.scan-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
}

.scan-video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-aim {
  position: absolute;
  top: 18%;
  right: 18%;
  bottom: 18%;
  left: 18%;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.scan-panel {
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
}

.scan-title {
  margin: 0 0 12px;
  font-size: calc(20px * var(--ts));
  font-weight: bold;
  line-height: 1.4;
}

.scan-done .scan-title {
  margin: 0;
}

.scan-pc {
  margin: 0 0 2px;
  font-size: calc(18px * var(--ts));
  font-weight: bold;
}

.scan-when {
  margin: 0 0 16px;
  color: #404040;
  font-variant-numeric: tabular-nums;
}

.scan-words {
  margin: 0;
  font-size: calc(17px * var(--ts));
  font-weight: bold;
}

.scan-actions {
  margin: 0;
}

.scan-actions .btn {
  flex: 1 1 0;
  min-height: 52px;
}

.scan > .scan-actions {
  margin-top: 4px;
}

/* The phone app's update popup. */
.apk-dialog {
  width: 420px;
}

.apk-dialog .actions {
  margin: 0;
}

.apk-dialog .actions .btn {
  flex: 1 1 0;
}

@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  .band-btn {
    margin: 6px 16px;
  }

  .scan {
    padding: 16px;
  }

  .settings {
    padding: 16px 16px 8px;
  }

  .set {
    margin-bottom: 24px;
  }

  .set-body {
    padding: 12px;
  }

  .app-buttons,
  .app-get {
    width: 100%;
  }

  .device .device-signout {
    width: 100%;
  }

  .table th,
  .table td {
    padding: 4px 6px;
  }
}

/* Above 100 %, the backups' tables on a phone upright (under 700 px wide): a row's cells two to a line, the
   headers above them in the same places, so the larger date, size and count fit the screen's width. The
   cells overlap their neighbours' borders by 1 px, so each line between them stays one line. */
@media (max-width: 699.98px) {
  :root[data-text]:not([data-text="100"]) .backups-side .table,
  :root[data-text]:not([data-text="100"]) .backups-side .table thead,
  :root[data-text]:not([data-text="100"]) .backups-side .table tbody {
    display: block;
  }

  :root[data-text]:not([data-text="100"]) .backups-side .table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: -1px;
    padding: 1px 0 0 1px;
  }

  :root[data-text]:not([data-text="100"]) .backups-side .table th,
  :root[data-text]:not([data-text="100"]) .backups-side .table td {
    margin: -1px 0 0 -1px;
    overflow-wrap: anywhere;
  }
}