/* Phone and installable application (docs/spec-mobile.md) — loaded after app.css by core/base.html.
   Same identity (style A « Chaleureux », core/static/core/theme.css); only the layout of a narrow
   screen changes: bar of tabs at the bottom (≤ 760 px), touch targets of 44 px, fields of 16 px (no zoom on iOS). */
:root { --tabbar-height: 62px; }
/* Smallest text: every font size under .75rem is written max(<size>, var(--text-min, 0px)) in the stylesheets.
   0 on a wide screen (nothing changes); 12 px on a phone, so that no text is smaller than 12 px. */
@media (max-width: 760px) { :root { --text-min: 12px; } }
/* Landscape on a phone with a notch: the content keeps clear of it (0 everywhere else). */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* --- Bar of tabs (hidden on a wide screen) ---------------------------------------------------------------------- */
.tabbar, .tabbar-more, .tabbar-backdrop { display: none; }
a.home-pointer.button { display: none; }

/* --- « Installer Oasis sur ton téléphone » (home page, shown by core/mobile.js on a phone only) ----------------- */
.install-help { position: relative; display: flex; align-items: center; gap: 14px; margin: -14px 0 28px; border: 1px solid var(--line); border-left: 5px solid var(--accent); padding: 14px 48px 14px 14px; background: var(--surface); font: .86rem/1.45 var(--font-text); }
.install-help[hidden], .install-help [hidden] { display: none; }
.install-help-icon { flex: none; border-radius: 10px; box-shadow: 0 2px 8px rgb(var(--shadow-rgb) / 0.12); }
.install-help-text { flex: 1; min-width: 0; }
.install-help-text p { margin: 0; color: var(--muted); }
.install-help-text .install-help-title { margin-bottom: 3px; color: var(--ink); font: 700 1rem var(--font-text); }
.install-share { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--accent-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.install-help-button { flex: none; }
.install-help-close { position: absolute; top: 2px; right: 2px; display: grid; width: 44px; height: 44px; place-items: center; border: 0; padding: 0; background: none; color: var(--muted); font: 1.5rem/1 var(--font-text); cursor: pointer; }
.install-help-close:hover, .install-help-close:focus-visible { color: var(--accent-dark); }

/* --- « Photographier un document » ---------------------------------------------------------------------------- */
.upload-choices { display: grid; gap: 28px; max-width: 900px; }
.photo-capture-panel { border: 1px solid var(--line); border-top: 3px solid var(--accent-pink); padding: 20px 22px; background: var(--surface); }
.photo-capture-panel h2 { margin: 0 0 6px; font-size: 1.25rem; }
.photo-capture-panel > p { margin: 0 0 14px; font: .88rem/1.45 var(--font-text); }
.photo-capture-picks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.photo-capture-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; cursor: pointer; }
.photo-capture-pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-capture-pick:focus-within { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.photo-capture-pick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.photo-capture-hint { margin: 0 0 12px; font: .8rem/1.4 var(--font-text); }
.photo-capture-store[hidden] { display: none; }
.photo-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.photo-pages:empty { display: none; }
.photo-page { display: grid; gap: 6px; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 8px; background: var(--color-surface-sunken); }
.photo-page img { display: block; width: 100%; height: 150px; object-fit: contain; background: var(--color-surface); }
.photo-page-label { font: 700 .78rem var(--font-text); }
.photo-page-tools { display: flex; gap: 6px; }
.photo-page-button { display: grid; flex: 1; min-width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); padding: 0; background: var(--surface); color: var(--ink); font: 700 1.05rem var(--font-text); cursor: pointer; }
.photo-page-button:hover:not([disabled]) { border-color: var(--accent-pink); color: var(--accent-dark); }
.photo-page-button[disabled] { opacity: .35; cursor: default; }
.photo-page-remove { color: var(--color-danger); }
.photo-capture-count { margin: 0 0 12px; font: 700 .84rem var(--font-text); }
.photo-capture-count[hidden] { display: none; }
.photo-capture-count.is-problem { color: var(--accent-dark); }
.photo-capture-ai { margin-top: 4px; }
.photo-folders { border: 0; padding: 0; }
.photo-folders legend { margin-bottom: 7px; padding: 0; font: 700 .8rem var(--font-text); }
.photo-folders .photo-folder { display: flex; align-items: center; gap: 10px; min-height: 44px; border: 1px solid var(--line); margin-bottom: 6px; padding: 8px 12px; font: .95rem var(--font-text); cursor: pointer; }
.photo-folder input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accent); }
.photo-folders .photo-folder:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.photo-capture [data-photo-submit][disabled] { cursor: not-allowed; opacity: .45; }

