/* ==========================================================================
   CARESTOP INDIA - Patient account
   Extends the public clinical system without changing public-site styles.
   ========================================================================== */

[hidden] { display: none !important; }

.account-page {
  --portal-sidebar: 260px;
  --portal-topbar: 76px;
  --portal-content: 1480px;
  --portal-panel-radius: 16px;
  min-width: 320px;
  background: var(--canvas);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
}

.account-page button,
.account-page input,
.account-page select,
.account-page textarea {
  letter-spacing: 0;
}

.account-page svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.account-page h1,
.account-page h2 {
  letter-spacing: 0;
}

.account-page h3,
.account-page h4 {
  letter-spacing: 0;
  text-wrap: pretty;
}

.account-page a,
.account-page button {
  -webkit-tap-highlight-color: transparent;
}

.account-page :focus-visible {
  outline: 3px solid rgba(82, 163, 224, .48);
  outline-offset: 3px;
}

.optional {
  color: var(--ink-faint);
  font-size: .76rem;
  font-weight: 500;
}

.portal-overline,
.auth-kicker,
.auth-eyebrow {
  color: var(--sky-700);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.account-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.account-icon-btn:hover {
  color: var(--sky-700);
  background: var(--sky-50);
  border-color: var(--sky-300);
}

.account-icon-btn:active { transform: translateY(1px); }

.portal-primary-btn,
.portal-secondary-btn,
.portal-danger-btn,
.provider-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: transform .22s var(--ease-out), box-shadow .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.portal-primary-btn {
  width: 100%;
  color: #fff;
  background: var(--sky-700);
  border: 1px solid var(--sky-700);
  box-shadow: 0 12px 24px -14px rgba(29, 100, 153, .75);
}

.portal-primary-btn:hover {
  background: var(--sky-800);
  border-color: var(--sky-800);
  box-shadow: 0 16px 30px -14px rgba(20, 75, 116, .72);
  transform: translateY(-1px);
}

.portal-primary-btn:disabled,
.portal-secondary-btn:disabled,
.provider-btn:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.portal-primary-btn--fit { width: auto; }

.portal-secondary-btn {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}

.portal-secondary-btn:hover {
  color: var(--sky-700);
  background: var(--sky-50);
  border-color: var(--sky-300);
}

.portal-secondary-btn--compact {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .8rem;
}

.portal-danger-btn {
  min-height: 40px;
  padding: 8px 13px;
  color: var(--rose-600);
  background: #fff;
  border: 1px solid #efcbd2;
  border-radius: 10px;
}

.portal-danger-btn:hover {
  background: var(--rose-100);
  border-color: #df9bab;
}

.text-action,
.back-action,
.support-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sky-700);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

.text-action:hover,
.back-action:hover,
.support-link:hover {
  color: var(--sky-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-action:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
  text-decoration: none;
}

.text-action--center {
  margin-inline: auto;
}

/* Authentication --------------------------------------------------------- */

.auth-shell {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(410px, .92fr) minmax(520px, 1.08fr);
  background: var(--surface);
}

.auth-story {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  padding: clamp(28px, 4vw, 58px);
}

.auth-story__image,
.auth-story__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-story__image {
  z-index: -3;
  object-fit: cover;
  object-position: 54% center;
}

.auth-story__wash {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(8, 35, 57, .16) 0%, rgba(8, 35, 57, .18) 34%, rgba(8, 35, 57, .88) 100%),
    linear-gradient(90deg, rgba(15, 74, 116, .18), transparent 60%);
}

.auth-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .24;
  background-image: radial-gradient(rgba(255, 255, 255, .7) .7px, transparent .7px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 38%);
  mask-image: linear-gradient(to bottom, #000, transparent 38%);
}

.auth-story__home {
  width: 176px;
  height: 176px;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 18px;
  box-shadow: 0 20px 50px -24px rgba(5, 33, 54, .6);
}

.auth-story__home img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-story__content {
  max-width: 570px;
  margin-top: auto;
  padding-top: 70px;
}

.auth-eyebrow {
  color: #d5efff;
  margin-bottom: 18px;
}

.auth-story__content h2 {
  max-width: 10ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 5vw, 5.1rem);
  font-weight: 500;
  line-height: .98;
}

.auth-story__content h2 em {
  color: #b9e5ff;
}

.auth-story__content > p:not(.auth-eyebrow) {
  max-width: 52ch;
  margin-top: 22px;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(.94rem, 1.2vw, 1.06rem);
}

.auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.auth-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  backdrop-filter: blur(12px);
  font-size: .74rem;
  font-weight: 700;
}

.auth-trust svg { width: 15px; height: 15px; color: #b9eadf; }

.auth-story__support {
  margin-top: 32px;
  color: rgba(255, 255, 255, .7);
  font-size: .76rem;
}

.auth-story__support a {
  color: #fff;
  font-weight: 700;
}

.auth-main {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: clamp(36px, 6vh, 72px) clamp(28px, 6vw, 90px);
  background:
    linear-gradient(180deg, rgba(246, 251, 255, .6), rgba(255, 255, 255, 0) 28%),
    var(--surface);
}

.auth-mobile-brand { display: none; }

.auth-workspace {
  width: min(100%, 448px);
  margin: auto;
}

.auth-step--wide { width: min(100%, 620px); }

.auth-heading { margin-bottom: 25px; }

.auth-heading :is(h1, h2) {
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 500;
  line-height: 1.04;
}

.auth-heading > p:last-child {
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: .9rem;
  line-height: 1.65;
}

.auth-heading strong { color: var(--ink); }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: 13px;
}

.auth-tab {
  min-height: 42px;
  padding: 8px 12px;
  color: var(--ink-muted);
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 700;
}

.auth-tab:hover { color: var(--ink); }

.auth-tab.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: var(--sh-sm);
}

.auth-panel { animation: portal-in .36s var(--ease-out); }

@keyframes portal-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.provider-btn {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}

