/* The look Calm Clinic (العيادة الهادئة), design 1 of the approved mockup (nazeernajjar.com/mockups/clinic-modern/):
   light and quiet, white surfaces on a pale grey page, one teal accent, the labels above the boxes, in IBM Plex
   Sans Arabic at 16 px; theme-color #FFFFFF.
     the phone  a white bar 56 px high (the page's title in its middle, the settings icon, or the way back); the
                patient's header; the boxes one under the other; the save row; الى المراجعات and بطاقة جديدة;
                جداول المريض as tiles, each with its list's dot and count; the scanner and STOP; the record bar
                in the page; the bottom bar, 64 px, its current item in teal. Find is the Find dialog at full
                screen. A phone on its side keeps all of this (Task 20c), with as many boxes to a line as fit.
     the PC     a 60 px header: the brand in teal over the side panel, the page's title in grey, and the bar
                as pill tabs (card, visits, settings; Find is the side panel's), the current one on --acs; the
                side panel, 320 px, on the right: Find always there, and آخر البطاقات; the main area: the
                patient's header, a row with the save row and the record bar, the boxes three to a line where
                they fit, the main buttons, the lists as tiles, and the tools.
     the lists  cards of boxes with the date in teal, the new one dashed at the top; on a maximised PC up to
                150 %, a white table with its header on --bg, its title and الى البطاقة above it.
   The mockup's colours, verbatim, but two darkened just enough for 4.5:1 (the task report names them):
   --ac #0E7C86 → #0E7983 (teal words on --acs), --red #D64545 → #D24444 (white words on it, red on white).
   Every selector starts with :root[data-look="calm"], except the Appearance preview's .lp-calm, so nothing
   here can match in another look or in Classic. Font sizes are a size times --ts. */

:root[data-look="calm"] {
  --bg: #F4F7FA;
  --sf: #FFFFFF;
  --ink: #13232E;
  --mut: #5C6B78;
  --line: #DCE3E9;
  --ac: #0E7983;
  --acs: #E3F3F4;
  --on-ac: #FFFFFF;
  --red: #D24444;
  --font: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  --radius: 12px;
  --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: 320px;
  --strip-h: 0px;
  --long-pad: 11px 14px;
}

:root[data-look="calm"].strip-on {
  --strip-h: calc(36px * 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, beside the side panel. */
:root[data-look="calm"] .card-page,
:root[data-look="calm"] .list-page,
:root[data-look="calm"] .settings-page {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 16px 12px;
  padding: 0 24px 32px;
  padding-inline-start: calc(var(--side-w) + 24px);
}

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

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

/* An administrator's Settings has no side panel and no bar. */
:root[data-look="calm"] .settings-page.no-shell {
  padding-inline-start: 24px;
}

:root[data-look="calm"] .no-shell .band-row {
  flex: 1 1 100%;
  margin-inline-end: -24px;
}

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

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

/* The header: the band (the page's title) and the bar's pill tabs, white, 60 px. The title is as wide as its
   words and the pills have the rest of the line, wrapping inside it when they must (a window not maximised, at
   the larger sizes), both as tall as the taller: the header stays one white strip. */
:root[data-look="calm"] .band-row {
  order: 1;
  flex: 0 1 auto;
  align-self: stretch;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-height: var(--head-h);
  margin-inline-start: -24px;
  padding: 0 20px;
  border-bottom: 0;
  box-shadow: -12px 0 0 var(--sf), 0 1px 0 var(--line), -12px 1px 0 var(--line);
}

:root[data-look="calm"] .band-row h1 {
  flex: 0 1 auto;
  padding: 0;
  color: var(--mut);
  font-size: calc(16px * var(--ts));
  font-weight: 500;
}

:root[data-look="calm"] #to-settings {
  display: none;
}

:root[data-look="calm"] .shell-bar {
  order: 2;
  flex: 1 1 0;
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-height: var(--head-h);
  margin-inline-end: -24px;
  padding: 8px 20px;
  background: var(--sf);
  box-shadow: 0 1px 0 var(--line);
}

:root[data-look="calm"] .shell-bar button {
  min-height: 44px;
  padding: 0 16px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--mut);
  font-weight: 500;
}

