/*
 * Premium refinement v2
 * A final-pass visual and readability layer for the PC public portal and
 * authenticated workspace. It intentionally does not alter business state,
 * permissions, API behavior, or the frozen mobile product.
 */

:root {
  --yw-premium-ink: #10271f;
  --yw-premium-muted: #5d7168;
  --yw-premium-green: #147a5a;
  --yw-premium-green-bright: #58d6a4;
  --yw-premium-gold: #b28b3c;
  --yw-premium-line: rgba(24, 77, 58, .13);
  --yw-premium-glow: 0 24px 70px rgba(18, 70, 52, .12);
}

/* Public portal: a more authored brand surface, not a generic SaaS landing page. */
.pc-portal-shell {
  background:
    radial-gradient(circle at 10% 20%, rgba(25, 143, 101, .1), transparent 28rem),
    radial-gradient(circle at 88% 34%, rgba(22, 113, 133, .08), transparent 32rem),
    linear-gradient(180deg, #f5f9f6, #f8faf9 44%, #f2f7f4);
}

.pc-header {
  border-bottom-color: rgba(15, 77, 56, .11);
  background: rgba(252, 253, 252, .88);
  box-shadow: 0 8px 30px rgba(18, 64, 48, .035);
  backdrop-filter: blur(22px) saturate(1.2);
}

.pc-header__inner {
  min-height: 78px;
}

.pc-brand__mark {
  border-color: rgba(106, 226, 179, .42);
  background:
    radial-gradient(circle at 35% 30%, rgba(113, 230, 184, .2), transparent 36%),
    #093d2f;
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .045),
    0 9px 26px rgba(5, 64, 45, .18);
}

.pc-header nav button,
.pc-header__actions > a:not(.pc-button) {
  position: relative;
  font-weight: 650;
}

.pc-header nav button::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 4px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: #16805e;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

.pc-header nav button:hover::after,
.pc-header nav button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.pc-button {
  border-radius: 13px;
  box-shadow:
    0 12px 28px rgba(8, 122, 85, .2),
    inset 0 1px rgba(255, 255, 255, .18);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.pc-button:hover {
  box-shadow:
    0 16px 34px rgba(8, 104, 73, .24),
    inset 0 1px rgba(255, 255, 255, .2);
}

.pc-hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  background:
    radial-gradient(circle at 76% 50%, rgba(57, 203, 150, .13), transparent 28rem),
    radial-gradient(circle at 18% 0, rgba(83, 201, 162, .08), transparent 24rem),
    linear-gradient(118deg, #062c22 0%, #063a2c 53%, #06454a 100%);
}

.pc-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image:
    linear-gradient(rgba(157, 232, 202, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 232, 202, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 72%);
}

.pc-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -48%;
  width: 72vw;
  height: 72vw;
  max-width: 1080px;
  max-height: 1080px;
  border: 1px solid rgba(121, 229, 187, .08);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(121, 229, 187, .025),
    0 0 0 180px rgba(121, 229, 187, .018);
  pointer-events: none;
}

.pc-eyebrow {
  color: #b7dfd0;
  font-weight: 650;
}

.pc-hero h1 {
  max-width: 800px;
  margin-block: 24px 22px;
  font-size: clamp(45px, 3.8vw, 58px);
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -.06em;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .16);
}

.pc-hero h1 > span {
  display: block;
}

.pc-hero h1 > span + span {
  margin-top: .08em;
}

.pc-hero h1 em {
  color: #73e4b7;
  background: linear-gradient(92deg, #6fe1b3, #a3f2d3 72%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pc-hero__copy > p {
  max-width: 660px;
  color: #c4d9d0;
  font-size: 17px;
  line-height: 1.85;
}

.pc-hero dl {
  position: relative;
  gap: 0;
  width: fit-content;
  margin-top: 38px;
  padding: 14px 0;
}

.pc-hero dl div {
  position: relative;
  min-width: 150px;
  padding: 0 24px;
}

.pc-hero dl div:first-child {
  padding-left: 0;
}

.pc-hero dl div + div::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(143, 218, 188, .28), transparent);
}

