/* Puppy Connection breeder portal and operator screens. One stylesheet, copied to both
   Workers' public folders by app/dev/setup.mjs, so the two tools look like one product.
   The shell is Option A from app/preview (Alex, 2026-10-02): a dark grouped menu like the
   Teapup editor, and a centered work area that uses the width up to 92rem. Colors are the
   concept site's tokens (css/style.css). */

:root {
  color-scheme: light only;
  --ink: #262626; --ink-soft: #414141; --muted: #6b665c;
  --gold: #f7d57f; --bronze: #bc9b5d; --olive: #7c6b40;
  --paper: #fcfcfc; --ground: #ece6d8; --surface: #fff; --cream: #e7e2d2;
  --line: #ddd5c3; --line-strong: #cfc8b7; --row-hover: #fbf9f3;
  --ok: #2f6140; --ok-bg: #e4efe7; --alert: #92402f; --alert-bg: #f6e3de;
  --warn: #7d5f12; --warn-bg: #fbf0d3; --info-bg: #eceae4;
  --rail-bg: #262626; --rail-ink: #f3efe4; --rail-soft: #b9b2a2; --rail-line: rgba(255,255,255,.1);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 4px; --r-lg: 6px;
  --rail: 15.5rem;
  --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #262626; --paper: #fcfcfc; --ground: #ece6d8; --surface: #fff; --line: #ddd5c3; }
  html, body { background: #ece6d8; color: #262626; }
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { font: 15px/1.55 var(--sans); color: var(--ink); background: var(--ground); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; margin: 0; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }
a { color: var(--olive); }
code { font-size: .88em; background: var(--info-bg); padding: .05rem .3rem; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap);
  padding: .5rem 1.05rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  color: var(--ink); font: 500 .92rem var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--bronze); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-gold { background: var(--gold); border-color: #e6c264; color: var(--ink); }
.btn-danger { color: var(--alert); border-color: #d9b3aa; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--olive); }
.btn-sm { min-height: 36px; padding: .3rem .75rem; font-size: .85rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

label { display: block; font-weight: 500; font-size: .9rem; margin: 0 0 .3rem; }
.field { margin-bottom: .9rem; }
.hint { font-size: .82rem; color: var(--muted); margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=date], input[type=number], input[type=search],
select, textarea { width: 100%; min-height: var(--tap); padding: .5rem .7rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: #fff; color: var(--ink); font: 1rem var(--sans); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--bronze); outline: none; box-shadow: 0 0 0 3px rgba(188,155,93,.25); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 1rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { width: 20px; height: 20px; margin-top: .15rem; flex: none; }

/* state pills */
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 4px; font-size: .76rem; font-weight: 600;
  background: var(--info-bg); color: #55524b; white-space: nowrap; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-alert { background: var(--alert-bg); color: var(--alert); }
.pill-gold { background: #fbefc8; color: var(--olive); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }

/* notices */
.notice { border: 1px solid var(--line); border-left: 4px solid var(--bronze); border-radius: var(--radius); background: #fff;
  padding: .8rem 1rem; margin: 0 0 1.2rem; }
.notice > :last-child { margin-bottom: 0; }
.notice-ok { border-left-color: var(--ok); }
.notice-alert { border-left-color: var(--alert); }
.notice-sim { border-left-color: #6b7a8c; background: #f4f6f8; font-size: .88rem; }
.error { color: var(--alert); font-size: .9rem; margin-top: .5rem; }

/* app shell: dark grouped menu, sticky top bar, centered work area */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100dvh; }
.rail { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--rail-bg); color: var(--rail-ink); }
.rail-head { padding: .6rem 1rem .35rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .45rem; }
.rail-head a { display: block; width: 6.6rem; }
.rail-head img { width: 100%; height: auto; display: block; }
.rail-head .role { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.nav { flex: 1; overflow-y: auto; padding: .1rem .6rem .5rem; display: grid; gap: 0; align-content: start; }
/* Group headings read as headings, not as dimmer links (Alex, 2026-10-10): gold, condensed
   spacing, and a rule above every group after the first. */
.nav-group { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: .85; padding: .45rem .6rem .15rem; }
.nav-group ~ .nav-group { border-top: 1px solid var(--rail-line); margin-top: .2rem; padding-top: .4rem; }
.nav a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 30px; padding: .2rem .6rem; font-size: .9rem;
  border-radius: var(--radius); color: var(--rail-soft); text-decoration: none; font-weight: 550; }
.nav a { color: #e9e4d8; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.is-on { background: rgba(247,213,127,.16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); border-radius: 0 4px 4px 0; }
.nav .tally { font-size: .7rem; font-variant-numeric: tabular-nums; padding: 0 .45rem; border-radius: 4px; background: rgba(255,255,255,.1); color: var(--rail-ink); }
.nav a.is-on .tally { background: var(--gold); color: var(--ink); }
.nav-note { font-size: .8rem; color: var(--rail-soft); padding: .5rem .7rem; line-height: 1.4; }
.rail-foot { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 1rem; font-size: .8rem; border-top: 1px solid var(--rail-line); color: var(--rail-soft); }
.rail-foot b { display: block; color: #fff; font-weight: 600; } .rail-foot span { display: block; }
.rail-foot .dot { width: 9px; height: 9px; border-radius: 50%; background: #4f9a63; margin-top: .35rem; flex: none; }
.rail-foot .dot.wait { background: var(--gold); }
.menu-btn { display: none; align-items: center; gap: .5rem; min-height: 40px; padding: .3rem .8rem; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius); background: transparent; color: #fff; font: 600 .9rem var(--sans); cursor: pointer; }
.menu-btn { min-width: 0; flex: 0 1 auto; }
.menu-btn span { color: var(--gold); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-head .role { white-space: nowrap; }
.rail-head > a { flex: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem clamp(1rem, 2.5vw, 2.25rem);
  background: rgba(236,230,216,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); min-height: 60px; }
.finder { flex: 1 1 0; max-width: 32rem; margin: 0; }
.finder input { min-height: 40px; }
.who { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .9rem; }
.who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work { flex: 1; padding: 1.6rem clamp(1rem, 2.5vw, 2.25rem) 4rem; }
.view { max-width: 92rem; margin-inline: auto; }
.view-narrow { max-width: 56rem; }
.pup-search { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.pup-search input { flex: 1 1 18rem; }
.pup-search select { flex: 0 1 12rem; width: auto; }
.puppy-card[hidden], [data-litter-card][hidden] { display: none !important; }
/* Alex, 2026-10-31. The top bar's ends line up with the page content below it, on wide windows and on the narrow screens. */
.topbar { padding-inline: max(clamp(1rem, 2.5vw, 2.25rem), calc((100% - 92rem) / 2)); }
.topbar.narrow { padding-inline: max(clamp(1rem, 2.5vw, 2.25rem), calc((100% - 56rem) / 2)); }

/* page header: title, one line of purpose, actions */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .8rem 1rem; margin-bottom: 1.2rem; }
.page-head > div:first-child { flex: 1 1 30rem; min-width: 0; }
.lede { margin: .3rem 0 0; color: var(--muted); max-width: 70ch; }
.head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* cards, panels and stats */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; margin-bottom: 1rem; }
@media (min-width: 1100px) { .card { padding: 1.25rem; } }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.cols > .card, .cols > .panel { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--bronze); }
.stat b { display: block; font: 600 1.7rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.stat span { font-size: .85rem; color: var(--muted); }
.attention { list-style: none; padding: 0; margin: 0; }
.attention li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.attention li:first-child { border-top: 0; padding-top: 0; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
  font-weight: 700; background: var(--ground); border: 1px solid var(--line-strong); }
.steps .done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps .now .dot { background: var(--gold); border-color: #e6c264; }
.empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); margin: 1rem; }
.empty b { display: block; color: var(--ink); font: 600 1.05rem var(--serif); margin-bottom: .3rem; }
.empty .btn { margin-top: .8rem; }

/* list toolbar, tables and paging */
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.toolbar input[type=search] { flex: 1 1 14rem; width: auto; min-height: 40px; }
.toolbar select { flex: 0 1 13rem; width: auto; min-height: 40px; }
.toolbar .count { margin-left: auto; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.panel > .table-wrap, .card > .table-wrap { border: 0; }
.table-wrap.boxed { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  font-weight: 600; padding: .65rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.list td { padding: .55rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list td b { font-weight: 600; }
table.list .sub { display: block; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
table.list .when { white-space: nowrap; }
table.list tr.clickable { cursor: pointer; }
table.list tr.clickable:hover td, table.list tr.clickable:focus-visible td { background: var(--row-hover); }
table.list tr.clickable:focus-visible { outline: 3px solid var(--bronze); outline-offset: -3px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.act { text-align: right; width: 1%; white-space: nowrap; }
.act .btn-row { margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; padding: .7rem 1rem; font-size: .88rem; border-top: 1px solid var(--line); }
.thumb { width: 56px; height: 42px; object-fit: cover; border-radius: var(--radius); background: var(--cream); display: block; }
.thumb-empty { width: 56px; height: 42px; border-radius: var(--radius); background: var(--ground); border: 1px dashed var(--line-strong);
  display: grid; place-items: center; font-size: .66rem; color: var(--muted); text-align: center; line-height: 1.1; }

.puppy-row { display: grid; grid-template-columns: 64px 1fr auto; gap: .8rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line); }
.puppy-row:first-of-type { border-top: 0; }
.puppy-row .thumb, .puppy-row .thumb-empty { width: 64px; height: 48px; }
.puppy-row .meta { min-width: 0; }
.puppy-row .meta b { display: block; }
.puppy-row .chips { margin-top: .25rem; }
.puppy-row .btn-row { margin: 0; }
/* puppies inside a litter sit as small cards, several across on a wide screen */
.puppy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: .7rem; margin-top: .4rem; }
.puppy-grid .puppy-row { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem .7rem; background: #fff; }
.puppy-grid .puppy-row:first-of-type { border-top: 1px solid var(--line); }

/* A puppy inside a litter (2026-10-10, Alex: the Edit button floated mid-card and the actions
   sat at different heights). Edit sits top right beside the name, the standing line runs the
   full width, and the actions are a ruled row pinned to the bottom, so in a row of cards the
   actions line up whatever each card holds. */
/* Alex, 2026-11-01. The card edge darkened from #b3a990 to #978a68, the same warm hue, so each card
   stands out on the white litter section: 3.4 to 1 against white, up from 2.3 to 1. */
.puppy-card { display: flex; flex-direction: column; gap: .5rem; min-width: 0; border: 1px solid #978a68; border-radius: var(--r-lg); padding: .75rem .8rem .5rem; background: #fff; box-shadow: 0 1px 2px rgba(38, 38, 38, .05); }
.pc-top { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
.pc-top .thumb, .pc-top .thumb-empty { width: 72px; height: 72px; }
.pc-top .meta { min-width: 0; }
.pc-top .meta b { display: block; font-size: 1rem; line-height: 1.25; }
.pc-top .meta .small { display: block; margin-top: .1rem; line-height: 1.4; }
.pc-top .chips { margin-top: .35rem; }
.puppy-card .standing { margin: 0; }
.puppy-card .row-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 1.2rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.puppy-card .row-actions:empty { display: none; }
/* No side padding, so a link that wraps to a second line starts at the same edge as the first. */
.puppy-card .row-actions .btn { padding-left: 0; padding-right: 0; border: 0; background: none; }
.puppy-card .row-actions .btn:hover { text-decoration: underline; }

/* Plan P2.1, where a puppy stands, and P2.4, the quick actions under each puppy */
.standing { font-size: .84rem; color: var(--ink-soft); margin-top: .3rem; line-height: 1.4; }
.standing-ok { color: var(--ok); } .standing-warn { color: var(--warn); } .standing-alert { color: var(--alert); } .standing-gold { color: var(--olive); }
.puppy-row .row-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .2rem .3rem; margin: -.2rem 0 0 -.6rem; }
.puppy-row .row-actions:empty { display: none; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 0 1rem; }
table.list tr.total-row td { background: var(--ground); }

/* Plan P2.3, the profile extras */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.brand-slot { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .8rem; background: #fff; min-width: 0; }
.brand-slot > b { display: block; margin-bottom: .5rem; }
.brand-slot img, .brand-empty { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--radius); background: var(--ground); }
.brand-slot[data-kind="kennel"] img { object-fit: cover; }
.brand-slot img { max-height: 12rem; }
.brand-empty { display: grid; place-items: center; color: var(--muted); font-size: .85rem; border: 1px dashed var(--line-strong); aspect-ratio: auto; height: 5rem; }
.brand-slot .btn-row { margin-top: .5rem; }
.breed-picks { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem .9rem .8rem; margin: 0 0 1rem; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: .25rem 1rem; }
.breed-picks legend { font-weight: 500; font-size: .9rem; padding: 0 .3rem; }
.breed-picks .check { align-items: center; min-height: 40px; font-size: .92rem; }
/* Alex, 2026-10-31. Type-to-search in front of a long select (combo.js), for about 330 breeds.
   The select stays in the form, hidden, and the box and its list carry the picking. */
.combo { position: relative; min-width: 0; }
.combo input[role=combobox] { padding-right: 2.2rem; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23414141' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .8rem center; }
.combo input[role=combobox]:disabled { background-color: var(--ground); color: var(--muted); }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none;
  max-height: min(18rem, 50vh); overflow-y: auto; overscroll-behavior: contain; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(38,38,38,.14); }
.combo-list [role=option] { display: flex; align-items: center; min-height: 36px; padding: .3rem .75rem; cursor: pointer; }
.combo-list [role=option]:hover { background: var(--row-hover); }
.combo-list [role=option][aria-selected=true] { background: var(--cream); box-shadow: inset 3px 0 0 var(--bronze); }
.combo-list .is-current { font-weight: 600; }
.combo-none { padding: .5rem .75rem; color: var(--muted); }
.toolbar .combo { flex: 0 1 13rem; }
.toolbar .combo input[role=combobox] { min-height: 40px; }
.panel:has(.combo.is-open) { overflow: visible; }
/* The find box above Breeds you raise. Ticked breeds sit first and always show. */
.breed-picks.has-find { display: block; }
.pick-find { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .2rem 0 .5rem; }
.pick-find input { flex: 1 1 14rem; width: auto; min-height: 40px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: .25rem 1rem;
  max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.pick-none { margin: .4rem 0 0; }
/* Workplan A13. The reference asked for before approval. */
.reference { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem .9rem .2rem; margin: 0 0 1rem; min-width: 0; }
.reference legend { font-weight: 500; font-size: .9rem; padding: 0 .3rem; }
.reference select { max-width: 100%; }
.brand-pics { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1rem; }
.brand-pics figure { margin: 0; width: 9rem; }
.brand-pics img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: var(--ground); border-radius: var(--radius); border: 1px solid var(--line); }
.brand-pics figcaption { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.help p { max-width: 70ch; }

/* segmented control and tab links */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; max-width: 100%; overflow-x: auto; }
.seg button, .seg a { border: 0; background: #fff; padding: .45rem .8rem; min-height: 40px; font: 500 .86rem var(--sans); cursor: pointer;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.seg > * + * { border-left: 1px solid var(--line-strong) !important; }
.seg button.on, .seg a.on { background: var(--ink); color: #fff; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* the one drawer every edit opens in */
.scrim { position: fixed; inset: 0; background: rgba(20,20,20,.35); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(580px, 100%); background: var(--paper); z-index: 50;
  box-shadow: -10px 0 30px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line-strong); background: var(--ground); }
.drawer-head h2 { margin: 0; }
.drawer-body { padding: 1.1rem 1.2rem 2rem; overflow-y: auto; flex: 1; }
.drawer-body h3 { margin-top: 1.4rem; }
.kv { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1rem; }
.kv { table-layout: fixed; }
.kv td { padding: .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.kv td:first-child { color: var(--muted); width: 38%; padding-right: 1rem; }

/* photo manager */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.photo { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo .tools { display: flex; justify-content: space-between; padding: .2rem; }
.photo .tools button { border: 0; background: transparent; cursor: pointer; font-size: .85rem; padding: .25rem .4rem; min-height: 32px; }
/* Alex, 2026-11-01. Batch photo removal: a box beside each Remove, and the bar above the photos. */
.photo-batch { display: flex; justify-content: flex-end; gap: .5rem; margin: .4rem 0 .6rem; }
.pick-remove { display: inline-flex; align-items: center; gap: .15rem; }
.pick-remove input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--olive, #4f6b52); cursor: pointer; }
.admin-photos .pick-remove { min-height: 36px; padding: 0 .2rem; }
.photo .tools-2 { gap: .3rem; align-items: center; border-top: 1px solid var(--line); }
.photo .tools-2 select { min-height: 32px; padding: .1rem .3rem; font-size: .82rem; width: auto; flex: 1 1 auto; min-width: 0; }
.photo .tools-2 button { color: var(--olive); font-weight: 600; white-space: nowrap; }
.photo[draggable="true"] { cursor: grab; }
.photo.dragging { opacity: .45; }
.photo.drag-over { outline: 3px solid var(--gold); outline-offset: 2px; }
.photo .cover { position: absolute; top: 4px; left: 4px; }
.upload { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: .9rem; text-align: center; background: #fff; margin: 0 0 .8rem; }

/* pay screen */
.pay-row { display: flex; gap: .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
.pay-row:first-child { border-top: 0; }
.pay-row .why { font-size: .85rem; color: var(--muted); }
.total { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 1.05rem; }
.total b { font: 600 1.4rem var(--serif); font-variant-numeric: tabular-nums; }

/* plain pages: sign-in, verify, simulated checkout, test mailbox */
body.plain { display: grid; place-items: start center; min-height: 100dvh; padding: 2.5rem 1rem; }
.plain-card { margin-inline: auto; width: min(540px, 100%); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.6rem 1.8rem; }
.plain-card form { margin-top: .8rem; }
.plain-card .btn { width: 100%; }
.brandmark { display: block; width: 11rem; margin-bottom: 1.2rem; }
/* Continue with Google, styled to Google's sign-in button guidance: white, gray border, the four-color G */
.btn-google { width: 100%; background: #fff; border-color: #747775; color: #1f1f1f; font-weight: 500; gap: .7rem; margin-top: .4rem; }
.btn-google:hover { background: #f8f9fa; border-color: #5f6368; }
.gsi-button { display: flex; justify-content: center; min-height: 44px; margin-top: .4rem; }
.gsi-button:empty { display: none; }
.or { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; margin: 1.1rem 0 .2rem; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
/* Plan P6.2, the emailed sign-in code. Big, spaced digits that read easily off a phone. */
.code-input { font-size: 1.5rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; max-width: 12rem; }
.brandmark img { width: 100%; height: auto; display: block; }
.plain-mark { display: grid; place-items: center; background: var(--rail-bg); border-radius: var(--r-lg); padding: 1rem; margin: -.4rem -.4rem 1.2rem; }
.plain-mark img { width: 10rem; height: auto; display: block; }
/* Launch workplan A27. Choose a kennel: one row a kennel, the whole row a button, names may wrap */
.kennel-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.kennel-list form { margin: 0; }
.kennel-pick { display: grid; gap: .2rem; width: 100%; min-height: var(--tap); padding: .75rem 1rem; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); font: inherit; overflow-wrap: anywhere; }
.kennel-pick:hover { border-color: var(--bronze); background: var(--row-hover); }
.kennel-pick.is-here { border-color: var(--bronze); box-shadow: inset 3px 0 0 var(--gold); }
.kennel-name { font: 600 1.02rem var(--sans); }
.kennel-meta { font-size: .85rem; color: var(--muted); }
.plain-card .kennel-signout { margin-top: 1.2rem; }
.sim-flag { background: #f4f6f8; border: 1px solid #d7dde4; border-radius: var(--radius); padding: .5rem .7rem; font-size: .85rem; color: #3f4a57; }
/* privacy and terms (plan P7.1): a wider card for reading, links under every plain page */
.plain-card.plain-wide { width: min(760px, 100%); }
/* Workplan A11. The Visit site link at the top right of the signed-out pages. */
.plain-site { position: absolute; top: .9rem; right: clamp(1rem, 2.5vw, 2.25rem); font-size: .9rem; color: var(--muted); min-height: 34px; display: inline-flex; align-items: center; }
.plain-foot { display: flex; gap: 1.2rem; justify-content: center; margin: 1rem auto 0; font-size: .85rem; }
.plain-foot a { color: var(--muted); min-height: 34px; display: inline-flex; align-items: center; }
.work-foot { display: flex; gap: 1.2rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; }
.work-foot a { color: var(--muted); min-height: 34px; display: inline-flex; align-items: center; }
.draft-flag { background: #fff8e6; border: 1px solid #e6c264; border-radius: var(--radius); padding: .6rem .8rem; font-size: .9rem; }
.legal { max-width: 70ch; }
.legal h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.legal ul { padding-left: 1.2rem; } .legal li { margin: .3rem 0; }
.replace, .replace-block b { background: #fde8e8; color: #8a1f1f; font-weight: 600; padding: 0 .25rem; border-radius: 4px; }
.replace-block { border: 1px dashed #c96b6b; border-radius: var(--radius); padding: .7rem .8rem; }
.review-note { border-left: 4px solid #e6c264; background: #fff8e6; padding: .5rem .8rem; font-size: .9rem; }
.sim-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
.sim-table td { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.sim-table td + td { text-align: right; font-variant-numeric: tabular-nums; }
.sim-total td { font-weight: 700; border-bottom: 0; }
.mail { border: 1px solid var(--line); border-radius: var(--r-lg); padding: .8rem; margin: .8rem 0; }
.mail header { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .4rem; }
.mail header span { font-size: .8rem; color: var(--muted); }
.mail pre { white-space: pre-wrap; font: .88rem/1.5 var(--sans); background: var(--ground); padding: .7rem; border-radius: var(--radius); margin: 0 0 .6rem; overflow-wrap: anywhere; }

/* plan P3: sortable headings, private notes, the terms editor and banner, attention details */
table.list th.num { text-align: right; }   /* table.list th outranks .num, so number headings need saying (2026-10-10) */
table.list th[data-sort] { padding: 0; }
table.list th .sort { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .3rem; width: 100%; min-height: 40px;
  padding: .65rem 1rem; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap; }
table.list th.num .sort { justify-content: flex-end; }
table.list th .sort::after { content: '\2195'; opacity: .35; }
table.list th[aria-sort=ascending] .sort::after { content: '\2191'; opacity: 1; }
table.list th[aria-sort=descending] .sort::after { content: '\2193'; opacity: 1; }
table.list th .sort:hover { color: var(--ink); }
table.list th .sort:focus-visible { outline: 3px solid var(--bronze); outline-offset: -3px; }
a.rail-foot { text-decoration: none; }
a.rail-foot:hover b { text-decoration: underline; }
.attention .att-sub { display: block; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.attention li > span { min-width: 0; }
.note { padding: .6rem 0; border-top: 1px solid var(--line); }
.note p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.terms-text { min-height: 320px; }
.terms-preview h2 { font-size: 1rem; margin: 1rem 0 .3rem; }
.terms-preview ul { padding-left: 1.2rem; margin: .3rem 0 .6rem; }
.terms-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; background: #fff; max-height: 420px; overflow: auto; overflow-wrap: anywhere; }
.terms-banner { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.terms-banner p { margin: 0; }
/* Workplan A12. Listings that need a new photo, at the top of each portal screen. */
.photo-banner { border-left-color: var(--gold); background: var(--warn-bg); }
.photo-banner > p { margin: 0 0 .4rem; }
.banner-list { list-style: none; margin: 0; padding: 0; }
.banner-list li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; justify-content: space-between; padding: .45rem 0; border-top: 1px solid rgba(125, 95, 18, .18); }
.banner-list li > span { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
/* Workplan A14. Amber's photo standard in the photo step. */
.photo-standard { font-size: .88rem; background: var(--info-bg); border-radius: var(--radius); padding: .6rem .8rem; margin: .4rem 0 .6rem; }
.pay-row > .btn { margin-left: auto; }
table.list td.brk { overflow-wrap: anywhere; }
table.list .row-acts { margin-top: .4rem; }
.show-md, .show-sm { display: none !important; }
@media (max-width: 1100px) { table.list .show-md { display: block !important; } }

.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-lg); z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100% - 2rem); }

/* widths. The menu folds into a strip across the top below 860px */
@media (max-width: 1100px) { .hide-md { display: none; } }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; }
  .rail-head { padding: .5rem .8rem; gap: .6rem; }
  .rail-head a { width: 5rem; }
  .rail-head .role { font-size: .62rem; margin-right: auto; }
  .menu-btn { display: inline-flex; }
  .rail:not(.open) .nav { display: none; }
  .rail.open .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px .4rem; padding: 0 .6rem .6rem; }
  .rail.open .nav-group { grid-column: 1 / -1; padding: .5rem .2rem .1rem; border: 0; margin: 0; }
  .rail-foot, .nav-note { display: none; }
  .nav a { min-height: 40px; padding: .35rem .6rem; }
  .topbar { position: static; padding-block: .5rem; min-height: 0; }
  .topbar:has(.finder) { flex-wrap: nowrap; }
  .finder { max-width: none; }
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 700px) {
  .hide-sm { display: none; }
  .topbar { flex-wrap: wrap; gap: .5rem; }
  .who .name { display: none; }
  /* Workplan A11. With Visit site added, the buttons take a second row rather than run off a
     narrow phone, so none of them is squeezed. */
  .who { flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem; }
  /* The admin's search keeps its full width on a row of its own, and Visit site sits below it. */
  .topbar .finder { flex: 1 1 0; }
  table.list td, table.list th { padding-inline: .45rem; }
  table.list td { overflow-wrap: anywhere; }
  table.list td:first-child, table.list th:first-child { padding-left: .8rem; }
  table.list th[data-sort] { padding: 0; }
  table.list th .sort { padding-inline: .45rem; }
  table.list th:first-child .sort { padding-left: .8rem; }
  /* on a phone only the sorted column shows its arrow, to keep the table inside the screen */
  table.list th[aria-sort=none] .sort::after { display: none; }
  .show-sm { display: inline !important; }
  .thumb, .thumb-empty { width: 44px; height: 33px; }
  table.list .when { white-space: normal; min-width: 5.5rem; }
  .toolbar .count { margin-left: 0; }
  .puppy-row { grid-template-columns: 56px 1fr; }
  .pc-top { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .pc-top .thumb, .pc-top .thumb-empty { width: 56px; height: 56px; }
  .puppy-row .btn, .puppy-row .btn-row { grid-column: 2; justify-self: start; }
  .head-actions { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .drawer:not(.no-anim) { animation: slide .18s ease-out; } @keyframes slide { from { transform: translateX(30px); opacity: .6; } } }
@media print { .topbar, .rail, .drawer, .scrim { display: none !important; } .app { display: block; } }

/* People who can sign in, on the Account screen (2026-10-10). */
.member-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.member-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.member-list li > div { min-width: 0; overflow-wrap: anywhere; }
.member-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .75rem; align-items: end; }
.member-form .field { margin: 0; }
@media (max-width: 640px) { .member-form { grid-template-columns: 1fr; } }
/* Alex, 2026-10-31. Give one person more kennels in the same step, under Add a person. */
.member-form .also-kennels { grid-column: 1 / -1; order: 1; }
.also-list { max-height: 18rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; margin-top: .5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .1rem 1rem; background: var(--surface); }
.also-list .check { min-height: 36px; align-items: center; }
.also-list .check[hidden] { display: none; }


/* Admin: photos managed for a breeder, the sign-ins form and the mailing address (2026-10-11). */
.admin-photos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .8rem; }
.admin-photos li { display: flex; flex-direction: column; gap: .35rem; }
.admin-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--cream); }
.admin-photos .btn-row { margin: 0; gap: .3rem; }
.person-form { display: grid; grid-template-columns: 1fr 1.4fr .8fr auto; gap: .75rem; align-items: end; }
.person-form .field, .addr-form .field { margin: 0; }
.addr-form { display: grid; gap: .5rem; justify-items: start; margin-bottom: 1.2rem; }
.addr-form .field { width: 100%; }
@media (max-width: 760px) { .person-form { grid-template-columns: 1fr; } }

/* Breeders side panel puppies (Alex, 2026-10-19). Four buttons had squeezed the name to a 64px column. */
.drawer .puppy-row { grid-template-columns: 56px minmax(0, 1fr); gap: .2rem .8rem; align-items: start; padding: .7rem 0; }
.drawer .puppy-row .thumb, .drawer .puppy-row .thumb-empty { width: 56px; height: 56px; grid-row: span 2; }
.drawer .puppy-row .meta b { font-weight: 600; line-height: 1.3; }
.drawer .puppy-row .meta .small { display: block; line-height: 1.35; }
.drawer .puppy-row .chips { margin-top: .3rem; }
.drawer .puppy-row .btn-row { grid-column: 2; margin: 0; gap: 0 1.1rem; }
.drawer .puppy-row .btn-row .btn { min-height: 32px; padding: 0; border: 0; background: none; color: var(--olive); font-size: .86rem; }
.drawer .puppy-row .btn-row .btn-danger { color: var(--alert); }
.drawer .puppy-row .btn-row .btn:hover { text-decoration: underline; }
/* Workplan A19 to A21. Health test picks, documents, and the listing quality prompts. */
.test-picks .check span .small { font-size: .78rem; }
.doc-list { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
/* Alex, 2026-11-01. Each document leads with a preview, the image itself or a PDF's first page,
   so a sideways scan is seen and turned before families see it. */
.doc { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem .8rem; min-width: 0; }
.doc-preview { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 124px; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); text-decoration: none; }
.doc-preview img, .doc-preview canvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-pdf-label { font-weight: 600; font-size: .85rem; color: var(--olive); }
.doc-preview:hover, .doc-preview:focus-visible { border-color: var(--bronze); }
.doc-body { display: grid; gap: .45rem; min-width: 0; flex: 1 1 auto; }
.doc-main { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; }
.doc-main a, .doc-main b { overflow-wrap: anywhere; }
.doc-actions { margin: 0; flex-wrap: wrap; gap: .4rem; }
.doc.is-turning .doc-preview { opacity: .45; }
/* Fill from a document (Alex, 2026-11-01). The box sits at the top of the form, and each field it
   filled carries a gold edge and a note until the breeder changes it or saves. */
.prefill { border: 1px dashed var(--bronze); border-radius: var(--r-lg); padding: .7rem .9rem; margin: 0 0 1rem; background: #fffdf6; }
.prefill-title { font-weight: 600; margin: 0 0 .2rem; }
.prefill .hint { margin: 0 0 .5rem; }
.prefill-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.prefill-row .check { align-items: center; min-height: 36px; font-size: .9rem; }
.prefill-status { margin: .5rem 0 0; font-size: .88rem; }
.prefill-status.error { color: var(--alert); }
.prefilled input:not([type=checkbox]):not([type=radio]), .prefilled select, .prefilled textarea, .prefilled .combo input { border-color: var(--bronze); box-shadow: 0 0 0 2px #f7d57f; background: #fffdf3; }
.prefill-note { display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: var(--radius); background: #fbefc8; color: var(--olive); font-size: .74rem; font-weight: 600; vertical-align: middle; }
fieldset.prefilled { box-shadow: inset 3px 0 0 var(--gold); }
.prefilled-check span { background: #fbefc8; border-radius: var(--radius); padding: 0 .2rem; }
.doc-vis { border: 0; padding: 0; margin: 0 0 .8rem; display: grid; gap: .2rem; }
.doc-vis legend { font-weight: 500; font-size: .9rem; padding: 0; margin-bottom: .3rem; }
.doc-vis .check { min-height: 36px; align-items: center; }
.quality { border: 1px solid var(--line-strong); border-left: 4px solid var(--warn); border-radius: var(--r-lg); padding: .7rem .9rem; margin: 0 0 1rem; background: var(--warn-bg); }
.quality ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.quality li { margin: .2rem 0; }
.quality-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.quality-note { color: var(--warn); }
/* Launch workplan A24 to A26. The operator's banner, the authenticator set-up, and people on a kennel. */
.operator-banner { border-left-color: #6b4fa0; background: #f6f3fb; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.operator-banner p { margin: 0; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.setup-steps { margin: 0 0 1rem; padding-left: 1.2rem; }
.qr-box { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.qr-box svg { width: 220px; max-width: 100%; height: auto; background: #fff; }
.secret-key code { display: inline-block; font-size: 1rem; letter-spacing: .08em; overflow-wrap: anywhere; word-break: break-all; }
.recovery-codes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; }
.recovery-codes code { font-size: 1rem; }
.member-list li .btn-row { flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.access-toggle { margin: .4rem 0; font-weight: 600; }
fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.field legend { font-weight: 600; margin-bottom: .4rem; }
fieldset.field .check { margin: .3rem 0; }
@media (max-width: 560px) { .member-list li { flex-wrap: wrap; } .member-list li .btn-row { justify-content: flex-start; } }

/* Busy states (Amber, 2026-10-26). A button or upload label that is working says so in words,
   with a small turning ring, and keeps full strength rather than the faded disabled look. */
.btn.is-busy, .btn.is-busy[disabled] { opacity: 1; cursor: progress; }
.btn.is-busy::before { content: ""; width: .9em; height: .9em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .btn.is-busy::before { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } }

/* Signed-out pages in the brand of the site and the emails (Alex, 2026-10-31: the password page
   "looks like it's from the 1900s"). Playfair Display and Barlow as on the site, the sage band with
   a gold rule as in the emails, a warm ground, roomier fields and the gold main button. */
body.plain { --serif: 'Playfair Display', Georgia, serif; --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--sans); font-size: 16px; background: #f5f2ea; padding-top: 3rem; }
body.plain h1 { font-size: 1.65rem; font-weight: 600; letter-spacing: -.005em; margin-bottom: .5rem; }
body.plain .plain-card { width: min(480px, 100%); border: 0; border-radius: 10px; padding: 0 2rem 2rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 38, 38, .06), 0 12px 32px rgba(74, 90, 75, .12); }
body.plain .plain-card.plain-wide { width: min(760px, 100%); }
body.plain .plain-mark { margin: 0 -2rem 1.8rem; border-radius: 0; background: #4a5a4b; padding: 1.4rem 1rem 1.2rem; border-bottom: 4px solid var(--gold); }
body.plain .plain-mark img { width: 9.5rem; }
body.plain .plain-card > p, body.plain .plain-card form > p { color: var(--ink-soft); }
body.plain label { font-weight: 600; font-size: .92rem; color: var(--ink); }
body.plain input[type=text], body.plain input[type=email], body.plain input[type=password] {
  min-height: 48px; border-radius: 6px; border-color: #d6cfbf; background: #fff; font-size: 1rem; padding: .6rem .8rem; }
body.plain input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(247, 213, 127, .55); }
body.plain .btn { min-height: 48px; border-radius: 6px; font-size: 1rem; }
body.plain .btn-primary { background: var(--gold); border-color: #e6c264; color: var(--ink); font-weight: 600; }
body.plain .btn-primary:hover { background: #f3cb62; }
body.plain .plain-site, body.plain .plain-foot a { color: #5b574e; }
@media (max-width: 520px) {
  body.plain { padding: 1rem .75rem; }
  body.plain .plain-card { padding: 0 1.2rem 1.5rem; }
  body.plain .plain-mark { margin: 0 -1.2rem 1.4rem; }
  body.plain .plain-site { position: static; justify-self: end; margin: 0 0 .4rem; }
}
/* The Show button inside every password box, from show-password.js. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.6rem !important; }
.pw-show { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); min-height: 36px; min-width: 3.9rem; padding: 0 .6rem;
  border: 0; border-radius: 4px; background: transparent; color: var(--olive); font: 600 .85rem var(--sans); cursor: pointer; }
.pw-show:hover { background: var(--row-hover); color: var(--ink); }
.pw-show:focus-visible { outline: 3px solid var(--bronze); outline-offset: 0; }

/* Alex, 2026-10-31. Comes with as ticked options in groups, and the Pay to list step under a saved puppy. */
.includes-field legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.includes-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem 1.2rem; }
.includes-title { margin: 0 0 .2rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.includes-group .check { min-height: 34px; align-items: center; margin: 0; font-size: .92rem; }
.pay-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1rem 0 0;
  padding: .85rem 1rem; border: 1px solid #e6c264; border-radius: var(--r-lg); background: #fdf6e1; }
.pay-next p { margin: 0; flex: 1 1 16rem; }
.pay-next .btn { flex: none; }
.new-upload-note { margin: 0 0 .4rem; }
.move-litter { margin: 1rem 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .5rem .9rem; background: #fff; }
.move-litter summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.move-litter form { align-items: end; margin-top: .4rem; }
.d-side .new-upload-note + section { margin-top: .4rem !important; }

/* Grouped panel sections with one right-hand button column (Alex, 2026-10-31). Each part of a
   panel sits in its own box, a status sits beside its heading, and the everyday actions share one
   width so they line up down the right edge. Longer one-off actions keep their own width. */
:root { --act-w: 11.5rem; }
.dsec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: .9rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
.dsec > h3:first-child { margin-top: 0; }
.dsec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 .6rem; }
.dsec-head h3 { margin: 0; }
.dsec-head .pill { margin: 0; }
.dsec p:last-child, .dsec .kv:last-child, .dsec .member-list:last-child { margin-bottom: 0; }
.dsec-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; margin-top: .8rem; }
.dsec-foot > .muted { margin: 0 auto 0 0; }
.dsec-foot.dsec-row { margin-top: 0; }
.dsec-row > p { flex: 1 1 12rem; }
.dsec-line { display: grid; grid-template-columns: minmax(0, 1fr) var(--act-w); gap: .75rem; align-items: center; }
.btn-act { width: var(--act-w); }
.dsec .member-list li .btn-row { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: .4rem; }
.dsec .member-list li .btn-row .btn { width: var(--act-w); }
.dsec .member-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) var(--act-w); }
.dsec .member-form > .btn { width: 100%; }
.dsec .kennel-about p { margin: 0 0 .7rem; }
.dsec .pay-row:first-of-type, .dsec .puppy-row:first-of-type { border-top: 0; }
.also-kennels > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .75rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper); font: 500 .85rem var(--sans); color: var(--ink); }
.also-kennels > summary::-webkit-details-marker { display: none; }
.also-kennels > summary::before { content: "+"; font-weight: 700; font-size: 1rem; line-height: 1; color: var(--olive); }
.also-kennels[open] > summary::before { content: "\2212"; }
.also-kennels > summary:hover { border-color: var(--bronze); border-style: solid; }
/* The save row at the foot of every edit panel: the main action on the right at the shared width,
   and a remove or delete action, where there is one, at the far left away from it. */
.drawer-body form > .btn-row:last-child { flex-direction: row-reverse; justify-content: flex-start; }
.drawer-body form > .btn-row:last-child > .btn { min-width: var(--act-w); }
.drawer-body form > .btn-row:last-child > .btn-danger { margin-right: auto; }
@media (max-width: 560px) {
  .dsec-line, .dsec .member-form { grid-template-columns: 1fr; }
  .btn-act, .dsec .member-list li .btn-row .btn { width: auto; }
  .dsec .member-list li .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .dsec-foot { justify-content: flex-start; }
}

/* Wide record drawers (Alex, 2026-10-27, after Teapup's editor). From 1,200px a record opens at
   about two thirds of the window, never over the menu and never past 1,400px, with its details
   on the left and its photos and lists on the right. Narrower than that the drawer keeps its
   own width and the two columns stack. */
@media (min-width: 1200px) {
  .drawer.wide { width: min(calc(100% - var(--rail)), max(1040px, 66.667%), 1400px); }
  .drawer.wide .drawer-body { padding: 1.1rem 1.5rem 2rem; }
  .drawer.wide .d-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
  .drawer.wide .d-side { border-left: 1px solid var(--line); padding-left: 1.6rem; }
  .drawer.wide .d-side > :first-child, .drawer.wide .d-side > section:first-child h3:first-child { margin-top: 0; }
}