/*
 * Site layer - loaded after ems-theme.css and DevExtreme.
 * The shell rules (sidebar, topbar, toasts, compact page header) are taken from the EMS project;
 * the app-specific part starts at "MOVIES".
 */

/* ============================================
   SIDEBAR & TOPBAR (EMS)
   ============================================ */
.vertical-menu {
  width: 250px !important;
}

#sidebar-menu ul li a {
  font-size: 13px;
}

.vertical-menu #sidebar-menu .menu-title {
  background-color: transparent !important;
  color: #aeb4ba !important;
  font-weight: 600 !important;
  padding: 14px 20px 5px !important;
  font-size: 10px;
  letter-spacing: 0.6px;
}

.main-content {
  margin-left: 250px;
  margin-right: 0;
}

.vertical-collpsed .main-content {
  margin-left: 70px;
}

.navbar-brand-box .logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 70px;
  text-decoration: none;
}

.navbar-brand-box .logo img {
  height: 34px;
  width: 34px;
}

.navbar-brand-box .app-name {
  color: var(--ems-primary);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

.header-item.user-menu {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.header-item.user-menu i.bxs-user-circle {
  font-size: 22px;
}

/* ============================================
   DATAGRID (EMS)
   ============================================ */
.dx-datagrid-headers .dx-header-row td {
  white-space: nowrap;
  overflow: visible;
}

.dx-datagrid-rowsview .dx-row.dx-data-row {
  cursor: pointer;
}

/* ============================================
   TOAST NOTIFICATIONS (EMS)
   ============================================ */
.toast {
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.toast.bg-success {
  background-color: #3D8B5F !important;
  border-left: 4px solid #2F7049 !important;
}

.toast.bg-danger {
  background-color: #C45C5C !important;
  border-left: 4px solid #A84A4A !important;
}

.toast.bg-info {
  background-color: #5B8BA0 !important;
  border-left: 4px solid #4A7A8F !important;
}

.toast.bg-warning {
  background-color: #f59e0b !important;
  border-left: 4px solid #d97706 !important;
}

.toast-body {
  padding: 1rem 0.75rem;
  font-size: 0.9375rem;
}

.toast-container-fixed {
  z-index: 11000;
}

/* ============================================
   MOBILE MENU (EMS)
   ============================================ */
@media (max-width: 991.98px) {
  .vertical-menu {
    position: fixed;
    left: -250px;
    top: 70px;
    bottom: 0;
    z-index: 1001;
    transition: left 0.3s ease-in-out;
  }

  body.sidebar-enable .vertical-menu {
    left: 0;
  }

  body.sidebar-enable::before {
    content: "";
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }

  body.sidebar-enable {
    overflow: hidden;
  }

  .main-content {
    margin-left: 0;
  }

  .navbar-brand-box .app-name {
    display: none;
  }
}

/* ============================================
   COMPACT PAGE HEADER (EMS)
   ============================================ */
.page-header-compact {
  background-color: #fff;
  padding: 8px 12px;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 12px;
  min-height: 50px;
}

.page-header-compact h5 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.page-header-compact .btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
}

.page-header-compact .btn i {
  font-size: 1rem;
}

.modal-header .modal-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.modal-header .modal-actions .btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
}

/* ============================================
   MOVIES
   ============================================ */
.movie-search {
  max-width: 420px;
}

.grid-poster {
  width: 38px;
  height: 57px;
  object-fit: cover;
  border-radius: 3px;
  background-color: var(--ems-primary-subtle);
}

.grid-title {
  font-weight: 600;
  color: #1E2A3A;
  white-space: normal;
}

.grid-subtitle {
  font-size: .8rem;
  color: #74788d;
  white-space: normal;
}

/* Row actions of the watchlist / watched grids; the buttons stack when the column is narrow. */
.grid-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.grid-row-actions .btn {
  font-size: .8125rem;
  font-weight: 500;
  padding: .25rem .7rem;
}

/* Where a movie stands on the user's lists, in the catalog grid. */
.list-badge {
  display: inline-block;
  margin: .1rem .25rem .1rem 0;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}

.list-badge-watched {
  background-color: #E3F1E9;
  color: #2F7049;
}

.list-badge-watchlist {
  background-color: var(--ems-primary-subtle);
  color: var(--ems-primary);
}

.movie-poster {
  width: 100%;
  border-radius: .4rem;
  box-shadow: 0 .4rem 1.2rem rgba(18, 38, 63, .15);
  background-color: var(--ems-primary-subtle);
}

/* Type scale of the app pages: 13px secondary text, 14px body, 16px section titles, 24px page titles.
   Weight and colour carry the hierarchy, so no text on these pages goes below 13px (count badges are 12px). */
:root {
  --type-meta: .8125rem;
  --type-body: .875rem;
  --type-section: 1rem;
  --type-title: 1.5rem;
  --ink: #1E2A3A;
  --muted: #74788d;
}

.movie-page,
.profile-page,
.profile-edit {
  font-size: var(--type-body);
}

/* Title block on the left, the user's list toggles on the right; they wrap under the title on narrow screens. */
.movie-page .movie-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: .75rem;
}