.provider-btn:hover {
  background: var(--sky-50);
  border-color: var(--sky-300);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}

.provider-btn--ink {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.provider-btn--ink:hover {
  color: #fff;
  background: #132d47;
  border-color: #132d47;
}

.provider-btn--wide {
  width: 100%;
  margin-top: 10px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--ink-faint);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line-soft);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.portal-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.portal-field > label,
.portal-label-row label {
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
}

.portal-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.portal-input-wrap {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.portal-input-wrap > svg {
  position: absolute;
  left: 14px;
  z-index: 1;
  width: 17px;
  height: 17px;
  color: var(--ink-faint);
  pointer-events: none;
}

.portal-input,
.portal-textarea,
.table-search input,
.message-compose textarea {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.portal-input {
  min-height: 48px;
  padding: 11px 14px;
  font-size: .9rem;
}

.portal-input-wrap > .portal-input { padding-left: 43px; }
.portal-input--action { padding-right: 50px; }

.portal-input:focus,
.portal-textarea:focus,
.table-search input:focus,
.message-compose textarea:focus {
  outline: 0;
  background: #fff;
  border-color: var(--sky-400);
  box-shadow: var(--ring);
}

.portal-input[readonly] {
  color: var(--ink-muted);
  background: #f4f8fb;
}

.portal-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f7995' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.portal-input-wrap > .portal-select {
  padding-left: 43px;
}

.portal-textarea {
  min-height: 112px;
  padding: 12px 14px;
  resize: vertical;
  font-size: .88rem;
  line-height: 1.55;
}

.input-action {
  width: 38px;
  height: 38px;
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  border-radius: 8px;
}

.input-action:hover { color: var(--sky-700); background: var(--sky-100); }

.portal-field__hint,
.portal-field__error {
  font-size: .72rem;
  line-height: 1.45;
}

.portal-field__hint { color: var(--ink-muted); }
.portal-field__error { color: var(--rose-600); font-weight: 650; }
.portal-field__hint--center,
.portal-field__error--center { text-align: center; }

.portal-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-muted);
  font-size: .76rem;
  line-height: 1.5;
}

.portal-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--sky-600);
}

.portal-check a {
  color: var(--sky-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.portal-check--top { margin-top: 2px; }

.inline-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: var(--ink-soft);
  background: var(--sky-50);
  border: 1px solid var(--sky-200);
  border-radius: 10px;
  font-size: .77rem;
  line-height: 1.5;
}

.inline-alert svg {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--sky-700);
}

.inline-alert--error {
  color: #803145;
  background: var(--rose-100);
  border-color: #efcbd2;
}

.inline-alert--error svg { color: var(--rose-600); }

.auth-legal {
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: .68rem;
  line-height: 1.55;
  text-align: center;
}

.back-action { margin-bottom: 28px; }

.auth-step__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--sky-700);
  background: linear-gradient(155deg, var(--sky-50), var(--sky-200));
  border: 1px solid var(--sky-200);
  border-radius: 14px;
}

.auth-step__icon svg { width: 24px; height: 24px; }

.auth-step__icon--success {
  color: var(--mint-700);
  background: #edf9f6;
  border-color: #bde9de;
}

.country-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 10px 12px;
  color: var(--ink-soft);
  background: var(--sky-50);
  border: 1px solid var(--sky-200);
  border-radius: 10px;
  font-size: .76rem;
}

.country-suggestion span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.country-suggestion svg { width: 15px; height: 15px; color: var(--sky-600); }

.portal-input-wrap--phone .portal-input { padding-left: 70px; }

.dial-code {
  min-width: 48px;
  position: absolute;
  left: 12px;
  z-index: 1;
  color: var(--ink-soft);
  border-right: 1px solid var(--line);
  font-size: .84rem;
  font-weight: 700;
  pointer-events: none;
}

.recaptcha-slot:empty { display: none; }

.otp-input {
  width: 100%;
  height: 72px;
  padding: 10px 18px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-family: var(--font-ui);
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .42em;
  text-align: center;
}

.otp-input::placeholder {
  color: var(--sky-200);
  opacity: 1;
}

.otp-input:focus {
  outline: 0;
  background: #fff;
  border-color: var(--sky-400);
  box-shadow: var(--ring);
}

.otp-resend {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 18px;
  color: var(--ink-muted);
  font-size: .77rem;
}

.otp-resend button:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
  text-decoration: none;
}

.support-link {
  margin: 16px auto 0;
  color: var(--ink-muted);
}

.onboarding-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 32px;
}

.onboarding-progress::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: var(--line);
}

.onboarding-progress span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--ink-faint);
  font-size: .68rem;
}

.onboarding-progress span > svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  color: var(--ink-faint);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.onboarding-progress span.is-done,
.onboarding-progress span.is-active { color: var(--ink); }

.onboarding-progress span.is-done > svg {
  color: #fff;
  background: var(--mint-700);
  border-color: var(--mint-700);
}

.onboarding-progress span.is-active > svg {
  color: var(--sky-700);
  background: var(--sky-100);
  border-color: var(--sky-300);
}

.form-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-pending {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(8px);
  font-size: .84rem;
  font-weight: 700;
}

.portal-spinner {
  width: 26px;
  height: 26px;
  display: inline-block;
  border: 3px solid var(--sky-200);
  border-top-color: var(--sky-700);
  border-radius: 50%;
  animation: portal-spin .8s linear infinite;
}

@keyframes portal-spin { to { transform: rotate(360deg); } }

/* Application shell ------------------------------------------------------ */

.portal-shell {
  min-height: 100svh;
  color: var(--ink);
  background: var(--canvas);
}

.portal-sidebar {
  width: var(--portal-sidebar);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .96);
  border-right: 1px solid var(--line);
}

