/* The look Paper File (الملف الورقي), design 4 of the approved mockup (nazeernajjar.com/mockups/clinic-modern/):
   warm paper, classic Arabic type, ruled lines instead of boxes, laid out like a printed patient file with an
   index in its margin; Noto Naskh Arabic at 17 px with line height 1.7, Amiri for the headings, the dates, the
   counts, the record bar's place and the boxes' numbers; theme-color #F7F2EA.
     the masthead  العيادة in Amiri at 26 px and today's date, over a rule in the ink (#shell-brand);
     the card      the patient's name a 34 px title, «بطاقة رقم N · N سنة · <sex>» under it, and the record bar;
                   the section headings in the accent over a rule (بطاقة المريض, جداول المريض, a list's own
                   title, Settings' sections); the boxes as ruled lines, a line under them only; the buttons as
                   underlined words, ✓ حفظ a pill; the lists as a numbered index (١. المراجعات …), the one place
                   with Arabic-Indic numbers;
     the phone     one column under the masthead, and the foot bar (card, visits, find, settings), its current
                   item underlined in the accent. A phone on its side keeps all of this (Task 20c), with two
                   boxes to a line;
     the PC        a sheet, at most 1160 px wide, centred on the paper, with a 236 px index in its margin (at
                   175 % on a maximised window, 236 px × the size, so its lists keep to two lines): the
                   card and the six lists with their counts (#shell-tabs), Find and Settings (the bar's), and the
                   tools (STOP and the exit). The body is a grid: the masthead across it, then the sheet's two
                   columns, the index and the main one. Each column is a stack of its own: the main one's first
                   pieces (the name, the record bar, a heading) each have a row, the index's lists span those
                   rows and one more, which only they and the main column's last piece (the boxes, a list's
                   records, Settings) cross, so that row takes what the lists need beyond the others and
                   neither stack leaves a gap; the main column's last piece also crosses the last row, 1fr,
                   which takes what it needs beyond the index. The sheet and the index's line are the body's
                   ::before and ::after;
     the lists     ruled records, the date first in the accent; on a maximised PC up to 150 %, a table under
                   its headers, the visits' first column their date, headed في;
     the strip     the accent, with white words.
   The mockup's colours, but two darkened just enough for 4.5:1 (the task report names them):
   --mut #8A7B6A → #746759 (it was 3.7:1 on the paper, 4.0:1 on the sheet and 3.4:1 on --acs), and
   --ac #B5533C → #A94D38 (4.4:1 on the paper and 4.1:1 on --acs). --red (#B3261E) is the look's own: the
   mockup draws no error. The figures stay Latin everywhere but the lists' index (Global Constraints).
   Every selector starts with :root[data-look="paper"], except the Appearance preview's .lp-paper, so nothing
   here can match in another look or in Classic. Font sizes are a size times --ts. Rules on the labels, the
   lists' rows and the sign-in panel start :root[data-look="paper"][data-text][data-modern], one attribute
   more than Classic's larger-size rules, which would outweigh them otherwise. */

:root[data-look="paper"] {
  --bg: #F7F2EA;
  --sf: #FFFDF9;
  --ink: #2B2218;
  --mut: #746759;
  --line: #E2D8C8;
  --ac: #A94D38;
  --acs: #F6E6E0;
  --on-ac: #FFFFFF;
  --red: #B3261E;
  --font: 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
  --radius: 4px;
  --list-visits: #0E7C86;
  --list-surgery: #D64545;
  --list-hearing: #2A9DB0;
  --list-xray: #C99A00;
  --list-lab: #4A86D8;
  --list-pathology: #7A4FA8;
  /* The look's own. */
  --serif: 'Amiri', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
  --shell-bar-h: calc(52px * var(--ts));
  --pad: 36px;
  /* The index's width on the PC (wider at 175 % on a maximised window, below). */
  --index-w: 236px;
  --long-pad: 8px 4px;
  --long-line: 1.7;
}

/* The page: Noto Naskh at 17 px (the body keeps the app's 16 px × the size, which its pieces start from). */
:root[data-look="paper"] body {
  line-height: 1.7;
}

:root[data-look="paper"] body > * {
  font-size: calc(17px * var(--ts));
}

:root[data-look="paper"] h1,
:root[data-look="paper"] h2,
:root[data-look="paper"] h3 {
  font-family: var(--serif);
  font-weight: 700;
}

/* What the look shows elsewhere: the card's toolbar (its own ✓, ↶ and بطاقة جديدة show), the five list buttons
   (the index), the binoculars and the side panel (the bar's بحث, in the index or the foot bar), the card's
   الإعدادات and Settings' الى البطاقة (the bar's), the patient's initial, the brand's cross and line, and the
   icons of the bar and of Settings' headings (the words are enough on paper). */
