/* ============================================================================
   app.css — CATNIP successor read UI.
   Preserves the original look (uploaded main_dev.css): cream background, blue
   rails, the naccordion styling, the .sb / .sb_list / .notes / .movements
   classes. This is a REPRODUCTION (D-26, the brief) — not a redesign.
   Layout strategy: the two icon rails are fixed-width and never reflow; the
   centre is fluid. On iPhone the record becomes a full-screen slide overlay.
   ============================================================================ */

html { font-size: 62.5%; height: 100%; }   /* 1rem = 10px (from original) */
body {
  font-size: 1.4rem;
  margin: 0;
  color: #000;
  background-color: #faf8e2;                 /* original cream */
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
               'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  height: 100%;
}
* { box-sizing: border-box; }
ul { list-style-type: none; padding: 0; margin: 0; }
a { text-decoration: none; }
.glink { color: hsl(115, 100%, 25%); cursor: pointer; }
.red { color: #cc0000; }
.grey { color: #bde0f9; }
.green { color: #5ad94f; }
.display-none { display: none !important; }
.noscrollbars { overflow: auto; -ms-overflow-style: none; scrollbar-width: none; }
.noscrollbars::-webkit-scrollbar { display: none; }

/* ---- App shell: a flex row of [rail | sidebar | panel | panel | sidebar | rail] ---- */
#app {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ---- The two icon rails: fixed 70px, never reflow (architecture §8) ---- */
.menubar {
  flex: 0 0 70px;
  width: 70px;
  background-color: #0077B1;                  /* original blue */
  color: #FFE77D;                             /* original yellow */
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;                         /* no horizontal scrollbar */
  height: 100%;
  -ms-overflow-style: none;                   /* hide scrollbar (IE/Edge) */
  scrollbar-width: none;                      /* hide scrollbar (Firefox) */
}
.menubar::-webkit-scrollbar { display: none; }  /* hide scrollbar (WebKit) */
.menubar-person { order: 1; }
.person-sidebar  { order: 2; }
.hook-display-left  { order: 3; }
.hook-display-right { order: 4; }
.animal-sidebar  { order: 5; }
.menubar-animal { order: 6; }

/* rail buttons (.sb) — from original */
.sb li {
  margin: 0 2px; padding: 8px 0;
  border-bottom: 1px dotted #fff;
  font-size: 1.2rem; cursor: pointer;
}
.sb li:hover { color: #fff; }
/* #1: a selected rail element — white background, blue icon+text */
.sb .sbselected { color: #0077B1; background-color: #fff; }
.sb .sbselected i { color: #0077B1; }
/* #1: hovering a SELECTED element greys the icon for the hover duration only */
.sb .sbselected:hover { color: #999; }
.sb .sbselected:hover i { color: #999; }
.sb .fa, .sb i { font-size: 2.6rem; display: block; margin-bottom: 2px; }

/* "New cat" (D-50) — pinned at the top of the animal rail. It is an ACTION, not
   a filter, so it is visually separated from the filter buttons beneath it: a
   green icon and a solid rule below. It never takes .sbselected, because it
   opens a sheet rather than summoning a list. The rail li already gives a large
   touch target; touch-action stops the double-tap zoom delay on iPhone. */
.sb .newcat-item {
  border-bottom: 2px solid #fff;
  padding-bottom: 10px; margin-bottom: 4px;
  touch-action: manipulation;
}
.sb .newcat-item i { color: #6c6; }
.sb .newcat-item:hover i { color: #fff; }

/* ---- Sidebars: the filter controls + filtered list ---- */
.entity-sidebar {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  height: 100%;
}
.sidebar-top { background-color: #ddd; padding: 4px; }

/* Vet code (D-51). Monospace because it is a REFERENCE to be read aloud to a
   clinic, character by character — 1197-202 must not be mistaken for 1197-2O2.
   Same treatment in the list row, the record header and the Summary, so the
   same string is recognisable wherever it appears. */
.vetcode {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.2rem; color: #036; background: #eef3f8;
  border: 1px solid #cdd9e5; border-radius: 3px;
  padding: 0 4px; white-space: nowrap;
}
/* Beside the cat's name the record header runs large, so scale up to match. */
.vetcode-head { font-size: 1.4rem; vertical-align: middle; }

/* Label-printer CSV link (D-77) — follows the age in the record header. Sized
   as a real touch target rather than a bare glyph: it sits inside a line of
   running text next to the cat's name, which is a busy place to put anything
   tappable, and an under-sized hit area here means mis-taps on the name. */
.csvlink {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; vertical-align: middle;
  color: #0077B1; cursor: pointer; font-size: 0.85em;
  touch-action: manipulation;
}
.csvlink:hover { color: #005a87; }

/* The clinic an event happened at (D-57). Same pill shape as .vetcode so the
   two read as related, but NOT monospace: a clinic name is read, not dictated
   character by character the way a code is. Deliberately small and quiet — it
   is context on an event, not the point of the row. */
.vetname {
  font-size: 1.1rem; color: #456; background: #f2f5f8;
  border: 1px solid #dde5ec; border-radius: 3px;
  padding: 0 4px; white-space: nowrap;
}
.vets { margin-top: 10px; border-top: 1px dotted #999; padding-top: 6px; }
.vets-hd { font-weight: bold; margin-bottom: 2px; }
.vet-primary {
  font-size: 1.0rem; text-transform: uppercase; letter-spacing: .04em;
  color: #185; font-weight: bold;
}
.vet-nocode { font-style: italic; color: #777; }
.vets-none { margin-top: 10px; font-style: italic; }

/* Plain-text echo under every date picker. A native date input renders in the
   BROWSER's locale — a US-locale browser shows MM/DD/YYYY, and 05/03 is then
   genuinely ambiguous. The echo spells the month out so the chosen date cannot
   be misread, and repeats the ISO form because that is what is stored. */
.dateecho {
  font-size: 1.2rem; color: #036; margin-top: 3px;
  font-weight: bold;
}
.sidebar-top .title { font-size: 1.8rem; font-weight: bold; }
.sidebar-top input[type=text] {
  width: 90%; font: normal 1.6rem/1.8rem sans-serif; padding: 2px;
}
.sidebar-list { flex: 1 1 auto; overflow-y: auto; background: #fff; }

/* list rows (.sb_list) — from original */
.sb_list li {
  margin: 1px; padding: 4px 2px;
  border-bottom: 1px dotted #000;
  font-size: 1.4rem; cursor: pointer;
}
.sb_list li:hover { background: #f0f8ff; }
.small-cat-pic { height: 56px; padding-left: 2px; float: right; }
.list-count { padding: 4px; font-size: 1.2rem; color: #666; background:#eee; }

/* ---- Display panels: the opened record ---- */
.display-panel {
  flex: 1 1 auto;
  height: 100%;
  display: flex;            /* column: fixed header + accordion that fills the rest */
  flex-direction: column;
  min-height: 0;
  overflow: hidden;         /* the accordion's open section scrolls, not the panel */
  background: #fff;
  min-width: 0;
}
.record-header { flex: 0 0 auto; }   /* header keeps natural height */
/* #10: when both record panels are populated, split the space equally */
.hook-display-left.equal-split, .hook-display-right.equal-split { flex: 1 1 50%; }
.record-header {
  flex: 0 0 auto;
  padding: 8px;
  text-align: center;
  border-bottom: 2px solid #0077B1;
}
.record-header .cat-pic, .record-header img { max-height: 150px; }
.record-name { font-size: 2.0rem; font-weight: bold; }
.badges { margin: 6px 0; }
.badge {
  display: inline-block; padding: 2px 8px; margin: 2px;
  border-radius: 10px; font-size: 1.2rem; background: #eee;
}
.badge.on  { background: #0077B1; color: #fff; }
.badge.fiv { background: #cc0000; color: #fff; }
.badge.fiv-incon { background: #e8a000; color: #fff; }   /* inconclusive (D-43) */

/* ---- naccordion (Summary / Movements / Events) — from original ----
   In the desktop side panels the accordion fills the panel: header(s) keep
   natural height, open section(s) grow to the bottom of the browser and scroll
   internally if content overflows (#2 — was capped at 60vh, stopped short).
   In the iPhone #slide overlay the accordion keeps natural flow and the whole
   overlay scrolls instead (better on a phone than nested scrolling). */
.display-panel .naccordion {
  display: flex;
  flex-direction: column;
  height: 100%;            /* fill the record body area below the header */
  min-height: 0;
}
.naccordion dl { margin: 0; }
.naccordion dt {
  flex: 0 0 auto;          /* headers never shrink */
  border-bottom: 1px solid #ccc; color: #fff;
  padding: 6px 0 6px 8px; cursor: pointer;
  background: #0077B1; margin: 0;
  font-size: 1.6rem;
}
.naccordion dt .fa, .naccordion dt i { float: right; padding-right: 8px; }
.naccordion dd { margin: 0; padding: 0; }
/* desktop: open sections fill remaining height and scroll internally */
.display-panel .naccordion dd {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -ms-overflow-style: none; scrollbar-width: none;   /* #3 */
}
.display-panel .naccordion dd::-webkit-scrollbar { display: none; }   /* #3 */
/* keep every accordion section the SAME width: content (e.g. the Events
   quick-add row or a long note) must never widen the panel, which caused a
   distracting width-shift when Events opened vs Summary/Movements. width:100%
   + min-width:0 + border-box pins the body to the column; wide rows wrap or
   scroll inside it instead of pushing the flex panel wider. */
.display-panel .naccordion dd {
  width: 100%; min-width: 0; box-sizing: border-box;
  overflow-x: hidden;
}
.display-panel .naccordion { width: 100%; min-width: 0; }
.naccordion dd.closed { display: none; }

/* #6/#8: status-icon colours.
   icon-on  = present/true — softened dark grey (not full black, #6/#8)
   icon-off = absent/false — pale grey
   FIV/FeLV is tri-state (#6): clear=green, positive=red, untested=pale blue. */
.icon-on  { color: #555; }
.icon-off { color: #ccc; }
/* Tested clear reads as ORDINARY, not as good news. It used to be green, which
   made "we did the test and it was fine" the loudest thing in the row — and
   since most cats are clear, the loudest thing was also the least informative.
   Nick's call: clear is the resting state, so it takes the same #555 every
   other present-and-fine glyph takes. Untested keeps its pale blue, because
   that IS something to be reminded of. Deliberately the same value as
   .icon-on rather than a synonym for it: the class stays separate because the
   FOUR-state rule behind it (pos / inconclusive / clear / untested, D-43) is
   still four states, and collapsing the class would lose that. */
.fiv-clear    { color: #555; }      /* tested clear — ordinary, like icon-on */
.fiv-pos      { color: #cc0000; }   /* FIV+ or FeLV+ */
.fiv-incon    { color: #e8a000; }   /* inconclusive (D-43): clinically serious, isolate */
.fiv-untested { color: #bde0f9; }   /* not yet tested — the one worth noticing */
/* On medication. GREEN, and the only coloured "yes" glyph in the row — Nick
   wants it to stand out, and on a row where every other present-glyph is #555
   the standing-out comes from being different rather than from being loud.
   The same green as .ev-live's border, deliberately: an event row tinted green
   and this badge are the SAME claim, that a course is running today, and the
   D-67 rule about one fact not wearing two icons applies to colour as well. */
.on-meds      { color: #4a9c5d; }

/* #12/#13: full-colour map icons, large + well-spaced for touch (iPhone/iPad) */
.maplink { display: inline-block; margin: 8px 12px 8px 0; }
.maplink img { height: 60px; width: auto; vertical-align: middle; }

/* event + movement rows — from original */
.notes li, .movements li {
  margin: 1px; padding: 6px 2px;
  border-bottom: 1px dotted #333;
  background-color: #fff; cursor: pointer;
  color: #0077B1;
}
.notes li .meta, .movements li .meta { color: #333; }

/* D-82 — a durational event (quarantine, medication) that is happening TODAY.
   Pale wash PLUS a left border, not a wash alone: this is read on a phone in
   variable light, where a pale background is the first thing to disappear, and
   the border keeps the signal for anyone who does not separate red and green.

   Quieter than .evfilter on purpose. Those are controls and are styled to look
   tappable (D-76); this is a TINT on a row. Nothing here should invite a tap.

   The selector carries .notes so it beats the plain `.notes li` background
   above; the extra left padding keeps the text off the new border rather than
   letting it shift by 4px relative to its uncoloured neighbours.

   .ev-overdue is the second class, and it now EXISTS: the reminder flag
   produces it. Red, with a HEAVIER left border than .ev-live — 6px against 4px.
   Hue alone does not separate the two for anyone who cannot separate red and
   green, and on a phone in Fukuoka daylight the border is the part that
   survives. Do not equalise the widths to make them look tidier; the difference
   is the accessible signal, not an inconsistency. */
.notes li.ev-live {
  background-color: #f1f8f2;
  border-left: 4px solid #4a9c5d;
  padding-left: 6px;
}
.notes li.ev-overdue {
  background-color: #fdf1f1;
  border-left: 6px solid #b3352f;
  padding-left: 4px;   /* 6px border + 4px = the same text position as .ev-live */
}
/* The reminder checkbox on the event sheet. A row, not a .lbl + control pair:
   the label IS the hit area, which matters on a phone where a bare 16px
   checkbox is a poor target. */
.remindrow { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.remindrow input { width: 20px; height: 20px; }
/* notes must wrap (and break long unbroken strings) so a long note can never
   set a wide min-content width that pushes the whole record panel wider — the
   cause of the Events-vs-Summary width shift. */
.meta { overflow-wrap: anywhere; word-break: break-word; }
.notes li, .movements li { overflow-wrap: anywhere; }
.notes li i, .movements li i { font-size: 2.6rem; padding: 0 6px 0 2px; }
/* the big type icons (syringe etc.) do real work at 2.6rem and stay. The
   secondary calendar + edit pencil inside the same rows are brought down to
   ~70% so they do not compete with the type icon. Targeted by their specific
   FA classes, so icon(e.type)/icon(m.type) are untouched. */
.notes li i.fa-calendar, .movements li i.fa-calendar,
.notes li i.fa-pen-to-square, .movements li i.fa-pen-to-square {
  font-size: 1.82rem; padding: 0 4px 0 2px; vertical-align: middle;
}
/* The movements table must never exceed the panel. width:100% alone is a FLOOR
   under auto layout (the table still grows to fit its widest cell, and tables
   ignore min-width:0 on flex ancestors — which pushed the panel past the app
   edge and clipped the rail). max-width:100% caps it; the cell rules below let
   long holder names wrap instead of forcing width. (table-layout:fixed was tried
   and rejected — it made the table greedily claim 100% even when narrow.) */
.movements table { width: 100%; max-width: 100%; }
.movements td { vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.notes, .movements { min-width: 0; max-width: 100%; }

/* ---- iPhone slide overlay (architecture §8) ---- */
#slide {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff; z-index: 1000;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}
#slide.open { transform: translateY(0); }
.slide-close {
  position: sticky; top: 0;
  height: 36px; line-height: 36px; text-align: center;
  background: #0077B1; color: #fff; cursor: pointer; z-index: 1;
}

/* ============================================================================
   Responsive: the load-bearing rule (architecture §8).
   Desktop/tablet: rails + sidebars + both panels side by side.
   iPhone (<=600px): rails stay (fixed, narrow); sidebars overlay; the record
   uses the full-screen #slide overlay instead of a centre panel.
   ============================================================================ */
@media (max-width: 600px) {
  /* On phones the two icon rails pin to opposite edges (as the original Galina
     does — see reference screenshots), with the sidebar list filling the middle
     just inside whichever rail was tapped. Previously the rails relied on flex
     order to sit at the edges, but this media query takes the sidebars + panels
     out of flow, leaving nothing between the rails — so they collapsed together
     at the left. Pinning each rail absolutely fixes that independently of flex. */
  #app { position: relative; }
  .menubar { position: absolute; top: 0; bottom: 0; width: 70px; flex-basis: 70px; z-index: 600; }
  .menubar-person { left: 0; }
  .menubar-animal { right: 0; }
  .entity-sidebar {
    position: absolute; top: 0; bottom: 0;
    width: calc(100% - 140px); z-index: 500;   /* between the two 70px rails */
  }
  .person-sidebar { left: 70px; }
  .animal-sidebar { right: 70px; }
  /* desktop centre panels are not used on iPhone; the record goes to #slide */
  .hook-display-left, .hook-display-right { display: none; }
}

/* ============================================================================
   WRITE UI (Task 4) — event + movement sheets, confirm strip, quick-add.
   Matches the existing palette: cream #faf8e2, blue #0077B1, red #cc0000,
   Lucida family inherited from body. Layered above records via #write-slide,
   mirroring the iPhone #slide overlay pattern (z-index above it).
   ============================================================================ */

/* iOS Safari fires delegated click on non-native elements (div/span/li)
   only when they are marked clickable. A single base rule guarantees every
   current AND future data-verb element taps on iPad/iPhone, rather than
   chasing cursor:pointer onto each new class. (Paired with a touchend
   binding in app.js.) */
.click, .clicko { cursor: pointer; touch-action: manipulation;
                  -webkit-tap-highlight-color: rgba(0,0,0,0.05); }

/* the "+" on a section header (Movements / Events) */
.sec-add {
  float: right; width: 34px; height: 34px; line-height: 34px;
  text-align: center; border-radius: 17px; background: #fff; color: #0077B1;
  font-weight: bold; cursor: pointer; margin-left: 6px; font-size: 1.15em;
  touch-action: manipulation;
}
.sec-add:hover { background: #e6f2fa; }

/* per-row edit pencil on movement / event rows */
.row-edit {
  color: #0077B1; cursor: pointer; margin-left: 6px;
  padding: 8px; margin: -8px -2px -8px 4px; /* bigger touch target, same look */
  display: inline-block; touch-action: manipulation;
  /* glyph size is set on the icon itself (see .fa-pen-to-square rule above) */
}
.row-edit:hover { color: #005a87; }

/* overlay scrim + sheet (covers the screen; sheet slides from bottom) */
.write-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 1100; display: none;        /* above #slide (1000) */
}
.write-scrim.open { display: block; }
.write-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%;
  overflow-y: auto; background: #faf8e2; border-top-left-radius: 14px;
  border-top-right-radius: 14px; box-shadow: 0 -4px 18px rgba(0,0,0,0.3);
}
@media (min-width: 601px) {
  /* desktop: a centred dialog rather than a full-width bottom sheet */
  .write-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%); width: 460px; max-width: 92%;
    border-radius: 14px;
  }
}
.write-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: #0077B1; color: #fff; padding: 10px 14px;
  border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.write-bar .x { cursor: pointer; font-size: 0.95em; }
#write-body { padding: 14px; }

/* form groups */
.grp { margin-bottom: 14px; }
.grp .lbl { font-size: 0.85em; color: #555; margin-bottom: 5px; }
.grp textarea, .grp input[type="text"], .grp input[type="number"],
.grp input[type="date"], .grp select.wide {
  width: 100%; box-sizing: border-box; padding: 8px; font-family: inherit;
  font-size: 1rem; border: 1px solid #ccc; border-radius: 6px; background: #fff;
}
.grp textarea { min-height: 60px; resize: vertical; }

/* type grid — 3 across, tappable */
.typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.typebtn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; background: #fff; border: 1px solid #ccc;
  border-radius: 8px; cursor: pointer; font-size: 0.9em;
}
.typebtn i { font-size: 1.3em; color: #0077B1; }
.typebtn.sel { background: #0077B1; color: #fff; }
.typebtn.sel i { color: #fff; }

/* subtype + offset pills */
.subrow, .offsets { display: flex; flex-wrap: wrap; gap: 6px; }
.sub, .off {
  padding: 6px 10px; background: #fff; border: 1px solid #ccc;
  border-radius: 14px; cursor: pointer; font-size: 0.9em;
}
.sub.sel, .off.sel { background: #0077B1; color: #fff; border-color: #0077B1; }

.bigdate { display: flex; align-items: center; gap: 8px; }
.bigdate i { color: #0077B1; }
.twonote { font-size: 0.8em; color: #777; margin-top: 5px; }
.nextout { margin-top: 6px; font-size: 0.9em; color: #0077B1; }
.nextout.none { color: #999; }
.costrow { display: flex; align-items: center; gap: 6px; }
.costrow .cur { font-size: 1.1em; color: #555; }

.quickrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 10px; min-width: 0; }
.quick {
  padding: 6px 10px; background: #fff; border: 1px solid #0077B1;
  border-radius: 14px; color: #0077B1; cursor: pointer; font-family: inherit;
  font-size: 0.9em;
}
.quick:hover { background: #e6f2fa; }

/* Event-list filters (D-76). These sit immediately below .quickrow and must NOT
   look like it. .quick is a white pill with a BLUE border and a 14px radius, and
   one tap on it writes an event; these only hide rows. So: grey border, 4px
   radius, no icons, tighter padding — segments rather than buttons. The visual
   difference is the safety mechanism, so if these are ever restyled, keep them
   distinguishable from the row above at arm's length on a phone.

   Touch targets stay at 34px minimum height despite the tighter look; small and
   mistappable are different problems and only the first one is wanted here. */
.evfilters {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 0 8px; min-width: 0;
  border-bottom: 1px solid #e4e4e4; margin-bottom: 6px;
}
.evfilter {
  padding: 7px 9px; min-height: 34px; box-sizing: border-box;
  display: inline-flex; align-items: center;
  background: #f4f4f4; border: 1px solid #ccc; border-radius: 4px;
  color: #444; cursor: pointer; font-size: 0.85em;
  touch-action: manipulation;
}
.evfilter:hover { background: #e9e9e9; }
.evfilter.sel { background: #555; border-color: #555; color: #fff; }

/* save button */
.save {
  width: 100%; padding: 12px; background: #0077B1; color: #fff; border: none;
  border-radius: 8px; font-family: inherit; font-size: 1.05rem; cursor: pointer;
}
.save:hover { background: #005a87; }

/* confirm strip — the preview consequence + Confirm/Cancel */
.confirm-strip { margin-top: 12px; padding: 12px; border-radius: 8px; background: #eef6fb; }
.confirm-strip.confirm-strong { background: #fff3cd; border: 2px solid #e0a800; }
.confirm-strip.confirm-error  { background: #fdecea; border: 1px solid #cc0000; }
.confirm-msg { font-size: 0.98em; margin-bottom: 8px; }
.confirm-warn { font-size: 0.85em; color: #8a6d00; margin-bottom: 8px; }
.confirm-actions { display: flex; gap: 8px; }
.confirm-yes, .confirm-no {
  flex: 1; padding: 10px; border: none; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 1rem;
}
.confirm-yes { background: #0077B1; color: #fff; }
.confirm-no  { background: #ddd; color: #333; }

/* delete button inside an edit sheet — destructive, visually separated from Save
   so it is not an adjacent fat-finger target (Task 4; iPhone use). Red outline
   rather than a solid red block: deliberate, not alarming, but unmistakably the
   destructive action. */
.delete-btn {
  width: 100%; margin-top: 18px; padding: 11px; background: #fff;
  color: #cc0000; border: 1px solid #cc0000; border-radius: 8px;
  font-family: inherit; font-size: 1rem; cursor: pointer;
}
.delete-btn:hover { background: #fdecea; }

/* a confirm strip for a delete reads red rather than amber */
.confirm-strip.confirm-delete {
  background: #fdecea; border: 2px solid #cc0000;
}
.confirm-strip.confirm-delete .confirm-yes { background: #cc0000; }

/* ---- edit cat (D-52) ------------------------------------------------------
   The "edit details" control sits at the end of the badge row under the photo.
   Every other badge there is DERIVED and read-only, so this one is deliberately
   styled as an ACTION rather than a status: outlined, not filled, with a pencil
   and a word. Someone should not have to work out that one pill in a row of
   five is a button. */
.badge.edit-details {
  background: #fff; border: 1px solid #0077B1; color: #0077B1;
  cursor: pointer; font-size: 1.1rem;
  touch-action: manipulation;          /* no 300ms tap delay on iPhone */
}
.badge.edit-details i { margin-right: 3px; }
.badge.edit-details:hover { background: #0077B1; color: #fff; }

/* Per-row vet actions (D-55): "make primary" and "remove". Quiet by default —
   they sit in a read-heavy list — but real tap targets on a phone. "remove" is
   a HARD delete, so it is the only one tinted with the delete colour. */
.vet-act {
  cursor: pointer; color: #0077B1; font-size: 0.8em;
  border: 1px solid #cfe0ea; border-radius: 3px;
  padding: 1px 6px; margin-left: 6px; white-space: nowrap;
  touch-action: manipulation; user-select: none;
}
.vet-act:hover { background: #0077B1; border-color: #0077B1; color: #fff; }
.vet-rm { color: #b3261e; border-color: #e8c4c0; }
.vet-rm:hover { background: #b3261e; border-color: #b3261e; color: #fff; }

/* The "change" control on the Summary's status line (D-54). Deliberately quiet
   — it is not a primary action — but a real tap target on a phone. It opens its
   own sheet because dead/rehomed/released drop the cat from every due list. */
.status-change {
  cursor: pointer; color: #0077B1; font-size: 0.85em;
  border: 1px solid #cfe0ea; border-radius: 3px;
  padding: 2px 7px; margin-left: 6px;
  touch-action: manipulation; user-select: none;
}
.status-change:hover { background: #0077B1; border-color: #0077B1; color: #fff; }

/* The chip registry password on the Summary (D-52). Masked until tapped —
   the risk is screenshots and shoulder-glances, not the browser. Sized and
   padded generously because it is tapped on a phone. */
.secret {
  letter-spacing: 2px; cursor: pointer; color: #555;
  background: #f2f2f2; border: 1px dashed #bbb; border-radius: 3px;
  padding: 2px 8px; touch-action: manipulation;
}
.secret:hover { background: #e6eef5; border-color: #0077B1; }
/* Revealed state (D-53). Additive to .secret, not a replacement for it — the
   element keeps its verb and its hit-area so it can be tapped to re-mask. */
.secret.secret-shown {
  background: #fff6d8; border: 1px solid #e0c060;
  letter-spacing: normal; color: #222;
  white-space: nowrap; user-select: all;
}

/* Copy-to-clipboard button beside the password (D-53). Always visible, so the
   value can be copied while still masked. Wide padding: it is a phone target. */
.secret-copy {
  cursor: pointer; color: #0077B1; margin-left: 6px;
  padding: 4px 7px; border-radius: 3px;
  touch-action: manipulation; user-select: none;
}
.secret-copy:hover { background: #e6eef5; }
.secret-copy-ok  { color: #2e7d32; }
.secret-copy-bad { color: #b3261e; }

/* Monospace for anything read aloud or copied digit by digit — chip numbers
   and registry passwords, same reasoning as .vetcode (1197-202 must not be
   misread as 1197-2O2). */
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Checkbox rows (the two LTF flags). Big hit target: the whole label is
   tappable, not just the 13px box. */
.checkrow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; cursor: pointer; font-size: 0.95em;
  touch-action: manipulation;
}
.checkrow input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

/* Footnote naming what this form deliberately cannot do. */
.ec-notinhere {
  border-top: 1px dotted #ccc; padding-top: 8px; margin-top: 14px;
  font-style: italic;
}

/* Officer terms and affiliations (D-66) -------------------------------------
   The add controls reuse .vet-act rather than inventing a look: they are the
   same kind of thing (a small inline action on a role block) and a second
   visual vocabulary for the same idea is how UIs drift. */
.sec-inline-add { margin-bottom: 6px; }

/* Affiliation typeahead. Unlike the clinic dropdown (four rows) this filters
   every party on file, so it needs a bounded, scrollable hit list rather than a
   select element with 240 options. */
.af-hits { max-height: 190px; overflow-y: auto; }
.af-hit {
  padding: 9px 8px;
  border-bottom: 1px solid #e3e3e3;
  cursor: pointer;
  /* Touch target and tap responsiveness, per the project's mobile rules. */
  min-height: 40px;
  touch-action: manipulation;
}
.af-hit:hover, .af-hit:active { background: #eef4ff; }
.af-none { padding: 8px; }
/* Shared typeahead (D-66). Used by the affiliation target and BOTH movement
   endpoints — one widget, three call sites. */
.ta-input { margin-bottom: 4px; }
.ta-chosen { margin-top: 2px; }

/* ============================================================================
   LOG OUT — the last item on the person rail (D-40).
   Mirrors .newcat-item's treatment at the TOP of a rail: an action, set apart
   from the filters by a solid rule, never taking .sbselected because it
   summons no list. Muted rather than coloured — it should be findable, not
   inviting. touch-action kills the iPhone double-tap zoom delay.
   ============================================================================ */
.sb .logout-item {
  border-top: 2px solid #fff;
  border-bottom: none;
  margin-top: 6px;
  padding-top: 10px;
  color: #bde0f9;
  touch-action: manipulation;
}
.sb .logout-item i { color: #bde0f9; }
.sb .logout-item:hover,
.sb .logout-item:hover i { color: #fff; }

/* ============================================================================
   LOGIN PAGE (login.php) — D-40.
   Reproduces the old galina front page: blue field, the wordmark, the padlock.
   It lives in THIS file rather than in a <style> block so that #0077B1 and the
   Lucida stack have exactly one definition and cannot drift from the rails —
   the same reasoning that killed the old _human columns (D-05).
   ============================================================================ */
body.login-body {
  background-color: #0077B1;               /* original blue, as the rails */
  color: #fff;
  height: 100%;
}
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 64px;
}
.login-mark { text-align: center; }
/* 8rem = 80px (html is 62.5%, so 1rem = 10px). Light weight and tight
   tracking is what makes the original wordmark read as a logotype. */
.login-wordmark {
  font-size: 8rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}
.login-sub {
  font-size: 1.8rem;
  font-weight: 400;
  margin-top: 4px;
}
/* The padlock is DECORATION — the brand mark from the old front page, not a
   control. The form is on screen from the start: hiding it behind a tap would
   cost a phone user an interaction and conceal nothing worth concealing. */
.login-lock {
  font-size: 3.2rem;
  display: block;
  margin: 28px auto 0;
}
.login-form {
  width: 100%;
  max-width: 320px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.login-label {
  font-size: 1.3rem;
  margin-bottom: 4px;
  color: #FFE77D;                          /* original yellow */
}
/* 1.6rem = 16px, and that number is load-bearing: iOS Safari zooms the page
   when focusing an input with a smaller font, which on this centred layout
   throws the form off screen. */
.login-input {
  font-size: 1.6rem;
  font-family: inherit;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #fff;
  color: #000;
}
.login-button {
  font-size: 1.6rem;
  font-family: inherit;
  padding: 12px;
  margin-top: 8px;
  border: none;
  border-radius: 3px;
  background: #FFE77D;
  color: #0077B1;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
.login-button:hover { background: #fff; }
.login-error, .login-notice {
  font-size: 1.4rem;
  margin: 0 0 16px;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
}
.login-error  { background: #cc0000; color: #fff; }
.login-notice { background: rgba(255,255,255,0.15); color: #fff; }