/* The look Night Shift (المناوبة الليلية), design 2 of the approved mockup (nazeernajjar.com/mockups/clinic-modern/):
   dark and large, mint and amber on charcoal, in Noto Kufi Arabic at 17 px with boxes 56 px high at 18 px;
   color-scheme dark, so the date picker and the selects are dark too; theme-color #0F1419.
     the phone  the patient's header at the top (his initial on mint), the tabs under it on one line that
                scrolls sideways, the current one in mint, each list's count in a chip; the boxes two to a line,
                one from 150 %; the save row (✓ in mint), then الى المراجعات in amber and بطاقة جديدة; the scanner
                and STOP; the record bar; the bottom bar, 68 px, its current item in mint. Find is the Find
                dialog at full screen. A phone on its side keeps all of this (Task 20c), its bar lower.
     the PC     a rail: the glowing ring with العيادة and the bar's Find and Settings as icon buttons, 64 px,
                with the tabs under them on a line of their own (all seven on one line on the maximised window
                at 100 %, wrapping where they do not fit, never hidden); a band with the patient's header and
                the record bar; the boxes three to a line where they fit; the save row; the main buttons; the
                tools. Find is the Find dialog, drawn as a palette at the top over a dark backdrop.
     the lists  dark cards with amber dates, the new one dashed in mint at the top; on a maximised PC up to
                150 %, a table in a dark panel, the visits' date its first column, headed في.
     sign-in    a teal glow at the top of the page, the ring and العيادة over the form's dark panel.
     the strip  --am with #1A1200 words.
   The mockup's colours, verbatim: each passes 4.5:1 where it holds words (the task report lists them).
   The page's text is 17 px (body keeps 16 px × --ts, the size every look's tests read: its children take 17).
   Every selector starts with :root[data-look="night"], except the Appearance preview's .lp-night, so nothing
   here can match in another look or in Classic. Font sizes are a size times --ts. */

:root[data-look="night"] {
  color-scheme: dark;
  --bg: #0F1419;
  --sf: #171E27;
  --sf2: #1F2832;
  --ink: #E8EEF3;
  --mut: #8B9AAB;
  --line: #273340;
  --ac: #3DDCB8;
  --acd: #0F2A26;
  --acs: #0F2A26;
  --on-ac: #06201A;
  --am: #F5B14C;
  --red: #FF6B63;
  --font: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif;
  --radius: 14px;
  --list-visits: #0E7C86;
  --list-surgery: #D64545;
  --list-hearing: #2A9DB0;
  --list-xray: #C99A00;
  --list-lab: #4A86D8;
  --list-pathology: #7A4FA8;
  --shell-bar-h: calc(68px * var(--ts));
  --rail-h: calc(64px * var(--ts));
  --strip-h: 0px;
  --long-pad: 14px 16px;
  --i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h6M7 14h10'/%3E%3C/svg%3E");
}

:root[data-look="night"].strip-on {
  --strip-h: calc(36px * var(--ts));
}

/* The page's text, 17 px. */
:root[data-look="night"] body > * {
  font-size: calc(17px * var(--ts));
}

/* The pages with the patient's pieces (the card, the lists, Settings): one flow of pieces that wrap, in the
   order the look gives them. */
:root[data-look="night"] .card-page,
:root[data-look="night"] .list-page,
:root[data-look="night"] .settings-page {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 0 12px;
  padding: 0 20px 32px;
}

/* The rail is a line of its own: after it, a break. The pieces under it keep their distance by their own top
   margins (the band touches the rail). */
:root[data-look="night"] .card-page::before,
:root[data-look="night"] .list-page::before,
:root[data-look="night"] .settings-page::before {
  content: '';
  order: 4;
  flex: 1 1 100%;
  height: 0;
}

:root[data-look="night"] .card-page > *,
:root[data-look="night"] .list-page > *,
:root[data-look="night"] .settings-page > *,
:root[data-look="night"] .card-fields > *,
:root[data-look="night"] .card-lists > * {
  min-width: 0;
}

:root[data-look="night"].strip-on .card-page,
:root[data-look="night"].strip-on .list-page,
:root[data-look="night"].strip-on .settings-page {
  padding-top: var(--strip-h);
}

:root[data-look="night"] .card,
:root[data-look="night"] .card-fields,
:root[data-look="night"] .card-lists {
  display: contents;
}

/* What the look shows elsewhere: the card's toolbar (its own ✓, ↶ and بطاقة جديدة show), the five list
   buttons (the tabs), the binoculars and the side panel (the bar's بحث opens Find), the settings button (the
   bar's), and الى البطاقة (the tabs' البطاقة, and the bar's). */
