/* The look Patient Record (سجل المريض), design 3 of the approved mockup (nazeernajjar.com/mockups/clinic-modern/):
   a medical record, navy and white, one blue accent, in Noto Sans Arabic at 16 px; theme-color #1F2A44. The
   patient stays in view while the tabs switch between the card and the six lists.
     the phone  a navy header: the patient's header and the settings icon; the tabs on navy under it, a white
                line under the current one, sliding sideways; the boxes in a white group, each a row of its
                label (112 px) then its box, the label above the box from 150 %; the save row; الى المراجعات
                and بطاقة جديدة; the scanner and STOP; the record bar in the page; the bottom bar, 64 px, with
                three items (the card, Find, Settings): the tabs have the visits. A list or Settings has a small
                navy bar with its title and the way back. A phone on its side keeps all of this (Task 20c).
     the PC     a navy sidebar, 260 px, on the right: the brand, the patient's header, Find (the side panel),
                the tabs as a list (each list's dot and count), Settings, and STOP and the exit at its foot;
                the main area: a white toolbar, 60 px, with the page's title, the record bar and new, undo and
                save (save in blue), then the page: the boxes in a white group three to a line where they fit,
                a list's records as a white table (cards where the window is narrow or the letters large),
                Settings as cards of rows. The tabs show once, in the sidebar (the mockup also draws them over
                the main area).
     sign-in    split in two: a navy half with the brand (and the QR on the PC), and a white sheet with
                تسجيل الدخول and the form.
   The page is one grid on the PC and one flow of pieces that wrap on the phone; nothing moves in the DOM:
   main#card and its two sections, and the card's tools, are display: contents where their pieces need places
   of their own.
   The mockup's colours, verbatim, but three darkened just enough for 4.5:1 (the task report names them):
   --ac #2F6FED → #2B66DB (blue words on --acs and on --bg), --mut #66738A → #657188 (quiet words on --bg),
   --red #D64545 → #D24444 (white words on it, red on white).
   Every selector starts with :root[data-look="record"], except the Appearance preview's .lp-record, so nothing
   here can match in another look or in Classic. Font sizes are a size times --ts. */

:root[data-look="record"] {
  --bg: #F3F5F8;
  --sf: #FFFFFF;
  --ink: #1B2230;
  --mut: #657188;
  --line: #DEE3EB;
  --navy: #1F2A44;
  --navy2: #2B3A5E;
  --on-navy: #C9D4EE;
  --ac: #2B66DB;
  --acs: #E7EFFF;
  --on-ac: #FFFFFF;
  --red: #D24444;
  --font: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  --radius: 8px;
  --list-visits: #0E7C86;
  --list-surgery: #D64545;
  --list-hearing: #2A9DB0;
  --list-xray: #C99A00;
  --list-lab: #4A86D8;
  --list-pathology: #7A4FA8;
  --shell-bar-h: calc(64px * var(--ts));
  --head-h: calc(60px * var(--ts));
  --side-w: 260px;
  --pad: 20px;
  --long-pad: 9px 14px;
  --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");
  --i-cross: 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%3Cpath d='M12 7v10M7 12h10'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

/* What the look shows elsewhere, on every device: the five list buttons (the tabs), the binoculars (the side
   panel on the PC, the bar's بحث on the phone), the patient's name over a list (his header), and Settings'
   way back (the bar). */
:root[data-look="record"] .btn-list,
:root[data-look="record"] #find,
:root[data-look="record"] .list-name,
:root[data-look="record"] .settings-page #to-card {
  display: none;
}

/* Words kept for readers only. */
:root[data-look="record"] .side-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The boxes: on the page's grey, inside the white group. */
:root[data-look="record"] .card .box,
:root[data-look="record"] .card .box-name,
:root[data-look="record"] .card .long > .long-box,
:root[data-look="record"] .list .box,
:root[data-look="record"] .list .long > .long-box {
  background-color: var(--bg);
  border-color: var(--line);
}

:root[data-look="record"] .card .box:focus,
:root[data-look="record"] .list .box:focus,
:root[data-look="record"] .long > .long-box:focus {
  background-color: var(--sf);
}

/* A one-line box holds the font's whole line: Noto Sans Arabic's letters stand 2.11 em high, more than the
   page's 1.5 lines, and a box's value is never cut. */
:root[data-look="record"] input:not([type="checkbox"]):not([type="radio"]) {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 2.15;
}

:root[data-look="record"] .check {
  background: #C9D3DB;
}

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

/* The patient's header, on navy: his initial on white, his name in white, the chips on the lighter navy. */
:root[data-look="record"] .shell-hero {
  background: var(--navy);
  color: #FFFFFF;
}

:root[data-look="record"] .hero-avatar {
  background: #FFFFFF;
  color: var(--navy);
  font-weight: 700;
}