.portal-sidebar__head {
  min-height: var(--portal-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.portal-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-brand__mark {
  width: 40px;
  height: 40px;
  position: relative;
  display: block;
  flex: 0 0 40px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.portal-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portal-brand strong,
.portal-brand small {
  display: block;
  white-space: nowrap;
}

.portal-brand strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
}

.portal-brand small {
  margin-top: 2px;
  color: var(--sky-700);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.portal-sidebar__close { display: none; }

.portal-nav {
  flex: 1;
  overflow-y: auto;
  padding: 18px 12px;
}

.portal-nav__label {
  margin: 0 10px 8px;
  color: var(--ink-faint);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.portal-nav__label--account { margin-top: 24px; }

.portal-nav__item {
  width: 100%;
  min-height: 43px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  color: var(--ink-soft);
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 650;
  text-align: left;
  transition: color .2s ease, background .2s ease;
}

.portal-nav__item:hover {
  color: var(--ink);
  background: var(--sky-50);
}

.portal-nav__item.is-active {
  color: var(--sky-800);
  background: var(--sky-100);
}

.portal-nav__item.is-active::before {
  content: "";
  width: 3px;
  position: absolute;
  inset: 9px auto 9px -1px;
  background: var(--sky-600);
  border-radius: 0 3px 3px 0;
}

.portal-nav__item svg { width: 18px; height: 18px; }
.portal-nav__item.is-active svg { color: var(--sky-700); }

.portal-nav__count {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 0 6px;
  color: var(--sky-800);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--sky-200);
  border-radius: 99px;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.portal-nav__dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  background: var(--rose-600);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #efcbd2;
}

.portal-sidebar__foot {
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}

.portal-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  background: var(--sky-50);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.portal-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  color: #fff;
  background: linear-gradient(145deg, var(--sky-500), var(--sky-800));
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-avatar--large {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  border-radius: 14px;
  font-size: .9rem;
}

.portal-user__copy {
  min-width: 0;
  flex: 1;
}

.portal-user__copy strong,
.portal-user__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-user__copy strong { font-size: .77rem; }
.portal-user__copy small { color: var(--ink-muted); font-size: .62rem; font-variant-numeric: tabular-nums; }

.portal-user .account-icon-btn {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  background: transparent;
  border-color: transparent;
}

.portal-workspace {
  min-height: 100svh;
  margin-left: var(--portal-sidebar);
}

.portal-topbar {
  min-height: var(--portal-topbar);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(22px, 3vw, 42px);
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(160%);
}

.portal-topbar__start,
.portal-topbar__actions {
  display: flex;
  align-items: center;
}

.portal-topbar__start { min-width: 0; gap: 12px; }
.portal-topbar__actions { gap: 9px; }
.portal-nav-toggle { display: none; }

.portal-topbar__eyebrow {
  display: none;
  color: var(--ink-faint);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.portal-topbar h1 {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.03rem;
  font-weight: 750;
  line-height: 1.2;
}

.portal-profile-trigger {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 4px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: .76rem;
  font-weight: 700;
}

.portal-profile-trigger:hover {
  color: var(--ink);
  border-color: var(--sky-300);
}

.portal-profile-trigger .portal-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 8px;
  font-size: .62rem;
}

.portal-profile-trigger > svg { width: 14px; height: 14px; }

.notification-btn { position: relative; }

.notification-dot {
  width: 9px;
  height: 9px;
  position: absolute;
  top: 7px;
  right: 7px;
  background: var(--rose-600);
  border: 2px solid #fff;
  border-radius: 50%;
}

.connection-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  color: var(--sand-700);
  background: var(--sand-100);
  border: 1px solid #f2e0bd;
  border-radius: 9px;
  font-size: .68rem;
  font-weight: 700;
}

.connection-state > span:first-child {
  width: 7px;
  height: 7px;
  background: var(--sand-500);
  border-radius: 50%;
}

.portal-status-region {
  width: min(100%, var(--portal-content));
  margin-inline: auto;
  padding: 14px clamp(18px, 3vw, 36px) 0;
}

.portal-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--ink-soft);
  background: var(--sky-50);
  border: 1px solid var(--sky-200);
  border-radius: 12px;
}

.portal-banner > svg { color: var(--sky-700); }

.portal-banner div strong,
.portal-banner div span { display: block; }
.portal-banner div strong { color: var(--ink); font-size: .8rem; }
.portal-banner div span { margin-top: 2px; font-size: .72rem; }

.portal-banner--error {
  color: #803145;
  background: var(--rose-100);
  border-color: #efcbd2;
}

.portal-banner--error > svg { color: var(--rose-600); }

.portal-banner--warning {
  color: var(--sand-700);
  background: var(--sand-100);
  border-color: #f2e0bd;
}

.portal-banner--warning > svg { color: var(--sand-700); }

.portal-content {
  width: min(100%, var(--portal-content));
  min-height: calc(100svh - var(--portal-topbar));
  margin-inline: auto;
  padding: clamp(24px, 3.5vw, 46px) clamp(18px, 3vw, 36px) 60px;
}

.portal-content:focus { outline: 0; }
.portal-view { animation: portal-in .34s var(--ease-out); }

.overview-head,
.view-heading,
.surface-heading,
.case-detail__head,
.settings-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.overview-head { align-items: flex-end; margin-bottom: 24px; }

.overview-head h2,
.view-heading h2 {
  margin-top: 5px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
}

.overview-head > div > p:last-child,
.view-heading > div > p:last-child {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: .84rem;
}

.view-heading {
  align-items: flex-end;
  margin-bottom: 24px;
}

.journey-surface,
.portal-panel,
.portal-table-surface,
.case-list-panel,
.case-detail,
.message-workspace,
.timezone-panel,
.settings-nav,
.settings-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--portal-panel-radius);
  box-shadow: var(--sh-xs);
}

.journey-surface {
  padding: clamp(20px, 2.4vw, 30px);
}

.surface-heading {
  align-items: center;
  margin-bottom: 20px;
}

.surface-heading h3,
.portal-panel h3,
.case-detail h3,
.settings-panel h3 {
  margin-top: 3px;
  font-size: 1rem;
  line-height: 1.3;
}