/* --- « + Ajouter » of every folder (templates/core/includes/add_documents.html) -------------------------------- */
.add-documents { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.add-documents-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.add-documents-hint { color: var(--muted); font: .76rem var(--font-text); }
.add-documents.is-touch .add-documents-hint, .add-documents:not(.is-pointer) .add-documents-hint { display: none; }
@media (pointer: coarse) { .add-documents-hint { display: none; } }
/* Files dragged over the folder (computer). */
[data-add-drop].is-dragover { outline: 2px dashed var(--accent); outline-offset: 4px; background: var(--soft); }
/* No camera on a computer (« Prendre une photo » is for a phone or a tablet). */
@media (pointer: fine) { .photo-capture-camera { display: none; } }
html.add-documents-open, html.add-documents-open body { overflow: hidden; }
/* The sheet: same look as « Plus » of the bar of tabs, from the bottom of the screen. */
.add-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: 0; overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 3px solid var(--accent); padding: 4px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--surface); color: var(--ink); box-shadow: 0 -14px 30px rgb(var(--shadow-rgb) / 0.14); }
.add-sheet::backdrop, .add-dialog::backdrop { background: rgb(var(--shadow-rgb) / 0.28); }
.add-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.add-sheet-title { margin: 0; color: var(--accent-dark); font: 700 .75rem/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
.add-sheet-close { display: grid; flex: none; width: 44px; height: 44px; place-items: center; border: 0; padding: 0; background: none; color: var(--muted); font: 1.7rem/1 var(--font-text); cursor: pointer; }
.add-sheet-close:hover, .add-sheet-close:focus-visible { color: var(--accent-dark); }
.add-sheet-list { margin: 0; padding: 0; list-style: none; }
.add-sheet-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line); padding: 6px 4px; background: none; color: var(--ink); font: 700 1.02rem var(--font-text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.add-sheet-list li:last-child button { border-bottom: 0; }
.add-sheet-list button:hover, .add-sheet-list button:focus-visible { color: var(--accent-dark); }
.add-sheet-list svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.add-sheet-list small { display: block; margin-top: 2px; color: var(--muted); font: .78rem var(--font-text); }
/* The windows « Ajouter des fichiers » and « Photos en un seul PDF » (the assembly screen). */
.add-dialog { width: min(720px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 3px solid var(--accent-pink); padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgb(var(--shadow-rgb) / 0.22); }
.add-dialog-form { padding: 18px 22px 0; }
.add-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.add-dialog-head .eyebrow { margin: 0 0 4px; }
.add-dialog-head h2 { margin: 0 0 6px; font-size: 1.3rem; }
.add-dialog-head p.muted { margin: 0; font: .86rem/1.45 var(--font-text); }
.add-dialog .dropzone { margin-bottom: 12px; }
.add-dialog-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 12px -22px 0; border-top: 1px solid var(--line); padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); }
.add-dialog-actions .link-button { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-size: .9rem; }