:root[data-look="record"] .hero-chips > span {
  background: var(--navy2);
  color: var(--on-navy);
}

/* The brand: the cross and العيادة, white on navy. */
:root[data-look="record"] .shell-brand {
  background: var(--navy);
  color: #FFFFFF;
}

:root[data-look="record"] .shell-name {
  color: #FFFFFF;
  font-size: calc(18px * var(--ts));
  font-weight: 700;
}

:root[data-look="record"] .shell-tagline {
  color: #B7C3DD;
}

/* The buttons the toolbar and the save row share: save in blue with its tick, undo on white with its arrow,
   a new card on the pale blue with its plus. */
:root[data-look="record"] .shell-toolbar [data-act]::before {
  content: '';
  flex: 0 0 auto;
  width: calc(14px + 6px * var(--ts));
  height: calc(14px + 6px * var(--ts));
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

:root[data-look="record"] .shell-toolbar [data-act="new"] { --icon: var(--i-plus); }
:root[data-look="record"] .shell-toolbar [data-act="undo"] { --icon: var(--i-undo); }
:root[data-look="record"] .shell-toolbar [data-act="save"] { --icon: var(--i-check); }

:root[data-look="record"] #save,
:root[data-look="record"] .shell-toolbar [data-act="save"] {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--on-ac);
}

:root[data-look="record"] #undo,
:root[data-look="record"] .shell-toolbar [data-act="undo"] {
  background: var(--sf);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-look="record"] .shell-toolbar [data-act="new"] {
  background: var(--acs);
  border-color: var(--acs);
  color: var(--ac);
}

/* The main buttons: on white, الى المراجعات in blue, بطاقة جديدة in ink. */
:root[data-look="record"] .mid .btn-main {
  width: 100%;
  height: 100%;
  min-height: 52px;
  padding: 8px 14px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  color: var(--ac);
  font-size: calc(16px * var(--ts));
}

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

/* The tools: on white, in the quiet colour; STOP in red. */
:root[data-look="record"] .tool,
:root[data-look="record"] .btn-scan {
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 48px;
  padding: 6px 14px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  color: var(--mut);
  font-size: calc(14px * var(--ts));
  font-weight: 500;
}

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

/* The record bar: its arrows in blue, the place in ink. */
:root[data-look="record"] .recbar {
  position: static;
  z-index: auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  height: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--mut);
  font-size: calc(14px * var(--ts));
}

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

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

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

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

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

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

/* The save mark: محفوظ in blue (looks.css), at the save row's far end. */
:root[data-look="record"] .mid-save .save-mark {
  margin: 0;
  text-align: right;
}

/* A box: its label above it (the PC), with the label's own width on the phone. */
:root[data-look="record"][data-text][data-modern] .f {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  align-content: start;
  min-width: 0;
}

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

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

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

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

/* The side panel's Find on navy: the lighter navy box with its magnifier, the results as rows. */
:root[data-look="record"] .shell-side {
  background: var(--navy);
  color: #FFFFFF;
}