:root[data-look="night"] .shell-toolbar,
:root[data-look="night"] .shell-side,
:root[data-look="night"] .btn-list,
:root[data-look="night"] #find,
:root[data-look="night"] #to-settings,
:root[data-look="night"] .list-back,
:root[data-look="night"] .list-name,
:root[data-look="night"] .settings-page #to-card,
:root[data-look="night"] .shell-tagline,
:root[data-look="night"] .shell-date {
  display: none;
}

/* Words kept for readers only: the card's title (the rail and the tabs say where he is), the sign-in band,
   the scanner's brand. */
:root[data-look="night"] .card-page .band-row,
:root[data-look="night"] .band:not(.band-row):not(.list-band),
:root[data-look="night"] .scan-page .shell-brand {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The rail, on --sf over a line: the brand on the right and the bar's Find and Settings on the left, 64 px,
   and the tabs under them, a line of their own so all seven show (wrapping where they do not fit). The gap
   between the brand and the bar is filled with --sf (its shadow), so it reads as one bar. */
:root[data-look="night"] .card-page .shell-brand,
:root[data-look="night"] .list-page .shell-brand,
:root[data-look="night"] .settings-page .shell-brand {
  order: 1;
  flex: 1 1 auto;
  align-self: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: var(--rail-h);
  margin-inline-start: -20px;
  padding: 0 20px;
  background: var(--sf);
  box-shadow: -12px 0 0 var(--sf);
}

/* Settings has no tabs: the brand, its title and the bar on one line. */
:root[data-look="night"] .settings-page .shell-brand {
  flex-grow: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

:root[data-look="night"] .shell-logo {
  display: inline-block;
  flex: 0 0 auto;
  width: calc(10px + 12px * var(--ts));
  height: calc(10px + 12px * var(--ts));
  border: 4px solid var(--ac);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(61, 220, 184, 0.5);
}

:root[data-look="night"] .shell-logo svg {
  display: none;
}

:root[data-look="night"] .shell-name {
  color: var(--ac);
  font-size: calc(18px * var(--ts));
  font-weight: 600;
  white-space: nowrap;
}

:root[data-look="night"] .shell-tabs {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 6px;
  margin: 0 -20px;
  padding: 0 20px 12px;
  background: var(--sf);
  border-bottom: 1px solid var(--line);
}

:root[data-look="night"] .shell-tabs button {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--sf);
  border: 0;
  border-radius: 999px;
  color: var(--mut);
  font-size: calc(14px * var(--ts));
  font-weight: 500;
  line-height: 1.4;
}

:root[data-look="night"] .shell-tabs [data-go="card"]::before {
  content: '';
  flex: 0 0 auto;
  width: calc(14px + 4px * var(--ts));
  height: calc(14px + 4px * var(--ts));
  background: currentColor;
  -webkit-mask: var(--i-card) center / contain no-repeat;
  mask: var(--i-card) center / contain no-repeat;
}

:root[data-look="night"] .shell-tabs .shell-count {
  min-width: 20px;
  padding: 0 7px;
  background: var(--sf2);
  border-radius: 999px;
  color: var(--ink);
  font-size: calc(12px * var(--ts));
  line-height: 1.7;
  text-align: center;
}

:root[data-look="night"] .shell-tabs [aria-current="page"] {
  background: var(--ac);
  color: var(--on-ac);
  font-weight: 600;
}

:root[data-look="night"] .shell-tabs [aria-current="page"] .shell-count {
  background: rgba(0, 0, 0, 0.18);
  color: var(--on-ac);
}

:root[data-look="night"] .shell-bar {
  order: 2;
  flex: 0 0 auto;
  align-self: stretch;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: var(--rail-h);
  margin-inline-end: -20px;
  padding: 0 12px;
  background: var(--sf);
}

:root[data-look="night"] .settings-page .shell-bar {
  order: 3;
  border-bottom: 1px solid var(--line);
}

:root[data-look="night"] .shell-bar button {
  flex-direction: column;
  gap: 0;
  min-width: 64px;
  min-height: 52px;
  padding: 2px 8px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--mut);
  font-size: calc(13px * var(--ts));
  font-weight: 500;
  line-height: 1.4;
}

:root[data-look="night"] .shell-bar [aria-current="page"] {
  background: none;
  color: var(--ac);
}

:root[data-look="night"] .card-page .shell-bar [data-go="card"],
:root[data-look="night"] .list-page .shell-bar [data-go="card"],
:root[data-look="night"] .shell-bar [data-go="visits"] {
  display: none;
}