:root[data-look="calm"] .shell-bar svg,
:root[data-look="calm"] .shell-bar [data-go="find"] {
  display: none;
}

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

/* The brand, over the side panel. */
:root[data-look="calm"] .card-page .shell-brand,
:root[data-look="calm"] .list-page .shell-brand,
:root[data-look="calm"] .settings-page .shell-brand {
  position: fixed;
  top: var(--strip-h);
  right: 0;
  z-index: 700;
  flex-wrap: nowrap;
  gap: 8px;
  width: var(--side-w);
  height: var(--head-h);
  padding: 0 20px;
  box-shadow: 0 1px 0 var(--line);
  color: var(--ac);
}

:root[data-look="calm"] .shell-logo {
  display: inline-flex;
}

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

:root[data-look="calm"] .shell-tagline,
:root[data-look="calm"] .shell-date {
  display: none;
}

/* The side panel: Find always there, and آخر البطاقات. */
:root[data-look="calm"] .shell-side {
  position: fixed;
  top: calc(var(--strip-h) + var(--head-h) + 1px);
  right: 0;
  bottom: 0;
  z-index: 600;
  width: var(--side-w);
  padding: 14px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
}

:root[data-look="calm"] .side-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root[data-look="calm"] .side-title {
  margin: 14px 4px 6px;
}

/* The main area: the notices, the patient's header, the save row with the record bar. */
:root[data-look="calm"] .notice {
  order: 3;
  flex: 1 1 100%;
  border: 0;
  border-radius: var(--radius);
}

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

:root[data-look="calm"] .shell-hero {
  order: 5;
  flex: 1 1 100%;
  padding: 4px 0 0;
}

:root[data-look="calm"] .mid-save {
  order: 6;
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}

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

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

:root[data-look="calm"] .mid-save .save-mark {
  margin: 0;
  text-align: right;
}

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

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

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

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

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

:root[data-look="calm"] .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="calm"] .rec-count {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

/* The main buttons: الى المراجعات in teal, بطاقة جديدة in ink, white tiles. */
:root[data-look="calm"] .mid-visits,
:root[data-look="calm"] .mid-new {
  order: 20;
  flex: 1 1 calc(220px * var(--ts));
  align-self: stretch;
}

:root[data-look="calm"] .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) + 2px);
  color: var(--ac);
  font-size: calc(16px * var(--ts));
}

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

/* جداول المريض: the tiles, three to a line where they fit. */
:root[data-look="calm"] .shell-tabs {
  order: 30;
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(260px * var(--ts))), 1fr));
  gap: 8px;
  padding: 0;
  background: none;
}

:root[data-look="calm"] .shell-tabs::before {
  content: attr(aria-label);
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: calc(15px * var(--ts));
  font-weight: 600;
}

:root[data-look="calm"] .shell-tabs button {
  justify-content: flex-start;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

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

:root[data-look="calm"] .shell-tabs button::after {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--mut);
  -webkit-mask: var(--i-fwd) center / contain no-repeat;
  mask: var(--i-fwd) center / contain no-repeat;
}

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

:root[data-look="calm"] .shell-tabs [aria-current="page"] {
  border-color: var(--ac);
  background: var(--acs);
}

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

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

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

/* The lists: their title and الى البطاقة over their records, after the patient's header. */
:root[data-look="calm"] .list-page .shell-bar {
  flex-basis: 100%;
  margin-inline-start: -24px;
}

:root[data-look="calm"] .list-band {
  order: 6;
  flex: 1 1 100%;
  background: none;
  border: 0;
}

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

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