:root[data-look="record"] .side-q {
  background-color: var(--navy2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D4EE' 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");
  border-color: var(--navy2);
  border-radius: calc(var(--radius) + 2px);
  color: #FFFFFF;
}

/* Its room by side, as every look's (looks.css), a little less in the narrow sidebar: 42 px on the magnifier's
   side, 10 on the other. The hint (0.8 em, 174 px at 175 %) fits the 182 px left inside, from the right. */
:root[data-look="record"] .side-q {
  padding-right: 42px;
  padding-left: 10px;
}

:root[data-look="record"] .side-q::placeholder {
  color: var(--on-navy);
  opacity: 1;
}

/* The search box's own clear button, in the sidebar's light words once there is something to clear (looks.css
   hides it while the box is empty). */
:root[data-look="record"] .side-q::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-inline-start: 6px;
  background-color: var(--on-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

:root[data-look="record"] .side-q:focus {
  border-color: #FFFFFF;
  outline-color: #FFFFFF;
}

:root[data-look="record"] .side-note {
  color: var(--on-navy);
}

:root[data-look="record"] .shell .find-hit {
  color: #FFFFFF;
}

:root[data-look="record"] .shell .find-hit .find-card {
  color: var(--on-navy);
}

:root[data-look="record"] .shell .find-hit:hover,
:root[data-look="record"] .shell .find-hit:focus {
  background: var(--navy2);
}

:root[data-look="record"] .side-title,
:root[data-look="record"] .side-recent {
  display: none;
}

/* The dialogs' bands in navy. */
:root[data-look="record"] .dialog-band {
  background: var(--navy);
  border-bottom: 0;
  color: #FFFFFF;
}

/* Find (the phone's): the results as rows on white, lighting in --acs. */
:root[data-look="record"] .find-dialog {
  background: var(--bg);
}

:root[data-look="record"] #find-q {
  min-height: 52px;
  background-color: var(--sf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657188' 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: calc(var(--radius) + 4px);
}

:root[data-look="record"] .find-results {
  overflow: hidden;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
}

:root[data-look="record"] .find-results:empty {
  border: 0;
}

:root[data-look="record"] .find-results .find-hit {
  border-bottom: 1px solid var(--line);
}

/* The lists: their records as cards of boxes (the new one dashed, first), the visit's date first, in blue. */
:root[data-look="record"] .list-page {
  background: var(--bg);
}

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

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

:root[data-look="record"][data-text][data-modern] .row,
:root[data-look="record"][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: calc(var(--radius) + 4px);
}

:root[data-look="record"][data-text][data-modern] .kind-visits .row > .cell:first-child,
:root[data-look="record"][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="record"][data-text][data-modern] .kind-visits .lf-on {
  order: -1;
}

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

/* Settings: its sections, a column of cards. */
:root[data-look="record"] .settings {
  max-width: none;
  margin: 0;
  padding: 0;
}

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

/* The scanner: a navy bar with the way back and the title; its panels as white cards. */
:root[data-look="record"] .scan-page .shell-brand {
  display: none;
}

:root[data-look="record"] .scan-page .band-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  min-height: calc(56px * var(--ts));
  padding: 6px 8px;
  background: var(--navy);
  border: 0;
  color: #FFFFFF;
}

:root[data-look="record"] .scan-page .band-row h1 {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  color: #FFFFFF;
  font-size: calc(17px * var(--ts));
  text-align: center;
}

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

/* An icon-only button of a navy bar (the settings icon, the way back): its words its name, the icon white. */
:root[data-look="record"] #scan-back,
:root[data-look="record"] .card-page #to-settings,
:root[data-look="record"] .list-back {
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: none;
  color: #FFFFFF;
  font-size: 0em;
}

:root[data-look="record"] #scan-back {
  --icon: var(--i-back);
  grid-column: 1;
  grid-row: 1;
}

:root[data-look="record"] .card-page #to-settings {
  --icon: var(--i-settings);
}

:root[data-look="record"] .list-back {
  --icon: var(--i-back);
}

:root[data-look="record"] #scan-back::before,
:root[data-look="record"] .card-page #to-settings::before,
:root[data-look="record"] .list-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 PC (the default): one grid. The sidebar is its first column (on the right); the main area its other
   four: the title, the record bar, room, and the toolbar. Its rows: three for the toolbar's line (one where
   it fits, more where it must wrap), two for the notices, then the sidebar's pieces one to a row beside the
   page, which spans them all, and last a row that takes the rest of the height, with STOP and the exit at its
   foot. ── */
:root[data-look="record"] .card-page,
:root[data-look="record"] .list-page,
:root[data-look="record"] .settings-page {
  display: grid;
  grid-template-columns: var(--side-w) auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto auto auto auto auto auto minmax(0, 1fr) auto;
  min-height: 100vh;
  padding: 0;
}

/* The sidebar's navy, the whole height, and the toolbar's white, under the pieces that stand on them. */
:root[data-look="record"] .card-page::before,
:root[data-look="record"] .list-page::before,
:root[data-look="record"] .settings-page::before {
  content: '';
  order: -1;
  grid-column: 1;
  grid-row: 1 / -1;
  background: var(--navy);
}

:root[data-look="record"] .card-page::after,
:root[data-look="record"] .list-page::after,
:root[data-look="record"] .settings-page::after {
  content: '';
  order: -1;
  grid-column: 2 / -1;
  grid-row: 1 / 4;
  background: var(--sf);
  border-bottom: 1px solid var(--line);
}

/* A list or Settings: the band alone is the toolbar, white. An administrator's Settings has no sidebar. */
:root[data-look="record"] .list-page::after,
:root[data-look="record"] .settings-page::after,
:root[data-look="record"] .no-shell::before {
  display: none;
}

:root[data-look="record"] .no-shell {
  --side-w: 0px;
}

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

/* The pieces the PC does elsewhere: the card's toolbar does ✓, ↶ and بطاقة جديدة; the tabs the visits; the
   bar's Settings the card's; the side panel Find; the phone's scanner. */
:root[data-look="record"] .save-buttons,
:root[data-look="record"] .mid-visits,
:root[data-look="record"] .mid-new,
:root[data-look="record"] #to-settings,
:root[data-look="record"] .btn-scan,
:root[data-look="record"] .card-page .shell-bar [data-go]:not([data-go="settings"]),
:root[data-look="record"] .list-page .shell-bar [data-go]:not([data-go="settings"]),
:root[data-look="record"] .settings-page .shell-bar [data-go="find"],
:root[data-look="record"] .shell-tagline,
:root[data-look="record"] .shell-date {
  display: none;
}

