/* ============================================================
   Week of AI — event page ("Ticket"): sticky ticket card + reading column
   Loads after css/styles.css and reuses its tokens, header, footer, buttons,
   .lnk, .sec-h, .prompt/.cursor, .err and the modal. Only ticket-page styles live here.
   ============================================================ */
[hidden]{display:none!important}
.wrap{max-width:1120px}
.pg-event .hd-row{padding:14px 0}
.mark a{color:inherit;border-bottom:0}
.mark a:hover{color:var(--acc)}
a.btn{display:inline-block;text-decoration:none}
a.btn:hover{border-color:var(--acc)}

/* ---------- button variants the ticket needs ---------- */
.btn.ter{border-color:transparent;color:var(--mute);padding-left:4px;padding-right:4px}
.btn.ter:hover{color:var(--warn);border-color:transparent}
.btn.ter:hover::before,.btn.ter:hover::after{color:var(--warn)}
.btn.ter.arm{color:var(--warn);font-weight:700}
.btn.sm{font-size:11px;padding:3px 6px}
.btn.on{color:var(--acc);border-color:var(--line2)}
.btn.on::before,.btn.on::after{color:var(--acc)}
.btn.done,.lnk.done{color:var(--acc);border-color:var(--acc)}
.lnk{font-size:12px;white-space:nowrap}
.lnk::before,.lnk::after{color:var(--mute)}
.lnk:hover::before,.lnk:hover::after{color:var(--acc)}
a.lnk{border-bottom:0}
.lnk.mutelnk{color:var(--mute)}
.lnk.mutelnk:hover{color:var(--acc)}

/* ---------- main ---------- */
.main{padding:16px 0 44px}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px}
.back{color:var(--mute);font-size:12px;border:0}
.back:hover{color:var(--acc);border:0}
.top .prompt{padding:0;font-size:12px;min-width:0}
.top .cursor{width:7px;height:13px}
.grid{display:grid;grid-template-columns:384px minmax(0,1fr);gap:28px 48px;align-items:start}
.side{position:sticky;top:20px;min-width:0}
.reading-col{min-width:0}

/* ---------- 404 ---------- */
.notfound{border:1px solid var(--line2);background:var(--panel);padding:22px 24px 24px;max-width:560px}
.nf-code{color:var(--acc2);font-weight:700;font-size:15px;letter-spacing:.01em;overflow-wrap:anywhere}
.nf-code .ps{color:var(--mute)}
.notfound p{margin:8px 0 16px;color:var(--mute)}
.notfound code{font:inherit;color:var(--bright);overflow-wrap:anywhere}

/* ---------- ticket card ---------- */
.ticket{position:relative;display:flex;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px #000}
.ticket::before,.ticket::after{content:"";position:absolute;left:43px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--bg);border:1px solid var(--line);z-index:2}
.ticket::before{top:-9px;clip-path:inset(50% 0 0 0)}
.ticket::after{bottom:-9px;clip-path:inset(0 0 50% 0)}
.tscan{position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
.stub{flex:none;width:42px;border-right:1px dashed var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0;background:#0e1115;position:relative;z-index:0}
.admit{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--acc);font-weight:700;letter-spacing:.32em;font-size:11px;text-transform:uppercase}
.stubno{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--dim);font-size:10px;letter-spacing:.14em}
.stubmark{color:var(--acc);font-size:10px;letter-spacing:-.05em;opacity:.8}
.tbody{flex:1;min-width:0;padding:16px 18px 18px;position:relative;z-index:0}
/* the standing ribbon: green once the host has you, amber while they are deciding. Same two
   colours the week strip uses, so a card and its page agree without anyone having to read. */
.tstat{margin:0 0 10px;padding:6px 10px;border-radius:2px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:lowercase;border:1px solid transparent}
.tstat::before{content:"[ ";opacity:.55}
.tstat::after{content:" ]";opacity:.55}
.tstat.is-ok{color:var(--ok);border-color:rgba(var(--ok-rgb),.42);
  background:rgba(var(--ok-rgb),.10);box-shadow:0 0 14px rgba(var(--ok-rgb),.10)}
.tstat.is-wait{color:var(--acc);border-color:rgba(var(--acc-rgb),.42);
  background:rgba(var(--acc-rgb),.10);box-shadow:0 0 14px rgba(var(--acc-rgb),.10)}
.tstat.is-host{color:var(--acc2);border-color:var(--line2);background:rgba(255,255,255,.03)}

.trow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--mute);letter-spacing:.04em}
.trow .tag{color:var(--acc);font-weight:700;text-transform:lowercase}
.trow .tag::before{content:"["}
.trow .tag::after{content:"]"}
.title{margin:9px 0 14px;font-size:17px;line-height:1.35;font-weight:700;color:var(--bright);letter-spacing:.005em;overflow-wrap:anywhere}
/* max-content, not a fixed 56px: "neighborhood" needs about 90 and was overrunning its
   value, printing "neighborhDogpatch". The column now follows the longest label. */
