/* Hermetic Cloud · Tarot Canvas. Page styles only; the palette, type and components come from styles.css and
   css/components.css. The table is white in both themes: that is the point of it. Positions on the table are in
   table units (the table is 1000 units high); the board is scaled to the screen by assets/tarot-canvas.js. */

:root{--tc-rim-a:#2B2420;--tc-rim-b:#120E0B;--tc-rim-line:rgba(196,162,101,.55);--tc-glass:rgba(26,22,19,.9)}
:root[data-theme="light"]{--tc-rim-a:#D6CDBF;--tc-rim-b:#B9AE9C;--tc-rim-line:rgba(122,101,52,.6);--tc-glass:rgba(237,231,220,.92)}

.tc-wrap{max-width:1480px;margin:0;padding:.6rem 2.5rem 2.6rem}
.tc-wrap p{max-width:72ch;font-size:1.05rem;line-height:1.6}

/* the small written commands on the bar: which cards the tray shows, the table's colour and grid, clearing and saving */
.tc-btn{position:relative;font-family:var(--ff-ui);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;background:transparent;color:var(--ink2);
  border:1px solid var(--line);border-radius:6px;padding:.3rem .55rem;cursor:pointer;min-height:28px;line-height:1.1;touch-action:manipulation}
.tc-btn::after{content:"";position:absolute;inset:-6px 0}
.tc-btn:hover{border-color:var(--gold);color:var(--ink)}
.tc-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:var(--card)}
.tc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tc-btn.armed{border-color:var(--fire);color:var(--fire)}
.tc-btn[hidden]{display:none}

/* the stage holds the table and the floating bar of the chosen card */
.tc-stage{position:relative;height:520px;min-height:300px;display:grid;place-items:center;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tc-table{position:relative;padding:16px;border-radius:16px;background:linear-gradient(180deg,var(--tc-rim-a),var(--tc-rim-b));
  box-shadow:0 1px 0 rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.25),inset 0 1px 0 var(--edge-hi)}
.tc-table::before{content:"";position:absolute;inset:6px;border:1px solid var(--tc-rim-line);border-radius:11px;pointer-events:none;z-index:2}
.tc-pit{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.tc-board{position:absolute;left:0;top:0;transform-origin:0 0;isolation:isolate;
  background:
    radial-gradient(ellipse at 28% 16%,rgba(255,255,255,.95),rgba(255,255,255,0) 55%),
    radial-gradient(circle,rgba(70,64,58,.26) 0 1.2px,rgba(70,64,58,0) 2px) 0 0/18px 18px,
    linear-gradient(180deg,#FDFDFC,#F2F2EF);
  box-shadow:inset 0 0 90px rgba(20,16,12,.16),inset 0 0 8px rgba(20,16,12,.22)}
/* the grid, under the cards, every 100 table units */
.tc-board.grid::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(122,101,52,.22) 0 2px,transparent 2px 100px),
    repeating-linear-gradient(0deg,rgba(122,101,52,.22) 0 2px,transparent 2px 100px)}
.tc-board.dark.grid::before{background:repeating-linear-gradient(90deg,rgba(237,231,220,.14) 0 2px,transparent 2px 100px),
    repeating-linear-gradient(0deg,rgba(237,231,220,.14) 0 2px,transparent 2px 100px)}
/* the dark table: the same perforated laminate in obsidian, chosen on the bar */
.tc-board.dark{background:
    radial-gradient(ellipse at 28% 16%,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),
    radial-gradient(circle,rgba(237,231,220,.17) 0 1.2px,rgba(237,231,220,0) 2px) 0 0/18px 18px,
    linear-gradient(180deg,#231E1A,#0E0B09);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55),inset 0 0 8px rgba(0,0,0,.7)}
.tc-table.dark{--tc-rim-a:#3B332C;--tc-rim-b:#1E1915}
:root[data-theme="light"] .tc-table.dark{--tc-rim-a:#D6CDBF;--tc-rim-b:#B9AE9C}
.tc-board.dark .tc-card{box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.tc-board.dark .tc-ring{box-shadow:0 0 0 3px rgba(0,0,0,.6)}

/* the cards */
.tc-card{position:absolute;left:0;top:0;transform-origin:center;cursor:grab;will-change:transform;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08)}
.tc-card:active{cursor:grabbing}
.tc-card img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.tc-card:focus-visible{outline:none}
.tc-ring{position:absolute;left:0;top:0;transform-origin:center;pointer-events:none;border:3px solid var(--gold);border-radius:12px;
  box-shadow:0 0 0 3px rgba(255,255,255,.7);box-sizing:border-box}
.tc-ring[hidden]{display:none}

/* the bar: one panel above the table that holds every command (the owner: all the commands on the bar, the written
   ones smaller), so nothing ever covers a card. First line the commands, second line the chosen card: its name,
   the opacity meter and the small tools, asleep (idle) until a card is chosen */
.tc-bar{display:grid;gap:.35rem;margin:0 0 .55rem;padding:.4rem .7rem;border:1px solid var(--line2);border-radius:var(--radius);
  background:var(--paper2);box-sizing:border-box;box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 1px 0 var(--edge-hi)}
.tc-row{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem}
.tc-group{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.tc-end{margin-left:auto}
.tc-chosen{border-top:1px solid var(--line);padding-top:.35rem}
.tc-bar.idle .tc-name{color:var(--mute)}
.tc-bar [disabled]{opacity:.4;cursor:default}
.tc-bar.idle .tc-tools button:hover{border-color:var(--line2);color:var(--ink2)}
.tc-name{font-family:var(--ff-display);font-size:.85rem;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.tc-meter{display:flex;align-items:center;gap:.5rem}
.tc-k{font-family:var(--ff-ui);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tc-meter input{-webkit-appearance:none;appearance:none;width:140px;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:manipulation;--p:100%}
.tc-meter input::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--gold) var(--p),var(--line2) var(--p))}
.tc-meter input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--paper);border:1px solid var(--gold);box-shadow:0 0 0 3px var(--paper2)}
.tc-meter input::-moz-range-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--gold) var(--p),var(--line2) var(--p))}
.tc-meter input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--gold);box-shadow:0 0 0 3px var(--paper2)}
.tc-meter input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tc-meter output{font-family:var(--ff-ui);font-size:10px;letter-spacing:.06em;color:var(--ink2);min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.tc-tools{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.tc-tools button{position:relative;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink2);
  font:16px/1 var(--ff-ui);font-variant-emoji:text;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center}
.tc-tools button::after{content:"";position:absolute;inset:-7px;border-radius:50%}
.tc-tools button:hover,.tc-tools button:focus-visible{border-color:var(--gold);color:var(--ink);outline:none}
.tc-tools .tc-blend{width:auto;border-radius:999px;padding:0 .65rem;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
.tc-tools .tc-x{font-size:18px}

/* the view's zoom: a very small minus, figure and plus at the table's edge, whatever the view shows */
.tc-zoom{position:absolute;right:26px;top:26px;z-index:6;display:flex;align-items:center;gap:4px;padding:3px 5px;
  border:1px solid var(--line2);border-radius:999px;background:var(--tc-glass)}
.tc-zoom button,.tc-mini button{position:relative;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;
  color:var(--ink2);font:13px/1 var(--ff-ui);font-variant-emoji:text;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}
.tc-zoom button::after,.tc-mini button::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.tc-zoom button:hover,.tc-mini button:hover,.tc-zoom button:focus-visible,.tc-mini button:focus-visible{border-color:var(--gold);color:var(--ink);outline:none}
.tc-zoom button[disabled]{opacity:.35;cursor:default}
.tc-zoom .tc-zoom-pct{width:auto;min-width:36px;border-radius:999px;padding:0 6px;font-size:9px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* the small pill beside the chosen card: its opacity, mirror, flip and turn, so a card can be worked up close */
.tc-mini{position:absolute;z-index:7;display:flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--line2);border-radius:999px;background:var(--tc-glass)}
.tc-mini[hidden]{display:none}
.tc-mini input{-webkit-appearance:none;appearance:none;width:78px;height:22px;margin:0 2px;background:transparent;cursor:pointer;--p:100%}
.tc-mini input::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--gold) var(--p),var(--line2) var(--p))}
.tc-mini input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;background:var(--paper);border:1px solid var(--gold)}
.tc-mini input::-moz-range-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--gold) var(--p),var(--line2) var(--p))}
.tc-mini input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:1px solid var(--gold)}
.tc-mini input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:700px){.tc-zoom{right:16px;top:16px}}