/* The toolbar's line: the page's title, the record bar after it, and new, undo and save at its far end. */
:root[data-look="record"] .band-row,
:root[data-look="record"] .list-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-height: var(--head-h);
  margin: 0;
  padding: 0 var(--pad);
  background: var(--sf);
  border: 0;
  box-shadow: none;
}

:root[data-look="record"] .band-row {
  grid-column: 2;
  grid-row: 1;
}

/* On the card, the line's white is the grid's (::after), under the title, the record bar and the toolbar. */
:root[data-look="record"] .card-page .band-row {
  background: none;
}

:root[data-look="record"] .list-page .list-band,
:root[data-look="record"] .settings-page .band-row,
:root[data-look="record"] .no-shell .band-row {
  grid-column: 2 / -1;
  grid-row: 1;
}

:root[data-look="record"] .band-row h1,
:root[data-look="record"] .list-title {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font-size: calc(18px * var(--ts));
  font-weight: 600;
}

:root[data-look="record"] .recbar {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-content: flex-start;
  min-height: var(--head-h);
  align-items: center;
  margin: 0;
  padding: 0 4px;
}

:root[data-look="record"] .shell-toolbar {
  grid-column: 5;
  grid-row: 1;
  align-self: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--head-h);
  padding: 8px var(--pad);
  background: none;
}

:root[data-look="record"] .shell-toolbar [data-act] {
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: calc(var(--radius) + 4px);
  font-weight: 600;
  white-space: nowrap;
}

/* Where the line has no room for all three (the title, the record bar and the toolbar take about 890 px at
   100 % and 1010 at 130 %, beside a main area of 1089 on the maximised window with its scroll bar), the record
   bar has a line of its own under the title; where even the title and the toolbar do not fit (the window
   under 900 px, or under 1300 at 175 %), the toolbar has one too. */
@media (min-width: 1300px) {
  :root[data-look="record"][data-text="150"] .recbar,
  :root[data-look="record"][data-text="175"] .recbar {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    min-height: 0;
    padding: 0 12px 8px;
  }
}

@media (min-width: 900px) and (max-width: 1299.98px) {
  :root[data-look="record"] .recbar {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    min-height: 0;
    padding: 0 12px 8px;
  }

  :root[data-look="record"][data-text="175"] .card-page .band-row {
    grid-column: 2 / -1;
  }

  :root[data-look="record"][data-text="175"] .shell-toolbar {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-content: flex-start;
    min-height: 0;
    padding: 0 var(--pad) 8px;
  }

  :root[data-look="record"][data-text="175"] .recbar {
    grid-row: 3;
  }
}

@media (max-width: 899.98px) {
  :root[data-look="record"] .card-page .band-row {
    grid-column: 2 / -1;
  }

  :root[data-look="record"] .shell-toolbar {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-content: flex-start;
    min-height: 0;
    padding: 0 var(--pad) 8px;
  }

  :root[data-look="record"] .recbar {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: start;
    min-height: 0;
    padding: 0 12px 8px;
  }
}

/* The notices, under the toolbar. */
:root[data-look="record"] .card-page > .notice {
  grid-column: 2 / -1;
  grid-row: 4;
  margin: var(--pad) var(--pad) 0;
  border: 0;
  border-radius: var(--radius);
}

:root[data-look="record"] .card-msg,
:root[data-look="record"] .list-msg {
  grid-column: 2 / -1;
  grid-row: 5;
  max-width: none;
  margin: var(--pad) var(--pad) 0;
}

/* The page: beside the sidebar's pieces. */
:root[data-look="record"] .card-fields,
:root[data-look="record"] .list,
:root[data-look="record"] .settings {
  grid-column: 2 / -1;
  grid-row: 6 / 12;
  align-self: start;
  margin: var(--pad);
}

/* The boxes in a white group, three to a line where they fit; the name and السوابق المرضية the whole line.
   One attribute more than Classic's larger-size columns (:root[data-text]:not([data-text="100"]) .card-fields). */
:root[data-look="record"][data-text][data-modern] .card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(280px * var(--ts))), 1fr));
  gap: 14px 16px;
  width: auto;
  padding: 16px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
}

:root[data-look="record"] .settings,
:root[data-look="record"] .list-top,
:root[data-look="record"] .list-head,
:root[data-look="record"] .list-rows {
  width: auto;
}

:root[data-look="record"][data-text][data-modern] .f {
  grid-column: auto;
}

:root[data-look="record"][data-text][data-modern] .f-wide {
  grid-column: 1 / -1;
}

/* The save mark: the group's first line, at its far end. */
:root[data-look="record"] .mid-save {
  order: -1;
  grid-column: 1 / -1;
  grid-row: auto;
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin: 0;
}