/* Settings has no tabs: its title stands in the rail. */
:root[data-look="night"] .settings-page .band-row {
  order: 2;
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: var(--rail-h);
  padding: 0;
  background: var(--sf);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 12px -1px 0 var(--sf), -12px -1px 0 var(--sf), 12px 0 0 var(--line), -12px 0 0 var(--line);
}

:root[data-look="night"] .settings-page .band-row h1 {
  padding: 0;
  color: var(--ink);
  font-size: calc(20px * var(--ts));
}

/* An administrator's Settings has no brand and no bar: the title is the whole rail. */
:root[data-look="night"] .settings-page.no-shell .band-row {
  flex-basis: 100%;
  margin: 0 -20px;
  padding: 0 20px;
  box-shadow: none;
}

/* The notices and messages, under the patient's header. */
:root[data-look="night"] .notice {
  order: 7;
  flex: 1 1 100%;
  margin-top: 16px;
  border: 0;
  border-radius: var(--radius);
}

:root[data-look="night"] .card-msg,
:root[data-look="night"] .list-msg {
  order: 7;
  flex: 1 1 100%;
  max-width: none;
  margin: 16px 0 0;
}

/* The band: the patient's header and the record bar, over a line. */
:root[data-look="night"] .shell-hero {
  order: 5;
  flex: 1 1 auto;
  align-self: stretch;
  margin-inline-start: -20px;
  padding: 14px 20px;
}

/* The band's line: a piece of its own after the patient's header and the record bar, the whole width. */
:root[data-look="night"] .card-page::after,
:root[data-look="night"] .list-page::after {
  content: '';
  order: 6;
  flex: 1 1 100%;
  height: 1px;
  margin: 0 -20px;
  background: var(--line);
}

:root[data-look="night"] .hero-avatar {
  min-width: calc(48px * var(--ts));
  min-height: calc(48px * var(--ts));
  background: var(--ac);
  color: var(--on-ac);
}

:root[data-look="night"] .hero-name {
  font-size: calc(20px * var(--ts));
}

:root[data-look="night"] .hero-chips > span {
  background: var(--sf2);
  color: var(--mut);
}

:root[data-look="night"] .recbar {
  order: 6;
  position: static;
  z-index: auto;
  flex: 0 1 auto;
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px;
  height: auto;
  margin-inline-start: auto;
  margin-inline-end: -20px;
  padding: 8px 20px;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--mut);
  font-size: calc(14px * var(--ts));
}

:root[data-look="night"] .rec-btn {
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--ac);
}

:root[data-look="night"] .rec-btn:hover {
  background: var(--acd);
  border: 0;
}

:root[data-look="night"] .rec-btn svg {
  width: calc(14px * var(--ts));
  height: calc(14px * var(--ts));
}

:root[data-look="night"] .rec-where {
  gap: 6px;
  margin: 0 4px;
}