:root[data-look="calm"] .list-back {
  --icon: var(--i-back);
  gap: 6px;
  min-width: 0;
  margin-inline-start: auto;
  font-size: calc(15px * var(--ts));
}

:root[data-look="calm"] .list-back::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

:root[data-look="calm"] .list {
  order: 8;
  flex: 1 1 100%;
}

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

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

/* A record as a card: its boxes as many to a line as fit, the visit's date first, in teal. */
:root[data-look="calm"][data-text][data-modern] .row,
:root[data-look="calm"][data-text][data-modern] .kind-visits .row {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(150px * var(--ts))), 1fr));
  align-items: start;
}

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

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

/* A record in the table: on a maximised PC, up to 150 %, with the window's scroll bar beside it. 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, and every visit's is his); the other lists keep their card
   number first, as their forms do. The columns' least widths, at 150 %: the visits 30.5em and the others 31em
   at most, with their gaps under 800 px of the 948 px a record has beside the side panel and the scroll bar. */
@media (min-width: 1300px) {
  :root[data-look="calm"]:not([data-text="175"]) .list-band {
    background: var(--sf);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: calc(var(--radius) + 2px) calc(var(--radius) + 2px) 0 0;
  }

  :root[data-look="calm"]:not([data-text="175"]) .list-top {
    padding: 10px 16px;
  }

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

  :root[data-look="calm"]:not([data-text="175"]) .list-page {
    row-gap: 0;
  }

  :root[data-look="calm"]:not([data-text="175"]) .list-page .shell-bar,
  :root[data-look="calm"]:not([data-text="175"]) .list-page .shell-hero {
    margin-bottom: 16px;
  }

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

  :root[data-look="calm"][data-text][data-modern]:not([data-text="175"]) .row,
  :root[data-look="calm"][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="calm"][data-text][data-modern]:not([data-text="175"]) .row-new {
    border-top: 0;
  }

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

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

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

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

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

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

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

:root[data-look="calm"] .settings-page .band-row ~ .settings {
  padding-top: 4px;
}

/* Find (the phone's): the page's grey under a white bar, the box with its magnifier, the results as rows
   that light up in --acs. */
:root[data-look="calm"] .find-dialog {
  background: var(--bg);
}

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

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

:root[data-look="calm"] .find-results .find-hit {
  border: 0;
  border-radius: var(--radius);
  background: none;
}

:root[data-look="calm"] .find-results .find-hit:hover,
:root[data-look="calm"] .find-results .find-hit:focus {
  background: var(--acs);
}

/* The sign-in page: the brand in the middle, the form on a white panel, the QR on another beside it.
   body:not([class]) is the sign-in page: login.html's <body> is the one with no class (the card, the lists,
   Settings and the scanner each have theirs), so a class given to it must come here too. */
:root[data-look="calm"] body:not([class]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
}

:root[data-look="calm"] .band:not(.band-row):not(.list-band),
:root[data-look="calm"] .scan-page .shell-brand {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root[data-look="calm"] body:not([class]) .shell-brand {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  text-align: center;
}

:root[data-look="calm"] body:not([class]) .shell-logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--ac);
  color: var(--on-ac);
}

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

:root[data-look="calm"] body:not([class]) .shell-name {
  color: var(--ink);
  font-size: calc(26px * var(--ts));
  font-weight: 600;
  line-height: 1.3;
}

:root[data-look="calm"] body:not([class]) .shell-tagline {
  display: block;
  color: var(--mut);
}

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

:root[data-look="calm"][data-text][data-modern] .login-panel {
  flex: 1 1 340px;
  max-width: calc(400px * var(--ts));
}

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

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

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

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

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

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

/* The scanner: its bar, and its panels in the middle. */
:root[data-look="calm"] .scan-page .band-row {
  order: 0;
  margin: 0;
  box-shadow: 0 1px 0 var(--line);
}

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

:root[data-look="calm"] #scan-back {
  --icon: var(--i-back);
}

