/* Tribe Pics web: the locked beige look (Spec 1.9a). Pixelify Sans for headings only, IBM Plex Sans for reading,
   IBM Plex Mono for codes. Stepped "cartridge" corners on cards and the primary button. No frameworks. */
:root {
  --cream: #F5F3DB; --beige: #C9B993; --ink: #384A2F; --olive: #5C7350; --sage: #A3B587; --terracotta: #B5563E; --muted: #5F6E4E;
  --white: #FFFFFF; --black: #1B1D2A; --thumb: #B8AA86; --amber: #F5B53F;
  --notch: 8px; --notch-btn: 6px;
  --display: 'Pixelify Sans', 'IBM Plex Sans', sans-serif; --body: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cream); color: var(--ink); font: 16px/1.5 var(--body); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
a { color: var(--olive); }
main { max-width: 960px; margin: 0 auto; padding: 16px 16px 48px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px; }
.mark { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 3px; color: var(--ink); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 17px; }
.nav a.me { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { header.top { flex-wrap: wrap; } .nav { gap: 14px; font-size: 16px; } }
.nav a { color: var(--olive); text-decoration: none; font-weight: 500; }
h1 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; margin: 6px 0 4px; }
h2 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 4px; color: var(--olive); text-transform: uppercase; }
.small { font-size: 13px; color: var(--muted); }
.mono { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 1px; color: var(--olive); }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* cartridge card: stepped corners via clip-path */
.card { background: var(--beige); padding: 18px;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch), 100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch)), 0 var(--notch), var(--notch) var(--notch)); }
.card.white { background: var(--white); }
.notice { border: 2px solid var(--beige); background: var(--white); padding: 12px; }
.notice.warn { border-color: var(--terracotta); color: var(--terracotta); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; font: 600 16px var(--body); color: var(--cream); background: var(--ink); border: 0; cursor: pointer; text-decoration: none;
  clip-path: polygon(var(--notch-btn) 0, calc(100% - var(--notch-btn)) 0, calc(100% - var(--notch-btn)) var(--notch-btn), 100% var(--notch-btn), 100% calc(100% - var(--notch-btn)), calc(100% - var(--notch-btn)) calc(100% - var(--notch-btn)), calc(100% - var(--notch-btn)) 100%, var(--notch-btn) 100%, var(--notch-btn) calc(100% - var(--notch-btn)), 0 calc(100% - var(--notch-btn)), 0 var(--notch-btn), var(--notch-btn) var(--notch-btn)); }
.btn:hover { opacity: .9; } .btn:disabled { opacity: .5; cursor: default; }
.btn.secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); clip-path: none; }
.btn.quiet { background: transparent; color: var(--muted); clip-path: none; }
.btn.danger { background: var(--terracotta); }
.btn.block { width: 100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

/* forms */
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], input[type=date], textarea { width: 100%; min-height: 48px; border: 2px solid var(--beige); background: var(--white); padding: 0 14px; font: 16px var(--body); color: var(--ink); }
input.code { font: 600 32px var(--mono); letter-spacing: 12px; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }

/* badges */
.badge { display: inline-block; padding: 4px 7px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 1px; background: var(--olive); color: var(--cream); }
.badge.warn { background: var(--terracotta); } .badge.new { background: var(--sage); color: var(--ink); }

/* tribe cards */
.tribes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tribe { padding: 0; text-decoration: none; color: var(--ink); display: block; }
.tribe .cover { height: 130px; background: var(--thumb); background-size: cover; background-position: center; position: relative; }
.tribe .body { padding: 14px 16px; display: grid; gap: 4px; }