:root[data-look="paper"] .shell-toolbar,
:root[data-look="paper"] .btn-list,
:root[data-look="paper"] #find,
:root[data-look="paper"] .shell-side,
:root[data-look="paper"] #to-settings,
:root[data-look="paper"] .settings-page #to-card,
:root[data-look="paper"] .list-name,
:root[data-look="paper"] .hero-avatar,
:root[data-look="paper"] .shell-logo,
:root[data-look="paper"] .shell-tagline,
:root[data-look="paper"] .shell-bar svg,
:root[data-look="paper"] .set-title::before {
  display: none;
}

/* The masthead: العيادة and the date over a rule in the ink. */
:root[data-look="paper"] .shell-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 16px;
  padding: 10px 20px 6px;
  background: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}

:root[data-look="paper"] .shell-name {
  font-family: var(--serif);
  font-size: calc(26px * var(--ts));
  font-weight: 700;
  line-height: 1.3;
}

:root[data-look="paper"] .shell-date {
  display: inline;
  color: var(--mut);
  font-size: calc(14px * var(--ts));
}

/* The PC: the masthead, then the sheet with its index (the default; the phone's is below). */
:root[data-look="paper"] .card-page,
:root[data-look="paper"] .list-page,
:root[data-look="paper"] .settings-page {
  display: grid;
  grid-template-columns: [page-start] minmax(24px, 1fr) [sheet-start index-start] var(--index-w) [index-end main-start] minmax(0, 924px) [main-end sheet-end] minmax(24px, 1fr) [page-end];
  grid-template-rows: [mast] auto [notice] auto [msg] auto [r1] auto [r2] auto [r3] auto [r4] auto [r5] auto [r6] auto [rest] 1fr;
  align-items: start;
  padding: 0;
}

/* An administrator's Settings has no index: its sheet is one column. */
:root[data-look="paper"] .settings-page.no-shell {
  grid-template-columns: [page-start] minmax(24px, 1fr) [sheet-start main-start] minmax(0, 924px) [main-end sheet-end] minmax(24px, 1fr) [page-end];
}

:root[data-look="paper"] .card-page::before,
:root[data-look="paper"] .list-page::before,
:root[data-look="paper"] .settings-page::before {
  content: '';
  grid-column: sheet-start / sheet-end;
  grid-row: notice / -1;
  align-self: stretch;
  background: var(--sf);
  border: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: 0 10px 40px rgba(43, 34, 24, 0.08);
  pointer-events: none;
}

/* The index's line, between it and the main column. */
:root[data-look="paper"] .card-page::after,
:root[data-look="paper"] .list-page::after,
:root[data-look="paper"] .settings-page::after {
  content: '';
  grid-column: index-start / index-end;
  grid-row: r1 / -1;
  justify-self: end;
  align-self: stretch;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

:root[data-look="paper"] .settings-page.no-shell::after {
  content: none;
}

:root[data-look="paper"] .card-page .shell-brand,
:root[data-look="paper"] .list-page .shell-brand,
:root[data-look="paper"] .settings-page .shell-brand {
  grid-column: page-start / page-end;
  grid-row: mast;
  align-self: stretch;
  margin-bottom: 20px;
}

:root[data-look="paper"] .notice,
:root[data-look="paper"] .card-msg,
:root[data-look="paper"] .list-msg {
  grid-column: sheet-start / sheet-end;
  max-width: none;
  margin: 20px var(--pad) 0;
  border: 0;
  border-radius: var(--radius);
}

:root[data-look="paper"] .notice {
  grid-row: notice;
}

:root[data-look="paper"] .card-msg,
:root[data-look="paper"] .list-msg {
  grid-row: msg;
}

/* The main column: the name with its card line, the record bar, and the page's heading; then the boxes, a
   list's records or Settings. */
:root[data-look="paper"] .shell-hero,
:root[data-look="paper"] .recbar,
:root[data-look="paper"] .band-row,
:root[data-look="paper"] .list-band,
:root[data-look="paper"] .card-fields,
:root[data-look="paper"] .list,
:root[data-look="paper"] .settings {
  grid-column: main-start / main-end;
  min-width: 0;
  margin-right: var(--pad);
  margin-left: var(--pad);
}

:root[data-look="paper"] .shell-hero { grid-row: r1; }
:root[data-look="paper"] .recbar { grid-row: r2; }
:root[data-look="paper"] .card-page .band-row { grid-row: r3; }
:root[data-look="paper"] .card-fields { grid-row: r4 / -1; }
:root[data-look="paper"] .list-band { grid-row: r2; }
:root[data-look="paper"] .list { grid-row: r3 / -1; }
:root[data-look="paper"] .settings-page .band-row { grid-row: r1; }
:root[data-look="paper"] .settings { grid-row: r2 / -1; }

/* The index: the lists over as many rows as the main column's first pieces and one more, then Find and
   Settings, then the tools. */
:root[data-look="paper"] .shell-tabs,
:root[data-look="paper"] .shell-bar,
:root[data-look="paper"] .tools {
  grid-column: index-start / index-end;
  min-width: 0;
}

:root[data-look="paper"] .card-page .shell-tabs { grid-row: r1 / r5; }
:root[data-look="paper"] .card-page .shell-bar { grid-row: r5; }
:root[data-look="paper"] .card-page .tools { grid-row: r6; }
:root[data-look="paper"] .list-page .shell-tabs { grid-row: r1 / r4; }
:root[data-look="paper"] .list-page .shell-bar { grid-row: r4; }
:root[data-look="paper"] .settings-page .shell-bar { grid-row: r1 / r3; }

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

/* The patient's name, a title, and his card line: بطاقة رقم N · N سنة · <sex>. */
:root[data-look="paper"] .shell-hero {
  display: block;
  padding: 28px 0 0;
  background: none;
}

:root[data-look="paper"] .hero-name {
  display: block;
  font-family: var(--serif);
  font-size: calc(34px * var(--ts));
  font-weight: 700;
  line-height: 1.3;
}

:root[data-look="paper"] .hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35em;
  margin-top: 2px;
  color: var(--mut);
  font-size: calc(15px * var(--ts));
}