:root[data-look="night"] .rec-pos {
  width: 4.5em;
  height: auto;
  min-height: 44px;
  padding: 4px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: calc(15px * var(--ts));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

:root[data-look="night"] .rec-count {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The boxes: 56 px high, 18 px words, three to a line where they fit; the name and السوابق المرضية the whole
   line. */
:root[data-look="night"][data-text][data-modern] .f {
  order: 10;
  flex: 1 1 calc(330px * var(--ts));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  align-self: stretch;
  align-content: start;
  margin-top: 16px;
}

:root[data-look="night"][data-text][data-modern] .f-wide {
  flex-basis: 100%;
}

:root[data-look="night"][data-text][data-modern] .f .label {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
}

:root[data-look="night"][data-text][data-modern] .f-box {
  gap: 6px;
}

:root[data-look="night"][data-text][data-modern] .f-check .f-box {
  justify-content: center;
  min-height: 56px;
}

:root[data-look="night"][data-modern] .box,
:root[data-look="night"][data-modern] .field input,
:root[data-look="night"][data-modern] .card .box,
:root[data-look="night"][data-modern] .list .box,
:root[data-look="night"][data-modern] .card .box-name {
  min-height: 56px;
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: calc(18px * var(--ts));
}

/* A one-line box's line is as tall as Noto Kufi Arabic's letters stand (1.28em above the baseline and 0.62em
   below), so a box holds its value whole. */
:root[data-look="night"][data-modern] input.box,
:root[data-look="night"][data-modern] .field input,
:root[data-look="night"][data-modern] .rec-pos {
  line-height: 1.9;
}

:root[data-look="night"] .long {
  font-size: calc(18px * var(--ts));
}

:root[data-look="night"] .check {
  background: var(--sf2);
}

:root[data-look="night"] .check::before {
  background: var(--mut);
}

:root[data-look="night"] .check:checked {
  background: var(--ac);
}

:root[data-look="night"] .check:checked::before {
  background: var(--on-ac);
}

:root[data-look="night"] .review-mark {
  align-self: flex-start;
}

/* The save row: ✓ in mint, ↶, and where the save is at the far end. */
:root[data-look="night"] .mid-save {
  order: 12;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 22px 0 0;
}

:root[data-look="night"] .save-buttons {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

:root[data-look="night"] .mid-save .btn-icon {
  min-height: 52px;
  padding: 6px 20px;
  border-radius: 12px;
  font-size: calc(17px * var(--ts));
}

:root[data-look="night"] #save {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--on-ac);
}

:root[data-look="night"] #undo {
  background: var(--sf);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-look="night"] .mid-save .save-mark {
  margin: 0;
  margin-inline-start: auto;
  text-align: left;
}

/* Where a save is: محفوظ على الجهاز quiet, محفوظ in mint, unsaved typing in amber. */
:root[data-look="night"] .save-mark[data-unsaved-mark] {
  color: var(--am);
}

/* The warnings (a card number already held, a box brought back from its draft, the stale copy, the
   administrator's warnings) in a dark amber wash with amber words (8.5:1), not looks.css's light ones. */
:root[data-look="night"] .warn,
:root[data-look="night"] .f-warn,
:root[data-look="night"] .notice,
:root[data-look="night"] .f-unsaved {
  background: #2A2110;
  color: var(--am);
}

:root[data-look="night"] .notice-close {
  color: var(--am);
}

:root[data-look="night"] .card [data-unsaved],
:root[data-look="night"] .list [data-unsaved] {
  outline-color: var(--am);
}

/* The main buttons: الى المراجعات in amber, بطاقة جديدة in ink, on --sf. */
:root[data-look="night"] .mid-visits,
:root[data-look="night"] .mid-new {
  order: 14;
  flex: 1 1 calc(200px * var(--ts));
  align-self: stretch;
  margin-top: 12px;
}

:root[data-look="night"] .mid .btn-main {
  width: 100%;
  height: 100%;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--am);
  font-size: calc(17px * var(--ts));
}

:root[data-look="night"] #new-card {
  color: var(--ink);
}

/* The tools: STOP in red, and the exit on the PC; the scanner on the phone. */
:root[data-look="night"] .tools {
  order: 40;
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: stretch;
  gap: 10px;
  margin: 16px 0 0;
}

:root[data-look="night"] .tool,
:root[data-look="night"] .btn-scan {
  flex: 1 1 calc(160px * var(--ts));
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 52px;
  padding: 6px 14px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--mut);
  font-size: calc(14px * var(--ts));
  font-weight: 500;
}

:root[data-look="night"] #stop {
  color: var(--red);
}

/* The lists: their records after the patient's header. */
:root[data-look="night"] .list-page .shell-hero {
  flex-basis: 100%;
  margin: 0 -20px;
}

:root[data-look="night"] .list-band {
  order: 8;
  flex: 1 1 100%;
  margin-top: 20px;
  background: none;
  border: 0;
  box-shadow: none;
}

:root[data-look="night"] .list-top {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 8px 16px;
}

/* The list's name over its records (on the phone the current tab may be scrolled out of sight). */
:root[data-look="night"] .list-title {
  flex: 1 1 auto;
  padding: 0;
  color: var(--ink);
  font-size: calc(17px * var(--ts));
  font-weight: 600;
}

:root[data-look="night"] .list {
  order: 9;
  flex: 1 1 100%;
  margin-top: 12px;
}

:root[data-look="night"] .list-note {
  max-width: none;
  margin: 0;
  padding: 0;
}

:root[data-look="night"][data-text][data-modern] .list-rows.sheet {
  max-width: none;
  padding: 0;
}

/* A record as a dark card: its boxes as many to a line as fit, its date first, in amber; the new one dashed
   in mint, its title in amber. */
:root[data-look="night"][data-text][data-modern] .row,
:root[data-look="night"][data-text][data-modern] .kind-visits .row {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(150px * var(--ts))), 1fr));
  align-items: start;
  border-radius: 16px;
}

:root[data-look="night"][data-text][data-modern] .row-new,
:root[data-look="night"][data-text][data-modern] .kind-visits .row-new {
  border-style: dashed;
  border-color: var(--ac);
}

