/* The Lunar Cycle Report plate. Shared by the free analysis result
   and the subscriber's Lunar Cycle view. Paper on the night shell, in the
   Forecast's own language: gilt rule, its legend, its type tints.
   Requires site.css for the tokens. Rendered by analysis-plate.js. */
.la { --ink3:#6f6a86;   /* the plate's own small-text grey: darker than the site's, for paper */
  background:var(--panel); color:var(--ink); border-radius:12px; padding:clamp(22px, 3.4vw, 44px) clamp(18px, 3.6vw, 48px) 34px;
  max-width:1100px; margin:40px auto 0;
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px var(--edge-soft), 0 0 120px rgba(125,90,196,0.14); }
.la .head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.la .brand { font-family:var(--wordmark); font-weight:500; font-size:11px; letter-spacing:0.34em; text-transform:uppercase; color:var(--paper-gilt); }
.la h1 { font-family:var(--display); font-weight:400; font-size:clamp(32px, 3.4vw, 44px); line-height:1; color:var(--ink); margin:6px 0 0; }
.la .who { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; }
.la .verdict { font-family:var(--display); font-style:italic; font-size:16.5px; color:var(--ink2); }
.la .made { display:flex; align-items:baseline; justify-content:flex-end; gap:10px; margin-top:2px; }
.la .made i { font-family:var(--label); font-style:normal; font-weight:300; font-size:10px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--ink3); }
.la .made b { font-family:var(--display); font-weight:500; font-size:26px; line-height:1; letter-spacing:0.01em;
  text-transform:none; color:var(--ink); }
.la .born { font-family:var(--display); font-style:italic; font-size:13.5px; color:var(--ink3); margin-top:6px; }
.gilt-rule { height:1px; background:linear-gradient(90deg, rgba(201,164,92,0) 0%, #c9a45c 50%, rgba(201,164,92,0) 100%); margin:18px 0 22px; }

.key { display:flex; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink2);
  margin-top:16px; padding:13px 2px; border-top:1px solid var(--paper-edge); border-bottom:1px solid var(--paper-edge); }
.key span { flex:0 1 auto; }
.key span { display:flex; align-items:center; gap:7px; }
.key b { color:var(--ink); font-weight:600; }
.key .sw { display:inline-block; width:15px; height:15px; border-radius:2px; }

.la .label { font-family:var(--label); font-weight:300; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--paper-gilt); margin-top:36px; }
.la .label-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:36px; }
.la .label-row .label { margin-top:0; }
.la .aside { font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink2); }
.la .cap { font-size:13.5px; line-height:1.55; color:var(--ink3); margin-top:12px; }

.dist { display:grid; grid-template-columns:320px minmax(0, 1fr); gap:56px; align-items:center; margin-top:18px; }
.dist svg { display:block; overflow:visible; width:320px; max-width:100%; height:auto; }
.legend > div { padding:14px 0; border-bottom:1px solid var(--paper-edge); }
.legend > div:last-child { border-bottom:none; }
.legend .row { display:grid; grid-template-columns:16px 1fr auto 70px; gap:0 16px; align-items:center; }
.legend .row .name { font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink); }
.legend .row .days { font-size:13.5px; color:var(--ink3); letter-spacing:0.04em; white-space:nowrap; }
.legend .row .pct { font-family:var(--display); font-weight:600; font-size:24px; color:var(--ink); text-align:right; }
.legend .zero .name, .legend .zero .pct { color:var(--ink3); }
.legend .sub { display:grid; grid-template-columns:16px 1fr auto 70px; gap:0 16px; align-items:center; margin-top:6px; padding-left:16px; }
.legend .sub .tick { justify-self:end; width:6px; height:1px; background:var(--ink3); opacity:0.6; }
.legend .sub .name { font-family:var(--display); font-size:15.5px; color:var(--ink2); }
.legend .sub .days { font-size:13px; color:var(--ink3); }
.legend .sub .never { grid-column:2 / -1; font-family:var(--display); font-style:italic; font-size:14px; color:var(--ink3); }
.legend .sq { width:13px; height:13px; }