:root[data-look="paper"] .hero-chips > span {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--mut);
  font-size: calc(15px * var(--ts));
  line-height: 1.7;
}

/* The number keeps its own left-to-right (a card number may be negative); its words stand on its right. */
:root[data-look="paper"] .hero-chips > .hero-card {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: baseline;
  gap: 0.3em;
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(18px * var(--ts));
  font-weight: 700;
}

:root[data-look="paper"] .hero-chips > .hero-card::before {
  content: 'بطاقة رقم';
  color: var(--mut);
  font-family: var(--font);
  font-size: calc(15px * var(--ts));
  font-weight: 400;
}

:root[data-look="paper"] .hero-chips > :not([hidden]) ~ span::before {
  content: '·';
  margin-inline-end: 0.35em;
}

/* The record bar, under the card line: its arrows in the accent, its place a ruled box in Amiri. */
:root[data-look="paper"] .recbar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 2px;
  height: auto;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--mut);
  font-size: calc(15px * var(--ts));
}

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

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

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

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

:root[data-look="paper"] .rec-pos {
  width: 3.6em;
  height: auto;
  min-height: 44px;
  padding: 2px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(17px * var(--ts));
  font-weight: 700;
  line-height: 1.7;
}

:root[data-look="paper"] .rec-count {
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(17px * var(--ts));
  font-weight: 700;
}

/* A section's heading: in the accent, in Amiri, over a rule. */
:root[data-look="paper"] .card-page .band-row {
  display: block;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

:root[data-look="paper"] .card-page .band-row h1,
:root[data-look="paper"] .band .list-title,
:root[data-look="paper"] .set-title {
  display: block;
  margin: 0;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  color: var(--ac);
  font-family: var(--serif);
  font-size: calc(21px * var(--ts));
  font-weight: 700;
  line-height: 1.5;
  text-shadow: none;
}

/* The boxes, two to a line where they fit, as ruled lines; the name and السوابق المرضية the whole line; then
   the save row and the main buttons. */
:root[data-look="paper"] .card-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px 28px;
  padding: 0 0 28px;
}

:root[data-look="paper"][data-text][data-modern] .f {
  flex: 1 1 calc(300px * var(--ts));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  align-self: stretch;
  align-content: start;
  min-width: 0;
}

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

:root[data-look="paper"][data-text][data-modern] .label,
:root[data-look="paper"][data-text][data-modern] .cell-label,
:root[data-look="paper"][data-text][data-modern] .lf-on .cell-label {
  color: var(--mut);
  font-size: calc(13px * var(--ts));
  font-weight: 400;
  line-height: 1.5;
}

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

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

:root[data-look="paper"][data-text][data-modern] .f-check .f-box {
  flex-direction: row;
  align-items: center;
  min-height: 46px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
}

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

:root[data-look="paper"] .box,
:root[data-look="paper"] .field input,
:root[data-look="paper"] .card .box,
:root[data-look="paper"] .list .box,
:root[data-look="paper"] .card .box-name {
  min-height: 46px;
  padding: 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-size: calc(17px * var(--ts));
  line-height: 1.7;
}

