/*!
 * D'leaps r43 — widget/dleaps-portal.css
 *
 * The live client-portal phone mock. Used on the homepage (#client-portal,
 * feature list beside the phone) and on /care/ (phone on its own).
 *
 * Tokens are shadcn HSL triplets — hsl(var(--x)) everywhere, never var(--x).
 * A bare var(--paper) resolves to "0 0% 100%" and fails silently.
 */

.dlpp { margin-top: 2rem; }

.dlpp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .dlpp-split { grid-template-columns: 1fr minmax(300px, 360px); gap: 3.5rem; }
}
.dlpp-solo { display: flex; flex-direction: column; align-items: center; }

/* ------------------------------------------------------------- features */

.dlpp-feats { display: flex; flex-direction: column; gap: .3rem; }

.dlpp-feat {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s, border-color .18s;
}
.dlpp-feat:hover { background: hsl(var(--brand-turquoise) / .07); }
.dlpp-feat.is-on {
  background: hsl(var(--paper));
  border-color: hsl(var(--brand-turquoise) / .5);
  box-shadow: 0 6px 20px hsl(210 24% 12% / .06);
}
.dlpp-feat:focus-visible { outline: 2px solid hsl(var(--brand-turquoise)); outline-offset: 2px; }

.dlpp-feat-i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: hsl(var(--brand-turquoise) / .13);
  color: hsl(var(--brand-turquoise-deep));
  transition: background .18s, color .18s;
}
.dlpp-feat.is-on .dlpp-feat-i {
  background: hsl(var(--brand-turquoise-deep));
  color: #fff;
}
.dlpp-feat-t { min-width: 0; }
.dlpp-feat-t b { display: block; font-size: .95rem; color: hsl(var(--ink)); margin-bottom: .12rem; }
.dlpp-feat-t span { display: block; font-size: .83rem; line-height: 1.55; color: hsl(var(--ink) / .6); }

.dlpp-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .7rem 0 0 .9rem;
  font-size: .85rem;
  font-weight: 700;
  color: hsl(var(--brand-magenta));
  text-decoration: none;
}
.dlpp-more:hover { filter: brightness(.92); }
.dlpp-more svg { transition: transform .18s ease; }
.dlpp-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- phone */

.dlpp-stage { display: flex; flex-direction: column; align-items: center; }

.dlpp-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 1.5rem .75rem .6rem;
  border-radius: 34px;
  background: hsl(var(--paper));
  border: 9px solid hsl(210 22% 13%);
  box-shadow: 0 26px 60px hsl(210 24% 12% / .22);
  overflow: hidden;
}
.dlpp-notch {
  position: absolute;
  top: .5rem; left: 50%;
  transform: translateX(-50%);
  width: 86px; height: 18px;
  border-radius: 999px;
  background: hsl(210 22% 13%);
}
.dlpp-status {
  display: flex; align-items: center; justify-content: space-between;
  margin: -.55rem .2rem .5rem;
  font-size: .66rem; font-weight: 700; color: hsl(var(--ink) / .6);
}
.dlpp-sig { width: 34px; height: 8px; border-radius: 3px; background: hsl(var(--ink) / .18); }

.dlpp-brand {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 .25rem .3rem;
}
.dlpp-brand img { height: 18px; width: auto; display: block; }
.dlpp-brand span {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: hsl(var(--ink) / .45);
  padding-left: .4rem; border-left: 1px solid hsl(var(--line));
}
.dlpp-home {
  margin: 0 .25rem .6rem;
  font-family: "Poiret One", Lato, sans-serif;
  font-size: 1.12rem; line-height: 1.2; color: hsl(var(--ink));
}

/* Fixed height so the phone does not resize as screens change — that jump
   is what makes a mock read as a web page rather than an app. Content longer
   than the frame scrolls inside it, the way it would on a real device,
   rather than being clipped mid-card. */
.dlpp-body {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dlpp-body::-webkit-scrollbar { width: 0; height: 0; }
.dlpp-screen { animation: dlppIn .24s ease both; }
.dlpp-screen[hidden] { display: none; }
@keyframes dlppIn { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }

.dlpp-screen-t {
  margin: 0 0 .5rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: hsl(var(--brand-turquoise-deep));
}

/* -------------------------------------------------------- screen pieces */

.dlpp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .42rem 0; border-bottom: 1px solid hsl(var(--line));
}
.dlpp-k { font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: hsl(var(--ink) / .42); }
.dlpp-v { font-size: .84rem; font-weight: 700; color: hsl(var(--ink)); }
.dlpp-ok { color: hsl(var(--brand-turquoise-deep)); }
.dlpp-warn { color: hsl(var(--brand-magenta)); }

.dlpp-feed { margin-top: .55rem; display: flex; flex-direction: column; gap: .1rem; }
.dlpp-item {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .48rem 0; border-bottom: 1px solid hsl(var(--line) / .7);
}
.dlpp-item:last-child { border-bottom: 0; }
.dlpp-item div { flex: 1 1 auto; min-width: 0; }
.dlpp-item b { display: block; font-size: .8rem; line-height: 1.3; color: hsl(var(--ink)); }
.dlpp-item span { display: block; font-size: .7rem; line-height: 1.4; color: hsl(var(--ink) / .55); margin-top: .1rem; }
.dlpp-item em {
  flex: 0 0 auto; font-style: normal; font-size: .62rem; font-weight: 700;
  color: hsl(var(--ink) / .4); padding-top: .1rem;
}
.dlpp-dot {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: .38rem; border-radius: 999px;
  background: hsl(var(--line-strong));
}
.dlpp-dot-ok { background: hsl(var(--brand-turquoise-deep)); }
.dlpp-dot-warn { background: hsl(var(--brand-magenta)); }

