/* Important people (people.js, people-ui.js). The chips, rows, dots, sheets and swatch tiles are the shell's
   (app.css v2: .chip, .people, .dot[data-tag], dialog.dlg-sheet, .swatches); the tag colours are the shell's
   --tag-* tokens (light and dark, app.css), checked against people.js PALETTE in src/people.test.js.
   This file adds only the tag's mark (its initial in a ring of the tag colour), which carries the tag where there is
   no tag name beside it: the table cards, the key, the print and the place cards. Colour is never alone. */
.tag-couple { --c: var(--tag-gold); } .tag-navy { --c: var(--tag-navy); } .tag-heather { --c: var(--tag-heather); }
.tag-teal { --c: var(--tag-teal); } .tag-moss { --c: var(--tag-moss); } .tag-slate { --c: var(--tag-slate); }
.tag-rose { --c: var(--tag-rose); }
/* paper is always paper: the print preview, the printed plan and the place cards use the light colours */
.sheet, .sp-sheet {
  --tag-gold: #9C7A3C; --tag-navy: #2E4A7A; --tag-heather: #7B4B7A; --tag-teal: #2D6E6E;
  --tag-moss: #4F6B2E; --tag-slate: #5B6670; --tag-rose: #A8506A;
}

/* the mark: a ring in the tag colour, the initial inside in ink. Centred by flex with line-height 1 and no vertical
   padding; .pm (the letter's own box) is trimmed to the capital's height (text-box), because Jost's ascent and descent
   are not symmetrical about its capitals and a line box would sit the letter ~0.06em high. `.key .pmark` outranks the
   shell's `.key span` (app.css), which made the mark a start-aligned flex row and pushed the letter left. */
.pmark, .key .pmark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px;
  border: 2px solid var(--c, var(--fg)); background: var(--surface);
  background: color-mix(in srgb, var(--c, var(--fg)) 16%, var(--surface));
  color: var(--fg); font: 600 11px/1 var(--f-body); letter-spacing: 0; text-transform: none; white-space: nowrap; gap: 0;
}
.pmark > .pm { display: block; margin: 0; padding: 0; line-height: 1; text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) { .pmark > .pm { position: relative; top: .05em; } }
.gbtn .pmark { margin-right: 2px; }
.gbtn .nm { min-width: 0; }
.key .pmark { margin-right: 2px; }

/* Guests: the picked tag's edit button under the chips; the tag sheet's remove line */
.people-sel { margin: 0; }
.people-sel[hidden], .people[hidden], .swatches[hidden], .tag-remove:empty { display: none; }
.people-sel .btn-quiet { display: inline-flex; align-items: center; gap: 8px; }
.people-sel .ico { width: 16px; height: 16px; }
/* people-ui.js marks the first guest of each line .party (solid rule above); every later guest on the same line gets the
   dashed rule, the first after a .party row too (the shell's rule skips it) */
.people li + li:not(.party) { border-top: 1px dashed var(--rule); }
.tag-remove { display: grid; gap: 8px; }
.tag-remove .btn-quiet { justify-self: center; }
#tag-err .ico { width: 18px; height: 18px; }

/* print preview and paper: the mark in ink on white, so it reads on a greyscale printer */
.sheet .pmark, .sp-sheet .pmark { background: #fff; color: var(--paper-ink, #14261D); min-width: 1.5em; height: 1.5em; border-width: max(1.5px, .2em); border-radius: .75em; font-size: .62em; padding: 0 .2em; vertical-align: .12em; }
.ps-table li .pmark, .sp-pnames li .pmark { margin-right: .35em; }
.ps-key, .sp-pkey { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 1.6em; font-family: var(--f-body); color: var(--paper-ink, #14261D); }
.ps-key { gap: 1cqw 3cqw; font-size: max(10px, 1.8cqw); }
.ps-key li, .sp-pkey li { display: inline-flex; align-items: center; gap: .5em; }
.ps-key .pmark, .sp-pkey .pmark { font-size: .85em; vertical-align: 0; }
.pc-table { display: inline-flex; align-items: center; gap: .6em; }
.pc-table .pmark, .sp-ctable .pmark { font-size: .9em; letter-spacing: 0; color: var(--paper-ink, #14261D); margin-right: .4em; }