:root[data-look="paper"] .box-select {
  padding-inline-end: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23746759' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 4px center;
}

/* The boxes' numbers in Amiri, a little larger, and still Latin. A box's line is 1.7 (Naskh's and Amiri's
   letters stand taller than their size, and a lower line scrolls them inside the box). */
:root[data-look="paper"] .box-number,
:root[data-look="paper"] .box-fee,
:root[data-look="paper"] .box-date,
:root[data-look="paper"] .card .box-number,
:root[data-look="paper"] .list .box-number,
:root[data-look="paper"] .list .box-fee,
:root[data-look="paper"] .list .box-date {
  font-family: var(--serif);
  font-size: calc(19px * var(--ts));
  line-height: 1.7;
}

:root[data-look="paper"] .box:focus,
:root[data-look="paper"] .field input:focus,
:root[data-look="paper"] .card .box:focus,
:root[data-look="paper"] .list .box:focus,
:root[data-look="paper"] .long > .long-box:focus,
:root[data-look="paper"] .rec-pos:focus {
  border-color: var(--ink);
  outline: 2px solid var(--ac);
  outline-offset: 1px;
}

/* A long box's whole value: the same ruled line; its hidden twin lays its text out alike. */
:root[data-look="paper"] .long > .long-box,
:root[data-look="paper"] .long::after {
  border-width: 0 0 1px;
}

:root[data-look="paper"] .long > .long-box {
  min-height: 46px;
  background: none;
  border-color: var(--line);
  border-radius: 0;
  color: var(--ink);
}

:root[data-look="paper"] .long > .long-box[aria-invalid="true"] {
  border-color: var(--red);
}

/* The save row: ✓ حفظ a pill, ↶ تراجع an underlined word, the save mark; الى المراجعات and بطاقة جديدة
   underlined words with their marks. */
:root[data-look="paper"] .mid-save {
  order: 30;
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 18px 0 0;
}

:root[data-look="paper"] .mid-visits {
  order: 31;
}

:root[data-look="paper"] .mid-new {
  order: 32;
}

:root[data-look="paper"] .mid-visits,
:root[data-look="paper"] .mid-new {
  flex: 0 1 auto;
  margin: 18px 0 0;
}

:root[data-look="paper"] .save-buttons {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

:root[data-look="paper"] #save {
  padding: 4px 20px;
  background: var(--ac);
  border: 0;
  border-radius: 999px;
  color: var(--on-ac);
  font-weight: 700;
}

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

/* An underlined word: ↶ تراجع, the main buttons, الى البطاقة, the resend and back of the sign-in, Settings'
   small buttons. */
:root[data-look="paper"] #undo,
:root[data-look="paper"] .mid .btn-main,
:root[data-look="paper"] .list-back,
:root[data-look="paper"] .kind-visits .list-back,
:root[data-look="paper"] #scan-back,
:root[data-look="paper"] .btn-resend,
:root[data-look="paper"] .login-form [data-back],
:root[data-look="paper"] .app-get,
:root[data-look="paper"] .device-signout,
:root[data-look="paper"] .table .btn,
:root[data-look="paper"] .backup-download,
:root[data-look="paper"] #signout-others {
  justify-content: flex-start;
  width: auto;
  min-width: 44px;
  height: auto;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ac);
  font-size: calc(17px * var(--ts));
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

:root[data-look="paper"] #signout-others {
  color: var(--red);
}

/* Any other plain button (إغلاق, إلغاء, رجوع, اختيار مجلد النسخ …): an underlined word too. */
:root[data-look="paper"] .btn:not(.btn-main):not(.btn-icon):not(.tool):not(.btn-scan) {
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border-color: transparent;
  border-radius: 0;
  color: var(--ac);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 6px;
}

/* A plain button that is off (resend while it counts down): a quiet word, not underlined, so it does not look
   clickable. The rule above with :disabled, so it wins. */
:root[data-look="paper"] .btn:not(.btn-main):not(.btn-icon):not(.tool):not(.btn-scan):disabled {
  color: var(--mut);
  text-decoration: none;
  cursor: default;
}

:root[data-look="paper"] .btn-main {
  border-radius: 999px;
}

/* The index on the PC: the card and the six lists with their counts, the current one in the accent on its
   wash with a bar at its end. Its heading is the tabs' own name, quiet. */
:root[data-look="paper"] .shell-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 28px 20px 0;
  background: none;
}