@media (max-width: 760px) {
  /* --- Bar of tabs ------------------------------------------------------------------------------------------- */
  body.has-tabbar { --tabbar-space: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; z-index: 890; right: 0; bottom: 0; left: 0; display: flex; align-items: stretch; border-top: 1px solid var(--color-line); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--color-surface); box-shadow: 0 -6px 18px rgb(var(--shadow-rgb) / 0.05); }
  .tabbar-item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; min-height: var(--tabbar-height); border: 0; padding: 6px 2px 5px; background: none; color: var(--muted); font: 700 max(.68rem, var(--text-min, 0px))/1.1 var(--font-text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar-item svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar-item .tabbar-dot { fill: currentColor; stroke: none; }
  .tabbar-item[aria-current="page"], .tabbar-item[aria-expanded="true"] { color: var(--color-accent); }
  .tabbar-item[aria-current="page"]::before { display: none; }
  /* The assistant, heart of OAISIS: a raised disc in the centre of the bar. */
  .tabbar-assistant { overflow: visible; color: var(--color-ink); font-weight: 700; }
  .tabbar-assistant-disc { display: grid; width: 58px; height: 58px; margin-top: -26px; place-items: center; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-assistant); box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / 0.25); }
  .tabbar-assistant .tabbar-assistant-disc svg { width: 28px; height: 28px; stroke: var(--color-assistant-spark); stroke-width: 2; }
  .tabbar-assistant .tabbar-dot { fill: var(--color-assistant-spark); }
  .tabbar-assistant[aria-current="page"]::before { display: none; }
  .tabbar-assistant:active .tabbar-assistant-disc { transform: scale(.96); }
  .tabbar-item:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -4px; }
  /* Six places (« Pointer » added, 06/11/2026): each one as wide as its word, so that « Observation » never overflows. */
  .tabbar.is-compact .tabbar-item { flex: 1 1 auto; min-width: 40px; padding: 6px 1px 5px; font-size: max(.64rem, var(--text-min, 0px)); }
  .tabbar.is-compact .tabbar-item svg { width: 24px; height: 24px; }
  .tabbar.is-compact .tabbar-assistant-disc { width: 54px; height: 54px; }
  .tabbar.is-compact .tabbar-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar.is-compact .tabbar-assistant > span:last-child { overflow: visible; }
  /* « Pointer » on the home page of the phone (the big button, phone only, 06/11/2026). */
  a.home-pointer.button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; margin: 0 0 var(--space-5, 20px); padding: 12px 16px; border-radius: var(--radius-lg, 14px); font: 700 1.2rem/1.2 var(--font-text); text-decoration: none; }
  a.home-pointer.button svg { flex: none; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  a.home-pointer.button span { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  a.home-pointer.button small { color: var(--color-on-accent); font: 400 .9rem/1.3 var(--font-text); }
  .tabbar-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--color-accent); color: var(--color-on-accent); font: 700 max(.66rem, var(--text-min, 0px))/18px var(--font-text); text-align: center; }
  /* « Plus »: the full menu, a sheet above the bar. */
  .tabbar-backdrop { position: fixed; z-index: 885; inset: 0; display: block; background: rgb(var(--shadow-rgb) / 0.28); }
  .tabbar-backdrop[hidden], .tabbar-more[hidden] { display: none; }
  .tabbar-more { position: fixed; z-index: 888; right: 0; bottom: var(--tabbar-space); left: 0; display: block; max-height: calc(100vh - var(--tabbar-space) - 40px); max-height: calc(100dvh - var(--tabbar-space) - 40px); overflow-y: auto; overscroll-behavior: contain; border-top: 3px solid var(--accent); padding: 4px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--surface); box-shadow: 0 -14px 30px rgb(var(--shadow-rgb) / 0.14); }
  .tabbar-more-head { display: flex; align-items: center; justify-content: space-between; }
  .tabbar-more-title { margin: 0; color: var(--accent-dark); font: 700 .75rem/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
  .tabbar-more-close { display: grid; width: 44px; height: 44px; place-items: center; border: 0; padding: 0; background: none; color: var(--muted); font: 1.7rem/1 var(--font-text); cursor: pointer; }
  .tabbar-more-list { margin: 0; padding: 0; list-style: none; }
  .tabbar-more-list a, .tabbar-more-list button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--line); padding: 0 4px; background: none; color: var(--ink); font: 700 1.02rem var(--font-text); text-align: left; text-decoration: none; cursor: pointer; }
  .tabbar-more-list a:hover, .tabbar-more-list button:hover { color: var(--accent-dark); }
  .tabbar-more-account { margin-top: 12px; }
  .tabbar-more-account a, .tabbar-more-account button { color: var(--muted); font: 700 .92rem var(--font-text); }
  html.tabbar-more-open, html.tabbar-more-open body { overflow: hidden; }

  /* The top of the screen stays short: the menu of the account and of the sections moves to « Plus ». */
  body.has-tabbar .topbar nav .home-link, body.has-tabbar .topbar nav .settings-link, body.has-tabbar .topbar nav .assistant-menu-link,
  body.has-tabbar .topbar nav .nav-more, body.has-tabbar .topbar nav .nav-horaires, body.has-tabbar .topbar nav .nav-residents { display: none; }
  body.has-tabbar .topbar nav { flex-wrap: nowrap; gap: 14px; }
  body.has-tabbar .topbar nav .nav-messages { display: inline-flex; align-items: center; min-height: 44px; }
  body.has-tabbar .notif-bell summary { display: grid; min-width: 44px; min-height: 44px; place-items: center; }
  /* Courrier (mails) and Messagerie (interne): icons with their count (the names are in « Plus »). */
  body.has-tabbar .topbar nav .nav-mail, body.has-tabbar .topbar nav .nav-messages.has-icon { display: inline-grid; min-width: 44px; min-height: 44px; place-items: center; gap: 0; }
  body.has-tabbar .topbar nav .nav-mail .nav-label, body.has-tabbar .topbar nav .nav-messages.has-icon .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-tabbar .topbar .nav-icon { width: 24px; height: 24px; }
  body.has-tabbar .topbar nav .nav-mail .message-badge, body.has-tabbar .topbar nav .nav-messages.has-icon .message-badge { position: absolute; top: 2px; right: -2px; min-width: 1.2rem; height: 1.2rem; margin: 0; font-size: .75rem; }

  /* The floating pills become tabs: « Besoin d'aide ? » = tab Assistant, « Signaler un problème » = in « Plus ».
     Nothing floats over the bar any more; the panel of « Signaler » opens above it. */
  body.has-tabbar .assistant-launcher-wrap { display: none; }
  body.has-tabbar .feedback { right: 0; bottom: var(--tabbar-space); left: 0; }
  body.has-tabbar .feedback-toggle { display: none; }
  html body.has-tabbar .feedback-panel { position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--tabbar-space) + 8px); left: max(8px, env(safe-area-inset-left)); width: auto; max-height: calc(100vh - var(--tabbar-space) - 24px); max-height: calc(100dvh - var(--tabbar-space) - 24px); }
  /* The last buttons of a page stay above the bar. */
  html body.has-tabbar .page { padding-bottom: calc(var(--tabbar-space) + 40px); }
  html body.has-tabbar:has(.sort-actions) .page { padding-bottom: calc(var(--tabbar-space) + 110px); }
  /* Sticky action bars (triage) stop above the bar of tabs. */
  body.has-tabbar .sort-actions { bottom: var(--tabbar-space); }

  /* « + Ajouter »: the sheet stops above the bar of tabs (like « Plus »); the windows take the whole screen. */
  body.has-tabbar .add-sheet { bottom: var(--tabbar-space); padding-bottom: 10px; }
  .add-documents, .add-documents-button { width: 100%; }
  .add-dialog { width: 100%; height: 100%; max-height: none; margin: 0; border-top-width: 3px; padding-top: env(safe-area-inset-top); }
  .add-dialog-form { min-height: 100%; display: flex; flex-direction: column; padding: 14px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .add-dialog-actions { margin: auto -16px 0; padding-left: 16px; padding-right: 16px; }
  .add-dialog-actions .button { width: auto; flex: 1; }

  /* --- Passage en revue mobile : corrections centralisées ---------------------------------------------------- */
  /* Fields: 16 px at least, so that iOS does not zoom in on the page when one is touched. */
  /* :is() gives every field the weight of the longest selector, so that the stylesheets of a section (planning,
     assistant, medical…), loaded after this one, cannot bring a field back under 16 px or under 44 px. */
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]), select, textarea) { font-size: 16px; }
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]), select) { min-height: 44px; }
  /* Check boxes and radio buttons: 20 px (the label around them is the rest of the target). */
  :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; }
  /* Touch targets of 44 px. */
  .button, button.button, a.button { min-height: 44px; }
  .button.small { min-height: 40px; }
  .checkbox-inline { min-height: 44px; }
  .context-back { display: inline-flex; align-items: center; min-height: 44px; }
  /* The logo, the tabs of a section, of the configuration and of the messages: 44 px high (31 px before). */
  .brand { min-height: 44px; }
  .status-tab, .config-tabs a, .message-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; }
  /* Small action links (« Modifier », « Consulter », « Ouvrir les échéances… »): 44 px high (15 px before). */
  .page :is(.inline-link, .link-button, .plain-link, a.deadline-pill, .medical-index a) { display: inline-flex; align-items: center; min-height: 44px; }
  .page .org-new { display: flex; align-items: center; min-height: 44px; }
  .page .sort-rotate { justify-content: center; min-width: 44px; }
  .page .voice-dictate-button { min-height: 44px; }
  .page input[type="range"] { min-height: 44px; }
  /* « Afficher… » of a folding block: 44 px high. */
  .page summary:not([class]), .page summary.inline-link { min-height: 44px; padding-block: 12px; }
  /* Month calendar (presences of the resident): arrows and days of 44 px. */
  .month-nav a { width: 44px; height: 44px; }
  .mini-calendar-grid a { min-height: 44px; }
  .upload-cancel .icon-button { width: 44px; height: 44px; }
  /* Quick replies, microphone and « Envoyer » of the assistant (40 px before). */
  .assistant-reply { min-height: 44px; }
  .assistant-composer .assistant-plus { width: 44px; height: 44px; }
  .assistant-composer .assistant-send { height: 44px; }
  /* Names of the residents in the calendar of the presences. */
  .page .person-chip a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Long pills (« Mot de passe à changer ») may go to the line instead of leaving the screen. */
  .status-pill, .warning-pill { display: inline-block; max-width: 100%; white-space: normal; }
  /* Notifications: the panel takes the width of the screen under the top bar (it went out on the left, -17 px). */
  .topbar { position: relative; }
  .notif-bell { position: static; }
  .notif-panel { right: 12px; left: 12px; width: auto; top: calc(100% - 6px); }
  /* Buttons of a form: the full width (the cancel link stays below). */
  .form-actions .button, .photo-capture-pick { width: 100%; }
  .form-actions > a:not(.button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .photo-capture-picks { flex-direction: column; }
  /* Photographing first on a phone; the drop zone below. */
  .upload-choices .photo-capture-panel { order: -1; padding: 16px 14px; }
  .upload-choices .dropzone-large { padding: 28px 16px; }
  /* One page per line: the thumbnail on the left, its buttons (44 px) on the right. */
  .photo-pages { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .photo-page { grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 6px; }
  .photo-page img { grid-row: 1 / 3; height: 104px; }
  .photo-page-tools { justify-content: flex-start; }
  .photo-page-button { flex: 0 0 48px; }
  /* Never a page wider than the screen: long words, links and tables stay inside. */
  .page { overflow-wrap: break-word; }
  .page img, .page video, .page iframe { max-width: 100%; }
  .install-help { margin-top: 0; }
}

@media (max-width: 380px) {
  .tabbar-item { font-size: max(.64rem, var(--text-min, 0px)); }
  .tabbar-item svg { width: 24px; height: 24px; }
}

@media print { .tabbar, .tabbar-more, .tabbar-backdrop, .install-help, .photo-capture-panel, .add-documents { display: none !important; } }