.movie-page .movie-heading > div > :last-child {
  margin-bottom: 0;
}

.movie-page .watch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.movie-page .watch-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem 1rem;
  border: 1px solid var(--ems-primary);
  background-color: #fff;
  color: var(--ems-primary);
  font-size: var(--type-body);
  font-weight: 500;
}

.movie-page .watch-toggle:hover,
.movie-page .watch-toggle:focus-visible {
  background-color: var(--ems-primary-subtle);
  color: var(--ems-primary);
  border-color: var(--ems-primary);
}

/* The check only appears on a list the movie is on, so the state reads without relying on colour alone. */
.movie-page .watch-toggle i {
  display: none;
  font-size: 1.15rem;
  line-height: 1;
}

.movie-page .watch-toggle[aria-pressed="true"],
.movie-page .watch-toggle[aria-pressed="true"]:hover {
  background-color: var(--ems-primary);
  border-color: var(--ems-primary);
  color: #fff;
}

.movie-page .watch-toggle[aria-pressed="true"] i {
  display: inline-block;
}

.movie-page .movie-title {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: .2rem;
}

.movie-page .movie-original-title {
  color: var(--muted);
  margin-bottom: .75rem;
}

.movie-page .movie-director {
  margin-bottom: .75rem;
}

.movie-page .movie-director strong {
  font-weight: 600;
  color: var(--ink);
}

/* A comfortable measure: the card is as wide as the screen, the paragraph is not. */
.movie-page .movie-overview {
  max-width: 75ch;
  margin-bottom: 0;
  line-height: 1.7;
}

.section-title {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0;
}

.section-title i {
  font-size: 1.15rem;
  color: var(--ems-primary);
}

.movie-page .badge-count,
.profile-page .badge-count {
  font-size: .75rem;
  padding: .3em .6em;
}

.section-hint {
  font-size: var(--type-meta);
  color: var(--muted);
  margin-bottom: 1rem;
}

.movie-facts dt {
  font-size: var(--type-meta);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: .1rem;
}

.movie-facts dd {
  color: var(--ink);
  margin-bottom: .8rem;
}

.movie-facts .vote-count {
  font-size: var(--type-meta);
  color: var(--muted);
}

.credit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .6rem 1rem;
}

.credit-list .credit-name {
  font-weight: 500;
  color: var(--ink);
}

.credit-list .credit-role {
  font-size: var(--type-meta);
  color: var(--muted);
}

/* DevExtreme editors use their own font stack; on this page they match the Poppins text around them. */
.movie-page .rating-form .dx-texteditor-input,
.movie-page .rating-form .dx-placeholder::before {
  font-family: var(--bs-body-font-family);
  font-size: var(--type-body) !important;
}

.dx-autocomplete-popup-wrapper .dx-list-item-content {
  font-family: var(--bs-body-font-family);
  font-size: .875rem;
}

.tmdb-score {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
}

.tmdb-score i {
  color: #F2B84B;
}

/* ============================================
   CRITERION RATINGS
   ============================================ */
.rating-form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.2fr) auto;
  gap: .75rem;
  align-items: end;
}