.surface-heading--compact { margin-bottom: 16px; }

.status-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  flex: none;
  color: var(--ink-muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .66rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.status-pill svg { width: 13px; height: 13px; }
.status-pill--active { color: var(--sky-800); background: var(--sky-100); border-color: var(--sky-200); }
.status-pill--success { color: var(--mint-700); background: #eaf8f4; border-color: #bde9de; }
.status-pill--warning { color: var(--sand-700); background: var(--sand-100); border-color: #f2e0bd; }
.status-pill--muted { color: var(--ink-muted); background: var(--surface-2); }

.journey-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  counter-reset: journey;
}

.journey-steps li {
  min-width: 0;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 0 8px;
  color: var(--ink-faint);
  text-align: center;
}

.journey-steps li::before {
  content: "";
  height: 2px;
  position: absolute;
  top: 16px;
  left: 0;
  right: 50%;
  background: var(--line);
}

.journey-steps li::after {
  content: "";
  height: 2px;
  position: absolute;
  top: 16px;
  left: 50%;
  right: 0;
  background: var(--line);
}

.journey-steps li:first-child::before,
.journey-steps li:last-child::after { display: none; }

.journey-steps li > span {
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 800;
}

.journey-steps li > span svg { width: 15px; height: 15px; }
.journey-steps li b { margin-top: 4px; color: var(--ink-muted); font-size: .72rem; }
.journey-steps li small { max-width: 15ch; font-size: .62rem; line-height: 1.35; }

.journey-steps li.is-complete::after,
.journey-steps li.is-complete + li::before { background: var(--mint-500); }

.journey-steps li.is-complete > span {
  color: #fff;
  background: var(--mint-700);
  border-color: var(--mint-700);
}

.journey-steps li.is-complete b { color: var(--mint-700); }

.journey-steps li.is-active > span {
  color: #fff;
  background: var(--sky-700);
  border-color: var(--sky-700);
  box-shadow: 0 0 0 5px var(--sky-100);
}

.journey-steps li.is-active b { color: var(--sky-800); }

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .75fr);
  gap: 18px;
  margin-top: 18px;
}

.overview-grid--lower {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-panel {
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px);
}

.portal-panel--span { grid-column: 1 / -1; }

.next-action-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background:
    linear-gradient(112deg, rgba(233, 244, 255, .82), rgba(255, 255, 255, .96) 64%),
    #fff;
  border-color: var(--sky-200);
}

.panel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
}

.panel-icon--blue { color: var(--sky-700); background: var(--sky-100); border: 1px solid var(--sky-200); }
.panel-icon--mint { color: var(--mint-700); background: #eaf8f4; border: 1px solid #bde9de; }
.panel-icon--sand { color: var(--sand-700); background: var(--sand-100); border: 1px solid #f2e0bd; }

.next-action-panel__copy h3 {
  margin-top: 4px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

.next-action-panel__copy > p:not(.portal-overline) {
  max-width: 60ch;
  margin-top: 7px;
  color: var(--ink-muted);
  font-size: .78rem;
}

.next-action-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: .68rem;
  font-weight: 650;
}

.next-action-panel__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.next-action-panel__meta svg { width: 14px; height: 14px; color: var(--sky-600); }

.presence-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mint-700);
  font-size: .64rem;
  font-weight: 750;
}

.presence-dot > span {
  width: 7px;
  height: 7px;
  background: var(--mint-500);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--mint-200);
}

.presence-dot--inline { margin-right: 4px; }

.coordinator-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.coordinator-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  color: var(--sky-700);
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 12px;
}

.coordinator-avatar--small {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
}

.coordinator-avatar--small svg { width: 16px; height: 16px; }

.coordinator-profile div { min-width: 0; }
.coordinator-profile strong,
.coordinator-profile span { display: block; }
.coordinator-profile strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.coordinator-profile span { margin-top: 2px; color: var(--ink-muted); font-size: .67rem; }

.coordinator-note {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: .74rem;
}

.panel-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.action-list { border-top: 1px solid var(--line-soft); }

.action-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.action-row__icon,
.settings-row__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--sky-700);
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.action-row__icon svg,
.settings-row__icon svg { width: 16px; height: 16px; }

.action-row strong,
.action-row small { display: block; }
.action-row strong { font-size: .76rem; }
.action-row small { margin-top: 2px; color: var(--ink-muted); font-size: .65rem; }

.compact-empty {
  min-height: 102px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 11px;
}

.compact-empty > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--sky-700);
  background: var(--sky-100);
  border-radius: 10px;
}

.compact-empty strong { font-size: .76rem; }
.compact-empty p { margin-top: 3px; color: var(--ink-muted); font-size: .67rem; }

.appointment-card {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
}

.appointment-card time {
  width: 54px;
  height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--sky-800);
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 10px;
}

.appointment-card time strong { font-size: 1.15rem; line-height: 1; }
.appointment-card time span { margin-top: 4px; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.appointment-card > div strong,
.appointment-card > div span { display: block; }
.appointment-card > div strong { font-size: .8rem; }
.appointment-card > div span { color: var(--ink-muted); font-size: .68rem; }

.activity-list { display: grid; }

.activity-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 0;
}

.activity-list li + li { border-top: 1px solid var(--line-soft); }

.activity-list__marker {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--sky-700);
  background: var(--sky-100);
  border-radius: 9px;
}

