/* Build 006D — Calm Navigation & Living Greeting */

body.living-greeting-open{overflow:hidden}

.living-greeting-experience{
  position:fixed;
  inset:0;
  z-index:220;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,36px);
  pointer-events:none;
  visibility:hidden;
}

.living-greeting-experience.open{
  pointer-events:auto;
  visibility:visible;
}

.living-greeting-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 42%),
    rgba(2,9,12,.84);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .45s ease;
}

.living-greeting-experience.open .living-greeting-backdrop{opacity:1}
.living-greeting-experience.leaving .living-greeting-backdrop{opacity:0}

.living-greeting-shell{
  position:relative;
  width:min(760px,96vw);
  max-height:min(860px,92vh);
  overflow:auto;
  display:grid;
  gap:clamp(16px,2vw,24px);
  padding:clamp(22px,4vw,42px);
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:28px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--solid) 96%,var(--accent) 4%),
      color-mix(in srgb,var(--bg) 96%,transparent)
    );
  box-shadow:0 38px 110px rgba(0,0,0,.38);
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.8,.28,1);
}

.living-greeting-experience.open .living-greeting-shell{
  opacity:1;
  transform:translateY(0) scale(1);
}

.living-greeting-experience.leaving .living-greeting-shell{
  opacity:0;
  transform:translateY(-10px) scale(.99);
}

.living-greeting-header{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:var(--space-l);
  align-items:center;
}

.living-greeting-symbol{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:20px;
  background:color-mix(in srgb,var(--accent) 11%,var(--solid));
  font-size:30px;
}

.living-greeting-header small{
  color:var(--accent);
  letter-spacing:.08em;
}

.living-greeting-header h1{
  margin:4px 0;
  font-size:clamp(30px,5vw,48px);
}

.living-greeting-header p{
  margin:0;
  color:var(--muted);
  font-size:16px;
}

.living-greeting-calm{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:var(--space-m);
  align-items:center;
  padding:var(--space-l);
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:18px;
  background:color-mix(in srgb,var(--accent) 7%,var(--solid));
}

.living-greeting-calm>span{font-size:25px}
.living-greeting-calm strong,.living-greeting-calm small{display:block}
.living-greeting-calm small{margin-top:4px;color:var(--muted)}

.living-greeting-items{
  display:grid;
  gap:10px;
}

.living-greeting-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:var(--space-m);
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--solid);
}

.living-greeting-item.attention{
  border-color:color-mix(in srgb,#e5c96d 42%,var(--line));
  background:color-mix(in srgb,#e5c96d 5%,var(--solid));
}

.living-greeting-item>span{font-size:22px}
.living-greeting-item small,.living-greeting-item strong,.living-greeting-item p{display:block}
.living-greeting-item small{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.06em}
.living-greeting-item strong{margin-top:3px}
.living-greeting-item p{margin:4px 0 0;color:var(--muted)}

.living-greeting-footer{
  display:flex;
  justify-content:space-between;
  gap:var(--space-l);
  align-items:center;
  padding-top:var(--space-s);
}

.living-greeting-footer p{
  margin:0;
  color:var(--muted);
}

.living-greeting-footer>div{
  display:flex;
  gap:var(--space-s);
}

.living-greeting-progress{
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--line) 72%,transparent);
}

.living-greeting-progress>span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--accent);
}

.symbol-living-greeting svg,
.symbol-silence-default svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:640px){
  .living-greeting-shell{
    max-height:96vh;
    padding:20px;
    border-radius:22px;
  }

  .living-greeting-header{
    grid-template-columns:50px minmax(0,1fr);
  }

  .living-greeting-symbol{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:24px;
  }

  .living-greeting-item{
    grid-template-columns:36px minmax(0,1fr);
  }

  .living-greeting-item .quiet-text-button{
    grid-column:2;
    justify-self:start;
  }

  .living-greeting-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .living-greeting-footer>div{
    display:grid;
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .living-greeting-backdrop,
  .living-greeting-shell,
  .living-greeting-progress>span{
    transition:none!important;
  }
}