:root[data-look="paper"] .shell-tabs::before {
  content: attr(aria-label);
  margin: 0 8px 8px;
  color: var(--mut);
  font-family: var(--serif);
  font-size: calc(18px * var(--ts));
  font-weight: 700;
  line-height: 1.4;
}

:root[data-look="paper"] .shell-tabs button,
:root[data-look="paper"] .shell-bar button {
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-inline-end: 3px solid transparent;
  border-radius: 0;
  color: var(--ink);
  font-size: calc(16px * var(--ts));
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
}

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

:root[data-look="paper"] .shell-count {
  color: var(--mut);
  font-family: var(--serif);
  font-size: calc(17px * var(--ts));
  font-weight: 400;
}

:root[data-look="paper"] .shell-tabs [aria-current="page"],
:root[data-look="paper"] .shell-bar [aria-current="page"] {
  background: var(--acs);
  border-inline-end-color: var(--ac);
  color: var(--ac);
  font-weight: 400;
}

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

/* Find and Settings, under a rule; on the card and the lists the index has the card and the visits. */
:root[data-look="paper"] .shell-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  margin: 10px 20px 0;
  padding: 10px 0 0;
  background: none;
  border-top: 1px solid var(--line);
}

:root[data-look="paper"] .settings-page .shell-bar {
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}

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

/* The bar's items in the index's own order, on the PC's Settings as on the other pages (the card and the
   visits, then Find and Settings), and in the phone's foot bar. */
:root[data-look="paper"] .shell-bar [data-go="card"] { order: 1; }
:root[data-look="paper"] .shell-bar [data-go="visits"] { order: 2; }
:root[data-look="paper"] .shell-bar [data-go="find"] { order: 3; }
:root[data-look="paper"] .shell-bar [data-go="settings"] { order: 4; }

/* The tools, under a rule: STOP and the exit, quiet, each its mark and its words. */
:root[data-look="paper"] .tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 10px 20px 28px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

:root[data-look="paper"] .tool,
:root[data-look="paper"] .btn-scan {
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  min-height: 44px;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--mut);
  font-size: calc(15px * var(--ts));
  font-weight: 400;
  text-align: right;
}

/* The lists: the list's title in the accent with الى البطاقة, over its records. */
:root[data-look="paper"] .list-band {
  margin-top: 18px;
  background: none;
  border: 0;
  box-shadow: none;
}

:root[data-look="paper"] .list-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 16px;
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

:root[data-look="paper"] .band .list-title {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
}

:root[data-look="paper"] .list-back {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

:root[data-look="paper"] .list {
  padding-bottom: 28px;
}

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

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

/* A record: its boxes as many to a line as fit, ruled, under a rule; the new one first, under «+ سجل جديد» in
   the accent. The visits keep no card number (each is the patient's, in his header): their date leads, in
   Amiri, in the accent. */
:root[data-look="paper"][data-text][data-modern] .list-rows {
  gap: 0;
}

:root[data-look="paper"][data-text][data-modern] .row,
:root[data-look="paper"][data-text][data-modern] .kind-visits .row {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(150px * var(--ts))), 1fr));
  align-items: start;
  gap: 2px 20px;
  padding: 14px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

:root[data-look="paper"][data-text][data-modern] .row-new {
  border-style: solid;
}

:root[data-look="paper"][data-text][data-modern] .row-new-title {
  color: var(--ac);
  font-family: var(--serif);
  font-size: calc(19px * var(--ts));
  font-weight: 700;
}

:root[data-look="paper"][data-text][data-modern] .cell,
:root[data-look="paper"][data-text][data-modern] .cell + .cell {
  gap: 2px 20px;
}

:root[data-look="paper"][data-text][data-modern] .kind-visits .lf[data-column="رقم البطاقة"] {
  display: none;
}

:root[data-look="paper"][data-text][data-modern] .kind-visits .row > .cell:first-child,
:root[data-look="paper"][data-text][data-modern] .kind-visits .row-new-title + .cell {
  grid-column: 1 / -1;
}

:root[data-look="paper"][data-text][data-modern] .lf-on .box-date {
  color: var(--ac);
  font-weight: 700;
}

:root[data-look="paper"][data-text][data-modern] .kind-visits .lf-on .box-date {
  font-size: calc(21px * var(--ts));
}

/* A visit's date heads it on the right, as wide as it is. */
:root[data-look="paper"][data-text][data-modern] .kind-visits .lf-on {
  justify-items: start;
}

:root[data-look="paper"][data-text][data-modern] .list .box-tall {
  min-height: 46px;
}

:root[data-look="paper"][data-text][data-modern] .kind-visits [data-column="الملاحظات"] .box,
:root[data-look="paper"][data-text][data-modern] .kind-visits .box-fee {
  background: none;
}