/* people chips */
.people { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.chip.zero .mono { color: var(--muted); }
.chip { display: grid; justify-items: center; gap: 2px; padding: 6px; border: 0; background: transparent; cursor: pointer; font: 13px var(--body); color: var(--muted); min-width: 64px; max-width: 96px; }
.chip > span:not(.mono):not(.huddle) { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.on { background: var(--beige); color: var(--ink); font-weight: 600; }
.chip .mono { font-size: 12px; }
.huddle { position: relative; width: 64px; height: 40px; }
/* "Added by" | "In the photo" (Find me in photos): one switch above the people row */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--beige); }
.seg button { min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 600 13px var(--body); cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--cream); }
/* face boxes drawn over the viewer's photo (only in "In the photo" mode, and while picking your face) */
.vbox { position: absolute; border: 2px solid var(--sage); box-sizing: border-box; pointer-events: none; }
.vbox .tag { position: absolute; left: -2px; top: 100%; margin-top: 2px; padding: 1px 5px; background: var(--sage); color: var(--ink); font: 600 12px var(--body); white-space: nowrap; }
.vbox.pick { pointer-events: auto; cursor: pointer; border-color: var(--cream); border-style: dashed; }
.vbox.pick:hover { border-color: var(--sage); border-style: solid; }
.vbox.taken { border-color: #9AA1B5; cursor: default; opacity: .6; }
.vname { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 4px; background: var(--beige); color: var(--ink); border: 0; font: 600 13px var(--body); cursor: pointer; }
.vname.me { background: var(--sage); }
.huddle svg { position: absolute; top: 8px; } .huddle svg:nth-child(2) { top: 0; z-index: 2; }

/* gallery grid */
.grid { display: grid; gap: 3px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(6, 1fr); } }
.cell { position: relative; aspect-ratio: 1; background: var(--thumb); border: 0; padding: 0; cursor: pointer; overflow: hidden; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell .who { position: absolute; right: 3px; bottom: 3px; padding: 2px; background: var(--cream); line-height: 0; }
.cell .who.mine { background: var(--sage); }
.cell .pick { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border: 2px solid var(--cream); background: rgba(56,74,47,.55); }
.cell.picked .pick { background: var(--sage); border-color: var(--ink); }
.cell.picked img { outline: 3px solid var(--sage); outline-offset: -3px; }

/* viewer */
.viewer { position: fixed; inset: 0; background: rgba(27,29,42,.96); display: none; flex-direction: column; z-index: 10; }
.viewer.open { display: flex; }
.viewer .bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: var(--cream); }
.viewer .bar button, .viewer .bar a { color: var(--cream); background: transparent; border: 0; font: 600 16px var(--body); cursor: pointer; text-decoration: none; }
.viewer .stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
.viewer .stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .arrow { position: absolute; top: 0; bottom: 0; width: 64px; border: 0; background: transparent; color: var(--cream); font-size: 40px; cursor: pointer; }
.viewer .arrow.prev { left: 0; } .viewer .arrow.next { right: 0; }
.viewer .info { display: flex; gap: 12px; align-items: center; padding: 12px 16px; color: var(--cream); flex-wrap: wrap; }
.viewer .info .small { color: #C9B993; }

/* progress */
.bar-track { height: 10px; background: var(--cream); border: 2px solid var(--beige); }
.bar-fill { height: 100%; background: var(--ink); width: 0; transition: width .4s; }

footer.site { margin-top: 40px; font-size: 13px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
footer.site a { color: var(--muted); }
.hidden { display: none !important; }

/* settings page */
.set-grid { display: grid; gap: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 36px; height: 36px; border: 2px solid var(--beige); cursor: pointer; padding: 0; }
.swatch.on { border: 3px solid var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-height: 40px; padding: 6px 14px; font: 600 15px var(--body); background: var(--white); color: var(--ink); border: 2px solid var(--beige); cursor: pointer; }
.opt.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* printable table card: hidden on screen, the only thing on paper */
#print-card { display: none; }
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  #print-card, #print-card * { visibility: visible; }
  #print-card { display: block; position: absolute; left: 0; top: 0; width: 100%; text-align: center; padding-top: 30px; color: #000; }
  #print-card .pc-eyebrow { font: 700 18px var(--display); letter-spacing: 6px; }
  #print-card .pc-name { font: 700 44px var(--body); margin: 14px 0 22px; }
  #print-card .pc-lead { font: 400 20px var(--body); margin: 14px 0; }
  #print-card #pc-qr svg { width: 300px; height: 300px; }
  #print-card .pc-code { font: 600 64px var(--mono); letter-spacing: 14px; margin: 8px 0; }
  #print-card .pc-link { font: 400 18px var(--body); }
}

/* help page */
.help .lead { font-size: 18px; line-height: 1.55; }
.help-steps { margin: 0; padding-left: 22px; display: grid; gap: 12px; font-size: 17px; line-height: 1.55; }
.help .card .stack > div { font-size: 16px; line-height: 1.55; }

/* textareas and date pickers share the input look */
textarea { padding: 10px 14px; min-height: 90px; line-height: 1.4; resize: vertical; }
/* thumb-sized links in the header and footer */
.nav a { padding: 10px 2px; }
footer.site a { display: inline-block; padding: 8px 0; }
/* folding cards on the tribe page */
details.fold > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: '+ show'; font: 600 13px var(--body); letter-spacing: 0; color: var(--ink); text-transform: none; }
details.fold[open] > summary::after { content: '- hide'; }
/* phones: add photos and the photos themselves come before downloads and organiser things */
@media (max-width: 700px) {
  #page > #add { order: 1; }
  #page > #people-block, #page > #grid, #page > #more-row, #page > #empty { order: 2; }
  #page > #downloads { order: 3; }
  #page > #invite { order: 4; }
  #page > #org { order: 5; }
}
/* bigger back links */
#page > div:first-child > a.small { display: inline-block; padding: 10px 0; font-size: 15px; }
.viewer .bar button { padding: 10px 6px; }
footer.site { align-items: center; }
details.fold > summary::after { white-space: nowrap; margin-left: 12px; }