:root[data-look="night"][data-text][data-modern] .row-new-title {
  color: var(--am);
}

:root[data-look="night"][data-text][data-modern] .kind-visits .row > .cell:first-child,
:root[data-look="night"][data-text][data-modern] .kind-visits .row-new-title + .cell {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(150px * var(--ts))), 1fr));
}

:root[data-look="night"][data-text][data-modern] .kind-visits .lf-on {
  order: -1;
}

/* The surgery's hospital (a one-line box, for its suggestions) has a line of its own, so its name shows whole. */
:root[data-look="night"][data-text][data-modern] .kind-surgery .row > .cell:nth-last-child(3) {
  grid-column: 1 / -1;
}

:root[data-look="night"][data-text][data-modern] .box-date,
:root[data-look="night"][data-text][data-modern] .lf-on .box-date {
  color: var(--am);
  font-weight: 600;
}

:root[data-look="night"][data-text][data-modern] .row-mark {
  grid-column: 1 / -1;
}

:root[data-look="night"][data-text][data-modern] .row-mark.save-mark[data-save-mark="pending"],
:root[data-look="night"][data-text][data-modern] .row-mark.save-mark[data-unsaved-mark] {
  background: #2A2110;
  color: var(--am);
}

/* A record in the table: on a maximised PC, up to 150 %, with the window's scroll bar beside it, in a dark
   panel. No column for the save mark: a record's mark, while it shows, takes a line of its own under the
   record's boxes, at its far end. The visits' first column is the date, headed في (the form's own word for
   it), with no card number on every row (it is the patient's, in his header); the other lists keep their card
   number first, as their forms do. */