:root[data-look="paper"][data-text][data-modern] .row-mark {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 6px;
}

/* A record in the table: on a maximised PC, up to 150 %, beside the window's scroll bar. The headers over an
   ink rule, a rule under each record; no column for the save mark (a record's mark, while it shows, takes a
   line of its own under its boxes, at its far end). The visits' first column is the date, headed في (the
   form's own word for it); 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 31.5em at most (an em is 16 px × the size here),
   with their gaps under the 852 px a record has in the sheet beside the index. */
@media (min-width: 1300px) {
  :root[data-look="paper"][data-text][data-modern]:not([data-text="175"]) .list {
    font-size: calc(16px * var(--ts));
  }

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

  :root[data-look="paper"][data-text][data-modern]:not([data-text="175"]) .head-cell,
  :root[data-look="paper"][data-text][data-modern]:not([data-text="175"]) .kind-visits .head-cell {
    padding: 0 4px;
    color: var(--mut);
    font-size: calc(13px * var(--ts));
    font-weight: 400;
  }

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

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

  :root[data-look="paper"][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="paper"][data-text][data-modern]:not([data-text="175"]) .row,
  :root[data-look="paper"][data-text][data-modern]:not([data-text="175"]) .kind-visits .row {
    gap: 0 10px;
    padding: 6px 0;
  }

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

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

  :root[data-look="paper"][data-text][data-modern]:not([data-text="175"]) .kind-visits .lf-on .box-date {
    font-size: calc(19px * var(--ts));
  }

  :root[data-look="paper"][data-text][data-modern]:not([data-text="175"]) .kind-visits .lf-on {
    justify-items: stretch;
  }
}

/* Settings: the page's title, then each section under its heading, its rows ruled. */
:root[data-look="paper"] .settings-page .band-row {
  display: block;
  padding: 28px 0 0;
  background: none;
  border: 0;
  box-shadow: none;
}

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

/* Its width the column's less its margins, as the main column's other pieces (Classic's 100 % would put the
   margins past the column, and past the window where the page's margins are narrower than them). */
:root[data-look="paper"] .settings {
  width: auto;
  max-width: none;
  padding: 6px 0 28px;
}

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

:root[data-look="paper"] .set {
  margin: 0 0 18px;
}

:root[data-look="paper"] .set-title {
  margin: 14px 0 4px;
}

:root[data-look="paper"] .set-body {
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 0;
}

:root[data-look="paper"] .set-line,
:root[data-look="paper"] .app-row,
:root[data-look="paper"] .device,
:root[data-look="paper"] .review-item {
  border-bottom: 1px solid var(--line);
}

:root[data-look="paper"] .app-row,
:root[data-look="paper"] .device,
:root[data-look="paper"] .review-item {
  border-top: 0;
}

:root[data-look="paper"] .version {
  font-family: var(--serif);
  font-size: calc(18px * var(--ts));
  font-weight: 700;
}

:root[data-look="paper"] .device-user,
:root[data-look="paper"] .device-here {
  border-radius: 999px;
}

:root[data-look="paper"] .table th,
:root[data-look="paper"] .table td {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

:root[data-look="paper"] .table thead th {
  border-bottom: 1px solid var(--ink);
  color: var(--mut);
  font-weight: 400;
}

:root[data-look="paper"] .look-choice,
:root[data-look="paper"] .text-choice,
:root[data-look="paper"] .choice {
  border-radius: 0;
}

/* The dialogs: Find, a field to check, the phone app's update, the administrator's password, on the sheet. */
:root[data-look="paper"] .dialog {
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(43, 34, 24, 0.25);
}

:root[data-look="paper"] .dialog::backdrop {
  background: rgba(43, 34, 24, 0.45);
}

:root[data-look="paper"] .dialog-band {
  background: none;
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: calc(21px * var(--ts));
  font-weight: 700;
}

:root[data-look="paper"] #find-q {
  min-height: 52px;
  padding: 6px 4px;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  font-size: calc(20px * var(--ts));
  line-height: 1.7;
}

:root[data-look="paper"] .find-results {
  display: grid;
  gap: 0;
}

:root[data-look="paper"] .find-hit,
:root[data-look="paper"] .find-results .find-hit {
  min-height: 52px;
  padding: 6px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: calc(18px * var(--ts));
}

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

:root[data-look="paper"] .find-name {
  font-weight: 700;
}

:root[data-look="paper"] .find-card {
  color: var(--mut);
  font-family: var(--serif);
  font-size: calc(18px * var(--ts));
}

:root[data-look="paper"] .review-option {
  border-radius: var(--radius);
}

