/* Hermetic Cloud · the Tree of Life sheet (assets/tree-life-sheet.js). Every rule is scoped under .tl-sheet, the
   native dialog the module appends to body, so no page rule reaches it and none of its rules reach the page.
   Desktop: a centred sheet over the dimmed Tree, a sticky bar, a sticky 240 px figure column and a 66ch text column.
   Phone (max-width 760px): the whole screen, its own scroll container, a Back control at the left of the bar.
   Tokens and fonts come from styles.css (--paper, --ink, --gold-ink, --line, Cinzel, Newsreader, Archivo, Frank Ruhl Libre). */

.tl-sheet{box-sizing:border-box;width:min(1040px,94vw);max-width:none;max-height:92dvh;margin:auto;padding:0;border:1px solid var(--line2);border-top:2px solid var(--gold);border-radius:16px;background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;font-family:var(--ff-body);font-size:17.5px;line-height:1.65;font-variant-emoji:text;box-shadow:0 18px 70px #0005}
.tl-sheet::backdrop{background:#080605bb;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tl-sheet *{box-sizing:border-box}
.tl-sheet[open]{animation:tl-sheet-in .16s ease-out}
@keyframes tl-sheet-in{from{opacity:0}to{opacity:1}}
.tl-sheet a{color:var(--gold-ink);text-underline-offset:4px}
.tl-sheet a:hover{color:var(--gold)}
.tl-sheet :is(a,button,summary,[tabindex]):not(h2):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tl-sheet [lang="he"]{font-family:var(--ff-heb);font-weight:300;unicode-bidi:isolate}
.tl-sheet-heb{font-family:var(--ff-heb);font-weight:300;color:var(--gold-ink);margin-left:6px}
.tl-sheet-glyph{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols","Noto Sans Symbols 2","DejaVu Sans",var(--ff-heb),serif;font-variant-emoji:text}
.tl-sheet-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the sticky bar: no kind label (the sheet opens on the letter line and the title); three hairline round controls at the right, Back at the left on phones */
.tl-sheet-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--paper2);border-bottom:1px solid var(--line)}
.tl-sheet-back{display:none}
.tl-sheet-controls{display:flex;gap:6px;margin-left:auto}
.tl-sheet-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--ink2);cursor:pointer;font-family:var(--ff-body);font-size:19px;line-height:1}
.tl-sheet-ico:hover:not(:disabled){border-color:var(--gold);color:var(--gold-ink)}
.tl-sheet-ico:disabled{opacity:.35;cursor:default}
.tl-sheet-ico[hidden]{display:none}
.tl-sheet-ico[data-act="prev"]{order:1}
.tl-sheet-ico[data-act="next"]{order:2}
.tl-sheet-ico[data-act="close"]{order:3}

/* the body: head, figure and text; two columns from 900 px when a sheet carries a figure */
.tl-sheet-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "figure" "text";gap:0;padding:28px 36px 36px}
.tl-sheet-head{grid-area:head;min-width:0}
.tl-sheet-figure{grid-area:figure;min-width:0}
.tl-sheet-text{grid-area:text;min-width:0}
.tl-sheet-body:not(.has-figure) .tl-sheet-text>*:not(.tl-sheet-cards):not(.tl-sheet-strip):not(.tl-sheet-deck){max-width:66ch}
@media(min-width:900px){
  .tl-sheet-body.has-figure{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"figure head" "figure text";column-gap:36px}
  .tl-sheet-body.has-figure .tl-sheet-figure{position:sticky;top:72px;align-self:start}
  .tl-sheet-body.has-figure .tl-sheet-text,.tl-sheet-body.has-figure .tl-sheet-head{max-width:66ch}
}