@media (min-width: 1300px) {
  :root[data-look="night"]:not([data-text="175"]) .list-band {
    background: var(--sf);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  :root[data-look="night"]:not([data-text="175"]) .list-top {
    padding: 14px 14px 2px;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .list-head {
    display: grid;
    max-width: none;
    margin: 0;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--line);
  }

  :root[data-look="night"]:not([data-text="175"]) .list {
    margin-top: 0;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .list-rows {
    gap: 0;
    background: var(--sf);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row {
    gap: 0 10px;
    padding: 10px 14px;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .row-new {
    border-top: 0;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .list-head {
    grid-template-columns: minmax(9em, 10em) repeat(4, minmax(4em, 1fr)) minmax(5.5em, 6.5em);
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .list-head .head-mark {
    display: none;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-surgery .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-surgery .list-head,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-hearing .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-hearing .list-head {
    grid-template-columns: minmax(4.5em, 5em) minmax(9em, 10em) minmax(5em, 1fr) minmax(7em, 1.4fr) minmax(5.5em, 6.5em);
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-xray .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-xray .list-head,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-lab .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-lab .list-head,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-pathology .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-pathology .list-head {
    grid-template-columns: minmax(4.5em, 5em) minmax(9em, 10em) minmax(6em, 1fr) minmax(6em, 1fr);
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .row-new-title,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .lf .cell-label {
    display: none;
  }

  /* The visits: the date alone in the first cell, under في; the card number is the header's. */
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .lf[data-column="رقم البطاقة"] {
    display: none;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .list-head .head-cell:first-child {
    font-size: 0em;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .list-head .head-cell:first-child::before {
    content: 'في';
    font-size: calc(13px * var(--ts));
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row > .cell:first-child,
  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row-new-title + .cell {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-visits .lf-on {
    order: 0;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .kind-surgery .row > .cell:nth-last-child(3) {
    grid-column: auto;
  }

  :root[data-look="night"][data-text][data-modern]:not([data-text="175"]) .row-mark {
    justify-self: end;
    margin-top: 6px;
  }
}

/* Settings: its sections, a column of dark cards. */
:root[data-look="night"] .settings {
  order: 10;
  flex: 1 1 100%;
  max-width: none;
  margin: 24px 0 0;
  padding: 0;
}

:root[data-look="night"] .settings > .set {
  max-width: 820px;
}

:root[data-look="night"] .set-body {
  border-radius: 16px;
}

:root[data-look="night"] #signout-others {
  background: #2A1515;
  border-color: #2A1515;
}

/* The download screen's bar: its track in the lines' colour, so it shows on the dark panel. */
:root[data-look="night"] .download-bar,
:root[data-look="night"] .bar {
  background: var(--line);
}

/* The dialogs: on --sf, over a dark backdrop. */
:root[data-look="night"] .dialog {
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

:root[data-look="night"] .dialog::backdrop {
  background: rgba(5, 8, 12, 0.72);
}

/* Find: the box with its magnifier, on --sf2, its results as rows that light up in mint. */
:root[data-look="night"] #find-q {
  min-height: 56px;
  padding-right: 46px;
  background-color: var(--sf2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B9AAB' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  border-radius: var(--radius);
}

:root[data-look="night"] .find-results {
  display: grid;
  gap: 2px;
}

:root[data-look="night"] .find-results .find-hit {
  min-height: 56px;
  padding: 8px 14px;
  background: none;
  border: 0;
  border-radius: 12px;
}

:root[data-look="night"] .find-results .find-hit:hover,
:root[data-look="night"] .find-results .find-hit:focus {
  background: var(--acd);
  color: var(--ac);
}

:root[data-look="night"] .find-results .find-hit:hover .find-card,
:root[data-look="night"] .find-results .find-hit:focus .find-card {
  color: var(--ac);
}

/* On the PC, Find is a palette at the top: the box with بحث and إغلاق beside it, then the results. */
:root[data-look="night"] .find-dialog {
  width: 640px;
  max-width: 92%;
  max-height: calc(100vh - 76px);
  margin: 60px auto auto;
  padding: 0;
}

:root[data-look="night"] .find-dialog .dialog-band {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root[data-look="night"] .find-dialog .dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 10px;
  padding: 14px;
}

:root[data-look="night"] .find-dialog .field {
  margin: 0 0 8px;
}

:root[data-look="night"] .find-dialog .actions {
  flex-wrap: nowrap;
  margin: 0 0 8px;
}

:root[data-look="night"] .find-dialog .actions .btn {
  min-height: 56px;
}

:root[data-look="night"] .find-dialog .dialog-note,
:root[data-look="night"] .find-results {
  grid-column: 1 / -1;
}

:root[data-look="night"] .find-dialog .dialog-note {
  margin: 0 0 6px;
  font-size: calc(13px * var(--ts));
}

/* The sign-in page: a teal glow at the top of the page; the ring and العيادة; the form on a dark panel, the QR
   on another beside it. */
:root[data-look="night"] body:not(.card-page):not(.list-page):not(.settings-page):not(.scan-page) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 50% 0%, #153335 0, #0F1419 60%);
  background-repeat: no-repeat;
}

:root[data-look="night"] body:not(.card-page):not(.list-page):not(.settings-page):not(.scan-page) .shell-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  text-align: center;
}

:root[data-look="night"] body:not(.card-page):not(.list-page):not(.settings-page):not(.scan-page) .shell-logo {
  width: 72px;
  height: 72px;
  border-width: 10px;
}

:root[data-look="night"] body:not(.card-page):not(.list-page):not(.settings-page):not(.scan-page) .shell-name {
  color: var(--ink);
  font-size: calc(30px * var(--ts));
  line-height: 1.3;
}

:root[data-look="night"] .login-main {
  align-items: stretch;
  gap: 24px;
  width: 100%;
  padding: 0;
}

:root[data-look="night"][data-text][data-modern] .login-panel {
  flex: 1 1 340px;
  max-width: calc(400px * var(--ts));
  border-radius: 20px;
  box-shadow: none;
}

:root[data-look="night"] .qr-panel {
  display: grid;
  flex: 0 1 calc(400px * var(--ts));
  justify-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 20px;
  box-shadow: none;
  text-align: center;
}

:root[data-look="night"] .qr-panel img {
  width: 188px;
  height: 188px;
  margin: 0;
  border-radius: 8px;
}

:root[data-look="night"] .login-main .field input {
  background: var(--sf2);
}

:root[data-look="night"] .login-form .actions {
  margin: 0 0 6px;
}

:root[data-look="night"] .login-form .actions .btn-main {
  min-height: 56px;
}

:root[data-look="night"] #code {
  min-height: 62px;
  background: var(--sf2);
  color: var(--ac);
  font-size: calc(28px * var(--ts));
}

:root[data-look="night"] #code-note,
:root[data-look="night"] #resent {
  font-size: calc(15px * var(--ts));
  text-align: center;
}

:root[data-look="night"] #code-form > .actions {
  justify-content: center;
}

:root[data-look="night"] .btn-resend[disabled] {
  color: var(--am);
}

:root[data-look="night"] .login-form [data-back],
:root[data-look="night"] .login-form .link {
  color: var(--mut);
}

:root[data-look="night"] .login-form .link {
  display: block;
  width: 100%;
  text-align: center;
}

/* The scanner: its header with the way back, and its panels. */
:root[data-look="night"] .scan-page .band-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(56px * var(--ts));
  padding: 6px 8px;
  background: none;
  border: 0;
  box-shadow: none;
}

:root[data-look="night"] .scan-page .band-row h1 {
  padding: 0;
  font-size: calc(22px * var(--ts));
}

:root[data-look="night"] .scan {
  padding: 8px 16px 20px;
}

:root[data-look="night"] .scan-panel {
  border-radius: 16px;
}

:root[data-look="night"] #scan-back {
  --icon: var(--i-back);
  order: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--ac);
  font-size: 0em;
}

:root[data-look="night"] #scan-back::before {
  content: '';
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* The offline strip: amber, its words #1A1200. */
:root[data-look="night"] .strip,
:root[data-look="night"] .strip::before {
  background: var(--am);
}

:root[data-look="night"] .strip {
  color: #1A1200;
}

/* The phone, upright or on its side: the patient's header on top with the tabs under it, one flow, the bar at
   the foot. */
@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  :root[data-look="night"] .card-page,
  :root[data-look="night"] .list-page,
  :root[data-look="night"] .settings-page {
    gap: 0 10px;
    padding: 0 16px calc(var(--shell-bar-h) + 20px);
  }

  :root[data-look="night"].strip-on .card-page,
  :root[data-look="night"].strip-on .list-page,
  :root[data-look="night"].strip-on .settings-page {
    padding-top: var(--strip-h);
  }

  :root[data-look="night"] .settings-page.no-shell {
    padding-bottom: 32px;
  }

  :root[data-look="night"] .card-page .shell-brand,
  :root[data-look="night"] .list-page .shell-brand,
  :root[data-look="night"] .settings-page .shell-brand,
  :root[data-look="night"] .card-page::after,
  :root[data-look="night"] .list-page::after {
    display: none;
  }

  /* The header: the patient, on the page itself. */
  :root[data-look="night"] .shell-hero,
  :root[data-look="night"] .list-page .shell-hero {
    order: 1;
    flex: 1 1 100%;
    margin: 0;
    padding: 12px 0 0;
    box-shadow: none;
  }

  /* The tabs: one line under him that scrolls sideways. */
  :root[data-look="night"] .shell-tabs {
    order: 2;
    flex: 1 1 100%;
    align-self: auto;
    flex-wrap: nowrap;
    min-height: 0;
    margin: 10px -16px 0;
    padding: 0 16px 6px;
    overflow-x: auto;
    background: none;
    border: 0;
    box-shadow: none;
    scrollbar-width: none;
  }

  :root[data-look="night"] .shell-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Settings and the scanner: the page's title at the top, large. */
  :root[data-look="night"] .settings-page .band-row {
    order: 1;
    flex: 1 1 100%;
    min-height: 0;
    margin: 0;
    padding: 12px 0 0;
    background: none;
    box-shadow: none;
  }

  :root[data-look="night"] .settings-page .band-row h1 {
    font-size: calc(22px * var(--ts));
  }

  :root[data-look="night"] .settings-page.no-shell .band-row {
    margin: 0;
    padding: 12px 0 0;
    box-shadow: none;
  }

  /* The card: the boxes, the save row, the main buttons, the scanner and STOP, the record bar. */
  :root[data-look="night"] .mid-save {
    order: 12;
  }

  :root[data-look="night"] .mid-visits,
  :root[data-look="night"] .mid-new {
    order: 14;
    flex-basis: calc(150px * var(--ts));
  }

  :root[data-look="night"] .btn-scan {
    order: 29;
    display: inline-flex;
    margin-top: 16px;
  }

  :root[data-look="night"] .tools {
    order: 30;
    flex: 1 1 calc(160px * var(--ts));
  }

  :root[data-look="night"] .recbar {
    order: 40;
    flex: 1 1 100%;
    margin: 16px 0 0;
    padding: 0;
    box-shadow: none;
  }

  /* The bottom bar, 68 px, its current item in mint. */
  :root[data-look="night"] .shell-bar,
  :root[data-look="night"] .list-page .shell-bar {
    flex-wrap: nowrap;
    gap: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-top: 1px solid var(--line);
  }

  :root[data-look="night"] .shell-bar button,
  :root[data-look="night"] .card-page .shell-bar [data-go="card"],
  :root[data-look="night"] .list-page .shell-bar [data-go="card"],
  :root[data-look="night"] .shell-bar [data-go="visits"] {
    display: inline-flex;
    gap: 2px;
    min-width: 0;
    padding: 4px;
    border-radius: 0;
    font-size: calc(12px * var(--ts));
  }

  :root[data-look="night"] .shell-bar svg {
    width: 26px;
    height: 26px;
  }

  /* A date box: less inline room and normal weight, so the date and its picker fit the box. */
  :root[data-look="night"][data-text][data-modern] .list .box-date {
    padding-inline: 10px;
    font-weight: 400;
  }

  /* Find: the dialog over the whole screen, its title at the top. */
  :root[data-look="night"] .find-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
  }

  :root[data-look="night"] .find-dialog .dialog-band {
    position: static;
    width: auto;
    height: auto;
    min-height: calc(56px * var(--ts));
    padding: 8px 16px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: none;
    border: 0;
    font-size: calc(22px * var(--ts));
  }

  :root[data-look="night"] .find-dialog .dialog-body {
    padding: 0 16px 16px;
  }

  /* The sign-in page on the phone. */
  :root[data-look="night"] body:not(.card-page):not(.list-page):not(.settings-page):not(.scan-page) {
    justify-content: flex-start;
    padding: 32px 16px;
  }

  :root[data-look="night"][data-text][data-modern] .login-panel {
    flex-basis: 100%;
    padding: 20px 16px;
  }
}

/* A phone held on its side: the bar lower, its words beside its icons, so it keeps its share of the height. */
@media (hover: none) and (pointer: coarse) and (max-height: 699.98px) and (min-width: 700px) {
  :root[data-look="night"] {
    --shell-bar-h: calc(50px * var(--ts));
  }

  :root[data-look="night"] .shell-bar button,
  :root[data-look="night"] .card-page .shell-bar [data-go="card"],
  :root[data-look="night"] .list-page .shell-bar [data-go="card"],
  :root[data-look="night"] .shell-bar [data-go="visits"] {
    flex-direction: row;
    gap: 6px;
    font-size: calc(13px * var(--ts));
  }

  :root[data-look="night"] .shell-bar svg {
    width: 22px;
    height: 22px;
  }
}

/* The upright phone: the boxes two to a line, one from 150 %; the record bar's place on a line of its own;
   Find's box, its buttons and its results one under the other. */
@media (max-width: 699.98px) {
  :root[data-look="night"] .find-dialog .dialog-body {
    display: block;
  }

  :root[data-look="night"] .find-dialog .actions {
    flex-wrap: wrap;
  }

  :root[data-look="night"][data-text][data-modern] .f {
    flex-basis: calc(50% - 5px);
  }

  :root[data-look="night"][data-text][data-modern] .f-wide,
  :root[data-look="night"][data-text="150"][data-modern] .f,
  :root[data-look="night"][data-text="175"][data-modern] .f {
    flex-basis: 100%;
  }

  :root[data-look="night"] .rec-where {
    order: -1;
    flex: 1 1 100%;
    justify-content: center;
  }

  /* A record's date heads it on a line of its own (as the mockup's visit cards have it), after the new
     record's title. */
  :root[data-look="night"][data-text][data-modern] .row-new-title {
    order: -2;
  }

  :root[data-look="night"][data-text][data-modern] .list-page:not(.kind-visits) .row > .cell:first-child + .cell,
  :root[data-look="night"][data-text][data-modern] .list-page:not(.kind-visits) .row-new-title + .cell + .cell,
  :root[data-look="night"][data-text][data-modern] .kind-visits .lf-on {
    order: -1;
    grid-column: 1 / -1;
  }

  /* Above 100 %, a list's record has one box to a line. */
  :root[data-look="night"][data-text][data-modern]:not([data-text="100"]) .row,
  :root[data-look="night"][data-text][data-modern]:not([data-text="100"]) .kind-visits .row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The PC's window not maximised at the larger sizes: the record bar's place on a line of its own. */
@media (min-width: 700px) and (max-width: 899.98px) {
  :root[data-look="night"][data-text]:not([data-text="100"]):not([data-text="115"]) .rec-where {
    order: -1;
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* The Appearance preview: a dark band, a grey label, a dark box with light words, a mint button, on
   charcoal. */
.lp-night {
  background: #0F1419;
  border-color: #273340;
  border-radius: 6px;
  color: #E8EEF3;
  font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif;
  overflow: hidden;
}

.lp-night .lp-band {
  background: #171E27;
  border-bottom: 1px solid #273340;
}

.lp-night .lp-label {
  height: 0.5em;
  background: #8B9AAB;
  border-radius: 3px;
}

.lp-night .lp-box {
  background: #171E27;
  border: 1px solid #273340;
  border-radius: 4px;
  color: #E8EEF3;
}

.lp-night .lp-button {
  background: #3DDCB8;
  border-radius: 4px;
}