/* Programme book portal. Mobile first: the book team read this on a phone in a corridor. */
.pb-portal { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.pb-portal h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
.pb-sub { margin: 0 0 1rem; opacity: .75; font-size: .9rem; }

.pb-signin { max-width: 26rem; }
.pb-signin label { display: block; margin: .75rem 0 .25rem; font-size: .9rem; }
.pb-signin input { width: 100%; padding: .6rem; font-size: 1rem; box-sizing: border-box; }
.pb-signin button { margin-top: .75rem; padding: .6rem 1rem; font-size: 1rem; cursor: pointer; }
.pb-message { margin-top: .75rem; min-height: 1.2em; }

.pb-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.pb-tallies { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.pb-tally { padding: .4rem .7rem; border-radius: .4rem; background: rgba(127,127,127,.12); text-align: center; min-width: 4.5rem; }
.pb-tally strong { display: block; font-size: 1.2rem; }
.pb-tally span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.pb-tally.pb-awaiting-artwork { background: rgba(200,80,60,.16); }
.pb-tally.pb-awaiting-message { background: rgba(200,150,50,.16); }
.pb-tally.pb-ready { background: rgba(70,150,90,.16); }
.pb-tally.pb-approved { background: rgba(60,110,190,.16); }

/* The table is wide by nature; let it scroll rather than crushing the columns that matter. */
.pb-scroll { overflow-x: auto; margin-top: 1rem; }
.pb-grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pb-grid th, .pb-grid td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid rgba(127,127,127,.25); vertical-align: top; }
.pb-grid th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }

.pb-customer .pb-name { display: block; font-weight: 600; }
.pb-contact { display: block; font-size: .82rem; }
.pb-dedication { max-width: 24rem; }
.pb-none { opacity: .5; font-style: italic; }
.pb-chip { display: inline-block; padding: .05rem .4rem; border-radius: .25rem; font-size: .7rem; text-transform: uppercase; background: rgba(60,110,190,.18); }

.pb-asset { margin: 0 0 .5rem; }
.pb-asset img { display: block; max-width: 120px; height: auto; border-radius: .25rem; }
.pb-asset figcaption { font-size: .75rem; opacity: .8; margin-top: .2rem; }

.pb-row.pb-awaiting-artwork .pb-status { color: #b4472f; }
.pb-row.pb-ready .pb-status { color: #2f7a4a; }

.pb-upload { display: inline-block; margin-top: .4rem; cursor: pointer; }
.pb-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pb-upload span { display: inline-block; padding: .3rem .6rem; border: 1px dashed rgba(127,127,127,.6); border-radius: .3rem; font-size: .78rem; }
.pb-upload:hover span { border-style: solid; }
.pb-upload-msg { display: block; font-size: .75rem; margin-top: .3rem; opacity: .9; }