/* Sign out is a button because it changes state, styled to sit in the nav
   beside the links rather than announcing itself as a form control. */
.tz-signout { background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:#a3957a; }
.tz-signout:hover { color:#f0dcae; text-decoration:underline; }

/* A reader's portrait. Round, bordered in their accent, and the same box
   the glyph occupies so the byline does not shift when art lands. */
.tz-byline-face { width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:1.5px solid; flex:0 0 auto; }
.tz-byline.small .tz-byline-face { width:30px; height:30px; }
.tz-reader-btn .face { width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:1.5px solid; flex:0 0 auto; }

/* The reader's byline. Quiet — it names who is speaking, it is not a logo. */
.tz-byline { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.tz-byline.small { margin:0 0 8px; }
.tz-byline-glyph { font-size:24px; line-height:1; }
.tz-byline.small .tz-byline-glyph { font-size:17px; }
.tz-byline-text b { display:block; font-size:15px; color:#f0dcae; font-weight:600; }
.tz-byline.small .tz-byline-text b { font-size:13.5px; }
.tz-byline-tag { display:block; font-size:12.5px; color:#a3957a; }

/* The reader picker. */
.tz-readers { display:grid; gap:9px; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); }
.tz-reader-btn { display:flex; align-items:center; gap:9px; text-align:left;
  background:#171208; border:1px solid #3d3020; border-radius:10px; padding:10px 12px;
  color:#e8dcc0; cursor:pointer; font:inherit; }
.tz-reader-btn:hover { border-color:#8a6a3a; }
.tz-reader-btn.on { border-color:#b08968; background:#1d1710; }
.tz-reader-btn .g { font-size:20px; line-height:1; }
.tz-reader-btn b { display:block; font-size:14px; }
.tz-reader-btn span.t { display:block; font-size:12px; color:#a3957a; }

.tz-card-pos-name { display:block; font-size:11px; letter-spacing:.6px;
  text-transform:uppercase; color:#b59a68; margin-bottom:2px; }

/* Spread geometry. The Horseshoe's arc and the Celtic Cross's
   cross-and-staff are most of why someone chooses them, so they are laid
   out rather than lined up. Both collapse to a plain wrap on narrow
   screens, where a ten-card cross does not fit at any useful size. */
.tz-spread-head { margin:0 0 4px; font-size:13px; color:#a3957a; letter-spacing:.4px; }

.tz-cards.layout-horseshoe { display:grid; grid-template-columns:repeat(7, 1fr);
  align-items:end; gap:10px; }
.tz-cards.layout-horseshoe > :nth-child(1),
.tz-cards.layout-horseshoe > :nth-child(7) { margin-bottom:46px; }
.tz-cards.layout-horseshoe > :nth-child(2),
.tz-cards.layout-horseshoe > :nth-child(6) { margin-bottom:24px; }
.tz-cards.layout-horseshoe > :nth-child(3),
.tz-cards.layout-horseshoe > :nth-child(5) { margin-bottom:8px; }

.tz-cards.layout-cross { display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; justify-items:center; }

/* Celtic Cross: a 4-column grid. Columns 1-3 hold the cross, column 4 is
   the staff, read bottom to top. Card 2 sits ON card 1 in a physical
   spread; here it sits beside it, because overlapping would hide one of
   them on a screen. */
.tz-cards.layout-celtic { display:grid; gap:10px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-template-areas:
    ".  c5 .  c10"
    "c4 c1 c6 c9"
    ".  c2 .  c8"
    ".  c3 .  c7"; }
.tz-cards.layout-celtic > :nth-child(1) { grid-area:c1; }
.tz-cards.layout-celtic > :nth-child(2) { grid-area:c2; }
.tz-cards.layout-celtic > :nth-child(3) { grid-area:c3; }
.tz-cards.layout-celtic > :nth-child(4) { grid-area:c4; }
.tz-cards.layout-celtic > :nth-child(5) { grid-area:c5; }
.tz-cards.layout-celtic > :nth-child(6) { grid-area:c6; }
.tz-cards.layout-celtic > :nth-child(7) { grid-area:c7; }
.tz-cards.layout-celtic > :nth-child(8) { grid-area:c8; }
.tz-cards.layout-celtic > :nth-child(9) { grid-area:c9; }
.tz-cards.layout-celtic > :nth-child(10) { grid-area:c10; }

@media (max-width: 820px) {
  .tz-cards.layout-horseshoe, .tz-cards.layout-cross, .tz-cards.layout-celtic {
    display:flex; flex-wrap:wrap; grid-template-areas:none; }
  .tz-cards.layout-horseshoe > * { margin-bottom:0 !important; }
}

/* The spread picker on the home page. */
.tz-spreads { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  margin:0 0 14px; }
.tz-spread-btn { text-align:left; background:#171208; border:1px solid #3d3020;
  border-radius:11px; padding:12px 14px; color:#e8dcc0; cursor:pointer; font:inherit; }
.tz-spread-btn:hover { border-color:#8a6a3a; background:#1d1710; }
.tz-spread-btn b { display:block; font-size:15px; margin-bottom:3px; }
.tz-spread-btn span { display:block; font-size:12.5px; color:#a3957a; line-height:1.45; }
.tz-spread-btn em { font-style:normal; color:#b59a68; }

.tz-convo-cards { margin:0 0 10px; }
.tz-convo-drew { margin:0 0 7px; font-size:12px; color:#8a7d66; letter-spacing:.3px; }
.tz-convo-draw { margin:10px 0 0; font-size:13px; color:#a3957a; }
.tz-convo-draw select { margin-left:6px; background:#120e08; color:#e8dcc0;
  border:1px solid #4a3a22; border-radius:7px; padding:4px 8px; }

/* The conversation under a reading. Indented and quieter than the reading
   itself, so the reading stays the main event. */
.tz-convo { margin:26px 0 0; padding-top:20px; border-top:1px solid #2a2015; }
.tz-convo h2 { font-size:17px; margin:0 0 14px; }
.tz-convo-item { margin:0 0 20px; padding-left:14px; border-left:2px solid #3a2d1c; }
.tz-convo-q { margin:0 0 8px; font-size:16px; color:#f0dcae; font-weight:600; }
.tz-convo-a { font-size:15px; }
.tz-convo-wait { display:flex; align-items:center; gap:9px; font-size:14px; color:#a3957a; }
.tz-convo-err { font-size:14px; color:#f2a9a9; }
.tz-convo-count { margin-left:10px; font-size:13px; color:#8a7d66; }
.tz-convo-full { font-size:14px; color:#a3957a; }

/* The translation-review banner. Visible, not alarming: it is a provenance
   statement, not an error. */
.tz-review { margin:0 0 16px; padding:9px 13px; border-radius:9px;
  background:#191308; border:1px solid #4a3a22; color:#c0ae8a; font-size:13px; }

/* The crisis panel. Deliberately the most prominent thing on the page when
   it appears: warm rather than alarming, but impossible to scroll past. */
.tz-help { border:1px solid #8a6a3a; background:#1d1710; border-radius:14px;
  padding:18px 20px; margin:0 0 22px; }
.tz-help h2 { margin:0 0 6px; font-size:18px; color:#f0d9a8; }
.tz-help-lede { margin:0 0 12px; color:#d8c9ad; font-size:15px; line-height:1.5; }
.tz-help-em { margin:0 0 12px; color:#ffd9a0; font-size:15px; }
.tz-help-line { border-top:1px solid #4a3a22; padding-top:12px; margin-bottom:12px; }
.tz-help-name { font-size:14px; color:#c8b893; }
.tz-help-num { display:inline-block; margin:4px 0 2px; font-size:26px;
  font-weight:700; color:#ffe9bd; text-decoration:none; letter-spacing:.5px; }
.tz-help-num:hover { text-decoration:underline; }
.tz-help-meta { font-size:13px; color:#a3957a; display:flex; gap:12px; flex-wrap:wrap; }
.tz-help-dir { margin:0 0 10px; font-size:14px; color:#c8b893; }
.tz-help-dir a { color:#ffd9a0; }
.tz-help-cc { font-size:13px; color:#a3957a; }
.tz-help-cc select { margin-left:6px; background:#120e08; color:#e8dcc0;
  border:1px solid #4a3a22; border-radius:7px; padding:4px 8px; }

/* SCROLL FIX, scoped to tarot pages: the shared pfmos.css sets
   html,body{height:100%;overflow:hidden}, which locked long readings.
   This re-enables scrolling and only loads on tarot pages. */
html, body { height: auto !important; min-height: 100% !important;
  overflow-x: hidden !important; overflow-y: auto !important; }

:root{--bg:#0e0b1a;--bg2:#171233;--bg3:#1d1740;--ink:#efeaff;--muted:#a79fce;
  --line:#2d2650;--gold:#e8c46b;--gold2:#c79a3b;--ok:#6ee7a8;--warn:#f0a86b;
  --run:#7db2ff;--err:#f08a8a;--rev:#f0a86b}
*{box-sizing:border-box}
.tz{min-height:100vh;background:
  radial-gradient(1200px 600px at 70% -10%,#231a4d 0,transparent 60%),
  radial-gradient(900px 500px at 10% 110%,#1a2347 0,transparent 55%),var(--bg);
  color:var(--ink);font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:0 18px 96px}
.tz a{color:inherit;text-decoration:none}
.tz code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;color:var(--gold)}
.tz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:900px;
  margin:0 auto;padding:22px 2px 14px;flex-wrap:wrap}
.tz-brand{font-size:23px;font-weight:800;letter-spacing:.3px}
.tz-moon{color:var(--gold)}
.tz-nav{display:flex;gap:4px}
.tz-nav a{padding:8px 15px;border-radius:999px;color:var(--muted);font-weight:600;font-size:15px}
.tz-nav a.on,.tz-nav a:hover{background:var(--bg2);color:var(--ink)}
.tz-main{max-width:900px;margin:0 auto}
.tz-flash{max-width:900px;margin:0 auto 12px;padding:11px 15px;border-radius:10px;font-weight:600}
.tz-flash-ok{background:#143a2b;color:var(--ok);border:1px solid #1f5a42}
.tz-flash-err{background:#3a1420;color:var(--err);border:1px solid #5a1f2f}
.tz-foot{max-width:900px;margin:52px auto 0;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.75}
/* headings — clear hierarchy, no overlap */
.tz h1{font-size:30px;font-weight:800;letter-spacing:.2px;margin:18px 0 6px;line-height:1.25}
.tz h2{font-size:22px;font-weight:700;margin:26px 0 10px;line-height:1.3}
.tz .lede{color:var(--muted);font-size:16px;margin:0 0 18px;max-width:620px}
/* buttons — legible, high contrast */
.tz-btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;
  padding:11px 20px;border-radius:11px;background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#241900}
.tz-btn:hover{filter:brightness(1.08)}
.tz-btn-ghost{background:transparent;border:1px solid #4a4280;color:var(--ink)}
.tz-btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.tz-btn:disabled{opacity:.5;cursor:default}
/* step card / panels */
.tz-panel{background:linear-gradient(180deg,var(--bg2),#120e28);border:1px solid var(--line);
  border-radius:16px;padding:22px 22px;margin:16px 0}
.tz-steps{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px;font-size:12.5px;color:var(--muted)}
.tz-step{padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg2)}
.tz-step.now{border-color:var(--gold2);color:var(--gold);font-weight:700}
.tz-step.done{color:var(--ok);border-color:#1f5a42}
/* count presets */
.tz-presets{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.tz-preset{min-width:64px;text-align:center;padding:14px 10px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);cursor:pointer;font-weight:700;font-size:18px}
.tz-preset:hover{border-color:var(--gold2)}
.tz-countrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.tz-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);font-weight:600}
.tz-field input,.tz-field textarea{font:inherit;color:var(--ink);background:var(--bg3);
  border:1px solid #3a3470;border-radius:10px;padding:11px 13px;min-width:120px}
.tz-field input:focus,.tz-field textarea:focus{outline:2px solid var(--gold2);border-color:var(--gold2)}
.tz-field textarea{min-width:min(560px,100%);width:100%;resize:vertical;line-height:1.5}
/* number chips */
.tz-nums{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0}
.tz-num{min-width:44px;text-align:center;padding:9px 12px;border-radius:10px;font-weight:700;
  font-family:ui-monospace,monospace;background:var(--bg3);border:1px solid #3a3470}
.tz-num.final{background:#2a2150;border-color:var(--gold2);color:var(--gold)}
.tz-arrow{color:var(--muted);text-align:center;margin:2px 0;font-size:13px}
/* cards grid */
.tz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:14px 0}
.tz-card{background:linear-gradient(180deg,#201842,#140f2d);border:1px solid var(--line);
  border-radius:14px;padding:12px;position:relative;display:flex;flex-direction:column;gap:8px}
.tz-card-pos{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);
  color:#241900;font-size:11px;font-weight:800;padding:3px 13px;border-radius:999px;white-space:nowrap;z-index:2}
.tz-card-img-wrap{border-radius:10px;overflow:hidden;aspect-ratio:330/554;background:#0b0820}
.tz-card-img{width:100%;height:100%;object-fit:cover;display:block}
.tz-card-img.flip{transform:rotate(180deg)}
.tz-card-cap{text-align:center;display:flex;flex-direction:column;gap:2px}
.tz-card-name{font-weight:700;font-size:14.5px}
.tz-card-orient{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.tz-card-orient.r{color:var(--rev)}
.tz-card-nums{font-size:11px;color:#6f67a0;font-family:ui-monospace,monospace}
/* reading */
.tz-reading{max-width:720px;margin:8px auto;font-size:17px;line-height:1.8}
.tz-reading h2{font-size:23px;color:var(--gold);margin:28px 0 10px}
.tz-reading h3{font-size:19px;color:var(--ink);margin:24px 0 8px}
.tz-reading h4{font-size:16px;color:var(--gold);margin:20px 0 6px;text-transform:none}
.tz-reading p{margin:0 0 15px}
.tz-reading ul{margin:0 0 15px;padding-left:22px}
.tz-reading li{margin:0 0 7px}
.tz-reading strong{color:#fff}
/* generating / status */
.tz-gen{display:flex;align-items:center;gap:12px;background:#15294d;border:1px solid #2a4a7d;
  color:var(--run);border-radius:12px;padding:14px 18px;font-weight:600;margin:14px 0}
.tz-dot{width:11px;height:11px;border-radius:50%;background:var(--run);animation:tzpulse 1s infinite alternate}
@keyframes tzpulse{to{opacity:.3}}
.tz-errbox{background:#3a1420;border:1px solid #5a1f2f;color:var(--err);border-radius:12px;
  padding:14px 18px;margin:14px 0;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.tz-badge{font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.tz-badge.ok{background:#143a2b;color:var(--ok)} .tz-badge.err{background:#3a1420;color:var(--err)}
.tz-badge.run{background:#15294d;color:var(--run)} .tz-badge.wait{background:#2a2545;color:var(--muted)}
/* deck grid */
.tz-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin:16px 0}
.tz-deck-card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.tz-deck-img{width:100%;border-radius:8px;display:block;aspect-ratio:330/554;object-fit:cover}
.tz-deck-card figcaption{font-size:12px;margin-top:7px;color:var(--muted)}
.tz-deck-sec{margin:24px 0 4px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
/* history */
.tz-hist{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:8px}
.tz-hist li{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 15px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tz-hist .id{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}
.tz-empty{color:var(--muted);text-align:center;padding:44px 0}
/* diagnostics (secondary) */
.tz-diag{margin:22px 0}
.tz-diag summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;padding:8px 0}
.tz-diag-body{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  font-size:12.5px;color:var(--muted);font-family:ui-monospace,monospace;overflow-x:auto}
.tz-diag-body div{margin:3px 0;word-break:break-all}
/* report widget */
.tz-report{position:fixed;right:18px;bottom:18px;z-index:50}
.tz-report-btn{list-style:none;cursor:pointer;background:var(--bg3);border:1px solid #4a4280;color:var(--ink);
  padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tz-report-btn::-webkit-details-marker{display:none}
.tz-report-form{position:absolute;right:0;bottom:52px;width:min(340px,86vw);background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.tz-report-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.tz-report-form textarea{font:inherit;color:var(--ink);background:var(--bg3);border:1px solid #3a3470;
  border-radius:10px;padding:10px;resize:vertical}
.tz-report-file input{font-size:12px;color:var(--muted)}
@media(max-width:560px){
  .tz h1{font-size:25px}
  .tz-cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .tz-reading{font-size:16px}
}