.activity-list__marker svg { width: 14px; height: 14px; }
.activity-list__marker--success { color: var(--mint-700); background: #eaf8f4; }
.activity-list strong { font-size: .76rem; }
.activity-list p { margin-top: 2px; color: var(--ink-muted); font-size: .69rem; }
.activity-list time { display: block; margin-top: 5px; color: var(--ink-faint); font-size: .62rem; }

/* Cases ------------------------------------------------------------------ */

.case-layout {
  display: grid;
  grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.case-list-panel { overflow: hidden; }

.case-list-panel__head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .76rem;
}

.case-list-panel__head .account-icon-btn {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.case-list { padding: 8px; }

.case-list__item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
}

.case-list__item:hover { background: var(--sky-50); }
.case-list__item.is-active { color: var(--ink); background: var(--sky-100); border-color: var(--sky-200); }

.case-list__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--sky-700);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.case-list__icon svg { width: 16px; height: 16px; }
.case-list__item strong,
.case-list__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-list__item strong { font-size: .73rem; }
.case-list__item small { margin-top: 2px; color: var(--ink-muted); font-size: .6rem; }

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--ink-faint);
  border-radius: 50%;
}

.status-dot--blue { background: var(--sky-500); box-shadow: 0 0 0 3px var(--sky-200); }

.case-detail { min-width: 0; overflow: hidden; }

.case-detail__head {
  padding: clamp(18px, 2.4vw, 28px);
}

.case-detail__head h3 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
}

.case-detail__head > div > p {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: .75rem;
}

.case-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-muted);
  font-size: .63rem;
  font-variant-numeric: tabular-nums;
}

.case-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line-soft);
}

.case-summary-strip div { min-width: 0; padding: 14px 20px; }
.case-summary-strip div + div { border-left: 1px solid var(--line-soft); }
.case-summary-strip span,
.case-summary-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-summary-strip span { color: var(--ink-faint); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.case-summary-strip strong { margin-top: 4px; font-size: .72rem; }

.case-tabs {
  display: flex;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-soft);
}

.case-tabs button {
  min-height: 48px;
  position: relative;
  color: var(--ink-muted);
  font-size: .74rem;
  font-weight: 700;
}

.case-tabs button:hover { color: var(--ink); }
.case-tabs button.is-active { color: var(--sky-800); }

.case-tabs button.is-active::after {
  content: "";
  height: 2px;
  position: absolute;
  inset: auto 0 -1px;
  background: var(--sky-600);
}

.case-tab-panel { padding: clamp(20px, 3vw, 34px); }

.case-timeline { max-width: 760px; }

.case-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding-bottom: 28px;
}

.case-timeline li:not(:last-child)::after {
  content: "";
  width: 1px;
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 17px;
  background: var(--line);
}

.case-timeline__marker {
  width: 36px;
  height: 36px;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.case-timeline__marker svg { width: 16px; height: 16px; }
.case-timeline .is-complete .case-timeline__marker { color: var(--mint-700); background: #eaf8f4; border-color: #bde9de; }
.case-timeline .is-current .case-timeline__marker { color: var(--sky-700); background: var(--sky-100); border-color: var(--sky-200); }
.case-timeline h4 { margin-top: 3px; font-size: .84rem; }
.case-timeline li p:not(.portal-overline) { max-width: 65ch; margin-top: 4px; color: var(--ink-muted); font-size: .72rem; }
.case-timeline time { display: block; margin-top: 7px; color: var(--ink-faint); font-size: .62rem; }
.case-timeline .portal-primary-btn { margin-top: 12px; }

.details-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.details-list div { padding: 15px 18px; }
.details-list div:nth-child(even) { border-left: 1px solid var(--line-soft); }
.details-list div:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
.details-list dt { color: var(--ink-muted); font-size: .65rem; }
.details-list dd { margin-top: 4px; font-size: .78rem; font-weight: 700; }

/* Documents and states --------------------------------------------------- */

.document-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.document-summary > div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--sh-xs);
}

.document-summary strong,
.document-summary small { display: block; }
.document-summary strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.document-summary small { margin-top: 1px; color: var(--ink-muted); font-size: .65rem; }

.portal-table-surface { overflow: hidden; }

.table-toolbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.table-toolbar h3 { font-size: .9rem; }
.table-toolbar p { margin-top: 2px; color: var(--ink-muted); font-size: .67rem; }
.table-toolbar__actions { display: flex; align-items: center; gap: 8px; }

.table-search {
  position: relative;
  display: flex;
  align-items: center;
}

.table-search svg {
  position: absolute;
  left: 11px;
  z-index: 1;
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
}

.table-search input {
  width: 210px;
  height: 38px;
  padding: 8px 10px 8px 34px;
  font-size: .74rem;
}

.table-toolbar .account-icon-btn {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.responsive-table-wrap { overflow-x: auto; }

.portal-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: .75rem;
}

.portal-table th {
  padding: 11px 16px;
  color: var(--ink-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: .62rem;
  font-weight: 750;
  text-align: left;
  text-transform: uppercase;
}

.portal-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.portal-table tbody tr:hover { background: var(--sky-50); }

.account-state {
  min-height: 320px;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 34px 20px;
  text-align: center;
}

.account-state--compact { min-height: 220px; }

.account-state__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--sky-700);
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 14px;
}