.tf{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 10px;font-size:12.5px;padding:13px 0;border-top:1px solid var(--line);margin:0}
.tf dt{color:var(--dim);margin:0}
.tf dt::after{content:">";color:var(--dim)}
.tf dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.tf dd b{color:var(--bright);font-weight:500}
.sub{display:block;color:var(--mute);font-size:12px}
/* a price is a fact on the ticket like the date is, not a call to action */
.price{color:var(--ink);font-weight:500}
.locked{color:var(--mute);font-style:italic}
.addr{color:var(--bright)}
.linkrow{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:11px 0 13px;border-top:1px solid var(--line);font-size:12.5px}
.linkrow code{font:inherit;color:var(--bright);overflow-wrap:anywhere;min-width:0}
/* the label sits on its own line so the url below it is never broken across the row */
.linkrow code::before{content:"link>";color:var(--dim);display:block}
.tstate{border-top:1px dashed var(--line2);padding-top:14px}
.stb{display:flex;flex-direction:column;gap:8px}
/* the stacked actions line up with the confirmation box above them rather than floating in
   the middle of their own width: .ok sits at 1px border + 12px padding, so these match it */
.tstate .btn{display:block;width:100%;text-align:left;padding-left:12px}
.tstate .btn.ter{width:auto;align-self:flex-start;text-align:left}

/* the three lines of a confirmed registration, each its own full-width action. The amber box is
   the standing; blue adds the event somewhere else, which changes nothing here; red undoes it.
   The tints are the same shape the week cards use, so a colour means the same thing everywhere. */
.tstate .btn.act-ics{color:var(--info);border-color:rgba(var(--info-rgb),.42);
  background:rgba(var(--info-rgb),.08);box-shadow:0 0 14px rgba(var(--info-rgb),.10)}
.tstate .btn.act-ics::before,.tstate .btn.act-ics::after{color:var(--info)}
.tstate .btn.act-ics:hover{border-color:rgba(var(--info-rgb),.66);background:rgba(var(--info-rgb),.14);
  box-shadow:0 0 18px rgba(var(--info-rgb),.18)}
.tstate .btn.is-danger{color:var(--warn);border-color:rgba(255,107,87,.42);
  background:rgba(255,107,87,.07);box-shadow:0 0 14px rgba(255,107,87,.09)}
.tstate .btn.is-danger::before,.tstate .btn.is-danger::after{color:var(--warn)}
.tstate .btn.is-danger:hover{border-color:rgba(255,107,87,.68);background:rgba(255,107,87,.13);
  box-shadow:0 0 18px rgba(255,107,87,.17)}
