/* T8 spec change -- the invocation pair. New file; do not fold into app.css
   until the file owner takes it. Tokens come from app.css (:root), so light
   and dark both work with no second copy, on screen and nowhere else --
   the PDF draws its own colours (see out/T8_WIRING.md).

   Two panels, one drawing language:
     .l365-inv-open   Ganesha, TOP of the reading -- the undertaking begins
     .l365-inv-close  Shiva, END of the reading -- thanks and attribution */

.l365-inv{text-align:center}
.l365-inv-art{color:var(--brass);margin:4px auto 12px}
.l365-inv-art svg{width:88px;height:88px;display:block;margin:0 auto}
.l365-inv-close .l365-inv-art svg{width:118px;height:118px}
.l365-inv h2{margin-bottom:4px}
.l365-inv .l365-lede{max-width:62ch;margin:0 auto 12px;color:var(--body)}
.l365-inv .src{max-width:62ch;margin:0 auto 6px}
/* the three-lineage attribution reads as body text, not as a warning */
.l365-inv .l365-lineage{max-width:62ch;margin:0 auto 10px;color:var(--body);font-size:14.5px}
/* the quiet motif strip: kundli square, nine padas, a numeral */
.l365-motifs{color:var(--faint);margin:14px auto 10px}
.l365-motifs svg{width:150px;height:26px;display:block;margin:0 auto}
/* opening panel is a doorway, not a chapter: keep it lighter than a card */
.l365-inv-open{border-bottom:1px solid var(--hair);padding-bottom:18px;margin-bottom:20px}
.l365-inv-open .l365-inv-art svg{width:72px;height:72px}
.l365-inv-close{border-top:1px solid var(--hair);margin-top:22px;padding-top:20px}

/* ---------------------------------------------------------------------------
   THE LAST SCREEN OF THE APP -- .l365-bye

   Distinct from .l365-inv-close above, which ends the READING. This ends the
   visit, and until now it was an 88px mark, a heading and a message box inside
   a card. The founder asked for the final page to thank the customer and to
   honour Shiva "directly or indirectly with artistic way".

   So this one is deliberately NOT a card. A card says "here is another module
   of the app"; the last thing a reader sees should say "we are finished". No
   border, no panel, no shadow -- just centred artwork on the page ground with
   room around it. It is the only screen in the product that gets to be quiet.

   The aureole is generated geometry (see closing_panel.js), so it stays crisp
   at any size and its three layers are tinted separately below: petals read,
   rays sit back, and the inner rings are barely there. If all three were the
   same weight it would read as a logo instead of light.
   --------------------------------------------------------------------------- */
.l365-bye{text-align:center;padding:8px 0 28px}
.l365-bye-art{color:var(--brass);margin:0 auto 6px}
.l365-aureole{display:block;margin:0 auto;width:min(300px,72vw);height:auto}
/* three tints, one colour: the figure is the subject, the ring is the light */
.l365-aureole .l365-petal{opacity:.55}
.l365-aureole .l365-hair{opacity:.35}
.l365-aureole .l365-ray{opacity:.3}
.l365-aureole .l365-glow{opacity:.13}

/* Serif at display size, once. This is the only place in the app that gets a
   display line, which is what makes it register as an ending rather than as
   one more heading in the same voice as the previous forty screens. */
.l365-bye-h{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-weight:400;font-size:clamp(26px,6.4vw,34px);line-height:1.2;
  letter-spacing:.01em;margin:2px auto 12px;color:var(--ink);
}
.l365-bye-p{max-width:46ch;margin:0 auto 14px;color:var(--body);line-height:1.62}
/* the limit statement, held apart by a brass hairline rather than a box: it is
   a promise about our restraint, not a warning about a risk, and a bordered
   callout would make it read as the latter */
.l365-bye-q{
  max-width:44ch;margin:16px auto 4px;padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--brass) 60%,transparent);
  color:var(--faint);font-size:14px;line-height:1.6;
}
/* the server's word on the report stays a plain status line -- dressing this up
   is how a failure gets mistaken for a success */
.l365-bye-status{max-width:46ch;margin:0 auto 4px;text-align:left}

/* THE FEEDBACK ASK. It is on this screen because the whole reason for the
   internal round is to capture it, and a rating that needs one more navigation
   is a rating we do not get. Visually it is separated from the thanks -- a
   sunk panel, left-aligned, plainly a form -- so that being asked for feedback
   does not feel like part of the ceremony above it. */
.l365-bye-fb{
  max-width:46ch;margin:26px auto 0;padding:18px 18px 16px;text-align:left;
  background:var(--sunk);border:1px solid var(--hair);border-radius:14px;
}
.l365-bye-fb h2{margin:0 0 4px;font-size:17px}
.l365-bye-fb .note{margin:0 0 12px}
.l365-bye-fb textarea{width:100%;min-height:84px;margin:4px 0 12px}
.l365-bye-fb .chips{margin-bottom:6px}
.l365-bye-fb .okbox{margin:12px 0 0}

.l365-bye-foot{margin-top:30px;color:var(--faint)}
.l365-bye-foot svg{width:132px;height:23px;display:block;margin:0 auto 8px;opacity:.7}
.l365-bye-foot p{margin:0;font-size:13px;letter-spacing:.02em}

/* Dark mode needs the artwork lifted, not recoloured: --brass is already a
   warmer, lighter gold there, so only the near-invisible layers need help --
   at .13 on a dark ground the inner rings vanish completely. */
[data-theme="dark"] .l365-aureole .l365-glow{opacity:.2}
[data-theme="dark"] .l365-aureole .l365-ray{opacity:.4}

@media (max-width:420px){
  .l365-bye{padding-top:0}
  .l365-bye-fb{padding:15px 14px 13px}
}