.pc-hero dt {
  font-size: 14px;
}

.pc-hero dd {
  color: #94b2a6;
  font-size: 12px;
}

.pc-hero__visual::before {
  border-color: rgba(132, 235, 195, .2);
  box-shadow:
    0 0 0 52px rgba(103, 217, 173, .025),
    0 0 80px rgba(55, 203, 148, .08);
}

.pc-hero__visual::after {
  border-color: rgba(132, 235, 195, .18);
}

.pc-hero__orb {
  background:
    radial-gradient(circle at 36% 30%, #29ad7f, #087053 55%, #043a30);
  box-shadow:
    0 0 90px rgba(42, 218, 154, .28),
    inset 0 0 42px rgba(255, 255, 255, .09);
}

.pc-proof {
  border-color: rgba(164, 235, 206, .24);
  background:
    linear-gradient(135deg, rgba(17, 75, 59, .82), rgba(6, 48, 39, .72));
  box-shadow:
    0 20px 42px rgba(0, 0, 0, .2),
    inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px) saturate(1.1);
}

.pc-quick-trace {
  border-color: rgba(25, 95, 69, .15);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 251, 249, .96));
  box-shadow:
    0 28px 70px rgba(20, 72, 53, .13),
    0 1px 0 rgba(255, 255, 255, .9) inset;
}

.pc-role-card,
.pc-trust-chain li {
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.pc-role-card:hover,
.pc-role-card:focus-visible,
.pc-trust-chain li:hover {
  border-color: color-mix(in srgb, var(--pc-accent, #16805e) 46%, #dbe7e0);
  box-shadow: 0 18px 42px rgba(18, 78, 56, .11);
  transform: translateY(-4px);
}

.pc-role-preview {
  border-color: rgba(26, 93, 68, .14);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pc-accent) 8%, transparent), transparent 25rem),
    linear-gradient(135deg, #fff, #f6faf8);
  box-shadow: var(--yw-premium-glow);
}

/* Authenticated workspace: stronger decision hierarchy and calmer supporting data. */
.app-shell--v3:not(.app-shell--public) .topbar {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8),
    0 8px 24px rgba(18, 66, 49, .035);
}

.app-shell--v3:not(.app-shell--public) .today-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(24, 91, 66, .14);
  background:
    radial-gradient(circle at 5% 0, rgba(61, 153, 117, .1), transparent 26rem),
    radial-gradient(circle at 92% 100%, rgba(178, 139, 60, .055), transparent 22rem),
    linear-gradient(135deg, #fff 0%, #fbfdfc 64%, #f7faf8 100%);
  box-shadow:
    0 1px 2px rgba(17, 46, 36, .035),
    0 24px 62px rgba(17, 60, 44, .09);
}

.app-shell--v3:not(.app-shell--public) .today-overview::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1f7659, #5fc297 62%, #c4a25a);
}

.app-shell--v3:not(.app-shell--public) .today-overview h1 {
  max-width: 920px;
  font-size: clamp(34px, 2.85vw, 42px);
  font-weight: 790;
  line-height: 1.14;
  letter-spacing: -.045em;
}

.app-shell--v3:not(.app-shell--public) .today-priority {
  border-color: rgba(178, 139, 60, .22);
  background:
    radial-gradient(circle at 100% 0, rgba(184, 144, 62, .11), transparent 15rem),
    linear-gradient(145deg, #fcfaf5, #f8f5ed);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .9),
    0 10px 30px rgba(89, 71, 33, .055);
}

.app-shell--v3:not(.app-shell--public) .today-stat-grid article {
  position: relative;
  overflow: hidden;
}

.app-shell--v3:not(.app-shell--public) .today-stat-grid article::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(31, 109, 85, .5), transparent 72%);
  opacity: .55;
}