:root[data-look="record"] .mid-save .save-mark:empty {
  display: none;
}

/* The sidebar: the brand, the patient's header, Find, the tabs, Settings, and the tools at its foot. */
:root[data-look="record"] .shell-brand {
  grid-column: 1;
  grid-row: 1 / 6;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
  min-height: var(--head-h);
  padding: calc(16px * var(--ts)) 18px 0;
}

:root[data-look="record"] .shell-logo {
  display: inline-flex;
  align-items: center;
  min-height: calc(18px * var(--ts) * 1.5);
}

:root[data-look="record"] .shell-hero {
  grid-column: 1;
  grid-row: 6;
  margin: 0 12px;
  padding: 12px 6px;
  border-top: 1px solid var(--navy2);
  border-bottom: 1px solid var(--navy2);
}

:root[data-look="record"] .shell-side {
  grid-column: 1;
  grid-row: 7;
  padding: 12px 12px 0;
}

:root[data-look="record"] .side-q {
  min-height: 48px;
}

:root[data-look="record"] .side-results {
  margin-top: 6px;
}

:root[data-look="record"] .shell-tabs {
  grid-column: 1;
  grid-row: 8;
  display: grid;
  gap: 2px;
  padding: 12px 12px 0;
  background: var(--navy);
}

:root[data-look="record"] .shell-bar {
  grid-column: 1;
  grid-row: 9;
  display: grid;
  gap: 2px;
  padding: 2px 12px 12px;
  background: var(--navy);
}

/* A tab, or one of the bar's items: a row of the list, its icon or dot, its words and its count. */
:root[data-look="record"] .shell-tabs button,
:root[data-look="record"] .shell-bar button {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
  color: var(--on-navy);
  font-size: calc(14px * var(--ts));
  font-weight: 500;
  text-align: right;
}

:root[data-look="record"] .shell-tabs button > span,
:root[data-look="record"] .shell-bar button > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

:root[data-look="record"] .shell-tabs button::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 7px;
  border-radius: 50%;
  background: var(--dot, currentColor);
}

:root[data-look="record"] .shell-tabs [data-go="card"]::before {
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: var(--i-card) center / contain no-repeat;
  mask: var(--i-card) center / contain no-repeat;
}

:root[data-look="record"] .shell-bar svg {
  display: inline-flex;
}

:root[data-look="record"] .shell-tabs .shell-count {
  color: #8D9BBE;
  font-size: calc(12px * var(--ts));
}

:root[data-look="record"] .shell-tabs [aria-current="page"],
:root[data-look="record"] .shell-bar [aria-current="page"] {
  background: #FFFFFF;
  color: var(--navy);
  font-weight: 600;
}

:root[data-look="record"] .shell-tabs [aria-current="page"] .shell-count {
  color: var(--ac);
}

:root[data-look="record"] .shell-tabs button:hover,
:root[data-look="record"] .shell-bar button:hover {
  background: var(--navy2);
}

:root[data-look="record"] .shell-tabs [aria-current="page"]:hover,
:root[data-look="record"] .shell-bar [aria-current="page"]:hover {
  background: #FFFFFF;
}

:root[data-look="record"] .tool {
  grid-column: 1;
  grid-row: 10;
  align-self: end;
  justify-content: flex-start;
  margin: 12px 12px 0;
  min-height: 44px;
  padding: 6px 10px;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
  color: var(--on-navy);
  font-size: calc(13px * var(--ts));
  text-align: right;
}

:root[data-look="record"] #stop {
  color: #FFB3AE;
}

:root[data-look="record"] #exit {
  grid-row: 11;
  margin: 2px 12px 12px;
}

:root[data-look="record"] .tool:hover {
  background: var(--navy2);
}

/* The lists on the PC: the title and الى البطاقة in the toolbar, then the records under the column headers. */
:root[data-look="record"] .list-band {
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
}

:root[data-look="record"] .list-top,
:root[data-look="record"] .settings-page .band-row {
  max-width: none;
  border-bottom: 1px solid var(--line);
}

:root[data-look="record"] .list-title {
  flex: 1 1 auto;
}

:root[data-look="record"] .list-page .list-back {
  width: auto;
  padding: 0 14px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: calc(15px * var(--ts));
  gap: 6px;
}

:root[data-look="record"] .list-page .list-back::before {
  width: 20px;
  height: 20px;
}

/* A record in the table: a maximised window, up to 150 %. Its columns are the form's; the visits' first 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 others keep their card number first, as their forms do. A record's save mark, while it shows,
   takes a line of its own under its boxes, at its far end. The columns' least widths at 150 %: the visits 30.5
   em and the others 31 em at most, with their gaps under 800 px of the 1050 px a record has beside the sidebar
   and the window's scroll bar. */