/* the tray: the deck in a strip under the table, scrolled sideways, a card dragged up onto the table or tapped;
   on a landscape screen the strip becomes a column beside the table, scrolled up and down, a card dragged out sideways */
.tc-main{display:grid;grid-template-columns:minmax(0,1fr)}
.tc-tray{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:12px 2px 8px;margin:.9rem 0 0;border-top:1px solid var(--line);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;box-sizing:border-box}
@media (orientation:landscape) and (min-width:900px){
  .tc-main{grid-template-columns:minmax(0,1fr) 174px;gap:0 14px;align-items:start}
  .tc-tray{margin:0;padding:2px 4px 2px 12px;border-top:0;border-left:1px solid var(--line);display:grid;grid-template-columns:repeat(2,74px);
    grid-auto-rows:max-content;align-content:start;gap:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}
  .tc-th{touch-action:pan-y}
}
@media (orientation:landscape) and (min-width:1400px){
  .tc-main{grid-template-columns:minmax(0,1fr) 256px}
  .tc-tray{grid-template-columns:repeat(3,74px)}
}
.tc-th{flex:0 0 auto;width:74px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:grab;
  touch-action:pan-x;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 1px 0 var(--edge-hi)}
.tc-th img{display:block;width:100%;height:auto;border-radius:5px;pointer-events:none;-webkit-user-drag:none}
.tc-th:hover,.tc-th:focus-visible{border-color:var(--gold);outline:none}
.tc-th[hidden]{display:none}
.tc-ghost{position:fixed;left:0;top:0;z-index:50;width:110px;height:auto;pointer-events:none;opacity:.92;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translate(-50%,-115%)}
.tc-status{font-size:.92rem;color:var(--ink2);min-height:1.3em;margin:.5rem 0 0}

