:root {
  --bg: #faf9f7;
  --panel: #ffffff;
  --ink: #1a1917;
  --muted: #6d6a63;
  --line: #e2ded7;
  --accent: #1a1917;
  --pass: #2f6b46;
  --fail: #a13b2f;
  --warn: #8a6a1f;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f;
    --panel: #1d1c18;
    --ink: #f0ede6;
    --muted: #9d988d;
    --line: #302e28;
    --accent: #f0ede6;
    --pass: #7fbe94;
    --fail: #e0897a;
    --warn: #d6b563;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px 16px 80px; }

header.top {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 20;
}
header.top h1 {
  font: 600 19px/1 ui-serif, Georgia, serif; margin: 0; letter-spacing: -0.01em;
}
header.top nav { display: flex; gap: 14px; font-size: 14px; margin-left: auto; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover, header.top nav a.on { color: var(--ink); }

.stats { font-size: 13px; color: var(--muted); }
.notice {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  padding: 10px 12px; border-radius: var(--radius); margin: 12px 0; font-size: 14px;
  color: var(--muted);
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.chip {
  font-size: 13px; padding: 5px 11px; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--muted); background: var(--panel);
}
.chip.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.card .shot img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--line); }
.card .shot { display: block; }
.card .body { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.titleline { min-height: 18px; }
.ttl {
  font-size: 13px; font-weight: 600; line-height: 1.3; display: block;
  border-radius: 4px; padding: 1px 3px; margin: -1px -3px; cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ttl:hover { background: var(--bg); }
.ttl.ghosted { font-weight: 400; font-style: italic; color: var(--muted); }
.ttl[contenteditable="true"] {
  white-space: normal; outline: 2px solid var(--accent); background: var(--bg);
  cursor: text;
}

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  font: inherit; font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.5;
  padding: 1px 7px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.pill:hover { color: var(--ink); border-color: var(--accent); }
.pill.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.pill.mute { cursor: default; }
.pill.mute:hover { color: var(--muted); border-color: var(--line); }
.pill.pass { color: var(--pass); border-color: var(--pass); }
.pill.fail { color: var(--fail); border-color: var(--fail); }
.pill.borderline { color: var(--warn); border-color: var(--warn); }

label.check {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  cursor: pointer; margin-top: auto; padding-top: 4px;
}
label.check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
label.check.on { color: var(--ink); font-weight: 600; }

/* item detail */
.detail { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .detail { grid-template-columns: minmax(0,5fr) minmax(0,6fr); } }
.detail img.hero {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block;
}
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 16px;
}
.panel h2 {
  font: 600 12px/1 ui-sans-serif, sans-serif; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin: 0 0 10px;
}
textarea, input[type=text], input[type=password] {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
button, .btn {
  font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg);
  cursor: pointer; text-decoration: none; display: inline-block;
}
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.saved { font-size: 12.5px; color: var(--pass); opacity: 0; transition: opacity .2s; }
.saved.show { opacity: 1; }

dl.attrs { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: 14px; }
dl.attrs dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
dl.attrs dd { margin: 0; }

ul.matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.matches li { display: flex; gap: 11px; align-items: flex-start; }
ul.matches img { width: 62px; height: 78px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: none; background: var(--line); }
ul.matches .m-body { flex: 1; min-width: 0; font-size: 13.5px; }
ul.matches .m-title { font-weight: 600; text-decoration: none; display: block; }
ul.matches .m-meta { color: var(--muted); font-size: 12.5px; }
.center { text-align: center; padding: 60px 20px; color: var(--muted); }
.login { max-width: 340px; margin: 14vh auto; }

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 20px 16px; text-align: center; margin: 0 0 18px; transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--accent); background: var(--bg); }
.drop p { margin: 0 0 4px; font-size: 14.5px; }
.drop .hint { margin: 4px 0 0; }
.drop input[type=file] { display: none; }
.drop label.pick {
  display: inline-block; margin-top: 9px; font-size: 14px; padding: 7px 14px;
  border: 1px solid var(--accent); border-radius: 8px; cursor: pointer;
  background: var(--accent); color: var(--bg);
}
.drop.busy { opacity: 0.6; pointer-events: none; }

kbd {
  font: ui-monospace, monospace; font-size: 0.78em; line-height: 1.5;
  padding: 0 4px; min-width: 15px; display: inline-block; text-align: center;
  border: 1px solid var(--line); border-radius: 3px;
  background: transparent; color: var(--muted);
}

