/* ============================================================================
   privacy-modal.css  Privacy Policy reader (sign-in page + app footer)
   Content comes from privacy-policy.html (single source); only the layout lives here.
   ============================================================================ */
#privacyPolicyModal {
    position: fixed; inset: 0; z-index: 10500; background: rgba(20, 30, 25, 0.55);
    display: none; align-items: center; justify-content: center; padding: 16px;
}
#privacyPolicyModal.ppm-open { display: flex; }

.ppm-shell {
    width: 80vw; height: 86vh; background: #fff; border-radius: 16px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    font-family: 'Futura PT', 'Jost', 'Century Gothic', sans-serif; color: #231F20;
}

.ppm-head {
    display: flex; align-items: center; gap: 16px; padding: 18px 24px;
    background: #F4F0E9; border-bottom: 1px solid #E8DFD0;
}
.ppm-head-icon {
    flex: 0 0 44px; height: 44px; border-radius: 12px; background: #1E6332; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ppm-head-text { flex: 1; min-width: 0; }
.ppm-title { margin: 0; font-size: 1.3rem; font-weight: 600; color: #1E6332; line-height: 1.2; }
.ppm-sub { margin: 2px 0 0; font-size: 13px; color: #475453; }
.ppm-head-actions { display: flex; align-items: center; gap: 8px; }
.ppm-btn {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E8DFD0; background: #fff;
    color: #214A3E; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.ppm-btn:hover { border-color: #1E6332; color: #1E6332; }
.ppm-close {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E8DFD0; background: #fff;
    color: #475453; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ppm-close:hover { background: #1E6332; border-color: #1E6332; color: #fff; }
.ppm-btn:focus-visible, .ppm-close:focus-visible, .ppm-nav a:focus-visible { outline: 2px solid #1E6332; outline-offset: 2px; }

.ppm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; }

/* Section list */
.ppm-nav {
    border-right: 1px solid #efeae2; background: #fbfaf7; padding: 20px 14px; overflow-y: auto;
}
.ppm-nav-label { font-size: 12px; font-weight: 600; color: #6b7280; margin: 0 10px 10px; }
.ppm-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: ppm; }
.ppm-nav li { counter-increment: ppm; }
.ppm-nav a {
    display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 8px;
    color: #475453; font-size: 14px; text-decoration: none; line-height: 1.35;
}
.ppm-nav a::before { content: counter(ppm); flex: 0 0 18px; font-size: 12px; font-weight: 600; color: #9ca3af; font-variant-numeric: tabular-nums; }
.ppm-nav a:hover { background: #F4F0E9; color: #214A3E; }
.ppm-nav a.ppm-on { background: #e7f0ea; color: #1E6332; font-weight: 600; }
.ppm-nav a.ppm-on::before { color: #1E6332; }
.ppm-nav-foot { margin: 18px 10px 0; padding-top: 14px; border-top: 1px solid #efeae2; font-size: 12px; color: #6b7280; line-height: 1.5; }

/* Reading column */
.ppm-main { overflow-y: auto; scroll-behavior: smooth; padding: 28px 48px 48px; }
.ppm-doc { max-width: 760px; }
.ppm-intro { font-size: 16px; line-height: 1.7; color: #231F20; margin: 0 0 28px; padding: 18px 20px; background: #F4F0E9; border-radius: 12px; }
.ppm-doc section { padding: 8px 0 26px; border-bottom: 1px solid #efeae2; margin-bottom: 22px; scroll-margin-top: 16px; }
.ppm-doc section:last-of-type { border-bottom: 0; }
.ppm-doc h2 { font-size: 1.2rem; font-weight: 600; color: #1E6332; margin: 0 0 12px; }
.ppm-doc h3 { font-size: 1rem; font-weight: 600; color: #214A3E; margin: 18px 0 6px; }
.ppm-doc p, .ppm-doc li { font-size: 15px; line-height: 1.7; color: #3d3a37; }
.ppm-doc ul { padding-left: 20px; }
.ppm-doc a { color: #1E6332; font-weight: 500; }
.ppm-doc .pp-highlight {
    border-left: 4px solid #C19A6B; background: #fbf7f0; border-radius: 0 10px 10px 0;
    padding: 12px 16px; margin: 14px 0; font-size: 14px;
}
.ppm-doc .pp-contact-card {
    border: 1px solid #E8DFD0; border-radius: 12px; padding: 16px 18px; background: #fff; margin-top: 12px;
}
.ppm-loading { padding: 60px 20px; text-align: center; color: #6b7280; }

@media (max-width: 900px) {
    .ppm-shell { width: 100%; height: 92vh; }
    .ppm-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .ppm-nav { border-right: 0; border-bottom: 1px solid #efeae2; padding: 10px; overflow-x: auto; }
    .ppm-nav-label, .ppm-nav-foot { display: none; }
    .ppm-nav ol { display: flex; gap: 6px; }
    .ppm-nav a { white-space: nowrap; padding: 7px 10px; font-size: 13px; }
    .ppm-main { padding: 20px 18px 32px; }
    .ppm-head { padding: 14px 16px; }
    .ppm-btn-label { display: none; }
}