@media (min-width: 1300px) {
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .list-head {
    display: grid;
    gap: 0 10px;
    max-width: none;
    margin: var(--pad) var(--pad) 0;
    padding: 10px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    box-shadow: inset 0 -1px 0 var(--line);
  }

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

  :root[data-look="record"][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 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
  }

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

  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .row-new {
    border-top: 0;
    border-bottom: 1px dashed var(--ac);
  }

  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row,
  :root[data-look="record"][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="record"][data-text][data-modern]:not([data-text="175"]) .kind-visits .lf[data-column="رقم البطاقة"],
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .list-head .head-mark {
    display: none;
  }

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

  :root[data-look="record"][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="record"][data-text][data-modern]:not([data-text="175"]) .kind-surgery .row,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-surgery .list-head,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-hearing .row,
  :root[data-look="record"][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.3fr) minmax(5.5em, 6.5em);
  }

  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-xray .row,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-xray .list-head,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-lab .row,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-lab .list-head,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-pathology .row,
  :root[data-look="record"][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="record"][data-text][data-modern]:not([data-text="175"]) .row-new-title,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .lf .cell-label {
    display: none;
  }

  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row > .cell:first-child,
  :root[data-look="record"][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="record"][data-text][data-modern]:not([data-text="175"]) .kind-visits .lf-on {
    order: 0;
  }

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

  /* In the white table a record's boxes are white with their line; the new record's on the grey, to type in. */
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .row:not(.row-new) .box,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .row:not(.row-new) .long > .long-box {
    background-color: var(--sf);
  }

  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .row-new .box,
  :root[data-look="record"][data-text][data-modern]:not([data-text="175"]) .row-new .long > .long-box {
    background-color: var(--bg);
  }
}

/* ── The sign-in page: a navy half with the brand (and the QR on the PC), a white sheet with the form. ── */
:root[data-look="record"] body:not([class]) {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  grid-template-rows: minmax(24px, 1fr) auto auto minmax(24px, 1fr);
  column-gap: 0;
  min-height: 100vh;
  padding: 0;
}

:root[data-look="record"] body:not([class])::before,
:root[data-look="record"] body:not([class])::after {
  content: '';
  order: -1;
  grid-row: 1 / -1;
}

:root[data-look="record"] body:not([class])::before {
  grid-column: 1;
  background: var(--navy);
}

:root[data-look="record"] body:not([class])::after {
  grid-column: 2;
  background: var(--sf);
}

:root[data-look="record"] .login-main {
  display: contents;
}

:root[data-look="record"] body:not([class]) .shell-brand {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  justify-items: center;
  align-self: end;
  gap: 6px;
  margin: 0 24px 28px;
  padding: 0;
  text-align: center;
}

:root[data-look="record"] body:not([class]) .shell-logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--navy);
}

:root[data-look="record"] body:not([class]) .shell-logo svg {
  width: 34px;
  height: 34px;
}

:root[data-look="record"] body:not([class]) .shell-name {
  font-size: calc(28px * var(--ts));
  line-height: 1.3;
}

:root[data-look="record"] body:not([class]) .shell-tagline {
  display: block;
  color: #B7C3DD;
  font-size: calc(14px * var(--ts));
}

:root[data-look="record"] .qr-panel {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  justify-items: center;
  align-content: start;
  align-self: start;
  gap: 10px;
  margin: 0 24px;
  padding: 0;
  background: var(--navy);
  border: 0;
  box-shadow: none;
  color: #FFFFFF;
  text-align: center;
}

:root[data-look="record"] .qr-panel h2 {
  color: #FFFFFF;
}

:root[data-look="record"] .qr-panel p {
  color: #B7C3DD;
  font-size: calc(14px * var(--ts));
}

:root[data-look="record"] .qr-panel img {
  width: 188px;
  height: 188px;
  margin: 0;
  padding: 10px;
  background: #FFFFFF;
  border-radius: var(--radius);
  box-sizing: content-box;
}

:root[data-look="record"] body:not([class]) .band {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  width: calc(100% - 48px);
  max-width: calc(380px * var(--ts));
  margin: 0 0 16px;
  background: var(--sf);
  border: 0;
  box-shadow: none;
}

:root[data-look="record"] body:not([class]) .band h1 {
  padding: 0;
  font-size: calc(22px * var(--ts));
}

:root[data-look="record"][data-text][data-modern] .login-panel {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: start;
  width: calc(100% - 48px);
  max-width: calc(380px * var(--ts));
  padding: 0;
  background: var(--sf);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root[data-look="record"] body:not([class]) .field input {
  border-color: #C9D3DB;
}

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

:root[data-look="record"] #code-note,
:root[data-look="record"] #resent {
  text-align: center;
}

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

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