.account-state__icon svg { width: 23px; height: 23px; }
.account-state__icon--error { color: var(--rose-600); background: var(--rose-100); border-color: #efcbd2; }
.account-state__icon--warning { color: var(--sand-700); background: var(--sand-100); border-color: #f2e0bd; }
.account-state h3 { font-size: .96rem; }
.account-state p { max-width: 50ch; margin-top: 6px; color: var(--ink-muted); font-size: .74rem; }
.account-state .portal-primary-btn,
.account-state .portal-secondary-btn { margin-top: 16px; }
.account-state--loading { gap: 5px; }
.account-state--loading .portal-spinner { margin-bottom: 10px; }

/* Messages --------------------------------------------------------------- */

.message-workspace {
  min-height: min(680px, calc(100svh - 220px));
  display: grid;
  grid-template-columns: minmax(230px, .34fr) minmax(0, 1fr);
  overflow: hidden;
}

.thread-list {
  min-width: 0;
  border-right: 1px solid var(--line-soft);
}

.thread-list__head {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .78rem;
}

.thread-list__head .account-icon-btn {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.thread-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.thread-item:hover,
.thread-item.is-active { background: var(--sky-50); }
.thread-item.is-active { box-shadow: inset 3px 0 var(--sky-600); }
.thread-item strong,
.thread-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item strong { font-size: .72rem; }
.thread-item small { margin-top: 2px; color: var(--ink-muted); font-size: .62rem; }
.thread-item time { align-self: start; color: var(--ink-faint); font-size: .58rem; }

.conversation {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr) auto;
}

.conversation__head {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.conversation__head .account-icon-btn {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.conversation__body {
  min-width: 0;
  overflow-y: auto;
  padding: 20px;
  background:
    linear-gradient(rgba(248, 252, 255, .88), rgba(248, 252, 255, .88)),
    radial-gradient(var(--sky-200) .7px, transparent .7px);
  background-size: auto, 20px 20px;
}

.message-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  color: var(--ink-faint);
  font-size: .6rem;
  font-weight: 700;
}

.message-day::before,
.message-day::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.message-bubble {
  width: fit-content;
  max-width: min(78%, 560px);
  margin-bottom: 12px;
  padding: 11px 13px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px 12px 12px 12px;
  box-shadow: var(--sh-xs);
  font-size: .75rem;
}

.message-bubble--user {
  margin-left: auto;
  color: #fff;
  background: var(--sky-700);
  border-color: var(--sky-700);
  border-radius: 12px 5px 12px 12px;
}

.message-bubble time {
  display: block;
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: .58rem;
  text-align: right;
}

.message-bubble--user time { color: rgba(255, 255, 255, .7); }

.message-compose {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid var(--line-soft);
}

.message-compose .account-icon-btn {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

.message-compose textarea {
  min-height: 40px;
  max-height: 140px;
  padding: 9px 12px;
  resize: none;
  font-size: .76rem;
}

.message-send {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--sky-700);
  border-radius: 10px;
}

.message-send:hover { background: var(--sky-800); }

/* Schedule and travel ---------------------------------------------------- */

.schedule-layout,
.travel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 18px;
  align-items: start;
}

.timezone-panel {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.timezone-panel h3 { margin-top: 3px; font-size: .95rem; }
.timezone-panel p:not(.portal-overline) { margin-top: 6px; color: var(--ink-muted); font-size: .72rem; }
.timezone-panel .text-action { justify-self: start; }

.appointment-list { display: grid; }

.travel-progress { min-width: 0; }

.progress-value {
  color: var(--sky-800);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.progress-track {
  height: 7px;
  overflow: hidden;
  background: var(--sky-100);
  border-radius: 99px;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--mint-500), var(--sky-600));
  border-radius: inherit;
  transition: width .5s var(--ease-out);
}

.travel-checklist { margin-top: 17px; border-top: 1px solid var(--line-soft); }

.travel-checklist li {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.travel-checklist li > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.travel-checklist li > span svg { width: 16px; height: 16px; }
.travel-checklist strong,
.travel-checklist small { display: block; }
.travel-checklist strong { font-size: .76rem; }
.travel-checklist small { margin-top: 2px; color: var(--ink-muted); font-size: .66rem; }
.travel-checklist em { color: var(--ink-faint); font-family: var(--font-ui); font-size: .62rem; font-style: normal; font-weight: 700; }

.travel-checklist li.is-complete > span { color: var(--mint-700); background: #eaf8f4; border-color: #bde9de; }
.travel-checklist li.is-active > span { color: var(--sky-700); background: var(--sky-100); border-color: var(--sky-200); }

.travel-help {
  display: grid;
  justify-items: start;
  gap: 13px;
}

.travel-help p { color: var(--ink-muted); font-size: .74rem; }

/* Settings --------------------------------------------------------------- */

.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-nav {
  display: grid;
  gap: 3px;
  padding: 8px;
}

.settings-nav button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: var(--ink-muted);
  border-radius: 9px;
  font-size: .72rem;
  font-weight: 700;
  text-align: left;
}

.settings-nav button svg { width: 16px; height: 16px; }
.settings-nav button:hover { color: var(--ink); background: var(--sky-50); }
.settings-nav button.is-active { color: var(--sky-800); background: var(--sky-100); }

.settings-content { min-width: 0; overflow: hidden; }
.settings-panel { padding: clamp(20px, 2.8vw, 32px); }
.settings-panel__head { padding-bottom: 19px; border-bottom: 1px solid var(--line-soft); }
.settings-panel__head h3 { font-size: 1rem; }
.settings-panel__head p { margin-top: 4px; color: var(--ink-muted); font-size: .7rem; }

.profile-form { display: grid; gap: 18px; padding-top: 20px; }

.profile-photo-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.profile-photo-row strong,
.profile-photo-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-photo-row strong { font-size: .82rem; }
.profile-photo-row small { margin-top: 3px; color: var(--ink-muted); font-size: .65rem; }

.portal-input-with-badge { position: relative; }
.portal-input-with-badge .portal-input { padding-right: 88px; }

.verified-mini {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--mint-700);
  font-size: .61rem;
  font-weight: 750;
  transform: translateY(-50%);
}

.verified-mini svg { width: 12px; height: 12px; }

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.save-state { margin-right: auto; color: var(--mint-700); font-size: .68rem; }

.settings-rows { display: grid; }

.settings-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}

.settings-row strong,
.settings-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row strong { font-size: .76rem; }
.settings-row small { margin-top: 2px; color: var(--ink-muted); font-size: .64rem; }

.security-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}

.security-session > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.security-session strong,
.security-session small { display: block; }
.security-session strong { font-size: .74rem; }
.security-session small { margin-top: 2px; color: var(--ink-muted); font-size: .63rem; }

.preference-list { display: grid; }

.preference-list > label {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-soft);
}

.preference-list strong,
.preference-list small { display: block; }
.preference-list strong { font-size: .77rem; }
.preference-list small { max-width: 60ch; margin-top: 3px; color: var(--ink-muted); font-size: .65rem; }
.preference-list .portal-primary-btn { margin: 20px 0 0 auto; }