.cycle { display:grid; grid-template-columns:repeat(14, minmax(0, 1fr)); gap:6px; margin-top:14px; }
.cycle > div { min-height:52px; border-radius:6px; font-family:var(--display); font-size:13px; padding:5px 7px; border:1px solid; }
.cycle .open { background:rgba(253,249,239,0.4); border-color:#e6dcc4; color:var(--ink3); display:flex; flex-direction:column; justify-content:space-between; }
.cycle .open small { font-family:var(--label); font-weight:400; font-size:8px; letter-spacing:0.18em; color:var(--t-reflector); }
.cycle .Projector { background:rgba(47,155,128,0.22); border-color:rgba(47,155,128,0.5); color:var(--t-projector-deep); }
.cycle .Generator { background:rgba(58,114,196,0.22); border-color:rgba(58,114,196,0.5); color:var(--t-generator-deep); }
.cycle .Manifestor { background:rgba(214,51,132,0.22); border-color:rgba(214,51,132,0.5); color:var(--t-manifestor-deep); }
.cycle .ManifestingGenerator { background:linear-gradient(135deg, rgba(214,51,132,0.22) 0%, rgba(58,114,196,0.22) 100%);
  border-color:rgba(124,86,168,0.5); color:#6d2f7a; }

.facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; margin-top:14px; }
.facts > div { font-family:var(--display); font-size:18px; line-height:1.4; color:var(--ink); border-top:1px solid var(--paper-gilt); padding-top:12px; }

.close { display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:44px; padding-top:32px; border-top:1px solid var(--paper-edge); }
.close .shape { font-family:var(--display); font-style:italic; font-size:21px; line-height:1.4; color:var(--ink); max-width:520px; }
.close .sub { font-size:14.5px; color:var(--ink2); margin-top:10px; max-width:520px; }
.close .btn { background:var(--ink); color:var(--panel); margin-top:22px; padding:16px 34px; }
.close .btn:hover { background:var(--t-reflector); color:var(--panel); }
.close .fine { font-size:13px; color:var(--ink3); margin-top:10px; }
.close .other { max-width:560px; font-size:14.5px; color:var(--ink2); text-align:left; background:var(--paper); border:1px solid var(--paper-edge); border-radius:12px; padding:22px; }
.close .other h3 { font-family:var(--display); font-size:22px; color:var(--ink); font-weight:600; margin-bottom:8px; }
.close .other p + p { margin-top:12px; }

@media (max-width: 900px) {
  .dist { grid-template-columns:minmax(0, 1fr); gap:20px; justify-items:center; }
  .legend { width:100%; }
  .cycle { grid-template-columns:repeat(7, minmax(0, 1fr)); }
  .facts { grid-template-columns:minmax(0, 1fr); }
  .la .who { align-items:flex-start; text-align:left; }
  .la .made { justify-content:flex-start; }
  .key { gap:10px 18px; font-size:12.5px; }
}
@media (max-width: 560px) {
  .legend .row, .legend .sub { grid-template-columns:16px 1fr 60px; }
  .legend .row .days, .legend .sub .days { display:none; }
  .legend .row .name { font-size:19px; }
  .legend .row .pct { font-size:21px; }
}

/* Reveal, used by the free analysis when the result lands. The plate rises,
   then the wedges, legend, cycle cells and facts arrive in order. Pages that
   do not add .reveal (the account) show the plate at rest. */
.la.reveal { animation:la-rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes la-rise { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:none } }
.la.reveal .wedge { transform-origin:0 0; transform-box:view-box; animation:la-wedge 0.7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(0.35s + var(--i, 0) * 0.16s); }
@keyframes la-wedge { from { opacity:0; transform:scale(0.55) } to { opacity:1; transform:none } }
.la.reveal .dist text { animation:la-fade 0.6s ease both; animation-delay:1.1s; }
.la.reveal .legend > div { animation:la-fade 0.6s ease both; animation-delay:calc(0.5s + var(--i, 0) * 0.14s); }
.la.reveal .cycle > div { animation:la-pop 0.45s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(1.2s + var(--i, 0) * 0.035s); }
@keyframes la-pop { from { opacity:0; transform:scale(0.7) } to { opacity:1; transform:none } }
.la.reveal .facts > div { animation:la-fade 0.7s ease both; animation-delay:calc(2.1s + var(--i, 0) * 0.2s); }
.la.reveal .close { animation:la-fade 0.8s ease both; animation-delay:2.8s; }
@keyframes la-fade { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) { .la.reveal, .la.reveal * { animation:none !important; } }