/* ── The phone, upright or on its side: one flow of pieces that wrap, in the look's order; the bar at the
   foot. ── */
@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  :root[data-look="record"] .card-page,
  :root[data-look="record"] .list-page,
  :root[data-look="record"] .settings-page {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0 0 calc(var(--shell-bar-h) + 20px);
  }

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

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

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

  :root[data-look="record"][data-text][data-modern] .card-fields {
    display: contents;
  }

  :root[data-look="record"] .save-buttons,
  :root[data-look="record"] .mid-visits,
  :root[data-look="record"] .mid-new,
  :root[data-look="record"] .btn-scan,
  :root[data-look="record"] .card-page .shell-bar [data-go]:not([data-go="visits"]),
  :root[data-look="record"] .list-page .shell-bar [data-go]:not([data-go="visits"]),
  :root[data-look="record"] .settings-page .shell-bar [data-go="find"],
  :root[data-look="record"] .card-page #to-settings {
    display: flex;
  }

  :root[data-look="record"] .settings-page .shell-bar [data-go="visits"],
  :root[data-look="record"] .tool-exit,
  :root[data-look="record"] .qr-panel {
    display: none;
  }

  /* The card's title gives way to the patient's header; kept for readers. */
  :root[data-look="record"] .card-page .band-row h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* The navy header of the card: the patient's header, and the settings icon on its left. */
  :root[data-look="record"] .shell-hero {
    order: 1;
    flex: 1 1 0;
    margin: 0;
    padding: 12px 16px;
    border: 0;
  }

  :root[data-look="record"] .card-page .band-row {
    order: 2;
    flex: 0 0 auto;
    align-items: center;
    min-height: 0;
    padding: 0 8px;
    background: var(--navy);
  }

  /* The small navy bar of a list, Settings and the scanner: the title in its middle, the way back. */
  :root[data-look="record"] .list-band,
  :root[data-look="record"] .settings-page .band-row {
    order: 0;
    flex: 1 1 100%;
    background: var(--navy);
  }

  :root[data-look="record"] .list-top,
  :root[data-look="record"] .settings-page .band-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px;
    min-height: calc(56px * var(--ts));
    padding: 6px 8px;
    background: var(--navy);
  }

  :root[data-look="record"] .list-page .list-title,
  :root[data-look="record"] .settings-page .band-row h1 {
    grid-column: 2;
    grid-row: 1;
    color: #FFFFFF;
    font-size: calc(17px * var(--ts));
    text-align: center;
  }

  :root[data-look="record"] .list-page .list-back {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    padding: 0;
    border: 0;
    color: #FFFFFF;
    font-size: 0em;
  }

  :root[data-look="record"] .list-page .list-back::before {
    width: 24px;
    height: 24px;
  }

  :root[data-look="record"] .list-page .shell-hero {
    flex-basis: 100%;
  }

  /* The tabs on navy under it, sliding sideways; the current one white, with a white line under it. */
  :root[data-look="record"] .shell-tabs {
    order: 5;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
    padding: 0 8px;
    scrollbar-width: none;
  }

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

  :root[data-look="record"] .shell-tabs button {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100vw - 48px);
    min-height: 46px;
    padding: 4px 12px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #B7C3DD;
    gap: 6px;
  }

  :root[data-look="record"] .shell-tabs button::before {
    display: none;
  }

  :root[data-look="record"] .shell-tabs .shell-count {
    padding: 0 6px;
    background: var(--navy2);
    border-radius: 999px;
    color: var(--on-navy);
    line-height: 1.5;
  }

  :root[data-look="record"] .shell-tabs [aria-current="page"],
  :root[data-look="record"] .shell-tabs [aria-current="page"]:hover {
    background: var(--navy);
    border-bottom-color: #FFFFFF;
    color: #FFFFFF;
  }

  :root[data-look="record"] .shell-tabs [aria-current="page"] .shell-count {
    color: #FFFFFF;
  }

  :root[data-look="record"] .card-page > .notice {
    order: 6;
    flex: 1 1 100%;
    margin: 14px 14px 0;
  }

  :root[data-look="record"] .card-msg,
  :root[data-look="record"] .list-msg {
    order: 7;
    flex: 1 1 100%;
    margin: 14px 14px 0;
  }

  /* The boxes in a white group: each a row of its label, 112 px, then its box. */
  :root[data-look="record"][data-text][data-modern] .f {
    order: 10;
    flex: 1 1 100%;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    margin: 0 14px;
    padding: 4px 16px;
    background: var(--sf);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  :root[data-look="record"][data-text][data-modern] .f-name {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
  }

  :root[data-look="record"][data-text][data-modern] .f-history {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
  }

  :root[data-look="record"][data-text][data-modern] .f .label {
    align-self: center;
  }

  /* التدخين: its label and its switch one target of 44 px. */
  :root[data-look="record"][data-text][data-modern] .f-check .label {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* The save row, then الى المراجعات and بطاقة جديدة, the scanner and STOP, then the record bar. */
  :root[data-look="record"] .mid-save {
    order: 20;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 12px;
    margin: 16px 14px 0;
  }

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

  :root[data-look="record"] .mid-save .save-mark {
    margin-inline-start: auto;
  }

  :root[data-look="record"] .mid-visits,
  :root[data-look="record"] .mid-new {
    order: 21;
    flex: 1 1 calc(150px * var(--ts));
    margin: 12px 14px 0;
  }

  :root[data-look="record"] .btn-scan,
  :root[data-look="record"] .tool {
    order: 30;
    flex: 1 1 calc(150px * var(--ts));
    margin: 12px 14px 0;
    min-height: 48px;
    padding: 6px 14px;
    background: var(--sf);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    color: var(--mut);
    font-size: calc(14px * var(--ts));
    justify-content: center;
  }

  :root[data-look="record"] .btn-scan {
    order: 29;
  }

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

  :root[data-look="record"] .recbar {
    order: 40;
    flex: 1 1 100%;
    justify-content: center;
    min-height: 0;
    margin: 12px 0 0;
  }

  /* The bottom bar: three items, the current in blue. */
  :root[data-look="record"] .shell-bar {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--sf);
    border-top: 1px solid var(--line);
  }

  :root[data-look="record"] .shell-bar button {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    height: 100%;
    padding: 4px;
    background: var(--sf);
    border-radius: 0;
    color: var(--mut);
    font-size: calc(12px * var(--ts));
    text-align: center;
  }

  :root[data-look="record"] .shell-bar button > span {
    flex: 0 0 auto;
  }

  :root[data-look="record"] .shell-bar [aria-current="page"],
  :root[data-look="record"] .shell-bar [aria-current="page"]:hover,
  :root[data-look="record"] .shell-bar button:hover {
    background: var(--sf);
    color: var(--ac);
  }

  :root[data-look="record"] .shell-bar button:hover:not([aria-current]) {
    color: var(--mut);
  }

  /* A list, Settings: the page under the bars. */
  :root[data-look="record"] .list,
  :root[data-look="record"] .settings {
    order: 10;
    flex: 1 1 100%;
    margin: 14px;
  }

  /* Find: the dialog over the whole screen, under its navy bar. */
  :root[data-look="record"] .find-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  :root[data-look="record"] .find-dialog .dialog-band {
    justify-content: center;
  }

  /* The sign-in page: the navy half on top, the sheet under it. */
  :root[data-look="record"] body:not([class]) {
    display: flex;
    flex-direction: column;
  }

  :root[data-look="record"] body:not([class])::before,
  :root[data-look="record"] body:not([class])::after {
    display: none;
  }

  :root[data-look="record"] body:not([class]) .shell-brand {
    order: -1;
    align-self: stretch;
    align-content: center;
    min-height: 36vh;
    margin: 0;
    padding: 24px 16px;
    background: var(--navy);
  }

  :root[data-look="record"] body:not([class]) .band {
    align-self: stretch;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 24px 16px 8px;
  }

  :root[data-look="record"] .login-main {
    display: block;
    flex: 1 1 auto;
    padding: 0 16px 24px;
    background: var(--sf);
  }

  :root[data-look="record"][data-text][data-modern] .login-panel {
    width: 100%;
    max-width: none;
  }
}