/* The offline strip: the accent, with white words. */
:root[data-look="paper"] .strip,
:root[data-look="paper"] .strip::before {
  background: var(--ac);
}

/* The download screen: the paper, the box a sheet. */
:root[data-look="paper"] .download-box {
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(43, 34, 24, 0.08);
}

:root[data-look="paper"] .download-text {
  font-family: var(--serif);
  font-size: calc(21px * var(--ts));
  font-weight: 700;
}

/* The sign-in page: العيادة large in the middle with سجل المرضى, the form on a sheet, and the QR on another
   beside it on the PC; the boxes ruled in the ink, دخول a pill. */
:root[data-look="paper"] body:not([class]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
}

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

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

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

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

:root[data-look="paper"] body:not([class]) .shell-date {
  display: none;
}

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

:root[data-look="paper"][data-text][data-modern] .login-panel,
:root[data-look="paper"] .qr-panel {
  padding: 28px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(43, 34, 24, 0.08);
}

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

:root[data-look="paper"] .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="paper"] .qr-panel h2 {
  font-size: calc(21px * var(--ts));
}

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

:root[data-look="paper"] .field input {
  border-bottom-color: var(--ink);
}

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

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

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

:root[data-look="paper"] #code {
  min-height: 60px;
  border-bottom: 2px solid var(--ink);
  font-size: calc(30px * var(--ts));
  font-weight: 400;
  letter-spacing: 0.4em;
}

:root[data-look="paper"] .login-form .link {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration-color: var(--line);
  text-underline-offset: 6px;
}

/* The scanner: the masthead, its title with الى البطاقة, its panels as sheets. */
:root[data-look="paper"] .scan-page {
  display: flex;
  flex-direction: column;
}

:root[data-look="paper"] .scan-page .shell-brand {
  order: -1;
}

