/*


*/

/* Global reset: remove default browser page margins */

html, body { margin: 0; }

.flash-toasts{
  position: fixed;
  top: 100px;
  right: 18px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  float:right;
}

/* -------------------------------------------------------------------------
   Provider Portal – My Calendar (mobile scheduling form)
   ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .site-main{margin-top:50px;}
  /* The schedule form uses an inline grid style; override with !important. */
  .schedule-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
  }

  .schedule-grid .form-control{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Make the client dropdown feel intentional and readable on mobile */
  .schedule-client-select{
    height: 42px;
    padding: 10px 38px 10px 12px !important;
    line-height: 20px;
    border-radius: 14px;
    background-color: rgba(255,255,255,0.88);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: #0f172a;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.55) 50%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.55) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 18px,
      calc(100% - 12px) 18px;
    background-size:
      6px 6px,
      6px 6px;
    background-repeat: no-repeat;
  }

  /* Multi-select hint isn't useful on phones */
  .schedule-grid [data-mode-panel="group"] .dash-subtle{
    display: none;
  }
}

.flash-toast{
    padding: 0.5rem 1rem;
    border: none;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    width: 250px;
    margin: 0.5em;
    transition: filter 0.2s ease-in-out,
        transform 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    outline: none;
    background: #3498db;
    color: #fff;

  }

.flash-toast__icon{
  /* Logo container (used for ALL toasts) */
  margin: 0 14px 0 2px;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px;
  border-radius: 18px;

  background: rgba(255,255,255,0.14);
  box-shadow:
    0 10px 24px rgba(15,23,42,0.16),
    0 0 0 1px rgba(255,255,255,0.22) inset;
}



.flash-toast__body{
  min-width: 0;
  color:#000;
  min-height:90px;
}

.flash-toast__msg{
  /* Dark grey text for better legibility on light/pastel toast backgrounds */
  color: rgba(15,23,42,.92);
  font-size: 14px;
  line-height: 1.35;
  text-shadow: none;
  word-break: break-word;
}

.flash-toast__close{
  margin-left: auto;
  border: 0;
  background: rgba(255,255,255,0.14);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}

.flash-toast__close:hover{
  background: rgba(255,255,255,0.22);
}

.flash-toast--notice,
.flash-toast--success{
  background: rgba(2, 132, 199, 0.80);
}

.flash-toast--alert,
.flash-toast--error{
  background: rgba(239, 68, 68, 0.18);
}

/* Explicitly keep alert/error toast text dark (these are light backgrounds) */
.flash-toast--alert .flash-toast__msg,
.flash-toast--error .flash-toast__msg{
  color: rgba(15,23,42,.92);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(22px); }
}

.flash-toast.is-in{
  animation: toast-in 240ms ease-out forwards;
}

.flash-toast.is-out{
  animation: toast-out 180ms ease-in forwards;
}

@media (max-width: 720px){
  /* Mobile: make flashes a thin, single-line bar under the top nav */
  .flash-toasts{
    top: 64px;          /* just below header */
    left: 0;
    right: 0;
    gap: 8px;
    align-items: stretch;
    padding: 0;
  }

  .flash-toast{
    position: relative;
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 8px 40px 8px 12px;
    min-height: 36px;
    font-size: 13px;
    justify-content: flex-start;
  }

  .flash-toast__icon{ display: none; }

  .flash-toast__body{
    min-height: 0;
  }

  .flash-toast__msg{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flash-toast__close{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

/*
 *= require_self
 *= require_tree .
*/



/* === Flash Toast Polishing + Mobile Bar === */
.flash-toasts{
  pointer-events: none; /* container doesn't steal clicks */
}

.flash-toast{
  pointer-events: auto; /* allow dismiss button */
  width: auto;
  max-width: 420px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(2,6,23,0.18);
  gap: 10px;
}

.flash-toast__icon{
  margin: 0 14px 0 2px;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px;
  border-radius: 18px;

  background: rgba(255,255,255,0.14);
  box-shadow:
    0 10px 24px rgba(15,23,42,0.16),
    0 0 0 1px rgba(255,255,255,0.22) inset;
}


.flash-toast__logo{
  width: 70px;
  height: 70px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* === Pretty file inputs ("Choose file") === */
.coachable-file-input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.60);
  background: rgba(255,255,255,0.70);
  color:#0f172a;
  font-size:14px;
}

/* Modern browsers */
.coachable-file-input::file-selector-button{
  margin-right:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,0.45);
  background: rgba(219,234,254,0.90);
  color:#1e40af;
  font-weight:700;
  cursor:pointer;
}

.coachable-file-input::-webkit-file-upload-button{
  margin-right:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,0.45);
  background: rgba(219,234,254,0.90);
  color:#1e40af;
  font-weight:700;
  cursor:pointer;
}

.coachable-file-input::file-selector-button:hover,
.coachable-file-input::-webkit-file-upload-button:hover{
  filter: brightness(0.98);
}

.coachable-file-input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}

.flash-toast__body{
  min-height: 0;
}

.flash-toast__msg{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.flash-toast__close{
  margin-left: 8px;
  width: 30px;
  height: 30px;
  font-size: 18px;
}

/* Mobile: a thin, single-line bar just below the top nav */
@media (max-width: 680px){
  .flash-toasts{
    top: 64px;          /* sits below header/nav */
    left: 12px;
    right: 12px;
    gap: 8px;
  }

  .flash-toast{
    max-width: none;
    width: 100%;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .flash-toast__icon{
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .flash-toast__msg{
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flash-toast__close{
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}
/* Coachable Admin: glass panel shell */


.admin-body {
  min-height: 100vh;
  background-image: linear-gradient(to right, #141e30, #243b55);

}

.admin-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.admin-orb {
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 999px;
  filter: blur(32px);
  opacity: .45;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), rgba(6,182,212,.2), rgba(2,132,199,0));
  animation: adminFloat 10s ease-in-out infinite;
}

.admin-orb.orb-1 { top: -180px; left: -160px; animation-duration: 12s; }
.admin-orb.orb-2 { top: 10%; right: -220px; animation-duration: 14s; }
.admin-orb.orb-3 { bottom: -240px; left: 25%; animation-duration: 16s; }

@keyframes adminFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(14px, -10px, 0) scale(1.05); }
}

.admin-wrap {
  padding: 26px;
}

.admin-panel {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.admin-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(2,132,199,.18), rgba(6,182,212,.10));
}

.admin-brand { display: flex; align-items: center; gap: 12px; }
.admin-brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(6,182,212,.55), rgba(2,132,199,.65));
  border: 1px solid rgba(255,255,255,.22);
}
.admin-brand__title { color: #e2e8f0; font-weight: 800; line-height: 1; }
.admin-brand__sub { color: rgba(226,232,240,.75); font-size: 12px; margin-top: 2px; }

.admin-head__right { display: flex; align-items: center; gap: 14px; }
.admin-user { display: flex; align-items: center; gap: 10px; }
.admin-user__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #e0f2fe;
  background: rgba(2,132,199,.22);
  border: 1px solid rgba(255,255,255,.18);
}
.admin-user__name { color: rgba(226,232,240,.85); font-size: 13px; }

.admin-panel__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 640px;
}

.admin-nav {
  border-right: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(2,6,23,.35), rgba(2,6,23,.12));
}

.admin-main { padding: 18px; }

.admin-nav__inner { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.admin-nav__label { color: rgba(226,232,240,.65); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.admin-nav__section { display: flex; flex-direction: column; gap: 8px; }

.admin-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(226,232,240,.86);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.admin-nav__item:hover { transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.admin-nav__item.is-active { background: rgba(6,182,212,.16); border-color: rgba(56,189,248,.25); }
.admin-nav__item.is-disabled { opacity: .6; cursor: not-allowed; }
.admin-nav__soon { margin-left: auto; font-size: 11px; color: rgba(226,232,240,.65); font-style: normal; }

.admin-section__head { align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.admin-h1 { margin: 0; color: #e2e8f0; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.admin-h2 { margin: 0 0 10px; color: #e2e8f0; font-size: 15px; font-weight: 800; }
.admin-sub { margin: 6px 0 0; color: rgba(226,232,240,.75); font-size: 13px; }

/* --------------------------------------------------------------------------
   Dashboard
----------------------------------------------------------------------------*/

.admin-metrics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.admin-metric{ margin-bottom: 0; }

.admin-metric__top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-metric__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.92);
}

.admin-metric__title{
  color: rgba(226,232,240,.95);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.admin-metric__rows{ display: flex; flex-direction: column; gap: 8px; }

.admin-metric__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}

.admin-metric__row span{ color: rgba(226,232,240,.72); font-size: 12px; font-weight: 700; }
.admin-metric__row strong{ color: rgba(226,232,240,.95); font-size: 13px; font-weight: 900; }

.admin-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 980px){
  .admin-grid-2{ grid-template-columns: 1fr; }
}

.admin-card {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px;
  /* Add spacing between stacked cards so shadows don't visually overlap */
  margin-bottom: 14px;
}

.admin-card--tight{
  padding: 12px;
}

.admin-actions { display: flex; gap: 10px; margin-bottom: 12px; margin-top: 12px;}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.92);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  transition: transform .12s ease, background-color .12s ease;
}

.admin-btn--sm{
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.admin-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.09); }
.admin-btn--primary { background: linear-gradient(135deg, rgba(6,182,212,.25), rgba(2,132,199,.35)); border-color: rgba(56,189,248,.30); }
.admin-btn--danger { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35); }
.admin-btn--warning { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); }

/* Inline text-button used inside admin tables */
.admin-link--btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: rgba(226,232,240,.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.admin-link--btn:hover { color: #fff; }

/* Status badges */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.admin-badge--success { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.14); }
.admin-badge--danger  { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.14); }
.admin-badge--warning { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.14); }
.admin-badge--subtle  { border-color: rgba(148,163,184,.35); background: rgba(148,163,184,.12); }

.admin-link--danger,
.admin-link--danger:hover {
  color: rgba(239,68,68,1);
}

.admin-link { color: #7dd3fc; text-decoration: none; font-weight: 700; }
.admin-link:hover { text-decoration: underline; }

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

/* --------------------------------------------------------------------------
   Mobile / responsive admin layout
   Goal: admin usable on phones (stack nav + content, prevent clipped columns)
----------------------------------------------------------------------------*/

@media (max-width: 820px){
  .admin-wrap{ padding: 12px; }
  .admin-panel{ border-radius: 18px; }

  /* Header: allow wrap and avoid pushing content off-screen */
  .admin-panel__head{ flex-wrap: wrap; gap: 10px; }
  .admin-head__right{ width: 100%; justify-content: space-between; }
  .admin-user{ min-width: 0; }
  .admin-user__name{
    max-width: 52vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Body: stack nav above main */
  .admin-panel__body{ grid-template-columns: 1fr; min-height: 0; }
  .admin-nav{ border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }

  /* Nav: horizontal scroll with section groups */
  .admin-nav__inner{
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 12px;
  }
  .admin-nav__section{ min-width: 220px; width: 100%;}
  .admin-nav__item{ padding: 10px 12px; }

  .admin-main{ padding: 14px; }

  /* Common components */
  .admin-section__head{ flex-wrap: wrap; }
  .admin-actions{ flex-wrap: wrap; }
}

@media (max-width: 520px){
  .admin-h1{ font-size: 20px; }
  .admin-sub{ font-size: 12.5px; }

  /* Make forms and table controls feel less cramped */
  .admin-card{ padding: 12px; border-radius: 16px; }
  .admin-btn{ width: 100%; }
  .admin-btn--sm{ width: auto; }

  /* Tables: keep readable; allow horizontal scroll when needed */
  .admin-table{ font-size: 12.5px; }

  /*
    On very small screens, multi-column admin tables were appearing "cut off"
    (especially long emails / URLs) because several columns used fixed widths
    and the content did not wrap.

    Fix: allow cells to wrap aggressively and remove fixed column widths.
    This keeps the table usable without forcing horizontal panning.
  */
  .admin-table{ table-layout: fixed; }
  .admin-table th,
  .admin-table td{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Remove "tight" fixed widths on mobile */
  .admin-table__tight{ width: auto; }
  .admin-table__actions{
    width: auto;
    text-align: left;
    white-space: normal;
  }

  /* Action links/buttons should wrap instead of overflowing */
  .admin-table__actions .admin-link,
  .admin-table__actions .admin-link--btn{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 6px;
  }
}

/* --------------------------------------------------------------------------
   Admin Library uploader
----------------------------------------------------------------------------*/

.admin-lib-card { position: relative; }

.admin-lib-form { margin-top: 8px; }

.admin-lib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-lib-field--full { grid-column: 1 / -1; }

.admin-lib-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(226,232,240,.78);
}

.admin-lib-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,1);
  color: rgba(226,232,240,.92);
  outline: none;
}

.admin-lib-input:focus {
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}

.admin-lib-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-lib-provider-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.88);
}

.admin-lib-provider-pill input { transform: translateY(1px); }
.admin-lib-provider-name { font-weight: 800; font-size: 13px; }

.admin-lib-file { display: inline-flex; align-items: center; gap: 8px; }
.admin-lib-file__icon { color: rgba(125,211,252,.95); }

/* Recent table: prevent horizontal scroll + "skewed" wrapping inside narrow cards */
.admin-lib-recent .admin-table-wrap{ overflow-x: hidden; }

.admin-table--wrap{ table-layout: fixed; }
.admin-table--wrap th,
.admin-table--wrap td{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-lib-recent .admin-table--wrap th:nth-child(1){ width: 28%; }
.admin-lib-recent .admin-table--wrap th:nth-child(2){ width: 34%; }
.admin-lib-recent .admin-table--wrap th:nth-child(3){ width: 22%; }
.admin-lib-recent .admin-table--wrap th:nth-child(4){ width: 12%; }
.admin-lib-recent .admin-table--wrap th:nth-child(5){ width: 4%; }

.admin-lib-file{ align-items: flex-start; }
.admin-lib-file span{ display: block; line-height: 1.25; }

.admin-muted { color: rgba(226,232,240,.70); }

@media (max-width: 900px) {
  .admin-lib-grid { grid-template-columns: 1fr; }
  .admin-lib-provider-grid { grid-template-columns: 1fr; }
}
.admin-table { width: 100%; border-collapse: collapse; font-size:11px; }
.admin-table th {
  text-align: left;
  font-size: 12px;
  color: rgba(226,232,240,.72);
  font-weight: 800;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.admin-table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(226,232,240,.90);
  vertical-align: top;
}
.admin-table__tight { width: 120px; }

/*
  Actions column
  On desktop we previously forced a narrow fixed width + nowrap. Now that
  Providers/Clients include richer management actions (edit, portals, confirm
  email, ban/unban, delete), that caused the table to overflow and appear
  "cut off".

  Keep it compact, but allow wrapping so the panel never clips.
*/
.admin-table__actions{
  width: auto;
  text-align: right;
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-table__actions .admin-link,
.admin-table__actions .admin-link--btn{
  margin: 0;
}

/*
  Small-screen table usability:
  Many admin tables have several columns + long strings (emails, ids, urls).
  On phones this previously looked "cut off" because fixed-width columns and
  nowrap cells forced overflow.

  We keep tables as tables, but allow aggressive wrapping + remove fixed widths
  so content remains readable without horizontal panning.
*/
@media (max-width: 520px){
  .admin-table{ font-size: 12.5px; table-layout: fixed; }
  .admin-table th,
  .admin-table td{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .admin-table__tight{ width: auto; }
  .admin-table__actions{ width: auto; text-align: left; white-space: normal; }
  .admin-table__actions .admin-link,
  .admin-table__actions .admin-link--btn{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 6px;
  }
}

/*
  Mobile-first responsive tables (Providers / Clients)
  On phones, classic multi-column tables become unreadable (each column
  collapses to a few pixels and wraps letter-by-letter). For key admin lists,
  we convert the table into a stacked "card" layout.

  Usage:
    <table class="admin-table admin-table--responsive">
    <td data-label="Email">...</td>
*/
@media (max-width: 640px){
  .admin-table--responsive,
  .admin-table--responsive thead,
  .admin-table--responsive tbody,
  .admin-table--responsive th,
  .admin-table--responsive td,
  .admin-table--responsive tr{
    display: block;
  }

  .admin-table--responsive thead{ display: none; }

  .admin-table--responsive tr{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(2,6,23,.18);
    padding: 12px;
    margin: 12px 0;
  }

  .admin-table--responsive td{
    border: 0;
    padding: 10px 6px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  /*
    Status pills (badges)
    The Status cell can contain multiple badges (e.g., ACTIVE + EMAIL PENDING).
    Since the responsive <td> is a flex row, badges may shrink on very narrow
    screens, causing letter-by-letter wrapping.

    Fix: let the value area wrap and prevent badges from shrinking.
  */
  .admin-table--responsive td[data-label="Status"]{
    flex-wrap: wrap;
  }

  .admin-table--responsive td[data-label="Status"] .admin-badge{
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.78em; /* relative sizing so the pill always fits */
    letter-spacing: .05em;
    padding: 2px 8px;
    margin: 0 8px 6px 0;
  }

  .admin-table--responsive td::before{
    content: attr(data-label);
    flex: 0 0 110px;
    max-width: 110px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(226,232,240,.60);
    padding-top: 2px;
  }

  .admin-table--responsive .admin-row-title{
    gap: 10px;
  }

  .admin-table--responsive .admin-table__actions{
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    gap: 10px;
  }

  .admin-table--responsive .admin-table__actions::before{
    flex: 0 0 110px;
  }
}

/*
  Rails `button_to` renders a <form> which is block-level by default.
  In admin tables, that causes action links/buttons to stack vertically.
  Force inline layout so actions stay on one row.
*/
.admin-table__actions form.button_to {
  display: inline;
  margin: 0;
}

.admin-table__actions form.button_to > div {
  display: inline;
}

.admin-table__actions form.button_to input[type="submit"],
.admin-table__actions form.button_to button {
  display: inline-block;
  vertical-align: middle;
}
.admin-empty { text-align: center; color: rgba(226,232,240,.70); padding: 18px; }

.admin-row-title { display: flex; align-items: center; gap: 10px; }
.admin-row-title__main { font-weight: 900; color: rgba(226,232,240,.95); }
.admin-row-title__sub { font-size: 12px; color: rgba(226,232,240,.65); margin-top: 2px; }
.admin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(6,182,212,.35), rgba(2,132,199,.55));
  border: 1px solid rgba(255,255,255,.18);
}

.admin-muted { color: rgba(226,232,240,.72); }

.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form-box {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.22);
  padding: 14px;
}
.admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-help { margin-top: 6px; font-size: 12px; color: rgba(226,232,240,.62); }
.admin-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.admin-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-kv__label { font-size: 12px; color: rgba(226,232,240,.65); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.admin-kv__value { margin-top: 4px; font-weight: 800; }
.admin-divider { height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; }
.admin-prose { color: rgba(226,232,240,.86); font-size: 14px; line-height: 1.55; }

@media (max-width: 920px) {
  .admin-panel__body { grid-template-columns: 1fr; }
  .admin-nav { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }
  .admin-nav__inner { flex-direction: row; flex-wrap: wrap; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-kv { grid-template-columns: 1fr; }
}



/* --- Admin panel card + utilities --- */
.admin-panel-card{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 18px;
  overflow: hidden;
}

.admin-panel-card__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(2,132,199,.18), rgba(6,182,212,.10));
}

.admin-panel-card__title{
  margin: 0;
  font-size: 20px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
}

.admin-panel-card__subtitle{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(226,232,240,.75);
}

.admin-panel-card__body{
  padding: 16px 18px;
}

.admin-muted{
  color: rgba(226,232,240,.68);
}

.u-right{ text-align:right; }
.u-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Analytics */
.admin-analytics{ display:flex; flex-direction:column; gap: 14px; }

.admin-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.metric{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,132,199,.06);
  border-radius: 16px;
  padding: 12px 14px;
}

.metric--wide{ grid-column: 1 / -1; }

.metric__label{
  font-size: 12px;
  color: rgba(226,232,240,.75);
}

.metric__value{
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}

.metric__chart{ margin-top: 10px; }

.spark{
  display:flex;
  align-items:flex-end;
  height: 64px;
  gap: 3px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.24);
}

.spark__bar{
  flex: 1 1 auto;
  min-width: 4px;
  border-radius: 10px 10px 2px 2px;
  background: linear-gradient(180deg, rgba(56,189,248,.95), rgba(2,132,199,.55));
  opacity: .85;
}

.spark__axis{
  display:flex;
  justify-content:space-between;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(226,232,240,.65);
}

.admin-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-table-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  overflow:hidden;
}

.admin-table-card__title{
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(2,132,199,.06);
}

.admin-table--compact td, .admin-table--compact th{
  padding: 10px 12px;
}

/* Logs */
.admin-log{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(2,6,23,.55);
}

.admin-log__pre{
  margin: 0;
  padding: 14px;
  max-height: 65vh;
  overflow:auto;
  color: rgba(226,232,240,.90);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
}

@media (max-width: 980px){
  .admin-grid-2{ grid-template-columns: 1fr; }
  .admin-metrics{ grid-template-columns: 1fr; }
}


/* Email Templates polish */
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;}
.admin-toolbar__left{flex:1;min-width:0}
.admin-toolbar code{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(226,232,240,.92);font-weight:800;font-size:12px;}
.admin-code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: rgba(226,232,240,.92);}
.admin-ellipsis{max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font-weight:800;font-size:12px;color:rgba(226,232,240,.9);}
.admin-pill--on{border-color: rgba(56,189,248,.32);background: rgba(2,132,199,.18);}
.admin-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.admin-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(226,232,240,.9);text-decoration:none;transition:transform .12s ease, background-color .12s ease;}
.admin-iconbtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);}
.admin-iconbtn--danger{border-color: rgba(239,68,68,.35);background: rgba(239,68,68,.12);}
.admin-iconbtn--danger:hover{background: rgba(239,68,68,.18);}
.admin-divider{height:1px;background:rgba(255,255,255,.10);margin:18px 0;}
.admin-inline--spread{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:12px;}
.admin-form-grid--email{grid-template-columns: repeat(2, minmax(0, 1fr));}
.admin-field--half{grid-column: span 1;}
@media (max-width: 980px){
  .admin-form-grid--email{grid-template-columns: 1fr;}
  .admin-field--half{grid-column: 1 / -1;}
}
.admin-textarea--mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.admin-input--readonly{opacity:.9;cursor:not-allowed;}

/* Financials */
.admin-spark{ display:block; width:100%; height:auto; }
.admin-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
.admin-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.admin-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(226,232,240,.92);font-weight:800;font-size:12px;cursor:pointer;}
.admin-chip:hover{background:rgba(255,255,255,.09);}
.admin-preview{margin-top:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);}
.admin-preview__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.10);}
.admin-preview__frame{width:100%;height:220px;border:0;background:white;}

/* ===== Minimal WYSIWYG (Admin) ===== */
.admin-rich{margin-top:6px;}
.admin-rich-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);}
.admin-rich-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:rgba(226,232,240,.92);cursor:pointer;}
.admin-rich-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px);}
.admin-rich-btn:active{transform:translateY(0);}
.admin-rich-sep{width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 2px;}
.admin-rich-editor{margin-top:10px;min-height:140px;padding:12px 12px;border-radius:12px;background:rgba(255,255,255,0.92);border:1px solid rgba(0,0,0,0.12);color:#0f172a;font-size:14px;line-height:1.55;}
.admin-rich-editor:focus{outline:none;box-shadow:0 0 0 3px rgba(14,165,233,0.20);border-color:rgba(14,165,233,0.55);}
.admin-rich-editor ul{padding-left:22px;margin:10px 0;}
.admin-rich-editor ol{padding-left:22px;margin:10px 0;}
.admin-rich-help{color:rgba(226,232,240,.74);font-size:12px;margin-top:8px;}



/* ===== Email Templates UI fixes (rendering + responsive) ===== */
.admin-form-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 18px;
}

.admin-field__label{
  font-weight: 700;
  margin-bottom: 6px;
}

.admin-input, .admin-textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.admin-input--sm{
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
}

.admin-input--readonly{
  width: auto;
  min-width: 220px;
  background: rgba(255,255,255,0.78);
}

.admin-textarea{
  min-height: 220px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.admin-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-inline--spread{
  justify-content: space-between;
}

.admin-form-grid--email{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

.admin-field--wide{
  grid-column: 1 / -1;
}

.admin-field--right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.admin-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Admin Plans: readability + structure
----------------------------------------------------------------------------*/

.admin-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  color: rgba(226,232,240,.95);
}

.admin-help{
  margin-top: 6px;
  color: rgba(226,232,240,.70);
  font-size: 12px;
  line-height: 1.35;
}

.admin-form-grid--plan{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.admin-form-grid--plan-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.admin-field{ min-width: 0; }
.admin-field--full{ grid-column: 1 / -1; }

@media (max-width: 980px){
  .admin-form-grid--plan,
  .admin-form-grid--plan-2{
    grid-template-columns: 1fr;
  }
}

.admin-plan-status{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.admin-plan-status__title{
  color: rgba(226,232,240,.95);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.admin-plan-status__sub{
  margin-top: 4px;
  color: rgba(226,232,240,.75);
  font-size: 12.5px;
  line-height: 1.35;
}

.admin-actions--sticky{
  position: sticky;
  bottom: 10px;
  z-index: 2;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2,6,23,.28);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.admin-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
}

.admin-token-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-token{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.9);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
.admin-token:hover{ background: rgba(0,0,0,0.28); }
.admin-token__plus{
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  margin-right: 6px;
}

.admin-preview{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}

.admin-preview__hdr{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-preview__title{
  font-weight: 800;
}

.admin-preview__frame{
  width: 100%;
  height: 340px;
  border: 0;
  background: #fff;
}

.admin-icon{
  display: inline-block;
  margin-right: 6px;
  opacity: 0.9;
}

/* smaller screens */
@media (max-width: 980px){
  .admin-form-grid--email{ grid-template-columns: 1fr; }
  .admin-field--right{ justify-content: flex-start; }
}
/* Coachable Floating Assistant (Polly) */


.ai-assistant {
  --ai-bubble-image: none;
  --ai-inputbar-image: none;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.ai-assistant__dock {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(219, 234, 254, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.20);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}

.ai-assistant__dock:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
}

.ai-assistant__dock-avatar {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  object-fit: cover;
}

.ai-assistant__dock-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.95);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18);
}

.ai-assistant__panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 352px;
  max-width: calc(100vw - 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

.ai-assistant.is-open .ai-assistant__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.ai-assistant__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  background: rgba(219, 234, 254, 0.35);
}

.ai-assistant__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-assistant__avatar {
  /* Larger header avatar so the character feels more present */
  width: 54px;
  height: 54px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

/* Stage wrapper for messages + composer (tight, content-forward layout) */
.ai-assistant__stage {
  padding: 10px 12px 12px;
}

.ai-assistant__name {
  font-weight: 800;
  color: #0f172a;
  line-height: 1.05;
}

.ai-assistant__subtitle {
  font-size: 12px;
  color: rgba(30, 41, 59, 0.75);
}

.ai-assistant__panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-assistant__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(15, 23, 42, 0.85);
}

.ai-assistant__icon-btn:hover {
  background: rgba(255,255,255,0.65);
}

.ai-assistant__messages {
  padding: 12px 10px 10px;
  height: 320px;
  overflow: auto;
}

.ai-assistant__msg {
  display: flex;
  margin-bottom: 10px;
}

.ai-assistant__msg--assistant {
  justify-content: flex-start;
}

.ai-assistant__msg--user {
  justify-content: flex-end;
}

.ai-assistant__bubble {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(15, 23, 42, 0.90);
  line-height: 1.35;
  font-size: 14px;
}

/* Polly's speech bubble artwork */
.ai-assistant__msg--assistant .ai-assistant__bubble {
  max-width: 86%;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(220,235,255,0.55));
  border: 1px solid rgba(180, 205, 235, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(12px);
}

.ai-assistant__msg--assistant .ai-assistant__bubble::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}

.ai-assistant__msg--assistant .ai-assistant__bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(220,235,255,0.55));
  border-left: 1px solid rgba(180, 205, 235, 0.55);
  border-bottom: 1px solid rgba(180, 205, 235, 0.55);
  transform: rotate(45deg);
  border-bottom-left-radius: 6px;
}

.ai-assistant__msg--user .ai-assistant__bubble {
  background: rgba(59, 130, 246, 0.20);
}

.ai-assistant__bubble.is-typing {
  opacity: 0.8;
}

.ai-assistant__composer {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(160, 190, 220, 0.35);
}

.ai-assistant__composer-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(160, 190, 220, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(14px);
}

.ai-assistant__input {
  flex: 1;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 14px;
  color: #1d2b3a;
}

.ai-assistant__input::placeholder {
  color: rgba(35, 55, 80, 0.55);
}

.ai-assistant__send {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: rgba(225, 240, 255, 0.75);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

.ai-assistant__send:hover {
  transform: translateY(-1px);
}

.ai-assistant__send:active {
  transform: translateY(0);
}

.ai-assistant__send svg {
  width: 18px;
  height: 18px;
}

.ai-assistant__composer-inner:focus-within {
  border-color: rgba(90, 150, 220, 0.70);
  box-shadow: 0 0 0 4px rgba(90, 150, 220, 0.20), 0 10px 24px rgba(0, 0, 0, 0.10);
}
.ai-assistant__hint {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(30, 41, 59, 0.70);
}

@media (max-width: 480px) {
  .ai-assistant { right: 12px; bottom: 12px; }
  .ai-assistant__panel { width: 332px; }
  .ai-assistant__messages { height: 260px; padding: 10px 10px 10px; }
}
/* Auth pages (Devise sign-up split paths)
   - glass card
   - lotus background (login-bg.png)
*/

.auth-wrap{
  position: relative;
  min-height: calc(100vh - 140px);
  padding: 48px 24px 56px;
  overflow: hidden;
  
}

.auth-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.auth-bg__image{
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(2px) saturate(1.05);
  opacity: 0.35;
  transform: scale(1.04);
}

.auth-bg__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 700px at 20% 30%, rgba(60,160,255,0.16), rgba(0,0,0,0) 60%),
    radial-gradient(700px 600px at 80% 25%, rgba(110,220,255,0.12), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(255,255,255,0.88), rgba(245,250,255,0.90));
}

.auth-bg__orb{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.18;
}
.auth-bg__orb.orb-1{ left: -220px; top: 120px; background: rgba(0,170,255,1); }
.auth-bg__orb.orb-2{ right: -240px; top: 40px; background: rgba(140,230,255,1); }

.auth-grid{
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}

@media (max-width: 960px){
  .auth-grid{ grid-template-columns: 1fr; }
  .auth-hero{ display: none; }
  .auth-wrap{ padding-top: 28px; }
}

.auth-hero{
  padding: 12px 12px 12px 8px;
}

.auth-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(15, 23, 42, 0.82);
}

.auth-hero__title{
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: rgba(10, 22, 41, 0.92);
}

.auth-hero__subtitle{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.72);
  max-width: 46ch;
}

.auth-hero__bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: rgba(15, 23, 42, 0.70);
}

.auth-hero__bullets li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.auth-card{
  border-radius: 22px;
  padding: 26px 26px 18px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.auth-card__title{
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(10, 22, 41, 0.92);
}

.auth-card__subtitle{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.68);
}

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

.auth-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}

.auth-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.78);
  user-select: none;
}

.auth-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.18);
}

.auth-link{
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 120, 255, 0.95);
  text-decoration: none;
}

.auth-link:hover{
  text-decoration: underline;
}

.auth-field{
  display: grid;
  gap: 7px;
}

.auth-label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.78);
}

.auth-input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255,255,255,0.70);
  color: rgba(15, 23, 42, 0.92);
  outline: none;
  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.auth-input:focus{
  border-color: rgba(0, 140, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 140, 255, 0.14);
  transform: translateY(-1px);
}

.auth-hint{
  font-size: 12px;
  color: rgba(15, 23, 42, 0.56);
}

.auth-btn{
  margin-top: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 18px 40px rgba(0,120,255,0.24);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.auth-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 46px rgba(0,120,255,0.28);
}

.auth-btn:active{
  transform: translateY(0px);
  box-shadow: 0 14px 30px rgba(0,120,255,0.22);
}

.auth-footer{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: grid;
  gap: 10px;
}

.auth-alt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.70);
}

.auth-links{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.auth-link{
  color: rgba(0, 120, 210, 0.92);
  font-weight: 600;
  text-decoration: none;
}

.auth-link:hover{
  text-decoration: underline;
}

.auth-dot{
  color: rgba(15, 23, 42, 0.35);
}
/* Provider Calendar: click-away tooltip for appointment details (NOT a modal). */


.appt-tooltip{
  position: absolute;
  z-index: 9999;
  max-width: 320px;
  width: max-content;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.appt-tooltip.is-bottom{
  position: fixed;
  max-width: none;
  width: auto;
}

.appt-tooltip__arrow{
  position: absolute;
  /* Default: tooltip is shown ABOVE the clicked item, so the arrow should
     point DOWN toward the anchor (arrow sits at the bottom of tooltip). */
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(255,255,255,0.92);
  border-right: 1px solid rgba(37, 99, 235, 0.18);
  border-bottom: 1px solid rgba(37, 99, 235, 0.18);
}

.appt-tooltip.is-below .appt-tooltip__arrow{
  /* When tooltip is placed BELOW the anchor, arrow sits at the top and
     points UP toward the anchor. */
  bottom: auto;
  top: -7px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(37, 99, 235, 0.18);
  border-top: 1px solid rgba(37, 99, 235, 0.18);
}

.appt-tooltip__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* Inline (+) action inside tooltip */
.appt-tooltip__plus{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.appt-tooltip__plus span{
  font-size: 20px;
  font-weight: 700;
  color: rgba(15,23,42,0.70);
  line-height: 1;
}

.appt-tooltip__body{ padding: 12px 14px; }

.appt-tooltip__title{
  font-weight: 800;
  color: #0f172a;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 4px;
}

.appt-tooltip__meta{
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 10px;
}

.appt-tooltip__chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.appt-tooltip__details{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appt-tooltip__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(148,163,184,0.06);
}

.appt-tooltip__label{
  font-size: 11px;
  font-weight: 800;
  color: rgba(15,23,42,0.70);
  line-height: 14px;
  flex: 0 0 auto;
  padding-top: 1px;
}

.appt-tooltip__value{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.appt-tooltip__value--note{
  justify-content: flex-start;
  color: #0f172a;
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
  white-space: pre-wrap;
}

.appt-tooltip__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(59,130,246,0.10);
  color: #0f172a;
  font-weight: 800;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.appt-tooltip__btn:hover{
  background: rgba(59,130,246,0.16);
}

.appt-tooltip__btn--ghost{
  background: rgba(255,255,255,0.55);
}

.appt-tooltip__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(59,130,246,0.08);
  color: #0f172a;
  font-weight: 700;
  font-size: 11px;
}

.appt-tooltip__chip--muted{
  background: rgba(148,163,184,0.10);
  border-color: rgba(148,163,184,0.22);
  color: #334155;
}

.appt-tooltip__actions{
  margin-top: 6px;
}

.appt-tooltip__link{
  font-weight: 800;
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}

.appt-tooltip__link:hover{ text-decoration: underline; }
/* Calendar reminder popup (in-page) */


.calendar-reminder{
  position: fixed;
  right: 18px;
  /* Move reminders to upper-right so they don't hide behind Polly AI chat */
  top: 92px;
  bottom: auto;
  z-index: 6000;
  width: 320px;
  max-width: calc(100vw - 36px);
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(200, 215, 235, 0.85);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.18),
    0 2px 10px rgba(59, 130, 246, 0.10),
    0 0 0 1px rgba(255,255,255,0.35) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
}

/* Mobile: keep it visible under the fixed header and away from screen cutouts */
@media (max-width: 640px){
  .calendar-reminder{
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: 12px;
    max-width: calc(100vw - 24px);
  }
}

.calendar-reminder__header{
  display:flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.calendar-reminder__title{
  font-weight: 800;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-reminder__when{
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}

.calendar-reminder__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.calendar-reminder__btn{
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(255,255,255,0.78);
  color: #334155;
}

.calendar-reminder__btn.is-ghost{
  background: rgba(255,255,255,0.65);
}

.calendar-reminder__btn.is-primary{
  border: 0;
  background: #3b82f6;
  color: white;
}
/* Goals & Progress (Client Portal) – trainline roadmap */


.goals-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

.goals-panel-head__actions{ display:flex; gap: 8px; align-items:center; }

.goals-new{
  margin-top: 12px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.10);
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}

.goals-new__title{
  font-weight: 900;
  color: rgba(15, 23, 42, 0.90);
}

.goals-new__grid{
  display:grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 10px;
  margin-top: 10px;
}

.goals-new__field--full{ grid-column: 1 / -1; }

.goals-new__actions{
  display:flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.goals-empty{
  margin-top: 12px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(255,255,255,0.50);
}

.goals-empty__title{
  font-weight: 900;
  color: rgba(15, 23, 42, 0.88);
}

.goals-train-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}

.goal-train-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(37, 99, 235, 0.14);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.10);
  border-radius: 18px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(10px);
}

.goal-train-head{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content: space-between;
}

.goal-train-head__left{ flex: 1 1 auto; min-width: 240px; }

.goal-train-actions{ display:flex; gap: 6px; align-items:center; flex-wrap: wrap; }

.goal-edit-form{ margin-top: 6px; }

.goal-edit-form__grid{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 8px;
}

.goal-edit-form__grid textarea{ grid-column: 1 / -1; }

.goal-edit-form__actions{
  display:flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.goal-inline-form--edit .input{ flex: 1 1 240px; min-width: 180px; }

.goal-train-title{
  font-weight: 800;
  font-size: 18px;
  color: #0f172a;
  line-height: 1.2;
}

.goal-train-desc{
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.76);
  font-size: 13px;
}

.goal-train-meta{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.goal-train-chip{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #0f172a;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.goal-train-chip--soft{
  font-weight: 700;
  color: rgba(15, 23, 42, 0.78);
}

.goal-trainline{
  margin-top: 12px;
  position: relative;
  padding: 14px 10px 10px;
}

.goal-trainline__track{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 26px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.goal-trainline__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.55);
}

.goal-trainline__stops{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.goal-stop{
  flex: 1 1 5;
  min-width: 64px;
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  position: relative;
}

.goal-stop__form{ display:inline; }

.goal-stop__btn,
.goal-stop__dot{
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  background: rgba(255,255,255,0.95);
  border: 2px solid rgba(15, 23, 42, 0.30);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.14);
  border-radius: 999px;
}

.goal-stop.is-complete .goal-stop__btn,
.goal-stop.is-complete .goal-stop__dot{
  background: #90EE90;
  top:7px;
  border-color: rgba(16, 122, 16, 0.55);
}

/* Tiny check mark for completed milestones + tasks */
.goal-stop.stop--milestone.is-complete .goal-stop__btn::after,
.goal-stop.stop--milestone.is-complete .goal-stop__dot::after,
.goal-stop.stop--task.is-complete .goal-stop__btn::after,
.goal-stop.stop--task.is-complete .goal-stop__dot::after{
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 12px;
  font-weight: 900;
  color: rgba(9, 61, 9, 0.85);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  pointer-events: none;
}

.goal-stop.stop--task.is-complete .goal-stop__btn::after,
.goal-stop.stop--task.is-complete .goal-stop__dot::after{
  font-size: 10px;
}

.goal-stop.is-open .goal-stop__btn,
.goal-stop.is-open .goal-stop__dot{
  background: rgba(255,255,255,0.92);
}

.goal-stop.is-next .goal-stop__btn{
  animation: goalStopPulse 1.15s ease-in-out infinite;
}

@keyframes goalStopPulse{
  0%   { transform: translateY(0); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.14); }
  50%  { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18); }
  100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.14); }
}

.goal-stop__label{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.78);
  line-height: 1.25;
  max-width: 140px;
}

/* Size variants */
.goal-stop.stop--start .goal-stop__btn,
.goal-stop.stop--start .goal-stop__dot{ width: 26px; height: 26px; }

.goal-stop.stop--micro .goal-stop__btn,
.goal-stop.stop--micro .goal-stop__dot{ width: 12px; height: 12px; }

.goal-stop.stop--task .goal-stop__btn,
.goal-stop.stop--task .goal-stop__dot{ width: 16px; height: 16px; }

.goal-stop.stop--milestone .goal-stop__btn,
.goal-stop.stop--milestone .goal-stop__dot{ width: 22px; height: 22px; }

.goal-stop.stop--finish .goal-stop__btn,
.goal-stop.stop--finish .goal-stop__dot{ width: 26px; height: 26px; background: #90EE90; }

/* Tooltips for tasks & micro-tasks (keep dots compact) */
.goal-stop.has-tooltip{ position: relative; }
.goal-stop.has-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.16);
  font-size: 12px;
  color: rgba(15, 23, 42, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 10;
}

.goal-stop.has-tooltip:hover::after,
.goal-stop.has-tooltip:focus-within::after{
  opacity: 1;
}

.goal-trainline__hint{
  margin-top: 10px;
  font-size: 12px;
}

.goal-train-details{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.55);
  padding: 10px 12px;
}

.goal-train-details__summary{
  cursor: pointer;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.86);
}

.goal-train-details__body{ margin-top: 12px; }

.goal-inline-form{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.goal-inline-form .input{
  flex: 1 1 260px;
  min-width: 220px;
}

.goal-train-section{
  margin-bottom: 10px;
}

.goal-train-section__title{
  font-weight: 800;
  margin-bottom: 8px;
  color: rgba(15, 23, 42, 0.86);
}

.goal-train-milestone{
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  padding-top: 12px;
  margin-top: 12px;
}

.goal-train-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.goal-train-row__left{ display:flex; gap:10px; align-items:center; }

.goal-train-row__title{ font-weight: 750; color:#0f172a; }

.goal-train-row__right{ display:flex; gap: 6px; align-items:center; flex-wrap: wrap; }

.goal-train-row__badge{
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: rgba(15, 23, 42, 0.86);
}

.goal-train-row__badge--task{
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.12);
}

.goal-train-row__badge--micro{
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.10);
}

.goal-train-sub{
  margin-top: 10px;
  padding-left: 18px;
}

.goal-train-task{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

.goal-train-row--micro{
  margin-top: 8px;
}

@media (max-width: 720px){
  .goal-stop{ min-width: 54px; }
  .goal-stop__label{ max-width: 110px; }
  .goal-train-meta{ justify-content:flex-start; }
  .goal-train-head{ flex-direction: column; }
  .goals-panel-head{ flex-direction: column; }
  .goals-new__grid{ grid-template-columns: 1fr; }
  .goal-edit-form__grid{ grid-template-columns: 1fr; }
  .goal-trainline{ padding-left: 6px; padding-right: 6px; }
}

/* Coaching Resources public pages (index + show)
   Uses existing frontpage glass theme, adds resource-specific layout polish.
*/




.cr-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px 54px;

  position: relative;
  z-index: 1;
}


.cr-hero{
  position: relative;
  margin: 28px auto 18px;
  padding: 28px 18px;
}

.cr-hero .cr-hero-inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.cr-title{
  margin: 10px 0 10px;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.cr-subtitle{
  margin: 0 auto;
  max-width: 780px;
  color: rgba(71,85,105,.92);
  font-size: 15px;
  line-height: 1.55;
}

.cr-toolbar{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cr-back{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.9);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.cr-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(248,250,252,.65);
  color: rgba(15,23,42,.86);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

.cr-pill--brand{
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(14,165,233,.12));
  border-color: rgba(59,130,246,.32);
  color: rgba(29,78,216,.95);
}

.cr-pill--muted{
  color: rgba(71,85,105,.92);
  font-weight: 700;
}

.cr-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}

@media (max-width: 920px){
  .cr-grid{ grid-template-columns: 1fr; }
}

.cr-panel{
  padding: 18px;
}

.cr-section-title{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(100,116,139,.95);
  font-weight: 800;
}

.cr-body{
  color: rgba(51,65,85,.94);
  line-height: 1.65;
  font-size: 14px;
}

.cr-kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 12px;
  margin-top: 12px;
}

.cr-kv .k{
  color: rgba(100,116,139,.95);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cr-kv .v{
  color: rgba(15,23,42,.86);
  font-weight: 600;
  font-size: 13px;
}

.cr-download-card{
  padding: 18px;
}

.cr-download-card .cr-dl-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cr-download-card .cr-dl-label{
  color: rgba(100,116,139,.95);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cr-download-card .cr-price{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(148,163,184,.35);
}

.cr-download-card .cr-action{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.cr-btn{
  display:inline-flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.28);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .01em;
}

.cr-btn--primary{
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 16px 40px rgba(3,105,161,.25);
}

.cr-btn--secondary{
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.92);
}

.cr-fileline{
  font-size: 12px;
  color: rgba(100,116,139,.92);
  margin-top: 10px;
  word-break: break-word;
}

.cr-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.cr-card-main{
  margin-left:10px;  
}

.cr-resource-card{
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 15px;
  
  border-radius: 28px;
  padding: 18px 22px;
  background: linear-gradient(
    140deg,
    rgba(248, 250, 252, 0.86),
    rgba(226, 232, 240, 1)
  );
  box-shadow: rgba(15, 23, 42, 0.22) 0px 22px 60px,
    rgba(255, 255, 255, 0.62) 0px 0px 0px 1px inset;
  border: 1px solid rgba(148, 163, 184, 0.65);
              
}

.cr-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cr-card-title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(15,23,42,.95);
}

.cr-card-title a{
  color: inherit;
  text-decoration: none;
}

.cr-card-desc{
  margin: 0;
  color: rgba(71,85,105,.95);
  font-size: 13px;
  line-height: 1.5;
}

.cr-card-foot{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.cr-link{
  color: rgba(29,78,216,.95);
  font-weight: 900;
  text-decoration: none;
  font-size: 13px;
}

.cr-muted{
  color: rgba(100,116,139,.92);
  font-size: 12px;
  font-weight: 700;
}



/* Category pills (tag filter) */
.cr-categories{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cr-cat{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(248,250,252,.68);
  color: rgba(30,41,59,.88);
}

.cr-cat:hover{
  background: rgba(255,255,255,.75);
}

.cr-cat.is-active{
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.16));
  border-color: rgba(59,130,246,.34);
  color: rgba(29,78,216,.95);
}

/* Cards: thumbnail + content */
.cr-card-top{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 560px){
  .cr-card-top{ grid-template-columns: 92px 1fr; }
}

.cr-thumb{
  width: 110px;
  height: 110px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.55);
  overflow:hidden;
  position: relative;
  cursor: pointer;
  padding: 0;
}

.cr-thumb__placeholder{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  opacity: .55;
  pointer-events: none;
}

.cr-thumb.has-img .cr-thumb__placeholder{ display:none; }
.cr-thumb.is-broken img{ display:none; }
.cr-thumb.is-broken .cr-thumb__hint{ display:none; }

.cr-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

.cr-thumb__hint{
  position:absolute;
  bottom: 8px;
  left: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

.cr-thumb--empty{
  cursor: default;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cr-thumb__icon{
  font-size: 26px;
  opacity: .55;
}

.cr-tagline{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.cr-tag{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(248,250,252,.6);
  font-size: 11px;
  font-weight: 800;
  color: rgba(71,85,105,.92);
}

/* Show page: preview hero */
.cr-preview-hero{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.55);
  overflow:hidden;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  position: relative;
}

.cr-preview-hero img{
  width: 100%;
  /* Worksheets are often portrait; use contain to avoid cutting off the content */
  height: 240px;
  object-fit: contain;
  display:block;
  background: rgba(226,232,240,.55);
}

.cr-preview-hero__hint{
  position:absolute;
  bottom: 10px;
  left: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

/* Preview Modal */
.cr-modal-open{ overflow: hidden; }

.cr-preview-modal{
  position: fixed;
  inset: 0;
  z-index: 100000;  /* must sit above fixed nav + other modals */
}

.cr-preview-modal[hidden]{ display:none; }

.cr-preview-modal__backdrop{
  position:absolute;
  inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}

.cr-preview-modal__dialog{
  position: relative;
  width: min(980px, calc(100% - 24px));
  margin: 40px auto;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(248,250,252,.92);
  box-shadow: rgba(15, 23, 42, 0.35) 0px 30px 80px;
  overflow:hidden;
}

@media (max-width: 640px){
  .cr-preview-modal__dialog{ margin: 18px auto; }
}

.cr-preview-modal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.55);
}

.cr-preview-modal__title{
  font-weight: 900;
  color: rgba(15,23,42,.9);
  letter-spacing: -.01em;
}

.cr-preview-modal__close{
  border: 1px solid rgba(148,163,184,.38);
  background: rgba(255,255,255,.55);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: rgba(15,23,42,.75);
}

.cr-preview-modal__body{
  padding: 16px;
}

.cr-preview-frame{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.30);
  overflow:hidden;
  background: rgba(226,232,240,.55);
}

.cr-preview-frame img{
  width: 100%;
  height: auto;
  display:block;
  max-height: 72vh;
  object-fit: contain;
  background: rgba(226,232,240,.55);
}

.cr-preview-error{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
  visibility: hidden;
  text-align:center;
  font-weight: 900;
  color: rgba(15,23,42,.75);
}

.cr-watermark{
  position:absolute;
  inset: 0;
  pointer-events: none;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(-12deg);
  opacity: .38;
}

.cr-watermark__line{
  position:absolute;
  width: 140%;
  text-align:center;
  font-weight: 1000;
  letter-spacing: .18em;
  color: rgba(15,23,42,.65);
  text-transform: uppercase;
  font-size: 12px;
  mix-blend-mode: multiply;
}

.cr-watermark__line:nth-child(1){ top: 44%; }
.cr-watermark__line:nth-child(2){ top: 52%; }

.cr-preview-note{
  margin-top: 10px;
  color: rgba(71,85,105,.9);
  font-size: 12px;
  line-height: 1.5;
}

/* ===== Coachable Embedded Checkout (Stripe) ===== */

.checkout-page .checkout-hero{
  /* match frontpage "hero" vibe */
  background-image: image-url(/assets/bgmain-be991d00dce96110d6b410f9e234dbb33725c6c765ad3932114a9f0b6d26a45b.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.checkout-page .checkout-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(241,245,249,.86), rgba(226,232,240,.92));
}

.checkout-page .checkout-hero{
  position: relative;
}

.checkout-page .checkout-hero > .section-inner{
  position: relative;
  z-index: 1;
}

.checkout-panel{
  max-width: 920px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 18px 18px;
  background: linear-gradient(140deg, rgba(248,250,252,0.86), rgba(226,232,240,1));
  box-shadow: rgba(15,23,42,0.22) 0px 22px 60px;
}

.checkout-body{
  margin-top: 14px;
  border-top: 1px solid rgba(148,163,184,0.35);
  padding-top: 14px;
}

.checkout-config{
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.62);
  padding: 16px;
}

.checkout-config__title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}

.checkout-config__subtitle{
  margin-top: 6px;
  color: rgba(51,65,85,.92);
  font-size: 13px;
  line-height: 1.55;
}

.checkout-config__steps{ margin-top: 12px; display: grid; gap: 10px; }

.checkout-config__step{ display:flex; gap: 10px; align-items:flex-start; }

.checkout-config__stepnum{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(248,250,252,.9);
  color: rgba(15,23,42,.85);
  flex: 0 0 auto;
}

.checkout-config__stepbody{
  color: rgba(51,65,85,.94);
  font-size: 13px;
  line-height: 1.55;
}

.checkout-config__note{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.25);
  color: rgba(51,65,85,.9);
  font-size: 12.5px;
  line-height: 1.55;
}

.cec-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cec-title{
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
}

.cec-subtitle{
  margin-top: 2px;
  color: rgba(51,65,85,.94);
  font-size: 13px;
  line-height: 1.5;
}

.cec-trust{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cec-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.58);
  color: rgba(15,23,42,.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.cec-price{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.62);
  font-weight: 900;
  color: rgba(15,23,42,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* Embedded Checkout page layout (uses login-bg.png via auth-bg styles) */
.cec-wrap{
  /* Decorative overlay (the real background image is handled by .auth-bg) */
  position:absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,189,248,.18), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(99,102,241,.12), transparent 40%),
    radial-gradient(circle at 60% 85%, rgba(34,211,238,.14), transparent 35%);
  filter: saturate(0.35);
  opacity: .85;
}

.cec-container{
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Checkout return wrapper: keep the panel centered even if a parent layout uses
   unexpected alignment rules. */
.cec-center{
  width: 100%;
  display: flex;
  justify-content: center;
}

.cec-center .cec-container{
  flex: 1 1 auto;
}

.cec-card{
  border-radius: 28px;
  padding: 18px 18px;
  background: linear-gradient(140deg, rgba(248,250,252,0.86), rgba(226,232,240,1));
  box-shadow: rgba(15,23,42,0.22) 0px 22px 60px;
  border: 1px solid rgba(148,163,184,.22);
}

.cec-divider{
  margin-top: 14px;
  border-top: 1px solid rgba(148,163,184,0.35);
  padding-top: 14px;
}

.cec-footer{
  margin-top: 14px;
}

.coachable-embedded-checkout-wrap{
  position: relative;
  max-width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.45);
  overflow: hidden;
}

.coachable-embedded-checkout{
  padding: 10px;
}

/* ---- Checkout (Resource Purchase) polish ---- */
.cec-side{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cec-side__card{
  border-radius: 28px;
  padding: 18px 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: rgba(15, 23, 42, 0.08) 0px 18px 45px;
  backdrop-filter: blur(10px);
}

.cec-side__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  color: #0f172a;
}

.cec-side__subtitle{
  margin: 6px 0 0;
  color: rgba(15,23,42,0.72);
  font-size: 14px;
  line-height: 1.5;
}

.cec-side__bullets{
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.cec-side__bullets li{
  position: relative;
  padding-left: 22px;
  color: rgba(15,23,42,0.70);
  font-size: 14px;
  line-height: 1.4;
}

.cec-side__bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,116,212,0.22);
  border: 1px solid rgba(0,116,212,0.25);
}

.cec-side__hint{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(15,23,42,0.55);
}

.cec-side__hint strong{
  color: rgba(15,23,42,0.75);
}

.cec-return__card{
  max-width: 720px;
  margin: 0 auto;
}

.cec-check{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.25);
  color: #0f172a;
  font-weight: 800;
}

.cec-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248,250,252,0.72);
  border-top: 1px solid rgba(148,163,184,0.28);
  backdrop-filter: blur(10px);
}

.cec-loading__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cec-spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid rgba(2,132,199,0.20);
  border-top-color: rgba(2,132,199,0.85);
  animation: cec-spin 900ms linear infinite;
}

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

.cec-muted{
  margin: 0;
  font-size: 13px;
  color: rgba(15,23,42,0.62);
}

@media (max-width: 960px){
  .cec-side__title{ font-size: 20px; }
}

/* Loading shimmer */
.coachable-embedded-checkout-wrap .cec-loader{
  position: absolute;
  inset: 0;
  padding: 18px;
  display: none;
  background: linear-gradient(180deg, rgba(248,250,252,.72), rgba(226,232,240,.72));
}

.coachable-embedded-checkout-wrap.cec--loading .cec-loader{
  display:block;
}

.coachable-embedded-checkout-wrap.cec--loading #coachable-embedded-checkout{
  visibility: hidden;
}

/* Optional overlay (used on /checkout/resources/:id) */
.coachable-embedded-checkout-wrap .cec-loading{ display:none; }
.coachable-embedded-checkout-wrap.cec--loading .cec-loading{ display:flex; }

.cec-loader__row{
  height: 18px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(226,232,240,.35), rgba(226,232,240,.85), rgba(226,232,240,.35));
  background-size: 220% 100%;
  animation: cecShimmer 1.2s ease-in-out infinite;
}

.cec-loader__row--short{ width: 60%; }

@keyframes cecShimmer{
  0%{ background-position: 0% 0%; }
  100%{ background-position: -200% 0%; }
}

@media (max-width: 520px){
  .cec-title{ font-size: 20px; }
  .cec-container{ padding: 0 14px; }
  .coachable-embedded-checkout{ padding: 6px; }
}


/* Resources pages: reuse the auth/login blurred background */
.cr-auth-wrap{
  padding-top: 34px;
  padding-bottom: 60px;

}


/* ------------------------------
   Checkout Return Page (post-payment)
--------------------------------- */
.cec-return__icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(148,163,184,0.55);
  box-shadow: rgba(15,23,42,0.18) 0px 18px 50px;
}

.cec-return__icon--pending{
  font-size: 0;
  background: rgba(255,255,255,0.65);
  position: relative;
}

.cec-return__icon--pending:before{
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid rgba(15,23,42,0.18);
  border-top-color: rgba(2,132,199,0.9);
  animation: cecSpin 0.9s linear infinite;
}

@keyframes cecSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cec-return__actions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cec-return__note{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(30,41,59,0.78);
}

/* Hide the left-side "Navigation" dashboard card on mobile/tablet.
   Mobile uses the drawer navigation for a unified UX. */

@media (max-width: 1024px){
  .dash-nav-card{ display:none !important; }
}
/* Coachable Dashboards – shared look for client & provider
   Uses your existing brand palette where possible. */

:root{
  --brand-500:#06b6d4;   /* cyan / teal */
  --brand-600:#0284c7;   /* blue-leaning teal */
  --brand-700:#0369a1;   /* deep blue */

  --ink-950:#0b1220;
  --ink-900:#111827;
  --ink-700:#374151;
  --ink-500:#6b7280;
  --ink-300:#d1d5db;
  --ink-200:#e5e7eb;
  --ink-100:#f3f4f6;
  --white:#ffffff;

  --shell-bg: radial-gradient(circle at top left,#0f172a,#020617 46%,#020617 100%);
  --panel-bg: rgba(15,23,42,.83);
  --panel-soft: rgba(15,23,42,.74);
  --panel-border: rgba(148,163,184,.36);
  --blur: 18px;

  --gutter: 18px;
}

/* Root wrapper for dashboards */
.dashboard-wrap{

  /* Typography: keep dashboards visually consistent and modern.
     Browsers often use different default fonts for buttons/inputs vs body text.
  */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.65), rgba(255,255,255,.55) 45%, rgba(226,232,240,.75) 90%),
    url(/assets/steps-bg-leaves.png);

  max-width:1200px;
  margin:40px auto 60px;
  padding:24px 24px 32px;
  border-radius:28px;

  /* FROSTED WHITE PANEL STYLE (matches main page cards) */
  border:1px solid rgba(148,163,184,.35);
  backdrop-filter:blur(22px) saturate(160%);

  color:var(--ink-900);
  position:relative;
  overflow:hidden;
}

/* Mobile/tablet: the top nav becomes position:fixed (see frontpage.css @max-width:1024px).
   Add extra top spacing so dashboard content isn't clipped under the header. */
@media (max-width: 1024px){
  .dashboard-wrap{
    /* 40px (desktop) + ~64px header clearance */
    margin-top: 104px;
  }
}

/* Ensure controls inherit the same typography inside dashboards/modals */
.dashboard-wrap input,
.dashboard-wrap select,
.dashboard-wrap textarea,
.dashboard-wrap button,
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-card button{
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
}

/* Subtle typographic rhythm for common headings on provider dashboards */
.dashboard-wrap .section-title,
.dashboard-wrap h1,
.dashboard-wrap h2,
.dashboard-wrap h3{
  letter-spacing: -0.01em;
}

/* Provider dashboard: lotus background behind frosted shell */
.dash-lotus-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden; /* prevent horizontal scroll from blurred/scaled layers */
}
.dash-lotus-bg__image{
  position: absolute;
  inset: 0; /* do NOT use negative inset here (causes horizontal scroll) */
  background-size: cover;
  background-position: center;
  background-image: url(/assets/login-bg.png);
  /* Keep the lotus visible: light blur + a touch more saturation */
  filter: blur(23px) saturate(1.18) contrast(1.05);
  opacity: 0.38;
  transform: scale(1.06);
}
.dash-lotus-bg__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 700px at 20% 30%, rgba(60,160,255,0.16), rgba(0,0,0,0) 20%),
    radial-gradient(700px 600px at 80% 25%, rgba(110,220,255,0.12), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(255,255,255,0.66), rgba(245,250,255,0.76));
}
.dash-lotus-bg__orb{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(46px);
  opacity: 0.18;
}
.dash-lotus-bg__orb.orb-1{ left: -220px; top: 120px; background: rgba(0,170,255,1); }
.dash-lotus-bg__orb.orb-2{ right: -240px; top: 40px; background: rgba(140,230,255,1); }

/* Ensure the dashboard shell sits above the lotus bg */
.dashboard-wrap{
  z-index: 1;
}

/* Lotus variant: let lotus show through (remove leaf texture) */
.dashboard-wrap--lotus{
  background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.70), rgba(255,255,255,.60) 45%, rgba(226,232,240,.78) 90%);
}
.dashboard-wrap::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 10% 0%,rgba(56,189,248,.12),transparent 55%),
    radial-gradient(circle at 90% 0%,rgba(129,140,248,.10),transparent 52%);
  opacity:.9;
  filter:blur(38px);
  pointer-events:none;
}
.dashboard-wrap::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:27px;
  background:radial-gradient(circle at top,rgba(255,255,255,.6),rgba(248,250,252,.9));
  mix-blend-mode:screen;
  opacity:.7;
  pointer-events:none;
}
.dashboard-wrap > *{
  position:relative;
  z-index:1;
}

/* Top bar */
.dash-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.dash-title{
  display:flex;
  align-items:center;
  gap:14px;
}
.avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-weight:700;
  color:#0b1120;
}

/* Uploaded avatar images should fill the circle */
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Avatar fallback (handles broken/missing images gracefully) */
.avatar.avatar-smart{
  position:relative;
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(226,232,240,0.95);
}
.avatar.avatar-smart .avatar-initial{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  letter-spacing:-.01em;
  color:#0f172a;
  user-select:none;
}
.avatar.avatar-smart.avatar--has-img .avatar-initial{
  opacity:0;
}
.avatar.avatar-smart img,
.avatar.avatar-smart .avatar-emoji{
  position:relative;
  z-index:1;
}
.dash-title h1{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--ink-900);
}
.dash-subtle{
  margin:3px 0 0;
  font-size:13px;
  color:var(--ink-500);
}
.dash-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Buttons */
.btn-mini{
  font-size:13px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.75);
  background:rgba(255,255,255,.7);
  color:var(--ink-900);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  backdrop-filter:blur(10px);
}
.btn-mini:hover{
  background:#ffffff;
  border-color:rgba(148,163,184,.9);
  color:#020617;
}

/* Tiny decision buttons (used for Yes/No in session request cards) */
.btn-mini--yn{
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  min-width: 72px;
  justify-content:center;
  gap: 6px;
}
.btn-mini--yes{ border-color: rgba(16,185,129,0.48) !important; background: rgba(16,185,129,0.12) !important; }
.btn-mini--yes:hover{ background: rgba(16,185,129,0.16) !important; }
.btn-mini--no{ border-color: rgba(239,68,68,0.55) !important; background: rgba(239,68,68,0.10) !important; }
.btn-mini--no:hover{ background: rgba(239,68,68,0.14) !important; }
.btn-mini.btn-cta{
  background: linear-gradient(135deg, rgba(2,132,199,.22), rgba(6,182,212,.12));
  border-color: rgba(2,132,199,.35);
  box-shadow: 0 10px 26px rgba(2,132,199,.14);
}

/* Primary button (non-pill) */
.btn-primary{
  font-size:13px;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.75);
  background:rgba(255,255,255,.82);
  color:var(--ink-900);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:900;
  letter-spacing:0.01em;
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.btn-primary:hover{
  background:#ffffff;
  border-color:rgba(148,163,184,.9);
  color:#020617;
}
.btn-primary.btn-cta{
  background: linear-gradient(135deg, rgba(2,132,199,.26), rgba(6,182,212,.14));
  border-color: rgba(2,132,199,.42);
  box-shadow: 0 12px 30px rgba(2,132,199,.18);
}

/* Edit profile (Provider Dashboard header) */
.btn-mini.btn-edit-profile{
  font-weight: 800;
  border-color: rgba(59,130,246,.35);
  background: rgba(219,234,254,.58);
  color: rgba(30,64,175,.95);
  box-shadow: 0 10px 24px rgba(2,132,199,.10);
}
.btn-mini.btn-edit-profile:hover{
  background: rgba(219,234,254,.78);
  border-color: rgba(59,130,246,.45);
}
.btn-mini.btn-edit-profile i{ font-size: 13px; }

/* =====================
   Upcoming sessions (client dashboard)
   ===================== */
.upcoming-sessions .upcoming-sessions-list{ display:flex; flex-direction:column; gap:10px; }

.upcoming-session-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.upcoming-session-row:hover{
  border-color: rgba(148,163,184,.48);
  background: rgba(255,255,255,.9);
}
.upcoming-session-row.is-invite{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.05);
}

.upcoming-when{
  min-width: 150px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.upcoming-date{ font-weight:700; font-size:14px; color: var(--ink-900); }
.upcoming-time{ font-size:12px; color: var(--ink-500); font-weight:600; }
.upcoming-time-sep{ margin:0 6px; color: rgba(100,116,139,.9); }

.upcoming-main{ flex: 1 1 auto; min-width: 0; }
.upcoming-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
  color: var(--ink-900);
}
.upcoming-badge{
  font-size:11px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.25);
  background: rgba(59,130,246,.10);
  color: #1d4ed8;
}

/* Status coloring for upcoming sessions (client portal) */
.upcoming-badge[data-upcoming-status="confirmed"]{
  border-color: rgba(16,185,129,.38);
  background: rgba(16,185,129,.12);
  color: #047857;
}
.upcoming-badge[data-upcoming-status="requested"],
.upcoming-badge[data-upcoming-status="invite"]{
  border-color: rgba(59,130,246,.32);
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
}
.upcoming-badge[data-upcoming-status="cancelled"]{
  border-color: rgba(148,163,184,.55);
  background: rgba(148,163,184,.14);
  color: rgba(71,85,105,.95);
}

.upcoming-ico{
  width:18px;
  height:18px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(51,65,85,.78);
  background: rgba(241,245,249,.8);
  border: 1px solid rgba(148,163,184,.35);
}

.upcoming-avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.95);
  color: rgba(30,41,59,.92);
}
.upcoming-avatar[data-upcoming-avatar="confirmed"]{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.12);
  color: #065f46;
}
.upcoming-avatar[data-upcoming-avatar="requested"],
.upcoming-avatar[data-upcoming-avatar="invite"]{
  border-color: rgba(59,130,246,.32);
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
}
.upcoming-avatar[data-upcoming-avatar="cancelled"]{
  border-color: rgba(148,163,184,.55);
  background: rgba(148,163,184,.14);
  color: rgba(71,85,105,.95);
}

.upcoming-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 340px;
}

.upcoming-linkchip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.75);
  color: rgba(51,65,85,.9);
  font-weight:700;
  font-size:11px;
}

.upcoming-actions .btn-mini{
  box-shadow: none;
}
.upcoming-actions .btn-mini.btn-mini--yes,
.upcoming-actions .btn-mini.btn-mini--no{
  border-width: 1px;
}

.upcoming-meta{
  margin-top:3px;
  font-size:12px;
  color: var(--ink-500);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.upcoming-meta .dot{ color: rgba(100,116,139,.65); }

.upcoming-desc{
  margin-top:6px;
  font-size:13px;
  color: rgba(30,41,59,.92);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.upcoming-desc.is-empty{ color: rgba(100,116,139,.9); font-style: italic; }

@media (max-width: 640px){
  .upcoming-session-row{ flex-wrap:wrap; }
  .upcoming-when{ min-width: 0; width: 100%; }
  .upcoming-session-row .list-actions{ width:100%; justify-content:flex-start; }
}

/* Layout: sidebar + main */
.dash-layout,
.dash-grid{
  display:grid;
  grid-template-columns: 270px minmax(0,1fr);
  gap:26px;
  align-items:flex-start;
}
@media (max-width: 860px){
  .dash-layout,
  .dash-grid{
    grid-template-columns: minmax(0,1fr);
  }
}

/* Sidebar */
.dash-sidebar,
.dash-side{
  background:rgba(255,255,255,.02);
  border-radius:22px;
  padding:0;
}

/* Titles used in sidebar cards & sections */
.dash-sidebar h2,
.dash-side h2,
.dash-card .card-title{
  margin:0 0 10px;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-500);
}

/* Section titles used inside non-card glass panels (match sidebar headings) */
.dash-section-title{
  margin:0 0 10px;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-500);
}

/* Sidebar card wrapper used in client/provider dashboards */
.dash-card{
  background:rgba(255,255,255,.94);
  border-radius:18px;
  box-shadow:var(--panel-shadow);
  padding:14px 14px 16px;
  border:1px solid rgba(148,163,184,.28);
  margin-bottom:14px;
}
.dash-card .card-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Settings panel actions (client portal) */
.settings-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.settings-action{
  display:block;
  flex:1 1 240px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.38);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  text-decoration:none;
  color:#0f172a;
}
.settings-action:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(2,132,199,.32);
  box-shadow: 0 14px 30px rgba(2,132,199,.10);
}
.settings-action__title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
}
.settings-action__sub{
  margin-top: 4px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.35;
}

/* Provider scheduling pivot (1:1 vs Group) */
.schedule-switch{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.schedule-switch__btn{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  color: #0f172a;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .02em;
}
.schedule-switch__btn:hover{
  background: rgba(2,132,199,.08);
  border-color: rgba(2,132,199,.18);
}
.schedule-switch__btn.is-active{
  background: linear-gradient(135deg, rgba(2,132,199,.22), rgba(6,182,212,.12));
  border-color: rgba(2,132,199,.35);
  box-shadow: 0 10px 26px rgba(2,132,199,.14);
}

/* Provider calendar quick schedule tabs (1:1 / Group / Personal)
   NOTE: These need to stay inside the card on small/mobile widths.
*/
.cal-qs-tabs{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap:wrap;
  max-width:100%;
}
.cal-qs-tab{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  color:#0f172a;
  font-weight:800;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  letter-spacing:.02em;
  white-space:nowrap;
}
.cal-qs-tab:hover{
  background: rgba(2,132,199,.08);
  border-color: rgba(2,132,199,.18);
}
.cal-qs-tab.is-active{
  background: linear-gradient(135deg, rgba(2,132,199,.22), rgba(6,182,212,.12));
  border-color: rgba(2,132,199,.35);
  box-shadow: 0 10px 26px rgba(2,132,199,.14);
}

@media (max-width: 520px){
  .cal-qs-tabs{
    width:100%;
    justify-content:space-between;
  }
  .cal-qs-tab{
    flex:1 1 auto;
    text-align:center;
    padding:8px 10px;
  }
}

.schedule-group-extras kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.8);
}

/* Provider scheduling: AI-style suggested slots */
.schedule-suggestions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.schedule-suggestions__group{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  padding:10px 10px;
}
.schedule-suggestions__head{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(15,23,42,.72);
  margin-bottom:8px;
}
.schedule-suggestions__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.schedule-suggestion-chip{
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(2,132,199,.28);
  background: linear-gradient(135deg, rgba(2,132,199,.10), rgba(6,182,212,.06));
  color:#0f172a;
  font-weight:800;
  font-size:12px;
  padding:8px 10px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.schedule-suggestion-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2,132,199,.14);
  background: linear-gradient(135deg, rgba(2,132,199,.16), rgba(6,182,212,.10));
}
.schedule-suggestion-chip.is-selected{
  border-color: rgba(2,132,199,.55);
  background: linear-gradient(135deg, rgba(2,132,199,.22), rgba(6,182,212,.14));
  box-shadow: 0 14px 30px rgba(2,132,199,.18);
}

/* Provider schedule: subtle "Polly" autocomplete-style suggestions */
.schedule-suggest{
  transition: opacity .15s ease, transform .15s ease;
}
.schedule-suggest.is-visible{
  opacity: 0;
  transform: translateY(-4px);
}
.schedule-suggest__row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.schedule-suggest__avatar{
  width:44px;
  flex:0 0 44px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}
.schedule-suggest__avatar-img{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
}
.schedule-suggest__bubble{
  position:relative;
  flex:1;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  padding:10px 12px;
}
.schedule-suggest__bubble:before{
  content:"";
  position:absolute;
  left:-8px;
  top:16px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid rgba(255,255,255,.62);
}
.schedule-suggest__bubble:after{
  content:"";
  position:absolute;
  left:-9px;
  top:16px;
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-right:9px solid rgba(148,163,184,.22);
}
.schedule-suggest__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
}
.schedule-suggest__title{
  font-size:12px;
  font-weight:800;
  color: rgba(15,23,42,.78);
}
.schedule-suggest__toggle{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(2,132,199,.90);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  padding:2px 4px;
}
.schedule-suggest__toggle:hover{
  text-decoration: underline;
}
.schedule-suggest__hint{
  font-size:12px;
  color: rgba(71,85,105,.88);
  margin-bottom:8px;
}

/* Compatibility aliases (JS uses __header + __chip) */
.schedule-suggestions__header{ 
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(15,23,42,.62);
  margin-bottom:8px;
}
.schedule-suggestions__chip{
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(2,132,199,.22);
  background: rgba(2,132,199,.08);
  color:#0f172a;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.schedule-suggestions__chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(2,132,199,.12);
  background: rgba(2,132,199,.12);
}
.schedule-suggestions__chip.is-picked{
  border-color: rgba(2,132,199,.55);
  background: rgba(2,132,199,.16);
  box-shadow: 0 14px 26px rgba(2,132,199,.16);
}
.schedule-suggestions__more{
  appearance:none;
  border-radius:999px;
  border:1px dashed rgba(148,163,184,.55);
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.70);
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  cursor:pointer;
}
.schedule-suggestions--compact .schedule-suggestions__group{
  padding:10px 10px;
}
.schedule-suggestions--compact{
  gap:12px;
}


/* Compact section headers with icon (used on client dashboard panels) */
.mini-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-700);
}
.mini-head .mini-icon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.22);
  color:#2563eb;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.mini-head .mini-icon svg{
  width:16px;
  height:16px;
}

.side-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(148,163,184,.4);
}

/* nav list */
.side-nav,
.nav-vert{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.side-nav li,
.nav-vert li{
  margin:0;
}
.side-nav a,
.nav-vert a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  padding:7px 9px;
  border-radius:10px;
  color:var(--ink-700);
  text-decoration:none;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.side-nav a svg,
.nav-vert a svg{
  width:16px; height:16px; opacity:.65;
}
.side-nav a:hover,
.nav-vert a:hover{
  background:rgba(241,245,249,.8);
  color:var(--ink-900);
}
.side-nav a.active,
.nav-vert a.active{
  background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(56,189,248,.12));
  color:var(--brand-700);
  font-weight:600;
}

/* Little chips in sidebar */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip{
  font-size:11px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:var(--ink-700);
}

/* ------------------------------
   Client My Documents
   ------------------------------ */

.doc-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}
.doc-list--compact{
  gap:8px;
}

.doc-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.92));
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.doc-item:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
  border-color:rgba(56,189,248,.35);
}

.doc-left{
  display:flex;
  gap:12px;
  min-width:0;
  flex:1;
}

.doc-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-700);
  background:radial-gradient(circle at 20% 0%,rgba(56,189,248,.22),rgba(59,130,246,.08));
  border:1px solid rgba(148,163,184,.28);
  flex:0 0 auto;
}
.doc-list--compact .doc-icon{
  width:36px;
  height:36px;
  border-radius:12px;
}
.doc-icon svg{
  width:20px;
  height:20px;
}

.doc-meta{
  min-width:0;
  flex:1;
}
.doc-title a{
  display:inline-block;
  font-weight:800;
  color:var(--ink-900);
  text-decoration:none;
  line-height:1.2;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.doc-title a:hover{
  color:var(--brand-700);
}

.doc-submeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:6px;
  font-size:12px;
  color:var(--ink-500);
}
.doc-submeta .dot{
  opacity:.7;
}

.doc-foot{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:7px;
}
.doc-filename{
  font-size:12px;
  color:var(--ink-700);
  max-width:520px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.doc-badge{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(59,130,246,.10);
  color:var(--brand-700);
  border:1px solid rgba(59,130,246,.16);
}
.doc-size{
  font-size:11px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(241,245,249,.9);
  border:1px solid rgba(148,163,184,.24);
  color:var(--ink-500);
}

.doc-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.doc-empty{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 12px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.45);
  background:rgba(255,255,255,.75);
}
.doc-empty-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-500);
  background:rgba(241,245,249,.85);
  border:1px solid rgba(148,163,184,.28);
}
.doc-empty-icon svg{ width:20px; height:20px; }
.doc-empty-title{
  font-weight:800;
  color:var(--ink-900);
  margin-bottom:2px;
}
.doc-empty-sub{
  font-size:12px;
  color:var(--ink-500);
}

/* Detail page helpers */
.doc-shell{ max-width:1100px; margin:0 auto; padding:24px 18px; }
.doc-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.doc-detail-left{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.doc-detail-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.doc-detail-grid{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.doc-detail-row{ display:grid; grid-template-columns: 140px minmax(0,1fr); gap:12px; }
.doc-detail-row .k{ font-size:12px; color:var(--ink-500); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.doc-detail-row .v{ color:var(--ink-900); min-width:0; overflow-wrap:anywhere; }
@media (max-width: 720px){
  .doc-item{ flex-direction:column; }
  .doc-actions{ width:100%; justify-content:flex-start; }
  .doc-detail-row{ grid-template-columns: 1fr; }
}

/* Main area */
.dash-main{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* KPIs */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:var(--gutter);
}
@media (max-width: 1023px){
  .kpi-row{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .kpi-row{
    grid-template-columns: minmax(0,1fr);
  }
}

/* KPI Cards (top mini panels) */
.kpi{ position:relative; }

/* Make certain KPIs act like navigation cards */
.kpi--clickable{
  display:block;
  color:inherit;
  text-decoration:none;
}
.kpi--clickable .kpi-inner{ cursor:pointer; }
.kpi--clickable:focus{ outline:none; }
.kpi--clickable:focus .kpi-inner{
  box-shadow:
    0 14px 30px rgba(15,23,42,.12),
    0 2px 0 rgba(255,255,255,.55) inset,
    0 0 0 3px rgba(59,130,246,.18);
}
.kpi--clickable:hover .kpi-inner{
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kpi--clickable:hover .kpi-inner{
  box-shadow:
    0 16px 34px rgba(15,23,42,.14),
    0 2px 0 rgba(255,255,255,.55) inset;
}

.kpi-inner{
  position:relative;
  overflow:hidden;

  /* Grid prevents wrapping/overlap and keeps all three cards perfectly aligned */
  display:grid;
  grid-template-columns: 44px minmax(0,1fr) 176px;
  align-items:center;
  gap:14px;

  border-radius:22px;
  padding:16px 18px;
  height:112px; /* symmetrical regardless of content */

  /* Frosted glass — matches brand style */
  background: rgba(255,255,255,.62);
  border:1px solid rgba(148,163,184,.42);
  box-shadow:
    0 14px 30px rgba(15,23,42,.10),
    0 2px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(18px) saturate(160%);
}

/* Soft accent wash + subtle "glass" sheen */
.kpi-inner::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 10% 5%, rgba(56,189,248,.20), transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(59,130,246,.14), transparent 58%),
    radial-gradient(circle at 50% 120%, rgba(14,165,233,.12), transparent 60%);
  pointer-events:none;
}
.kpi-inner::after{
  content:"";
  position:absolute;
  left:-40%;
  top:-60%;
  width:140%;
  height:120%;
  transform: rotate(10deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.45;
  pointer-events:none;
}

.kpi-inner > *{ position:relative; z-index:1; }

.kpi-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(148,163,184,.38);
  box-shadow: 0 10px 20px rgba(2,6,23,.10);
  background:
    radial-gradient(circle at 30% 25%, rgba(56,189,248,.38), rgba(59,130,246,.16) 60%, rgba(255,255,255,.50) 100%);
}
.kpi-icon i{
  font-size:18px;
  color: rgba(2,132,199,.98);
}

.kpi-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.kpi .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color: rgba(15,23,42,.70);
  margin:0;
  font-weight:850;
}

/* Value layout */
.kpi-stat{ display:flex; flex-direction:column; line-height:1.0; }
.kpi-stat--row{ flex-direction:row; align-items:baseline; gap:6px; }
.kpi-number{
  font-size:30px;
  font-weight:950;
  letter-spacing:-.04em;
  color: rgba(15,23,42,.96);
}
.kpi-unit{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  color: rgba(15,23,42,.70);
}

.kpi-sub{
  font-size:12px;
  color: rgba(15,23,42,.62);
  line-height:1.2;

  /* prevent subcopy from colliding with the trend */
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.kpi-trend{
  width:176px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.kpi-trend svg{ max-width:176px; }

@media (max-width: 1023px){
  .kpi-inner{ grid-template-columns: 44px minmax(0,1fr) 150px; }
  .kpi-trend{ width:150px; }
  .kpi-trend svg{ max-width:150px; }
}
@media (max-width: 640px){
  .kpi-inner{ height:136px; grid-template-columns: 44px minmax(0,1fr) 140px; padding:14px 16px; }
  .kpi-trend{ width:140px; }
  .kpi-trend svg{ max-width:140px; }
}

.hearts-rating{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
.hearts-rating .hearts{
  display:flex;
  align-items:center;
  gap:4px;
  line-height:1;
}
.hearts-rating .hearts i{
  font-size:14px;
}
.hearts-rating .hearts-text{
  font-size:13px;
  font-weight:750;
  letter-spacing:-.02em;
}

/* Inline SVG sparklines */
.kpi-spark{ display:block; width:100%; height:auto; }
.kpi-spark--streak{ color: rgba(34,211,238,.95); }
.kpi-spark--sessions{ color: rgba(59,130,246,.95); }
.kpi-spark--mood{ color: rgba(14,165,233,.90); }
.kpi-spark--today{ color: rgba(2,132,199,.90); }
.kpi-spark--clients{ color: rgba(59,130,246,.82); }
.kpi-spark--tasks{ color: rgba(103,232,249,.92); }

/* Keep the old placeholder spark as a fallback (if any other page still uses it) */
.spark{
  height:6px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(148,163,184,.25), rgba(56,189,248,.90), rgba(59,130,246,.70));
  box-shadow: 0 10px 24px rgba(59,130,246,.12);
}

/* Slightly different accents per KPI to keep the row visually interesting */
.kpi--streak .kpi-icon{ background: radial-gradient(circle at 30% 25%, rgba(34,211,238,.40), rgba(59,130,246,.16) 60%, rgba(255,255,255,.55) 100%); }
.kpi--sessions .kpi-icon{ background: radial-gradient(circle at 30% 25%, rgba(59,130,246,.34), rgba(99,102,241,.16) 60%, rgba(255,255,255,.55) 100%); }
.kpi--mood .kpi-icon{ background: radial-gradient(circle at 30% 25%, rgba(125,211,252,.36), rgba(14,165,233,.16) 60%, rgba(255,255,255,.55) 100%); }
.kpi--today .kpi-icon{ background: radial-gradient(circle at 30% 25%, rgba(56,189,248,.36), rgba(2,132,199,.16) 60%, rgba(255,255,255,.55) 100%); }
.kpi--clients .kpi-icon{ background: radial-gradient(circle at 30% 25%, rgba(147,197,253,.36), rgba(59,130,246,.16) 60%, rgba(255,255,255,.55) 100%); }
.kpi--tasks .kpi-icon{ background: radial-gradient(circle at 30% 25%, rgba(103,232,249,.34), rgba(59,130,246,.16) 60%, rgba(255,255,255,.55) 100%); }/* Row for schedule + inbox */

/* Make it obvious the mood streak KPI is clickable (subtle "sparkle" hint) */
.kpi--clickable{ cursor:pointer; }
.kpi--mood.kpi--clickable{ position:relative; overflow:hidden; }
.kpi--mood.kpi--clickable::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 45%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(120deg, transparent 35%, rgba(125,211,252,.18) 50%, transparent 65%);
  transform: translateX(-35%) translateY(10%) rotate(-8deg);
  opacity:0;
  pointer-events:none;
  animation: kpiSparkleSweep 12s ease-in-out infinite;
}
@keyframes kpiSparkleSweep{
  0%, 78%{ opacity:0; }
  80%{ opacity:.0; transform: translateX(-35%) translateY(10%) rotate(-8deg); }
  86%{ opacity:.55; }
  92%{ opacity:.0; transform: translateX(35%) translateY(-10%) rotate(-8deg); }
  100%{ opacity:0; }
}

.kpi-click-hint{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
  color: rgba(15,23,42,.82);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  user-select:none;
  pointer-events:none;
}
.kpi-click-hint__spark{
  display:inline-block;
  transform: translateY(-.5px);
  opacity:.85;
  animation: kpiHintPulse 2.8s ease-in-out infinite;
}
@keyframes kpiHintPulse{
  0%, 100%{ transform: translateY(-.5px) scale(1); opacity:.75; }
  50%{ transform: translateY(-.5px) scale(1.18); opacity:1; }
}

/* Upcoming sessions header (Dashboard) */
.upcoming-sessions .section-title{ display:flex; flex-direction:column; gap:2px; }
.upcoming-sessions .section-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:-.02em;
  color: var(--ink-900);
  font-size:14px;
}
.upcoming-sessions .section-icon{ font-size:16px; }
.upcoming-sessions .section-sub{ font-size:12px; color: rgba(71,85,105,.86); }
.two-col{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--gutter);
}
@media (max-width: 900px){
  .two-col{
    grid-template-columns: minmax(0,1fr);
  }
}

/* Inbox panel, etc. */
.inbox{
  background:rgba(255,255,255,.94);
  border-radius:18px;
  box-shadow:var(--panel-shadow);
  padding:14px 14px 16px;
  border:1px solid rgba(148,163,184,.3);
}
.inbox-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.inbox-head h2{
  margin:0;
  font-size:15px;
  letter-spacing:-.02em;
  color:var(--ink-900);
}
.inbox-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.inbox-item{
  background:#f9fafb;
  border-radius:12px;
  padding:7px 8px;
  border:1px solid var(--ink-200);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.inbox-title{
  font-size:13px;
  font-weight:600;
  color:var(--ink-900);
}
.inbox-snippet{
  font-size:12px;
  color:var(--ink-600);
}
.inbox-meta{
  font-size:11px;
  color:var(--ink-400);
}

/* Simple schedule list */
.simple-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.simple-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.simple-item .badge{
  min-width:42px;
  padding:4px 6px;
  border-radius:999px;
  background:#e0f2fe;
  color:#0f172a;
  font-size:11px;
  font-weight:600;
  text-align:center;
}
.simple-item .meta{
  font-size:12px;
  color:var(--ink-500);
}

/* Columns board (notes / tasks / clients) */
.board{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gutter);
}
@media (max-width: 900px){
  .board{
    grid-template-columns: minmax(0,1fr);
  }
}

/* NOTE: scoped so we don't break wizard/bootstrap .col */
.board .col{
  background:rgba(255,255,255,.94);
  border-radius:18px;
  box-shadow:var(--panel-shadow);
  padding:12px 12px 14px;
  border:1px solid rgba(148,163,184,.3);
}
.board .col-head{
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--ink-900);
}
.board .col-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Cards inside board columns – also scoped */
.board .card{
  border:1px solid var(--ink-200);
  border-radius:12px;
  padding:8px 9px;
  background:#f9fafb;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.board .card-title{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--ink-900);
}
.board .card-sub{
  margin:0;
  font-size:12px;
  color:var(--ink-600);
}
.board .card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.board .card-tag{
  font-size:11px;
  padding:3px 6px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
}

/* --- Provider Session Notes (frosted, professional tiles) --- */
.session-note-tile{
  position:relative;
  border-radius:16px;
  padding:12px 12px 10px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.session-note-tile:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(99,102,241,.10), rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}
.session-note-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
}
.session-note-tile__head{
  position:relative;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.session-note-tile__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,.45);
  background: rgba(248,250,252,.85);
  color: rgba(2,132,199,.95);
  flex: 0 0 34px;
}
.session-note-tile__titlewrap{ flex:1; min-width:0; }
.session-note-tile__title{
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-900);
  line-height:1.2;
  margin-top:1px;
}
.session-note-tile__meta{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.7);
  color: var(--ink-700);
}
.pill--soft{
  background: rgba(239,246,255,.75);
  color: rgba(29,78,216,.95);
  border-color: rgba(147,197,253,.75);
}
.pill--warn{
  background: rgba(255,247,237,.85);
  color: rgba(124,45,18,.95);
  border-color: rgba(253,186,116,.85);
}
.pill--good{
  background: rgba(236,253,245,.85);
  color: rgba(6,95,70,.95);
  border-color: rgba(110,231,183,.85);
}
.session-note-tile__body{ position:relative; margin-top:10px; }
.session-note-tile__excerpt{
  margin:0;
  font-size:12.5px;
  color: var(--ink-700);
  line-height:1.45;
}
.session-note-tile__actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.danger {
  background:#FFB6C1;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  border:1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.75);
  color: var(--ink-900);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.icon-btn:hover{
  border-color: rgba(56,189,248,.8);
  box-shadow: 0 8px 22px rgba(15,23,42,.10);
}
.icon-btn--danger{
  color: rgba(190,18,60,.95);
  border-color: rgba(251,113,133,.65);
  background: #FFB6C1;
}
.icon-btn--danger:hover{
  border-color: rgba(244,63,94,.85);
}

/* --- Provider Portal: Notes panel (polished client-note cards) --- */
.notes-note-card{
  position:relative;
  border-radius:20px;
  padding:14px 16px 12px;
  border:1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
}
.notes-note-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background: linear-gradient(135deg,
    rgba(56,189,248,.18),
    rgba(99,102,241,.10),
    rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}
.notes-note-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 52px rgba(15,23,42,.14);
  border-color: rgba(56,189,248,.40);
}
.notes-note-card__head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.notes-note-card__head-left{ min-width:0; flex:1; }
.notes-note-card__title{
  font-weight:550;
  font-size:15px;
  line-height:1.2;
  color: var(--ink-950);
  letter-spacing:-0.01em;
}
.notes-note-card__excerpt{
  margin-top:6px;
  font-size:13px;
  line-height:1.45;
  color: var(--ink-700);
  opacity:.95;
}
.notes-note-card__date{
  font-size:12px;
  color: var(--ink-600);
  opacity:.9;
  white-space:nowrap;
  padding-top:2px;
}
.notes-note-card__meta{
  position:relative;
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.note-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11.5px;
  border:1px solid rgba(148,163,184,.40);
  background: rgba(255,255,255,.72);
  color: var(--ink-700);
}
.note-chip--soft{
  background: rgba(239,246,255,.80);
  color: rgba(29,78,216,.95);
  border-color: rgba(147,197,253,.70);
}
.note-chip--warn{
  background: rgba(255,247,237,.88);
  color: rgba(124,45,18,.95);
  border-color: rgba(253,186,116,.78);
}
.note-chip--good{
  background: rgba(236,253,245,.88);
  color: rgba(6,95,70,.95);
  border-color: rgba(110,231,183,.75);
}
.notes-note-card__actions{
  position:relative;
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.notes-action-btn{
  border-radius:999px;
  padding:7px 12px;
  font-weight:700;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(148,163,184,.50);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.notes-action-btn:hover{
  border-color: rgba(56,189,248,.75);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
}
.notes-action-btn--danger{
  color: rgba(190,18,60,.95);
  background: rgba(255,241,242,.78);
  border-color: rgba(251,113,133,.60);
}
.notes-action-btn--danger:hover{
  border-color: rgba(244,63,94,.85);
}


/* Client list (for provider dashboard) */
.client-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.client-list li{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px;
  color:var(--ink-700);
}
.client-name{
  font-weight:600;
}
.client-pill{
  padding:2px 6px;
  border-radius:999px;
  background:rgba(248,250,252,1);
  border:1px dashed rgba(148,163,184,.6);
  font-size:11px;
  color:var(--ink-500);
}

/* Responsive tweaks */
@media (max-width: 768px){
  .dash-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .dash-title{
    align-items:flex-start;
  }
  .dash-title h1{ line-height: 1.1; }
  .dash-subtle{ max-width: 36ch; }
}
@media (max-width: 640px){
  .dashboard-wrap{
    padding:18px 14px 24px;
  }
  /* The floating "Upgrades Available!" pill competes with the mobile header. Hide it on phones. */
  .floating-plan-hint{ display:none !important; }
  /* Make the header feel intentional on mobile: keep edit action obvious and aligned. */
  .dash-actions{ width:100%; }
  .btn-mini.btn-edit-profile{
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
  }
}

/* ---------------- Tiny Garden (Vibe check-in game) ---------------- */

.tiny-garden-card { position: relative; overflow: hidden; }
.tg-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

.tg-streak-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(58,120,206,.16) 0%, rgba(58,120,206,.08) 100%);
  border: 1px solid rgba(58,120,206,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  color:#163a6b;
}

.tg-streak-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.tg-streak-copy{ display:flex; flex-direction:column; line-height:1.05; }
.tg-streak-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.tg-streak-value{ font-size:14px; font-weight:900; }

.tg-garden{
  position:relative; margin-top:14px;
  background: linear-gradient(180deg, #e9f2ff 0%, #f7fbff 100%);
  border:1px solid #e3ecfb; border-radius:16px;
  height:210px; overflow:hidden;
}

.tg-sky{ position:absolute; inset:0 0 auto 0; height:52%; }
.tg-soil{
  position:absolute; inset:auto 0 0 0; height:52%;
  background: linear-gradient(180deg, #c89a6a 0%, #ad7d4f 100%);
  border-top:1px solid rgba(0,0,0,.05);
}

.tg-plants{
  position:absolute; inset:0; display:flex; align-items:flex-end; gap:12px;
  padding:18px 18px 14px; flex-wrap:wrap;
}

.tg-empty{ font-weight:600; color:#355a8a; opacity:.9; }

.tg-hint{
  position:absolute; right:12px; top:10px;
  font-size:12px; font-weight:800; color:#20426c;
  background: rgba(255,255,255,.9); padding:6px 8px; border-radius:10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

.tg-plant{
  width:48px; height:48px; display:grid; place-items:center;
  font-size:32px; transform-origin:center bottom;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.12));
  transition: transform .35s ease, opacity .35s ease;
}

/* Growth stages (recent => sprout, older => fuller) */
.tg-stage-1{
  opacity:.75;
  transform: translateY(10px) scale(.7);
  animation: tg-sprout .9s ease-out both;
}
.tg-stage-2{
  opacity:.95;
  transform: translateY(3px) scale(.9);
  animation: tg-grow .9s ease-out both;
}
.tg-stage-3{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Just planted: pop + wiggle */
.tg-just-planted{
  animation: tg-pop .95s cubic-bezier(.2,.9,.2,1) both;
}

/* Garden pulse when planting */
.tg-pulse .tg-garden::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 75%, rgba(255,255,255,.95), transparent 55%);
  animation: tg-glow .95s ease-out;
  pointer-events:none;
}

/* Water animation: fallback shimmer */
.tg-water .tg-garden::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.95), transparent 40%),
    radial-gradient(circle at 60% 8%, rgba(255,255,255,.95), transparent 35%),
    radial-gradient(circle at 80% 22%, rgba(255,255,255,.95), transparent 45%);
  animation: tg-rain .95s ease-out;
  pointer-events:none;
}
.tg-water .tg-soil::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 10%, rgba(255,255,255,.5), transparent 55%);
  animation: tg-ripple .95s ease-out;
  pointer-events:none;
}

/* Cloud + sun */
.tg-cloud{
  position:absolute; top:18px; width:64px; height:26px; border-radius:999px;
  background: rgba(255,255,255,.9);
  box-shadow: 12px 0 0 rgba(255,255,255,.9), 24px 6px 0 rgba(255,255,255,.9);
  opacity:.9;
  animation: tg-cloud-drift 22s linear infinite;
}
.tg-cloud--1{ left:-80px; animation-duration: 26s; top:20px; }
.tg-cloud--2{ left:-110px; animation-duration: 34s; top:44px; opacity:.75; transform: scale(.9); }
@keyframes tg-cloud-drift{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(420px); }
}

.tg-sun{
  position:absolute; right:22px; top:18px; width:28px; height:28px; border-radius:50%;
  background: rgba(255,236,164,.95);
  box-shadow: 0 0 0 6px rgba(255,236,164,.25), 0 0 0 12px rgba(255,236,164,.12);
  animation: tg-sun-pulse 5.5s ease-in-out infinite;
}
@keyframes tg-sun-pulse{
  0%,100%{ transform: scale(1); opacity:.95; }
  50%{ transform: scale(1.08); opacity:1; }
}

/* FX layer for JS particles */
.tg-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* Sparkles */
.tg-spark{
  position:absolute; width:6px; height:6px; border-radius:2px;
  background: rgba(255,255,255,1);
  box-shadow: 0 0 12px rgba(255,255,255,.9);
  animation: tg-sparkle 1.1s ease-out forwards;
}
@keyframes tg-sparkle{
  0%{ transform: translateY(6px) scale(.4) rotate(0deg); opacity:0; }
  30%{ opacity:1; }
  100%{ transform: translateY(-26px) scale(1.1) rotate(90deg); opacity:0; }
}

/* Raindrops */
.tg-raindrop{
  position:absolute; width:3px; height:12px; border-radius:10px;
  background: rgba(120,175,255,.9);
  animation: tg-drop 0.9s ease-in forwards;
}
@keyframes tg-drop{
  0%{ transform: translateY(0); opacity:0; }
  20%{ opacity:1; }
  100%{ transform: translateY(230px); opacity:0; }
}

@keyframes tg-sprout{
  0%{ transform: translateY(22px) scale(.45); opacity:.05; }
  100%{ transform: translateY(10px) scale(.7); opacity:.75; }
}
@keyframes tg-grow{
  0%{ transform: translateY(12px) scale(.65); opacity:.25; }
  100%{ transform: translateY(3px) scale(.9); opacity:.95; }
}
@keyframes tg-pop{
  0%{ transform: translateY(22px) scale(.25); opacity:0; }
  55%{ transform: translateY(-4px) scale(1.18); opacity:1; }
  100%{ transform: translateY(0) scale(1); }
}
@keyframes tg-glow{
  0%{ opacity:0; transform: scale(.88); }
  55%{ opacity:1; transform: scale(1.02); }
  100%{ opacity:0; transform: scale(1.06); }
}
@keyframes tg-rain{
  0%{ opacity:0; transform: translateY(-12px); }
  45%{ opacity:1; }
  100%{ opacity:0; transform: translateY(16px); }
}
@keyframes tg-ripple{
  0%{ opacity:0; transform: scale(.6); }
  60%{ opacity:.9; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.12); }
}

/* Choices */
.tg-choices-wrap{ margin-top:14px; }
.tg-prompt{ font-weight:700; margin-bottom:8px; color:#20426c; }
.tg-choices{ display:flex; flex-wrap:wrap; gap:10px; }
.tg-choice{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:10px 12px; border-radius:12px; border:1px solid #e5ecf7;
  background:#fff; box-shadow: 0 6px 14px rgba(0,0,0,.04);
  cursor:pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tg-choice:hover{ transform: translateY(-1px); border-color:#cfe0f8; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.tg-choice.is-selected{ border-color:#3a78ce; box-shadow: 0 0 0 2px rgba(58,120,206,.18); }
.tg-emoji{ font-size:26px; }
.tg-label small{ color:#6d7e97; font-weight:600; }
.tg-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* Charts (Vibe panel) */
.tg-charts{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .tg-charts{ grid-template-columns: 1fr; }
}

.tg-chart{
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(226,232,240,0.95);
  border-radius:18px;
  padding:12px 12px 10px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.tg-chart-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.tg-chart-title{ font-weight:900; color:#0f172a; }
.tg-chart-meta{ font-size:12px; }
.tg-chart-canvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  background: rgba(241,245,249,0.55);
  border:1px solid rgba(226,232,240,0.9);
}
.tg-chart-foot{ margin-top:6px; font-size:12px; }

.tg-chart-empty{
  grid-column: 1 / -1;
  border-radius:18px;
  padding:12px 14px;
  background: rgba(14,165,233,0.08);
  border:1px dashed rgba(14,165,233,0.35);
}
.tg-empty-title{ font-weight:900; color:#0f172a; }
.tg-empty-sub{ margin-top:3px; font-size:13px; }

/* History */
.tg-history{ margin-top:12px; border-top:1px dashed #e3ecfb; padding-top:10px; }
.tg-history-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tg-history-title{ font-weight:800; color:#1f3b6a; }
.tg-history-row{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto; padding-right:2px;}
.tg-history-item{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e7eef9; padding:8px 10px; border-radius:10px; }
.tg-history-emoji{ font-size:22px; }
.tg-history-plant{ font-weight:800; }
.tg-history-date{ font-size:12px; color:#6d7e97; font-weight:700; }

/* Gentle idle sway for mature plants */
.tg-stage-3{ animation: tg-sway 6s ease-in-out infinite; }
@keyframes tg-sway{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  50%{ transform: translateY(-1px) rotate(-1.5deg) scale(1.01); }
}


/* ---------------- Journal (Client portal) ------------------------- */
.journal-card .jr-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.journal-card .jr-top-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.journal-card .jr-prompt{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(241,245,249,0.8);
  border:1px solid rgba(226,232,240,0.9);
}
.journal-card .jr-eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0f172a; opacity:.7;
}
.journal-card .jr-prompt-text{
  font-size:14px; font-weight:600; color:#0f172a; margin-top:2px;
}

.journal-card .jr-editor{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(226,232,240,0.9);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.journal-card .jr-input{
  width:100%;
  border:1px solid rgba(203,213,225,0.9);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.journal-card .jr-input:focus{
  border-color:#38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
}
.journal-card .jr-title{ margin-bottom:8px; }
.journal-card .jr-body{ margin-top:8px; resize:vertical; min-height:110px; }

.journal-card .jr-tags{ margin-top:6px; margin-bottom:10px;}
.journal-card .jr-tags-label{ font-size:12px; font-weight:700; color:#334155; margin-bottom:6px; }
.journal-card .jr-tags-row{ display:flex; gap:6px; flex-wrap:wrap; }
.journal-card .jr-tag{
  border:1px solid rgba(203,213,225,1);
  background:#fff; color:#0f172a;
  font-size:12px; font-weight:700;
  padding:6px 8px; border-radius:999px; cursor:pointer;
  transition: all .15s ease;
}
.journal-card .jr-tag:hover{ transform: translateY(-1px); }
.journal-card .jr-tag.is-selected{
  color:grey; 
  border-color:#0ea5e9;
  box-shadow: 0 4px 10px rgba(14,165,233,0.30);
}

.journal-card .jr-share{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#334155;
  margin-top:8px;
}
.journal-card .jr-editor-actions{
  margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.journal-card .jr-saving{ font-size:12px; font-weight:700; color:#64748b; }

.journal-card .jr-empty{ margin-top:12px; }

.journal-card .jr-list{
  margin-top:12px; display:flex; flex-direction:column; gap:8px;
}
.journal-card .jr-item{
  padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,0.9);
  border:1px solid rgba(226,232,240,0.95);
  cursor:pointer; transition: all .15s ease;
}
.journal-card .jr-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
}
.journal-card .jr-item-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.journal-card .jr-item-title{
  font-size:14px; font-weight:800; color:#0f172a;
}
.journal-card .jr-item-date{
  font-size:12px; color:#64748b; font-weight:700;
}
.journal-card .jr-item-body{
  font-size:13px; color:#334155; margin-top:4px; line-height:1.4;
}
.journal-card .jr-item-foot{
  margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}

/* Journal – book view & chips */
.journal-card .jr-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 7px;
  font-size:11px;
  font-weight:700;
  color:#0f172a;
  background:rgba(226,232,240,0.9);
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
}

/* Book container */
.journal-card .jr-book{
  margin-top:16px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:14px;
  perspective:1600px;
  position:relative;
}

.journal-card .jr-book-inner{
  display:contents;
  gap:14px;
  max-width:90%;
}

/* Individual pages */
.journal-card .jr-page{
  position:relative;
  flex:1 1 0;
  min-height:260px;
  background-color:#f9fbff;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(148,163,184,0.45) 0px,
      rgba(148,163,184,0.45) 1px,
      transparent 1px,
      transparent 24px
    );
  border-radius:18px;
  padding:18px 20px 20px;
  box-shadow:0 18px 40px rgba(15,23,42,0.24);
  transform-style:preserve-3d;
  transform-origin:0% 50%;
  transition:transform 0.6s ease, box-shadow 0.6s ease;
  overflow:hidden;
}

/* Right page uses opposite origin */
.journal-card .jr-page-right{
  transform-origin:100% 50%;
}

/* Spine highlight + shadow using pseudo-elements */
.journal-card .jr-book-inner::before{
  content:"";
  position:absolute;
  top:6px;
  bottom:10px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    rgba(15,23,42,0.25),
    rgba(148,163,184,0.35),
    rgba(15,23,42,0.25)
  );
  opacity:0.65;
  pointer-events:none;
}

.journal-card .jr-book-inner::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:46%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 0, rgba(15,23,42,0.14), transparent 55%);
  opacity:0.45;
  pointer-events:none;
}

.journal-card .jr-page-content{
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

.journal-card .jr-page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.journal-card .jr-page-date{
  font-size:12px;
  font-weight:600;
  color:#64748b;
}

.journal-card .jr-page-title{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:4px;
}

.journal-card .jr-page-body{
  font-size:14px;
  line-height:1.7;
  color:#1f2933;
  flex:1 1 auto;
  margin-top:8px;
  font-family:"Homemade Apple","Dancing Script","Pacifico","Segoe Script","Lucida Handwriting",cursive;
  letter-spacing:0.01em;
}


.journal-card .jr-page-foot{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:10px;
}

/* Empty state */
.journal-card .jr-page-empty .jr-page-content{
  justify-content:center;
  text-align:center;
}

.journal-card .jr-page-empty-inner{
  padding:16px 10px;
}

.journal-card .jr-page-empty-label{
  font-size:13px;
  color:#64748b;
}

.journal-card .jr-shared-label{
  font-size:11px;
  font-weight:600;
  color:#0f172a;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(219,234,254,0.96);
  border:1px solid rgba(129,140,248,0.35);
}

/* Nav buttons */
.journal-card .jr-book-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  background:rgba(15,23,42,0.92);
  color:#f9fafb;
  box-shadow:0 14px 30px rgba(15,23,42,0.35);
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
  z-index:3;
}

.journal-card .jr-book-prev{
  left:-4px;
}

.journal-card .jr-book-next{
  right:-4px;
}

.journal-card .jr-book-nav:hover:not([disabled]){
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 18px 40px rgba(15,23,42,0.46);
  background:rgba(15,23,42,0.98);
}

.journal-card .jr-book-nav[disabled]{
  opacity:0.25;
  cursor:default;
  box-shadow:none;
}

/* Page flip states */
.journal-card .jr-page.is-turning-forward{
  transform:rotateY(-180deg);
  box-shadow:0 12px 26px rgba(15,23,42,0.16);
}

.journal-card .jr-page.is-turning-back{
  transform:rotateY(180deg);
  box-shadow:0 12px 26px rgba(15,23,42,0.16);
}

/* Small screens: stack pages */
@media (max-width: 900px){
  .journal-card .jr-book{
    justify-content:flex-start;
    gap:10px;
  }
  .journal-card .jr-book-inner{
    max-width:100%;
  }
  .journal-card .jr-page{
    max-width:100%;
  }
  .journal-card .jr-book-prev{
    left:8px;
  }
  .journal-card .jr-book-next{
    right:8px;
  }
}

.modal-backdrop,
.booking-modal-backdrop,
.session-modal-backdrop,
.jr-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 900;
}


.modal,
.booking-modal,
.session-modal,
.jr-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 910;
  padding: 32px 16px;
  overflow-y: auto;
}

/* Appointment details/edit modal
   Center the modal consistently (not relative to where the user clicked).
   The parent `.modal` is a fullscreen fixed flex container, so we let it
   center the inner card; scrolling is handled by the parent overflow and
   the inner max-height rules.
*/
.modal[data-appt-modal] {
  align-items: center;
  justify-content: center;
}

/* lock background scroll when a modal is open */
body.has-modal-open {
  /*
    Keep the browser scrollbar visible to avoid layout shift when opening modals.
    The modal overlay captures wheel/touch scroll, so the background effectively
    remains stable while the scrollbar doesn't disappear.
  */
  overflow-y: scroll;
  overflow-x: hidden;
}


.booking-modal-inner {
  max-width: 720px;
  width: 100%;
  margin-top: 0;
  max-height: 90vh;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(30, 64, 175, 0.20);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 18px 20px;
  overflow-y: auto;
}

/* Client Portal — appointment details modal panel
   (keeps header + close button inside the modal, not "floating" on the blurred backdrop) */
.client-details-modal-inner{
  /* Responsive width so the modal never clips on smaller viewports */
  width: min(1120px, calc(100vw - 48px));
  max-width: 1120px;
  /* Keep the modal centered within the fullscreen `.modal` flex container */
  margin: 0;

  /* Center vertically inside the fullscreen modal overlay */
  margin-top: 0;
  /* Constrain height so the "glass" panel fits its content and scrolls internally
     when the viewport is short */
  max-height: 90vh;

  /* Frosted glass look (matches the rest of the dashboard aesthetic) */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0f172a;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(30, 64, 175, 0.20);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 18px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Appointment modal layout grids */
.client-details-modal-inner .appt-modal-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-details-modal-inner .appt-modal-grid--3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Explicit 2-col helper (used when we want 2-up on desktop, 1-up on mobile) */
.client-details-modal-inner .appt-modal-grid--2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Status + Type (narrow) with Meeting link (wide) */
.client-details-modal-inner .appt-modal-grid--statuslink{
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr;
  gap: 12px;
}

@media (max-width: 980px){
  .client-details-modal-inner .appt-modal-grid--3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-details-modal-inner .appt-modal-grid--statuslink{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px){
  .client-details-modal-inner{
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 16px 14px;
    max-height: calc(100vh - 64px);
  }

  /* Keep appointment edit modal fields from overflowing on smaller screens */
  .client-details-modal-inner .appt-modal-grid,
  .client-details-modal-inner .appt-modal-grid--2,
  .client-details-modal-inner .appt-modal-grid--3,
  .client-details-modal-inner .appt-modal-grid--statuslink{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* When viewing/editing a 1:1 session, let the Session note take the full row */
.modal[data-appt-modal].appt-type-single .appt-modal-note{
  grid-column: 1 / -1;
}

/* Center + polish: Provider Portal schedule (booking) modal */
.session-modal-inner{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  max-height: 90vh;
}

/* -------------------------------------------------------------------------- */
/* Client appointment details modal (world-class pass)                         */

.client-appt-details-modal{
  max-width: 920px;
  padding: 0;
  overflow: hidden;
}

.client-appt-details-hero{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(120,160,210,.25);
  background:
    radial-gradient(900px 240px at 15% 20%, rgba(120,200,255,.20), rgba(255,255,255,0)),
    radial-gradient(700px 220px at 85% 10%, rgba(190,210,255,.22), rgba(255,255,255,0)),
    linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.72));
}

.client-appt-details-modal .session-modal-close{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(120,160,210,.25);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  color: rgba(15, 23, 42, .75);
  box-shadow: 0 12px 22px rgba(20,40,80,.10);
}
.client-appt-details-modal .session-modal-close:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.client-appt-details-hero-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.client-appt-details-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .4px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .72);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(120,160,210,.30);
  box-shadow: 0 10px 22px rgba(20,40,80,.08);
  margin-bottom: 6px;
}

.client-appt-details-badge i{
  color: rgba(14,116,144,.85);
}

.client-appt-details-avatar{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(120,160,210,.35);
  box-shadow: 0 14px 28px rgba(20,40,80,.10);
}

.client-appt-details-avatar-img{
  width: 30px;
  height: 30px;
  opacity: .85;
}

.client-appt-details-hero-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #0f172a;
  line-height: 1.1;
}

.client-appt-details-hero-sub{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(15, 23, 42, .70);
}

.client-appt-details-microcopy{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15, 23, 42, .62);
}

.client-appt-details-microcopy i{
  color: rgba(14,116,144,.85);
}

.client-appt-details-hero-illustration{
  flex: 0 0 auto;
  width: 160px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(120,160,210,.25);
  box-shadow: 0 18px 30px rgba(20,40,80,.10);
  overflow: hidden;
}

.client-appt-details-hero-illustration img{
  width: 210px;
  height: auto;
  transform: translateX(18px);
  opacity: .95;
}

@media (max-width: 720px){
  .client-appt-details-hero{
    gap: 10px;
  }
  .client-appt-details-hero-illustration{
    display: none;
  }
}

.client-appt-details-status-badge{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid rgba(120,160,210,.28);
  background: rgba(255,255,255,.75);
}

.client-appt-details-status-badge.is-confirmed,
.client-appt-details-status-badge.is-active{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.25);
  color: rgba(22,101,52,.95);
}
.client-appt-details-status-badge.is-pending,
.client-appt-details-status-badge.is-invited{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.24);
  color: rgba(30,64,175,.95);
}
.client-appt-details-status-badge.is-rejected,
.client-appt-details-status-badge.is-declined,
.client-appt-details-status-badge.is-canceled,
.client-appt-details-status-badge.is-cancelled{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.22);
  color: rgba(153,27,27,.95);
}

.client-appt-details-countdown{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(120,160,210,.22);
  background: rgba(255,255,255,.65);
}

.client-appt-details-body{
  padding: 18px 20px 20px;
}

.client-appt-details-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-appt-details-card{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(120,160,210,.22);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 30px rgba(20,40,80,.08);
}

.client-appt-details-card-wide{ grid-column: 1 / -1; }

.client-appt-details-card .k{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18px;
  color: rgba(15, 23, 42, .60);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.client-appt-details-card .k i{
  color: rgba(14,116,144,.85);
}

.client-appt-details-card .v{
  font-size: 14px;
  color: rgba(15, 23, 42, .92);
  line-height: 1.35;
}

.client-appt-details-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.client-appt-details-actions .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(16, 119, 162, .35);
  background: linear-gradient(180deg, rgba(0, 168, 232, .90), rgba(0, 140, 210, .92));
  color: #fff;
  box-shadow: 0 16px 28px rgba(0, 140, 210, .18);
}

.client-appt-details-actions .btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.client-appt-details-tip{
  font-size: 13px;
  color: rgba(15, 23, 42, .70);
}

.client-appt-details-expect{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(120,160,210,.22);
  background: rgba(255,255,255,.55);
}

.client-appt-details-expect-title{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22px;
  color: rgba(15, 23, 42, .85);
  margin-bottom: 8px;
}

.client-appt-details-expect-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.client-appt-details-expect-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(15, 23, 42, .72);
  line-height: 1.35;
}

.client-appt-details-expect-list .dot{
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 140, 210, .35);
  box-shadow: 0 0 0 4px rgba(0, 140, 210, .10);
  flex: 0 0 auto;
}

@media (max-width: 720px){
  .client-appt-details-modal{ max-width: 92vw; }
  .client-appt-details-cards{ grid-template-columns: 1fr; }
  .client-appt-details-card-wide{ grid-column: auto; }
}


/* Modal form fields (Invoice + other simple forms) */
.field-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 0 0 12px;
}

.field-row label{
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(59,130,246,0.28);
  box-shadow: 0 10px 22px rgba(30, 64, 175, 0.10);
  outline: none;
}

.input:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 14px 28px rgba(30, 64, 175, 0.18);
}

.field-hint{
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

/* --- Provider Client header actions (Risk UI) --------------------------- */
.client-header-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* Connection area (Disconnect + status) */
.client-connection-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.60);
}

.connection-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.22);
}

.risk-form{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.risk-field{
  min-width: 220px;
  align-items: left;
}

/* Make select look like our pill inputs */
select.input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,0.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,0.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 2.4rem) 0.5rem;
  background-size: 6px 6px, 6px 6px, 1px 1.8rem;
  background-repeat: no-repeat;
}

.client-header-danger{
  margin-top: 12px;
}

.btn-danger-soft{
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  color: #991b1b;
}
/* Frosted date/time pickers inside modals (best-effort for native pickers) */
.booking-modal-inner input[type="date"],
.booking-modal-inner input[type="datetime-local"],
.session-modal-inner input[type="date"],
.session-modal-inner input[type="datetime-local"]{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(59,130,246,0.28);
  border-radius: 14px;
  box-shadow:
    0 10px 24px rgba(15,23,42,0.12),
    0 0 0 1px rgba(255,255,255,0.55) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #0f172a;
}

/* Chrome/Safari calendar indicator */
.booking-modal-inner input[type="date"]::-webkit-calendar-picker-indicator,
.booking-modal-inner input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.session-modal-inner input[type="date"]::-webkit-calendar-picker-indicator,
.session-modal-inner input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  padding: 6px;
  border-radius: 10px;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.18);
  box-shadow: 0 6px 14px rgba(15,23,42,0.10);
  cursor: pointer;
}

.booking-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.booking-modal-title {
  font-size: 18px;
  font-weight: 600;
}

.booking-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.booking-modal-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-label {
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
}

.booking-provider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.booking-provider-input {
  flex: 1;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(15, 23, 42, 0.9);
  color: #f9fafb;
  font-size: 13px;
}

.booking-provider-input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

.booking-availability {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: radial-gradient(circle at top left, rgba(191, 219, 254, 0.35), transparent 60%),
              radial-gradient(circle at bottom right, rgba(147, 197, 253, 0.35), transparent 60%),
              rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(147, 197, 253, 0.8);
}

.booking-day {
  margin-bottom: 10px;
}

.booking-day:last-child {
  margin-bottom: 0;
}

.booking-day-label {
  font-size: 12px;
  font-weight: 500;
  color: #bfdbfe;
  margin-bottom: 4px;
}

.booking-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.booking-slot {
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.8);
  background: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  padding: 4px 9px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
  white-space: nowrap;
}

.booking-slot:hover {
  transform: translateY(-1px);
  background: rgba(59, 130, 246, 0.96);
  color: #fff;
  box-shadow: 0 10px 18px rgba(59, 130, 246, 0.35);
}

.booking-slot:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 640px) {
  /* Mobile: tall booking modal should start at top (not vertically centered) */
  .booking-modal{
    align-items:flex-start;
    justify-content:center;
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  }
  .booking-modal-inner {
    padding: 14px 14px 16px;
    border-radius: 14px;
    /* Use small viewport units to avoid the address-bar vh bug */
    max-height: calc(100svh - 24px);
  }
}


/* Booking modal footer actions */
.booking-actions{
  display:flex;
  gap:8px;
  margin-top:6px;
  justify-content:flex-end;
}
.booking-actions .btn-mini[aria-disabled="true"]{
  pointer-events:none;
  opacity:0.6;
}


/* Messages panel */
.messages-panel .messages-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.messages-tabs{
  display:flex;
  gap:6px;
}
.messages-tab{
  border-radius:999px;
  border:1px solid #d1e3ff;
  padding:6px 12px;
  font-size:12px;
  background:#f1f5ff;
  cursor:pointer;
}
.messages-tab.is-active{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#f9fafb;
  border-color:transparent;
}
.messages-panes{
  margin-top:8px;
}
.messages-pane{
  display:none;
}
.messages-pane.is-active{
  display:block;
}
.messages-table{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
}
.messages-table th,
.messages-table td{
  font-size:12px;
  padding:6px 8px;
  border-bottom:1px solid #e5e7eb;
}
.messages-row.unread .messages-subject,
.messages-row.unread .messages-from{
  font-weight:600;
}
.messages-link{
  text-decoration:none;
  color:#0f172a;
}
.messages-link:hover{
  text-decoration:underline;
}
.messages-footer{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}
/* Chat-style message list */

.messages-chat{
  margin-top:8px;
}

.messages-chat-list{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.messages-chat-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(226,232,240,0.95);
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.messages-chat-item:hover{
  transform:translateY(-1px);
  background:#ffffff;
}

.messages-chat-item.is-unread{

  box-shadow:0 0 0 1px rgba(56,189,248,0.45);
}

.messages-chat-item.is-active{
  border-color: rgba(255,255,255,0.95);
  background:   rgba(219,234,254,0.55);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.35), 0 10px 26px rgba(56,189,248,0.10);
}

.messages-chat-item.is-active::before{
  content:"";
  position:absolute;
  left:6px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: rgba(56,189,248,0.9);
}

.messages-chat-avatar .avatar-pill{
  width:32px;
  height:32px;
  border-radius:999px;
  background: linear-gradient(
    135deg,
    hsla(var(--avatar-hue, 210), 92%, 42%, 0.95),
    hsla(var(--avatar-hue, 210), 92%, 62%, 0.95)
  );
  color:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  box-shadow: 0 10px 24px rgba(15,23,42,0.20);
  border: 1px solid rgba(255,255,255,0.55);
}

/* Support newer markup used by the client portal conversation list */
.messages-chat-top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:2px;
}

.messages-chat-meta{
  display:flex;
  align-items:center;
  gap:8px;
}

.messages-chat-date{
  font-size:11px;
  color:#9ca3af;
  white-space:nowrap;
}

.messages-chat-unread-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  background: rgba(56,189,248,0.14);
  color:#0369a1;
  border: 1px solid rgba(56,189,248,0.32);
}

.messages-chat-main{
  flex:1;
  min-width:0;
}

.messages-chat-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2px;
}

.messages-chat-name{
  font-size:13px;
  font-weight:600;
  color:#0f172a;
}

.messages-chat-time{
  font-size:11px;
  color:#9ca3af;
  white-space:nowrap;
}

.messages-chat-subject{
  font-size:12px;
  color:#111827;
  margin-bottom:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.messages-chat-snippet{
  font-size:12px;
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.messages-chat-unread-dot{
  position:absolute;
  top:9px;
  right:10px;
  font-size:18px;
  color:#38bdf8;
}



/* ----- Avatar modal (shared) ----- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 920;
}


.modal-backdrop.is-open {
  display: flex;
}

.modal-card {
  width: min(520px, 95vw);
  max-height: calc(100vh - 32px);
  overflow: auto;

  /* Let `.modal-backdrop` (display:flex) center the modal.
     Avoid absolute positioning that can push the modal off-screen on wide layouts. */
  position: relative;
  margin: 0;

  background: #ffffff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 26px 70px rgba(15,23,42,0.45);
}


.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #4b5563;
}

/* ----- Calendar appointment details modal (ensure it overlays fixed header/nav) ----- */
/* Some layouts use high z-index on sticky headers; give this modal a higher stack. */
[data-appt-modal-backdrop] {
  z-index: 99990 !important;
}

[data-appt-modal] {
  z-index: 99999 !important;
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.modal-section {
  margin-top: 8px;
}

.modal-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.avatar-form {
  margin-top: 4px;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.preset-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.preset-option:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-1px);
}

.preset-radio {
  display: none;
}

.preset-emoji {
  font-size: 20px;
}

.preset-img {
  width: 28px;
  height: 28px;
  display: block;
}

.preset-radio:checked + .preset-emoji,
.preset-option input:checked + .preset-emoji {
  transform: scale(1.08);
}

/* Avatar emoji rendering */
.avatar-emoji {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
}

.account-avatar-emoji {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

/* Explicit selected state for avatar presets (helps when radios are hidden) */
.preset-option.is-selected {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-1px);
}

.preset-option.is-selected .preset-emoji {
  transform: scale(1.08);
}



/* Avatar circles in dashboards (client + provider) */
.dashboard-wrap .avatar,
.dash-topbar .avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

/* Uploaded avatar images should fill the circle nicely */
.dashboard-wrap .avatar img,
.dash-topbar .avatar img,
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Emoji in avatar should be centered & large */
.avatar-emoji,
.account-avatar-emoji {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
}



/* --- Warm & cozy journal layout overrides --- */

.journal-card.jr-shell,
.journal-card .jr-shell{
}

.journal-card .jr-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:18px 18px 14px 14px;
  background:#ffffff;
}

.journal-card .jr-top-subtitle{
  font-size:13px;
  color:#1e3a8a;
}

.journal-card .jr-streak-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(248, 250, 252, 0.8);
  border:1px solid rgba(191, 219, 254, 0.9);
  box-shadow:0 8px 18px rgba(37, 99, 235, 0.12);
  font-size:12px;
  color:#1e3a8a;
  font-weight:600;
}

.journal-card .jr-streak-icon{
  font-size:14px;
}

.journal-card .jr-layout{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.journal-card .jr-sidebar{
  position:relative;
}

.journal-card .jr-sidebar-inner{
  position:relative;
  padding:12px 12px 10px;
  border-radius:18px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(226,232,240,0.9);
  box-shadow:0 14px 30px rgba(15,23,42,0.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}

.journal-card .jr-sidebar-inner::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:radial-gradient(circle at 0 0, rgba(255,255,255,.75) 0, transparent 55%);
  opacity:0.5;
  pointer-events:none;
}

.journal-card .jr-sidebar-heading{
  position:relative;
  margin-bottom:10px;
}

.journal-card .jr-sidebar-title{
  font-size:13px;
  font-weight:700;
  color:#1e3a8a;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.journal-card .jr-sidebar-sub{
  font-size:12px;
  color:#1d4ed8;
  margin-top:2px;
}

.journal-card .jr-sidebar-inner [data-jr-empty],
.journal-card .jr-sidebar-inner [data-jr-list]{
  position:relative;
  z-index:1;
}

.journal-card .jr-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.journal-card .jr-item{
  padding:9px 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(248, 250, 252, 0.7);
  box-shadow:0 4px 12px rgba(30, 64, 175, 0.12);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.journal-card .jr-item:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(59, 130, 246, 0.18);
  background:rgba(255,255,255,0.98);
}

.journal-card .jr-main{
  position:relative;
}

.journal-card .jr-main-paper{
  position:relative;
  padding:18px 18px 18px;
  border-radius:22px;
  background:rgba(255,255,255,0.86);
  border:1px solid rgba(191,219,254,0.95);
  background-size:cover;
  box-shadow:0 20px 40px rgba(15,23,42,0.16);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
  overflow:hidden;
}

.journal-card .jr-main-paper::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(to bottom,
                      rgba(248,250,252,0) 0,
                      rgba(248,250,252,0) 22px,
                      rgba(191,219,254,0.6) 23px);
  opacity:0.6;
  pointer-events:none;
}

.journal-card .jr-main-paper > *{
  position:relative;
  z-index:1;
}

/* Warm prompt + editor tweaks */

.journal-card .jr-prompt{
  background:rgba(241,245,249,0.85);
  border-color:rgba(226,232,240,0.9);
}

.journal-card .jr-input{
  background:rgba(255,255,255,0.92);
  border-radius:14px;
  border:1px solid rgba(248, 250, 252, 0.9);
}

.journal-card .jr-input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 1px rgba(248,250,252,0.9), 0 0 0 4px rgba(59,130,246,0.25);
}

.journal-card .jr-tag{
  background:rgba(93, 199, 255, 0.9);
  color:#1e3a8a;
}

.journal-card .jr-tag.is-selected{
  color:#e0f2fe;
}

/* Modal: full-screen overlay for journal entry details */

.journal-card .jr-modal-backdrop{
  position: fixed;
  inset: 0;
  display: none; /* toggled to flex by JS */
  align-items: center;
  justify-content: center;
  /* Calm, soft backdrop (more "reading a page" than "dialog") */
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1300;
  padding: 18px;
}


.journal-card .jr-modal{
  /* Override the global `.jr-modal { display:none; }` rules.
     In the journal, `.jr-modal` is the centered inner card.
  */
  display:block;
  /* Paper-first modal shell (Skyrim-inspired) */
  background: transparent;
  border-radius: 18px;
  padding: 0;
  max-width: 740px;
  width: min(740px, calc(100vw - 36px));
  max-height: min(86vh, 860px);
  overflow: visible;
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.55);
  border: 0;
  position:relative;
}

.journal-card .jr-detail-panel {
  display: none;
}


/* Journal modal content styling */

.journal-card .jr-modal-content{
  /* We render a single "paper" element inside; keep the container neutral */
  display:block;
}

/* --- Skyrim-inspired journal page --- */
.journal-card .jr-view-paper{
  border-radius: 18px;
  padding: 28px 30px 22px;
  overflow: hidden;
  /* Warm paper base + subtle texture */
  background:
    radial-gradient(1200px 400px at 50% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(252, 248, 238, 0.98), rgba(245, 239, 225, 0.98)),
    url(/assets/journal-paper-texture.png);
  background-size: auto, auto, 520px 520px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center top, center, center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -18px 40px rgba(2, 6, 23, 0.06);
  border: 1px solid rgba(30, 41, 59, 0.20);
}

/* Ornate-ish double border + vignette (paper edge) */
.journal-card .jr-view-paper:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 14px;
  border: 1px solid rgba(30, 41, 59, 0.22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
  pointer-events:none;
}

.journal-card .jr-view-paper:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  background:
    radial-gradient(900px 520px at 50% 12%, rgba(0,0,0,0), rgba(2,6,23,0.06) 70%, rgba(2,6,23,0.10) 100%);
  pointer-events:none;
}

.journal-card 
.jr-view-paper--blue{
  /* cooler "calm blue" paper */
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(255,255,255,0.62), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(233, 245, 255, 0.98), rgba(214, 235, 252, 0.98));
  border: 1px solid rgba(120, 170, 205, 0.55);
}

.jr-view-paper--blue .jr-view-divider{
  background: linear-gradient(90deg, rgba(74, 144, 226, 0.0), rgba(74, 144, 226, 0.32), rgba(74, 144, 226, 0.0));
}

.jr-view-watermark{
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 118px;
  height: 118px;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.10;
  pointer-events: none;
  filter: saturate(0.9);
}

.jr-view-paper{
  position: relative;
}

.jr-view-head{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.journal-card .jr-view-title{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.journal-card .jr-view-date{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(51, 65, 85, 0.80);
}

.journal-card .jr-view-badges{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top: 2px;
}

.journal-card .jr-view-badge{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(30, 41, 59, 0.18);
  color: rgba(30, 41, 59, 0.85);
}

.journal-card .jr-view-badge-shared{
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.22);
  color: rgba(2, 132, 199, 0.95);
}

.journal-card .jr-view-tags{
  position: relative;
  z-index: 1;
  margin-top: 12px;
}

.journal-card .jr-view-tags .jr-tags{
  margin-top: 0;
}

.journal-card .jr-view-divider{
  position: relative;
  z-index: 1;
  margin: 16px 0 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(30,41,59,0), rgba(30,41,59,0.22), rgba(30,41,59,0));
}

.journal-card .jr-view-body{
  position: relative;
  z-index: 1;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(17, 24, 39, 0.92);
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 6px;
}

.journal-card .jr-view-body p{ margin: 0 0 12px; }
.journal-card .jr-view-body ul,
.journal-card .jr-view-body ol{ margin: 10px 0 14px 22px; }

/* Keep scrollbars subtle */
.journal-card .jr-view-body::-webkit-scrollbar{ width: 10px; }
.journal-card .jr-view-body::-webkit-scrollbar-thumb{ background: rgba(30,41,59,0.18); border-radius: 999px; }
.journal-card .jr-view-body::-webkit-scrollbar-track{ background: rgba(30,41,59,0.06); border-radius: 999px; }

.journal-card .jr-modal-actions{
  position:absolute;
  top: 14px;
  right: 14px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index: 3;
}

.journal-card .jr-modal-actions .btn-mini{
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
}

.journal-card .jr-modal-actions .btn-mini.btn-cta{
  background: rgba(17,24,39,0.92);
  color:#f9fafb;
  border: 1px solid rgba(17,24,39,0.55);
}

.journal-card .jr-modal-actions .btn-mini.btn-cta:hover{
  background:#020617;
}

.journal-card .jr-modal-actions .jr-delete{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(148,163,184,0.65);
  color: rgba(51,65,85,0.95);
}

.journal-card .jr-modal-actions .jr-delete:hover{
  background:rgba(148,163,184,0.08);
}


.journal-card .jr-icon-action{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,0.65);
  background: rgba(252, 248, 238, 0.92);
  cursor:pointer;
  padding:0;
  color: rgba(30,41,59,0.88);
}

.journal-card .jr-icon-action .jr-icon{
  width: 16px;
  height: 16px;
  fill: currentColor;
  display:block;
}

.journal-card .jr-icon-action:hover{
  background:#f9fafb;
  border-color: rgba(148,163,184,0.95);
  color:#111827;
}

.journal-card .jr-icon-delete{
  color: rgba(185,28,28,0.85);
}

.journal-card .jr-icon-delete:hover{
  color: rgba(185,28,28,0.98);
}


/* Close button sits inside .jr-modal-actions (no absolute positioning) */
.journal-card .jr-modal-actions .jr-modal-close{
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.65);
  background: rgba(252, 248, 238, 0.92);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 18px;
  color: rgba(30,41,59,0.88);
}

.journal-card .jr-modal-actions .jr-modal-close:hover{
  background: #f9fafb;
  border-color: rgba(148,163,184,0.95);
  color: #111827;
}

.journal-card .jr-modal-close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius:999px;
  border:1px solid rgba(30,41,59,0.22);
  background: rgba(252, 248, 238, 0.92);
  font-size: 16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: rgba(30,41,59,0.88);
  z-index: 2;
}

.journal-card .jr-modal-close:hover{
  background:#f9fafb;
  border-color:rgba(148,163,184,0.9);
  color:#111827;
}

/* Compose (editor) modal: warm journal paper + blue glass lotus feel */

.journal-card .jr-compose-hint{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(226,232,240,0.55);
  border:1px solid rgba(191,219,254,0.75);
  color:#1f2937;
}

.journal-card .jr-compose-hint-title{
  font-weight:700;
  font-size:13px;
}

.journal-card .jr-compose-hint-sub{
  margin-top:4px;
  font-size:12px;
  color:#475569;
}

.journal-card .jr-compose-backdrop{
  position:fixed;
  inset:0;
  display:none; /* toggled to flex */
  align-items:center;
  justify-content:center;
  background:rgba(2, 132, 199, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:1400;
}


.journal-card .jr-compose-modal{
  width:min(85%);
  max-height:75%;
  border-radius:28px;
  padding:18px 18px 16px;
  /* Slightly more opaque frosted glass so content reads warmly over busy backgrounds */
  background:linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.22));
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:0 24px 70px rgba(15,23,42,0.42);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  position:relative;
}

/* Bottom-right character inside the Journal modal */
.journal-card .jr-compose-character{
  position:absolute;
  right:14px;
  bottom:14px;
  width:92px;
  height:auto;
  z-index:2;
  pointer-events:none;
  opacity:0.98;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,0.28));
}

@media (max-width: 720px){
  /* On mobile, keep AJ clear of action buttons and the bottom-right helper bubble */
  .journal-card .jr-compose-character{
    width:72px;
    right:12px;
    bottom:86px;
  }
}

/* Mobile: make the compose modal feel like a full-screen journal page.
   The Cancel button is the primary escape hatch; we still keep the X for convenience. */
@media (max-width: 720px){
  .journal-card .jr-compose-backdrop{
    align-items:stretch;
    justify-content:stretch;
  }

  .journal-card .jr-compose-modal{
    width:100%;
    max-height:none;
    height:100%;
    border-radius:0;
    padding:14px 14px 16px;
    overflow-y:auto;
  }

  .journal-card .jr-compose-modal::before{
    /* keep the soft bloom, but pull it in so it doesn't look like a cropped artifact */
    inset:-30px -30px auto auto;
  }
}

.journal-card .jr-compose-modal::before{
  /* Subtle lotus-like bloom, very soft */
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width:260px;
  height:260px;
  background:radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.22), rgba(167, 139, 250, 0.10) 45%, rgba(255,255,255,0) 70%);
  filter: blur(2px);
  pointer-events:none;
}

.journal-card .jr-compose-close{
  position:sticky;
  top:10px;
  margin-left:auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.65);
  background:rgba(255,255,255,0.92);
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
}

.journal-card .jr-compose-close:hover{
  border-color:rgba(59,130,246,0.55);
  box-shadow:0 0 0 4px rgba(59,130,246,0.14);
}

.journal-card .jr-compose-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:-6px;
  padding:6px 6px 10px;
}

.journal-card .jr-compose-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#000;
}

.journal-card .jr-compose-title{
  font-size:18px;
  font-weight:800;
  color:#000;
  margin-top:4px;
}

.journal-card .jr-guide{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
}

.journal-card .jr-guide-label{
  font-size:11px;
  font-weight:700;
  color:#fff;
}

.journal-card .jr-guide-select{
  border-radius:999px;
  padding:6px 12px;
  background:rgba(241,245,249,0.92);
  border:1px solid rgba(191,219,254,0.9);
  color:#0f172a;
  font-weight:700;
}

.journal-card .jr-editor-top{
  padding:0 6px;
}

.journal-card .jr-compose-grid{
  display:grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap:14px;
  padding:0 6px;
}

@media (max-width: 900px){
  .journal-card .jr-compose-grid{ grid-template-columns:1fr; }
}

.journal-card .jr-compose-paper{
  position:relative;
  border-radius:22px;
  padding:14px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.95), rgba(255,255,255,0.78) 45%, rgba(255,255,255,0.70) 70%),
    repeating-linear-gradient(to bottom, rgba(15,23,42,0) 0, rgba(15,23,42,0) 24px, rgba(59,130,246,0.16) 25px),
    linear-gradient(180deg, rgba(254,252,232,0.86), rgba(255,255,255,0.72));
  border:1px solid rgba(148,163,184,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 16px 36px rgba(15,23,42,0.18);
  overflow:hidden;
}

.journal-card .jr-compose-paper::before{
  /* Worn binding / spine */
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:0px;
  opacity:0.7;
}


.journal-card .jr-rt-toolbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px 10px 50px;
  border-radius:18px;
  background:rgba(241,245,249,0.76);
  border:1px solid rgba(191,219,254,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);

  /* Mobile safety: if the toolbar is wider than the card, allow horizontal scroll
     instead of clipping the right-most tools (e.g., color dots). */
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

.journal-card .jr-rt-toolbar::before{
  /* Pencil tip hint */
  content:"✎";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  opacity:0.8;
  color:#0f172a;
}

.journal-card .jr-rt-btn{
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(255,255,255,0.9);
  border-radius:12px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  color:#0f172a;
  flex: 0 0 auto;
}

.journal-card .jr-rt-colors,
.journal-card .jr-rt-colors *{
  flex: 0 0 auto;
}

@media (max-width: 520px){
  /* Reduce left padding (pencil hint) on narrow devices to maximize usable space */
  .journal-card .jr-rt-toolbar{ padding-left: 38px; gap: 6px; }
  .journal-card .jr-rt-toolbar::before{ left: 14px; }
}

.journal-card .jr-rt-btn:hover{
  box-shadow:0 0 0 4px rgba(59,130,246,0.14);
  border-color:rgba(59,130,246,0.55);
}

.journal-card .jr-rt-sep{
  width:1px;
  height:18px;
  background:rgba(148,163,184,0.55);
  margin:0 4px;
}

.journal-card .jr-rt-colors{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 0 0 auto;
}

.journal-card .jr-rt-color{
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.25);
  background: #0ea5e9;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.journal-card .jr-rt-color[data-jr-color="#0ea5e9"]{ background:#0ea5e9; }
.journal-card .jr-rt-color[data-jr-color="#22c55e"]{ background:#22c55e; }
.journal-card .jr-rt-color[data-jr-color="#f97316"]{ background:#f97316; }
.journal-card .jr-rt-color[data-jr-color="#a78bfa"]{ background:#a78bfa; }
.journal-card .jr-rt-color[data-jr-color="#ef4444"]{ background:#ef4444; }
.journal-card .jr-rt-color[data-jr-color="#0f172a"]{ background:#0f172a; }

.journal-card .jr-rich-wrap{
  position:relative;
  margin-top:12px;
}

.journal-card .jr-rich{
  /* Give more room to the modal footer actions on smaller viewports */
  min-height:240px;
  max-height:40vh;
  overflow-y:auto;
  padding:14px 14px 18px;
  border-radius:18px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(148,163,184,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  font-size:15px;
  line-height:1.85;
  color:#0f172a;
  outline:none;
}

/* Guide mode control now lives above the guidance panel */
.journal-card .jr-guidance-controls{
  margin-top:10px;
  display:flex;
  justify-content:flex-start;
}

.journal-card .jr-guide.jr-guide-inline{
  align-items:flex-start;
}

.journal-card .jr-guidance .jr-guide-label{
  color:#0f172a;
}

.journal-card .jr-guidance .jr-guide-select{
  background:rgba(255,255,255,0.90);
}

.journal-card .jr-rich:focus{
  border-color:rgba(59,130,246,0.6);
  box-shadow:0 0 0 1px rgba(255,255,255,0.65), 0 0 0 5px rgba(59,130,246,0.18);
}

.journal-card .jr-render ul,
.journal-card .jr-render ol{
  padding-left:18px;
  margin:8px 0;
}

.journal-card .jr-guidance{
  border-radius:22px;
  padding:14px;
  background:rgba(2, 132, 199, 0.10);
  border:1px solid rgba(191,219,254,0.75);
  box-shadow:0 10px 26px rgba(15,23,42,0.12);
}

.journal-card .jr-guidance-head{ display:flex; flex-direction:column; gap:4px; }
.journal-card .jr-guidance-title{ font-weight:800; color:#0f172a; }
.journal-card .jr-guidance-sub{ font-size:12px; color:#475569; }
.journal-card .jr-guidance-list{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.journal-card .jr-guidance-chip{
  text-align:left;
  border-radius:18px;
  padding:10px 12px;
  background:rgba(255,255,255,0.80);
  border:1px solid rgba(191,219,254,0.85);
  color:#0f172a;
  cursor:pointer;
  font-size:12.5px;
  line-height:1.35;
}

.journal-card .jr-guidance-chip:hover{
  box-shadow:0 0 0 4px rgba(59,130,246,0.14);
}

.journal-card .jr-guidance-loading{
  font-size:12px;
  font-weight:700;
  color:#475569;
  opacity:0.9;
}

.journal-card .jr-guidance-foot{ margin-top:10px; }
.journal-card .jr-guidance-note{ font-size:11px; color:#64748b; }



/* Messages split layout: list + thread */
.messages-layout{
  display:flex;
  align-items:stretch;
}

.messages-split-left{
  flex:0 0 320px;
  max-width:360px;
}

.messages-split-right{
  flex:1 1 auto;
}

@media (max-width: 960px){
  .messages-layout{
    flex-direction:column;
  }
  .messages-split-left,
  .messages-split-right{
    flex:1 1 auto;
    max-width:none;
  }
}


/* ---------------- Messages thread chat styling (scoped to dashboard) ---------------- */

.messages-panel-thread{
  margin-top: 8px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.55));
}

/* When using the newer Polly-style chat window, remove the extra wrapper shell */
.messages-panel-thread.messages-panel-thread--polly{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Stack of messages */
.messages-panel-thread .message-thread{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 6px;
}

/* Individual message bubble */
.messages-panel-thread .message-thread-item{
  max-width: 520px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  position: relative;
}

/* Subtle "chat bubble" tail */
.messages-panel-thread .message-thread-item::after{
  content:"";
  position:absolute;
  bottom:10px;
  left:-6px;
  width:12px;
  height:12px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 0 0 12px 0;
  transform: rotate(45deg);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

/* Align your own messages to the right, with blue glass bubble */
.messages-panel-thread .message-thread-item.is-mine{
  margin-left: auto;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(191, 219, 254, 0.82));
  border-color: rgba(56, 189, 248, 0.45);
}

.messages-panel-thread .message-thread-item.is-mine::after{
  left: auto;
  right: -6px;
  background: rgba(191, 219, 254, 0.82);
  border-radius: 0 0 0 12px;
}

/* Lightweight meta line under each bubble */
.messages-panel-thread .message-bubble-meta{
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.messages-panel-thread .message-bubble-time{
  white-space: nowrap;
}

/* Header meta row */
.messages-panel-thread .message-thread-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6b7280;
}

.messages-panel-thread .message-thread-from strong{
  color: #111827;
}

/* Small "(you)" tag */
.messages-panel-thread .tag-you{
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 600;
}

/* Status badges */
.messages-panel-thread .badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.messages-panel-thread .badge-read{
  background: rgba(34, 197, 94, 0.09);
  color: #15803d;
}

.messages-panel-thread .badge-sent{
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}

/* Message body text */
.messages-panel-thread .message-thread-body{
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.7;
  color: #111827;
}

/* Make the scrollbar subtle inside the conversation pane */
.messages-panel-thread .message-thread::-webkit-scrollbar{ width: 10px; }
.messages-panel-thread .message-thread::-webkit-scrollbar-track{ background: transparent; }
.messages-panel-thread .message-thread::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.35);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.35);
}

/* Reply block at bottom */
.messages-panel-thread .messages-reply{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.messages-panel-thread .messages-reply h2.card-title{
  margin-bottom: 8px;
}

.messages-panel-thread .messages-reply .form-row{
  margin-bottom: 10px;
}

.messages-panel-thread .messages-reply .form-label{
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.messages-panel-thread .messages-reply .form-static{
  padding: 7px 10px;
  border-radius: 12px;

  background: rgba(248, 250, 252, 0.96);
  font-size: 14px;
  color: #111827;
}


/* --------------------------------------------------------------------------
   Polly-style embedded chat window (Messages)

   Goal: make provider/client conversations feel as polished as the Polly AI chat,
   while staying fully embedded inside the Messages panel.
---------------------------------------------------------------------------- */

.messages-chat-window{
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.messages-chat-window__header{
  display: flex;
  border: 1px solid rgba(255,255,255,0.65);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  background: rgba(219, 234, 254, 0.34);
}

.messages-chat-window__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.messages-chat-window__avatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: rgba(15, 23, 42, 0.90);
  border: 2px solid rgba(255,255,255,0.78);
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(220,235,255,0.55));
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  flex: 0 0 auto;
}

.messages-chat-window__title{ min-width: 0; }
.messages-chat-window__name{
  font-weight: 550;
  color: #0f172a;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-chat-window__subtitle{
  font-size: 12px;
  color: rgba(30, 41, 59, 0.72);
}

.messages-chat-window__meta{
  flex: 0 0 auto;
  color: rgba(30, 41, 59, 0.70);
  font-size: 12px;
  white-space: nowrap;
}

.messages-chat-window__messages{
  padding: 14px 14px 10px;
  height: clamp(260px, 52vh, 560px);
  overflow: auto;
}

.messages-chat-window__messages::-webkit-scrollbar{ width: 10px; }
.messages-chat-window__messages::-webkit-scrollbar-track{ background: transparent; }
.messages-chat-window__messages::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.35);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.35);
}

.messages-chat-msg{
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.messages-chat-msg--theirs{ align-items: flex-start; }
.messages-chat-msg--mine{ align-items: flex-end; }

.messages-chat-bubble{
  position: relative;
  max-width: min(640px, 86%);
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(15, 23, 42, 0.92);
  line-height: 1.45;
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
}

/* "Polly"-like assistant bubble styling for the other person */
.messages-chat-msg--theirs .messages-chat-bubble{
  background: linear-gradient(135deg, rgba(236, 248, 255, 0.78), rgba(210, 233, 255, 0.56));
  border: 1px solid rgba(140, 190, 240, 0.35);
}

.messages-chat-msg--theirs .messages-chat-bubble::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}

.messages-chat-msg--theirs .messages-chat-bubble::after{
  content: "";
  position: absolute;
  left: -7px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(236, 248, 255, 0.78), rgba(210, 233, 255, 0.56));
  border-left: 1px solid rgba(140, 190, 240, 0.35);
  border-bottom: 1px solid rgba(140, 190, 240, 0.35);
  transform: rotate(45deg);
  border-bottom-left-radius: 6px;
}

/* Your bubble: calm blue glass */
.messages-chat-msg--mine .messages-chat-bubble{
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(147, 197, 253, 0.18));
  border: 1px solid rgba(59, 130, 246, 0.26);
}

.messages-chat-msg--mine .messages-chat-bubble::after{
  content: "";
  position: absolute;
  right: -7px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(147, 197, 253, 0.18));
  border-right: 1px solid rgba(59, 130, 246, 0.26);
  border-bottom: 1px solid rgba(59, 130, 246, 0.26);
  transform: rotate(45deg);
  border-bottom-right-radius: 6px;
}

.messages-chat-bubble p{ margin: 0 0 8px; }
.messages-chat-bubble p:last-child{ margin-bottom: 0; }

.messages-chat-bubble-meta{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(100, 116, 139, 0.92);
  display: flex;
  gap: 8px;
  align-items: center;
}

.messages-chat-msg--mine .messages-chat-bubble-meta{ justify-content: flex-end; }

.messages-chat-bubble-status{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.40);
}

.messages-chat-window__composer{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.40);
}

.messages-chat-composer__row{
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.messages-chat-composer__input{
  flex: 1 1 auto;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(219, 234, 254, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  outline: none;
  font-size: 14px;
  line-height: 1.35;
}

.messages-chat-composer__input:focus{
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14), inset 0 1px 0 rgba(255,255,255,0.55);
}

.messages-chat-composer__send{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(59, 130, 246, 0.90);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
  cursor: pointer;
}

.messages-chat-composer__send:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.32);
}

.messages-chat-composer__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(30, 41, 59, 0.62);
}

/* --- Rich message composer (Slack-like helpers) --------------------------- */
.messages-rich-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  position: relative;
}

.messages-rich-toolbar--form{
  margin: 8px 0 8px;
}

.messages-rich-spacer{ flex: 1 1 auto; }

.messages-rich-btn{
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  color: rgba(30, 41, 59, 0.9);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.messages-rich-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.messages-emoji-popover{
  position: absolute;
  right: 0;
  /* open upward to avoid clipping inside constrained panels */
  top: auto;
  bottom: 44px;
  z-index: 9999;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
  max-height: 240px;
  overflow: auto;
}

.messages-emoji-grid{
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 6px;
}

.messages-emoji{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.messages-emoji:hover{
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}


/* Inputs inside the reply area only */
.messages-panel-thread .messages-reply .form-control{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  font-size: 14px;
}

.messages-panel-thread .messages-reply textarea.form-control{
  min-height: 90px;
  resize: vertical;
}

/* Reply button */
.messages-panel-thread .messages-reply .form-actions{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.messages-panel-thread .messages-reply .btn-primary{
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
}


/* -------------------------------------------------------------------------
   Global form controls (used across modals + portals)
   NOTE: Previously .form-control styling was scoped to the messaging thread,
   so other forms (ex: Schedule a Session modal) looked unstyled.
---------------------------------------------------------------------------*/

input.form-control,
textarea.form-control{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}

select.form-control{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}

/* Make Rails datetime_select groups look intentional (many selects in a row) */
select.form-control{
  display: inline-block;
  width: auto;
  min-width: 110px;
  margin-right: 6px;
  margin-bottom: 6px;
}

/* Bigger, nicer textareas for notes */
textarea.form-control{
  min-height: 120px;
  resize: vertical;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus{
  outline: none;
  border-color: rgba(2,132,199,0.65);
  box-shadow: 0 0 0 4px rgba(2,132,199,0.16);
  background: #ffffff;
}

/* Placeholder tone */
.form-control::placeholder{
  color: rgba(100,116,139,0.85);
}

/* Small label helper (optional) */
.field-label{
  display:block;
  font-weight: 800;
  font-size: 12px;
  color: #0f172a;
  margin: 0 0 6px;
}
.field-help{
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
}




/* --- Provider dashboard: Outlook-style Day view --- */
.board.board--dash-two{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
}
@media (max-width: 1100px){
  .board.board--dash-two{
    grid-template-columns: minmax(0,1fr);
  }
}

.col--day{
  /* Don't force a full-height column; the calendar panel manages its own height. */
  height: auto;
}
.outlook-day{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  /* Compact panel that still allows a full-day view via internal scroll */
  height: clamp(360px, 48vh, 480px);
  min-height: 0;
}
.outlook-day .od-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.65);
}
.outlook-day .od-title{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.outlook-day .od-date{
  font-size: 13px;
  color: var(--ink-600);
}

.outlook-day .od-body{
  height: calc(100% - 48px);
  overflow: hidden;
}
.outlook-day .od-grid{
  display:grid;
  grid-template-columns: 72px minmax(0,1fr);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.outlook-day .od-gutter{
  padding-top: 8px;
  border-right: 1px solid rgba(148,163,184,.20);
  background: rgba(255,255,255,.55);
}
.outlook-day .od-time{
  position: relative;
  padding: 6px 10px 0 8px;
  font-size: 12px;
  color: var(--ink-500);
  text-align: right;
}
.outlook-day .od-time span{
  display: inline-block;
}

.outlook-day .od-slots{
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-top: 8px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.78), rgba(255,255,255,.62));
}
.outlook-day .od-slot{
  border-top: 1px solid rgba(148,163,184,.22);
}
.outlook-day .od-slot:nth-child(2n){
  border-top-style: dashed;
  opacity: .8;
}

.outlook-day .od-now{
  position:absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(239, 68, 68, .9);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .12);
  pointer-events:none;
  z-index: 5;
}
.outlook-day .od-now::before{
  content:"";
  position:absolute;
  left:-6px;
  top:-4px;
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(239,68,68,.95);
  box-shadow: 0 8px 20px rgba(239,68,68,.22);
}

.outlook-day .od-event{
  position:absolute;
  left: 10px;
  right: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(59,130,246,.32);
  background: rgba(191,219,254,.55);
  box-shadow: 0 12px 26px rgba(15,23,42,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  z-index: 6;
}
.outlook-day .od-event.is-confirmed{
  border-color: rgba(14,165,233,.35);
  background: rgba(224,242,254,.70);
}
.outlook-day .od-event.is-requested{
  border-color: rgba(59,130,246,.30);
  background: rgba(219,234,254,.62);
}
.outlook-day .od-event.is-cancelled{
  border-color: rgba(148,163,184,.38);
  background: rgba(226,232,240,.70);
  opacity: .85;
}
.outlook-day .od-event-title{
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.outlook-day .od-event-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-700);
  flex-wrap: wrap;
}

.outlook-day .od-event-note{
  font-size: 11px;
  color: rgba(71, 85, 105, 0.86);
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.outlook-day .od-event-status{
  font-size: 11px;
  color: var(--ink-500);
  text-transform: capitalize;
}

.outlook-day .od-empty{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.45);
  color: var(--ink-600);
  background: rgba(255,255,255,.58);
}


/* -------------------------------------------------------------------------
   Provider Portal — Client Profiles (two-column layout)
   ------------------------------------------------------------------------- */
.cp-grid{
  display:flex;
  align-items:flex-start;
  gap:22px;
  flex-wrap:nowrap;
}

.cp-left{
  flex: 0 0 360px;
  width: 360px;
  max-width: 360px;
  min-width: 280px;
}

.cp-right{
  flex: 1 1 auto;
  min-width: 0; /* prevents overflow causing horizontal scroll */
}

.cp-invite{
  margin-top: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 18px 45px rgba(148,163,184,0.28);
  padding: 16px 16px 18px;
}

@media (max-width: 980px){
  .cp-grid{ flex-direction: column; }
  .cp-left{ width: 100%; max-width: none; flex-basis: auto; }
}



/* --- Client Management / Client Profiles polish --- */
.avatar.avatar-flat{
  box-shadow:none !important;

  /* Prevent broken-image icons; show a clean silhouette fallback instead */
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(226,232,240,.92));
  border: 1px solid rgba(148,163,184,.55);
}

.avatar.avatar-flat:before{
  content:"";
  position:absolute;
  inset: 18%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20fill%3D'rgba(100,116,139,0.55)'%20d%3D'M32%2034c8.1%200%2014.7-6.6%2014.7-14.7S40.1%204.6%2032%204.6%2017.3%2011.2%2017.3%2019.3%2023.9%2034%2032%2034zm0%206.2c-12.3%200-22.2%207.2-22.2%2016.1%200%202%201.6%203.6%203.6%203.6h37.2c2%200%203.6-1.6%203.6-3.6%200-8.9-9.9-16.1-22.2-16.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
  opacity: .95;
  pointer-events:none;
}

.avatar.avatar-flat img,
.avatar.avatar-flat .avatar-emoji,
.avatar.avatar-flat .avatar-initial{
  position: relative;
  z-index: 2;
}

.avatar.avatar-flat img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Client Financials – selected client contact header */
.client-crm-contact-head{
  display:flex;
  gap:12px;
  align-items:center;
}

.client-crm-contact-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.client-crm-contact-name{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}

.client-crm-contact-sub,
.client-crm-contact-address{
  font-size:12px;
  color:#64748b;
  line-height:1.35;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.client-crm-contact-address{
  color:#475569;
}

.client-mgmt .search-row{
  display:flex !important;
  align-items:center;
  gap:10px;
  width:100%;
}

.client-mgmt .search-row .input{
  flex:1 1 auto;
  min-width:0;
}

.client-mgmt .search-row .btn-mini{
  white-space:nowrap;
}

/* --- Client Management: full-width invite row (top) --- */
.client-mgmt .client-mgmt-invite-top{
  padding:16px 16px;
  border-radius:22px;
  margin-bottom:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* --- Client Management: polished top bar (invite + management controls) --- */
.client-mgmt .client-mgmt-pagehead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:0 4px;
}

.client-mgmt .client-mgmt-pagehead__title{
  font-weight:950;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-700);
  font-size:13px;
}

.client-mgmt .client-mgmt-pagehead__meta{
  font-size:12px;
  color:var(--ink-500);
  font-weight:800;
}

.client-mgmt .client-mgmt-topbar{
  padding:16px 16px;
  border-radius:24px;
  margin-bottom:16px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:18px;
}

.client-mgmt .client-mgmt-topbar__left,
.client-mgmt .client-mgmt-topbar__right{
  flex:1 1 0;
  min-width:0;
}

.client-mgmt .client-mgmt-topbar__left{
  padding-right:6px;
  border-right:1px solid rgba(148,163,184,0.25);
}

.client-mgmt .client-mgmt-topbar__right{
  padding-left:6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.client-mgmt .invite-top__form--compact{
  margin-top:10px;
}

.client-mgmt .client-mgmt-topbar__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.client-mgmt .client-mgmt-title-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.client-mgmt .client-mgmt-kicker{
  font-weight:950;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-700);
  font-size:13px;
}

.client-mgmt .client-mgmt-count{
  font-size:12px;
  color:var(--ink-500);
}

.client-mgmt .client-mgmt-export-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:0;
}

.client-mgmt .client-mgmt-export-label{
  font-size:12px;
  color:var(--ink-500);
  font-weight:800;
}

.client-mgmt .client-mgmt-export-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.client-mgmt .client-mgmt-export-note{
  font-size:12px;
  color:var(--ink-500);
  max-width:280px;
  text-align:right;
}

.client-mgmt .client-mgmt-divider{
  margin:12px 0 10px;
  border-top:1px dotted rgba(70, 90, 120, 0.35);
  width:100%;
}


.client-mgmt .client-mgmt-search-label{
  font-size:12px;
  color:var(--ink-500);
  font-weight:900;
  margin-top:10px;
  margin-bottom:6px;
}

.client-mgmt .icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(255,255,255,0.70);
  text-decoration:none;
  color:var(--ink-800);
  font-weight:900;
  letter-spacing:0.01em;
  box-shadow:0 10px 26px rgba(2,6,23,0.06);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.client-mgmt .icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(2,6,23,0.08);
  border-color:rgba(99,102,241,0.30);
}

.client-mgmt .icon-btn:active{
  transform:translateY(0px);
}

.client-mgmt .icon-btn__icon{
  display:inline-flex;
  line-height:0;
}

.client-mgmt .icon-btn__text{
  font-size:12px;
}

.client-mgmt .icon-btn.is-disabled{
  opacity:0.55;
  pointer-events:none;
}

.client-mgmt .client-mgmt-search--topbar{
  margin-top:2px;
}

.client-mgmt .invite-top__meta{
  flex:1 1 1px;
  min-width:220px;
}

.client-mgmt .invite-top__title{
  font-weight:900;
  color:var(--ink-900);
  font-size:14px;
  letter-spacing:0.01em;
}

.client-mgmt .invite-top__sub{
  margin-top:4px;
  font-size:13px;
  color:var(--ink-600);
  line-height:1.35;
}

.client-mgmt .invite-top__form{
  flex:2 1 5px;
  min-width:280px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

.client-mgmt .invite-top__field{ min-width:0; flex:1 1 190px; }
.client-mgmt .invite-top__label{
  font-size:12px;
  font-weight:800;
  color:var(--ink-700);
  margin-bottom:6px;
}

.client-mgmt .invite-top__money{
  display:flex;
  gap:8px;
  align-items:center;
}

.client-mgmt .invite-top__money-sign{
  color:var(--ink-500);
  font-weight:900;
}

.client-mgmt .invite-top__submit{
  flex:0 0 auto;
  white-space:nowrap;
  height:36px;
  padding-left:18px;
  padding-right:18px;
  border-radius:18px; /* more "button", less pill */
  font-weight:900;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));  
}

/* --- Client Management: responsive two-column layout (desktop) --- */
.client-mgmt .client-mgmt-layout{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:nowrap;
}

.client-mgmt .client-mgmt-left{
  flex:1 1 320px;
  min-width:260px;
  max-width:360px;
}

.client-mgmt .client-mgmt-right{
  flex:2 1 auto;
  min-width:0;
}

.client-mgmt .client-mgmt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.client-mgmt .client-mgmt-mobile-back{
  display:none;
  margin-bottom:10px;
}

/* --- Client Management: mobile layout --- */
@media (max-width: 740px){
  .client-mgmt .client-mgmt-invite-top{ align-items:stretch; }
  .client-mgmt .client-mgmt-topbar{
    flex-direction:column;
    gap:14px;
  }

  .client-mgmt .client-mgmt-topbar__left{
    padding-right:0;
    border-right:none;
    border-bottom:1px solid rgba(148,163,184,0.25);
    padding-bottom:14px;
  }

  .client-mgmt .client-mgmt-topbar__right{
    padding-left:0;
  }

  .client-mgmt .invite-top__form--compact{
    grid-template-columns: 1fr;
  }

  .client-mgmt .client-mgmt-topbar__head{
    align-items:flex-start;
    flex-direction:column;
  }

  .client-mgmt .client-mgmt-export-wrap{
    align-items:flex-start;
  }

  .client-mgmt .client-mgmt-export-note{ text-align:left; }
  .client-mgmt .invite-top__meta{ min-width:0; }
  .client-mgmt .invite-top__form{
    grid-template-columns: 1fr;
  }
  .client-mgmt .invite-top__submit{ width:100%; }

  .client-mgmt .client-mgmt-layout{
    flex-direction:column;
    gap:14px;
  }

  .client-mgmt .client-mgmt-left,
  .client-mgmt .client-mgmt-right{
    max-width:none;
    min-width:0;
    width:100%;
  }

  /* Avoid a cramped scroll-within-scroll experience */
  .client-mgmt .client-mgmt-list{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }

  /* Slightly tighter cards + clearer tap targets */
  .client-mgmt .client-card{
    border-radius:18px;
  }

  .client-mgmt .client-card-cta{
    font-weight:800;
  }

  /* Show a back link above the profile when a client is selected */
  .client-mgmt .client-mgmt-mobile-back{
    display:block;
  }

  /* Ensure the panel isn't tucked under the fixed header on small screens */
  .dash-card.client-mgmt{
    scroll-margin-top:84px;
  }
}

.client-mgmt .profile-header{
  display:flex;
  align-items:center;
  gap:12px;
}

.client-mgmt .profile-header .avatar{
  width:46px;
  height:46px;
}

.client-mgmt .profile-meta{
  margin-top:4px;
  font-size:14px;
  opacity:0.78;
}

/* --- Client Management: right panel (match Sessions & Notes dash-card typography) --- */

/* --- Provider: Pending session request alerts (dashboard + calendar) --- */
.dash-card--requests .dash-subtle{ color: var(--ink-500); }
.session-requests{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.session-requests__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(148,163,184,0.32);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.session-requests__meta{
  min-width: 0;
}
.session-requests__title{
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom:4px;
}
.session-requests__sub{
  font-size: 0.92rem;
  opacity: 0.78;
}
.session-requests__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.session-requests__actions .btn-mini{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.75);
  background: rgba(255,255,255,.86);
  color: var(--ink-900);
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration:none;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.session-requests__actions .btn-mini i{ font-size: 1.02em; }
.session-requests__actions .btn-mini:hover{ background: rgba(255,255,255,1); border-color: rgba(148,163,184,.92); }

.session-requests__actions .btn-mini--primary{ border-color: rgba(16,185,129,0.48); background: rgba(16,185,129,0.12); }
.session-requests__actions .btn-mini--primary:hover{ background: rgba(16,185,129,0.16); }

.session-requests__actions .btn-mini--danger{ border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); }
.session-requests__actions .btn-mini--danger:hover{ background: rgba(239,68,68,0.14); }

.session-requests__actions .btn-mini--neutral{ border-color: rgba(59,130,246,0.40); background: rgba(59,130,246,0.08); }
.session-requests__actions .btn-mini--neutral:hover{ background: rgba(59,130,246,0.12); }

/* Compact "Yes / No" buttons for request decisions */
.session-requests__actions .btn-mini--yn{
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  min-width: 72px;
  justify-content:center;
  gap: 6px;
}
.session-requests__actions .btn-mini--yes{ border-color: rgba(16,185,129,0.48); background: rgba(16,185,129,0.12); }
.session-requests__actions .btn-mini--yes:hover{ background: rgba(16,185,129,0.16); }
.session-requests__actions .btn-mini--no{ border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); }
.session-requests__actions .btn-mini--no:hover{ background: rgba(239,68,68,0.14); }

@media (max-width: 640px){
  .session-requests__row{ flex-direction:column; }
  .session-requests__actions{ justify-content:flex-start; }
}

@media (max-width: 420px){
  .session-requests__actions{ width: 100%; }
  .session-requests__actions .btn-mini{
    width: 100%;
    justify-content:center;
  }
}

/* --- Appointment modal: provider decision buttons + propose hint --- */
.appt-modal-provider-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.appt-modal-provider-actions__btn{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #eaf6ff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 9px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.appt-modal-provider-actions__btn i{ font-size: 0.98em; }
.appt-modal-provider-actions__btn--confirm,
.appt-modal-provider-actions__btn--decline{
  padding: 7px 10px;
  font-size: 0.84rem;
}
.appt-modal-provider-actions__btn:hover{ background: rgba(255,255,255,0.16); }
.appt-modal-provider-actions__btn--confirm{ border-color: rgba(80,220,200,0.40); }
.appt-modal-provider-actions__btn--decline{ border-color: rgba(255,80,80,0.40); }
.appt-modal-provider-actions__btn--propose{ border-color: rgba(255,255,255,0.30); }
.appt-modal-propose-hint{
  margin-top:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  font-size: 0.90rem;
}

/* The appointment modal uses a light glass panel, so the default "dark-on-dark"
   button styling above can look washed out. Override within the modal card. */
.client-details-modal-inner .appt-modal-provider-actions__btn{
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
.client-details-modal-inner .appt-modal-provider-actions__btn:hover{
  background: rgba(15, 23, 42, 0.06);
}
.client-details-modal-inner .appt-modal-provider-actions__btn--confirm{
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}
.client-details-modal-inner .appt-modal-provider-actions__btn--decline{
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.08);
}
.client-details-modal-inner .appt-modal-provider-actions__btn--propose{
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
}

.client-details-modal-inner .appt-modal-propose-hint{
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.03);
  color: #334155;
}
.client-details-modal-inner .appt-modal-propose-hint{
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.03);
  color: #0f172a;
}

/* --- Provider: My Calendar session requests list --- */
.calendar-requests{
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  padding: 12px;
}
.calendar-requests__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.calendar-requests__title{ font-weight: 700; }
.calendar-requests__list{ display:flex; flex-direction:column; gap:10px; }
.calendar-requests__row{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.calendar-requests__meta{ min-width: 180px; flex: 1 1 auto; }
.calendar-requests__name{ font-weight: 700; }
.calendar-requests__time{ color: #475569; font-size: 0.90rem; }
.calendar-requests__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.client-mgmt .client-profile__header{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Client Management: profile panel header layout (keeps Disconnect top-right on the same row) */
.client-mgmt .client-profile__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.client-mgmt .client-profile__top-actions{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  margin-top:2px;
}

/* Client Management: connection/risk meta row (sectioned with dotted vertical dividers) */
.client-mgmt .client-profile__meta-row{
  display:flex;
  align-items:flex-start;
  gap:0;
  margin-top:12px;
  border:1px solid rgba(148,163,184,0.28);
  background:rgba(255,255,255,0.55);
  border-radius:18px;
  overflow:hidden;
}

.client-mgmt .client-profile__meta-section{
  flex:1 1 0;
  padding:12px 14px;
}

.client-mgmt .client-profile__meta-section + .client-profile__meta-section{
  border-left:1px dotted rgba(148,163,184,0.65);
}

.client-mgmt .client-profile__avatar{
  width:46px;
  height:46px;
}

.client-mgmt .client-profile__name{
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--ink-900);
  line-height:1.15;
}

.client-mgmt .client-profile__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.client-mgmt .kv{
  display:grid;
  gap:6px;
  font-size:14px;
  color:#0f172a;
  line-height:1.35;
}

.client-mgmt .kv strong{
  font-weight:700;
  color:#0f172a;
}

/* --- Client Management: selected client highlight (left list) --- */
.client-mgmt .client-card{
  position:relative;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

/* --- Client Management: connection state borders ---
   Pending (invited): dotted grey border
   Confirmed (active/other): solid blue border
*/
.client-mgmt .client-card.is-pending{
  border:2px solid rgba(226,232,240,0.90);
}

.client-mgmt .client-card.is-confirmed{
  border:2px solid rgba(226,232,240,0.90);
}

/* Keep the "selected" affordance while preserving the pending border style */
.client-mgmt .client-card.is-active.is-pending{
  border-style:dotted !important;
  border:2px solid rgba(226,232,240,0.90);
}

.client-mgmt a:hover .client-card{
  transform:translateY(-1px);
  box-shadow:0 18px 46px rgba(15,23,42,.12);
}

.client-mgmt .client-card.is-active{
  background:rgba(61,137,179,0.05) !important; /* glass blue */
  border-color:rgba(148, 163, 184, .28) !important;
}

.client-mgmt .client-card.is-active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:rgba(61,137,179,0.95);
}

.client-mgmt .client-card.is-active .client-card-cta{
  opacity:1 !important;
  color:#1d4ed8;
  font-weight:800;
}

/* Client Management: inline accept/decline actions for client-initiated requests */
.client-mgmt .client-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.client-mgmt .client-card-actions.is-stacked{
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
}

.client-mgmt .client-card-text{
  min-width:0;
  flex:1;
}

.client-mgmt .client-card-name{
  font-weight:800;
  font-size:16px;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.client-mgmt .client-card-email{
  opacity:0.75;
  font-size:13px;
  line-height:1.15;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.client-mgmt .client-card-view{
  font-size:13px;
  font-weight:800;
  opacity:0.75;
  text-decoration:none;
  color:inherit;
}

.client-mgmt .client-card-view:hover{
  opacity:1;
  text-decoration:none;
}

.client-mgmt .client-card-action-form{
  display:inline;
  margin:0;
}

/* Pending-connection action column (✅/❌) on the left client list */
.client-mgmt .client-card-actions.is-stacked{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding-left:12px;
  margin-left:10px;
  border-left:1px dotted rgba(148,163,184,0.60);
}

.client-mgmt .connection-inline-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:10px;
  vertical-align:middle;
}

/* Text+icon accept/decline pills (right-side client profile panel) */
.client-mgmt .connection-action-btn{
  height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.55);
  background:rgba(255,255,255,0.78);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  line-height:1;
}

.client-mgmt .connection-action-btn svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

.client-mgmt .connection-action-btn--ok{
  color:#16a34a;
  border-color:rgba(34,197,94,0.35);
}

.client-mgmt .connection-action-btn--no{
  color:#ef4444;
  border-color:rgba(239,68,68,0.35);
}

.icon-circle-btn{
  width:30px;
  height:30px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.55);
  background:rgba(255,255,255,0.75);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}

.icon-circle-btn svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

.icon-circle-btn:hover{
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.icon-circle-btn--ok{
  color:#16a34a;
  border-color:rgba(34,197,94,0.35);
}

.icon-circle-btn--no{
  color:#ef4444;
  border-color:rgba(239,68,68,0.35);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Right-side client profile card border reflects connection state */
.dash-card.client-profile-card.is-pending{
  border:2px dotted rgba(148, 163, 184, .28) !important;
}

.dash-card.client-profile-card.is-confirmed{
  border:2px solid rgba(148, 163, 184, .28) !important;
}

/* ------------------------------------------------------------------
   Provider portal: Session notes client list
   (Make the selected client unmistakable, consistent with Messages + Client Mgmt)
-------------------------------------------------------------------*/
.notes-client-item{
  position:relative;
  display:block;
  padding:10px 12px;
  border-radius:18px;
  text-decoration:none;
  color:#0f172a; /* prevent default link blue */
  /* Match the Client Management list cards (crisp, not washed out) */
  background:rgba(255,255,255,0.90);
  border:2px solid rgba(226,232,240,0.90);
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.notes-client-item .notes-client-name{
  color:var(--ink-900);
}
.notes-client-item .notes-client-email{
  color:var(--ink-700);
  opacity:0.75;
}

.notes-client-item:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 46px rgba(15,23,42,.12);
  background:rgba(255,255,255,0.94);
  border-color:rgba(61,137,179,0.28);
}

.notes-client-item.is-active{
  /* Exact selected-state colors from Client Management */
  background:rgba(61,137,179,0.05) !important;
  border-color:rgba(61,137,179,0.95) !important;
  box-shadow:0 18px 46px rgba(15,23,42,.12);
}

.notes-client-item.is-active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:rgba(61,137,179,0.95);
}

.notes-client-item.is-active .notes-client-chevron{
  opacity:0.95 !important;
}

/* ------------------------------------------------------------------
   Generic "glass" utility

   Dashboard partials use class="glass" extensively. Defining it here
   ensures contained panels (invite cards, profile sections, etc.) render
   with the intended frosted look.
------------------------------------------------------------------- */

.glass{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.28);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}

.glass:where(.no-border){
  border:0;
}




/* --- Client Financials: stacked layout (Active clients table on top, selected client panel below) --- */
.clients-financials-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
}

.clients-financials-left,
.clients-financials-right{
  width:100%;
  min-width:0;
  padding:18px 20px;
  border-radius:24px;
}

.clients-financials-left-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.section-title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}
.section-meta{
  font-size:12px;
  color:#64748b;
}

.table-scroll{ overflow-x:auto; }
.table-basic{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.table-basic thead tr{
  border-bottom:1px solid rgba(226,232,240,0.9);
  text-align:left;
}
.table-basic th{ padding:6px 4px; color:#334155; font-weight:700; }
.table-basic td{ padding:7px 4px; border-bottom:1px solid rgba(241,245,249,0.9); vertical-align:middle; }
.table-basic tr.is-selected{ background:rgba(239,246,255,0.9); }

.cell-strong{ font-weight:700; color:#0f172a; }
.cell-muted{ color:#475569; }
.cell-mono{ font-variant-numeric: tabular-nums; }

.table-link{ color:inherit; text-decoration:none; }
.table-link:hover{ text-decoration:underline; }
.text-right{ text-align:right; }

.pill{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  text-transform:capitalize;
  display:inline-block;
}
.pill-green{ background:rgba(187,247,208,0.8); color:#166534; }
.pill-blue{ background:rgba(219,234,254,0.9); color:#1d4ed8; }

.table-action{
  font-size:12px;
  color:#2563eb;
  text-decoration:none;
}
.table-action:hover{ text-decoration:underline; }

.empty-hint{
  margin:8px 0 0;
  font-size:13px;
  color:#64748b;
}

/* --- Client Financials: Provider overview (KPI + trend) --- */
.fin-overview{
  margin:14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fin-overview__kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.fin-kpi{
  border-radius:22px;
  padding:14px 16px;
  box-shadow:0 18px 46px rgba(15,23,42,.06);
}

.fin-kpi__label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:#334155;
  text-transform:uppercase;
}

.fin-kpi__value{
  margin-top:6px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
  font-variant-numeric: tabular-nums;
}

.fin-kpi__hint{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
}

.fin-overview__chart{
  border-radius:24px;
  padding:16px 18px;
  box-shadow:0 18px 46px rgba(15,23,42,.06);
}

.fin-chart__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.fin-chart__title{
  font-size:15px;
  font-weight:900;
  color:#0f172a;
}

.fin-chart__subtitle{
  margin-top:2px;
  font-size:12px;
  color:#64748b;
}

.fin-chart__wrap{ width:100%; overflow:hidden; }

.fin-line{
  width:100%;
  height:auto;
}

.fin-line__grid{
  stroke:rgba(226,232,240,.95);
  stroke-width:1;
  shape-rendering:crispEdges;
}

.fin-line__path{
  fill:none;
  stroke:rgba(61,137,179,.95);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.fin-line__dot{
  fill:#fff;
  stroke:rgba(61,137,179,.95);
  stroke-width:2;
}

.fin-line__xlabel{
  font-size:11px;
  fill:#64748b;
}

@media (max-width: 980px){
  .fin-overview__kpis{ grid-template-columns:1fr; }
  .fin-kpi__value{ font-size:20px; }
}


.inv-balance-paid{
  margin-top:6px;
  font-size: 13px;
  color: #556;
}

/* --- Client dashboard: Payments due --- */
.invoice-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.invoice-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(248,250,252,0.65);
  backdrop-filter: blur(8px);
}

.invoice-left{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.invoice-meta{ min-width:0; }

.invoice-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(255,255,255,0.85);
}
.invoice-icon.ok{ background:rgba(240,253,250,0.85); color:#0f766e; border-color:rgba(45,212,191,0.35); }
.invoice-icon.warn{ background:rgba(255,251,235,0.9); color:#b45309; border-color:rgba(251,191,36,0.45); }
.invoice-icon.danger{ background:rgba(254,242,242,0.92); color:#b91c1c; border-color:rgba(248,113,113,0.45); }
.invoice-icon.neutral{ background:rgba(241,245,249,0.9); color:#334155; border-color:rgba(148,163,184,0.35); }

.invoice-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#0f172a;
  font-size:14px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.invoice-pill{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(255,255,255,0.85);
  color:#334155;
  flex:0 0 auto;
}
.invoice-pill.ok{ background:rgba(204,251,241,0.85); color:#0f766e; border-color:rgba(45,212,191,0.35); }
.invoice-pill.warn{ background:rgba(254,243,199,0.9); color:#b45309; border-color:rgba(251,191,36,0.45); }
.invoice-pill.danger{ background:rgba(254,226,226,0.92); color:#b91c1c; border-color:rgba(248,113,113,0.45); }
.invoice-pill.neutral{ background:rgba(226,232,240,0.9); color:#334155; border-color:rgba(148,163,184,0.35); }

.invoice-sub{
  margin-top:2px;
  font-size:12px;
  color:#475569;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.invoice-sub-sep{ color:#94a3b8; }
.invoice-sub-hint{ color:#64748b; }

.invoice-good{
  margin-top:6px;
  font-size:12px;
  color:#64748b;
}

.invoice-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.invoice-amount{ font-weight:800; color:#0f172a; font-size:14px; text-align:right; min-width:72px; }
.invoice-pay{ white-space:nowrap; }

@media (max-width: 760px){
  .invoice-row{ flex-direction:column; align-items:stretch; }
  .invoice-right{ justify-content:space-between; }
  .invoice-amount{ text-align:left; }
}

/* ---------------- Billing panel ---------------- */
.billing-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.billing-summary{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.bill-stat{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(12px) saturate(160%);
}
.bill-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(129,140,248,.14));
  border:1px solid rgba(148,163,184,.30);
}
.bill-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#64748b; font-weight:800; }
.bill-value{ font-size:18px; font-weight:900; color:#0f172a; margin-top:1px; }

.billing-grid{
  display:grid;
  /* minmax(0, …) allows grid children to shrink instead of overflowing the page */
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  gap:16px;
  align-items:start;
}
.billing-col{
  min-width:0; /* critical for long content/tables inside CSS grid */
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.55);
  border-radius:18px;
  padding:14px;
}
.billing-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.billing-table{ overflow:auto; max-width:100%; width:100%; border-radius:14px; border:1px solid rgba(148,163,184,.28); background:rgba(255,255,255,.72); }
.billing-history-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  /* Keep table readable but allow the column itself to remain within the grid */
  min-width:520px;
}
.billing-history-table thead th{
  text-align:left;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  font-weight:900;
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.28);
  background:rgba(248,250,252,.75);
  position:sticky;
  top:0;
  z-index:1;
}
.billing-history-table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
  color:#0f172a;
  font-size:13px;
}
.billing-history-table tr:last-child td{ border-bottom:none; }
.billing-history-table .num{ text-align:right; white-space:nowrap; }
.billing-history-table .muted{ color:#64748b; white-space:nowrap; }
.billing-link{ color:#0f172a; text-decoration:none; font-weight:700; }
.billing-link:hover{ text-decoration:underline; }

@media (max-width: 980px){
  .billing-grid{ grid-template-columns:1fr; }
  .billing-col{ padding:12px; }
}

@media (max-width: 760px){
  .billing-summary{ grid-template-columns:1fr; }
  .bill-value{ font-size:17px; }
}


/* Email confirmation banner (client dashboard) */
.email-unconfirmed-banner{
  margin: 14px 0 18px 0;
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(120,170,255,0.35);
  box-shadow: 0 18px 44px rgba(20,40,90,0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.email-unconfirmed-banner .eub-inner{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.email-unconfirmed-banner .eub-title{
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: #0b1b3a;
}
.email-unconfirmed-banner .eub-text{
  color: rgba(10,25,55,0.82);
  font-size: 13px;
  line-height: 1.35;
}
.email-unconfirmed-banner .eub-meta{
  margin-left: 6px;
  color: rgba(10,25,55,0.55);
}
.email-unconfirmed-banner .eub-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.email-unconfirmed-banner .eub-form{
  margin: 0;
}
.email-unconfirmed-banner .eub-btn{
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
}
.email-unconfirmed-banner .eub-link{
  font-size: 13px;
  text-decoration: underline;
  color: rgba(10,40,120,0.85);
}

/* ================================
   Provider Portal polish
   - Share card typography + icons
   - To-do + New/at-risk panels
   ================================ */

/* Share card */
.share-card .card-title{
  display:flex;
  align-items:center;
  gap: 10px;
}
.share-card .card-title::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(59,130,246,.75), rgba(99,102,241,.55));
  box-shadow: 0 10px 22px rgba(59,130,246,.18);
}

.share-stack{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.share-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px) saturate(160%);
}

.share-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255, 255, 255, .95);
  background: linear-gradient(135deg, rgba(2, 132, 199, .95), rgba(59, 130, 246, .78));
  box-shadow: 0 14px 26px rgba(59, 130, 246, .18);
  border: 1px solid rgba(255,255,255,.32);
  flex: 0 0 auto;
}
.share-icon svg{ display:block; }

.share-body{ flex: 1; min-width: 0; }
.share-title{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px;
  color: rgba(15, 23, 42, .55);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.share-value{
  font-weight: 800;
  color: rgba(15, 23, 42, .92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.share-meta{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15, 23, 42, .62);
}
.share-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.share-actions .btn-mini{
  padding: 8px 12px;
  border-radius: 999px;
}

/* Column headers with icons */
.col-head.col-head--with-icon{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.col-head__left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.col-head__icon{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(59,130,246,.85), rgba(14,165,233,.65));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 12px 22px rgba(59,130,246,.16);
}
.col-head__icon svg{ display:block; }
.col-head__title{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.col-head__pill{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(255, 255, 255, .6);
  color: rgba(15, 23, 42, .65);
}

/* To-do list */
.todo-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.todo-row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.todo-left{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  min-width: 0;
}
.todo-check{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, .55);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  margin-top: 2px;
}
.todo-title{
  font-weight: 800;
  color: rgba(15, 23, 42, .9);
  line-height: 1.2;
}
.todo-meta{
  font-size: 12px;
  color: rgba(15, 23, 42, .62);
  margin-top: 3px;
}
.todo-badge{
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, .35);
  background: rgba(59, 130, 246, .10);
  color: rgba(30, 64, 175, .85);
  flex: 0 0 auto;
}

/* Pending / at-risk requests */
.risk-list{ display:flex; flex-direction: column; gap: 10px; }
.risk-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.risk-left{ display:flex; align-items:center; gap: 10px; min-width:0; }
.risk-avatar{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(59,130,246,.75));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 26px rgba(59,130,246,.16);
  flex: 0 0 auto;
}
.risk-name{
  font-weight: 900;
  color: rgba(15, 23, 42, .92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.risk-meta{ font-size: 12px; color: rgba(15, 23, 42, .62); margin-top: 3px; }
.risk-actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.risk-actions .btn-mini{ border-radius: 999px; padding: 8px 12px; }
.risk-actions .btn-mini.btn-accept{
  background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(59, 130, 246, .16));
  border-color: rgba(16, 185, 129, .25);
}
.risk-actions .btn-mini.btn-decline{
  background: rgba(239, 68, 68, .07);
  border-color: rgba(239, 68, 68, .25);
}

/* Small empty state */
.panel-empty{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}
.panel-empty__icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(59, 130, 246, .10);
  border: 1px solid rgba(96, 165, 250, .25);
  color: rgba(30, 64, 175, .85);
  flex: 0 0 auto;
}
.panel-empty__icon svg{ display:block; }
.panel-empty__title{ font-weight: 900; margin: 0; color: rgba(15, 23, 42, .9); }
.panel-empty__text{ margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: rgba(15, 23, 42, .62); }


/* --- Plan surfaces (Canva-style note + floating bookmark button) --- */
.plan-card .card-inner { padding: 16px; }

.plan-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,0.82) 0%, rgba(219,234,254,0.58) 35%, rgba(191,219,254,0.36) 72%, rgba(255,255,255,0.70) 100%);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: 0 18px 48px rgba(15,23,42,0.10);
}

.plan-note-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(254, 243, 199, 0.92); /* soft yellow */
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 10px 28px rgba(15,23,42,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 158, 11, 0.95);
}

.icon-bookmark { display:block; }

.plan-note-body { flex: 1; min-width: 0; }
.plan-note-title { font-weight: 900; font-size: 16px; letter-spacing: 0.2px; color: rgba(15,23,42,0.92); }
.plan-note-subtle { margin-top: 4px; font-size: 12.5px; color: rgba(15,23,42,0.68); display:flex; align-items:center; gap:6px; flex-wrap: wrap; line-height: 1.35; }
.plan-note-pill {
  display:inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(219,234,254,0.55);
  border: 1px solid rgba(59,130,246,0.22);
  font-weight: 600;
}
.plan-note-dot { opacity: 0.7; }

.plan-note-actions { margin-top: 12px; }
.plan-note-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(219,234,254,0.62);
  border: 1px solid rgba(59,130,246,0.24);
  box-shadow: 0 14px 36px rgba(15,23,42,0.10);
  text-decoration: none;
  font-weight: 900;
  font-size: 13.5px;
  color: rgba(30, 64, 175, 0.95);
}
.plan-note-link:hover { transform: translateY(-1px); }

/* floating bookmark hint button (upper-right) */
.floating-plan-hint{
  position: ;
  right: 22px;
  z-index: 999;
  float:right;
  display: flex;
  max-width: 150px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 14px 36px rgba(15,23,42,0.14);
  text-decoration: none;
  color: rgba(15,23,42,0.92);
  backdrop-filter: blur(10px);
}

.floating-plan-hint .fph-text{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.floating-plan-hint:hover{
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Chat bubbles: remove diamond tails
   ------------------------------------------------------------
   Some message bubble variants used rotated squares (::after) for the
   tail, which reads as a "diamond" artifact. For a calmer, modern look
   (Slack-style), remove the tails entirely.
*/
.messages-panel-thread .message-thread-item::after,
.messages-chat-msg--theirs .messages-chat-bubble::after,
.messages-chat-msg--mine .messages-chat-bubble::after{
  content: none !important;
  display: none !important;
}

/* ===================== Meditation Soundscapes (Client Portal) ===================== */

.soundscapes{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.soundscapes__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soundscapes__item{
  text-align: left;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.82);
  border-radius: 16px;
  padding: 12px 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.soundscapes__item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15,23,42,.08);
}

.soundscapes__item.is-active{
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 16px 44px rgba(14,165,233,.14);
}

.soundscapes__itemTitle{
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
}

.soundscapes__itemDesc{
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.soundscapes__player{
  position: relative;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.76);
  box-shadow: 0 22px 60px rgba(15,23,42,.08);
  padding: 14px;
}

.soundscape-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
  margin-bottom: 12px;
}

.soundscape-controls__left{
  display:flex;
  align-items:center;
  gap:10px;
}

.soundscape-controls__label{
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
  opacity: .85;
}

.soundscape-controls__select{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 999px;
  padding: 8px 34px 8px 14px;
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  cursor: pointer;
  position: relative;
}

.soundscape-controls__select:focus{
  outline: none;
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 0 0 3px rgba(14,165,233,.16);
}

.soundscape-controls__shuffle{
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 900;
  font-size: 13px;
  color: #0f172a;
  background: rgba(255,255,255,.86);
  cursor: pointer;
}

.soundscape-controls__shuffle:hover{
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.soundscape-stage{
  background: rgba(255,255,255,.52);
}

.soundscape-canvas{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .95;
}

.soundscape-stage__bg{ z-index: 1; }
.soundscape-stage__veil{ z-index: 3; }
.soundscape-stage__sparkle{ z-index: 4; }

.soundscape-stage{
  position: relative;
  height: 210px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.25);
}

.soundscape-stage__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(56,189,248,.55), transparent 55%),
    radial-gradient(circle at 90% 30%, rgba(99,102,241,.45), transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(34,197,94,.28), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.35));
  filter: blur(0px);
  animation: soundscapeFloat 10s ease-in-out infinite;
}

.soundscape-stage__veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
}

.soundscape-stage__sparkle{
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.65), transparent 12%),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.55), transparent 14%),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.50), transparent 12%),
    radial-gradient(circle at 90% 75%, rgba(255,255,255,.55), transparent 14%);
  opacity: .55;
  mix-blend-mode: soft-light;
  animation: soundscapeSparkle 8s ease-in-out infinite;
}

@keyframes soundscapeFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-6px,0) scale(1.02); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

@keyframes soundscapeSparkle{
  0%{ transform: translate3d(0,0,0); opacity: .45; }
  50%{ transform: translate3d(10px,-12px,0); opacity: .65; }
  100%{ transform: translate3d(0,0,0); opacity: .45; }
}

.soundscape-meta{
  margin-top: 12px;
}

.soundscape-meta__title{
  font-weight: 900;
  font-size: 16px;
  color: #0f172a;
}

.soundscape-meta__desc{
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
}

.soundscape-audio{
  width: 100%;
  margin-top: 12px;
}

.soundscape-hint{
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 900px){
  .soundscapes{
    grid-template-columns: 1fr;
  }
  .soundscape-stage{
    height: 180px;
  }
}


/* Booking / Request Session (client) */
.booking-errors{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #7f1d1d;
  font-size: 13px;
}
.booking-errors strong{
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}
.booking-errors ul{
  margin: 0;
  padding-left: 18px;
}


/* =========================
   Provider card (Client Portal sidebar)
   ========================= */
.provider-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(90,140,200,0.20);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 12px 12px;
  margin-top: 10px;
  backdrop-filter: blur(10px);
}

.provider-card--invite{
  border-color: rgba(90,140,200,0.28);
}

.provider-card__top{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.provider-card__avatar.avatar{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  background: rgba(90,140,200,0.18);
  border: 1px solid rgba(90,140,200,0.22);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}

.provider-card__info{
  flex: 1;
  min-width: 0;
}

.provider-card__name{
  font-weight: 800;
  font-size: 14px;
  color: #0f2442;
  line-height: 1.1;
}

.provider-card__headline{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(23, 55, 95, 0.70);
  line-height: 1.25;
}

.provider-card__pill-row{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.provider-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(90,140,200,0.22);
  background: rgba(240,248,255,0.70);
  color: rgba(23,55,95,0.85);
  white-space: nowrap;
}


/* Allow pills to be used as buttons (e.g., Cancel) without affecting global button styles */
.provider-pill--button{
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(90,140,200,0.22);
  background: rgba(240,248,255,0.70);
  color: rgba(23,55,95,0.85);
  font-family: inherit;
  line-height: 1;
}

.provider-pill--button:hover{
  filter: brightness(0.98);
}
.provider-pill--button:active{
  transform: translateY(0.5px);
}
.provider-pill--button:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(90,140,200,0.15);
}

.provider-pill--connected{
  border-color: rgba(60,170,120,0.32);
  background: rgba(220, 255, 235, 0.60);
  color: rgba(20, 110, 70, 0.95);
}

.provider-pill--pending{
  border-color: rgba(245, 166, 35, 0.35);
  background: rgba(255, 245, 220, 0.70);
  color: rgba(155, 100, 10, 0.95);
}

.provider-card__actions{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Gentle CTA variants using existing .btn-mini base */
.btn-mini.btn-cta{
  border-color: rgba(0, 120, 210, 0.35);
  background: rgba(0, 120, 210, 0.10);
}

.btn-mini.btn-soft{
  background: rgba(255,255,255,0.65);
}

.provider-requests{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(90,140,200,0.28);
}

.provider-requests__title{
  font-weight: 800;
  font-size: 12px;
  color: rgba(23,55,95,0.85);
  margin: 0 0 8px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.provider-request-row{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(90,140,200,0.20);
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  margin-bottom: 8px;
}

.provider-request-row__avatar.avatar{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-weight: 800;
  background: rgba(90,140,200,0.18);
  border: 1px solid rgba(90,140,200,0.22);
}

.provider-request-row__body{
  flex: 1;
  min-width: 0;
}

.provider-request-row__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.provider-pill.provider-pill--pending{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  color: rgba(23,55,95,0.78);
  background: rgba(90,140,200,0.16);
  border: 1px solid rgba(90,140,200,0.24);
  letter-spacing: .2px;
}

.provider-request-row__name{
  font-weight: 800;
  font-size: 13px;
  color: #0f2442;
  line-height: 1.1;
}

.provider-request-row__headline{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(23,55,95,0.68);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-request-row__meta{
  margin-top: 5px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.provider-request-row__rating{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: rgba(23,55,95,0.74);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(90,140,200,0.18);
  padding: 4px 8px;
  border-radius: 999px;
}

.provider-request-row__rating--none{
  opacity: .8;
}

.provider-request-row__stars{
  display:inline-flex;
  gap: 1px;
}

.provider-request-row__stars .pr-star{
  font-size: 12px;
  opacity: .35;
}

.provider-request-row__stars .pr-star.is-on{
  opacity: .95;
}

.provider-request-row__rating-text{
  font-weight: 800;
}

.provider-request-row__rating-count{
  opacity: .75;
}



.provider-request-row__actions{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  justify-content:center;
  gap: 6px;
  padding-left: 6px;
}

.provider-request-row__actions .btn-mini{
  white-space: nowrap;
}

.provider-request-row__cancel{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}


/* Client booking modal toast */
.booking-toast{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #0f172a;
  background: rgba(2,132,199,0.10);
  border: 1px solid rgba(2,132,199,0.22);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
}
.booking-toast.show{
  animation: bookingToastIn 160ms ease-out;
}
@keyframes bookingToastIn{
  from{ transform: translateY(-4px); opacity: 0.2; }
  to{ transform: translateY(0); opacity: 1; }
}


/* ---------------------------------------------------------
   Provider Portal: Session Notes (mobile layout)
   Keeps desktop split-view unchanged; stacks cleanly on phones.
--------------------------------------------------------- */
@media (max-width: 820px){
  .notes-split{ padding:14px !important; border-radius:22px !important; }
  .notes-split__cols{
    flex-direction:column !important;
    flex-wrap:wrap !important;
    gap:14px !important;
  }
  .notes-split__left{
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
  }
  .notes-split__right{
    min-width:0 !important;
    width:100% !important;
  }

  /* Client list becomes normal flow (no inner scroll region) */
  .notes-client-list{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }

  /* Make client items more tappable */
  .notes-client-item{
    border-radius:18px;
    padding:10px 12px;
  }
  .notes-client-item .avatar{ flex:0 0 auto; }
  .notes-client-chevron{ display:none !important; }
}

/* Avoid panel being tucked under fixed header on mobile */
@media (max-width: 540px){
  .notes-split{ scroll-margin-top: 74px; }
}


/* Provider card clickable avatar/name (client portal) */
.provider-card__avatar{ text-decoration:none; }
.provider-card__name-link{ color:inherit; text-decoration:none; }
.provider-card__name-link:active{ opacity:0.9; }


/* ===========================
   My Downloads panel (client)
   =========================== */

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.downloads-list{
  margin-top: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.download-item{
  display:flex;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  backdrop-filter: blur(14px) saturate(150%);
  transition: transform .10s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.download-item:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.46);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

.download-thumb{
  width: 112px;
  min-width: 112px;
  height: 84px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(148,163,184,.38);
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(14,165,233,.08));
}

.download-thumb__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.download-thumb__placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.55);
}

.download-thumb__badge{
  position:absolute;
  right:10px;
  bottom:10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(15,23,42,.86);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(148,163,184,.45);
  backdrop-filter: blur(10px);
}

.download-main{
  flex:1;
  min-width: 0;
}

.download-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.download-title-wrap{ min-width:0; }

.download-title-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.download-title{
  margin:0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.94);
}

.download-subtitle{
  margin-top: 4px;
  color: rgba(71,85,105,.92);
  font-size: 13px;
  line-height: 1.35;
}

.download-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.download-desc{
  margin-top: 10px;
  color: rgba(30,41,59,.86);
  font-size: 13px;
  line-height: 1.55;
}

.download-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 8px;
  color: rgba(71,85,105,.86);
  font-size: 12px;
}

.download-meta code{
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(241,245,249,.85);
  border: 1px solid rgba(148,163,184,.35);
}

.download-meta__dot{ opacity: .65; }

.downloads-empty{
  margin-top: 16px;
  display:flex;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(148,163,184,.55);
  background: rgba(255,255,255,.70);
  align-items:flex-start;
}

.downloads-empty__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(14,165,233,.10));
  border: 1px solid rgba(59,130,246,.22);
  color: rgba(15,23,42,.70);
}

.downloads-empty__title{
  margin:0 0 4px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}

.downloads-empty__actions{ margin-top: 10px; }

@media (max-width: 720px){
  .download-item{
    flex-direction: column;
  }
  .download-thumb{
    width: 100%;
    min-width: 0;
    height: 140px;
  }
  .download-top{
    flex-direction: column;
    align-items: flex-start;
  }
  .download-actions{
    width: 100%;
  }
  .download-actions .btn{
    width: 100%;
  }
}
/* --- Client Management: page header + invite form wrapping polish (override) --- */
.client-mgmt .client-mgmt-pagehead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:0 4px;
}
.client-mgmt .client-mgmt-pagehead__title{
  font-weight:950;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-700);
  font-size:13px;
}
.client-mgmt .client-mgmt-pagehead__meta{
  font-size:12px;
  color:var(--ink-500);
  font-weight:800;
}

/* Allow the invite panel to wrap naturally on narrower desktops */
.client-mgmt .invite-top__form{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.client-mgmt .invite-top__form.invite-top__form--compact{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.client-mgmt .invite-top__field{ flex:1 1 180px; min-width:180px; }
.client-mgmt .invite-top__submit{ flex:0 0 auto; }

@media (max-width: 740px){
  .client-mgmt .client-mgmt-pagehead{ align-items:flex-start; flex-direction:column; }
  .client-mgmt .invite-top__field{ min-width:0; flex:1 1 100%; }
  .client-mgmt .invite-top__submit{ width:100%; }
}

/* --- Client Management: page header (override) --- */
.client-mgmt .client-mgmt-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;padding:0 4px;}
.client-mgmt .client-mgmt-pagehead__title{font-weight:950;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-700);font-size:13px;}
.client-mgmt .client-mgmt-pagehead__meta{font-size:12px;color:var(--ink-500);font-weight:800;}

/* --- Client Management: page header (override) --- */
.client-mgmt .client-mgmt-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;padding:0 4px;}
.client-mgmt .client-mgmt-pagehead__title{font-weight:950;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-700);font-size:13px;}
.client-mgmt .client-mgmt-pagehead__meta{font-size:12px;color:var(--ink-500);font-weight:800;}

/* --- Client Management: page header (override) --- */
.client-mgmt .client-mgmt-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;padding:0 4px;}
.client-mgmt .client-mgmt-pagehead__title{font-weight:950;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-700);font-size:13px;}
.client-mgmt .client-mgmt-pagehead__meta{font-size:12px;color:var(--ink-500);font-weight:800;}

/* --- Client Management: invite row wraps cleanly (override) --- */
.client-mgmt .invite-top__form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.client-mgmt .invite-top__form--compact{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.client-mgmt .invite-top__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;width:100%;}
.client-mgmt .invite-top__field{flex:1 1 190px;min-width:180px;}
.client-mgmt .invite-top__field--email{flex:1 1 260px;}
.client-mgmt .invite-top__field--name{flex:1 1 240px;}
.client-mgmt .invite-top__submit{flex:0 0 auto;}


/* Provider dashboard divider (between client slots and inbox) */
.dash-divider{
  border: none;
  height: 0;
  margin: 16px 0 18px;
}

.dash-divider--dashed{
  border-top: 2px dashed rgba(148, 163, 184, 0.85); /* soft grey */
}

/* --- Quick Mood Check-in popover (Client Dashboard KPI) --- */
.mood-quick-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.mood-quick-popover,
.mood-quick-popover *{
  box-sizing: border-box;
}

.mood-quick-popover{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  max-height: min(78vh, 720px);
  overflow: auto;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(59,130,246,0.18);
  box-shadow: 0 18px 60px rgba(2, 8, 23, 0.22);
  border-radius: 18px;
  padding: 16px 16px 14px;
  z-index: 9999;
}

.mood-quick-close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 20px;
  line-height: 30px;
  color: rgba(15,23,42,0.75);
}

.mood-quick-head{ padding-right: 44px; }
.mood-quick-title{ font-size: 16px; font-weight: 800; color: rgba(15,23,42,0.92); }
.mood-quick-sub{ margin-top: 2px; font-size: 12px; color: rgba(71,85,105,0.95); }

.mood-quick-choices{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 640px){
  .mood-quick-choices{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mood-quick-choice{
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(59,130,246,0.20);
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 12px 10px 12px;
  min-height: 148px;
  cursor: pointer;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mood-quick-choice:hover{ transform: translateY(-1px); border-color: rgba(37,99,235,0.35); }
.mood-quick-choice.is-selected{
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 10px 24px rgba(37,99,235,0.18);
  background: rgba(239,246,255,0.92);
}

.mood-quick-icon{ display: block; }
.mood-quick-img{
  width: 96px;
  height: 96px;
  min-width: 78px;  /* minimum 78x78 */
  min-height: 78px;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(2, 8, 23, 0.18));
}

.mood-quick-label{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(15, 23, 42, 0.82);
}

.mood-quick-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
}

.mood-quick-skip{
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.78);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(30,41,59,0.82);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.mood-quick-skip:hover{
  transform: translateY(-1px);
  border-color: rgba(100,116,139,0.6);
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.10);
}

.mood-quick-foot{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(71,85,105,0.9);
}

// -- nothing to see here
/* Discovery (search + categories) – cohesive with frontpage theme */

:root{
  --brand-500:#06b6d4; --brand-600:#0284c7; --brand-700:#0369a1;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-200:#e5e7eb; --ink-100:#f3f4f6;
}

.section-discovery .discover-shell{
  background:#fff; border:1px solid rgba(148,163,184,.26);
  border-radius:22px; box-shadow:0 24px 60px rgba(15,23,42,.08);
  padding:16px 16px 20px;
}

.discover-bar{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.search-wrap{
  position:relative; display:flex; align-items:center;
  background:#f8fafc; border:1px solid var(--ink-200); border-radius:14px; padding:8px 10px;
}
.search-wrap .icon-search{ width:18px; height:18px; color:#94a3b8; margin-right:8px; }
.search-wrap input{
  width:100%; border:0; background:transparent; outline:none; font-size:14px; color:var(--ink-900);
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--ink-200); background:#fff; color:var(--ink-700);
  font-weight:700; font-size:12px; padding:7px 10px; border-radius:999px; cursor:pointer;
}
.chip:hover{ background:var(--ink-100); }
.chip.active{ background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff; border-color:transparent; }

.discover-grid{ display:grid; grid-template-columns: 280px minmax(0,1fr); gap:16px; }
.discover-side{ display:flex; flex-direction:column; gap:12px; }
.side-card{
  background:#fff; border:1px solid var(--ink-200); border-radius:16px; box-shadow:0 16px 40px rgba(15,23,42,.06);
}
.side-card .side-title{ margin:0; padding:12px 14px; font-size:14px; font-weight:800; color:var(--ink-900); border-bottom:1px solid var(--ink-200); }
.cat-list{ list-style:none; margin:0; padding:10px; display:flex; flex-direction:column; gap:6px; }
.cat-link{
  width:100%; text-align:left; background:#fff; border:1px solid var(--ink-200); color:var(--ink-700);
  padding:9px 10px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:8px;
}
.cat-link:hover{ background:var(--ink-100); color:var(--ink-900); }
.cat-dot{ width:7px; height:7px; border-radius:999px; background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); }

.filter-row{ display:flex; flex-direction:column; gap:8px; padding:10px 12px 14px; color:var(--ink-700); font-size:13px; }
.filter-row label{ display:flex; align-items:center; gap:8px; }

.results-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px;
}
.results-empty{ border:1px dashed var(--ink-200); border-radius:12px; padding:16px; text-align:center; color:var(--ink-700); }

.card-coach{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--ink-200); border-radius:16px; box-shadow:0 18px 46px rgba(15,23,42,.06);
}
.card-coach .cover{
  height:84px; background:
    radial-gradient(90px 50px at 20% 30%, rgba(6,182,212,.25), transparent 60%),
    radial-gradient(120px 70px at 80% 70%, rgba(3,105,161,.25), transparent 60%),
    linear-gradient(135deg, rgba(2,132,199,.15), rgba(3,105,161,.15));
}
.card-coach .inner{ padding:12px 14px 14px; display:grid; grid-template-columns: 44px 1fr; gap:10px; }
.card-coach .avatar{
  width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); box-shadow:0 8px 22px rgba(3,105,161,.35);
  margin-top:-22px; border:2px solid #fff;
}
.card-coach .name{ margin:0; font-size:15px; font-weight:800; color:var(--ink-900); }
.card-coach .meta{ margin:2px 0 6px; color:var(--ink-500); font-size:12px; }
.card-coach .tags{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.card-coach .tag{
  font-size:11px; font-weight:700; color:#0b1220; background:#f1f5f9; border:1px solid var(--ink-200);
  padding:4px 8px; border-radius:999px;
}
.card-coach .actions{ display:flex; gap:8px; }
.card-coach .btn-mini{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;

  border:1px solid rgba(148,163,184,.7);
  background:rgba(255,255,255,.92);
  color:var(--slate-800);
  text-decoration:none;

  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;

  box-shadow:0 10px 26px rgba(15,23,42,.10);
  transition:box-shadow .16s ease, transform .08s ease, border-color .16s ease, background .16s ease, filter .16s ease;
}
.card-coach .btn-mini:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(15,23,42,.16);
  border-color:rgba(59,130,246,.75);
  background:rgba(255,255,255,.98);
}
.card-coach .btn-cta{
  border-color:transparent;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#f9fafb;
  box-shadow:0 12px 32px rgba(2,132,199,.22);
}

/* Responsive */
@media (max-width: 1024px){
  .discover-grid{ grid-template-columns: 1fr; }
  .results-grid{ grid-template-columns: 1fr; }
}

/* --- Discovery (Search) section alignment fix ---------------------- */

/* Use one radius + one canvas so the two rounded shapes line up */
.section-search{
  --panel-radius: 26px;
}

/* Make the section canvas match the inner panel exactly */
.section-search::before{
  border-radius: var(--panel-radius);
  /* keep your existing gradients from earlier; this line only syncs radii */
}

/* Remove any stray backgrounds from the search partial’s outer container */
.section-search .discovery-wrap{
  position: relative;
  padding: 0px;            /* tiny breathing room between canvas and panel */
  background: transparent;  /* important: let the section canvas be the only bg */
}

/* The actual glass card that holds the search UI */
.section-search .discovery-panel{
  border-radius: var(--panel-radius);
  background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border: 1px solid rgba(148,163,184,.55);
  box-shadow:
    0 30px 80px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.45);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding: 18px;            /* inner spacing for the content */
  margin: 0 auto;           /* center it */
}

/* If your partial sets its own background on a top block, neutralize it */
.section-search .discovery-panel [class*="surface"],
.section-search .discovery-panel [class*="card"]{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Optional: align the white input “pill” to the glass panel edges */
.section-search .search-input,
.section-search .search-input *{
  border-radius: calc(var(--panel-radius) - 10px);
}

/* Tighten the section’s vertical rhythm so the two shapes look centered */
.section-search.section-block{
  padding-top: 28px;
  padding-bottom: 32px;
}
/* E-sign / consent UI (separate from Documents & Files) */


.esign-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px) {
  .esign-grid { grid-template-columns: 1fr; }
}

.esign-doc {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}

.esign-doc__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.esign-doc__meta strong { font-weight: 700; }

.esign-doc__preview {
  width: 100%;
  height: 560px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.esign-doc__preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.esign-panel {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}

.esign-panel__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px 0;
}

.esign-panel__hint {
  margin: 0 0 12px 0;
  color: rgba(15, 23, 42, 0.7);
  font-size: 13px;
  line-height: 1.4;
}

.esign-field { margin-bottom: 12px; }

.esign-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.8);
  margin-bottom: 6px;
}

.esign-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}

.esign-input:focus { border-color: rgba(59, 130, 246, 0.45); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12); }

.esign-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(241, 245, 249, 0.7);
}

.esign-consent input { margin-top: 3px; }

.esign-consent__text {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.75);
  line-height: 1.4;
}

.signature-pad {
  border-radius: 16px;
  border: 1px dashed rgba(15, 23, 42, 0.20);
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
}

.signature-pad__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.signature-pad__label span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.75);
}

.signature-pad__canvas {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #fff;
}

.signature-pad__actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.btn.btn-ghost {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.7); }
@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
/* Logo-aligned palette: teal / cyan → deep blue */
:root{
  --brand-500:#06b6d4;   /* cyan / teal */
  --brand-600:#0284c7;   /* blue-leaning teal */
  --brand-700:#0369a1;   /* deep blue */
  --brand-soft:#e0f2fe;  /* light cyan background */

  --slate-950:#020617;
  --slate-900:#0f172a;
  --slate-800:#1f2937;
  --slate-700:#334155;
  --slate-500:#64748b;
  --slate-300:#cbd5f5;
  --slate-200:#e5e7eb;
  --slate-100:#f3f4f6;
  --white:#ffffff;

  /* Section canvases */
  --canvas-soft: rgba(2,132,199,.06);
  --canvas-glass: rgba(255,255,255,.8);
}

*{box-sizing:border-box}

/* Layout shell for the landing page */

html,body{height:100%}
body.app{
  overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--slate-900);
}

.page-shell{
  position:relative;
  isolation:isolate; /* ensure pseudo canvases layer correctly */
  padding: 0 0 0 0;
}

/* ------------------------------------------------------------------ */
/* Section framing + perfectly aligned background gradients            */
/* ------------------------------------------------------------------ */

.section-block{
  position:relative;
  margin-top:40px;
  padding:32px 0 32px;
  border-top:1px solid rgba(148,163,184,.24);
  overflow:visible; /* allow our pseudo backgrounds */
 
}

/* Shared aligned background “canvas” per section.
   Expands to match page-shell gutters so sections line up. */
.section-block::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-20px; right:-20px;
  top:0; bottom:0;
  border-radius:22px;
  pointer-events:none;

  /* Layered gradient + blobs → glass-friendly base */
  background:
    radial-gradient(220px 140px at 8% 6%, var(--sec-blob1), transparent 60%),
    radial-gradient(240px 160px at 96% 14%, var(--sec-blob2), transparent 62%),
    linear-gradient(180deg, var(--sec-g2), var(--sec-g1) 70%),
    linear-gradient(0deg, var(--sec-g3), transparent 58%);
}

/* Optional faint glyph */
.section-block::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:16px; top:18px;
  width:160px; height:160px;
  opacity:.06;
  filter:grayscale(1);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  display:none; /* enable per-section if desired */
}

.section-block:last-of-type{ padding-bottom:4px; }

/* ------------------------------------------------------------------ */
/* Section-specific gradient palettes                                  */
/* ------------------------------------------------------------------ */

/* Mission: softer, optimistic cyan */
.section-mission{

  border-top:none;
  margin-top:48px;

  --sec-g2: rgba(2,132,199,.08);
  --sec-g3: rgba(14,165,233,.10);
  --sec-blob1: rgba(56,189,248,.16);
  --sec-blob2: rgba(37,99,235,.12);
    background:
    radial-gradient(220px 140px at 8% 6%, var(--sec-blob1), transparent 60%),
    radial-gradient(240px 160px at 96% 14%, var(--sec-blob2), transparent 62%),
    linear-gradient(180deg, var(--sec-g2), var(--sec-g1) 70%),
    linear-gradient(0deg, var(--sec-g3), transparent 58%);

}

/* Features: a touch deeper for contrast */
.section-features{

  --sec-g2: rgba(2,132,199,.10);
  --sec-g3: rgba(2,132,199,.08);
  --sec-blob1: rgba(6,182,212,.18);
  --sec-blob2: rgba(3,105,161,.12);
}

/* How it works: cool glassy strip feel */
.section-how{
  --sec-g2: rgba(148,163,184,.14);
  --sec-g3: rgba(2,132,199,.08);
  --sec-blob1: rgba(59,130,246,.14);
  --sec-blob2: rgba(56,189,248,.12);
}

/* Getting started steps strip */
.section-steps{
  --sec-g2: rgba(148,163,184,.10);
  --sec-g3: rgba(2,132,199,.08);
  --sec-blob1: rgba(56,189,248,.16);
  --sec-blob2: rgba(3,105,161,.12);
}


.steps-flow{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  padding: 40px 8px 24px;
}

.steps-flow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1px;
  border-bottom: 1px dashed rgba(148,163,184,.55);
  transform: translateY(-50%);
  pointer-events: none;
}

.step-node{
  position: relative;
  z-index: 1;
  flex: 1 1 150px;
  max-width: 200px;
  margin-inline: auto;
  text-align: center;
  padding: 14px 18px 18px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(226,242,255,.12));
  border: 1px solid rgba(191,219,254,.90);
  box-shadow:
    0 22px 60px rgba(15,23,42,.25),
    0 0 0 1px rgba(255,255,255,.65) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    opacity .7s ease-out,
    transform .7s ease-out,
    box-shadow .25s ease-out,
    border-color .25s ease-out;
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition-delay: calc(var(--step-order, 0) * 90ms);
}

.step-node:hover{
  box-shadow:
    0 26px 70px rgba(15,23,42,.32),
    0 0 0 1px rgba(255,255,255,.8) inset;
  border-color: rgba(125,211,252,.95);
}

.step-node.step-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Section shell for the 5-step area */
.section-steps {
  position: relative;
  padding: 3%;
  max-width: 100%;
  border-radius: 0px;
  overflow: hidden;
  background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.65), rgba(255,255,255,.55) 45%, rgba(226,232,240,.75) 60%),
    url(/assets/steps-bg-leaves3-9e164c5595318441b179a1d9843484d814b9484610d64277196676d2a47c5c30.png);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 40px 80px rgba(15,23,42,.28);
}

/* optional: subtle inner vignette so edges fade nicely */
.steps-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.95), rgba(255,255,255,.85) 45%, rgba(226,232,240,.75) 100%),
    url('<%= image_path "steps-bg-leaves2.jpg" %>');

    radial-gradient(circle at center,
      rgba(255,255,255,.0) 0%,
      rgba(15,23,42,.04) 70%,
      rgba(15,23,42,.10) 100%);
  pointer-events: none;
}

/* Slightly more transparent hex glass now that we have a background */
.step-icon{
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background:
    radial-gradient(circle at 20% 0%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.65) 30%,
      rgba(191,219,254,.32) 60%,
      rgba(15,23,42,.02) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 20px 50px rgba(15,23,42,.30),
    0 0 0 1px rgba(148,205,255,.55) inset;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

.step-icon::before{
  content: "";
  position: absolute;
  inset: 10px;
  clip-path: inherit;
  border: 1px solid rgba(255,255,255,.7);
  opacity: .85;
  pointer-events: none;
}

/* keep the dark center circle crisp */
.step-icon-number{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #0f172a, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.15rem;
  box-shadow:
    0 8px 20px rgba(15,23,42,.55),
    0 0 0 1px rgba(255,255,255,.6);
}
.step-node h3{
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--slate-900);
}

.step-node p{
  font-size: .9rem;
  line-height: 1.5;
  color: var(--slate-700);
}

/* ------------------------------------------------------------------ */
/* Getting Started Roadmap (modern path diagram)                        */
/* ------------------------------------------------------------------ */

.roadmap{
  position: relative;
  margin-top: 26px;
  padding: 22px 10px 8px;
}

.roadmap-path{
  position: absolute;
  left: 18px;
  right: 18px;
  /* sit behind the badges, not through the text */
  top: 104px;
  height: 220px;
  width: calc(100% - 36px);
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 12px 26px rgba(15,23,42,.18));
}

.roadmap-nodes{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.roadmap-node{
  --floatY: 12px;
  position: relative;
  border-radius: 26px;
  padding: 18px 18px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.48), rgba(226,242,255,.10));
  border: 1px solid rgba(191,219,254,.92);
  box-shadow:
    0 22px 60px rgba(15,23,42,.22),
    0 0 0 1px rgba(255,255,255,.62) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 248px;

  opacity: 0;
  transform: translateY(calc(var(--floatY) + 26px)) scale(.985);
  transition:
    opacity .7s ease-out,
    transform .7s ease-out,
    box-shadow .25s ease-out,
    border-color .25s ease-out;
  transition-delay: calc(var(--node-order, 0) * 90ms);
}

.roadmap-node:hover{
  box-shadow:
    0 26px 74px rgba(15,23,42,.28),
    0 0 0 1px rgba(255,255,255,.78) inset;
  border-color: rgba(125,211,252,.98);
}

.roadmap-node.roadmap-visible{
  opacity: 1;
  transform: translateY(var(--floatY)) scale(1);
}

/* Staggered "wave" placement to match the dashed path */
.roadmap-node:nth-child(1){ --floatY: 26px; }
.roadmap-node:nth-child(2){ --floatY: 0px; }
.roadmap-node:nth-child(3){ --floatY: 38px; }
.roadmap-node:nth-child(4){ --floatY: 4px; }
.roadmap-node:nth-child(5){ --floatY: 22px; }

.roadmap-badge-wrap{
  position: relative;
  width: 98px;
  height: 98px;
  margin: 0 auto 14px;
}

.roadmap-badge{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.35), rgba(255,255,255,.08) 38%, rgba(2,132,199,.12) 70%, rgba(15,23,42,.02) 100%),
    linear-gradient(135deg, rgba(14,165,233,.35), rgba(59,130,246,.25));
  /* Make the hex read clearly on light glass */
  border: 2px solid rgba(255,255,255,.88);
  box-shadow:
    0 20px 52px rgba(15,23,42,.30),
    0 0 0 2px rgba(148,205,255,.72) inset,
    0 0 0 1px rgba(2,132,199,.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Outer cyan outline ring (subtle but visible) */
.roadmap-badge::before{
  content: "";
  position: absolute;
  inset: -2px;
  clip-path: inherit;
  border: 2px solid rgba(2,132,199,.38);
  border-radius: 0; /* clip-path defines the shape */
  pointer-events: none;
}

/* crisp outline ring for the hex (helps it read on light backgrounds) */
.roadmap-badge::after{
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  box-shadow:
    0 0 0 1px rgba(2,132,199,.22) inset,
    0 10px 24px rgba(15,23,42,.16);
  pointer-events: none;
}

.roadmap-badge i{
  color: #fff;
  font-size: 28px;
  text-shadow: 0 10px 22px rgba(15,23,42,.35);
  transform: translateY(-2px);
}

.roadmap-number{
  position: absolute;
  z-index: 3;
  bottom: -12px;
  right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: radial-gradient(circle at 30% 0%, #0f172a, #020617);
  box-shadow:
    0 10px 22px rgba(15,23,42,.45),
    0 0 0 2px rgba(255,255,255,.70);
}

.roadmap-node h3{
  font-size: 1.02rem;
  margin: 0 0 6px;
  color: var(--slate-900);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roadmap-node p{
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--slate-700);
  min-height: 66px;
}

/* Mobile adjustments */
@media (max-width: 900px){
  .steps-flow{
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-inline: 0;
  }
  .steps-flow::before{
    display: none;
  }
  .step-node{
    max-width: none;
    text-align: left;
    padding: 14px 16px 18px;
  }
  .step-icon{
    margin: 0 0 8px;
  }
}

/* Roadmap responsive */
@media (max-width: 1100px){
  .roadmap-nodes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roadmap-path{ top: 128px; height: 210px; }
}

@media (max-width: 820px){
  .roadmap-nodes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap-path{ display: none; }
  .roadmap-node{
    text-align: left;
    transform: translateY(18px) scale(.99);
  }
  .roadmap-node.roadmap-visible{ transform: translateY(0) scale(1); }
  .roadmap-badge{ margin: 0 0 10px; }
  .roadmap-node:nth-child(n){ --floatY: 0px; }
}

@media (max-width: 560px){
  .roadmap-nodes{ grid-template-columns: 1fr; }
}

/* Small screen refinement */

@media (max-width: 480px){
  /* Extra-tight header layout for narrow phones (prevents account pill from clipping off-screen) */
  .nav-inner{
    padding-left:12px;
    padding-right:12px;
  }

  .logo-stack img{ width:56px !important; }

  .nav-right{ gap:8px; min-width:0; flex:1; }
  .nav-account-trigger{ max-width:160px; }
  .nav-account-name,
  .nav-account-chevron{ display:none !important; }
  .nav-account-pill{ font-size:10px; padding:6px 10px; }

  .nav-hamburger{ margin-left:8px; }
}


@media (max-width: 640px){
  .step-node h3{
    font-size: .98rem;
    margin-bottom: 4px;
  }
  .step-node p{
    font-size: .86rem;
  }
}
/* Outcomes: strong glass */
.section-outcomes{
  --sec-g2: rgba(2,132,199,.12);
  --sec-g3: rgba(14,165,233,.12);
  --sec-blob1: rgba(6,182,212,.20);
  --sec-blob2: rgba(3,105,161,.14);
}

/* Reviews: starry subtle */
.section-reviews{
  --sec-g2: rgba(148,163,184,.12);
  --sec-g3: rgba(59,130,246,.08);
  --sec-blob1: rgba(59,130,246,.16);
  --sec-blob2: rgba(6,182,212,.12);
}

/* ------------------------------------------------------------------ */
/* Glass utilities (apply to cards, columns, or panels)                */
/* ------------------------------------------------------------------ */

.glass-card{
  position:relative;
  border-radius:20px;
  background: linear-gradient(140deg, rgba(248, 250, 252, 0.86), rgba(226, 232, 240, 1));
  border:1px solid rgba(148,163,184,.45);
  box-shadow:
    0 24px 60px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color:var(--slate-900);
}
.glass-card .panel-inner{ padding:22px 20px 22px; }

.glass-strong{
  border-color: rgba(148,163,184,.55);
}

/* ------------------------------------------------------------------ */
/* Section header + text                                               */
/* ------------------------------------------------------------------ */

.section-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:18px;
  margin-bottom:18px;
}
.section-header h2{
  margin:0;
  font-size:22px;
  line-height:1.3;
  color:var(--slate-900);
}
.section-header p{
  margin:0;
  color:var(--slate-700);
  max-width:560px;
}

/* Eyebrow + text helpers */

.eyebrow{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:24px;
  font-weight:600;
  color:rgba(148,163,184,.95);
  margin:12px;
  padding:0px;
}
.lede{
  margin:0;
  color:var(--slate-700);
  font-size:15px;
  line-height:1.6;
}

/* Buttons */

.btn,
a.btn,
button.btn,
input.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  /* Match the top-right account button vibe */
  border-radius:999px;
  padding:10px 18px;
  min-height:38px;

  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;

  border:1px solid rgba(148,163,184,.7);
  background:rgba(255,255,255,.92);
  color:var(--slate-800);

  box-shadow:0 10px 26px rgba(15,23,42,.10);
  transition:box-shadow .16s ease, transform .08s ease, border-color .16s ease, background .16s ease, filter .16s ease;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
input.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(15,23,42,.16);
  border-color:rgba(59,130,246,.75);
  background:rgba(255,255,255,.98);
}

.btn:active,
a.btn:active,
button.btn:active,
input.btn:active{
  transform:translateY(0px);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}

.btn-primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#f9fafb;
  box-shadow:0 12px 32px rgba(2,132,199,.22);
}

.btn-primary:hover{
  border-color:transparent;
  filter:brightness(0.98);
  box-shadow:0 16px 38px rgba(2,132,199,.28);
}

.btn-ghost,
.btn-secondary{
  background:rgba(255,255,255,.70);
}

.btn-small,
.btn-mini{
  min-height:34px;
  padding:8px 14px;
  font-size:11px;
}

/* Make sure Rails button_to <form> buttons don't inherit ugly defaults */
.btn::-moz-focus-inner{ border:0; }
.btn-ghost{
  background:#ffffff;
  border-color:var(--slate-200);
  color:var(--slate-900);
}
.btn-ghost:hover{ background:var(--slate-100); }

/* ------------------------------------------------------------------ */
/* HEADER / NAV                                                        */
/* ------------------------------------------------------------------ */

header.header{ border-bottom:1px solid rgba(148,163,184,.18); padding:10px;}

header.header.nav-elevated{
  /* Keep the top nav visible while scrolling (translucent glass overlay) */
  position:sticky;
  top:0;
  left:0;
  width:100%;
  /* Avoid negative margins here; they can break sticky behavior in some browsers */
  margin-top:0;
  z-index:40;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 4px 18px rgba(15,23,42,.06);
  animation:nav-drop-in .45s ease-out;
}

/* Desktop: let the top nav span the full viewport width so the right-side
   account button sits flush-right on large screens. */
@media (min-width: 1025px){
  /* Desktop: keep the header content centered with a max width */
  .nav-inner{
    max-width:1080px;
    width:100%;
    margin:0 auto;
    padding:0 20px;
  }

  .nav-right{ margin-left:auto; }

  /* Drawer nav is mobile-only */
  .nav-hamburger,
  .nav-overlay,
  .nav-drawer{ display:none !important; }
}

.nav-inner{
  max-width:1080px;
  padding:0px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.nav-left{ margin-left:-10px; display:flex; align-items:center; gap:8px; }

.logo-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.logo-link:hover,
.logo-link:focus,
.logo-link:active{
  text-decoration:none;
}
.logo-stack{ display:flex; align-items:center; }
.logo-wordmark{
  margin-left:8px;
  font-weight:800;
  letter-spacing:.015em;
  font-size:20px;
  line-height:1;
  color:var(--slate-900);
  text-decoration:none;
  /* Subtle "embossed" wordmark feel to better match the image-based logo */
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 8px 18px rgba(15,23,42,.18);
}

.logo-link:hover .logo-wordmark{ text-decoration:none; }

/* Center nav links */

.nav-center{ flex:1; display:flex; justify-content:center; }

.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:22px; align-items:center;
  font-size:14px; font-weight:500;
}

.nav-link{
  position:relative; text-decoration:none; color:var(--slate-700);
  padding:4px 0; transition:color .18s ease, transform .1s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-700));
  transform:scaleX(0); transform-origin:center; transition:transform .2s ease-out,opacity .2s ease-out; opacity:0;
}
.nav-link:hover{ color:var(--slate-900); transform:translateY(-1px); }
.nav-link:hover::after{ transform:scaleX(1); opacity:1; }

/* Right side actions */

.nav-right{ display:flex; align-items:center; gap:8px; }

/* Mobile hamburger + slide-down menu */

.nav-hamburger{
  display:none;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(255,255,255,.9);
  padding:0;
  margin-left:0px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  transition:box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}

.nav-hamburger span{
  width:16px;
  height:2px;
  border-radius:999px;
  background:var(--slate-800);
  transition:transform .15s ease, opacity .15s ease;
}

/* X state */
.nav-hamburger.is-open span:nth-child(1){
  transform:translateY(4px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2){
  opacity:0;
}
.nav-hamburger.is-open span:nth-child(3){
  transform:translateY(-4px) rotate(-45deg);
}

/* --------------------------------------------------------------- */
/* Mobile nav drawer (blue-glass)                                   */
/* --------------------------------------------------------------- */

.nav-mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:80;
}

.nav-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width:min(88vw, 360px);
  padding:14px;
  background:linear-gradient(180deg, rgba(239,246,255,.90), rgba(255,255,255,.86));
  border-left:1px solid rgba(59,130,246,.25);
  box-shadow:-24px 0 60px rgba(15,23,42,.28);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transform:translateX(calc(100% + 48px));
  transition:transform .22s ease;
  z-index:90;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.nav-drawer.nav-mobile--open{ transform:translateX(0); }
.nav-drawer.nav-mobile--open + .nav-mobile-overlay,
.nav-mobile-overlay.nav-mobile--open{ opacity:1; pointer-events:auto; }

/* allow body lock */
body.has-mobile-nav-open{ overflow:hidden; }

.nav-drawer__header{
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(59,130,246,.20);
  background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(255,255,255,.65));
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}

.nav-drawer__profile{ display:flex; align-items:center; gap:10px; }

.nav-drawer__avatar{
  width:42px; height:42px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(59,130,246,.25);
  background:rgba(255,255,255,.75);
  overflow:hidden;
}
.nav-drawer__avatar-img{ width:100%; height:100%; object-fit:cover; }
.nav-drawer__avatar-fallback{ font-weight:800; color:rgba(30,64,175,.95); }

.nav-drawer__name{ font-weight:850; color:var(--slate-900); font-size:14px; line-height:1.1; }
.nav-drawer__role{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(30,64,175,.75); margin-top:2px; }

.nav-drawer__section{ margin-top:12px; }
.nav-drawer__section-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(15,23,42,.55);
  margin:10px 6px 8px;
}

.nav-drawer__links{ display:flex; flex-direction:column; gap:8px; }

.nav-drawer__divider{
  height:1px;
  margin:14px 8px 6px;
  background:linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.55), rgba(148,163,184,0));
}

.nav-drawer__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:16px;
  text-decoration:none;
  color:var(--slate-800);
  font-weight:650;
  font-size:14px;
  border:1px solid rgba(59,130,246,.16);
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(219,234,254,.55));
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transition:transform .10s ease, box-shadow .16s ease, border-color .16s ease;
}

.nav-drawer__link:hover{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,.34);
  box-shadow:0 14px 30px rgba(15,23,42,.12);
}

/* Touch feedback (mobile) */
.nav-drawer__link:active{
  transform:translateY(0);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  border-color:rgba(59,130,246,.55);
  background:linear-gradient(135deg, rgba(255,255,255,.70), rgba(191,219,254,.62));
}

/* Active (current panel) */
.nav-drawer__link.is-active{
  border-color:rgba(59,130,246,.70);
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(147,197,253,.55));
  box-shadow:0 14px 30px rgba(15,23,42,.14);
}



/* Active state for the current panel */
.nav-drawer__link.is-active{
  border-color:rgba(59,130,246,.60);
  background:linear-gradient(135deg, rgba(239,246,255,.92), rgba(191,219,254,.60));
  box-shadow:0 14px 30px rgba(15,23,42,.12);
}

.nav-drawer__link--danger{
  border-color:rgba(239,68,68,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.80), rgba(254,226,226,.55));
}

/* Ensure legacy slide-down panel stays hidden (if any old markup exists) */
.nav-mobile{ display:none !important; }



/* Account dropdown */

.nav-account-dropdown{ position:relative; }
.nav-account-trigger{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; border:1px solid rgba(148,163,184,.7);
  background:rgba(255,255,255,.9);
  cursor:pointer; font-size:13px; font-weight:500; color:var(--slate-800);
  box-shadow:0 8px 20px rgba(15,23,42,.08);
  transition:box-shadow .16s ease, transform .08s ease, border-color .16s ease, background .16s ease;
}
.nav-account-trigger:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(15,23,42,.16);
  border-color:rgba(59,130,246,.8);
  background:rgba(255,255,255,.98);
}
.nav-account-pill{
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  padding:10px 10px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#f9fafb;
}


/* Ensure any CTA pill used on the home page matches the top-right account pill */
.home-pill-cta.btn-cta,
.section-block .home-pill-cta.btn-cta,
.section-block .btn-mini.btn-cta.home-pill-cta{
  border-color: rgba(2,132,199,.55) !important;
  background: linear-gradient(135deg,var(--brand-500),var(--brand-700)) !important;
  color: #f9fafb !important;
  box-shadow: 0 12px 32px rgba(2,132,199,.22) !important;
}

/* Outline variant on home should still look like the pill system */
.home-pill-cta.btn-mini:not(.btn-cta){
  border:1px solid rgba(148,163,184,.7);
  background:rgba(255,255,255,.92);
  color:var(--slate-800);
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}


/* ------------------------------------------------------------------ */
/* Frontpage CTA pills                                                */
/* Unifies the two blue pill buttons on the home page (Explore + Quick search) */
/* ------------------------------------------------------------------ */

.home-pill-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  padding:12px 22px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 12px 32px rgba(2,132,199,.22);
}

/* Ensure the mini button variant matches the pill style */
.btn-mini.home-pill-cta{
  padding:12px 22px;
  border-radius:999px;
}

.nav-account-name{ max-width:120px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.nav-account-chevron{ font-size:11px; color:var(--slate-500); }

.nav-account-menu{
  position:absolute; right:0; top:100%;
  min-width:200px; padding:8px 0; border-radius:14px;
  background:#ffffff; border:1px solid rgba(148,163,184,.35);
  box-shadow:0 18px 45px rgba(15,23,42,.22);
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease; z-index:50;
}
.nav-account-dropdown:hover .nav-account-menu,
.nav-account-dropdown:focus-within .nav-account-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-account-item{
  display:block; padding:7px 12px; font-size:13px; color:var(--slate-800);
   transition:background .13s ease, color .13s ease;
}
.nav-account-item:hover{ background:rgba(248,250,252,1); color:var(--slate-900); }
.nav-account-item--danger{ color:#b91c1c; }
.nav-account-item--danger:hover{ background:#fef2f2; }
.nav-account-divider{ height:1px; margin:5px 0; background:rgba(226,232,240,1); }

header.header .btn.nav-utility{ font-size:13px; padding:8px 12px; }
header.header .btn.nav-cta{ font-size:13px; padding:8px 13px; box-shadow:0 8px 24px rgba(3,105,161,.35); }

/* Nav drop-in animation keyframes */

@keyframes nav-drop-in{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ------------------------------------------------------------------ */
/* HERO                                                               */
/* ------------------------------------------------------------------ */

.hero-bg{
  position:relative;
  margin-top:32px;
  padding:32px 28px 40px;
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.35), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(37, 162, 235,.95), var(--slate-950));
  color:#e5e7eb;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(15,23,42,.55);
}
.hero-bg::before{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  opacity:.3;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.65), transparent 52%),
    radial-gradient(circle at 75% 80%, rgba(96,165,250,.85), transparent 55%);
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero-bg > *{ position:relative; z-index:1; }

.split-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.45fr);
  gap:32px; align-items:stretch;
}

/* Left intro */

.hero-intro{
  max-width:520px; display:flex; flex-direction:column; gap:14px; justify-content:center;
}
.hero-intro .eyebrow{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  background:rgba(15,23,42,.7); color:rgba(226,232,240,.9);
  text-transform:uppercase; letter-spacing:.14em; font-size:15px;
}
.hero-intro .eyebrow::before{
  content:""; width:7px; height:7px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
}
.hero-intro h1{ margin:0; font-size:30px; line-height:1.15; color:#f9fafb; }
.hero-intro .lede{ color:rgba(226,232,240,.9); font-size:15px; }
.hero-intro .lede span{ opacity:.85; }

/* Split hero panels */

.hero-split-panels{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px; align-items:stretch;
}

/* Base panel + glass override */

.panel{ background:#ffffff; border-radius:16px; border:1px solid #e5e7eb; box-shadow:0 4px 16px rgba(17,24,39,.06); }
.panel-inner{ padding:22px 20px 24px; }

.hero-split-panels .panel{
  background:linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 28px 70px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.45);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  color:#e5e7eb;
  overflow:hidden;
}
.hero-split-panels .panel::before{
  content:"";
  position:absolute; inset:-35%; 
  background:
    radial-gradient(circle at 0% 0%,rgba(6,182,212,.55),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(59,130,246,.45),transparent 55%);
  opacity:.7; mix-blend-mode:soft-light; pointer-events:none;
}
.hero-split-panels .panel-inner{ position:relative; z-index:1; padding:22px 20px 20px; }

/* Stagger */
.hero-split-panels .panel:nth-child(2){ transform:translateY(10px); }
.hero-split-panels .panel:nth-child(1){ transform:translateY(-4px); }

/* Hero panel typography */

.hero-panel .eyebrow{ margin-bottom:4px; color:rgba(191,219,254,.95); background:transparent; padding:0; letter-spacing:.16em; }
.hero-panel h2{ margin:0 0 8px; font-size:18px; color:#f9fafb; }
.hero-panel p{ margin:0 0 10px; font-size:13px; color:rgba(226,232,240,.92); }
.cta-group{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 12px; }
.hero-panel .btn-primary{ box-shadow:0 14px 34px rgba(6,182,212,.65); }
.hero-panel .btn-ghost{ background:rgba(15,23,42,.85); border-color:rgba(148,163,184,.7); color:#e5e7eb; }
.hero-panel .btn-ghost:hover{ background:rgba(15,23,42,.95); }

.mini-bullets{ list-style:none; padding:0; margin:8px 0 0; font-size:11px; color:rgba(226,232,240,.9); }
.mini-bullets li{ display:flex; align-items:flex-start; gap:6px; }

/* ------------------------------------------------------------------ */
/* Mission / Features / How / Outcomes / Reviews content blocks        */
/* ------------------------------------------------------------------ */

.mission-shell{
  position:relative; 
  /*border-radius:24px; */
  padding:24px 26px 26px;
  background:rgba(255,255,255,.14);
  box-shadow:0 22px 55px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden; backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.mission-header{ position:relative; z-index:1; margin-bottom:18px; }
.mission-header .eyebrow{ color:var(--brand-700); margin-bottom:4px; }
.mission-header h2{ max-width:520px; font-size:22px; }

.mission-grid{
  position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr);
  gap:22px; align-items:flex-start;
}
.mission-copy{ font-size:15px; line-height:1.7; color:var(--slate-700); width: 40%; max-width: 40%}
.mission-copy p{ margin:0 0 10px; }
.mission-highlights{ display:flex; flex-direction:column; gap:10px; }
/* ------------------------------------------------------------------ */
/* Our Story (front page)                                              */
/* ------------------------------------------------------------------ */

.section-story-letter .story-letter-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:28px;
  align-items:stretch;
}

@media (max-width: 980px){
  .section-story-letter .story-letter-grid{
    grid-template-columns:1fr;
  }
}

.story-letter{
  position:relative;
  padding:34px 34px 28px;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 22px 60px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.85);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82)),
    repeating-linear-gradient(
      to bottom,
      rgba(2,132,199,.05) 0px,
      rgba(2,132,199,.05) 1px,
      transparent 1px,
      transparent 34px
    );
  backdrop-filter: blur(10px);
}

.story-letter:before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:18px;
  pointer-events:none;
}

.story-letter-kicker{
  font-weight:700;
  color:var(--brand-700);
  letter-spacing:.01em;
  margin:0 0 10px;
  font-size:14px;
}

.story-letter-title{
  margin:0 0 18px;
  font-size:32px;
  letter-spacing:-.02em;
  color:var(--slate-900);
}

.story-letter-body{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  color:rgba(15,23,42,.88);
  font-size:18px;
  line-height:1.85;
}

.story-letter-body p{
  margin:0 0 14px;
}

.story-letter-body .story-letter-closing{
  margin-top:18px;
}

.story-letter-signoff{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(148,163,184,.35);
}

.story-signature{
  font-family: "Brush Script MT","Segoe Script","Snell Roundhand",cursive;
  font-size:44px;
  line-height:1;
  color:rgba(15,23,42,.90);
  margin:2px 0 12px;
}

.story-name{
  margin:0;
  float: right;
  font-weight:800;
  color:var(--slate-900);
  letter-spacing:.01em;
}

.story-title{
  margin:3px 0 0;
  font-size:13px;
  color:var(--slate-600);
}

.story-letter-aside{
  display:flex;
}

.story-portrait-card{
  width:100%;
  border-radius:26px;
  border:1px solid rgba(226,232,240,.95);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  box-shadow:0 22px 60px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}

.story-portrait-frame{
  border-radius:22px;
  border:1px solid rgba(148,163,184,.35);
  background:radial-gradient(circle at 30% 20%, rgba(6,182,212,.22), transparent 55%),
             radial-gradient(circle at 70% 70%, rgba(2,132,199,.18), transparent 55%),
             rgba(255,255,255,.7);
  padding:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:260px;
}

.story-portrait-logo{
  max-width:220px;
  width:70%;
  height:auto;
  filter: drop-shadow(0 12px 18px rgba(15,23,42,.18));
}

.story-portrait-caption{
  font-size:14px;
  color:var(--slate-700);
  line-height:1.6;
}


/* Highlight cards */
.mission-card{
  position:relative; padding:10px 12px 12px 16px; 
  border-radius:23px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}
.mission-card::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:999px;
  background:linear-gradient(180deg, var(--brand-500), var(--brand-700));
}
.mission-card h3{ margin:0 0 4px; font-size:14px; color:var(--brand-700); }
.mission-card p{ margin:0; font-size:13px; color:var(--slate-700); }

/* ------------------------------------------------------------------ */
/* PLATFORM FEATURES (MODERN)                                          */
/* ------------------------------------------------------------------ */

.section-features-modern .section-title{
  margin:10px 0 6px;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--slate-900);
}

.feature-showcase-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.feature-showcase-card{
  position:relative;
  border-radius:22px;
  padding:16px 16px 14px;
  border:1px solid rgba(226,232,240,.9);
  background:
    radial-gradient(circle at 15% 10%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(circle at 90% 85%, rgba(14,165,233,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.70));
  box-shadow:0 18px 48px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-showcase-card:hover{
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.35);
  box-shadow:0 24px 60px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.80);
}

.feature-showcase-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.feature-showcase-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(14,165,233,.95), rgba(3,105,161,.95));
  box-shadow:0 14px 28px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.28);
  flex: 0 0 auto;
}

.feature-showcase-icon i{
  color:#fff;
  font-size:18px;
}

.feature-showcase-head h3{
  margin:0 0 4px;
  font-size:15px;
  color:var(--slate-900);
  letter-spacing:-0.01em;
}

.feature-showcase-head p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--slate-700);
}

.feature-showcase-points{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.feature-showcase-points li{
  font-size:12px;
  color:var(--slate-700);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.40);
  background:rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

/* Features columns upgraded to glass by default */
.section-features .feature-column{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border:1px solid rgba(226,232,240,.9);
  padding:20px 18px 18px;
  box-shadow:0 12px 32px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
}
.section-features .feature-column h3{ margin:0 0 8px; font-size:16px; }
.section-features .feature-column ul{
  margin:0; padding-left:18px; color:var(--slate-700); font-size:14px; line-height:1.7;
}
.features-dual{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }

/* How steps */
.steps-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.step-card{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border:1px solid rgba(226,232,240,.95);
  padding:16px 14px 18px;
  box-shadow:0 10px 26px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}
.step-badge{
              position: absolute;
              right: -20%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 120px;
              height: 120px;
              border-radius: 999px;
              background:
                linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 0.7),
                  rgba(219, 234, 254, 0.5)
                );
              border: 1px solid rgba(148, 163, 184, 0.7);
              box-shadow:
                0 18px 40px rgba(15, 23, 42, 0.26),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset;
              backdrop-filter: blur(16px);
              display: flex;
              align-items: center;
              justify-content: center;
}
.step-card h3{ margin:0 0 6px; font-size:15px; }
.step-card p{ margin:0; font-size:13px; color:var(--slate-700); }

/* Outcomes / Reviews cards → glass */
.outcomes-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.outcome-card{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border:1px solid rgba(226,232,240,.95);
  padding:14px 14px 16px;
  box-shadow:0 12px 30px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.mock-image{
  border-radius:14px;
  background:radial-gradient(circle at 0% 0%,rgba(6,182,212,.28),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(3,105,161,.35),transparent 55%);
  padding:10px; margin-bottom:10px;
}
.mock-bar{ height:6px; border-radius:999px; background:rgba(15,23,42,.22); margin-bottom:4px; }
.mock-bar:nth-child(2){width:70%}
.mock-bar:nth-child(3){width:48%}
.outcome-card h3{ margin:0 0 6px; font-size:15px; }
.outcome-card p{ margin:0; font-size:13px; color:var(--slate-700); }

.reviews-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.review-card{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border:1px solid rgba(226,232,240,.95);
  padding:14px 14px 16px;
  box-shadow:0 10px 26px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.review-card .stars{ font-size:14px; color:#fbbf24; margin-bottom:6px; }
.review-card .quote{ margin:0 0 8px; font-size:14px; color:var(--slate-800); }
.review-card .review-meta{ margin:0; font-size:12px; color:var(--slate-500); }

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px){

header.header.nav-elevated{
  /* Keep the top nav visible while scrolling (translucent glass overlay) */
  position:fixed;
  top:0;
  left:0;
  width:100%;
  /* Avoid negative margins here; they can break sticky behavior in some browsers */
  /* iOS notch / safe-area support */
  padding-top:calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom:10px;
  z-index:40;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 4px 18px rgba(15,23,42,.06);
  animation:nav-drop-in .45s ease-out;
}

/* Public provider profile: ensure the top card is not hidden under the fixed
   header on mobile/tablet. */
.pp-public{
  padding-top:132px;
}


  .split-hero{ grid-template-columns:1fr; }
  .hero-split-panels{ grid-template-columns:1fr; }
  .mission-grid{ grid-template-columns:1fr; }

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

  /* Mobile/tablet: use full-width flex so the hamburger can sit flush-right */
  .nav-inner{
    width:100%;
    max-width:none;
    padding:0 14px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .nav-right{ margin-left:auto; }
  .nav-hamburger{ margin-left:10px; }
  .nav-center{ display:none; } /* collapse on tablet */
  .nav-hamburger{ display:flex; }

  .hero-split-panels .panel,
  .hero-split-panels .panel:nth-child(1),
  .hero-split-panels .panel:nth-child(2){ transform:none; }

  /* Match tablet gutters */
  .section-block::before{ left:-16px; right:-16px; border-radius:20px; }
  .section-block::after{ width:120px; height:120px; }

  /* Mobile navbar tightening: hide wordmark + prevent account pill from pushing hamburger off-screen */
  /* Keep the Coachable wordmark visible on mobile (brand clarity). */
  .logo-wordmark{
    display:inline-block !important;
    font-size:18px;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .logo-stack img{ width:64px !important; height:auto !important; }

  .nav-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; flex:1; }
  .nav-account-trigger{ max-width:210px; }
  .nav-account-name{ max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-account-pill{ font-size:10px; padding:6px 10px; }
  .nav-hamburger{ margin-left:10px; flex:0 0 auto; }
  .nav-inner{ padding-right:18px; }

  /* Mission panels should fill ~90% width on mobile */
  .section-mission .section-inner{ padding-left:0; padding-right:0; margin-top:20px; }
  .mission-top-card,
  .mission-card,
  .mission-grid > *{
    width: min(90vw, 560px);
    margin-left: auto;
    margin-right: auto;
  }

}


@media (max-width: 640px){
  .section-features-modern .section-title{ font-size:24px; }
  .feature-showcase-grid{ grid-template-columns:1fr; }
  .feature-showcase-card{ padding:14px 14px 12px; }
  .feature-showcase-icon{ width:44px; height:44px; border-radius:16px; }
}

@media (max-width: 900px){
  .features-dual{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .outcomes-grid, .reviews-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px){
  html, body{ margin:0; padding:0; }

  /* Mobile: remove outer gutters + rounded "canvas" so the background fills edge-to-edge */
  .page-shell{
    padding:0;
    top:50px;
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* Section background should not create white rails on the sides */
  .section-block::before{ left:0; right:0; border-radius:0; }

  /* Primary hero + mission shells should be square on mobile */
  .hero-bg{ padding:24px 16px 28px; margin-top:20px; border-radius:0; }
  .hero-intro h1{ font-size:24px; }
  .mission-shell{ padding:20px 16px 22px; border-radius:0; }

  /* Ensure the background image container itself doesn't round corners */
  .mission-hero-shell{ border-radius:0; }

  .steps-grid, .outcomes-grid, .reviews-grid{ grid-template-columns:1fr; }

  .nav-right .btn.nav-utility{ display:none; }
}



/* ============================================================
   Reusable Glass Panel + Generic Section Canvases
   (drop-in; no HTML changes required beyond adding classes)
   ============================================================ */

/* ---------- Generic section canvas (aligned to page gutters) ---------- */
.section-block{
  position:relative;
  /* per-section tunables (overridden by theme classes below) */
}

/* perfectly aligned background */
.section-block::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-20px; right:-20px;   /* match .page-shell padding (20px) */
  top:0; bottom:0;
  border-radius:22px;
  pointer-events:none;
  /* force new stacking context on Safari for proper blur composition */
  backdrop-filter: blur(0.0001px);
}

/* Mobile/tablet gutters */
@media (max-width:1024px){
  .section-block::before{ left:-16px; right:-16px; border-radius:20px; }
}
@media (max-width:640px){
  .section-block::before{ left:-14px; right:-14px; border-radius:18px; }
}

/* ---------- Section canvas themes (apply to the section element) ---------- */
/* Example: <section class="section-block section--cyan"> ... </section> */

.section--cyan{
  --sec-g2: rgba(2,132,199,.08);
  --sec-g3: rgba(14,165,233,.10);
  --sec-blob1: rgba(56,189,248,.16);
  --sec-blob2: rgba(37,99,235,.12);
}
.section--blue{
  --sec-g2: rgba(2,132,199,.10);
  --sec-g3: rgba(2,132,199,.08);
  --sec-blob1: rgba(6,182,212,.18);
  --sec-blob2: rgba(3,105,161,.12);
}
.section--slate{
  --sec-g2: rgba(148,163,184,.14);
  --sec-g3: rgba(2,132,199,.08);
  --sec-blob1: rgba(59,130,246,.14);
  --sec-blob2: rgba(56,189,248,.12);
}
.section--bright{
  --sec-g2: rgba(2,132,199,.12);
  --sec-g3: rgba(14,165,233,.12);
  --sec-blob1: rgba(6,182,212,.20);
  --sec-blob2: rgba(3,105,161,.14);
}
.section--soft{
  --sec-g2: rgba(148,163,184,.12);
  --sec-g3: rgba(59,130,246,.08);
  --sec-blob1: rgba(59,130,246,.16);
  --sec-blob2: rgba(6,182,212,.12);
}

/* ---------- Reusable glass panel (mission look) ---------- */
/* Wrap section content with .glass-panel for the exact glass aesthetic */
.glass-panel{
  position:relative;
  border-radius:24px;
  padding:24px 26px 26px;
  background:rgba(255,255,255,.64);
  border:1px solid rgba(148,163,184,.38);
  box-shadow:0 22px 55px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Slightly punchier version */
.glass-panel--strong{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border-color:rgba(226,232,240,.9);
  box-shadow:0 26px 60px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.75);
}

/* Optional grid layout (body + highlights) used by mission panel */
.glass-panel__grid{
  position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr);
  gap:22px; align-items:flex-start;
}
.glass-panel__body{ font-size:15px; line-height:1.7; color:var(--slate-700); }
.glass-panel__body p{ margin:0 0 10px; }
.glass-panel__highlights{ display:flex; flex-direction:column; gap:10px; }

/* Card style used inside glass panels */
.glass-panel__card{
  position:relative; padding:10px 12px 12px 16px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}
.glass-panel__card::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:999px;
  background:linear-gradient(180deg, var(--brand-500), var(--brand-700));
}
.glass-panel__card h3{ margin:0 0 4px; font-size:14px; color:var(--brand-700); }
.glass-panel__card p{ margin:0; font-size:13px; color:var(--slate-700); }

/* Responsive */
@media (max-width:1024px){
  .glass-panel__grid{ grid-template-columns:1fr; }
}


/* ------------------------------------------------------------------ */
/* Platform features refresh                                           */
/* ------------------------------------------------------------------ */

.section-mission--features{
  margin-top:56px;
  position:relative;
}

.section-mission--features .mission-shell{
  border-radius:32px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.section-mission--features .mission-header{
  margin-bottom:18px;
}

.section-mission--features .mission-header h2{
  max-width:560px;
}

.mission-subtitle{
  margin:6px 0 0;
  font-size:14px;
  color:var(--slate-600);
}

.section-mission--features .mission-grid{
  margin-top:12px;
  gap:26px;
}

.section-mission--features .mission-copy > p{
  margin-bottom:12px;
}

/* Soft logo watermark */
.section-mission--features .features-watermark{
  position:absolute;
  right:-34px;
  top:-40px;
  opacity:.10;
  filter:drop-shadow(0 18px 40px rgba(15,23,42,.35));
  pointer-events:none;
}

.features-watermark-image{
  width:220px;
  height:auto;
  display:block;
}

/* Left column: feature list with icons */

.feature-list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.feature-list-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,250,252,.96));
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.feature-icon{
  flex:none;
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:radial-gradient(circle at 30% 0%, var(--brand-500), var(--brand-700));
  color:#f9fafb;
}

.feature-text h3{
  margin:0 0 3px;
  font-size:14px;
  color:var(--slate-900);
}

.feature-text p{
  margin:0;
  font-size:13px;
  color:var(--slate-700);
}

/* Right column: slimmer cards with icon chips */

.section-mission--features .mission-highlights{
  gap:14px;
}

.section-mission--features .mission-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
}

.section-mission--features .mission-card::before{
  display:none;
}

.mission-card-icon{
  flex:none;
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:radial-gradient(circle at 30% 0%, var(--brand-soft), var(--brand-500));
  color:var(--brand-700);
}

.mission-card-body h3{
  margin:0 0 4px;
  font-size:14px;
  color:var(--brand-700);
}

.mission-card-body p{
  margin:0;
  font-size:13px;
  color:var(--slate-700);
}

/* Responsive tweaks */

@media (max-width: 900px){
  .section-mission--features{
    margin-top:40px;
  }

  .section-mission--features .mission-shell{
    padding:0;
  }

  .section-mission--features .features-watermark{
    right:-10px;
    top:-10px;
  }

  .features-watermark-image{
    width:150px;
  }
}

@media (max-width: 640px){
  .feature-list-item{
    padding:10px 10px;
  }

  .section-mission--features .mission-grid{
    gap:20px;
  }
}


/* ------------------------------------------------------------------ */
/* Services grid – glass mosaic tiles (Option A)                      */
/* ------------------------------------------------------------------ */

.section-services{
  padding-bottom: 0px;
}

.services-shell {
  margin: auto;      
  position: relative;
  padding: 5%;
  padding-bottom: 0px;
  margin-top: 10px;
  margin-left:20px;
  overflow: hidden;
}

.services-shell::before{
  content:"";
  position:absolute;
  inset:-40%;
  opacity:.7;
  pointer-events:none;
  z-index:0;
   background:linear-gradient(150deg,
    rgba(255,255,255,.30),
    rgba(191,219,254,.16));
}

.services-header{
  position:relative;
  z-index:1;
  margin-bottom:18px;
}

.services-header h2{
  margin:0 0 6px;
  font-size:24px;
}

.services-header .section-subtitle{
  max-width:540px;
}

/* Grid layout */

.services-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
  margin-top:18px;
}

/* Glass service cards */

.service-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,.10));
  border:1px solid rgba(148,163,184,.60);
  min-height:190px;
  cursor:pointer;
  box-shadow:
    0 18px 45px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.55);
  transform:translate3d(0,0,0) scale(1);
  transition:
    transform 260ms ease-out,
    box-shadow 260ms ease-out,
    border-color 260ms ease-out,
    background 260ms ease-out;
}

.service-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.65), transparent 60%);
  opacity:0;
  pointer-events:none;
  transition:opacity 260ms ease-out;
}

.service-card-inner{
  position:relative;
  z-index:2;
  padding:18px 18px 18px;
  max-width:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.service-card h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--slate-900);
}

.service-card p{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.5;
  color:var(--slate-700);
}

.service-card-link{
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-700);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.service-card-link span[aria-hidden="true"]{
  font-size:14px;
  transform:translateX(0);
  transition:transform 220ms ease-out;
}

/* Watermark image layer */

.service-card-media{
  position:absolute;
  inset:-110px -28px -10px auto;
  display: grid;
  align-items:stretch;
  justify-content:flex-end;
  z-index:1;
  pointer-events:none;
  opacity:0.25; /* start faded */
  mix-blend-mode:soft-light;
  filter:saturate(130%) contrast(104%);
  transform:translate3d(-10px,0,0) scale(1.05);
  transition:
    transform 420ms ease-out,
    opacity 420ms ease-out;
}

.service-card-image{
  width:140%;
  min-width:260px;
  height:100%;
  object-fit:cover;
}

/* Artistic category: prevent aggressive cropping for wide illustrations */
.service-card--artistic .service-card-media{
  inset:-40px -22px -12px auto;
  opacity:0.30;
  transform:translate3d(-6px,0,0) scale(1.02);
}

.service-card--artistic .service-card-image{
  width:115%;
  min-width:240px;
  height:100%;
  object-fit:contain;
}

.service-card--artistic:hover .service-card-media{
  opacity:0.55;
  transform:translate3d(-2px,-2px,0) scale(1.05);
}

/* Spiritual category: reduce crop so artwork details remain visible */
.service-card--spiritual .service-card-media{
  inset:-55px -22px -14px auto;
  opacity:0.30;
  transform:translate3d(-6px,0,0) scale(1.02);
}

.service-card--spiritual .service-card-image{
  width:118%;
  min-width:240px;
  height:100%;
  object-fit:contain;
}

.service-card--spiritual:hover .service-card-media{
  opacity:0.55;
  transform:translate3d(-2px,-2px,0) scale(1.05);
}


/* Hover / tilt interaction */
.service-card:hover{
  transform:translate3d(0,-8px,0) rotateX(1.2deg) rotateY(-1.4deg);
  box-shadow:0 26px 70px rgba(15,23,42,.28);
  border-color:rgba(56,189,248,.95);
  background:linear-gradient(150deg,
    rgba(255,255,255,.30),
    rgba(191,219,254,.16));
}

/* Make media fully visible on hover */
.service-card:hover .service-card-media{
  opacity:1;
}

.service-card:hover::before{
  opacity:1;
}

.service-card:hover .service-card-inner{
  transform:translate3d(4px,-2px,0);
}

.service-card-inner{
  transition:transform 260ms ease-out;
}

.service-card:hover .service-card-media{
  opacity:.55;
  transform:translate3d(-2px,-4px,0) scale(1.09);
}

.service-card:hover .service-card-link span[aria-hidden="true"]{
  transform:translateX(3px);
}

/* Responsive tweaks */

@media (max-width: 1024px){
  .services-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .services-shell{
    padding:22px 18px 22px;
  }

  .services-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .service-card-inner{
    max-width:none;
  }
}

/* ------------------------------------------------------------------ */
/* Top providers carousel-style grid                                   */
/* ------------------------------------------------------------------ */

.section-providers{

  position: relative;
  padding: 3%;
  max-width: 100%;
  border-radius: 0px;
  overflow: hidden;
  background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.65), rgba(255,255,255,.55) 45%, rgba(226,232,240,.75) 100%),
    url(/assets/bgmain3-4bc77c845e84d971f9b9f13c1781d37dbbcf9cc7d1379edb0ad3169d763b5e3c.jpg);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 40px 80px rgba(15,23,42,.28);


  --sec-g2: rgba(219,234,254,.16);
  --sec-g3: rgba(191,219,254,.18);
  --sec-blob1: rgba(56,189,248,.20);
  --sec-blob2: rgba(37,99,235,.18);
}

/* ------------------------------------------------------------------ */
/* Public profile editor (provider/admin)                              */
/* ------------------------------------------------------------------ */

.public-profile-editor-page{
  position:relative;
  overflow:hidden;
}

/* Put the leaves behind the whole editor experience (not just the shell) */
.public-profile-editor-page::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.55), rgba(255,255,255,.25) 42%, rgba(2,132,199,.10) 100%),
    url(/assets/login-bg-78fd392a3e403ad2c5fca181ea10e3cb2cf6999abdac301613f38c9544088148.png);
-webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);    
  background-size: cover;
  background-position: center;
  pointer-events:none;
  z-index:0;
}

.public-profile-editor-page .section-inner{
  position:relative;
  z-index:1;
}

.public-profile-editor-shell{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.28);
  /* Frosted-glass surface */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.82) 0%,
    rgba(248,250,252,.74) 40%,
    rgba(239,246,255,.68) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);

  box-shadow:
    0 28px 90px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.public-profile-editor-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(147,197,253,.20), transparent 60%),
    radial-gradient(circle at 70% 90%, rgba(186,230,253,.16), transparent 55%);
  opacity:.9;
  z-index:0;
}

.public-profile-editor-shell > *{
  position: relative;
  z-index: 1;
}


/* Shareable link pills (avoid overflow on mobile) */
.public-profile-share{
  text-align:right;
}

.public-profile-share-label{
  margin:0 0 6px;
  font-size:13px;
  color:var(--slate-600);
}

.public-profile-share-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.public-profile-share-link{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#0f172a;
  color:#f9fafb;
  max-width:520px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
}

.public-profile-share-copy,
.public-profile-share-view{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #0f172a;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}

.public-profile-share-copy{
  background:#f9fafb;
  color:#0f172a;
}

.public-profile-share-view{
  background:#0f172a;
  color:#f9fafb;
}

@media (max-width: 560px){
  .public-profile-share{
    text-align:left;
  }

  .public-profile-share-row{
    justify-content:flex-start;
  }

  .public-profile-share-link{
    max-width:100%;
    flex:1 1 100%;
  }
}

/* Mobile header/layout polish for the public profile editor */
@media (max-width: 720px){
  /* The editor section has an inline negative margin for desktop framing.
     On mobile it can push the header too tight under the top nav. */
  #edit-public-profile{
    margin-top:0 !important;
  }

  .public-profile-editor-shell{
    padding:22px 18px 24px !important;
    margin:16px auto 36px !important;
    border-radius:24px !important;
  }

  .public-profile-editor-header{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    margin-bottom:14px !important;
  }

  .public-profile-editor-header h1{
    font-size:22px !important;
    line-height:1.15;
  }

  .public-profile-share{
    width:100%;
    text-align:left;
  }

  .public-profile-share-row{
    justify-content:flex-start;
  }

  .public-profile-share-link{
    width:100%;
    display:block;
    max-width:100%;
    overflow-x:auto;
    text-overflow:clip;
    -webkit-overflow-scrolling:touch;
  }

  .public-profile-share-copy,
  .public-profile-share-view{
    flex:1 1 0;
    text-align:center;
  }
}

.providers-shell{

  position:relative;
  padding:5%;
  margin-top:0px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(148,163,184,.30);
  box-shadow:0 28px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
}

.providers-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:18px;
}

.providers-header h2{
  margin:0;
  font-size:24px;
}

.providers-header .section-subtitle{
  margin:0;
  font-size:13px;
  color:var(--slate-600);
  max-width:540px;
}

/* Grid of provider cards */

.providers-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:12px;
}

.provider-card{
  position:relative;
  border-radius:22px;
  padding:16px 16px 14px;
  background:linear-gradient(145deg, rgba(248,250,252,.98), rgba(239,246,255,.96));
  border:1px solid rgba(209,213,219,.9);
  box-shadow:0 18px 46px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.85);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out,
    background 220ms ease-out;
}

.provider-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(circle at 0 0, rgba(56,189,248,.18), transparent 55%);
  opacity:0;
  transition:opacity 260ms ease-out;
  pointer-events:none;
}

.provider-card-main{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.provider-avatar{
  flex:none;
  width:40px;
  height:40px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%, var(--brand-500), var(--brand-700));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e0f2fe;
  font-weight:600;
  font-size:18px;
  box-shadow:0 8px 20px rgba(37,99,235,.35);
  position:relative;
  border:1px solid rgba(255,255,255,.55);
  text-shadow:0 1px 1px rgba(2,6,23,.35);
}

.provider-avatar::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  pointer-events:none;
}

.provider-avatar .provider-avatar__icon{
  width:18px;
  height:18px;
  display:block;
  opacity:.95;
  filter:drop-shadow(0 1px 1px rgba(2,6,23,.35));
}

.provider-avatar--teal{
  background:radial-gradient(circle at 30% 0%, #22c1c3, #0ea5e9);
}

.provider-avatar--indigo{
  background:radial-gradient(circle at 30% 0%, #6366f1, #0f172a);
}

.provider-avatar--emerald{
  background:radial-gradient(circle at 30% 0%, #34d399, #065f46);
  box-shadow:0 8px 20px rgba(16,185,129,.28);
}
.provider-avatar--sky{
  background:radial-gradient(circle at 30% 0%, #38bdf8, #1e3a8a);
  box-shadow:0 8px 20px rgba(56,189,248,.24);
}
.provider-avatar--rose{
  background:radial-gradient(circle at 30% 0%, #fb7185, #881337);
  box-shadow:0 8px 20px rgba(244,63,94,.20);
}
.provider-avatar--amber{
  background:radial-gradient(circle at 30% 0%, #fbbf24, #78350f);
  box-shadow:0 8px 20px rgba(245,158,11,.20);
}
.provider-avatar--violet{
  background:radial-gradient(circle at 30% 0%, #a78bfa, #312e81);
  box-shadow:0 8px 20px rgba(139,92,246,.22);
}

.provider-avatar-initial{
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.18);
}

.provider-avatar-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

.provider-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.provider-name{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--slate-900);
}

.provider-role{
  margin:0;
  font-size:12px;
  color:var(--slate-600);
}

.provider-rating{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
}

.provider-rating .stars{
  font-size:12px;
  color:#f59e0b;
}

.rating-label{
  color:var(--slate-500);
}

.provider-blurb{
  margin:0;
  font-size:12px;
  color:var(--slate-700);
}

.provider-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.provider-tag{
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  background:rgba(191,219,254,.9);
  color:var(--slate-800);
}

.provider-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
  flex-wrap:wrap;
}

.provider-spotlight{
  font-size:11px;
  color:var(--brand-700);
  display:flex;
  align-items:center;
  gap:6px;
}

.provider-spotlight::before{
  content:"●";
  font-size:10px;
}

.provider-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:34px;
  padding:8px 14px;
  border-radius:999px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;

  border:1px solid rgba(2,132,199,.55);
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#f9fafb;
  text-decoration:none;

  box-shadow:0 12px 32px rgba(2,132,199,.22);
  transition:box-shadow .16s ease, transform .08s ease, border-color .16s ease, filter .16s ease;
}
.provider-cta:hover{
  transform:translateY(-1px);
  filter:saturate(1.06);
  box-shadow:0 14px 36px rgba(2,132,199,.28);
}

.provider-cta::after{
  content:"→";
  font-size:12px;
}

/* Browse page: "Connect" and status pills */

.provider-cta--connect{
  /* Solid enough to stay visible on the frosted background */
  background:linear-gradient(180deg, rgba(16,185,129,.98), rgba(5,150,105,.98));
  border-color:rgba(4,120,87,.55);
  color:#ecfdf5;
  box-shadow:0 10px 26px rgba(5,150,105,.25);
}

.provider-cta--disabled{
  opacity:.62;
  pointer-events:none;
  border-color:rgba(148,163,184,.7);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}

.provider-cta--disabled::after{
  content:"";
}

.inline-form{
  display:inline;
}

/* Hover effects */

.provider-card:hover{
  transform:translateY(-4px);
  border-color:rgba(37,99,235,.8);
  background:linear-gradient(145deg, rgba(239,246,255,.98), rgba(219,234,254,.96));
  box-shadow:0 24px 60px rgba(15,23,42,.16);
}

.provider-card:hover::before{
  opacity:1;
}


.providers-bottom-cta{
  margin-top:18px;
  padding-top:12px;
  border-top:1px dashed rgba(148,163,184,.6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--slate-700);
}

.providers-bottom-button{
  font-size:12px;
}

/* Responsive */

@media (max-width: 1024px){
  .providers-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 720px){
  .providers-shell{
    padding:24px 18px 26px;
  }

  .providers-grid{
    grid-template-columns:1fr;
  }

  .providers-bottom-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ------------------------------------------------------------------ */
/* Auth / Sign-in page                                                */
/* ------------------------------------------------------------------ */

.section-auth{
  border-top:none;
  margin-top:48px;

  --sec-g2: rgba(148,163,184,.16);
  --sec-g3: rgba(59,130,246,.10);
  --sec-blob1: rgba(56,189,248,.16);
  --sec-blob2: rgba(30,64,175,.18);
}

.auth-shell{
  position:relative;
  border-radius:24px;
  padding:32px 32px 30px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.38);
  box-shadow:0 22px 55px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.auth-grid{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:stretch;
  justify-content:space-between;
}

.auth-intro{
  flex:1 1 260px;
  max-width:420px;
  font-size:15px;
  line-height:1.7;
  color:var(--slate-700);
}

.auth-intro .eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-700);
  margin-bottom:6px;
}

.auth-title{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.25;
  color:#020617;
}

.auth-subtitle{
  margin:0 0 14px;
  font-size:14px;
  color:var(--slate-600);
}

.auth-card{
  flex:1 1 320px;
  max-width:420px;
  margin-left:auto;
  border-radius:18px;
  padding:20px 22px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border:1px solid rgba(226,232,240,.96);
  box-shadow:0 16px 36px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9);
}

.auth-card-header{
  margin-bottom:12px;
}

.auth-card-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}

.auth-card-subtitle{
  margin:4px 0 0;
  font-size:13px;
  color:var(--slate-600);
}

.auth-field{
  margin-bottom:12px;
  text-align:left;
}

.auth-field label{
  display:block;
  margin-bottom:4px;
  font-size:13px;
  font-weight:600;
  color:#0f172a;
}

.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"]{
  width:100%;
  border-radius:10px;
  border:1px solid #d1d5db;
  padding:9px 11px;
  font-size:14px;
  outline:none;
  background:#f9fafb;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.auth-field input:focus{
  border-color:var(--brand-500);
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(37,99,235,.12), 0 0 0 4px rgba(191,219,254,.6);
}

.auth-remember{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 14px;
  font-size:13px;
  color:var(--slate-700);
}

.auth-remember label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:500;
}

.auth-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
}

.auth-actions .btn{
  width:100%;
  justify-content:center;
  text-align:center;
}

.auth-divider{
  margin:12px 0 10px;
  text-align:center;
  font-size:12px;
  color:var(--slate-500);
}

.auth-footer-links{
  margin-top:10px;
  font-size:12px;
  color:var(--slate-600);
  text-align:center;
}

.auth-footer-links a{
  color:var(--brand-600);
  text-decoration:none;
}

.auth-footer-links a:hover{
  text-decoration:underline;
}

@media (max-width: 768px){
  .auth-shell{
    padding:22px 18px 20px;
  }
}

@media (max-width: 640px) {
  .hide-on-mobile {
    display: none !important;
  }
}

 @media (max-width: 768px) {
  /* stack the provider / client panels on mobile */
  .mission-grid {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
  }

  .mission-grid .mission-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* hide the center circle/logo between them */
  .mission-grid .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 1025px){
  .nav-mobile{ display:none !important; }
}

/* Browse providers --------------------------------------------------------*/
.browse-shell{
  margin:40px auto 64px;
  max-width:1120px;
  width:100%;
  border-radius:32px;
  padding:32px 40px 40px;
  background:
    radial-gradient(circle at top left, rgba(191,219,254,0.45), transparent 55%),
    radial-gradient(circle at bottom right, rgba(165,243,252,0.35), transparent 55%),
    #f9fafb;
  background-size: auto, auto, auto;
  box-shadow:0 26px 70px rgba(15,23,42,0.16);
  border:1px solid rgba(148,163,184,0.45);
}

/* ================================
   Providers Browse Page (Lotus BG)
   ================================ */

/* Full-viewport soft lotus/zen background (sits behind the frosted browse-shell). */
.providers-browse-page{
  position: relative;
}

.providers-browse-page:before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Use plain url() so the Rails asset pipeline can fingerprint/rewrite it.
     (ERB tags inside .css won't be processed in this app.) */
  background-image: url(/assets/login-bg-78fd392a3e403ad2c5fca181ea10e3cb2cf6999abdac301613f38c9544088148.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(38px);
  transform: scale(1.06);
  opacity: 0.45;
}

.providers-browse-page:after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Gentle dark-to-light wash so text stays readable */
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),
    radial-gradient(820px 520px at 80% 38%, rgba(56,189,248,0.18), rgba(56,189,248,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(241,245,249,0.78) 48%, rgba(241,245,249,0.90) 100%);
}

/* Frost the main foreground glass */
.providers-browse-page .browse-shell{
  background: rgba(255,255,255,0.52);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.providers-browse-page .browse-card,
.providers-browse-page .provider-card{
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(148,163,184,0.42);
}

.browse-header{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:20px;
}

.browse-title{
  margin:0;
  font-size:24px;
  letter-spacing:-0.02em;
  color:#0f172a;
}

.browse-subtitle{
  margin:4px 0 0;
  font-size:14px;
  color:#4b5563;
}

/* Quick picks */
.browse-quick{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.browse-quick__label{
  font-size:12px;
  color:rgba(15, 23, 42, 0.65);
}
.browse-quick__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.browse-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148, 163, 184, 0.35);
  background:linear-gradient(140deg, rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.75));
  box-shadow: rgba(15, 23, 42, 0.10) 0px 10px 30px;
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.browse-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(148, 163, 184, 0.65);
  box-shadow: rgba(15, 23, 42, 0.18) 0px 16px 42px;
}
.browse-chip__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
}
.browse-chip--accent .browse-chip__dot{ background:#6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18); }
.browse-chip--rating .browse-chip__dot{ background:#f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }

.browse-filters{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.browse-filters-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.browse-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.browse-field--grow{
  flex:1 1 auto;
}

.browse-field--compact{
  flex:none;
}

.browse-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6b7280;
}

.browse-input{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  padding:8px 14px;
  font-size:13px;
  outline:none;
  background:rgba(255,255,255,.9);
}

.browse-input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.28);
}

.browse-submit{
  border:none;
  border-radius:999px;
  padding:9px 20px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(135deg, #0ea5e9, #2563eb);
  color:#f9fafb;
  box-shadow:0 10px 30px rgba(15,23,42,.3);
}

.browse-advanced-toggle{
  border:none;
  background:transparent;
  padding:0;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#2563eb;
  cursor:pointer;
}

.twiddle-icon{
  display:inline-block;
  transform:translateY(1px);
}

.browse-advanced{
  display:none;
  margin-top:4px;
  padding-top:12px;
  border-top:1px dashed rgba(148,163,184,.7);
  gap:12px 16px;
}

.browse-advanced.is-open{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.browse-price-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.browse-price-input{
  position:relative;
  flex:1 1 0;
}

.browse-price-prefix{
  position:absolute;
  inset:50% auto auto 10px;
  transform:translateY(-50%);
  font-size:12px;
  color:#6b7280;
}

.browse-price-input .browse-input{
  padding-left:20px;
}

.browse-price-separator{
  font-size:12px;
  color:#6b7280;
}

.browse-results-header{
  margin-bottom:16px;
}

.browse-results-count{
  margin:0;
  font-size:12px;
  color:#6b7280;
}

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

.browse-divider{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  padding:4px 0 2px;
  opacity:0.9;
}
.browse-divider img{
  width:min(700px, 92%);
  height:auto;
  display:block;
  filter:drop-shadow(0 16px 22px rgba(15, 23, 42, 0.18));
}

.browse-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.browse-actions .provider-cta{
  max-width:100%;
}

.provider-cta--secondary{
  background:transparent;
  color:#111827;
  border-color:#111827;
}

.browse-empty-state{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(248,250,252,.95);
  border:1px dashed rgba(148,163,184,.7);
  font-size:13px;
  color:#4b5563;
}

@media (min-width: 720px){
  .browse-filters-row{
    flex-direction:row;
    align-items:flex-end;
  }

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

/* Account settings (Devise edit) -----------------------------------------*/
.account-settings-section{
  position:relative;
  padding:64px 0 96px;
}

.account-settings-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url('<%= asset_path("login-bg.png") %>') no-repeat right -40px bottom -140px;
  background-size:480px auto;
  opacity:0.22;          /* a bit more visible than before */
  pointer-events:none;
}

.account-settings-shell{
  max-width:720px;
  margin:0 auto;
}
.account-settings-card{
  border-radius:32px;
  padding:32px 36px 30px;
  background:
    radial-gradient(circle at top left, rgba(191,219,254,0.45), transparent 55%),
    radial-gradient(circle at bottom right, rgba(165,243,252,0.35), transparent 55%),
    #f9fafb;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 26px 70px rgba(15,23,42,.15);
}
.account-settings-header h1{
  margin:0 0 4px;
  font-size:22px;
  letter-spacing:-0.02em;
  color:#0f172a;
}
.account-settings-header p{
  margin:0 0 18px;
  font-size:13px;
  color:#4b5563;
}
.account-settings-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.account-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.account-field--stacked{
  gap:12px;
}
.account-label-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.account-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:#6b7280;
}
.account-label-hint{
  font-size:11px;
  color:#9ca3af;
}
.account-input{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.75);
  padding:9px 14px;
  font-size:13px;
  background:rgba(255,255,255,.9);
  outline:none;
}
.account-input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.3);
}
.account-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
  align-items:center;
}
.account-primary-btn{
  border:none;
  border-radius:999px;
  padding:9px 22px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#f9fafb;
  box-shadow:0 14px 38px rgba(15,23,42,.35);
}
.account-secondary-link{
  font-size:12px;
  color:#4b5563;
  text-decoration:none;
}
.account-secondary-link:hover{
  text-decoration:underline;
}
.account-danger-zone{
  margin-top:26px;
  padding-top:18px;
  border-top:1px dashed rgba(148,163,184,.7);
}
.account-danger-zone h2{
  margin:0 0 4px;
  font-size:14px;
  font-weight:600;
  color:#b91c1c;
}
.account-danger-zone p{
  margin:0 0 10px;
  font-size:12px;
  color:#6b7280;
}
.account-danger-btn{
  border-radius:999px;
  border:1px solid rgba(220,38,38,.6);
  padding:7px 16px;
  font-size:12px;
  font-weight:500;
  background:rgba(248,250,252,.95);
  color:#b91c1c;
  cursor:pointer;
}
.account-danger-btn:hover{
  background:rgba(254,242,242,1);
}
@media (max-width: 640px){
  .account-settings-card{
    padding:24px 18px 22px;
    border-radius:24px;
  }
}

/* Pricing table frame: subtle grey slab behind the three cards */
.pricing-table-frame{
  position:relative;
  margin-top:26px;
  padding:26px 26px 30px;
  border-radius:26px;
  background:linear-gradient(145deg, rgba(15,23,42,.10), rgba(15,23,42,.04));
  box-shadow:
    0 22px 60px rgba(15,23,42,.30);
}

.pricing-table{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}

/* refine cards to sit more like tall towers */
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:90%;
  min-height:420px;
  border-radius:22px;
  background:linear-gradient(145deg, rgba(248,250,252,.98), rgba(239,246,255,.96));
  box-shadow:
    0 18px 52px rgba(15,23,42,.26),
    0 0 0 1px rgba(255,255,255,.95) inset;
  overflow:hidden;
}

/* top colored bar & small paper tab */
.plan-flag{
  position:relative;
  height:88px;
}

.plan-flag-inner{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:76px;
  border-radius:22px 22px 0 0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  padding-bottom:12px;
  color:#fff;
  font-weight:700;
}

.plan-flag-inner::before{
  content:"";
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%) skewX(-10deg);
  width:120px;
  height:24px;
  border-radius:6px 6px 0 0;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 20px rgba(15,23,42,.24);
}

/* banner colors */
.plan-good .plan-flag-inner{
  background:linear-gradient(135deg, #f97316, #facc15);
}

.plan-better .plan-flag-inner{
  background:linear-gradient(135deg, #0ea5e9, #22c55e);
}

.plan-best .plan-flag-inner{
  background:linear-gradient(135deg, #fb923c, #f97316);
}

.plan-name{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.plan-price{
  font-size:22px;
}

.plan-price-unit{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* body & footer */
.plan-body{
  padding:18px 20px 14px;
  flex:1;
}

.plan-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--slate-500);
  margin:0 0 6px;
}

.plan-label-highlight{
  color:#16a34a;
}

.plan-tagline{
  margin:0 0 12px;
  font-size:13px;
  color:var(--slate-600);
}

.plan-features{
  margin:0;
  padding-left:0;
  list-style:none;
  font-size:13px;
  color:var(--slate-700);
}

.plan-features li + li{
  margin-top:6px;
}

/* bottom CTA bar */
.plan-footer{
  margin-top:auto;
}

.plan-cta{
  display:block;
  text-align:center;
  padding:11px 16px 10px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.15em;
  border-top:1px solid rgba(226,232,240,1);
}

.plan-cta-primary{
  background:linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color:#fff;
}

.plan-cta-outline{
  background:rgba(255,255,255,.96);
  color:var(--brand-700);
}

/* responsive */
@media (max-width: 980px){
  .pricing-table{
    gap:18px;
  }
  .plan-card{
    width:100%;
    max-width:320px;
  }
}


/* Public Provider Profile */
.pp-public{
  position: relative;
  padding: 34px 18px 80px;
  overflow: hidden;
}

.pp-public__bg{
  position:absolute;
  inset:-20px;
  /* NOTE: Background image is provided inline (ERB) in the view for reliability
     with digest assets. These gradients remain as a graceful fallback. */
  background:
    radial-gradient(circle at 15% 20%, rgba(255,189,248,.22), transparent 35%),
    radial-gradient(circle at 85% 25%, rgba(99,102,241,.16), transparent 35%),
    radial-gradient(circle at 60% 85%, rgba(34,211,238,.18), transparent 30%);
  background-size: cover;
  background-position: center;
  /* Soft “blurred background” vibe (keeps foreground text crisp). */
  filter: blur(14px) saturate(0.85);
  transform: scale(1.06);
  opacity: .52;
}

.pp-public__bg:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(248,250,252,.35), rgba(248,250,252,.7));
}

.pp-public__container{
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.pp-card{
  margin-top:50px;
  border-radius: 24px;
  padding: 26px 26px 28px;
  border: 1px solid rgba(148,163,184,.65);
  box-shadow: 0 30px 80px rgba(15,23,42,.16);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.pp-hero{
  display:flex;
  gap: 18px;
  align-items: stretch;
  justify-content: space-between;
  padding: 10px 10px 20px;
  border-bottom: 1px solid rgba(148,163,184,.55);
}

.pp-hero__left{
  display:flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.pp-avatar{
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;

  /* Modern LinkedIn‑style fallback */
  background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(226,232,240,.92));
  border: 1px solid rgba(148,163,184,.85);
  box-shadow:
    0 18px 45px rgba(15,23,42,.18),
    0 0 0 1px rgba(255,255,255,.75) inset;
}

.pp-avatar:before{
  content:"";
  position:absolute;
  inset: 18%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2064%2064'%3E%0A%3Cpath%20fill%3D'rgba(100,116,139,0.55)'%20d%3D'M32%2034c8.1%200%2014.7-6.6%2014.7-14.7S40.1%204.6%2032%204.6%2017.3%2011.2%2017.3%2019.3%2023.9%2034%2032%2034zm0%206.2c-12.3%200-22.2%207.2-22.2%2016.1%200%202%201.6%203.6%203.6%203.6h37.2c2%200%203.6-1.6%203.6-3.6%200-8.9-9.9-16.1-22.2-16.1z'/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
  opacity: .95;
  pointer-events:none;
}

.pp-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  position: relative;
  z-index: 2;
}

.pp-avatar span{
  /* Keep span in DOM but hide the initial; the silhouette handles fallback */
  display: none;
}


.pp-identity{ min-width:0; }

.pp-name{
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.pp-headline{
  margin-top: 6px;
  font-size: 15px;
  font-weight: 650;
  color: rgba(15,23,42,.78);
}

.pp-subtitle{
  margin: 8px 0 0;
  color: rgba(15,23,42,.72);
  font-size: 14px;
}

.pp-facts{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin-top: 12px;
}

.pp-fact{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(15,23,42,.78);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148,163,184,.55);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}

.pp-fact.is-open{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}

.pp-fact.is-closed{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
}

.pp-price{
  letter-spacing: 0.06em;
  color: rgba(15,23,42,.85);
}

.pp-rating{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}

.pp-stars{ display:flex; gap: 4px; }
.pp-star{
  font-size: 16px;
  line-height: 1;
  color: rgba(148,163,184,.9);
  filter: drop-shadow(0 6px 10px rgba(15,23,42,.12));
}
.pp-star.is-on{ color: #fbbf24; }

.pp-rating__meta{
  display:flex;
  gap: 8px;
  align-items:center;
  font-size: 13px;
  color: rgba(15,23,42,.7);
}
.pp-dot{ opacity: .6; }

.pp-hero__right{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 280px;
}

.pp-actions{
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.pp-btn{
  appearance:none;
  border: 1px solid rgba(15,23,42,.78);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 750;
  font-size: 14px;
  line-height: 1;
  text-decoration:none;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow: 0 16px 32px rgba(15,23,42,.12);
}

.pp-btn:hover{ transform: translateY(-1px); box-shadow: 0 22px 44px rgba(15,23,42,.16); }
.pp-btn:active{ transform: translateY(0px) scale(.99); }

.pp-btn--primary{
  background: linear-gradient(180deg, rgba(2,132,199,.98), rgba(3,105,161,.98));
  color: rgba(255,255,255,.96);
  border-color: rgba(2,6,23,.72);
}

.pp-btn--ghost{
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.92);
  border-color: rgba(148,163,184,.9);
}

.pp-btn--soft{
  background: rgba(226,232,240,.65);
  color: rgba(15,23,42,.86);
  border-color: rgba(148,163,184,.9);
}

.pp-btn--disabled{
  background: rgba(226,232,240,.85);
  color: rgba(100,116,139,.95);
  border-color: rgba(148,163,184,.85);
  box-shadow: none;
  cursor: not-allowed;
}

.pp-alert{
  width: 100%;
  max-width: 520px;
  text-align:left;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(148,163,184,.7);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}
.pp-alert__title{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(2,6,23,.78);
}
.pp-alert__text{
  margin-top: 6px;
  color: rgba(15,23,42,.72);
  font-size: 13px;
  line-height: 1.4;
}

.pp-qualifications{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 10px 8px;
}

.pp-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(148,163,184,.75);
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
}
.pp-badge__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(2,132,199,.95));
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.pp-badge__label{
  font-size: 13px;
  font-weight: 750;
  color: rgba(15,23,42,.9);
}
.pp-badge__kind{
  font-size: 12px;
  color: rgba(71,85,105,.9);
  padding-left: 10px;
  border-left: 1px solid rgba(148,163,184,.6);
}

.pp-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  padding: 14px 10px 8px;
}

/* Ensure consistent vertical spacing between panels in both columns.
   Without this, adjacent .pp-panel blocks can appear to “stick” together
   on mobile depending on content/layout. */
.pp-side,
.pp-main{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.pp-panel{
  border-radius: 24px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(148,163,184,.65);
  box-shadow: 0 22px 55px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.pp-panel--story{
  min-height: 340px;
}

.pp-panel__title{
  font-size: 14px;
  font-weight: 850;
  color: rgba(15,23,42,.88);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.pp-panel__title--row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.pp-panel__hint{
  font-size: 12px;
  color: rgba(71,85,105,.85);
  font-weight: 650;
}

.pp-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pp-tag{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(148,163,184,.85);
  color: rgba(15,23,42,.86);
  font-size: 13px;
  font-weight: 650;
}

.pp-meta{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pp-meta__label{
  font-size: 12px;
  font-weight: 850;
  color: rgba(71,85,105,.9);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pp-meta__value{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(15,23,42,.84);
  line-height: 1.45;
}

.pp-media video{
  width: 100%;
  max-height: 340px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.65);
  background: rgba(2,6,23,.92);
}
.pp-media--audio audio{ width: 100%; }

.pp-story{
  color: rgba(15,23,42,.84);
  font-size: 15px;
  line-height: 1.6;
}
.pp-story h2, .pp-story h3{
  margin: 16px 0 8px;
  color: rgba(15,23,42,.92);
}
.pp-story p{ margin: 0 0 12px; }
.pp-story ul{ margin: 8px 0 12px 18px; }

.pp-empty{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(248,250,252,.75);
  border: 1px dashed rgba(148,163,184,.85);
  color: rgba(71,85,105,.92);
  font-size: 14px;
  line-height: 1.5;
}

.pp-reviews{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.pp-review{
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(248,250,252,.72);
  border: 1px solid rgba(148,163,184,.65);
}

.pp-review__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pp-review__stars{ display:flex; gap: 3px; }
.pp-review__star{ font-size: 14px; color: rgba(148,163,184,.85); }
.pp-review__star.is-on{ color: #fbbf24; }

.pp-review__date{
  font-size: 12px;
  color: rgba(71,85,105,.85);
  font-weight: 650;
}

.pp-review__body{
  color: rgba(15,23,42,.84);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.pp-review__more{
  margin-top: 10px;
  display:flex;
  justify-content: flex-end;
}

.pp-link{
  font-weight: 800;
  color: rgba(2,132,199,.95);
  text-decoration: none;
}
.pp-link:hover{ text-decoration: underline; }

.pp-reviewbox{
  margin-top: 14px;
  border-radius: 20px;
  padding: 14px 14px;
  background: rgba(255,255,255,.62);
  border: 1px dashed rgba(148,163,184,.8);
}

.pp-reviewbox__title{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,.88);
}
.pp-reviewbox__subtitle{
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(71,85,105,.88);
}

.pp-formrow{ margin-bottom: 10px; }
.pp-label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(71,85,105,.9);
  margin-bottom: 6px;
}
.pp-input{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.85);
  background: rgba(248,250,252,.82);
  color: rgba(15,23,42,.92);
}
.pp-input--area{ resize: vertical; min-height: 110px; }

.pp-formactions{
  display:flex;
  justify-content: flex-end;
}

@media (max-width: 980px){
  .pp-grid{ grid-template-columns: 1fr; }
  .pp-hero{ flex-direction: column; align-items: flex-start; }
  .pp-hero__right{ align-items: flex-start; min-width: 0; width: 100%; }
  .pp-actions{ justify-content: flex-start; }
}

@media (max-width: 520px){
  .pp-card{ padding: 18px 16px 18px; }
  .pp-avatar{ width: 82px; height: 82px; flex: 0 0 82px; min-width: 82px; max-width: 82px; border-radius: 9999px; overflow: hidden; }
  .pp-name{ font-size: 28px; }
}

/* --- Frontpage mission hero layout (mobile widths) --- */
.mission-hero-shell{
  margin-top: 0;
  margin-left: 0px;
    width: 100%;
  padding: 0px 66px 48px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.mission-grid{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  padding: 12px 0 8px;
  gap: 26px;
}

/* Ensure the provider/client panels can expand on mobile */
@media (max-width: 1024px){
  .mission-hero-shell{
    padding: 18px 0 28px !important;
  }

  .mission-grid{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 0 0 !important;
    gap: 16px !important;
  }

  /* 90% width panels on mobile (Coaching Resources + Provider/Client cards) */
  .mission-top-card,
  .card-coach{
    width: 90% !important;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


.pp-avatar__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* === Hero handwriting SVG animation (rotating) === */
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

.hero-handwrite {
  width: min(980px, 92vw);
  margin: 0 auto 1.2rem;
  display: block;
  overflow: visible;
}


@media (max-width: 768px) {
  /* Hide the cursive handwriting hero animation on mobile */
  .hero-handwrite {
    display: none !important;
  }
}
.hero-handwrite text {
  font-family: 'Parisienne', cursive;
  font-size: 64px;
}

#hero-script.hero-handwrite--animate .hero-handwrite__stroke {
  fill: var(--hero-fill, rgba(255,255,255,0.98));
  stroke: var(--hero-stroke, rgba(30,30,30,0.85));
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
}

#hero-script.hero-handwrite--animate .hero-handwrite__reveal {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

#hero-script.hero-handwrite--animate .hero-handwrite__fill {
  fill: var(--hero-fill, rgba(255,255,255,0.98));
  opacity: 0;
}

/* Run animations only when toggled on (lets JS restart cleanly) */
.hero-handwrite--animate .hero-handwrite__stroke {
  animation: heroStroke var(--hero-dur, 2.6s) ease forwards;
}

.hero-handwrite--animate .hero-handwrite__reveal {
  animation: heroReveal var(--hero-dur, 2.6s) ease forwards;
}

.hero-handwrite--animate .hero-handwrite__fill {
  animation: heroFillIn 0.35s ease forwards;
  animation-delay: calc(var(--hero-dur, 2.6s) - 0.2s);
}

@keyframes heroStroke { to { stroke-dashoffset: 0; } }
@keyframes heroReveal { to { transform: scaleX(1); } }
@keyframes heroFillIn { to { opacity: 1; } }

@media (max-width: 520px) {
  .hero-handwrite text { font-size: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-handwrite--animate .hero-handwrite__stroke,
  .hero-handwrite--animate .hero-handwrite__reveal,
  .hero-handwrite--animate .hero-handwrite__fill {
    animation: none !important;
  }
  .hero-handwrite__reveal { transform: scaleX(1) !important; }
  .hero-handwrite__fill { opacity: 1 !important; }
  .hero-handwrite__stroke { stroke-dashoffset: 0 !important; }
}

/* --- Hero cursive draw (SVG stroke) --- */
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

.hero-script-wrap{
  margin: 0 auto 10px;
  max-width: 720px;
  position: relative;
}

.hero-script-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero-script-svg{
  width: 100%;
  height: 92px;
  display:block;
  overflow: visible;
}

.hero-script-svg text{
  font-family: "Parisienne", cursive;
  font-size: 90px;
  letter-spacing: 0.5px;
}

.hero-script-stroke{
  fill: none;
  stroke: var(--hero-stroke, rgba(30,30,30,0.85));
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.hero-script-fill{
  fill: rgba(255,255,255,0.98);
  opacity: 0;
}

/* left-to-right reveal mask */
.hero-script-reveal{
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

/* Animations are gated behind this class so JS can reliably restart them */
.hero-script-animate .hero-script-stroke{
  animation: hero-script-stroke 1.8s ease forwards;
}
.hero-script-animate .hero-script-reveal{
  animation: hero-script-reveal 1.8s ease forwards;
}
.hero-script-animate .hero-script-fill{
  animation: hero-script-fill 0.55s ease forwards;
  animation-delay: calc(var(--hero-dur, 2.6s) - 0.2s);
}

@keyframes hero-script-stroke{ to { stroke-dashoffset: 0; } }
@keyframes hero-script-reveal{ to { transform: scaleX(1); } }
@keyframes hero-script-fill{ to { opacity: 1; } }

@media (max-width: 520px){
  .hero-script-svg{ height: 76px; }
  .hero-script-svg text{ font-size: 74px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-script-animate .hero-script-stroke,
  .hero-script-animate .hero-script-reveal,
  .hero-script-animate .hero-script-fill{ animation: none !important; }

  .hero-script-stroke{ stroke-dashoffset: 0 !important; }
  .hero-script-reveal{ transform: scaleX(1) !important; }
  .hero-script-fill{ opacity: 1 !important; }
}


/* === Hero handwriting redraw tuning === */
#hero-script.hero-handwrite--animate .hero-handwrite__stroke {
  stroke: var(--hero-stroke, rgba(30,30,30,0.85));
}

.hero-handwrite.hero-redraw .hero-handwrite__stroke {
  stroke-dashoffset: 1800;
  animation: heroStroke var(--hero-dur, 2.6s) ease forwards;
}

.hero-handwrite.hero-redraw .hero-handwrite__reveal {
  transform: scaleX(0);
  animation: heroReveal var(--hero-dur, 2.6s) ease forwards;
}

.hero-handwrite.hero-redraw .hero-handwrite__fill {
  opacity: 0;
  animation: heroFillIn 0.35s ease forwards;
  animation-delay: calc(var(--hero-dur, 2.6s) - 0.2s);
}
.home-resource-toast-wrap{
  /* Allow clicking the CTA/dismiss button (default .flash-toasts disables pointer events) */
  pointer-events: auto;

  /* Homepage: place the resources toast at the bottom-left instead of top-right */
  top: auto;
  right: auto;
  bottom: 18px;
  left: 18px;
}

.home-resource-toast{
  pointer-events: auto;
  width: 660px;
  max-width: calc(100vw - 36px);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: rgba(15, 23, 42, 0.26) 0px 24px 70px;

                border-radius: 24px;
                background: linear-gradient(
                  140deg,
                  rgba(248, 250, 252, 0.2),
                  rgba(226, 232, 240, 0.2)
                );
                box-shadow: rgba(15, 23, 42, 0.22) 0px 22px 60px,
                  rgba(255, 255, 255, 0.62) 0px 0px 0px 1px inset;
                border: 1px solid rgba(148, 163, 184, 0.9);
                backdrop-filter: blur(18px);
              

}
.home-resource-toast .flash-toast__msg{

   color: rgba(15, 23, 42, 0.88);
}

.home-resource-toast .flash-toast__icon{
  margin: 0 14px 0 6px;
}

.home-resource-toast .flash-toast__body{
  min-height: 0;
}

.home-resource-toast__cta{
  display: inline-flex;
  margin-left: 0px;
}

.home-resource-toast__cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
  color: rgba(255,255,255,0.98);
  font-weight: 800;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}

.flash-toast__logo{
  width: 70px;
  height: 70px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

.home-resource-toast__cta a:hover{
  filter: brightness(1.08);
}

@media (max-width: 720px){
  .home-resource-toast-wrap{
    left: 0;
    right: 0;
    bottom: 0;
  }

  .home-resource-toast{
    width: 100%;
    border-radius: 0;
  }

  .home-resource-toast__cta{
    display: none; /* keep mobile toast thin; CTA accessible via nav */
  }
}
/* Coachable Legends
   Keep everything namespaced so require_tree doesn't leak styles elsewhere. */

/* Pirate/old-world display font (Google Fonts). If it can't load, we fall back gracefully. */

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');

.legends-game{
  --lg-aspect-w: 9;
  --lg-aspect-h: 16;
  --lg-max-w: 520px; /* mobile-first; let it grow on desktop */
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #071a22;
}

/* A single "screen" (title or map). We preserve 9:16 and scale to fit. */
.legends-game .lg-screen{
  width: min(100vw, var(--lg-max-w));
  aspect-ratio: var(--lg-aspect-w) / var(--lg-aspect-h);
  max-height: 92vh;

  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.45),
    0 2px 0 rgba(255,255,255,0.08) inset;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Map rendering: keep the whole board visible (no cropping) and allow overlays */
.legends-game .lg-screen--map{
  background: rgba(7, 26, 34, 1);
}

.legends-game .lg-map-viewport{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Canvas takes over rendering (map + sprites). */
.legends-game .lg-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Scroll menu overlay (on top of canvas) */
.legends-game .lg-menu{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 22px;
  pointer-events: none;
}

.legends-game .lg-menu-frame{
  position: relative;
  width: min(520px, 86%);
  height: auto;
}

.legends-game .lg-menu-scroll{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
  pointer-events: none;
}

.legends-game .lg-menu-content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  top: 64px;
  padding: 12px 12px 10px;
  text-align: left;
  pointer-events: auto;
  user-select: none;
  font-family: "Pirata One", "Blackadder ITC", "Papyrus", "Georgia", serif;
  color: rgba(43, 23, 4, 0.92);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

.legends-game .lg-menu-title{
  font-size: 18px;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
  font-weight: 700;
}

.legends-game .lg-menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.legends-game .lg-menu-item{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  outline: none;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.legends-game .lg-menu-item:hover,
.legends-game .lg-menu-item:focus-visible{
  background: rgba(120, 70, 20, 0.14);
  box-shadow:
    0 0 0 1px rgba(110, 60, 10, 0.28),
    0 6px 16px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}

.legends-game .lg-menu-item:active{
  transform: translateY(0px);
  background: rgba(120, 70, 20, 0.22);
}

.legends-game .lg-menu-bullet{ display: inline-block; width: 22px; opacity: 0.82; }

.legends-game .lg-menu-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.78;
}

.legends-game .lg-map-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Overlay gets sized/positioned in JS to match the rendered image bounds */
.legends-game .lg-map-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Let the game breathe on desktop without stretching too large. */
@media (min-width: 768px){
  /* Keep the scene feeling like a "panel" even on desktop (avoid taking over the page) */
  .legends-game{ --lg-max-w: 560px; }
}

.legends-game .is-hidden{ display: none; }

/* Invisible "Play" hotspot that sits over the button in the title art.
   Tweak these if we update the title image composition. */
.legends-game .lg-play-hotspot{
  position: absolute;
  left: 50%;
  top: 83.5%;
  transform: translate(-50%, -50%);

  width: 64%;
  height: 11.5%;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 18px;
  background: rgba(14, 165, 233, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 16px 30px rgba(0,0,0,0.30),
    0 1px 0 rgba(255,255,255,0.12) inset;
}

.legends-game .lg-play-label{
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.legends-game .lg-play-hotspot:focus{
  outline: 3px solid rgba(56, 189, 248, 0.9);
  outline-offset: 6px;
}

/* Map overlay layer */


/* Sprite element uses a CSS background pointing at the sprite sheet.
   We anchor the sprite's *feet* to x/y on the map using translate(-50%, -100%). */
.legends-game .lg-sprite{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);

  /* Default values; JS will override based on data attributes */
  --cols: 4;
  --rows: 4;
  --frame: 0;
  --scale: 0.55;

  /* Base frame size – JS can override via CSS variables for different sheets */
  --frame-w: 256px;
  --frame-h: 256px;
  width: calc(var(--frame-w) * var(--scale));
  height: calc(var(--frame-h) * var(--scale));

  image-rendering: auto;
  background-repeat: no-repeat;
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);

  /* A tiny shadow so the character feels grounded on the path */
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.35));
}

/* Soft idle motion (subtle bob, no positional drifting) */
.legends-game .lg-sprite.is-idle{
  animation: lgIdleBob 2.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes lgIdleBob{
  0%, 100%{ transform: translate(-50%, -100%) translateY(0px); }
  50%{ transform: translate(-50%, -100%) translateY(-4px); }
}
/* Coachable Legends – dashboard embed (kept calm + glassy, matches existing UI) */

.legends-embed-card{
  margin: 14px 0 18px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}

.legends-embed-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.legends-embed-title{
  margin:0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.2px;
}

.legends-embed-sub{
  font-size: 12px;
  color: rgba(15,23,42,0.65);
  margin-top: 2px;
}

.legends-embed-frameWrap{
  width: 100%;
  /* Default to a calmer, smaller embed on desktop (less vertical dominance). */
  aspect-ratio: 16 / 9;
  max-height: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
}

.legends-embed-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
}

@media (max-width: 720px){
  /* On narrow/mobile views, keep the vertical game feel. */
  .legends-embed-frameWrap{ aspect-ratio: 9 / 16; max-height: 78vh; }
}
/* Provider Portal – Goals & Milestones */


.provider-goals-panel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.provider-goals-panel__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-goals-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.38);
  box-shadow: 0 10px 20px rgba(2,6,23,.10);
  background:
    radial-gradient(circle at 30% 25%, rgba(56,189,248,.38), rgba(59,130,246,.16) 60%, rgba(255,255,255,.50) 100%);
  color: rgba(2,132,199,.98);
}

/* Icon theme (matches Provider dashboard KPI icon style) */
.pg-icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.38);
  box-shadow: 0 10px 20px rgba(2,6,23,.10);
  color: rgba(2,132,199,.98);
  background:
    radial-gradient(circle at 30% 25%, rgba(56,189,248,.34), rgba(59,130,246,.14) 60%, rgba(255,255,255,.52) 100%);
}
.pg-icon svg{ display:block; }

/* Slight size tweaks when icons appear inside tight headers */
.provider-goals__metaTitle .pg-icon,
.provider-goals-card__title .pg-icon{
  width: 30px;
  height: 30px;
  border-radius: 14px;
}

.provider-goals__chipIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Slightly varied hues per meaning */
.pg-icon--target{
  background: radial-gradient(circle at 30% 25%, rgba(34,211,238,.36), rgba(59,130,246,.14) 60%, rgba(255,255,255,.52) 100%);
}
.pg-icon--flag{
  background: radial-gradient(circle at 30% 25%, rgba(59,130,246,.34), rgba(99,102,241,.14) 60%, rgba(255,255,255,.52) 100%);
}
.pg-icon--compass{
  background: radial-gradient(circle at 30% 25%, rgba(125,211,252,.34), rgba(14,165,233,.14) 60%, rgba(255,255,255,.52) 100%);
}

.provider-goals-panel__selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.provider-goals-panel__selectorLabel {
  font-size: 13px;
  color: #64748b;
}

.provider-goals-panel__select {
  min-width: 280px;
  height: 42px;
  border-radius: 14px;
  padding: 10px 38px 10px 12px;
  line-height: 20px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.72);
  color: #0f172a;
  font-weight: 600;

  /* Make it feel intentional (and consistent) across browsers */
  -webkit-appearance: none;
  appearance: none;

  /* Subtle dropdown chevron (no icon asset required) */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.55) 50%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.provider-goals-panel__select:focus-visible{
  outline: 3px solid rgba(2,132,199,0.30);
  outline-offset: 2px;
}

.provider-goals-panel__embed {
  margin-top: 14px;
}

.provider-goals-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-goals-loading__dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(15, 118, 110, 0.35);
  animation: providerGoalsPulse 1s infinite ease-in-out;
}
.provider-goals-loading__dot:nth-child(2) { animation-delay: 0.15s; }
.provider-goals-loading__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes providerGoalsPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.95; transform: translateY(-2px); }
}

.provider-goals-empty {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(148,163,184,0.55);
}

.provider-goals-empty__title {
  font-weight: 700;
  margin-bottom: 4px;
}

/* Embedded UI */
.provider-goals {
  width: 100%;
}

.provider-goals-banner {
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.35;
}

.provider-goals-banner--warn {
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.35);
}

.provider-goals-banner--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.provider-goals__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.provider-goals__metaTitle {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-goals__metaIcon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(148,163,184,0.35);
}

.provider-goals__metaSub {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.provider-goals__metaDot { margin: 0 6px; opacity: 0.6; }
.provider-goals__metaHint { opacity: 0.85; }

.provider-goals__metaRight {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.provider-goals__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(148,163,184,0.35);
  font-size: 12px;
  color: #0f172a;
}

.provider-goals__chipDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.provider-goals__chip--muted {
  color: #334155;
}

.provider-goals__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
}

@media (max-width: 980px) {
  .provider-goals__grid { grid-template-columns: 1fr; }
}

.provider-goals-card {
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 14px 38px rgba(15,23,42,0.10);
  overflow: hidden;
}

.provider-goals-card__header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(148,163,184,0.25);
}

.provider-goals-card__header--tight { padding-top: 10px; padding-bottom: 10px; }

.provider-goals-card__title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-goals-card__titleIcon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(148,163,184,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.provider-goals-card__body { padding: 12px 14px 14px 14px; }

.provider-goals-newBtn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.provider-goals-new {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2, 132, 199, 0.07);
  border: 1px dashed rgba(2, 132, 199, 0.28);
}

.provider-goals-new__title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  color: #0f172a;
}

.provider-goals-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}

.provider-goals-input,
.provider-goals-textarea,
.provider-goals-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.75);
  outline: none;
}

.provider-goals-input:focus,
.provider-goals-textarea:focus,
.provider-goals-select:focus {
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
}

.provider-goals-formRow { margin-bottom: 10px; }
.provider-goals-formRow--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) { .provider-goals-formRow--split { grid-template-columns: 1fr; } }

.provider-goals-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.provider-goals-primary,
.provider-goals-secondary {
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}

.provider-goals-primary {
  background: linear-gradient(135deg, rgba(14,165,233,0.95), rgba(16,185,129,0.95));
  color: white;
}

.provider-goals-primary--small {
  padding: 10px 14px;
  font-size: 13px;
}

.provider-goals-secondary {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(148,163,184,0.45);
  color: #0f172a;
}

.provider-goals-secondary--small {
  padding: 10px 14px;
  font-size: 13px;
}

.provider-goals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.provider-goals-item {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.65);
  color: #0f172a;
  transition: transform 0.08s ease;
}

.provider-goals-item:hover { transform: translateY(-1px); }
.provider-goals-item.is-selected {
  border-color: rgba(14,165,233,0.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
}

.provider-goals-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.provider-goals-item__title {
  font-weight: 800;
  font-size: 13px;
}

.provider-goals-item__badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.10);
  border: 1px solid rgba(2, 132, 199, 0.22);
  color: #075985;
}

.provider-goals-item__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.provider-goals-progress {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.25);
  overflow: hidden;
}

.provider-goals-progress__bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,185,129,0.9), rgba(14,165,233,0.9));
}

.provider-goals-item__pct {
  font-size: 12px;
  color: #334155;
  min-width: 40px;
  text-align: right;
}

.provider-goals-goalTitle {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: #0f172a;
}

/* Inline title editing */
.provider-goals-editable{
  cursor: text;
  border-bottom: 1px dotted rgba(148,163,184,0);
  padding-bottom: 1px;
}
.provider-goals-editable:hover{
  border-bottom-color: rgba(148,163,184,0.65);
}

.provider-goals-inlineEditor{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.provider-goals-inlineInput{
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.50);
  background: rgba(255,255,255,0.70);
  padding: 6px 10px;
  min-width: 180px;
  font-size: 14px;
  outline: none;
}

.provider-goals-inlineInput:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.14);
}

.provider-goals-inlineBtn{
  height: 32px;
  width: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.provider-goals-inlineBtn--ok{
  border-color: rgba(34,197,94,0.32);
}

.provider-goals-inlineBtn--cancel{
  border-color: rgba(248,113,113,0.32);
}

.provider-goals-inlineEditor.is-saving{
  opacity: 0.75;
}

.provider-goals-goalDesc {
  margin-bottom: 10px;
  font-size: 13px;
  color: #334155;
}

.provider-goals-danger {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.35);
  color: #b91c1c;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}

.provider-goals-section { margin-top: 8px; }

.provider-goals-section__title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #0f172a;
}

.provider-goals-section__sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.provider-goals-addRow { margin-top: 10px; }

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

.provider-goals-milestones { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

.provider-goals-milestone {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(148,163,184,0.30);
}

.provider-goals-milestone.is-done {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.22);
}

.provider-goals-milestone__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.provider-goals-milestone__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
}

.provider-goals-milestone__check {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(148,163,184,0.35);
  font-size: 12px;
}

.provider-goals-milestone__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.provider-goals-chipBtn {
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.6);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.provider-goals-chipBtn--danger {
  border-color: rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.10);
  color: #b91c1c;
}

.provider-goals-tasks { margin-top: 10px; }

.provider-goals-taskList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.provider-goals-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(148,163,184,0.20);
}

.provider-goals-task.is-done {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.18);
}

.provider-goals-task__toggle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  font-weight: 900;
}

.provider-goals-task__title { flex: 1; font-size: 13px; color: #0f172a; }

.provider-goals-task__remove {
  border: 0;
  background: transparent;
  color: #b91c1c;
  cursor: pointer;
  font-weight: 700;
}

.provider-goals-emptyState {
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.45);
}

.provider-goals-emptyState__title {
  font-weight: 800;
  margin-bottom: 4px;
}


/* Milestone removal animation (AJAX delete) */
.provider-goals-milestone {
  max-height: 600px;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 200ms ease, transform 240ms ease, margin 240ms ease, padding 240ms ease;
}
.provider-goals-milestone.is-removing {
  opacity: 0;
  transform: translateX(10px);
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Provider Library (Documents & Files) - graphical file browser */


.lib-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 22px;
  color: #0f172a;
  font-family: inherit;
}

/* Embedded inside Provider Portal (match Sessions/Notes panel typography + spacing) */
.lib-shell--dashboard{
  max-width: none;
  margin: 0;
  padding: 0;
}

.lib-shell--dashboard .lib-header{ margin-bottom: 10px; }
.lib-shell--dashboard .lib-toolbar{
  box-shadow: none;
  background: rgba(255,255,255,0.70);
  border-color: rgba(148,163,184,0.28);
}

.lib-shell--dashboard .lib-grid{ gap: 12px; }

.lib-shell--dashboard .lib-items{ gap: 10px; }

.lib-shell *{ box-sizing: border-box; }

.lib-title{
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lib-subtitle{
  margin-top: 4px;
  color: rgba(15,23,42,0.68);
  font-weight: 500;
}

.lib-header{ margin-bottom: 14px; }
.lib-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lib-header__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.lib-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow: 0 18px 45px rgba(15,23,42,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lib-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
  color: #0f172a;
  text-decoration:none;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.lib-btn i{ opacity:.9; }
.lib-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }

.lib-btn--primary{
  border-color: rgba(2,132,199,0.35);
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.98), rgba(14,165,233,0.24));
}

.lib-btn:focus-visible,
.lib-view__select:focus-visible,
.lib-crumb:focus-visible,
.lib-tree__link:focus-visible,
.lib-iconbtn:focus-visible{
  outline: 3px solid rgba(2,132,199,0.30);
  outline-offset: 2px;
}

.lib-btn__text{ font-weight: 600; }

.lib-spacer{ flex:1; }

.lib-view{ display:flex; align-items:center; gap:10px; }
.lib-view__select{
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
  padding: 0 12px;
  font-weight: 600;
  color: #0f172a;
}

.lib-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
}

/* Match dashboard panel headings inside the folder card */
.lib-sidehead__title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.lib-sidebar .dash-card{ height: 100%; }
.lib-sidehead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.lib-sidehead__home,
.lib-sidehead__root{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
  text-decoration:none;
  color:#0f172a;
}

.lib-tree{
  margin-top: 10px;
  max-height: 520px;
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.50);
  padding: 10px 10px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lib-tree__roots,
.lib-tree__children{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.lib-tree__children{ margin: 6px 0 0 18px; }

.lib-tree__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
}
.lib-tree__node.is-active > .lib-tree__row{
  background: rgba(2,132,199,0.10);
  border: 1px solid rgba(2,132,199,0.18);
}
.lib-tree__left{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}
.lib-tree__caret{
  width: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .55;
}
.lib-tree__caret--blank{ opacity:0; }
.lib-tree__icon{ opacity: .9; }
.lib-tree__link{
  color:#0f172a;
  text-decoration:none;
  font-weight: 600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 200px;
}
.lib-tree__link.is-active{ color:#075985; }
.lib-tree__badge{
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,132,199,.12);
  border: 1px solid rgba(2,132,199,.24);
  color: #075985;
}

.lib-main .dash-card{ min-height: 560px; }

.lib-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.lib-crumb{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.68);
  color: #0f172a;
  text-decoration:none;
  font-weight: 700;
}
.lib-crumb--current{ cursor: default; }
.lib-crumb__sep{ opacity:.55; font-weight: 700; }

.lib-items{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){
  .lib-grid{ grid-template-columns: 1fr; }
  .lib-items{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .lib-items{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.lib-item{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.50);
  background: rgba(255,255,255,0.62);
  box-shadow: 0 18px 45px rgba(15,23,42,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  min-height: 128px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.lib-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(15,23,42,0.14);
  border-color: rgba(2,132,199,0.28);
  background: rgba(255,255,255,0.70);
}
.lib-item__open{
  display:block;
  /* extra right padding so the share badge/text don't sit under the kebab button */
  padding: 14px 60px 48px 14px;
  text-decoration:none;
  color:#0f172a;
}
.lib-item__icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(2,132,199,0.20);
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.95), rgba(14,165,233,0.18));
  box-shadow: 0 12px 28px rgba(15,23,42,0.12);
  margin-bottom: 10px;
}
.lib-item__icon i{ font-size: 22px; opacity:.9; }

/* A little more color on file icons (kept subtle to preserve the glass feel) */
.lib-item__icon.lib-icon--pdf i{ color: #dc2626; }
.lib-item__icon.lib-icon--word i{ color: #2563eb; }
.lib-item__icon.lib-icon--excel i{ color: #16a34a; }
.lib-item__icon.lib-icon--ppt i{ color: #ea580c; }
.lib-item__icon.lib-icon--image i{ color: #7c3aed; }
.lib-item__icon.lib-icon--text i{ color: #0f172a; }
.lib-item__icon.lib-icon--zip i{ color: #b45309; }
.lib-item__icon.lib-icon--generic i{ color: #0f172a; }
.lib-item__icon.lib-icon--folder i{ color: #d97706; }

.lib-item__name{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Main text area (used for list + grid) */
.lib-item__main{
  min-width: 0;
  flex: 1;
}

/* Name row: name on left, share badge on right */
.lib-item__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.lib-item__row .lib-item__name{ min-width: 0; }

/* Meta description (shown inline with size/date in list rows) */
.lib-meta-desc{
  flex: 1;
  min-width: 0;
  color: rgba(15,23,42,0.78);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-meta-size, .lib-meta-date{
  white-space: nowrap;
}
.lib-item__meta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
  color: rgba(15,23,42,0.72);
  font-size: 12px;
  font-weight: 700;
}
.lib-badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(2,132,199,.10);
  border: 1px solid rgba(2,132,199,.20);
  color:#075985;
  font-weight: 600;
  font-size: 11px;
}
.lib-meta-dot{ opacity:.55; }
/* (legacy) .lib-meta-file removed — we no longer repeat file name in meta */

.lib-item__actions{
  position:absolute;
  top: 10px;
  right: 10px;
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  padding: 0;
  background: none;
  z-index: 5;
}
.lib-iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
  cursor:pointer;
  text-decoration:none;
}
.lib-iconbtn:hover{ filter: brightness(1.02); transform: translateY(-1px); }

.lib-item--up .lib-item__icon{
  border-color: rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.75);
}
.lib-item--up .lib-item__name{ font-weight: 600; }

.lib-empty{
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px dashed rgba(148,163,184,0.70);
  background: rgba(255,255,255,0.48);
  padding: 24px 18px;
  text-align:center;
  color: rgba(15,23,42,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lib-empty__icon{
  width: 66px;
  height: 66px;
  border-radius: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.70);
  margin: 0 auto 10px;
}
.lib-empty__icon i{ font-size: 24px; opacity:.85; }
.lib-empty__title{ font-weight: 600; font-size: 18px; margin-bottom: 6px; letter-spacing:-0.01em; }
.lib-empty__text,
.lib-empty__sub{
  font-weight: 500;
  color: rgba(15,23,42,0.68);
}

/* Modal */
.lib-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 6000;
  /* Center panel like the rest of Coachable modals */
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.lib-modal.is-open{ display: flex; }

.lib-modal__backdrop{
  position: absolute;
  inset: 0;
  /* Frosted + blurred page behind (matches Coachable modal style) */
  background: rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

.lib-modal__panel{
  position: relative;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  overflow: auto;

  border-radius: 20px;
  /* Crisp card like other Coachable modals (avoid washed-out translucency) */
  background: rgba(255,255,255,0.985);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.24),
    0 1px 0 rgba(255,255,255,0.65) inset;

  /* IMPORTANT: keep the *backdrop* frosted, but keep the modal card itself crisp */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lib-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
  background:
    linear-gradient(180deg, rgba(219,234,254,0.55), rgba(255,255,255,0.98));
}

.lib-modal__title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color:#0f172a;
}

.lib-modal__title-icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(219,234,254,0.55);
  color: rgba(15,23,42,0.92);
}

.lib-modal__close{
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.70);
  color: rgba(15,23,42,0.88);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.lib-modal__close:hover{
  background: rgba(255,255,255,0.88);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}

.lib-modal__body{ padding: 18px 20px 16px; }

.lib-modal__foot{
  margin-top: 16px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,0.18);
}

/* Close pill only (keeps other modals working even if icon stays) */
.lib-modal__close--pill{ min-width: 70px; }

/* Modal form (provider library) */
.lib-form{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.lib-form__section{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.18);
  /* More solid “frosted blue” fill so fields don't look faded */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.68)),
    rgba(219,234,254,0.55);
  padding: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lib-form__section-title{
  font-weight: 700;
  color: rgba(15,23,42,0.86);
  letter-spacing: -0.01em;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lib-form__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px){
  .lib-form__grid{ grid-template-columns: 1fr 1fr; }
}

.lib-field{ min-width: 0; }
.lib-field--full{ margin-top: 12px; }

.lib-field__label{
  display:block;
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,0.82);
  margin: 0 0 6px;
}

.lib-field__control{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.92);
  padding: 10px 12px;
  font-size: 14px;
  color: rgba(15,23,42,0.92);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 26px rgba(15,23,42,0.06);
}

.lib-field__control:focus{
  border-color: rgba(59,130,246,0.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.lib-field__control--multiselect{
  padding: 10px;
  min-height: 160px;
}

.lib-field__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,23,42,0.64);
  line-height: 1.25;
}

.lib-field__hint strong{ font-weight: 700; }


/* List view */
.lib-items.is-list{
  grid-template-columns: 1fr;
}

/* Keep list rows compact */
.lib-items.is-list .lib-item{
  min-height: 0;
}

.lib-items.is-list .lib-item__open{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 56px 12px 12px;
}

/* Allow flex children to shrink so long names don't force overflow */
.lib-items.is-list .lib-item__main{
  min-width: 0;
}

/* Wrap names in list view (2-ish lines) */
.lib-items.is-list .lib-item__name{
  font-size: 14px;
  line-height: 1.22;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slightly smaller meta */
.lib-items.is-list .lib-item__meta{
  margin-top: 3px;
  font-size: 12px;
  opacity: .85;
}

/* Make list rows feel like a professional table */
.lib-items.is-list .lib-item{
  border-radius: 16px;
}
.lib-items.is-list .lib-item + .lib-item{
  margin-top: 10px;
}
.lib-items.is-list .lib-item:hover{
  transform: translateY(-1px);
}

/* Keep the kebab pinned right */
.lib-items.is-list .lib-item__actions{
  background: none;
  padding: 0;
  right: 10px;
  left: auto;
  bottom: 50%;
  transform: translateY(50%);
}

.lib-items.is-list .lib-item__icon{ margin-bottom: 0; flex:0 0 54px; }


/* Kebab menu inside tiles */
.lib-menu{ position: relative; }
.lib-menu > summary{
  list-style: none;
  cursor: pointer;
}
.lib-menu > summary::-webkit-details-marker{ display:none; }

.lib-menu__btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.80);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
}
.lib-menu__btn i{ font-size: 16px; opacity:.85; }

.lib-menu[open] .lib-menu__btn{ filter: brightness(1.02); }

.lib-menu__panel{
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 42px rgba(15,23,42,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.lib-menu__item{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(255,255,255,0.70);
  color: #0f172a;
  text-decoration:none;
  font-weight: 700;
  cursor: pointer;
}
.lib-menu__item i{ width: 18px; text-align:center; opacity:.9; }
.lib-menu__item:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.lib-menu__item--danger{
  border-color: rgba(239,68,68,0.25);
}
.lib-menu__item--danger i{ color: #ef4444; }


/* Folder icon: use Font Awesome (matches the left tree) */
.lib-item--folder .lib-item__icon{
  width: 56px;
  height: 64px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
  border: 1px solid rgba(59,130,246,0.30);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(226,243,255,0.88));
  box-shadow:
    0 18px 34px rgba(15,23,42,0.10),
    0 0 0 1px rgba(255,255,255,0.55) inset;
}
.lib-item--folder .lib-item__icon::before{ content: none; }
.lib-item--folder .lib-item__icon i{ display:block; font-size: 30px; opacity: .92; }
.lib-item--folder .lib-item__name{ font-weight: 700; }

/* File-like tiles (paper w/ folded corner) */
.lib-item--file .lib-item__icon{
  width: 56px;
  height: 64px;
  border-radius: 14px;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid rgba(148,163,184,0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(226,243,255,0.88));
  box-shadow:
    0 18px 34px rgba(15,23,42,0.10),
    0 0 0 1px rgba(255,255,255,0.55) inset;
}
.lib-item--file .lib-item__icon::before{
  content:"";
  position:absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(203,213,225,0.55));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  box-shadow: -3px 4px 10px rgba(15,23,42,0.10);
}
.lib-item--file .lib-item__icon i{ font-size: 29px; opacity: .85; }

/* Subtle type accents for file cards */
.lib-item--file .lib-icon--pdf{ border-color: rgba(239,68,68,0.30); }
.lib-item--file .lib-icon--word{ border-color: rgba(37,99,235,0.30); }
.lib-item--file .lib-icon--excel{ border-color: rgba(34,197,94,0.30); }
.lib-item--file .lib-icon--ppt{ border-color: rgba(249,115,22,0.30); }
.lib-item--file .lib-icon--image{ border-color: rgba(168,85,247,0.30); }
.lib-item--file .lib-icon--text{ border-color: rgba(100,116,139,0.35); }
.lib-item--file .lib-icon--zip{ border-color: rgba(245,158,11,0.30); }

/* Date uploaded in list view */
.lib-meta-date{ display:none; }
.lib-items.is-list .lib-meta-date{ display:inline-flex; }
.lib-meta-dot{ opacity:.55; padding: 0 6px; }

.lib-items.is-list .lib-item--folder .lib-item__icon{ width: 52px; height: 60px; margin-bottom: 0; }
.lib-items.is-list .lib-item--file .lib-item__icon{ width: 52px; height: 60px; margin-bottom: 0; }



/* --- Fix menu stacking + wrapping in dashboard embeds --- */
.lib-item{ overflow: visible; }
.lib-item__open{ overflow: hidden; border-radius: 18px; }

/* Ensure the active item/menu stacks above neighboring cards/panels */
.lib-item:focus-within{ z-index: 50; }
.lib-menu{ position: relative; z-index: 60; }
.lib-menu[open]{ z-index: 9999; }
.lib-menu__panel{ z-index: 10000; }

/* In some layouts, glass panels create stacking contexts; raise the whole library surface */
.lib-shell, .lib-grid, .lib-list{ position: relative; z-index: 10; }
/* -------------------------------------------------------------------------
   Provider Portal – Minimal “paper” calendar (inspired by reference design)
   Scope: .coachable-minical
   ------------------------------------------------------------------------- */


.coachable-minical{
  position: relative;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(226,232,240,0.95);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

.coachable-minical__top{
  padding: 18px 18px 14px;
}

.coachable-minical__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.coachable-minical__navbtn{
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.9);
  color: rgba(15,23,42,0.75);
  text-decoration:none;
  font-size: 22px;
  font-weight: 700;
}

.coachable-minical__navbtn:hover{
  background: rgba(255,255,255,0.98);
  border-color: rgba(148,163,184,0.85);
}

.coachable-minical__title{
  text-align:center;
  flex: 1;
}

.coachable-minical__month{
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.78);
  font-weight: 500;
  font-family: "Snell Roundhand", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
}

.coachable-minical__year{
  margin-top: 4px;
  font-size: 14px;
  color: rgba(15,23,42,0.35);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.coachable-minical__weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-top: 10px;
  padding: 0 4px;
}

.coachable-minical__wday{
  text-align:center;
  font-size: 11px;
  color: rgba(15,23,42,0.35);
  letter-spacing: 0.08em;
  font-weight: 800;
}

.coachable-minical__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 16px 10px 6px;
}

.coachable-minical__cell{
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 999px;
  position: relative;
  color: rgba(15,23,42,0.78);
}

.coachable-minical__daynum{
  font-weight: 700;
  font-size: 14px;
  position: relative;
  z-index: 2;
}

.coachable-minical__cell.is-out{
  color: rgba(15,23,42,0.22);
}

/* soft “ink” circle for selected day */
.coachable-minical__cell.is-selected{
  box-shadow: inset 0 0 0 2px rgba(15,23,42,0.55);
}

/* subtle filled dot for days that have sessions */
.coachable-minical__cell.has-events:before{
  content: "";
  position:absolute;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(15,23,42,0.05);
  z-index: 1;
}

.coachable-minical__cell:hover{
  background: rgba(15,23,42,0.035);
}

.coachable-minical__bottom{
  display:flex;
  gap: 14px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(226,232,240,0.9);
  background: rgba(255,255,255,0.80);
}

.coachable-minical__dayhead{
  width: 110px;
  border-right: 1px solid rgba(148,163,184,0.35);
  padding-right: 14px;
}

.coachable-minical__dow{
  font-size: 28px;
  color: rgba(15,23,42,0.72);
  font-family: "Snell Roundhand", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
}

.coachable-minical__daynum_big{
  font-size: 46px;
  margin-top: 2px;
  font-weight: 800;
  color: rgba(15,23,42,0.78);
}

.coachable-minical__agenda{
  flex: 1;
  min-width: 0;
}

.coachable-minical__empty{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.7);
  color: rgba(15,23,42,0.50);
  font-weight: 700;
  font-size: 13px;
}

.coachable-minical__event{
  margin-bottom: 10px;
}

.coachable-minical__eventpill{
  display:inline-flex;
  align-items:center;
  margin-left:15px;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  /* Default fallback styling (used for other statuses / personal items) */
  background: rgba(251, 207, 232, 0.35); /* soft blush like the reference */
  border: 1px solid rgba(244, 114, 182, 0.18);
  cursor: pointer;
  max-width: 100%;
}

/* Status styling for agenda pills */
.coachable-minical__eventpill.is-confirmed{
  background: rgba(134, 239, 172, 0.22); /* soft green */
  border-color: rgba(34, 197, 94, 0.22);
}

.coachable-minical__eventpill.is-pending{
  background: rgba(191, 219, 254, 0.26); /* soft blue */
  border-color: rgba(59, 130, 246, 0.22);
}

.coachable-minical__eventtime{
  font-weight: 900;
  color: rgba(15,23,42,0.70);
  font-size: 13px;
  flex-shrink: 0;
}

.coachable-minical__eventtitle{
  font-weight: 800;
  color: rgba(15,23,42,0.80);
  font-size: 13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Floating action button (+) */
.coachable-minical__fab{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 44px rgba(15,23,42,0.18);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.coachable-minical__fab span{
  font-size: 30px;
  font-weight: 600;
  color: rgba(15,23,42,0.72);
  line-height: 1;
}

.coachable-minical__fab:hover{
  background: rgba(255,255,255,0.98);
}

@media (max-width: 720px){
  .coachable-minical__month{ font-size: 36px; }
  .coachable-minical__grid{ gap: 8px; padding: 14px 6px 6px; }
  .coachable-minical__cell{ height: 36px; }
  .coachable-minical__bottom{ padding: 12px 14px 16px; }
  .coachable-minical__dayhead{ width: 96px; }
}

/* ------------------------------------------------------------------
   Calendar integrations (Import / Export / Sync)
   ------------------------------------------------------------------ */

.calendar-import-card,
.calendar-sync-card {
  border: 1px solid rgba(120, 160, 210, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(0, 30, 70, 0.08);
}

.calendar-import-card__inner,
.calendar-sync-card__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  padding: 14px;
}

@media (max-width: 980px) {
  .calendar-import-card__inner,
  .calendar-sync-card__inner {
    grid-template-columns: 1fr;
  }
}

.calendar-import-card__title,
.calendar-sync-card__title {
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.calendar-import-card__hint,
.calendar-sync-card__fineprint,
.calendar-sync-card__hint {
  font-size: 12px;
  color: rgba(30, 50, 80, 0.70);
}

.calendar-import-form__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.calendar-import-form__fineprint {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(30, 50, 80, 0.70);
}

.calendar-import-card__pill,
.calendar-sync-card__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 210, 0.28);
  background: rgba(235, 245, 255, 0.90);
  font-weight: 700;
  font-size: 12px;
  color: rgba(25, 60, 95, 0.88);
  margin-bottom: 10px;
}

.calendar-import-card__list,
.calendar-sync-card__steps {
  margin: 0;
  padding-left: 18px;
  color: rgba(25, 45, 75, 0.86);
  font-size: 13px;
}

.calendar-sync-card__url {
  margin-top: 8px;
  border: 1px dashed rgba(120, 160, 210, 0.45);
  border-radius: 12px;
  padding: 10px;
  background: rgba(245, 250, 255, 0.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  word-break: break-all;
}

.calendar-sync-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-mini--success {
  border-color: rgba(80, 170, 120, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(80, 170, 120, 0.12);
}

/* Provider Public Profile Edit — pill selectors (Focus areas / Ideal clients / Approach)
   Goals:
   - Make selection state obvious instantly (via .is-selected)
   - Keep pills neatly organized (grid layout)
   - Maintain Coachable "calm glass" feel while staying crisp and readable
*/


.pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  align-items: start;
}

@media (max-width: 520px) {
  .pill-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 7px;
  }
}

.pill-group {
  /* per-group theme vars */
  --pill-border: rgba(148, 163, 184, 0.7);
  --pill-bg: rgba(248, 250, 252, 0.8);
  --pill-selected-border: rgba(59, 130, 246, 0.9);
  --pill-selected-bg: rgba(219, 234, 254, 0.8);
}

.pill-group--focus {
  --pill-selected-border: rgba(59, 130, 246, 0.9);
  --pill-selected-bg: rgba(219, 234, 254, 0.8);
}

.pill-group--population {
  --pill-selected-border: rgba(56, 189, 248, 0.9);
  --pill-selected-bg: rgba(224, 242, 254, 0.85);
}

.pill-group--approach {
  --pill-selected-border: rgba(45, 212, 191, 0.9);
  --pill-selected-bg: rgba(204, 251, 241, 0.85);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  font-size: 12px;
  line-height: 1.25;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

.pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.pill:active {
  transform: translateY(0);
  box-shadow: none;
}

.pill.is-selected {
  border-color: var(--pill-selected-border);
  background: var(--pill-selected-bg);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.04) inset;
}

/* Accessibility: visible focus ring when tabbing */
.pill:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

/* Make long labels wrap nicely without breaking layout */
.pill span {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Modern WYSIWYG toolbar (Gmail-ish)
   -------------------------------------------------------------------------- */

.wys-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 14px;
  /* Frosted glass (match Coachable modal / panel treatment) */
  background: rgba(255, 255, 255, 0.64);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.wys-sep {
  width: 1px;
  height: 18px;
  background: rgba(148, 163, 184, 0.7);
  align-self: center;
  margin: 0 2px;
}

.wys-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #0f172a;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

/* Make single-letter buttons not look cramped */
.wys-btn strong,
.wys-btn em,
.wys-btn u,
.wys-btn s {
  font-size: 13px;
}

.wys-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

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

.wys-btn.is-active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14) inset;
}

.wys-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

@media (max-width: 520px) {
  .wys-toolbar {
    padding: 8px 8px;
    gap: 5px;
  }
  .wys-btn {
    padding: 6px 9px;
    font-size: 12.5px;
  }
}

/* --------------------------------------------------------------------------
   Provider Public Profile Edit — overall layout polish (mobile)
   -------------------------------------------------------------------------- */

.public-profile-share {
  text-align: left;
}

.public-profile-share-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.public-profile-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.public-profile-share-link {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
  font-size: 12px;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-profile-share-copy,
.public-profile-share-view {
  appearance: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(148, 163, 184, 0.75);
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-profile-share-view {
  border-color: rgba(15, 23, 42, 0.75);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
}

@media (max-width: 720px) {
  /* The editor shell uses inline styles; override with !important for mobile. */
  #edit-public-profile .public-profile-editor-shell {
    /* Ensure the shell is truly centered and doesn't overflow due to inline padding. */
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: 720px !important;
    margin: 18px auto 48px !important;

    padding: 18px 16px 22px !important;
    border-radius: 24px !important;
  }

  #edit-public-profile .public-profile-editor-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #edit-public-profile .public-profile-editor-header h1 {
    font-size: 24px !important;
  }

  #edit-public-profile .public-profile-editor-grid {
    gap: 16px !important;
  }

  .public-profile-share-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .public-profile-share-link {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    text-overflow: initial;
  }

  .public-profile-share-copy,
  .public-profile-share-view {
    flex: 1 1 auto;
    min-width: 140px;
  }
}
/* app/assets/stylesheets/provider_public_profile_tagbox.css
   Provider Public Profile Edit — tagbox (autocomplete + freeform tags)
*/


.tagbox {
  display: block;
  border: 1px solid rgba(148, 163, 184, 0.75);
  background: rgba(248, 250, 252, 0.82);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.tagbox:focus-within {
  border-color: rgba(59, 130, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14), 0 10px 28px rgba(15, 23, 42, 0.06);
}

.tagbox__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tagbox__chip {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.75);
  background: rgba(219, 234, 254, 0.75);
  color: #0f172a;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.tagbox__chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

.tagbox__chip:active {
  transform: translateY(0);
  box-shadow: none;
}

.tagbox__chip-x {
  font-size: 14px;
  opacity: 0.7;
}

.tagbox__input {
  flex: 1 1 220px;
  min-width: 200px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 8px 6px;
  font-size: 13px;
  color: #0f172a;
}

.tagbox__hint {
  margin-top: 6px;
  font-size: 12px;
  color: #9ca3af;
}

@media (max-width: 520px) {
  .tagbox__input {
    min-width: 140px;
  }
}
/* Provider Portal – Tasks & To‑Do's (panel=tasktodos)
   Goal: calm, polished, “why would I use another app?” feel.
*/


.todo-board{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 6px;
}

@media (max-width: 900px){
  .todo-board{ grid-template-columns: 1fr; }
}

.todo-board-left,
.todo-board-right{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(120,160,210,0.25);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}

.todo-board-left{ position: relative; padding: 14px; }
.todo-board-right{ position: relative; padding: 14px; min-height: 420px; }

.todo-board-left-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 10px;
}
.todo-board-title{ font-weight: 800; letter-spacing: .6px; color:#1f2a3a; }

.todo-add-list{
  width: 34px; height: 34px; border-radius: 12px;
  border: 1px solid rgba(80,130,200,0.35);
  background: rgba(250,252,255,0.85);
  cursor: pointer;
  font-size: 20px;
  line-height: 20px;
}
.todo-add-list:hover{ box-shadow: 0 8px 18px rgba(70,110,170,0.18); }

.todo-lists{ display:flex; flex-direction:column; gap: 8px; }

.todo-list-item{
  display:flex; align-items:center; gap: 10px;
  width:100%;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(150,180,220,0.22);
  background: rgba(255,255,255,0.72);
  cursor:pointer;
  text-align:left;
}
.todo-list-item:hover{ box-shadow: 0 10px 20px rgba(40,70,120,0.10); }
.todo-list-item.is-active{
  border-color: rgba(60,120,210,0.35);
  background: rgba(236,246,255,0.90);
}

.todo-list-icon{ width: 34px; height: 34px; border-radius: 14px; display:flex; align-items:center; justify-content:center; }
.todo-list-ic{ width: 18px; height: 18px; fill: rgba(20,35,55,0.82); }
.todo-list-name{ flex: 1; font-weight: 750; color:#1f2a3a; }
.todo-list-count{
  min-width: 24px; height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  display:flex; align-items:center; justify-content:center;
  font-size: 12px;
  background: rgba(30,60,110,0.08);
  color: rgba(20,35,55,0.7);
}

.todo-board-left-footer{ margin-top: 12px; }
.todo-mini-hint{ font-size: 12px; color: rgba(20,35,55,0.55); }

.todo-board-right-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.todo-active-list{ display:flex; align-items:center; gap: 10px; }
.todo-active-icon{ width: 42px; height: 42px; border-radius: 16px; display:flex; align-items:center; justify-content:center; }
.todo-active-icon .todo-list-ic{ width: 20px; height: 20px; }

.todo-active-name{ font-size: 18px; font-weight: 900; color:#132033; }
.todo-active-sub{ font-size: 12px; color: rgba(20,35,55,0.55); margin-top: 2px; }

.todo-list-settings{
  border: 1px solid rgba(150,180,220,0.22);
  background: rgba(255,255,255,0.72);
  border-radius: 12px;
  width: 38px; height: 38px;
  cursor:pointer;
}

.todo-compose{
  display:flex; gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(150,180,220,0.22);
  background: rgba(255,255,255,0.82);
  margin-bottom: 12px;
}
.todo-compose-input{
  flex:1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
}
.todo-compose-add{
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
  background: rgba(10,130,200,0.88);
  color: #fff;
  font-weight: 800;
}
.todo-compose-add:hover{ box-shadow: 0 10px 20px rgba(10,130,200,0.20); }

.todo-items{ display:flex; flex-direction:column; gap: 10px; }

.todo-item{
  display:flex; align-items:center; gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(150,180,220,0.22);
  background: rgba(255,255,255,0.72);
}
.todo-item:hover{ box-shadow: 0 10px 20px rgba(40,70,120,0.08); }

.todo-check{
  width: 34px; height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(150,180,220,0.22);
  background: rgba(255,255,255,0.9);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.todo-check-box{ width: 14px; height: 14px; border-radius: 6px; border: 2px solid rgba(20,35,55,0.35); }

.todo-item.is-done{ opacity: .72; }
.todo-item.is-done .todo-check-box{ background: rgba(120,220,160,0.85); border-color: rgba(40,120,70,0.45); }
.todo-item.is-done .todo-title{ text-decoration: line-through; color: rgba(20,35,55,0.55); }

.todo-body{ flex:1; }
.todo-title{ font-weight: 850; color:#142337; cursor:text; }
.todo-meta{ font-size: 12px; color: rgba(20,35,55,0.5); margin-top: 3px; }

.todo-actions{ display:flex; align-items:center; gap: 6px; }
.todo-delete{
  width: 32px; height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(200,120,120,0.25);
  background: rgba(255,255,255,0.85);
  color: rgba(160,60,60,0.85);
  cursor:pointer;
  font-size: 18px;
}

.todo-empty{ text-align:center; padding: 30px 10px; }
.todo-empty-title{ font-weight: 900; color:#132033; font-size: 18px; }
.todo-empty-sub{ color: rgba(20,35,55,0.55); margin-top: 6px; }

/* Popovers (tool-tip style) */
.todo-add-list-pop,
.todo-list-settings-pop{
  position: absolute;
  z-index: 50;
  right: 14px;
  top: 52px;
  width: min(520px, calc(100% - 28px));
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(120,160,210,0.30);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.16);
  padding: 12px;
}
.todo-board-right .todo-list-settings-pop{ right: 14px; top: 56px; }
.todo-pop-title{ font-weight: 900; color:#142337; margin-bottom: 10px; }
.todo-pop-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; }
.todo-pop-label{ width: 64px; font-size: 12px; color: rgba(20,35,55,0.6); font-weight: 800; }
.todo-pop-input{
  flex:1;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(150,180,220,0.26);
  outline: none;
  background: rgba(250,252,255,0.9);
}
.todo-pop-primary{
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  background: rgba(10,130,200,0.88);
  color:#fff;
  font-weight: 900;
}
.todo-pop-sub{ font-size: 12px; color: rgba(20,35,55,0.55); }

.todo-pop-actions{ display:flex; justify-content:space-between; gap: 10px; margin-top: 12px; }
.todo-pop-danger{
  border: 1px solid rgba(200,120,120,0.30);
  background: rgba(255,245,245,0.95);
  color: rgba(160,60,60,0.92);
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 900;
}

.todo-icon-picker{ display:flex; flex-wrap:wrap; gap: 8px; }
.todo-icon-choice{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(150,180,220,0.22);
  background: rgba(255,255,255,0.9);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.todo-icon-choice.is-selected{ border-color: rgba(60,120,210,0.45); box-shadow: 0 10px 20px rgba(40,70,120,0.12); }

.todo-color-picker{ display:flex; gap: 10px; flex-wrap:wrap; }
.todo-color-choice{ width: 22px; height: 22px; border-radius: 8px; border: 1px solid rgba(20,35,55,0.12); cursor:pointer; }
.todo-color-choice.is-selected{ outline: 2px solid rgba(20,35,55,0.25); }

/* Color tokens */
.color-blue{ background: rgba(120, 185, 255, 0.25); }
.color-green{ background: rgba(120, 220, 170, 0.25); }
.color-purple{ background: rgba(190, 150, 255, 0.25); }
.color-orange{ background: rgba(255, 190, 120, 0.25); }
.color-pink{ background: rgba(255, 160, 210, 0.25); }
.color-teal{ background: rgba(120, 220, 220, 0.25); }
.color-gray{ background: rgba(160, 175, 195, 0.25); }

.todo-list-item.color-blue .todo-list-icon,
.todo-active-icon.color-blue{ background: rgba(120, 185, 255, 0.25); }
.todo-list-item.color-green .todo-list-icon,
.todo-active-icon.color-green{ background: rgba(120, 220, 170, 0.25); }
.todo-list-item.color-purple .todo-list-icon,
.todo-active-icon.color-purple{ background: rgba(190, 150, 255, 0.25); }
.todo-list-item.color-orange .todo-list-icon,
.todo-active-icon.color-orange{ background: rgba(255, 190, 120, 0.25); }
.todo-list-item.color-pink .todo-list-icon,
.todo-active-icon.color-pink{ background: rgba(255, 160, 210, 0.25); }
.todo-list-item.color-teal .todo-list-icon,
.todo-active-icon.color-teal{ background: rgba(120, 220, 220, 0.25); }
.todo-list-item.color-gray .todo-list-icon,
.todo-active-icon.color-gray{ background: rgba(160, 175, 195, 0.25); }
/* -------------------------------------------------------------------------
   Provider Plans – world-class purchase entry point
   ------------------------------------------------------------------------- */


.plans-shell{
  max-width: 92%;
  margin: 34px auto;
  padding: 28px 34px;
  border-radius: 0px;
  background:
    radial-gradient(1200px 420px at 15% 5%, rgba(59,130,246,0.18), transparent 55%),
    radial-gradient(900px 360px at 85% 0%, rgba(34,197,94,0.14), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.74), rgba(240,245,255,0.55));
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow:
    0 28px 70px rgba(70,90,120,0.22),
    0 0 0 1px rgba(255,255,255,0.36) inset;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #0f172a;
  position: relative;
  z-index: 1;
}

/* Full-page frosted leaves background (matches other Coachable surfaces) */
.section-inner{ position: relative; }

.plans-bg{
  position: absolute;
  inset: -24px; /* small bleed so blur never reveals edges */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 34px;
}

.plans-bg__image{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Prefer the "frosted leaves" aesthetic used across the site */
  background:
    background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.95), rgba(255,255,255,.85) 45%, rgba(226,232,240,.75) 100%),
    url('<%= image_path "steps-bg-leaves2.jpg" %>');

    radial-gradient(circle at center,
      rgba(255,255,255,.0) 0%,
      rgba(15,23,42,.04) 70%,
      rgba(15,23,42,.10) 100%);
  filter: blur(26px) saturate(1.12) contrast(1.05);
  opacity: 0.55;
  transform: scale(1.07);
}

.plans-bg__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(59,130,246,0.16), rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 80% 10%, rgba(34,197,94,0.14), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(245,250,255,0.86));
}

.plans-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.plans-title-row{display:flex;align-items:center;gap:14px;}

.plans-title-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,132,199,0.12);
  border: 1px solid rgba(2,132,199,0.16);
  box-shadow: 0 14px 28px rgba(15,23,42,0.08);
  color: #0f172a;
}

.plans-title{margin:0;font-size:26px;font-weight:900;letter-spacing:-0.01em;}
.plans-subtitle{margin:6px 0 0;font-size:14px;color:#475569;max-width:820px;}

.plans-meta{
  margin: 10px 0 0;
  font-size: 12px;
  color: #64748b;
  max-width: 820px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.plans-meta-label{font-weight:800;color:#334155;}

.plans-meta-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(148,163,184,0.40);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}

.plans-meta-dot{opacity:0.7;}
.plans-meta-sub{color:#64748b;}

.plans-head-right{display:flex;gap:10px;flex-wrap:wrap;}

.plans-back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15,23,42,0.92);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 32px rgba(15,23,42,0.18);
}

.plans-back:hover{filter: brightness(1.05);transform: translateY(-1px);}

.plans-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.plan-card{
  position: relative;
  border-radius: 26px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(148,163,184,0.44);
  box-shadow:
    0 18px 46px rgba(15,23,42,0.08),
    0 0 0 1px rgba(255,255,255,0.26) inset;
  overflow: hidden;
}

.plan-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(90deg, rgba(2,132,199,0.65), rgba(34,197,94,0.55));
}

.plan-card[data-tier="core"]::before{background: linear-gradient(90deg, rgba(59,130,246,0.75), rgba(2,132,199,0.55));}
.plan-card[data-tier="pro"]::before{background: linear-gradient(90deg, rgba(245,158,11,0.78), rgba(236,72,153,0.55));}
.plan-card[data-tier="free"]::before{background: linear-gradient(90deg, rgba(34,197,94,0.70), rgba(59,130,246,0.55));}

.plan-card__top{position:relative;padding:22px 16px 12px;text-align:center;}

.plan-card__icon-top{
  width: 64px;
  height: 64px;
  font-size:36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,132,199,0.10);
  border: 1px solid rgba(2,132,199,0.18);
  color: #0f172a;
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  margin: 0 auto 10px;
}

.plan-card[data-tier="core"] .plan-card__icon-top{background: rgba(59,130,246,0.10);border-color: rgba(59,130,246,0.18);}
.plan-card[data-tier="pro"]  .plan-card__icon-top{background: rgba(245,158,11,0.12);border-color: rgba(245,158,11,0.18);}
.plan-card[data-tier="free"] .plan-card__icon-top{background: rgba(34,197,94,0.12);border-color: rgba(34,197,94,0.18);}

.plan-card__header{display:flex;flex-direction:column;align-items:center;gap:4px;}

.plan-card__name{font-weight: 950;font-size:16px;color:#0f172a;}
.plan-card__desc{margin-top:4px;font-size:13px;color:#475569;line-height:1.35;}

.plan-card__price{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}

.plan-price-pill{
  display:inline-flex;align-items:left;gap:10px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(2,132,199,0.10);
  border: 1px solid rgba(2,132,199,0.18);
  color: #0f172a;
}

.plan-price-pill__label{opacity:0.72;}

.plan-note-warn{
  font-size: 12px;
  color: #b45309;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.plan-card__badge{position:absolute;top:14px;right:14px;display:flex;justify-content:flex-end;max-width: 60%;}

.plan-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.60);
  color: #0f172a;
  white-space: normal; /* prevent text clipping on narrow cards */
  text-align: center;
}

.plan-badge--current{border-color: rgba(34,197,94,0.24);background: rgba(34,197,94,0.14);color:#14532d;}
.plan-badge--pro{border-color: rgba(245,158,11,0.24);background: rgba(245,158,11,0.14);color:#7c2d12;}
.plan-badge--core{border-color: rgba(59,130,246,0.24);background: rgba(59,130,246,0.12);color:#0f172a;}
.plan-badge--free{border-color: rgba(34,197,94,0.22);background: rgba(34,197,94,0.12);color:#14532d;}

.plan-card__body{padding: 0 16px 8px;}

.plan-category{margin-top: 12px;}
.plan-category__title{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #334155;
}

.plan-feature-list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}

.plan-feature{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.50);
  border: 1px solid rgba(148,163,184,0.22);
}

.plan-feature__left{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.plan-feature__icon{margin-top:1px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;}
.plan-feature__icon--yes{color:#0f766e;}
.plan-feature__icon--no{color:rgba(15,23,42,0.35);}
.plan-feature__label{color:#0f172a;font-size:13px;line-height:1.25;word-break:break-word;}
.plan-feature__value{color:#334155;font-size:13px;font-weight:800;opacity:0.82;white-space:nowrap;}
/* Keep right-hand values (Yes/No/3/etc) readable and not clipped */
.plan-feature__value{flex: 0 0 auto; min-width: 34px; text-align: right;}

.plan-value-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(148,163,184,0.40);
  background: rgba(255,255,255,0.65);
  color: #0f172a;
}

.plan-value-pill--yes{border-color: rgba(34,197,94,0.22);background: rgba(34,197,94,0.12);color:#14532d;}
.plan-value-pill--no{border-color: rgba(148,163,184,0.40);background: rgba(148,163,184,0.16);color:#334155;}
.plan-value-pill--num{border-color: rgba(59,130,246,0.20);background: rgba(59,130,246,0.10);color:#0f172a;min-width: 44px;justify-content:center;}
.plan-value-pill--muted{opacity:0.70;}

.plan-card__actions{padding: 12px 16px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.plan-helper{font-size:12px;color:#64748b;}

.plan-footnote{
  margin-top: 10px;
  padding: 10px 16px 16px;
  font-size: 12px;
  color: #64748b;
  display:flex;
  align-items:center;
  gap: 10px;
}

.plans-alert{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 20px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.55);
}

.plans-alert__icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 34px;
}

.plans-alert--danger{border-color: rgba(239,68,68,0.16);background: rgba(239,68,68,0.06);}
.plans-alert--danger .plans-alert__icon{background: rgba(239,68,68,0.12);color:#991b1b;}

.plans-alert--warn{border-color: rgba(245,158,11,0.18);background: rgba(245,158,11,0.08);}
.plans-alert--warn .plans-alert__icon{background: rgba(245,158,11,0.16);color:#b45309;}

.plans-alert__body{flex:1 1 auto;min-width:220px;}
.plans-alert__title{font-weight:950;color:#0f172a;font-size:13px;}
.plans-alert__text{margin-top:3px;font-size:13px;line-height:1.35;color:#475569;}
.plans-alert__actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}

.plans-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(2,132,199,0.25);
  background: rgba(2,132,199,0.12);
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(15,23,42,0.06);
}

.plans-btn:hover{filter:brightness(1.03);transform:translateY(-1px);}
.plans-btn:disabled{opacity:0.55;cursor:not-allowed;transform:none;}

.plans-btn--primary{background: rgba(2,132,199,0.14);border-color: rgba(2,132,199,0.30);}
.plans-btn--ghost{background: rgba(255,255,255,0.55);border-color: rgba(148,163,184,0.45);}
.plans-btn--muted{background: rgba(148,163,184,0.18);border-color: rgba(148,163,184,0.32);color:#64748b;}
.plans-btn--dark{background: rgba(15,23,42,0.92);border-color: rgba(15,23,42,0.92);color:#fff;}
.plans-btn--warn{background: rgba(245,158,11,0.10);border-color: rgba(245,158,11,0.30);color:#7c2d12;}
.plans-btn--success{background: rgba(34,197,94,0.12);border-color: rgba(34,197,94,0.30);color:#14532d;}

.plans-btn--tiny{padding: 8px 12px;font-size: 12px;font-weight: 900;}

.plans-chip{
  display:inline-flex;
  align-items:center;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.55);
  color: #64748b;
  font-weight: 900;
  font-size: 13px;
}

.plans-chip--muted{opacity:0.9;}

@media (max-width: 720px){
  .plans-shell{padding: 22px 16px;border-radius: 26px;}
  .plans-bg{border-radius: 26px; inset: -18px;}
  .plans-title{font-size:22px;}
  .plan-feature__value{white-space:normal;text-align:right;}
  .plan-card__badge{max-width: 100%; justify-content:flex-start;}

  /* Mobile: make plan cards match the subscription banner width and stay centered */
  .plans-grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .plan-card{
    width: 100%;
    max-width: 980px;
  }
}


/* Prominent "Your subscription" banner */
.plans-subscription-card{
  margin-top: 14px;
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.76), rgba(255,255,255,0.54));
  box-shadow: 0 20px 50px rgba(15,23,42,0.10);
  backdrop-filter: blur(10px);
}

.plans-subscription-left{display:flex;flex-direction:column;gap:6px;min-width: 260px;}
.plans-subscription-title{
  display:flex;align-items:center;gap:10px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  color: #0f172a;
}
.plans-subscription-title i{
  width: 32px;height: 32px;border-radius: 12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.22);
  color: #1d4ed8;
}

.plans-subscription-plan{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
}
.plans-subscription-k{
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}
.plans-subscription-v{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.plans-subscription-right{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
  gap: 6px;
  text-align: right;
  min-width: 200px;
}

.plans-subscription-status{
  display:inline-flex;align-items:center;gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.06);
  color: #0f172a;
  font-size: 13px;
}
.plans-subscription-status i{opacity:0.85;}
.plans-subscription-sub{color:#64748b;font-size:12px;}

/* Status accents (safe defaults) */
.plans-subscription-status--active,
.plans-subscription-status--trialing{
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.25);
  color: #14532d;
}
.plans-subscription-status--past-due,
.plans-subscription-status--incomplete{
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.26);
  color: #7c2d12;
}
.plans-subscription-status--canceled,
.plans-subscription-status--cancelled{
  background: rgba(148,163,184,0.18);
  border-color: rgba(148,163,184,0.30);
  color: #334155;
}
.plans-subscription-status--none{
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.22);
  color: #1e3a8a;
}

@media (max-width: 880px){
  .plans-subscription-card{flex-direction:column;align-items:flex-start;}
  .plans-subscription-right{align-items:flex-start;text-align:left;min-width:0;}
}
/* -------------------------------------------------------------------------
   Star rating (hover-to-fill)
   ------------------------------------------------------------------------- */


.star-rating{
  display: inline-flex;
  flex-direction: row-reverse; /* works with 5.downto(1) markup */
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.star-rating input{
  position: absolute;
  left: -9999px;
}

.star-rating label{
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  color: rgba(15, 23, 42, 0.20);
  transition: transform 80ms ease, color 120ms ease;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.star-rating label:hover{
  transform: translateY(-1px) scale(1.04);
}

/* Hover: fill current + all "lower" stars (because row-reverse) */
.star-rating label:hover,
.star-rating label:hover ~ label{
  color: #f59e0b;
}

/* Selected: persist fill */
.star-rating input:checked ~ label{
  color: #f59e0b;
}

/* Keyboard focus */
.star-rating input:focus + label{
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Subtle pressed feel on click */
.star-rating label:active{
  transform: translateY(0) scale(0.98);
}
/* === Tiny Garden: Feeding + Growth + Wither states === */


.tiny-garden-card .tg-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* Mood selector */
.tiny-garden-card .tg-mood{ margin-top:12px; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,0.62); border: 1px solid rgba(0,0,0,0.06); }
.tiny-garden-card .tg-mood-title{ font-weight:700; font-size:13px; margin-bottom:8px; }
.tiny-garden-card .tg-mood-choices{ display:flex; gap:8px; flex-wrap:wrap; }
.tiny-garden-card .tg-mood-choice{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; border: 1px solid rgba(0,0,0,0.10); background: rgba(255,255,255,0.78); cursor:pointer; font-size:18px; line-height:1; }
.tiny-garden-card .tg-mood-choice span{ font-size:12px; font-weight:600; opacity:0.75; }
.tiny-garden-card .tg-mood-choice.is-selected{ border-color: rgba(15,108,255,0.55); box-shadow: 0 0 0 3px rgba(15,108,255,0.12); }
.tiny-garden-card .tg-mood-sub{ margin-top:6px; }
.tiny-garden-card .tg-mood.tg-nudge{ animation: tgNudge 0.65s ease-in-out; }
.tiny-garden-card .tg-mood.tg-prompt{ box-shadow: 0 0 0 4px rgba(15,108,255,0.14); }
@keyframes tgNudge { 0%{ transform: translateX(0);} 20%{ transform: translateX(-6px);} 40%{ transform: translateX(6px);} 60%{ transform: translateX(-4px);} 80%{ transform: translateX(4px);} 100%{ transform: translateX(0);} }

/* Mood chart */
.tiny-garden-card .tg-mood-stats{ margin-top:12px; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,0.62); border: 1px solid rgba(0,0,0,0.06); }
.tiny-garden-card .tg-mood-stats-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tiny-garden-card .tg-mood-stats-title{ font-weight:800; font-size:13px; }
.tiny-garden-card .tg-mood-canvas{ width:100%; height:170px; display:block; border-radius:12px; background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.06); }
.tiny-garden-card .tg-mood-legend{ margin-top:6px; }

.tiny-garden-card .tg-feed-btn[disabled] { opacity:.6; cursor:not-allowed; }

/* Plant base – make plants ~2x larger via font-size */
.tiny-garden-card .tg-plant{
  position: relative;
  font-size: 56px; /* was 28px */
  line-height: 1;
  transition: transform 300ms ease, filter 400ms ease, opacity 400ms ease;
  will-change: transform, filter, opacity;
}

/* Growth stages */
.tiny-garden-card .tg-plant.tg-grow-1 { transform: scale(0.85); }
.tiny-garden-card .tg-plant.tg-grow-2 { transform: scale(1.0); }
.tiny-garden-card .tg-plant.tg-grow-3 { transform: scale(1.12); }
.tiny-garden-card .tg-plant.tg-grow-4 { transform: scale(1.22); }

/* Wither buckets */
.tiny-garden-card .tg-plant.tg-health-healthy { filter:none; opacity:1; }
.tiny-garden-card .tg-plant.tg-health-droopy {
  filter: saturate(0.7) brightness(0.9);
  transform: translateY(2px) scale(0.98);
  opacity:.92;
}
.tiny-garden-card .tg-plant.tg-health-withered {
  filter: grayscale(0.5) brightness(0.9);
  transform: translateY(4px) scale(0.95) rotate(-2deg);
  opacity:.85;
}
.tiny-garden-card .tg-plant.tg-health-dormant {
  filter: grayscale(0.85) brightness(0.8);
  transform: translateY(6px) scale(0.9) rotate(-4deg);
  opacity:.75;
}

/* Feed FX – more obvious, lasts longer */
.tiny-garden-card .tg-food{
  position:absolute;
  font-size: 22px; /* bigger food icons */
  pointer-events:none;
  animation: tg-food-fly 2300ms ease-out forwards; /* was 900ms */
}
@keyframes tg-food-fly{
  0%{
    transform: translate(0,0) scale(0.85);
    opacity:0;
  }
  15%{
    opacity:1;
  }
  70%{
    transform: translate(var(--tx, -80px), var(--ty, -100px)) scale(1.15);
    opacity:1;
  }
  100%{
    transform: translate(var(--tx, -80px), var(--ty, -80px)) scale(1.05);
    opacity:0;
  }
}

/* Bloom aura on feed */
.tiny-garden-card .tg-bloom{
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59,130,246,0.25), rgba(59,130,246,0));
  animation: tg-bloom 1000ms ease forwards;
  pointer-events:none;
}
@keyframes tg-bloom{
  0%{ transform: scale(0.6); opacity:0;}
  25%{ opacity:1; }
  100%{ transform: scale(1.6); opacity:0;}
}

/* Happy wiggle on feed */
.tiny-garden-card.tg-fed .tg-plant[data-tg-latest="1"]{
  animation: tg-wiggle 700ms ease;
}
@keyframes tg-wiggle{
  0%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-2px) rotate(2deg); }
  50%{ transform: translateY(0) rotate(-2deg); }
  75%{ transform: translateY(-1px) rotate(1deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

/* Central tree visual inside Tiny Garden */
.tiny-garden-card .tg-garden{
  position: relative;
}

.tiny-garden-card .tg-tree{
  position: absolute;
  inset: auto 0 32px 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.tiny-garden-card .tg-tree-image{
  max-width: 200px;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 8px 16px rgba(15,23,42,0.35));
}

/* --- New: Garden health heart (pink / red palette) --- */
.tiny-garden-card .tg-health-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(244,63,94,0.10); /* soft rose */
  color:#be123c;
}

.tiny-garden-card .tg-health-pill i{
  font-size:11px;
}

/* High / mid / low all stay in the pink family, just different intensity */
.tiny-garden-card .tg-health-pill.tg-health-high{
  background:rgba(244,63,94,0.14);
  color:#be123c;
}

.tiny-garden-card .tg-health-pill.tg-health-mid{
  background:rgba(244,63,94,0.20);
  color:#9f1239;
}

.tiny-garden-card .tg-health-pill.tg-health-low{
  background:rgba(248,113,113,0.30);
  color:#b91c1c;
}

.tiny-garden-card .tg-health-pill.tg-health-none{
  opacity:0.8;
}

/* --- New: Feed modal layout & styling --- */

.tiny-garden-card .tg-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(6px);
  z-index: 900;
}

.tiny-garden-card .tg-feed-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 910;
  padding: 16px;
}

.tiny-garden-card .tg-feed-modal-inner{
  max-width: 760px;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(30, 64, 175, 0.20);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 20px 24px 18px;
}

.tiny-garden-card .tg-feed-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.tiny-garden-card .tg-feed-title{
  font-weight:600;
  font-size:16px;
  margin-bottom:4px;
}

.tiny-garden-card .tg-feed-modal-body{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.6fr);
  gap:16px;
}

@media (max-width: 768px){
  .tiny-garden-card .tg-feed-modal{
    align-items:flex-end;
  }
  .tiny-garden-card .tg-feed-modal-inner{
    border-radius:16px 16px 0 0;
  }
  .tiny-garden-card .tg-feed-modal-body{
    grid-template-columns: minmax(0,1fr);
  }
}

.tiny-garden-card .tg-feed-column{
  min-width:0;
}

.tiny-garden-card .tg-section-title{
  font-weight:600;
  font-size:13px;
  margin-bottom:4px;
}

.tiny-garden-card .tg-goals{
  max-height:220px;
  overflow:auto;
  margin-top:4px;
  border-radius:10px;
  background:rgba(15,23,42,0.02);
  padding:6px 6px 4px;
}

.tiny-garden-card .tg-goals-empty{
  font-size:12px;
  padding:6px 4px;
}

.tiny-garden-card .tg-goal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  font-size:12px;
}

.tiny-garden-card .tg-goal + .tg-goal{
  margin-top:2px;
}

.tiny-garden-card .tg-goal-main{
  min-width:0;
}

.tiny-garden-card .tg-goal-title{
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tiny-garden-card .tg-goal-meta{
  font-size:11px;
  opacity:0.75;
}

.tiny-garden-card .tg-goal-actions{
  flex-shrink:0;
}

.tiny-garden-card .tg-new-goal{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.tiny-garden-card .tg-new-goal-row{
  display:flex;
  gap:6px;
}

.tiny-garden-card .tg-new-goal-row input[type="text"]{
  flex:1;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.8);
  padding:6px 10px;
  font-size:12px;
}

.tiny-garden-card .tg-feed-rules{
  margin:4px 0 0;
  padding-left:1.1rem;
  font-size:12px;
}

.tiny-garden-card .tg-feed-rules li + li{
  margin-top:2px;
}

/* --- Tiny Garden: cow styles ------------------------------------------- */
.tiny-garden-card .tg-cow {
  position: absolute;
  left: 16%;
  bottom: 54px; /* sits on the “soil” ridge like the tree */
  z-index: 3;   /* below sparkles, above plants/soil */
  pointer-events: none;
}

.tiny-garden-card .tg-cow-image {
  display: block;
  width: 90px;           /* similar visual weight as the tree base */
  height: auto;
  image-rendering: auto;
  transform-origin: 50% 100%;
  animation: tg-cow-bob 4.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}

@keyframes tg-cow-bob {
  0%   { transform: translateY(0)    rotate(0deg); }
  50%  { transform: translateY(-2px) rotate(0.2deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

/* Responsive tweak so it doesn’t overlap controls on narrow cards */
@media (max-width: 640px) {
  .tiny-garden-card .tg-cow { left: 10%; bottom: 48px; }
  .tiny-garden-card .tg-cow-image { width: 76px; }
}

/* NEW: Chicken (placed on the opposite side) */
.tiny-garden-card .tg-chicken {
  position: absolute;
  right: 14%;
  bottom: 56px;
  z-index: 3;
  pointer-events: none;
  -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.tiny-garden-card .tg-chicken-image {
  display: block;
  width: 72px;
  height: auto;
  transform-origin: 50% 100%;
  animation: tg-chicken-peck 5.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));

}

@keyframes tg-chicken-peck {
  0%   { transform: translateY(0) rotate(0deg); }
  22%  { transform: translateY(-3px) rotate(-2deg); }
  28%  { transform: translateY(0) rotate(0deg); }
  55%  { transform: translateY(-2px) rotate(1.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .tiny-garden-card .tg-cow { left: 10%; bottom: 48px; }
  .tiny-garden-card .tg-cow-image { width: 76px; }

  .tiny-garden-card .tg-chicken { right: 8%; bottom: 48px; }
  .tiny-garden-card .tg-chicken-image { width: 62px; }
}




/* -------------------------------------------------------------------------
   Tiny Garden base layout (restored from legacy dashboard.css)
   ------------------------------------------------------------------------- */
}

/* ---------------- Tiny Garden (Vibe check-in game) ---------------- */

.tiny-garden-card { position: relative; overflow: hidden; }
.tg-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tg-streak-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(58,120,206,.16) 0%, rgba(58,120,206,.08) 100%);
  border: 1px solid rgba(58,120,206,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  color:#163a6b;
}

.tg-streak-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.tg-streak-copy{ display:flex; flex-direction:column; line-height:1.05; }
.tg-streak-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.tg-streak-value{ font-size:14px; font-weight:900; }
.tg-garden{
  position:relative; margin-top:14px;
  background: linear-gradient(180deg, #e9f2ff 0%, #f7fbff 100%);
  border:1px solid #e3ecfb; border-radius:16px;
  height:210px; overflow:hidden;
}
.tg-sky{ position:absolute; inset:0 0 auto 0; height:52%; }
.tg-soil{
  position:absolute; inset:auto 0 0 0; height:52%;
  background: linear-gradient(180deg, #c89a6a 0%, #ad7d4f 100%);
  border-top:1px solid rgba(0,0,0,.05);
}
.tg-plants{
  position:absolute; inset:0; display:flex; align-items:flex-end; gap:12px;
  padding:18px 18px 14px; flex-wrap:wrap;
}
.tg-empty{ font-weight:600; color:#355a8a; opacity:.9; }
.tg-hint{
  position:absolute; right:12px; top:10px;
  font-size:12px; font-weight:800; color:#20426c;
  background: rgba(255,255,255,.9); padding:6px 8px; border-radius:10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.tg-plant{
  width:48px; height:48px; display:grid; place-items:center;
  font-size:32px; transform-origin:center bottom;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.12));
  transition: transform .35s ease, opacity .35s ease;
}
/* Growth stages (recent => sprout, older => fuller) */
.tg-stage-1{
  opacity:.75;
  transform: translateY(10px) scale(.7);
  animation: tg-sprout .9s ease-out both;
}
.tg-stage-2{
  opacity:.95;
  transform: translateY(3px) scale(.9);
  animation: tg-grow .9s ease-out both;
}
.tg-stage-3{
  opacity:1;
  transform: translateY(0) scale(1);
}
/* Just planted: pop + wiggle */
.tg-just-planted{
  animation: tg-pop .95s cubic-bezier(.2,.9,.2,1) both;
}
/* Garden pulse when planting */
.tg-pulse .tg-garden::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 75%, rgba(255,255,255,.95), transparent 55%);
  animation: tg-glow .95s ease-out;
  pointer-events:none;
}
/* Water animation: fallback shimmer */
.tg-water .tg-garden::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.95), transparent 40%),
    radial-gradient(circle at 60% 8%, rgba(255,255,255,.95), transparent 35%),
    radial-gradient(circle at 80% 22%, rgba(255,255,255,.95), transparent 45%);
  animation: tg-rain .95s ease-out;
  pointer-events:none;
}
.tg-water .tg-soil::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 10%, rgba(255,255,255,.5), transparent 55%);
  animation: tg-ripple .95s ease-out;
  pointer-events:none;
}
/* Cloud + sun */
.tg-cloud{
  position:absolute; top:18px; width:64px; height:26px; border-radius:999px;
  background: rgba(255,255,255,.9);
  box-shadow: 12px 0 0 rgba(255,255,255,.9), 24px 6px 0 rgba(255,255,255,.9);
  opacity:.9;
  animation: tg-cloud-drift 22s linear infinite;
}
.tg-cloud--1{ left:-80px; animation-duration: 26s; top:20px; }
.tg-cloud--2{ left:-110px; animation-duration: 34s; top:44px; opacity:.75; transform: scale(.9); }
}

.tg-sun{
  position:absolute; right:22px; top:18px; width:28px; height:28px; border-radius:50%;
  background: rgba(255,236,164,.95);
  box-shadow: 0 0 0 6px rgba(255,236,164,.25), 0 0 0 12px rgba(255,236,164,.12);
  animation: tg-sun-pulse 5.5s ease-in-out infinite;
}
}

/* FX layer for JS particles */
.tg-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
/* Sparkles */
.tg-spark{
  position:absolute; width:6px; height:6px; border-radius:2px;
  background: rgba(255,255,255,1);
  box-shadow: 0 0 12px rgba(255,255,255,.9);
  animation: tg-sparkle 1.1s ease-out forwards;
}
}

/* Raindrops */
.tg-raindrop{
  position:absolute; width:3px; height:12px; border-radius:10px;
  background: rgba(120,175,255,.9);
  animation: tg-drop 0.9s ease-in forwards;
}
}

/* Choices */
.tg-choices-wrap{ margin-top:14px; }
.tg-prompt{ font-weight:700; margin-bottom:8px; color:#20426c; }
.tg-choices{ display:flex; flex-wrap:wrap; gap:10px; }
.tg-choice{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:10px 12px; border-radius:12px; border:1px solid #e5ecf7;
  background:#fff; box-shadow: 0 6px 14px rgba(0,0,0,.04);
  cursor:pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tg-choice:hover{ transform: translateY(-1px); border-color:#cfe0f8; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.tg-choice.is-selected{ border-color:#3a78ce; box-shadow: 0 0 0 2px rgba(58,120,206,.18); }
.tg-emoji{ font-size:26px; }
.tg-label small{ color:#6d7e97; font-weight:600; }
.tg-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
/* History */
.tg-history{ margin-top:12px; border-top:1px dashed #e3ecfb; padding-top:10px; }
.tg-history-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tg-history-title{ font-weight:800; color:#1f3b6a; }
.tg-history-row{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto; padding-right:2px;}
.tg-history-item{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e7eef9; padding:8px 10px; border-radius:10px; }
.tg-history-emoji{ font-size:22px; }
.tg-history-plant{ font-weight:800; }
.tg-history-date{ font-size:12px; color:#6d7e97; font-weight:700; }
/* Gentle idle sway for mature plants */
.tg-stage-3{ animation: tg-sway 6s ease-in-out infinite; }

/* ==========================================================================
   9) Tiny Garden (Vibe check-in game)
   ========================================================================== */

.tiny-garden-card{
  position:relative;
  overflow:hidden;
}.tg-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}.tg-streak-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(58, 120, 206, .10);
  color:#1f3b6a;
  font-weight:700;
  font-size:12px;
}.tg-garden{
  position:relative;
  margin-top:14px;
  background:linear-gradient(180deg, #e9f2ff 0%, #f7fbff 100%);
  border:1px solid #e3ecfb;
  border-radius:16px;
  height:210px;
  overflow:hidden;
}.tg-sky{
  position:absolute;
  inset:0 0 auto 0;
  height:52%;
}.tg-soil{
  position:absolute;
  inset:auto 0 0 0;
  height:52%;
  background:linear-gradient(180deg, #c89a6a 0%, #ad7d4f 100%);
  border-top:1px solid rgba(0,0,0,.05);
}.tg-plants{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:18px 18px 14px;
  flex-wrap:wrap;
}.tg-empty{
  font-weight:600;
  color:#355a8a;
  opacity:.9;
}.tg-hint{
  position:absolute;
  right:12px;
  top:10px;
  font-size:12px;
  font-weight:800;
  color:#20426c;
  background:rgba(255,255,255,.9);
  padding:6px 8px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}.tg-plant{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:32px;
  transform-origin:center bottom;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));
  transition:transform .35s ease, opacity .35s ease;
}older => fuller) */

.tg-stage-1{
  opacity:.75;
  transform:translateY(10px) scale(.7);
  animation:tg-sprout .9s ease-out both;
}.tg-stage-2{
  opacity:.95;
  transform:translateY(3px) scale(.9);
  animation:tg-grow .9s ease-out both;
}.tg-stage-3{
  opacity:1;
  transform:translateY(0) scale(1);
  animation:tg-sway 6s ease-in-out infinite;
}/* Just planted: pop + wiggle */

.tg-just-planted{
  animation:tg-pop .95s cubic-bezier(.2,.9,.2,1) both;
}/* Garden pulse when planting */

.tg-pulse .tg-garden::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 75%, rgba(255,255,255,.95), transparent 55%);
  animation:tg-glow .95s ease-out;
  pointer-events:none;
}/* Water animation: fallback shimmer */

.tg-water .tg-garden::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 18%, rgba(255,255,255,.95), transparent 40%),
    radial-gradient(circle at 60% 8%, rgba(255,255,255,.95), transparent 35%),
    radial-gradient(circle at 80% 22%, rgba(255,255,255,.95), transparent 45%);
  animation:tg-rain .95s ease-out;
  pointer-events:none;
}.tg-water .tg-soil::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 10%, rgba(255,255,255,.5), transparent 55%);
  animation:tg-ripple .95s ease-out;
  pointer-events:none;
}/* Cloud + sun */

.tg-cloud{
  position:absolute;
  top:18px;
  width:64px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:12px 0 0 rgba(255,255,255,.9), 24px 6px 0 rgba(255,255,255,.9);
  opacity:.9;
  animation:tg-cloud-drift 22s linear infinite;
}.tg-cloud--1{
  left:-80px;
  animation-duration:26s;
  top:20px;
}.tg-cloud--2{
  left:-110px;
  animation-duration:34s;
  top:44px;
  opacity:.75;
  transform:scale(.9);
}@keyframes tg-cloud-drift{
  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(420px);
  }
}.tg-sun{
  position:absolute;
  right:22px;
  top:18px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,236,164,.95);
  box-shadow:0 0 0 6px rgba(255,236,164,.25), 0 0 0 12px rgba(255,236,164,.12);
  animation:tg-sun-pulse 5.5s ease-in-out infinite;
}@keyframes tg-sun-pulse{
  0%,100%{
    transform:scale(1);
    opacity:.95;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }
}/* FX layer for JS particles */

.tg-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}/* Sparkles */

.tg-spark{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:2px;
  background:rgba(255,255,255,1);
  box-shadow:0 0 12px rgba(255,255,255,.9);
  animation:tg-sparkle 1.1s ease-out forwards;
}@keyframes tg-sparkle{
  0%{
    transform:translateY(6px) scale(.4) rotate(0deg);
    opacity:0;
  }

  30%{
    opacity:1;
  }

  100%{
    transform:translateY(-26px) scale(1.1) rotate(90deg);
    opacity:0;
  }
}/* Raindrops */

.tg-raindrop{
  position:absolute;
  width:3px;
  height:12px;
  border-radius:10px;
  background:rgba(120,175,255,.9);
  animation:tg-drop 0.9s ease-in forwards;
}@keyframes tg-drop{
  0%{
    transform:translateY(0);
    opacity:0;
  }

  20%{
    opacity:1;
  }

  100%{
    transform:translateY(230px);
    opacity:0;
  }
}@keyframes tg-sprout{
  0%{
    transform:translateY(22px) scale(.45);
    opacity:.05;
  }

  100%{
    transform:translateY(10px) scale(.7);
    opacity:.75;
  }
}@keyframes tg-grow{
  0%{
    transform:translateY(12px) scale(.65);
    opacity:.25;
  }

  100%{
    transform:translateY(3px) scale(.9);
    opacity:.95;
  }
}@keyframes tg-pop{
  0%{
    transform:translateY(22px) scale(.25);
    opacity:0;
  }

  55%{
    transform:translateY(-4px) scale(1.18);
    opacity:1;
  }

  100%{
    transform:translateY(0) scale(1);
  }
}@keyframes tg-glow{
  0%{
    opacity:0;
    transform:scale(.88);
  }

  55%{
    opacity:1;
    transform:scale(1.02);
  }

  100%{
    opacity:0;
    transform:scale(1.06);
  }
}@keyframes tg-rain{
  0%{
    opacity:0;
    transform:translateY(-12px);
  }

  45%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translateY(16px);
  }
}@keyframes tg-ripple{
  0%{
    opacity:0;
    transform:scale(.6);
  }

  60%{
    opacity:.9;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(1.12);
  }
}/* Choices */

.tg-choices-wrap{
  margin-top:14px;
}.tg-prompt{
  font-weight:700;
  margin-bottom:8px;
  color:#20426c;
}.tg-choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}.tg-choice{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5ecf7;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}.tg-choice:hover{
  transform:translateY(-1px);
  border-color:#cfe0f8;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}.tg-choice.is-selected{
  border-color:#3a78ce;
  box-shadow:0 0 0 2px rgba(58,120,206,.18);
}.tg-emoji{
  font-size:26px;
}.tg-label small{
  color:#6d7e97;
  font-weight:600;
}.tg-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}/* History */

.tg-history{
  margin-top:12px;
  border-top:1px dashed #e3ecfb;
  padding-top:10px;
}.tg-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}.tg-history-title{
  font-weight:800;
  color:#1f3b6a;
}.tg-history-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow:auto;
  padding-right:2px;
}.tg-history-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #e7eef9;
  padding:8px 10px;
  border-radius:10px;
}.tg-history-emoji{
  font-size:22px;
}.tg-history-plant{
  font-weight:800;
}.tg-history-date{
  font-size:12px;
  color:#6d7e97;
  font-weight:700;
}

/* --- Week / Month insights --- */
.tg-insights{
  margin-bottom: 14px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(59,130,246,0.14);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.06);
}
.tg-insights-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tg-insights-title{ font-weight: 900; color:#163a67; font-size: 14px; }
.tg-insights-sub{ font-size: 12px; margin-top:2px; }
.tg-insights-tabs{ display:flex; gap:8px; }
.tg-tab{
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.72);
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  color:#1f3b6a;
}
.tg-tab.is-active{
  border-color: rgba(37,99,235,0.40);
  background: rgba(239,246,255,0.92);
}
.tg-insights-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 10px;
}
.tg-insights-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(231,238,249,0.95);
  border-radius: 14px;
  padding: 10px;
}
.tg-mini-label{ font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(71,85,105,0.9); }
.tg-big{ font-size: 26px; font-weight: 950; color:#143a66; margin-top: 6px; }
.tg-mini-sub{ font-size: 12px; margin-top: 2px; }
.tg-mini-canvas{
  width: 100%;
  height: 110px;
  display:block;
  margin-top: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(239,246,255,0.7), rgba(255,255,255,0.6));
  border: 1px solid rgba(59,130,246,0.10);
}
.tg-daystrip{
  margin-top: 10px;
  display:grid;
  gap: 6px;
  grid-template-columns: repeat(7, 1fr);
}
.tg-day{
  border-radius: 12px;
  border: 1px solid rgba(231,238,249,0.95);
  background: rgba(255,255,255,0.85);
  padding: 8px 6px;
  text-align:center;
}
.tg-day .d{ display:block; font-size: 11px; font-weight: 900; color: rgba(71,85,105,0.85); }
.tg-day .e{ display:block; font-size: 18px; margin-top: 4px; }

@media (max-width: 920px){
  .tg-insights-grid{ grid-template-columns: 1fr 1fr; }
  .tg-insights-card--wide{ grid-column: span 2; }
}