/* Where the record bar can not hold its place between its arrows (the upright phone), the place has a line of
   its own above them. */
@media (max-width: 699.98px) {
  :root[data-look="record"] .rec-where {
    order: -1;
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* From 150 % on the phone, a label goes above its box, so the box keeps the whole width. */
@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  :root[data-look="record"][data-text="150"][data-modern] .f,
  :root[data-look="record"][data-text="175"][data-modern] .f {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 4px;
  }

  :root[data-look="record"][data-text="150"][data-modern] .f .label,
  :root[data-look="record"][data-text="175"][data-modern] .f .label {
    align-self: start;
  }
}

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

/* The Appearance preview: a navy band, a grey label, a white box, a blue button, on the pale grey page. */
.lp-record {
  background: #F3F5F8;
  border-color: #DEE3EB;
  border-radius: 6px;
  color: #1B2230;
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  overflow: hidden;
}

.lp-record .lp-band {
  background: #1F2A44;
}

.lp-record .lp-label {
  height: 0.5em;
  background: #657188;
  border-radius: 3px;
}

.lp-record .lp-box {
  background: #FFFFFF;
  border: 1px solid #DEE3EB;
  border-radius: 4px;
}

.lp-record .lp-button {
  background: #2B66DB;
  border-radius: 4px;
}