/* The phone, upright or on its side: the white bar on top, one column, the bar at the foot. */
@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  :root[data-look="calm"] .card-page,
  :root[data-look="calm"] .list-page,
  :root[data-look="calm"] .settings-page {
    gap: 16px 12px;
    padding: 0 16px calc(var(--shell-bar-h) + 20px);
    padding-inline-start: 16px;
  }

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

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

  :root[data-look="calm"] .no-shell .band-row {
    margin-inline-end: -16px;
  }

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

  /* The white bar: the title in the middle; the settings icon on the left, the way back on the right. */
  :root[data-look="calm"] .band-row,
  :root[data-look="calm"] .list-band {
    order: 1;
    flex: 1 1 100%;
    display: block;
    min-height: calc(56px * var(--ts));
    margin: 0 -16px;
    padding: 0;
    background: var(--sf);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
  }

  :root[data-look="calm"] .band-row,
  :root[data-look="calm"] .list-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
  }

  :root[data-look="calm"] .list-top {
    min-height: calc(56px * var(--ts));
  }

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

  :root[data-look="calm"] #to-settings,
  :root[data-look="calm"] .list-back,
  :root[data-look="calm"] #scan-back {
    display: inline-flex;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--ac);
    font-size: 0em;
  }

  :root[data-look="calm"] #to-settings {
    --icon: var(--i-settings);
    grid-column: 3;
  }

  :root[data-look="calm"] .list-back,
  :root[data-look="calm"] #scan-back {
    grid-column: 1;
  }

  :root[data-look="calm"] #to-settings::before,
  :root[data-look="calm"] .list-back::before,
  :root[data-look="calm"] #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;
  }

  :root[data-look="calm"] .shell-hero {
    padding: 0;
  }

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

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

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

  :root[data-look="calm"] .shell-tabs {
    order: 20;
  }

  :root[data-look="calm"] .btn-scan {
    order: 29;
    display: inline-flex;
  }

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

  :root[data-look="calm"] .recbar {
    order: 40;
    flex: 1 1 100%;
    margin: 0;
  }


  /* The bottom bar, its current item in teal. */
  :root[data-look="calm"] .shell-bar,
  :root[data-look="calm"] .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="calm"] .shell-bar button {
    padding: 4px;
    border-radius: 0;
    font-size: calc(12px * var(--ts));
    font-weight: 500;
  }

  :root[data-look="calm"] .shell-bar svg,
  :root[data-look="calm"] .shell-bar [data-go="find"] {
    display: inline-flex;
  }

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

  /* Find: the dialog over the whole screen. */
  :root[data-look="calm"] .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="calm"] .find-dialog .dialog-band {
    justify-content: center;
  }

  /* The lists: the title in the bar, the way back on its right. */
  :root[data-look="calm"] .list-band {
    order: 1;
  }

  :root[data-look="calm"] .list-title {
    padding: 0;
  }

  /* The sign-in page and the scanner on the phone. */
  :root[data-look="calm"] body:not([class]) {
    justify-content: flex-start;
    padding: 32px 16px;
  }

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

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

@media (min-width: 700px) and (max-width: 899.98px) {
  :root[data-look="calm"][data-text]:not([data-text="100"]):not([data-text="115"]) .rec-where {
    order: -1;
    flex: 1 1 100%;
    justify-content: center;
  }
}

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

/* The Appearance preview: a white bar, a grey label, a white box, a teal button, on the pale grey page. */
.lp-calm {
  background: #F4F7FA;
  border-color: #DCE3E9;
  border-radius: 6px;
  color: #13232E;
  font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  overflow: hidden;
}

.lp-calm .lp-band {
  background: #FFFFFF;
  border-bottom: 1px solid #DCE3E9;
}

.lp-calm .lp-label {
  height: 0.5em;
  background: #5C6B78;
  border-radius: 3px;
}

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

.lp-calm .lp-button {
  background: #0E7983;
  border-radius: 4px;
}