/* web upload list: amber = busy, green = done, red = failed; every state also has words and a symbol */
.up-head { font-weight: 600; padding: 10px 12px; border-left: 6px solid var(--muted); background: var(--white); }
.up-head.busy { border-color: var(--amber); background: #FDF1D6; }
.up-head.ok { border-color: var(--sage); background: #EEF2E4; color: var(--ink); }
.up-head.bad { border-color: var(--terracotta); background: #F6E1DB; color: #7E3526; }
.up-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; font-size: 14px; background: var(--white); border-left: 5px solid var(--beige); color: var(--muted); }
.up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-state { white-space: nowrap; font-weight: 600; }
.up-row.s-checking, .up-row.s-finishing { border-left-color: var(--amber); color: var(--ink); background: #FDF7E6; }
.up-row.s-sending { border-left-color: var(--amber); color: var(--ink); background: linear-gradient(to right, #FBE3A6 var(--pct), #FDF7E6 var(--pct)); }
.up-row.s-done { border-left-color: var(--sage); background: #EEF2E4; color: var(--ink); }
.up-row.s-already { border-left-color: #B9C2AE; background: #F1F3EC; color: var(--muted); }
.up-row.s-failed { border-left-color: var(--terracotta); background: #F6E1DB; color: #7E3526; }
.up-row.s-failed .up-state { white-space: normal; text-align: right; }

/* picking mode: slide a finger sideways (or drag the mouse) across photos to pick them; up/down still scrolls */
.grid.picking { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.grid.picking .cell, .grid.picking img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.grid.sliding .cell { cursor: crosshair; }

/* upload limit: amber 'nothing sent yet' choice, and grey rows for photos left out */
.up-over { border-left: 6px solid var(--amber); background: #FDF1D6; padding: 12px; }
.up-head.part { border-color: var(--amber); background: #FDF1D6; color: var(--ink); }
.up-row.s-over { border-left-color: #B9B2A0; background: #EFEBE2; color: var(--muted); }

/* organiser: add people */
.cand-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cand { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; background: var(--white); border: 2px solid var(--beige); cursor: pointer; font-size: 14px; }
.cand:has(input:checked) { border-color: var(--ink); background: #EEF2E4; }
.cand input { margin: 0; }
.add-res { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--white); border-left: 5px solid var(--beige); font-size: 14px; }
.add-res.s-added { border-left-color: var(--sage); background: #EEF2E4; }
.add-res.s-invited { border-left-color: var(--amber); background: #FDF7E6; }
.add-res.s-unavailable, .add-res.s-invalid, .add-res.s-limited { border-left-color: #B9B2A0; color: var(--muted); }
/* avatar picker tiles (settings): the part drawn on your own face, label under it */
.opt.tile { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; min-width: 64px; }
.opt.tile span { font-size: 12px; font-weight: 500; }
.opt.tile.on { background: var(--beige); color: var(--ink); border-color: var(--ink); }
.opt.tile svg { display: block; }