.hint{color:var(--mute);font-size:11.5px;line-height:1.55;margin:0}
.hint::before{content:"# ";color:var(--dim)}
.hint .lnk{font-size:11.5px}
.sec-h .hint::before{content:none}
.st-row{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.tstate .st-row .btn{width:auto;display:inline-block;flex:1 1 auto}
.tstate .st-row .btn.ter{flex:0 0 auto}
/* name gate (first registration) */
.namebox{display:flex;flex-direction:column;gap:6px;margin:0}
.namebox label{color:var(--acc);font-weight:700;font-size:12px}
.namebox label .ps{font-weight:400}
.namebox input{width:100%;min-width:0;font:inherit;font-size:13px;background:var(--bg);border:1px solid var(--line2);color:var(--bright);padding:7px 9px;border-radius:2px}
.namebox input::placeholder{color:var(--dim)}
.namebox input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 2px var(--accdim)}
.namebox input[aria-invalid="true"]{border-color:var(--warn)}
.namebox .err{margin-top:0}
.namebox .st-row{margin-top:4px}
/* status: pending */
.wait{border:1px solid var(--line2);background:var(--bg);padding:10px 12px;color:var(--ink);font-size:12.5px;line-height:1.5}
.wait .k{color:var(--acc);font-weight:700}
.wait .cursor{height:12px;width:6px}
.wait .sub{font-size:11.5px;margin-top:2px}
/* status: registered */
.ok{border:1px solid var(--acc);background:var(--accdim);padding:10px 12px;color:var(--acc);font-weight:700;font-size:13px;line-height:1.5;box-shadow:0 0 40px rgba(var(--acc-rgb),.08)}
.ok .sub{color:var(--ink);font-weight:400;font-size:12px;margin-top:2px}
/* status: hosting */
.hosting{border:1px solid var(--acc);background:var(--bg);padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 40px rgba(var(--acc-rgb),.06)}
.hosting .k{color:var(--acc);font-weight:700;font-size:12px;letter-spacing:.04em}
.hosting .k::before{content:"▓ "}
.hosting code{font:inherit;font-size:12.5px;color:var(--bright);overflow-wrap:anywhere}
.hosting .n{font-size:12px;color:var(--mute)}
.hosting .n b{color:var(--bright);font-weight:700}
.priv{display:inline-block;color:var(--dim);font-size:10px;letter-spacing:.08em;text-transform:lowercase;border:1px solid var(--line2);padding:0 5px;line-height:15px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.priv::before{content:"░ "}
.tstate .hosting .btn{width:auto;display:inline-block}

/* ---------- reading column ---------- */
.sec{margin-bottom:26px}
.reading{margin:0;max-width:70ch;font-size:13.5px;line-height:1.7;color:var(--ink)}
.reading p{margin:0 0 10px}
.reading p:last-child{margin:0}
.ev-note{margin:14px 0 0;max-width:70ch;border-left:2px solid var(--acc);background:var(--panel);padding:8px 14px;color:var(--bright);line-height:1.6;font-size:13px}
.ev-note::before{content:"# note: ";color:var(--acc)}
.kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:13px;max-width:70ch}
.kv dt{color:var(--dim);margin:0;white-space:nowrap}
.kv dt::after{content:">"}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ext{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.ext a{color:var(--ink)}
.ext a::after{content:" ↗";color:var(--mute)}
.ext a:hover::after{color:var(--acc)}
.hostcard{display:flex;gap:14px;align-items:flex-start;max-width:70ch}
.hostav{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line2);background:var(--panel);color:var(--acc);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.hostcard .hn{color:var(--bright);font-weight:700;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.hostcard .hp{color:var(--mute);font-size:12.5px;overflow-wrap:anywhere}
.hostcard .hp:empty{display:none}
.hostlinks{display:flex;gap:6px 10px;flex-wrap:wrap;margin-top:8px}
.hostlinks:empty{display:none}
/* message the host */
.msg{border:1px solid var(--line);background:var(--panel);padding:12px 14px 12px;max-width:70ch;margin:0}
.msg label{display:block;color:var(--acc);font-weight:700;font-size:12px;margin-bottom:6px}
.msg textarea{display:block;width:100%;min-width:0;resize:vertical;font:inherit;font-size:13px;line-height:1.5;background:var(--bg);border:1px solid var(--line2);color:var(--bright);padding:8px 10px;border-radius:2px}
.msg textarea::placeholder{color:var(--dim)}
.msg textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 2px var(--accdim)}
.msg textarea[aria-invalid="true"]{border-color:var(--warn)}
.msg .st-row{margin-top:10px;justify-content:space-between}
.msg .hint{flex:1 1 220px;margin:0}
.msg .sent{display:none;color:var(--acc);font-size:12px;margin-top:8px}
.msg .sent::before{content:"> ";color:var(--mute)}
.msg.is-sent .sent{display:block}
/* host: lists */
.list{border:1px solid var(--line);background:var(--panel);max-width:70ch;margin:0;padding:0;list-style:none}
.li{display:flex;align-items:center;gap:8px 12px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.li:last-child{border-bottom:0}
.li .ix{color:var(--dim);font-size:11px;width:22px;flex:none}
.li .nm{color:var(--bright);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .when{color:var(--dim);font-size:11px;white-space:nowrap}
.li .acts{display:flex;gap:6px;flex:none}
.li .res{font-size:11px;letter-spacing:.06em;text-transform:lowercase;flex:none}
.li.is-approved .res{color:var(--acc);font-weight:700}
.li.is-approved .res::before{content:"[✓] "}
.li.is-declined{opacity:.55}
.li.is-declined .res{color:var(--mute)}
.li.is-declined .res::before{content:"[x] "}
.li.is-declined .nm{text-decoration:line-through;color:var(--mute)}
.list-empty{color:var(--mute);font-size:12.5px;padding:8px 12px}
.list-empty::before{content:"> ";color:var(--dim)}
.listfoot{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;max-width:70ch;margin-top:10px;font-size:12px;color:var(--mute)}

/* ---------- footer (compact, no diorama on subpages) ---------- */
footer.foot-bar{margin-top:20px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:26px}
  .side{position:static}
  .ticket{max-width:560px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .tbody{padding:14px 14px 16px}
  .tf{grid-template-columns:52px minmax(0,1fr)}
  .title{font-size:16px}
  .ticket{max-width:none}
  .tstate .st-row .btn{width:100%;text-align:center}
  .tstate .st-row .btn.ter{width:auto;text-align:left}
  .msg .st-row{flex-direction:column;align-items:stretch}
  .msg .st-row .btn{text-align:center}
  .li .when{display:none}
}

/* ---------- motion (guarded) ---------- */
@media (prefers-reduced-motion:no-preference){
  .stb > *{animation:st-fade .18s ease-out}
  @keyframes st-fade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
}