.portal-switch {
  width: 42px;
  height: 24px;
  position: relative;
  flex: 0 0 42px;
  appearance: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.portal-switch::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  transition: transform .24s var(--ease-out);
}

.portal-switch:checked { background: var(--sky-600); border-color: var(--sky-600); }
.portal-switch:checked::after { transform: translateX(18px); }

.privacy-actions { display: grid; }

.privacy-actions > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.privacy-actions strong,
.privacy-actions small { display: block; }
.privacy-actions strong { font-size: .77rem; }
.privacy-actions small { max-width: 65ch; margin-top: 3px; color: var(--ink-muted); font-size: .65rem; }
.privacy-actions__danger .settings-row__icon { color: var(--rose-600); background: var(--rose-100); border-color: #efcbd2; }

/* Modals and uploads ----------------------------------------------------- */

.portal-modal {
  width: min(92vw, 640px);
  max-height: min(90svh, 820px);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.portal-modal--small { width: min(92vw, 500px); }

.portal-modal::backdrop {
  background: rgba(7, 31, 51, .48);
  backdrop-filter: blur(5px);
}

.portal-modal[open] { animation: modal-in .3s var(--ease-out); }
.portal-modal[open]::backdrop { animation: backdrop-in .25s ease; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.portal-modal__frame {
  max-height: min(90svh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-xl);
}

.portal-modal__head,
.portal-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.portal-modal__head { border-bottom: 1px solid var(--line-soft); }
.portal-modal__head h2 { margin-top: 3px; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }
.portal-modal__head .account-icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
.portal-modal__body { display: grid; gap: 15px; overflow-y: auto; padding: 20px 18px; }
.portal-modal__foot { border-top: 1px solid var(--line-soft); }

.upload-dropzone {
  min-height: 180px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  color: var(--ink-soft);
  background: var(--sky-50);
  border: 1px dashed var(--sky-300);
  border-radius: 13px;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.upload-dropzone:hover,
.upload-dropzone.is-dragging { background: var(--sky-100); border-color: var(--sky-600); }
.upload-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.upload-dropzone__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--sky-700);
  background: #fff;
  border: 1px solid var(--sky-200);
  border-radius: 12px;
  box-shadow: var(--sh-xs);
}

.upload-dropzone strong { font-size: .8rem; }
.upload-dropzone > span:last-child { color: var(--ink-muted); font-size: .66rem; }

.upload-queue {
  display: grid;
  gap: 8px;
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-muted);
  font-size: .68rem;
}

.privacy-note svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--mint-700);
}

.session-expired {
  display: grid;
  justify-items: center;
  padding: 40px 30px;
  text-align: center;
}

.session-expired h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; }
.session-expired p { max-width: 42ch; margin: 8px 0 20px; color: var(--ink-muted); font-size: .76rem; }

/* Toast, skeletons and global utilities --------------------------------- */

.account-toast {
  min-width: min(380px, calc(100vw - 32px));
  max-width: min(520px, calc(100vw - 32px));
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: #fff;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: var(--sh-xl);
  font-size: .76rem;
  font-weight: 650;
  animation: toast-in .35s var(--ease-out);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.account-toast__icon { color: var(--mint-500); }
.account-toast__close {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
}

.portal-loading-state {
  display: grid;
  gap: 18px;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sky-100);
  border-radius: 12px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-100%);
  animation: skeleton-wave 1.45s ease-in-out infinite;
}

@keyframes skeleton-wave { to { transform: translateX(100%); } }

.skeleton--title { width: min(380px, 80%); height: 64px; }
.skeleton-grid { display: grid; grid-template-columns: 1.5fr .75fr; gap: 18px; }
.skeleton--panel { height: 240px; }
.skeleton--wide { height: 300px; }