.linkrow {
  display: flex; gap: 8px; margin: 14px auto 0; max-width: 520px;
}
.linkrow input { flex: 1; font-size: 14px; padding: 8px 10px; }
.linkrow button { flex: none; }
@media (max-width: 520px) { .linkrow { flex-direction: column; } }

.twocol { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .twocol { grid-template-columns: 1fr 1fr; } }
select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.intent { display: grid; gap: 8px; }
.intent .opt {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 14px;
}
.intent .opt.on { border-color: var(--accent); }
.intent .opt input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.intent .opt .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* per-card actions */
.card .acts {
  display: flex; gap: 4px; margin-top: auto; padding-top: 6px;
  border-top: 1px solid var(--line);
}
.card .acts button {
  flex: 1; font-size: 11.5px; padding: 3px 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.card .acts button:hover { color: var(--ink); border-color: var(--accent); }
.card .acts button.no:hover { color: var(--fail); border-color: var(--fail); }
.card .acts button.del:hover { color: var(--fail); border-color: var(--fail); }

/* modal */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0,0,0,0.6); padding: 16px; overflow: auto;
}
.modal.open { display: block; }
.modal .sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 940px; margin: 24px auto; padding: 16px;
}
.modal .cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .modal .cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.cropwrap {
  position: relative; display: inline-block; max-width: 100%; line-height: 0;
  cursor: crosshair; user-select: none; touch-action: none;
}
.cropwrap img { max-width: 100%; max-height: 62vh; display: block; border-radius: 8px; }
.cropbox {
  position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
  display: none; pointer-events: none;
}
.cropbox.on { display: block; }
.modal h3 { font: 600 15px/1.3 ui-serif, Georgia, serif; margin: 0 0 8px; }

/* drag to group, iPhone-app-folder style */
.card { touch-action: manipulation; }
.card.dragsource { opacity: 0.3; }
.card.willgroup {
  outline: none;
  transform: scale(0.965);
  transition: transform .13s ease;
}
.dragghost {
  position: fixed; z-index: 300; pointer-events: none; width: 150px;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%) scale(0.78);
  transition: transform .14s ease, opacity .14s ease;
}
.dragghost img { width: 100%; display: block; }
.dragghost.snap { transform: translate(-50%, -50%) scale(0.62); }
.groupbox {
  position: absolute; z-index: 90; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 0; transform: scale(0.98);
  transition: opacity .14s ease, transform .14s ease,
              left .14s ease, top .14s ease, width .14s ease, height .14s ease;
}
.groupbox.on { opacity: 1; transform: scale(1); }
.stack {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  background: rgba(0,0,0,0.62); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; backdrop-filter: blur(4px);
}
.card { position: relative; }
.grabhint {
  font-size: 11.5px; color: var(--muted); text-align: center; margin: 0 0 10px;
}

.shortcutbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 12px; margin: 0 0 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.shortcutbar .pill { font-size: 12.5px; padding: 4px 11px; }
.shortcutbar form { display: inline; margin: 0; }
.shortcutbar .barsep {
  width: 1px; align-self: stretch; background: var(--line); margin: 0 4px;
}
.pill.no:hover { color: var(--fail); border-color: var(--fail); }
.pill.del:hover { color: var(--fail); border-color: var(--fail); }
ul.linklist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
ul.linklist a { font-size: 13.5px; word-break: break-all; color: var(--ink); }

.offcount {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 2px;
  font-size: 11px; line-height: 16px; text-align: center; border-radius: 999px;
  background: var(--warn); color: var(--bg); font-weight: 600;
}


/* Touch targets. 44pt is a touch requirement, so it is scoped to touch rather than
   imposed on a mouse, where a 26px control is comfortable and denser is better. */