/* the title block: the letter line, the title, the title of the book, the attribution */
.tl-sheet-letter{margin:0 0 10px;font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tl-sheet-letter [lang="he"]{font-size:18px;letter-spacing:0;color:var(--gold-ink);vertical-align:-2px}
.tl-sheet h2{margin:0 0 8px;font-family:var(--ff-display);font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.2;letter-spacing:.015em;color:var(--ink);text-wrap:balance;outline-offset:6px}
.tl-sheet h2:focus,.tl-sheet h2:focus-visible{outline:none} /* focused only by the module when the sheet opens; no ring */
.tl-sheet h2 [lang="he"]{font-size:.95em;color:var(--gold-ink)}
.tl-sheet-epithet{margin:0 0 8px;font-style:italic;font-size:17px;line-height:1.5;color:var(--ink2)}
.tl-sheet-src{font-family:var(--ff-ui);font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-right:2px}
.tl-sheet-sub{margin:0 0 18px;font-size:15px;color:var(--mute)}
.tl-sheet-attr{margin:0 0 22px;font-size:18px;color:var(--gold-ink)}
.tl-sheet-attr .tl-sheet-glyph{font-size:22px;vertical-align:-2px;margin-right:4px}

/* the figure column: the card, the deck switch beneath it, the caption, the divergence line */
.tl-sheet-card{margin:0}
.tl-sheet-card a{display:block;text-decoration:none}
.tl-sheet-card img{display:block;width:100%;height:auto;border:1px solid var(--line2);border-radius:5px;background:var(--paper2)}
.tl-sheet-card img[hidden]{display:none}
/* a deck narrower than the column (the Tarot de Marseille, 230 wide) stands at its own size, centred, in the figure and in the rows of cards */
.tl-sheet-card img[data-fit="natural"],.tl-sheet-cards img[data-fit="natural"]{width:auto;max-width:100%;margin:0 auto}
.tl-sheet-bydeck{display:block}
.tl-sheet-cardname{display:flex;align-items:center;justify-content:center;min-height:200px;padding:16px;border:1px solid var(--line);border-radius:5px;background:var(--paper2);font-family:var(--ff-display);font-size:16px;text-align:center;color:var(--ink2)}
.tl-sheet-cards .tl-sheet-cardname{min-height:150px;font-size:13px}
.tl-sheet-deck{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:12px 0 0;padding:6px 0 0;border-top:1px solid var(--line);font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tl-sheet-deck--end{justify-content:flex-end}
/* beside the card the column is 240 wide: a touch less letter-spacing and gap keep the three names on one line */
.tl-sheet-figure .tl-sheet-deck{gap:0 5px;letter-spacing:.11em}
.tl-sheet-deck button{appearance:none;-webkit-appearance:none;margin:0;padding:0 1px;min-height:34px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--mute);cursor:pointer}
.tl-sheet-deck button:hover{color:var(--ink)}
.tl-sheet-deck button[aria-checked="true"]{color:var(--gold-ink);border-bottom-color:var(--gold)}
.tl-sheet-dot{color:var(--line2)}
.tl-sheet-caption{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.tl-sheet-divergence{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.tl-sheet-open{display:inline-block;margin-top:12px;font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);text-decoration:none}
.tl-sheet-open:hover{text-decoration:underline}
.tl-sheet-profile-glyph{display:flex;align-items:center;justify-content:center;min-height:200px;font-size:120px;line-height:1;color:var(--gold-ink)}
.tl-sheet-profile-glyph--heb{font-size:72px;font-family:var(--ff-heb);font-weight:300}

/* the text column: prose, facts, the cards row, the folds, the quotation block, the links rows */
.tl-sheet-text p{margin:0 0 17px;color:var(--ink)}
.tl-sheet-text h3{margin:26px 0 12px;font-family:var(--ff-display);font-weight:500;font-size:19px;line-height:1.4;letter-spacing:.015em;color:var(--ink)}
.tl-sheet-text h3:first-child{margin-top:0}
.tl-sheet-text h4{margin:18px 0 6px;font-family:var(--ff-ui);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tl-sheet-note{font-size:15px;color:var(--ink2)}
.tl-sheet-rankline{font-size:16px}
.tl-sheet-rankline a{text-decoration:none;border-bottom:1px solid var(--line2)}
.tl-sheet-rankline a:hover{border-bottom-color:var(--gold)}
.tl-sheet-facts{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0 18px;margin:0 0 22px;border-top:1px solid var(--line);font-size:15.5px}
.tl-sheet-facts dt,.tl-sheet-facts dd{margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.tl-sheet-facts dt{padding-top:11px;font-family:var(--ff-ui);font-size:10.5px;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tl-sheet-facts dd{color:var(--ink2);line-height:1.5;overflow-wrap:anywhere}
.tl-sheet-facts a{text-decoration:none;border-bottom:1px solid var(--line2)}
.tl-sheet-facts a:hover{border-bottom-color:var(--gold)}
.tl-sheet-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 22px;margin:0 0 26px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl-sheet-strip div{min-width:0}
.tl-sheet-strip dt{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 4px}
.tl-sheet-strip dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink2);overflow-wrap:anywhere}
.tl-sheet-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 6px}
.tl-sheet-cards--many{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tl-sheet-cards figure{margin:0;min-width:0;display:flex;flex-direction:column}
.tl-sheet-cards a{display:block;text-decoration:none}
.tl-sheet-cards img{display:block;width:100%;height:auto;border:1px solid var(--line2);border-radius:4px;background:var(--paper2);transition:transform .15s,border-color .15s}
.tl-sheet-cards a:hover img{transform:translateY(-3px);border-color:var(--gold)}
.tl-sheet-cards figcaption{margin-top:auto;padding-top:8px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.tl-sheet-cards+.tl-sheet-deck{margin-bottom:18px}
.tl-sheet-fold{margin-top:22px;border-top:1px solid var(--line)}
.tl-sheet-fold>summary{cursor:pointer;list-style:none;padding:14px 0 6px;font-family:var(--ff-display);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.tl-sheet-fold>summary::-webkit-details-marker{display:none}
.tl-sheet-fold>summary::before{content:"+";display:inline-block;width:1.2em;font-family:var(--ff-ui)}
.tl-sheet-fold[open]>summary::before{content:"\2212"}
.tl-sheet-fold>summary span{font-family:var(--ff-body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--mute);margin-left:8px}
.tl-sheet-fold-body{padding:6px 0 10px}
.tl-sheet-777 .tl-sheet-facts{grid-template-columns:190px minmax(0,1fr);font-size:15px;margin-bottom:6px}
.tl-sheet-777 h4:first-child{margin-top:4px}
.tl-sheet-q{margin:0 0 14px;padding:10px 14px;border-left:2px solid var(--gold);border-radius:2px;background:var(--paper2);font-size:16px;line-height:1.6}
.tl-sheet-q small{display:block;margin-bottom:6px;font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tl-sheet-q p{margin:0 0 8px;color:var(--ink)}
.tl-sheet-q a{display:inline-block;font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);text-decoration:none}
.tl-sheet-q a:hover{text-decoration:underline;text-underline-offset:3px}
.tl-sheet-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:18px 0 0;font-size:15px}
.tl-sheet-links .tl-sheet-k{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.tl-sheet-links a{text-decoration:none;border-bottom:1px solid transparent}
.tl-sheet-links a:hover{border-bottom-color:var(--gold)}
.tl-sheet-here{color:var(--ink2)}
.tl-sheet-sources{margin:0;padding:0 0 0 1.1em;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.tl-sheet-sources li{margin:0 0 4px}
.tl-sheet-brain{margin-top:8px}
.tl-sheet-brain:empty{display:none}

/* the page behind: locked while the sheet is open, the scroll position saved by the module */
html.tl-sheet-lock{overflow:hidden;scrollbar-gutter:stable}
html.tl-sheet-lock body.tl-sheet-fixed{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* phones: the whole screen, one column, a Back control at the left of the bar */
@media(max-width:760px){
  .tl-sheet{inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
  .tl-sheet-bar{padding:10px 16px;gap:10px}
  .tl-sheet-back{display:inline-block;flex:none;appearance:none;-webkit-appearance:none;margin:0;padding:8px 0;border:0;background:none;font-family:var(--ff-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);cursor:pointer}
  .tl-sheet-ico[data-act="close"]{display:none}
  .tl-sheet-body{padding:20px 16px 36px}
  .tl-sheet-card{width:62vw;margin:0 auto}
  .tl-sheet-deck,.tl-sheet-deck--end{justify-content:center}
  .tl-sheet-caption,.tl-sheet-divergence{text-align:center}
  .tl-sheet-figure .tl-sheet-open{display:block;text-align:center}
  .tl-sheet-figure{margin-bottom:22px}
  .tl-sheet-profile-glyph{min-height:140px;font-size:96px}
  .tl-sheet h2{font-size:26px}
  .tl-sheet-facts{grid-template-columns:85px minmax(0,1fr);gap:0 12px}
  .tl-sheet-777 .tl-sheet-facts{grid-template-columns:110px minmax(0,1fr)}
  .tl-sheet-cards,.tl-sheet-cards--many{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tl-sheet-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .tl-sheet-links{gap:6px 14px}
}
@media(max-width:400px){
  .tl-sheet-body{padding:18px 16px 32px}
  .tl-sheet-strip{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .tl-sheet[open]{animation:none}
  .tl-sheet *{transition:none!important;scroll-behavior:auto!important}
}
@media(forced-colors:active){
  .tl-sheet{border-color:CanvasText}
  .tl-sheet-deck button[aria-checked="true"]{border-bottom-color:Highlight;color:Highlight}
}
@media print{.tl-sheet{display:none!important}}