/* the fold */
details.tc-fold{margin:1.2rem 0 0;border-top:1px solid var(--line);max-width:82ch}
details.tc-fold>summary{cursor:pointer;padding:11px 0;font-family:var(--ff-ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);list-style:none;display:flex;align-items:center;gap:10px}
details.tc-fold>summary::-webkit-details-marker{display:none}
details.tc-fold>summary::before{content:"+";font-family:var(--ff-ui);font-size:13px;line-height:1;width:18px;height:18px;
  border:1px solid var(--line2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--mute);flex:0 0 auto}
details.tc-fold[open]>summary::before{content:"\2212"}
details.tc-fold>summary:hover{color:var(--ink)}
details.tc-fold>div{padding:0 0 10px}
details.tc-fold>div>:first-child{margin-top:0}

@media (max-width:1000px){.tc-wrap{padding:.5rem 1rem 2rem}}
@media (max-width:700px){
  .tc-stage{min-height:260px}
  .tc-table{padding:10px;border-radius:12px}.tc-table::before{inset:4px;border-radius:8px}
  .tc-meter input{width:110px}.tc-th{width:62px}
}
@media (prefers-reduced-motion:no-preference){.tc-card{transition:opacity .12s linear}}
@media print{
  .hc-navwrap,header.page,.tc-tray,.tc-bar,.tc-status,.hc-footer,details.tc-fold,.tc-ring,.tc-zoom,.tc-mini{display:none!important}
  .tc-table{box-shadow:none}
}