@media (pointer: coarse) {
  .pill, .card .acts button, .shortcutbar .pill {
    min-height: 44px;
    padding-left: 14px; padding-right: 14px;
    font-size: 13.5px;
  }
  .ttl { min-height: 34px; display: flex; align-items: center; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
}

/* Delete sits apart from the everyday actions: destruction should not be adjacent to
   the control a thumb reaches for. The confirm stays. */
.actsep { flex: none; width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.card .acts button.del { color: var(--muted); }
.card .acts button.del:hover { color: var(--fail); border-color: var(--fail); background: transparent; }

/* ---------- triage: one photo, one decision, keyboard driven ---------- */
.triage { max-width: 1120px; margin: 0 auto; }
.tri-head {
  display: flex; gap: 20px; align-items: flex-end; justify-content: space-between;
  margin: 0 0 22px; flex-wrap: wrap;
}
.tri-head .eyebrow {
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.bar { width: 260px; max-width: 100%; height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }

.tri-body { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .tri-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.tri-shot img {
  width: 100%; max-height: 74vh; object-fit: contain; display: block;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.tri-panel { display: flex; flex-direction: column; }
.tri-label {
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); display: block; margin: 0 0 7px;
}

/* Triage shows the same fields as the item page, from the same partial. On the item
   page each group is its own raised panel. Nested inside the triage panel that reads
   as a box inside a box, so here the groups flatten into sections of the one panel,
   separated by a rule instead of a border. */
.tri-fields .panel {
  background: none; border: 0; border-radius: 0;
  padding: 22px 0 0; margin: 0;
}
.tri-fields .panel + .panel { border-top: 1px solid var(--line); margin-top: 22px; }
.tri-fields .panel h2 {
  font: inherit; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 7px;
}
.tri-fields { margin-top: 4px; }

.tri-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.tri-opt {
  font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 8px;
}
.tri-opt:hover { border-color: var(--accent); }
.tri-opt.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
/* Inside a filled button the key hint must take the button's own text colour and
   drop its background, or it renders as a dark box on a dark fill. */
.tri-opt.on kbd, .tri-actions .ghost.on kbd, .tri-primary kbd,
button:not(.ghost) kbd {
  background: transparent; color: currentColor; border-color: currentColor; opacity: 0.75;
}

.tri-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
/* Own is a toggle, so it has to look held down. It borrows the filled treatment the
   scope and want choices use, because it is the same kind of answer. */
.tri-actions .ghost.on {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}
.tri-primary {
  font-size: 15px; padding: 11px 18px; display: inline-flex; align-items: center; gap: 9px;
}

.tri-recent { display: flex; gap: 8px; flex-wrap: wrap; }
.tri-thumb {
  padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: none; cursor: pointer; line-height: 0;
}
.tri-thumb:hover { border-color: var(--accent); }
.tri-thumb img { width: 54px; height: 70px; object-fit: cover; display: block; }

/* Nothing on a tile is revealed by hovering. What she has set is what she should see
   without touching anything, and hover is unavailable on a phone regardless. The
   actions stay quiet until hovered, but they stay visible. */
.card .acts button { transition: color .12s ease, border-color .12s ease; }

/* ---------- capture: one line at rest, the page is the drop target ---------- */
.capture {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0 0 16px; overflow: hidden;
}
.capture > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14px;
}
.capture > summary::-webkit-details-marker { display: none; }
.capture > summary::after {
  content: '+'; margin-left: auto; color: var(--muted); font-size: 15px; line-height: 1;
}
.capture[open] > summary::after { content: '\2212'; }
.capture > summary:hover { background: var(--bg); }
.cap-main { font-weight: 600; }
.cap-hint { color: var(--muted); font-size: 12.5px; }
.cap-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.cap-body .linkrow { margin: 0; max-width: none; }
.capture.over { border-color: var(--accent); background: var(--bg); }
.capture.over > summary .cap-main::after { content: '  drop to add'; color: var(--accent); }
.capture.busy { opacity: 0.6; pointer-events: none; }

/* ---- item page: fields, tags, found details, suggestions ---- */
.fieldlabel {
  display: block; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 5px;
}
.fieldlabel:first-of-type { margin-top: 0; }
.fieldflash {
  font-size: 12px; color: var(--pass); opacity: 0; transition: opacity .18s;
  margin-left: 8px;
}
.fieldflash.show { opacity: 1; }
.fieldflash.bad { color: var(--fail); }

.tagbox {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px; background: var(--bg);
  min-height: 42px;
}
.mtag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 6px;
  background: var(--panel); font-size: 13px;
}
.mpct {
  width: 42px; font: inherit; font-size: 12.5px; text-align: right;
  border: none; background: transparent; color: var(--ink); padding: 0;
  font-variant-numeric: tabular-nums;
}
.mpct:focus { outline: none; border-bottom: 1px solid var(--accent); }
.mname { color: var(--ink); }
.mx {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 3px;
}
.mx:hover { color: var(--fail); }
.maddfield {
  flex: 1; min-width: 130px; border: none; background: transparent; padding: 2px;
  font: inherit; font-size: 13px; color: var(--ink);
}
.maddfield:focus { outline: none; }
.msum { font-size: 11.5px; color: var(--warn); }

.tagpicker { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tagpicker .pill.mineTag { border-color: var(--accent); color: var(--ink); }

.foundbox {
  margin-top: 14px; padding: 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px; background: var(--bg);
}
.foundrow {
  display: flex; gap: 10px; align-items: baseline; padding: 5px 0;
  border-top: 1px solid var(--line);
}
.foundrow:first-of-type { border-top: none; }
.foundlabel {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); flex: none; width: 74px;
}
.foundval { flex: 1; font-size: 13.5px; word-break: break-word; }

.sugg {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.sugg:first-child { border-top: none; padding-top: 0; }

h2.sect {
  font: 600 12px/1 ui-sans-serif, sans-serif; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin: 20px 0 8px;
}
.siblings { display: flex; flex-wrap: wrap; gap: 7px; }
.siblings img {
  width: 62px; height: 80px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line);
}
details.readout > summary { cursor: pointer; list-style: revert; }
details.readout > summary h2 { margin: 0; }

/* On a phone the bar follows the thumb rather than scrolling away at the top. */
@media (max-width: 760px) {
  .shortcutbar {
    position: sticky; bottom: 0; z-index: 20; margin: 0 -16px;
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.18);
  }
  .detail { padding-bottom: 8px; }
}

.mode {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin: 8px 0 0;
}
.mode .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
}
.mode.typing { color: var(--ink); }
.mode.typing .dot { background: var(--warn); }