.app-shell--v3:not(.app-shell--public) :where(
  .today-stat-grid article,
  .today-task-panel,
  .today-quick-panel,
  .today-readiness-panel
) {
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.app-shell--v3:not(.app-shell--public) :where(
  .today-stat-grid article,
  .today-quick-panel,
  .today-readiness-panel
):hover {
  border-color: rgba(32, 112, 88, .24);
  box-shadow: 0 16px 36px rgba(17, 67, 50, .075);
  transform: translateY(-2px);
}

.app-shell--v3:not(.app-shell--public) .today-task-row {
  position: relative;
}

.app-shell--v3:not(.app-shell--public) .today-task-row::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: #2c8b69;
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity .18s ease, transform .18s ease;
}

.app-shell--v3:not(.app-shell--public) .today-task-row:hover::before,
.app-shell--v3:not(.app-shell--public) .today-task-row:focus-within::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Keep the PC safe fallback genuinely readable at phone width. */
@media (max-width: 560px) {
  .pc-hero {
    padding-top: 48px;
  }

  .pc-hero h1 {
    font-size: clamp(34px, 10.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -.055em;
  }

  .pc-hero h1 > span + span {
    margin-top: .12em;
  }

  .pc-hero__copy > p {
    font-size: 15px;
    line-height: 1.75;
  }

  .pc-hero dl {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .pc-hero dl div {
    min-width: 0;
    padding-inline: 14px;
  }

  .pc-hero dl div:first-child {
    padding-left: 0;
  }

  .pc-quick-trace > p,
  .pc-role-card small,
  .pc-role-card em,
  .pc-role-preview__intro > span,
  .pc-role-preview__content section > small {
    font-size: 12px;
  }

  .app-shell--v3:not(.app-shell--public) .pcfv-domain-boundary {
    gap: 7px 9px;
    padding: 11px 12px;
  }

  .app-shell--v3:not(.app-shell--public) .pcfv-domain-boundary > span,
  .app-shell--v3:not(.app-shell--public) .pcfv-domain-boundary > strong,
  .app-shell--v3:not(.app-shell--public) .pcfv-domain-boundary > p,
  .app-shell--v3:not(.app-shell--public) .today-overview__eyebrow :where(span, strong, small),
  .app-shell--v3:not(.app-shell--public) .today-priority > header > span,
  .app-shell--v3:not(.app-shell--public) .today-priority > footer small,
  .app-shell--v3:not(.app-shell--public) .today-priority > footer strong,
  .app-shell--v3:not(.app-shell--public) .today-stat-grid small,
  .app-shell--v3:not(.app-shell--public) .today-stat-grid p,
  .app-shell--v3:not(.app-shell--public) .today-task-panel > header p,
  .app-shell--v3:not(.app-shell--public) .today-task-row__state small,
  .app-shell--v3:not(.app-shell--public) .today-task-row__content :where(dt, dd),
  .app-shell--v3:not(.app-shell--public) .today-task-row__content p,
  .app-shell--v3:not(.app-shell--public) .today-task-row > a,
  .app-shell--v3:not(.app-shell--public) .today-quick-panel a strong,
  .app-shell--v3:not(.app-shell--public) .today-quick-panel a small,
  .app-shell--v3:not(.app-shell--public) .today-readiness-panel li strong,
  .app-shell--v3:not(.app-shell--public) .today-evidence-brief :where(small, p) {
    font-size: 12px;
    line-height: 1.55;
  }

  .app-shell--v3:not(.app-shell--public) .today-overview {
    padding: 22px 16px;
  }

  .app-shell--v3:not(.app-shell--public) .today-overview h1 {
    font-size: clamp(28px, 8.2vw, 32px);
    line-height: 1.16;
  }

  .app-shell--v3:not(.app-shell--public) .today-overview__actions .btn {
    min-height: 46px;
    font-size: 13px;
  }

  .app-shell--v3:not(.app-shell--public) .today-priority {
    padding: 18px;
  }

  .app-shell--v3:not(.app-shell--public) .today-priority h2 {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-header nav button::after,
  .pc-button,
  .pc-role-card,
  .pc-trust-chain li,
  .app-shell--v3:not(.app-shell--public) .today-task-row::before,
  .app-shell--v3:not(.app-shell--public) :where(
    .today-stat-grid article,
    .today-quick-panel,
    .today-readiness-panel
  ) {
    transition: none;
  }
}