.rating-form .score-input {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.rating-form .score-input .dx-slider {
  flex: 1 1 auto;
}

.rating-form .score-input .dx-numberbox {
  width: 90px;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .rating-form {
    grid-template-columns: 1fr;
  }
}

.rating-table td {
  vertical-align: middle;
}

.rating-table thead th {
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.rating-table .rating-criterion {
  font-weight: 500;
  color: var(--ink);
}

.rating-table .rating-updated {
  font-size: var(--type-meta);
  color: var(--muted);
  white-space: nowrap;
}

.rating-table .rating-actions {
  width: 1%;
  white-space: nowrap;
}

.rating-table .rating-actions .btn {
  font-size: var(--type-meta);
  font-weight: 500;
  padding: .3rem .8rem;
}

.rating-table .rating-actions .btn + .btn {
  margin-left: .4rem;
}

.score-badge {
  display: inline-block;
  min-width: 3rem;
  padding: .3rem .5rem;
  border-radius: .35rem;
  font-size: .875rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.score-badge.score-low {
  background-color: #C45C5C;
}

.score-badge.score-mid {
  background-color: #D4A84B;
}

.score-badge.score-high {
  background-color: #3D8B5F;
}

.criterion-new-badge {
  font-size: .75rem;
  font-weight: 500;
  vertical-align: middle;
}

.empty-state {
  color: #74788d;
  text-align: center;
  padding: 1.5rem 1rem;
}

.empty-state i {
  font-size: 2rem;
  display: block;
  margin-bottom: .35rem;
  color: #aeb4ba;
}

.tmdb-attribution {
  font-size: .75rem;
  color: #74788d;
}

/* ============================================
   AUTH PAGES (brand next to the EMS auth card)
   ============================================ */
.auth-brand-row {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.auth-brand-name {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
#moviesGrid .dx-data-row > td {
  vertical-align: middle;
}

/* Phones: a small poster next to the facts, so the scoring form is reached without scrolling past a full-width poster. */
@media (max-width: 767.98px) {
  .movie-summary {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    align-items: start;
  }

  .movie-summary .movie-poster {
    margin-bottom: 0 !important;
  }

  .page-header-compact .movie-search {
    max-width: none;
  }
}

/* ============================================
   LANGUAGE MENU (topbar)
   ============================================ */
.header-item.language-menu img,
.dropdown-item.language img {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.dropdown-item.language {
  display: flex;
  align-items: center;
}

/* ============================================
   PROFILE
   ============================================ */
.profile-header .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* Initials on a colour that stays the same for each user. */
.profile-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: hsl(var(--avatar-hue, 210) 38% 42%);
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
}

.profile-identity {
  flex: 1 1 260px;
  min-width: 0;
}

.profile-name {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: .1rem;
}

.profile-username {
  color: var(--muted);
}

/* Keeps the line breaks the user typed. */
.profile-bio {
  max-width: 75ch;
  margin: .6rem 0 0;
  line-height: 1.6;
  white-space: pre-line;
}

.profile-meta {
  margin-top: .5rem;
  font-size: var(--type-meta);
  color: var(--muted);
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.profile-tabs {
  gap: .25rem;
  margin: .25rem 0 .75rem;
  border-bottom: 1px solid #e3e7ed;
}

.profile-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: -1px;
  padding: .6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 500;
}

.profile-tabs .nav-link:hover {
  color: var(--ink);
}

.profile-tabs .nav-link.active {
  border-bottom-color: var(--ems-primary);
  color: var(--ems-primary);
}

.profile-visibility-note {
  margin-bottom: 1rem;
  font-size: var(--type-meta);
  color: var(--muted);
}

/* Watched and watchlist tabs: a poster grid. */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 1.25rem 1rem;
}

.poster-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.poster-card-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  margin-bottom: .5rem;
  object-fit: cover;
  border-radius: .4rem;
  background-color: var(--ems-primary-subtle);
  box-shadow: 0 .25rem .75rem rgba(18, 38, 63, .12);
}

.poster-card:hover .poster-card-title {
  color: var(--ems-primary);
}

.poster-card:focus-visible {
  outline: 2px solid var(--ems-primary);
  outline-offset: 3px;
  border-radius: .4rem;
}

.poster-card-title {
  font-weight: 500;
  line-height: 1.35;
}

.poster-card-year {
  font-size: var(--type-meta);
  color: var(--muted);
}

/* Ratings tab: one movie per row with its criterion scores. */
.rated-list {
  display: flex;
  flex-direction: column;
}

.rated-movie {
  display: flex;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid #eef1f5;
}

.rated-movie:first-child {
  padding-top: 0;
}

.rated-movie:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.rated-movie-poster img {
  width: 56px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: .3rem;
  background-color: var(--ems-primary-subtle);
}

.rated-movie-body {
  min-width: 0;
}

.rated-movie-title {
  font-weight: 600;
  color: var(--ink);
}

.rated-movie-title:hover {
  color: var(--ems-primary);
}

.rated-movie-year {
  margin-left: .35rem;
  font-size: var(--type-meta);
  color: var(--muted);
}

.score-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}

.score-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .2rem .2rem .6rem;
  border: 1px solid #e3e7ed;
  border-radius: .45rem;
  font-size: var(--type-meta);
}

.score-chip .score-badge {
  min-width: 2.4rem;
  padding: .15rem .35rem;
  font-size: var(--type-meta);
}

/* Profile edit: one row per list with its visibility choice. */
.visibility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .7rem 0;
  border-top: 1px solid #eef1f5;
}

.visibility-label {
  font-weight: 500;
  color: var(--ink);
}

.visibility-options .btn {
  padding: .35rem .8rem;
  font-size: var(--type-meta);
}

/* ============================================
   FRIENDS
   ============================================ */
.friend-list {
  display: flex;
  flex-direction: column;
}