.statetag {
  display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--line); color: var(--muted);
}
.statetag.fail { color: var(--fail); border-color: var(--fail); }

/* A call to action sits with the thing it acts on. */
li.linkrow-item {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--rule-soft, var(--line));
}
li.linkrow-item:last-child { border-bottom: none; }
li.linkrow-item a { flex: 1; min-width: 0; word-break: break-all; }
li.linkrow-item .pill { flex: none; }

/* Everything she has entered shows on the tile. Tooltips are a second copy, never
   the only copy. */
.cardmeta { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.cardmeta .strong { color: var(--ink); font-weight: 600; }
.cardnote {
  margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pill.mute.fail { color: var(--fail); border-color: var(--fail); }
.card .body { gap: 5px; }


/* Her own tags on a tile. */
.tagrow { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  font-size: 10.5px; line-height: 1.5; letter-spacing: 0.01em;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
  white-space: nowrap;
}

.linknote { flex: none; font-size: 11.5px; color: var(--muted); max-width: 46ch; }

/* Cut-outs live under the photo they came from; they never get a tile of their own. */
.kids { display: flex; flex-wrap: wrap; gap: 4px; }
.kid { position: relative; line-height: 0; }
.kid img {
  width: 34px; height: 44px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line);
}
.kid:hover img { border-color: var(--accent); }
.kidflag {
  position: absolute; bottom: 1px; left: 1px; right: 1px;
  font-size: 8px; line-height: 1.4; text-align: center; letter-spacing: .02em;
  background: rgba(0,0,0,.62); color: #fff; border-radius: 0 0 3px 3px;
}
.kidlist { display: grid; gap: 6px; }
.kidrow {
  display: flex; gap: 9px; align-items: center; text-decoration: none;
  padding: 5px; border: 1px solid var(--line); border-radius: 8px;
}
.kidrow:hover { border-color: var(--accent); }
.kidrow img {
  width: 40px; height: 52px; object-fit: cover; border-radius: 5px; flex: none;
}
.kidname { font-size: 13.5px; color: var(--ink); display: grid; gap: 1px; }

/* What the app read off a page, kept visibly apart from what Mary wrote. Quieter
   than her own notes, and not editable, so the two are never confused. */
.pagenote {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Her correction of a group outranks the app's reading of it, so it is set as the
   plain statement and the app's version is demoted underneath. */
.correction { font-size: 15px; line-height: 1.5; }
.appread { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.appread.demoted { opacity: 0.72; }

/* Previous and next sit with the way back to the library, because all three answer
   the same question: where do I go from here. */
.itemnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.itemnav .pill { text-decoration: none; }