.dlpp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.dlpp-tile { position: relative; }
.dlpp-tile img {
  width: 100%; height: 66px; object-fit: cover; display: block;
  border-radius: 9px; background: hsl(var(--line) / .5);
}
.dlpp-tile span { display: block; margin-top: .22rem; font-size: .7rem; font-weight: 700; color: hsl(var(--ink)); }
.dlpp-badge {
  position: absolute; top: .25rem; right: .25rem;
  padding: .1rem .35rem; border-radius: 999px;
  font-style: normal; font-size: .54rem; font-weight: 700; letter-spacing: .04em;
  background: hsl(var(--paper)); color: hsl(var(--ink));
}
.dlpp-badge.dlpp-ok { color: hsl(var(--brand-turquoise-deep)); }
.dlpp-badge.dlpp-warn { color: hsl(var(--brand-magenta)); }

.dlpp-lines { margin-top: .35rem; }
.dlpp-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .34rem 0; border-bottom: 1px solid hsl(var(--line) / .7);
  font-size: .76rem; color: hsl(var(--ink) / .68);
}
.dlpp-line b { font-size: .78rem; color: hsl(var(--ink)); white-space: nowrap; }
.dlpp-line em { font-style: normal; font-size: .68rem; font-weight: 700; }
.dlpp-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: .5rem; padding-top: .5rem; border-top: 1.5px solid hsl(var(--ink) / .12);
  font-size: .72rem; color: hsl(var(--ink) / .55);
}
.dlpp-total b { font-size: 1rem; color: hsl(var(--ink)); }

.dlpp-bar { height: 6px; border-radius: 999px; background: hsl(var(--line)); overflow: hidden; margin-bottom: .6rem; }
.dlpp-bar i { display: block; height: 100%; border-radius: 999px; background: hsl(var(--brand-turquoise-deep)); }

.dlpp-ask {
  margin-top: .6rem; padding: .65rem .7rem;
  border-radius: 12px; border: 1px solid hsl(var(--line));
  background: hsl(var(--brand-turquoise) / .07);
}
.dlpp-ask b { display: block; font-size: .8rem; color: hsl(var(--ink)); }
.dlpp-ask > span { display: block; font-size: .68rem; color: hsl(var(--ink) / .55); margin-top: .08rem; }
.dlpp-btns { display: flex; gap: .35rem; margin-top: .5rem; }
.dlpp-b {
  flex: 1 1 auto; text-align: center; padding: .36rem .4rem; border-radius: 8px;
  font-size: .68rem; font-weight: 700;
  border: 1px solid hsl(var(--line-strong)); color: hsl(var(--ink));
}
.dlpp-b-p { background: hsl(var(--brand-turquoise-deep)); border-color: hsl(var(--brand-turquoise-deep)); color: #fff; }

/* The Care screen's header block — the reassurance, stated once, up top. */
.dlpp-care-top {
  padding: .7rem .75rem .75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, hsl(var(--brand-turquoise) / .18), hsl(var(--brand-turquoise) / .06));
  border: 1px solid hsl(var(--brand-turquoise) / .35);
  margin-bottom: .5rem;
}
.dlpp-care-badge {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: hsl(var(--brand-turquoise-deep));
}
.dlpp-care-top b {
  display: block; margin-top: .2rem;
  font-family: "Poiret One", Lato, sans-serif; font-size: 1.25rem; line-height: 1.1;
  color: hsl(var(--ink));
}
.dlpp-care-sub { display: block; margin-top: .15rem; font-size: .68rem; line-height: 1.45; color: hsl(var(--ink) / .6); }

/* ----------------------------------------------------------------- tabs */

.dlpp-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .1rem;
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px solid hsl(var(--line));
}
.dlpp-tab {
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .3rem .1rem; border: 0; border-radius: 8px; background: none;
  cursor: pointer; font-family: inherit; color: hsl(var(--ink) / .4);
  transition: color .18s, background .18s;
}
.dlpp-tab:hover { color: hsl(var(--ink) / .7); }
.dlpp-tab.is-on { color: hsl(var(--brand-turquoise-deep)); background: hsl(var(--brand-turquoise) / .1); }
.dlpp-tab em { font-style: normal; font-size: .52rem; font-weight: 700; letter-spacing: .02em; }
.dlpp-tab:focus-visible { outline: 2px solid hsl(var(--brand-turquoise)); outline-offset: 1px; }

.dlpp-hint {
  margin: .85rem 0 0;
  font-size: .74rem; font-weight: 600;
  color: hsl(var(--ink) / .45);
}

@media (prefers-reduced-motion: reduce) {
  .dlpp-screen { animation: none; }
  .dlpp-feat, .dlpp-feat-i, .dlpp-tab, .dlpp-more svg { transition: none; }
}