:root[data-look="paper"] .scan-page .band-row {
  order: 0;
  flex: 0 0 auto;
  align-items: flex-end;
  margin: 0 16px;
  padding: 18px 0 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

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

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

:root[data-look="paper"] .scan-panel {
  border-radius: var(--radius);
}

/* The PC not maximised: a narrower margin inside the sheet. */
@media (max-width: 1099.98px) {
  :root[data-look="paper"] {
    --pad: 24px;
  }
}

/* The maximised PC at 175 %: the index grows with the size (413 px), so its longest list (الاختبارات السمعية
   والاختبار الحروري) takes two lines, not four; the main column still has about 890 px, and from 175 % a list's
   records are cards, not a table. */
@media (min-width: 1300px) {
  :root[data-look="paper"][data-text="175"] {
    --index-w: calc(236px * var(--ts));
  }
}

/* The phone, upright or on its side: the masthead, then one column, the foot bar fixed at the foot. */
@media (max-width: 699.98px), (hover: none) and (pointer: coarse) and (max-height: 699.98px) {
  :root[data-look="paper"] .card-page,
  :root[data-look="paper"] .list-page,
  :root[data-look="paper"] .settings-page {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 0 20px;
    padding: 0 16px calc(var(--shell-bar-h) + 24px);
  }

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

  :root[data-look="paper"] .card-page::before,
  :root[data-look="paper"] .list-page::before,
  :root[data-look="paper"] .settings-page::before,
  :root[data-look="paper"] .card-page::after,
  :root[data-look="paper"] .list-page::after,
  :root[data-look="paper"] .settings-page::after {
    content: none;
  }

  :root[data-look="paper"] .card-page .shell-brand,
  :root[data-look="paper"] .list-page .shell-brand,
  :root[data-look="paper"] .settings-page .shell-brand {
    order: 1;
    flex: 1 1 100%;
    margin: 0 -16px;
  }

  :root[data-look="paper"] .notice,
  :root[data-look="paper"] .card-msg,
  :root[data-look="paper"] .list-msg {
    order: 2;
    flex: 1 1 100%;
    margin: 16px 0 0;
  }

  :root[data-look="paper"] .shell-hero,
  :root[data-look="paper"] .recbar,
  :root[data-look="paper"] .band-row,
  :root[data-look="paper"] .list-band,
  :root[data-look="paper"] .card-fields,
  :root[data-look="paper"] .list,
  :root[data-look="paper"] .settings,
  :root[data-look="paper"] .shell-tabs {
    flex: 1 1 100%;
    margin-right: 0;
    margin-left: 0;
  }

  :root[data-look="paper"] .shell-hero {
    order: 3;
    padding-top: 16px;
  }

  :root[data-look="paper"] .recbar {
    order: 4;
  }

  :root[data-look="paper"] .band-row,
  :root[data-look="paper"] .list-band {
    order: 5;
  }

  :root[data-look="paper"] .card-fields,
  :root[data-look="paper"] .list,
  :root[data-look="paper"] .settings {
    order: 10;
  }

  :root[data-look="paper"] .card-fields {
    padding-bottom: 0;
  }

  /* The save row a line of its own; الى المراجعات and بطاقة جديدة together under it. */
  :root[data-look="paper"] .mid-save {
    flex-basis: 100%;
  }

  :root[data-look="paper"] .mid-visits,
  :root[data-look="paper"] .mid-new {
    margin-top: 6px;
  }

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

  /* جداول المريض: a numbered index, its own heading in the accent over a rule; the card's own tab is this page. */
  :root[data-look="paper"] .shell-tabs {
    order: 20;
    gap: 0;
    margin-top: 18px;
    padding: 0;
    counter-reset: paper-list;
  }

  :root[data-look="paper"] .shell-tabs::before {
    margin: 0;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--line);
    color: var(--ac);
    font-size: calc(21px * var(--ts));
    line-height: 1.5;
  }

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

  :root[data-look="paper"] .shell-tabs button {
    min-height: 48px;
    padding: 4px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    font-size: calc(17px * var(--ts));
  }

  :root[data-look="paper"] .shell-tabs [data-kind] > span::before {
    counter-increment: paper-list;
    content: counter(paper-list, arabic-indic) '. ';
    color: var(--mut);
  }

  /* The scanner and STOP: quiet underlined words, side by side. */
  :root[data-look="paper"] .btn-scan {
    order: 30;
    display: inline-flex;
  }

  :root[data-look="paper"] .tools {
    order: 31;
    flex: 0 1 auto;
    flex-direction: row;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :root[data-look="paper"] .btn-scan,
  :root[data-look="paper"] .tools {
    margin-top: 14px;
  }

  :root[data-look="paper"] .tool,
  :root[data-look="paper"] .btn-scan {
    padding: 0 2px;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 6px;
  }

  /* The foot bar: البطاقة, المراجعات, بحث and الإعدادات in Amiri, over a rule in the ink, the current one
     underlined in the accent. */
  :root[data-look="paper"] .shell-bar {
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    padding: 0 4px;
    background: var(--bg);
    border-top: 1px solid var(--ink);
  }

  /* Settings' too: the PC's Settings index has no rule over it (above), the foot bar keeps its own. */
  :root[data-look="paper"] .settings-page .shell-bar {
    margin-top: 0;
    border-top: 1px solid var(--ink);
  }

  :root[data-look="paper"] .shell-bar button {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: center;
    width: auto;
    height: 100%;
    padding: 0 4px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--mut);
    font-family: var(--serif);
    font-size: calc(18px * var(--ts));
    line-height: 1.2;
    text-align: center;
  }

  /* Its four words whole on one line: a little smaller at the two largest sizes, where 18 px would not fit
     the upright phone. */
  :root[data-look="paper"][data-text="150"] .shell-bar button,
  :root[data-look="paper"][data-text="175"] .shell-bar button {
    font-size: calc(15px * var(--ts));
  }

  :root[data-look="paper"] .shell-bar button > span {
    flex: 0 1 auto;
    overflow-wrap: normal;
    white-space: nowrap;
  }

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

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

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

  /* The lists: the records one under the other, two boxes to a line where they fit. */
  :root[data-look="paper"] .list-band {
    margin-top: 14px;
  }

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

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

/* On an upright phone the record bar's place has a line of its own, over its arrows; above 100 % a list's
   record has one box to a line. */
@media (max-width: 699.98px) {
  :root[data-look="paper"] .rec-where {
    order: -1;
    flex: 1 1 100%;
  }

  :root[data-look="paper"][data-text][data-modern]:not([data-text="100"]) .row,
  :root[data-look="paper"][data-text][data-modern]:not([data-text="100"]) .kind-visits .row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The Appearance preview: the paper, a rule in the ink, a quiet label, a ruled box, a terracotta pill. */
.lp-paper {
  background: #F7F2EA;
  border-color: #E2D8C8;
  border-radius: 4px;
  color: #2B2218;
  font-family: 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
  overflow: hidden;
}

.lp-paper .lp-band {
  background: #F7F2EA;
  border-bottom: 1px solid #2B2218;
}

.lp-paper .lp-label {
  height: 0.5em;
  background: #746759;
  border-radius: 0;
}

.lp-paper .lp-box {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #2B2218;
  border-radius: 0;
}

.lp-paper .lp-button {
  background: #A94D38;
  border-radius: 999px;
}