/* Orderhall — a workshop order ticket in two inks: indigo on paper, vermilion for the one slot that matters. */
:root {
  --paper: #F2ECE0;
  --paper2: #E8E0CF;
  --ink: #26215F;
  --ink2: #57527F;
  --verm: #E25A2C;
  --verm-soft: #F7D9CB;
  --rule: #CFC6B2;
  --disp: 'Funnel Display', 'Hanken Grotesk', system-ui, sans-serif;
  --text: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0 auto; max-width: 1180px; padding: 0 14px 40px; background: var(--paper); color: var(--ink); font: 400 15.5px/1.5 var(--text); -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; grid-template-areas: "cabar" "ribbon" "tally" "bench" "side" "base"; }
a { color: var(--ink); }
button { font: inherit; }
code { font-family: var(--mono); }

/* the one live figure: slots left on the open order */
.tally { grid-area: tally; min-width: 0; }
.tally-plate { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tally-mark { border-radius: 6px; flex: none; }
.tally-name { font: 800 15px/1 var(--disp); }
.tally-no { font: 500 12px var(--mono); color: var(--ink2); white-space: nowrap; }
.tally-how { margin-left: auto; font-size: 13px; color: var(--ink2); text-underline-offset: 3px; white-space: nowrap; }
.tally-fig { display: block; font: 800 104px/0.95 var(--disp); letter-spacing: -.045em; color: var(--ink); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.tally-fig[data-zero="1"] { color: var(--verm); }
.tally-cap { font: 600 16px/1.3 var(--disp); max-width: 30ch; }

/* the drawn-maker moment, first */
.ribbon { grid-area: ribbon; min-height: 60px; display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1.5px dashed var(--ink); border-radius: 4px; min-width: 0; }
.ribbon-tag { flex: none; font: 700 11px/1.9 var(--mono); text-transform: uppercase; letter-spacing: .08em; background: var(--ink); color: var(--paper); padding: 0 7px; border-radius: 2px; }
.ribbon-txt { font-size: 14.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.ribbon-txt b { color: var(--verm); }
.ribbon[data-mode="won"] { border-style: solid; border-color: var(--verm); background: var(--verm-soft); }
.ribbon[data-mode="won"] .ribbon-tag { background: var(--verm); }
.ribbon[data-mode="wait"] .ribbon-tag { background: var(--verm); }

/* the CA strip — sticky at the very top, a ticket stub torn along its lower edge */
.cabar { grid-area: cabar; position: sticky; top: 0; z-index: 30; align-self: start; display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper); border-radius: 0 0 12px 12px; padding: 9px 8px 9px 14px; box-shadow: 0 6px 18px rgba(38, 33, 95, .2); min-width: 0; margin: 0 -4px; }
.cabar-k { flex: none; font: 800 12px var(--disp); letter-spacing: .1em; color: var(--verm); }
.cabar-addr { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.3; word-break: break-all; user-select: all; }
.cabar-addr.wait { font-family: var(--text); font-size: 13.5px; opacity: .75; user-select: none; word-break: normal; }
.cabar-copy { flex: none; border: 0; background: var(--verm); color: #fff; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.cabar-copy[data-done="1"] { background: var(--paper); color: var(--ink); }
.cabar-gm { flex: none; font-size: 11.5px; color: var(--paper); opacity: .7; padding-right: 6px; }

/* the bench: wizard + the order slip + the step pane */
.bench { grid-area: bench; min-width: 0; display: grid; gap: 12px; align-content: start; }
.wiz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: none; }
.wiz-step { width: 100%; display: flex; align-items: center; gap: 7px; background: transparent; border: 0; border-bottom: 3px solid var(--rule); color: var(--ink2); padding: 6px 2px 8px; cursor: pointer; text-align: left; }
.wiz-step i { font: 800 13px/22px var(--disp); font-style: normal; width: 22px; height: 22px; text-align: center; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.wiz-step span { font-size: 12.5px; font-weight: 700; line-height: 1.15; }
.wiz-step[data-on="1"] { color: var(--ink); border-bottom-color: var(--verm); }
.wiz-step[data-on="1"] i { background: var(--verm); border-color: var(--verm); color: #fff; }
.wiz-step[data-done="1"] { color: var(--ink); border-bottom-color: var(--ink); }

.slip { background: #FBF8F1; border: 1.5px solid var(--ink); border-radius: 6px; padding: 14px 13px 13px; position: relative;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(38, 33, 95, .06) 27px 28px); }
.slip::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1.5px; border-top: 1.5px dashed var(--paper); }
.slip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.slip-title { font: 800 22px/1.1 var(--disp); letter-spacing: -.015em; }
.slip-count { font: 600 13px var(--mono); color: var(--verm); white-space: nowrap; }
.spool { height: 6px; background: var(--paper2); border-radius: 3px; margin: 10px 0 12px; overflow: hidden; }
.spool-fill { height: 100%; width: 0; background: var(--verm); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.slot { position: relative; min-height: 58px; border: 1.5px solid var(--rule); border-radius: 4px; padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(242, 236, 224, .55); min-width: 0; }
.slot-n { font: 700 10.5px var(--mono); letter-spacing: .05em; color: var(--ink2); }
.slot-who { font: 600 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot[data-s="open"] .slot-who { color: var(--rule); font-family: var(--text); font-weight: 500; }
.slot[data-s="signed"] { border-color: var(--ink); background: #fff; }
.slot[data-s="signed"] .slot-n { color: var(--ink); }
.slot[data-s="next"] { border: 2px dashed var(--verm); background: var(--verm-soft); cursor: pointer; animation: beckon 1.6s ease-in-out infinite; }
.slot[data-s="next"] .slot-who { color: var(--verm); font-family: var(--text); font-weight: 700; }
.slot[data-s="drawing"] { border-color: var(--ink); background: #fff; animation: flick 0.9s steps(2) infinite; }
.slot[data-s="won"] { border-color: var(--verm); background: var(--verm); color: #fff; }
.slot[data-s="won"] .slot-n, .slot[data-s="won"] .slot-who { color: #fff; }
.slot[data-s="won"]::after { content: "FREE"; position: absolute; right: 6px; top: 5px; font: 800 10px var(--disp); letter-spacing: .1em; }
.slot[data-s="paid"] { border-color: var(--ink); background: #fff; opacity: .7; }
.slot[data-me="1"] { box-shadow: inset 0 0 0 2px var(--ink); }
.sayline { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.sayline b { color: var(--verm); }
@keyframes beckon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes flick { 50% { background: var(--verm-soft); } }

.pane { border-top: 1.5px solid var(--ink); padding-top: 12px; }
.pane[hidden] { display: none; }
.pane-big { margin: 0 0 6px; font: 700 21px/1.2 var(--disp); }
.pane-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink2); }
.sign-go, .pull-go { width: 100%; border: 0; border-radius: 6px; background: var(--ink); color: var(--paper); font: 700 17px var(--disp); padding: 15px 14px; cursor: pointer; letter-spacing: .01em; }
.sign-go:hover, .pull-go:hover { background: #1B1747; }
.sign-go:disabled { background: var(--ink2); cursor: default; }
.pull-go { background: var(--verm); color: #fff; margin-top: 10px; }
.pull-go[hidden] { display: none; }
.mine { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 13px var(--mono); }
.mine[hidden] { display: none; }
.claim-go { border: 1.5px solid var(--verm); background: transparent; color: var(--verm); font-weight: 700; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.claim-go[hidden] { display: none; }
.pull-big { margin: 0; font: 800 23px/1.2 var(--disp); }
.pull-big em { font-style: normal; color: var(--verm); }
.pull code { font-size: 12px; word-break: break-all; }

/* the side: feed + rules */
.side { grid-area: side; min-width: 0; display: grid; gap: 14px; align-content: start; }
.feed { border: 1.5px solid var(--ink); border-radius: 6px; background: #FBF8F1; }
.feed-top { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1.5px solid var(--ink); font: 700 14px var(--disp); }
.feed-top i { font: 500 12px var(--mono); color: var(--ink2); font-style: normal; }
.feed-list { list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; }
.feed-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; padding: 6px 12px; font-size: 13px; align-items: baseline; border-bottom: 1px dotted var(--rule); }
.feed-list li:last-child { border-bottom: 0; }
.feed-list .fk { font: 700 10.5px var(--mono); text-transform: uppercase; color: var(--ink2); }
.feed-list .fk[data-k="drawn"] { color: var(--verm); }
.feed-list .fw { min-width: 0; overflow-wrap: anywhere; }
.feed-list .ft { font: 400 11px var(--mono); color: var(--ink2); }
.feed-list .feed-none { display: block; color: var(--ink2); padding: 12px; }
.feed-list .feed-fresh { animation: print .7s ease-out; }
@keyframes print { from { background: var(--verm-soft); clip-path: inset(0 100% 0 0); } to { background: transparent; clip-path: inset(0 0 0 0); } }

.rules { border: 1.5px solid var(--ink); border-radius: 6px; padding: 12px 13px; }
.rules-h { margin: 0 0 8px; font: 800 17px var(--disp); }
.rules-list { margin: 0; padding-left: 18px; font-size: 14px; }
.rules-list li { margin-bottom: 6px; }
.receipt { margin-top: 10px; border-top: 1.5px dashed var(--ink); padding-top: 8px; font: 400 13px var(--mono); }
.receipt div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.receipt b { color: var(--verm); }

.base { grid-area: base; border-top: 1.5px solid var(--ink); padding-top: 12px; font-size: 13px; }
.base-row { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.base-row span { color: var(--ink2); min-width: 100px; }
.base-row code { word-break: break-all; font-size: 12px; min-width: 0; }
.base-links { display: flex; gap: 14px; margin: 8px 0; }
.base-links a[hidden] { display: none; }
.base-note { margin: 4px 0 0; color: var(--ink2); }

.sheet { position: fixed; inset: 0; background: rgba(38, 33, 95, .4); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 18px; }
.sheet.off { display: none; }
.sheet-box { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 8px; width: min(380px, 100%); padding: 14px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: var(--disp); }
.sheet-top button { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--ink); }
.wallet-list { display: grid; gap: 8px; }
.wallet-list button { border: 1.5px solid var(--ink); background: #fff; border-radius: 6px; padding: 10px; cursor: pointer; text-align: left; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 6px; font-size: 14px; z-index: 70; max-width: 90vw; }

/* tablet: wider measure, bigger slip, four slots a row */
@media (min-width: 640px) {
  body { padding: 0 26px 48px; gap: 16px; }
  .tally-fig { font-size: 150px; }
  .tally-cap { font-size: 19px; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
  .slot { min-height: 70px; padding: 8px 9px; }
  .slip { padding: 18px 18px 16px; }
  .slip-title { font-size: 28px; }
  .cabar-addr { font-size: 13px; }
  .wiz-step span { font-size: 14px; }
  .sayline { font-size: 16.5px; }
}
/* desktop: recompose — bench left, feed + rules as a rail right, the ribbon and CA pill spanning */
@media (min-width: 1000px) {
  body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 30px; row-gap: 16px;
    grid-template-areas: "cabar cabar" "ribbon ribbon" "tally side" "bench side" "base base"; }
  .tally { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: end; }
  .tally-plate { grid-column: 1 / -1; }
  .tally-fig { font-size: 190px; margin: 0; }
  .tally-cap { font-size: 24px; padding-bottom: 22px; }
  .side { grid-row: 3 / 5; }
  .ribbon { padding: 13px 16px; }
  .ribbon-txt { font-size: 16px; }
  .cabar { margin: 0; padding-left: 20px; }
  .cabar-addr { font-size: 14px; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
  .slot { min-height: 88px; padding: 10px 11px; }
  .slot-who { font-size: 14px; }
  .slip-title { font-size: 34px; }
  .pane-big { font-size: 26px; }
  .pull-big { font-size: 30px; }
  .side { position: sticky; top: 72px; align-self: start; }
  .feed-list { max-height: 380px; }
}