.friend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding: .75rem 0;
  border-bottom: 1px solid #eef1f5;
}

.friend-row:first-child {
  padding-top: 0;
}

.friend-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.friend-rating {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.friend-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: hsl(var(--avatar-hue, 210) 38% 42%);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
}

.friend-avatar:hover {
  color: #fff;
}

.friend-identity {
  flex: 1 1 140px;
  min-width: 0;
}

.friend-name {
  font-weight: 600;
  color: var(--ink);
}

.friend-name:hover {
  color: var(--ems-primary);
}

.friend-username {
  font-size: var(--type-meta);
  color: var(--muted);
}

.friend-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.friend-actions form {
  margin: 0;
}

.friend-actions .btn {
  font-size: var(--type-meta);
  font-weight: 500;
}

.friend-state {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-right: .25rem;
  font-size: var(--type-meta);
  color: var(--muted);
}

.friend-state-friends {
  color: #2F7049;
  font-weight: 500;
}

/* Incoming requests are waiting for an answer, so their card stands out. */
.friend-requests {
  border-left: 3px solid var(--ems-primary);
}

.profile-actions .friend-actions .btn {
  font-size: var(--type-body);
}

/* EMS' outline button defines no Bootstrap active colours, so a chosen option would look like the others. */
.btn-check:checked + .btn-outline-dark-green,
.btn-check:active + .btn-outline-dark-green {
  background-color: var(--ems-primary);
  border-color: var(--ems-primary);
  color: #fff;
}

.btn-check:focus-visible + .btn-outline-dark-green {
  box-shadow: 0 0 0 .2rem rgba(39, 76, 119, .3);
}

/* ============================================
   COLLECTED REVIEWS (temporary admin page)
   ============================================ */
.collected-reviews {
  font-size: var(--type-body);
}

.source-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.source-summary-item {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: .4rem;
  padding: .75rem 1rem;
  color: var(--ink);
}

.source-summary-item .source-kind,
.source-summary-item .source-license {
  font-size: var(--type-meta);
  color: var(--muted);
}

.source-summary-item .source-name {
  font-size: var(--type-section);
  font-weight: 600;
}

/* On wide screens the reviews stay beside the grid while the reader scrolls through them. */
@media (min-width: 1200px) {
  .collected-reviews-panel {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 106px);
    overflow-y: auto;
  }
}

.collected-movie-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.collected-movie-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: .15rem;
}

.collected-movie-year {
  font-weight: 400;
  color: var(--muted);
}

.collected-section + .collected-section {
  margin-top: 1.75rem;
}

.collected-section .section-title {
  margin-bottom: .25rem;
}

.collected-review {
  padding: 1rem 0;
  border-bottom: 1px solid #eff2f7;
}

.collected-review:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.collected-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  margin-bottom: .6rem;
  font-size: var(--type-meta);
  color: var(--muted);
}

.collected-review-meta .score-badge {
  min-width: 3.25rem;
  font-size: var(--type-meta);
}

.collected-review-source {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink);
}

.collected-review-text {
  max-width: 75ch;
  line-height: 1.7;
  color: var(--ink);
}

.collected-review-text p {
  margin-bottom: .75rem;
}

.collected-review-license {
  font-size: var(--type-meta);
  color: var(--muted);
}

/* Clears the fixed topbar when the panel is scrolled into view on narrow screens. */
.collected-reviews-panel {
  scroll-margin-top: 86px;
}

.grid-icon-header i {
  font-size: 1.1rem;
  vertical-align: middle;
}

/* ============================================
   AVERAGE CRITERION SCORES (public movie page)
   ============================================ */
.community-raters {
  font-size: var(--type-meta);
  color: var(--muted);
}

.community-scores {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Name, bar, score and head count line up in columns; on phones the bar moves under the name. */
.community-score {
  display: grid;
  grid-template-columns: minmax(7rem, 13rem) minmax(4rem, 1fr) auto 5.5rem;
  align-items: center;
  gap: .75rem;
}

.community-score-name {
  font-weight: 500;
  color: var(--ink);
}

.community-score-bar {
  height: .5rem;
  border-radius: 999px;
  background-color: #eff2f7;
  overflow: hidden;
}

.community-score-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.community-score-bar > .score-high {
  background-color: #3D8B5F;
}

.community-score-bar > .score-mid {
  background-color: #D4A84B;
}

.community-score-bar > .score-low {
  background-color: #C45C5C;
}

.community-score-count {
  font-size: var(--type-meta);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .community-score {
    grid-template-columns: 1fr auto auto;
    gap: .35rem .75rem;
  }

  .community-score-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Signed-out visitors: what an account adds, right under the averages. */
.community-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #eff2f7;
  color: var(--ink);
}