.portal-mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(7, 31, 51, .38);
  backdrop-filter: blur(3px);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .auth-shell { grid-template-columns: minmax(360px, .78fr) minmax(500px, 1.22fr); }
  .auth-story { padding: 34px; }
  .auth-story__content h2 { font-size: clamp(2.6rem, 4.6vw, 4rem); }
  .next-action-panel { grid-template-columns: auto minmax(0, 1fr); }
  .next-action-panel .portal-primary-btn { grid-column: 2; justify-self: start; }
  .settings-layout { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: minmax(330px, .7fr) minmax(440px, 1.3fr); }
  .auth-main { padding-inline: 38px; }
  .auth-story__home { width: 142px; height: 142px; }
  .auth-trust span:nth-child(3) { display: none; }

  .portal-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--sh-xl);
    transition: transform .36s var(--ease-out);
  }

  .portal-sidebar.is-open { transform: none; }
  .portal-sidebar__close,
  .portal-nav-toggle { display: inline-grid; }
  .portal-workspace { margin-left: 0; }
  .portal-topbar__eyebrow { display: block; }
  .overview-grid,
  .overview-grid--lower { grid-template-columns: 1fr 1fr; }
  .next-action-panel { grid-column: 1 / -1; }
  .coordinator-panel { grid-column: 1 / -1; }
  .case-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .schedule-layout,
  .travel-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 820px) {
  .auth-shell { display: block; min-height: 100svh; }
  .auth-story { display: none; }
  .auth-main {
    min-height: 100svh;
    display: block;
    padding: 28px 22px 46px;
  }

  .auth-mobile-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
  }

  .auth-mobile-brand a {
    width: 112px;
    height: 112px;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--sh-sm);
  }

  .auth-mobile-brand img { width: 100%; height: 100%; object-fit: contain; }
  .auth-workspace { margin: 0 auto; }
  .auth-pending { position: fixed; }

  .journey-surface { overflow: hidden; }
  .journey-steps {
    grid-template-columns: repeat(6, minmax(108px, 1fr));
    overflow-x: auto;
    margin-inline: -12px;
    padding: 4px 12px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .journey-steps li { scroll-snap-align: start; }
  .case-layout { grid-template-columns: 1fr; }
  .case-list-panel { max-height: 240px; }
  .message-workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .schedule-layout,
  .travel-grid { grid-template-columns: 1fr; }
  .timezone-panel,
  .travel-help { grid-template-columns: auto 1fr; }
  .timezone-panel .text-action,
  .travel-help .portal-secondary-btn { grid-column: 2; justify-self: start; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 680px) {
  .portal-topbar {
    min-height: 66px;
    padding-inline: 14px;
  }

  .portal-profile-trigger > span:not(.portal-avatar),
  .portal-profile-trigger > svg { display: none; }

  .portal-profile-trigger {
    min-height: 42px;
    padding: 4px;
  }

  .portal-content {
    padding: 22px 14px 100px;
  }

  .portal-status-region { padding-inline: 14px; }
  .portal-banner { grid-template-columns: auto 1fr; }
  .portal-banner .portal-secondary-btn { grid-column: 2; justify-self: start; }
  .overview-head,
  .view-heading { align-items: flex-start; flex-direction: column; }
  .overview-head .portal-secondary-btn,
  .view-heading .portal-primary-btn,
  .view-heading .portal-secondary-btn { width: 100%; }
  .overview-head h2,
  .view-heading h2 { font-size: 2rem; }
  .overview-grid,
  .overview-grid--lower { grid-template-columns: 1fr; }
  .portal-panel--span { grid-column: auto; }
  .next-action-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .next-action-panel .portal-primary-btn {
    width: 100%;
    grid-column: 1 / -1;
  }
  .journey-surface,
  .portal-panel { border-radius: 13px; }
  .surface-heading { align-items: flex-start; }
  .case-detail__head { flex-direction: column; }
  .case-summary-strip { grid-template-columns: 1fr; }
  .case-summary-strip div + div { border-top: 1px solid var(--line-soft); border-left: 0; }
  .case-tabs { gap: 16px; overflow-x: auto; }
  .case-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .details-list { grid-template-columns: 1fr; }
  .details-list div:nth-child(even) { border-left: 0; }
  .details-list div + div { border-top: 1px solid var(--line-soft); }
  .document-summary { grid-template-columns: 1fr; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-toolbar__actions,
  .table-search,
  .table-search input { width: 100%; }
  .table-toolbar__actions .account-icon-btn { flex: 0 0 38px; }

  .message-workspace {
    min-height: 620px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .thread-list { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .thread-list > div[data-thread-list] {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .thread-list > div[data-thread-list]::-webkit-scrollbar { display: none; }
  .thread-item { min-width: 250px; border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .thread-item.is-active { box-shadow: inset 0 -3px var(--sky-600); }
  .conversation { min-height: 470px; }
  .message-bubble { max-width: 90%; }

  .settings-panel { padding: 18px; }
  .settings-panel__head { flex-direction: column; }
  .profile-photo-row { grid-template-columns: auto minmax(0, 1fr); }
  .profile-photo-row .portal-secondary-btn { width: 100%; grid-column: 1 / -1; }
  .form-pair { grid-template-columns: 1fr; }
  .settings-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .settings-row .status-pill { grid-column: 2; justify-self: start; }
  .settings-row .text-action { grid-column: 3; grid-row: 1 / span 2; }
  .security-session { align-items: flex-start; flex-direction: column; }
  .security-session .portal-secondary-btn { width: 100%; }
  .privacy-actions > div {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .privacy-actions .portal-secondary-btn,
  .privacy-actions .portal-danger-btn {
    width: 100%;
    grid-column: 1 / -1;
  }
  .portal-modal__foot { flex-direction: column-reverse; }
  .portal-modal__foot .portal-primary-btn,
  .portal-modal__foot .portal-secondary-btn { width: 100%; }
  .account-toast { right: 16px; bottom: 16px; }
}

@media (max-width: 460px) {
  .auth-main { padding-inline: 17px; }
  .auth-mobile-brand a { width: 92px; height: 92px; }
  .auth-heading :is(h1, h2) { font-size: 2rem; }
  .provider-grid { grid-template-columns: 1fr; }
  .provider-btn { min-height: 46px; }
  .form-pair { grid-template-columns: 1fr; }
  .otp-input { padding-left: 27px; font-size: 1.75rem; letter-spacing: .3em; }
  .onboarding-progress b { display: none; }
  .portal-sidebar { width: min(88vw, 310px); }
  .portal-topbar__actions { gap: 5px; }
  .connection-state { display: none; }
  .notification-btn { width: 40px; height: 40px; flex-basis: 40px; }
  .journey-surface { padding-inline: 15px; }
  .surface-heading { flex-direction: column; gap: 10px; }
  .next-action-panel { display: flex; flex-direction: column; }
  .next-action-panel .portal-primary-btn { width: 100%; }
  .panel-actions { flex-direction: column; }
  .panel-actions .portal-secondary-btn { width: 100%; }
  .action-row { grid-template-columns: auto minmax(0, 1fr); }
  .action-row .status-pill { grid-column: 2; justify-self: start; }
  .travel-checklist li { grid-template-columns: auto minmax(0, 1fr); }
  .travel-checklist em { grid-column: 2; }
  .preference-list > label { align-items: flex-start; }
  .portal-modal { width: calc(100vw - 20px); }
  .portal-modal__frame { border-radius: 14px; }
  .upload-dropzone { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-panel,
  .portal-view,
  .portal-modal[open],
  .account-toast { animation: none; }
  .portal-spinner { animation-duration: 1.8s; }
  .skeleton::after { animation: none; }
  .portal-sidebar { transition: none; }
}

@media print {
  .portal-sidebar,
  .portal-topbar,
  .portal-status-region,
  .portal-modal,
  .account-toast,
  .portal-primary-btn,
  .portal-secondary-btn,
  .portal-danger-btn { display: none !important; }
  .portal-workspace { margin-left: 0; }
  .portal-content { max-width: none; padding: 0; }
  .portal-panel,
  .journey-surface,
  .case-detail { box-shadow: none; }
}