/* The Workshop Wall. One world for every screen of The Table.
   Ground: a cool painted wall. Material: hard-edged sticky notes, dot stickers, masking tape, white cards.
   Type: Archivo, condensed and heavy for titles and numbers, normal width for text; Heebo for Hebrew.
   State is carried by form as well as colour: solid note = live, dashed outline = waiting, struck = folded. */
:root {
  --wall: #EDEFF2;
  --wall-2: #E2E5EA;
  --ink: #111111;
  --ink-2: #3D4047;
  --rule: #111111;
  --hair: #C9CDD4;
  --yellow: #FFD60A;
  --magenta: #FF3D8B;
  --cyan: #12B5E5;
  --lime: #8BD93B;
  --paper: #FFFFFF;
  --tape: rgba(232, 214, 166, .82);
  --red-suit: #D21F3C;
  --warn: #B3261E;
  --display: 'Archivo', 'Heebo', system-ui, sans-serif;
  --text: 'Archivo', 'Heebo', system-ui, sans-serif;
  --he: 'Heebo', 'Archivo', system-ui, sans-serif;
  --note-shadow: 0 1px 1px rgba(17, 17, 17, .12), 0 6px 14px -6px rgba(17, 17, 17, .28);
  --gutter: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.4; }
[dir="rtl"] body, [lang="he"] body { font-family: var(--he); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
* { scrollbar-color: var(--ink-2) var(--wall-2); }

/* display type: condensed, heavy, caps */
.disp { font-family: var(--display); font-weight: 900; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; }
[dir="rtl"] .disp { font-family: var(--he); font-weight: 900; font-stretch: normal; text-transform: none; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: 13px; color: var(--ink-2); }
.rule { border: 0; border-block-start: 2px solid var(--rule); margin: 0; }

/* the note: the world's one container */
.note { position: relative; padding: 12px 14px; background: var(--paper); box-shadow: var(--note-shadow); min-width: 0; }
.note.y { background: var(--yellow); } .note.m { background: var(--magenta); } .note.c { background: var(--cyan); }
.note.l { background: var(--lime); }
.note.wait { background: transparent; box-shadow: none; outline: 2px dashed var(--ink-2); outline-offset: -2px; }
.note.out { opacity: .45; }
.note.out::after { content: ''; position: absolute; inset: 14% 10%; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) calc(50% + 1.5px), transparent calc(50% + 1.5px)); pointer-events: none; }
.tape { position: absolute; inset-block-start: -9px; inset-inline-start: 50%; translate: -50% 0; width: 46px; height: 16px; background: var(--tape); rotate: -3deg; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tape.l { inset-inline-start: 14px; translate: 0 0; rotate: -8deg; } .tape.r { inset-inline-start: auto; inset-inline-end: 14px; translate: 0 0; rotate: 7deg; }

/* stick-on: the signature motion. A note drops a few px and settles. */
@keyframes stick { 0% { transform: translateY(-10px) rotate(-1.5deg); opacity: 0; } 60% { transform: translateY(1px) rotate(.3deg); opacity: 1; } 100% { transform: none; } }
.stick { animation: stick .38s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes peel { 0% { transform: perspective(600px) rotateX(-75deg); transform-origin: top; opacity: .2; } 70% { transform: perspective(600px) rotateX(8deg); transform-origin: top; opacity: 1; } 100% { transform: none; } }
.peel { animation: peel .6s cubic-bezier(.2, .8, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .stick, .peel { animation: none; } }

/* dot-vote sticker */
.dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-weight: 800; font-size: 13px; line-height: 1; flex: none; }
.dot.y { background: var(--yellow); } .dot.m { background: var(--magenta); } .dot.c { background: var(--cyan); } .dot.l { background: var(--lime); }

/* playing cards: white, taped, big indices */
.card { position: relative; width: 64px; aspect-ratio: 5 / 7; background: var(--paper); border-radius: 6px; box-shadow: var(--note-shadow); display: grid; grid-template-rows: auto 1fr auto; padding: 5px 6px; color: var(--ink); direction: ltr; flex: none; }
.card .r { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.card .s { align-self: center; justify-self: center; width: 46%; height: auto; }
.card .s2 { justify-self: end; width: 22%; height: auto; rotate: 180deg; }
.card.red { color: var(--red-suit); }
.card.slot { background: transparent; box-shadow: none; outline: 2px dashed var(--hair); outline-offset: -2px; }
.card.back { background: var(--ink); box-shadow: var(--note-shadow), inset 0 0 0 4px var(--ink), inset 0 0 0 6px var(--yellow); }
.card.big { width: 112px; } .card.big .r { font-size: 36px; }
.card.mini { width: 34px; padding: 2px 3px; border-radius: 4px; } .card.mini .r { font-size: 13px; } .card.mini .s2 { display: none; }
.cards { display: flex; gap: 10px; flex-wrap: wrap; direction: ltr; }

/* buttons as notes */
.btn { border: 0; background: var(--paper); box-shadow: var(--note-shadow); padding: 12px 16px; min-height: 48px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s ease-out, box-shadow .12s ease-out; }
.btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 1px 1px rgba(17,17,17,.12), 0 10px 18px -8px rgba(17,17,17,.35); }
.btn:active:not([disabled]) { transform: translateY(1px); box-shadow: 0 1px 1px rgba(17,17,17,.2); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.y { background: var(--yellow); } .btn.m { background: var(--magenta); } .btn.c { background: var(--cyan); } .btn.l { background: var(--lime); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.line { background: transparent; box-shadow: none; outline: 2px solid var(--ink); outline-offset: -2px; }
.btn svg { width: 20px; height: 20px; flex: none; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 0; color: var(--ink);
}
textarea { min-height: 96px; resize: vertical; }
label.lbl { display: block; font-weight: 700; font-size: 14px; margin-block-end: 6px; }

.lang { display: inline-flex; outline: 2px solid var(--ink); outline-offset: -2px; }
.lang button { border: 0; background: transparent; padding: 8px 12px; min-height: 40px; font-weight: 700; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); }
.brand b { font-family: var(--display); font-weight: 900; font-stretch: 75%; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; }
.brand span { font-size: 12px; color: var(--ink-2); }

.toast { position: fixed; inset-inline: 16px; inset-block-end: 16px; margin-inline: auto; max-width: 420px; background: var(--ink); color: var(--paper); padding: 12px 16px; font-weight: 600; z-index: 50; box-shadow: var(--note-shadow); }