/* The palette is the stud's own, taken from levantarabians.com: the gold and
   the navy it is signed with, and Poppins, which is what it is set in. The
   site's display face is licensed to it, so headings are Poppins at a heavier
   weight rather than a lookalike.

   Gold is a background colour here and never a text colour: #FEC63E on white
   is unreadable, so anything gold carries navy on top of it, and a link that
   has to be gold-ish is darkened until it can be read. */
:root {
  --bg: #f6f7f9; --card: #fff; --ink: #072b4a; --muted: #7a7a7a;
  --line: #e3e6ea; --accent: #fec63e; --accent-ink: #072b4a;
  --accent-soft: #fdf3dc; --link: #0d4675;
  --bad: #a3352b; --good: #2f7a52; --warn: #8a6100;
  --radius: 10px;
  --map-stallion: #d9e7f6; --map-mare: #f7dde4; --map-young: #dbefe1; --map-shared: #ece2f8;
  --map-floor: #eceef2; --map-open: #f4efe4; --map-room: #e6e7ea; --map-arena: #ecd9b8;
  --map-track: #efe2cc; --map-building: #dfe1e5; --map-road: #c9ccd2;
}
/* Dark is black rather than the navy: the gold is what should carry the page,
   and it carries further off black than off a colour of its own. The navy
   stays where it reads best — as the ink on the light side. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c; --card: #16161a; --ink: #f2f2f3; --muted: #a0a0a6;
    --line: #2a2a2f; --accent: #fec63e; --accent-ink: #16161a;
    --accent-soft: #241d10; --link: #ffd77a;
    --bad: #f08a7e; --good: #7fd3a3; --warn: #ffc86b;
    --map-stallion: #1c2c3e; --map-mare: #3a2129; --map-young: #1a3324; --map-shared: #2d2240;
    --map-floor: #1c1c21; --map-open: #211d15; --map-room: #26262c; --map-arena: #3a2f1f;
    --map-track: #2c2519; --map-building: #2a2b30; --map-road: #3a3c43;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Poppins", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
}
main { max-width: 1180px; margin: 0 auto; padding: 24px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
  scroll-margin-top: 80px;
  box-shadow: 0 1px 2px rgba(7, 43, 74, .04), 0 1px 1px rgba(7, 43, 74, .03);
}
h2 { font-size: 15px; margin: 0 0 16px; font-weight: 600; letter-spacing: .01em; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
input, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14px;
}
input:focus, select:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.field { min-width: 0; }
button {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 7px;
  padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.link {
  background: transparent; color: var(--link); border: 0; padding: 2px 6px;
  font-size: 13px; text-decoration: underline; cursor: pointer;
}
.row { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
tbody tr:hover { background: var(--accent-soft); }
.muted { color: var(--muted); }
.msg { padding: 11px 14px; border-radius: 7px; margin-bottom: 16px; font-size: 14px; }
.msg.bad  { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.msg.good { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.msg.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.empty { color: var(--muted); text-align: center; padding: 30px; }
.scroll { overflow-x: auto; }
#login { max-width: 380px; margin: 60px auto; }
.hidden { display: none; }
.tag {
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 9px;
}
.editing { border-color: var(--accent); }

/* Horses are chosen in bulk: one meal usually goes to many of them, and
   thirty-four separate forms would be thirty-four chances to skip one. */
.picks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px; margin-top: 10px;
}
.pick {
  display: flex; align-items: center; gap: 8px; margin: 0;
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
  font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.pick:hover { border-color: var(--accent); }
.pick input { width: auto; margin: 0; }
.pick .muted { margin-inline-start: auto; font-size: 12px; }

/* A pedigree chart: each generation a column, each ancestor spanning half the
   rows of the one before it. That is what makes it read as a bracket without a
   single line being drawn. */
.tree { display: grid; gap: 6px; margin-top: 14px; }
.node {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--bg); overflow: hidden;
}
.node .nm {
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.node .rel { font-size: 11px; color: var(--muted); }
.node.self { background: var(--accent-soft); border-color: var(--accent); }
.node.sire { border-inline-start: 3px solid var(--accent); }
.node.dam  { border-inline-start: 3px solid var(--muted); }
.node.gap  { border-style: dashed; opacity: .5; }
.node input {
  border: 0; background: transparent; padding: 0; font-size: 13.5px;
  font-weight: 500; width: 100%;
}
.node input:focus { outline: 0; }
.node.filled { border-color: var(--accent); }
.node.known { background: var(--accent-soft); }
.node.known input { color: var(--muted); }
.node.wrong { border-color: var(--bad); border-width: 2px; }
.node.wrong input, .node.wrong .rel { color: var(--bad); }
#tree .node:not(.gap):not(.self) { cursor: pointer; }
#tree .node:not(.gap):hover { border-color: var(--accent); }

/* --- the screens the rest of the register is made of ---------------------- */

/* A note runs the width of the form; a quantity does not. */
.wide { grid-column: 1 / -1; }
textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14px; resize: vertical;
}
textarea:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.finder { width: auto; max-width: 200px; padding: 6px 10px; font-size: 13px; }
td.acts { white-space: nowrap; text-align: end; }

/* Two hundred horses and thirty screens: the page is a stack of cards, and
   the one being worked in says so. */
.card.editing { border-color: var(--accent); }

/* The dashboard's top row. A number nobody has to read a table to get. */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.kpi .n { font-size: 26px; font-weight: 600; line-height: 1.25; }
.kpi .t { font-size: 12.5px; color: var(--muted); }
.kpi.alert { border-color: var(--bad); }
.kpi.alert .n { color: var(--bad); }
.kpi { border-top: 3px solid var(--accent); }

/* Overdue is not a shade of late: it is a different fact from due next week,
   and the row says which without being read. */
tr.late  td { color: var(--bad); }
tr.soon  td { color: var(--warn); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.cols > .card { margin-bottom: 0; }
.section {
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 12px;
}

/* Photos sit first in the horse's own card, ahead of the fields — a face is
   what somebody recognises a horse by faster than a row of text does. Sized
   larger than a thumbnail for that reason, and set off from the fields below
   by a rule, so the card still reads as two zones rather than one long list. */
#photosCard {
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 10px;
}
.photo {
  position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo button {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1;
  border: 0; cursor: pointer;
}
.photo button:hover { background: var(--bad); }

#videosCard {
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.video-row {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; min-width: 0;
}
.video-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.video-row button { flex: none; padding: 2px 10px; }

/* Any column that names a real field can be clicked to sort by it, and every
   list in the register works this way now — one convention, not thirty. The
   neutral glyph is muted until a column is actually part of the sort, so a
   header full of them does not read as thirty invitations at once. */
.list-tools { display: none; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
.sort-ind {
  display: inline-block; margin-inline-start: 4px; font-size: 11px;
  color: var(--muted); opacity: .5;
}
.sort-ind.active { color: var(--link); opacity: 1; font-weight: 600; }

/* Keyboard focus on a sortable header uses the same ring every input
   already carries, so it reads as "this is interactive" rather than
   inventing a second visual language for one control on the page. */
th.sortable:focus-visible { outline: 2px solid var(--link); outline-offset: -1px; }

/* A farrier morning is entered as a table: one line per horse, because what
   was done differs from one to the next. Form controls sized for a form would
   make each cell as wide as the card, so inside a table they are told to be
   only as wide as they need. */
table input, table select { width: auto; min-width: 0; padding: 6px 8px; font-size: 13px; }
label.tick {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--ink); white-space: nowrap; margin-inline-end: 8px;
}
label.tick input { width: auto; min-width: 0; margin: 0; }

/* --- a horse's own page ---------------------------------------------------

   What the horse is comes first, as label and value rather than a table: it
   is one horse, not a list. Then what keeps happening to it, section by
   section, with a row of chips to jump between them. */
.horse-head { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: start; }
.portrait {
  width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; display: block;
  border: 1px solid var(--line); background: var(--accent-soft);
}
.empty-portrait {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 600; color: var(--accent-ink); background: var(--accent);
}
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thumbs img {
  width: 48px; height: 48px; border-radius: 7px; object-fit: cover; cursor: pointer;
  border: 1px solid var(--line);
}
.who-is h1 { font-size: 24px; margin: 0 0 8px; font-weight: 600; line-height: 1.25; }
.who-is .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.who-is .tag { font-size: 12.5px; color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }
.who-is .line { color: var(--muted); font-size: 14px; margin-top: 4px; }
a.button {
  display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 7px;
  padding: 9px 20px; font-weight: 600; text-decoration: none;
}
a.button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.jump {
  display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 4px; padding-bottom: 4px;
  scrollbar-width: none;
}
.jump a {
  flex: none; font-size: 13px; padding: 6px 13px; border-radius: 20px; text-decoration: none;
  color: var(--ink); background: var(--card); border: 1px solid var(--line);
}
.jump a:hover { border-color: var(--accent); }
.section { scroll-margin-top: 80px; }
.facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 14px 22px; margin: 0;
}
.facts dt { font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.facts .wide { grid-column: 1 / -1; }
.facts .late dd { color: var(--bad); }
td a, .facts a, .who-is a:not(.button) { color: var(--link); text-decoration: none; }
td a:hover, .facts a:hover, .who-is a:not(.button):hover { text-decoration: underline; }
tr.past td { color: var(--muted); }

/* --- phones ---------------------------------------------------------------

   The register is entered standing in a stable as often as at a desk. Below
   1100px the sidebar folds behind one button; below 640px every list becomes a
   stack of small cards — a row is a card, each value beside the name of its
   column (copied onto the cell by labelCells() in farm.js) — because a table
   seven columns wide either scrolls sideways or shrinks to unreadable. The
   pedigree bracket alone keeps scrolling sideways: its shape is the point. */
@media (max-width: 640px) {
  main { padding: 12px; }
  .card { padding: 14px; margin-bottom: 14px; border-radius: 9px; }
  .cols { gap: 14px; }
  .kpis { gap: 10px; margin-bottom: 14px; }
  .kpi { padding: 10px 12px; }
  .kpi .n { font-size: 22px; }
  .section { margin: 20px 0 10px; }
  .grid { gap: 12px; }

  /* 16px or the phone zooms the page in on every field it focuses */
  input, select, textarea { font-size: 16px; }
  button { padding: 11px 18px; }
  button.link { padding: 8px 8px; }
  .finder { max-width: none; flex: 1; }

  /* ticking horses: two to a line rather than one long column of them */
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { padding: 9px 8px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* lists as cards */
  .scroll > table, .scroll > table thead, .scroll > table tbody, .scroll > table tr { display: block; }
  /* …and a row the search has left out stays out (the line above outranked tr.hidden) */
  .scroll > table tr.hidden { display: none; }
  /* the header row goes: sorting and the search are a button each above the
     list (phoneListTools in farm.js), not a chip for every column */
  .scroll > table thead { display: none !important; }
  .list-tools { display: flex; flex-wrap: wrap; gap: 8px; position: relative; margin-bottom: 10px; }
  .lt-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 500;
  }
  .lt-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .lt-btn b { font-weight: 600; color: var(--link); }
  .lt-btn.on, .lt-btn[aria-expanded="true"], .lt-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .lt-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; width: min(280px, 100%);
    display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); box-shadow: var(--shadow);
  }
  .lt-menu.hidden { display: none; }
  .lt-menu-head { padding: 8px 12px 6px; font-size: 12.5px; color: var(--muted); }
  .lt-menu button {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px;
    border-radius: 8px; background: transparent; color: var(--ink); font-weight: 400; font-size: 14.5px; text-align: start;
  }
  .lt-menu button[aria-checked="true"] { background: var(--accent-soft); font-weight: 600; }
  .lt-menu .lt-arrow { color: var(--link); }
  /* the search stays folded into Filter until it is opened, or has words in it */
  .has-list-tools:not(.filter-open) .card-head label.search { display: none; }
  .has-list-tools:not(.filter-open) .card-head .tools { width: auto; }
  .has-list-tools:not(.filter-open) .card-head .tools:not(:has(> :not(label.search))) { display: none; }
  .scroll > table tbody tr {
    border: 1px solid var(--line); border-radius: 9px; padding: 4px 12px;
    margin-bottom: 10px; background: var(--card);
  }
  .scroll > table tbody tr:hover { background: var(--card); }
  .scroll > table td {
    display: block; position: relative; text-align: start; min-height: 2.2em;
    padding: 7px 0; padding-inline-start: calc(38% + 10px);
    border-bottom: 1px dashed var(--line); overflow-wrap: anywhere;
  }
  .scroll > table td::before {
    content: attr(data-label); position: absolute; inset-inline-start: 0; top: 8px;
    width: 38%; color: var(--muted); font-size: 12.5px; line-height: 1.45;
    font-weight: 400;
  }
  .scroll > table td:first-child { font-weight: 600; }
  .scroll > table td:last-child { border-bottom: 0; }
  .scroll > table td:empty { display: none; }
  .scroll > table td[data-label=""], .scroll > table td:not([data-label]) { padding-inline-start: 0; }
  .scroll > table td[data-label=""]::before, .scroll > table td:not([data-label])::before { content: none; }
  .scroll > table td.acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-height: 0; }
  .scroll > table input:not([type=checkbox]):not([type=radio]), .scroll > table select { width: 100%; font-size: 16px; }

  /* a list that says what a phone shows: each row its horse and those few values, a tap opens it whole
     (the review, 2026-10-25) */
  .scroll > table.compact tbody tr { position: relative; cursor: pointer; padding: 10px 12px; }
  .scroll > table.compact tbody tr:not(.open) > td:not([data-phone]) { display: none; }
  .scroll > table.compact tbody tr:not(.open) > td[data-phone] {
    display: inline-block; min-height: 0; padding: 2px 0; padding-inline-start: 0; border: 0; margin-inline-end: 16px; font-weight: 600; }
  .scroll > table.compact tbody tr:not(.open) > td[data-phone]::before {
    position: static; display: inline; width: auto; content: attr(data-label) ': '; font-weight: 400; }
  .scroll > table.compact tbody tr:not(.open) > td[data-phone="name"] { display: block; font-size: 16px; font-weight: 700; margin: 0 0 4px; padding-inline-end: 28px; }
  .scroll > table.compact tbody tr:not(.open) > td[data-phone="name"]::before { content: none; }
  .scroll > table.compact tbody tr::after {
    content: '⌄'; position: absolute; top: 8px; inset-inline-end: 12px; font-size: 20px; line-height: 1; color: var(--muted); }
  .scroll > table.compact tbody tr.open::after { content: '⌃'; top: 14px; }

  /* a finger, not a mouse: the targets at least 40 px; the smallest type at least 12 px */
  .scroll > table td a { display: inline-block; padding: 9px 0; }
  .scroll > table button.link { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
  button.ghost { min-height: 40px; min-width: 40px; }
  .card-edit { padding: 9px 14px; font-size: 13px; }
  .badge { font-size: 12.5px; }
  .br-wd .nm { font-size: 12px; }
  .br-mon-what .badge, .br-detail .badge { font-size: 12.5px; }
  .to-when { font-size: 12.5px; }
  .task-many .detail { white-space: normal; }

  .horse-head { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .empty-portrait { font-size: 36px; }
  .who-is h1 { font-size: 20px; }
  .thumbs img { width: 40px; height: 40px; }

  /* the pedigree bracket keeps its shape and scrolls sideways instead */
  .scroll { -webkit-overflow-scrolling: touch; }
}


/* ===========================================================================
   The redesign (2026-10-11): a sidebar, lists first with the form in a
   drawer, states as colours, a search on every list, the page's own dialogs.
   =========================================================================== */
:root { --side: 248px; --shadow: 0 12px 40px rgba(7, 43, 74, .18); --violet: #6d3fb5; }
@media (prefers-color-scheme: dark) { :root { --shadow: 0 12px 40px rgba(0, 0, 0, .5); --violet: #c3a4f5; } }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --- the sidebar ----------------------------------------------------------- */
#chrome { position: sticky; top: 0; z-index: 30; }
.topbar { display: none; }
.side {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side);
  background: var(--card); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 12px; z-index: 40; overflow-y: auto;
}
body.with-side main { margin-inline-start: var(--side); }
@media (min-width: 1101px) { body.with-side main { max-width: calc(1180px + var(--side)); margin-inline-end: auto; padding-inline: 32px; } }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 4px 8px 18px; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #072b4a;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.side nav { flex: 1; }
.nav-group { margin-bottom: 14px; }
.nav-title { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 6px; }
.side nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14px; opacity: .82;
}
.side nav a:hover { background: var(--accent-soft); opacity: 1; }
.side nav a.on { background: var(--accent-soft); opacity: 1; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .side nav a.on { box-shadow: inset -3px 0 0 var(--accent); }
.side nav a svg { opacity: .8; }
.side-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
.side-foot .who { display: block; color: var(--muted); font-size: 12.5px; padding: 0 6px 8px; overflow-wrap: anywhere; }
.side-foot .row { margin-top: 0; gap: 6px; }
.side-foot button { padding: 7px 12px; font-size: 13px; flex: 1; }
.side-backdrop { display: none; }

@media (max-width: 1100px) {
  body.with-side main { margin-inline-start: 0; }
  .topbar {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--card); border-bottom: 2px solid var(--accent);
  }
  .topbar .brand { padding: 0; margin-inline-start: auto; }
  .topbar .brand-name { font-size: 14px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink);
    border: 1px solid var(--line); padding: 8px 12px; font-weight: 600;
  }
  .side { transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow); width: min(300px, 86vw); }
  [dir="rtl"] .side { transform: translateX(105%); }
  #bar.open .side { transform: none; }
  #bar.open .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(7, 20, 35, .35); z-index: 35; }
}

/* --- a card's head: title, search, "+ Add" -------------------------------- */
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; flex: 1; min-width: 160px; font-size: 16px; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
label.search {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--bg);
}
label.search input { border: 0; background: transparent; padding: 7px 0; width: 170px; outline: 0; }
label.search:focus-within { outline: 2px solid var(--link); outline-offset: -1px; }
button.add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
button.add.hidden { display: none; }
button.add svg { width: 16px; height: 16px; stroke-width: 2.2; }
tr.hidden { display: none; }

/* --- the drawer -------------------------------------------------------------- */
.drawer-wrap { display: none; }
.drawer-wrap.open { display: block; position: fixed; inset: 0; z-index: 60; }
/* a mare's path (mare-path.js): on the stats page and in the breeding page's mare (2026-10-26) */
.path-head { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.path { list-style: none; margin: 0; padding: 0; }
.path li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 10px; padding-inline-start: 36px; border-radius: 10px; }
.path li::before { content: ''; position: absolute; inset-inline-start: 17px; top: 0; bottom: 0; border-inline-start: 2px solid var(--line); }
.path li:first-child::before { top: 20px; }
.path li:last-child::before { bottom: auto; height: 20px; }
.path-dot { position: absolute; inset-inline-start: 9px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--card);
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #fff; }
.path li.done .path-dot { background: var(--good); border-color: var(--good); }
.path li.now { background: var(--accent-soft); }
.path li.now .path-dot { background: var(--accent); border-color: var(--accent); }
.path-label { font-weight: 600; }
.path li:not(.done):not(.now) .path-label { color: var(--muted); font-weight: 500; }
.path-tag { font-size: 11.5px; font-weight: 600; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 8px; }
.path-day { margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.path li.now .path-day { color: var(--ink); font-weight: 600; }
.path-note { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
/* a form of another page opened here (the dashboard's «تسجيل», the owner, 2026-10-26): that page out of
   sight, only its drawer over this one; while it opens, a moment's wait said */
.embed-host { position: fixed; inset: 0; z-index: 70; background: rgba(7, 20, 35, .28); }
.embed-host.shown { background: transparent; }
.embed-host iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.embed-host:not(.shown) iframe { opacity: 0; pointer-events: none; }
.embed-wait { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px;
  background: var(--card); color: var(--ink); border-radius: 999px; padding: 10px 18px; box-shadow: var(--shadow); font-size: 14px; }
.embed-host.shown .embed-wait { display: none; }
.embed-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: embed-spin .8s linear infinite; }
@keyframes embed-spin { to { transform: rotate(360deg); } }
/* the page inside: nothing of it but its open drawers, wherever they sit in it (and what they ask) */
html.embed, html.embed body, html.embed main { background: transparent !important; }
html.embed #chrome, html.embed #login { display: none !important; }
html.embed #app { visibility: hidden; }
html.embed #app .drawer-wrap.open { visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(7, 20, 35, .35); animation: fade .15s ease; }
.drawer {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(560px, 100%);
  background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: slide-in .2s ease;
}
.drawer.wide { width: min(980px, 100%); }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; flex: 1; font-size: 16px; font-weight: 600; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer-foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.icon-btn { background: transparent; color: var(--muted); padding: 6px; border-radius: 8px; line-height: 0; }
.icon-btn:hover { background: var(--accent-soft); color: var(--ink); }
body.drawer-open { overflow: hidden; }
@keyframes slide-in { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
[dir="rtl"] .drawer { animation-name: slide-in-rtl; }
@keyframes slide-in-rtl { from { transform: translateX(-30px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 640px) {
  .drawer, .drawer.wide { width: 100%; }
  .drawer-head, .drawer-body, .drawer-foot { padding-inline: 14px; }
  .drawer-foot button { flex: 1; }
}

/* --- states as colours ------------------------------------------------------ */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  line-height: 1.6; white-space: nowrap; border: 1px solid transparent;
}
.badge.bad    { background: color-mix(in srgb, var(--bad) 13%, transparent);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.badge.warn   { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.badge.good   { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.badge.season { background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 25%, transparent); }
.badge.quiet  { background: var(--bg); color: var(--muted); border-color: var(--line); }
tr.late td .badge, tr.soon td .badge { color: inherit; }

/* --- toasts and the confirm dialog -------------------------------------------- */
#toasts { position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 90; display: grid; gap: 8px; }
.toast {
  background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 9px; font-size: 14px;
  box-shadow: var(--shadow); transition: opacity .4s ease, transform .4s ease; animation: fade .2s ease;
}
.toast.bad { background: var(--bad); color: #fff; }
.toast.gone { opacity: 0; transform: translateY(8px); }
.modal-wrap { position: fixed; inset: 0; z-index: 95; background: rgba(7, 20, 35, .4); display: grid; place-items: center; padding: 16px; animation: fade .15s ease; }
.modal { background: var(--card); border-radius: 12px; padding: 22px; max-width: 420px; width: 100%; box-shadow: var(--shadow); }
.modal p { margin: 0 0 6px; font-size: 15px; }
button.danger { background: var(--bad); color: #fff; }

/* --- a date typed, or picked ------------------------------------------------ */
.date-field { display: flex; align-items: stretch; gap: 6px; position: relative; }
.date-field input:not(.cal-native) { flex: 1; min-width: 0; }
button.cal { background: var(--bg); color: var(--muted); border: 1px solid var(--line); padding: 0 10px; line-height: 0; }
button.cal:hover { color: var(--ink); border-color: var(--accent); }
.cal-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; inset-inline-end: 0; bottom: 0; }

/* --- while a card waits for its rows --------------------------------------- */
#app .card:empty {
  min-height: 140px;
  background: linear-gradient(90deg, var(--card) 0%, var(--accent-soft) 50%, var(--card) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.empty { padding: 28px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); }

/* --- the horses as cards ------------------------------------------------------ */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 600; flex: 1; min-width: 180px; }
.page-head .count { color: var(--muted); font-weight: 400; font-size: 15px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { background: transparent; color: var(--muted); border-radius: 0; padding: 7px 12px; font-weight: 500; }
.segmented button.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chips button { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-weight: 500; font-size: 13px; }
.chips button.on { background: var(--accent); border-color: var(--accent); color: #072b4a; }
.horse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.horse-card {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease;
}
.horse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.horse-card .pic { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; position: relative;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--bg)); }
.horse-card .pic img { width: 100%; height: 100%; object-fit: cover; }
/* no photo yet: a quiet monogram, not a poster */
.horse-card .pic .initial {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  font-size: 22px; font-weight: 600; letter-spacing: .02em;
}
.horse-card .body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.horse-card .nm { font-weight: 600; font-size: 15px; }
.horse-card .meta { color: var(--muted); font-size: 12.5px; }
.horse-card-wrap { position: relative; display: flex; }
.horse-card-wrap .horse-card { flex: 1; }
.card-edit { position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.card-edit:hover { border-color: var(--accent); }
#formCard.closed { display: none; }

/* --- today's work, on the dashboard ---------------------------------------- */
.tasks { display: grid; gap: 8px; }
.task {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg);
}
.task .what { flex: 1; min-width: 0; }
.task .what b { font-weight: 600; }
.task .what a { color: var(--link); text-decoration: none; }
.task .what a:hover { text-decoration: underline; }
.task .what .detail { display: block; color: var(--muted); font-size: 12.5px; }
.task a.button { padding: 6px 14px; font-size: 13px; }
.task-group > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 14px 0 8px; }

/* --- a horse's page, printed (the browser's own Print) -------------------------- */
@media print {
  #chrome, .jump, .tools, .no-print, button, .drawer-wrap, #toasts, .who-is .row, a.button { display: none !important; }
  body.with-side main { margin: 0; padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; border-color: #ccc; }
  body { background: #fff; color: #000; font-size: 12px; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 640px) {
  .card-head { gap: 8px; }
  .tools { width: 100%; }
  label.search { flex: 1; }
  label.search input { width: 100%; }
  .horse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-head h1 { font-size: 19px; }
  #toasts { inset-inline: 12px; inset-block-end: 12px; }
}

/* What a role may not do is not offered (the database refuses it anyway). */
.may-not-create .card-head .add,
.may-not-update [data-edit],
.may-not-delete [data-del] { display: none !important; }

/* The role screen: one line per section, a box for each thing it may do. */
.matrix-wrap { margin: 16px 0 8px; overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix thead th { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.matrix tbody th { text-align: start; font-weight: 500; }
.matrix input[type=checkbox] { width: 20px; height: 20px; min-width: 0; margin: 0; }
.owner-only .badge { margin-inline-start: 6px; }
#barMenu nav a.hidden, #barMenu .nav-group.hidden { display: none; }

/* Wormings waiting for what was seen (144): one line per horse, the result a tap. */
.waiting-list { display: grid; gap: 10px; }
.waiting-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.waiting-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.waiting-row .detail { color: var(--muted); font-size: 13px; }
.waiting-row .results { display: flex; gap: 8px; flex-wrap: wrap; }
.waiting-row .results button { white-space: nowrap; }
.waiting-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px;
  padding-top: 14px; border-top: 1px dashed var(--line); }
.waiting-setting input[inputmode=numeric] { width: 64px; min-width: 0; text-align: center; }
.waiting-setting .hint { flex-basis: 100%; margin: 0; }
@media (max-width: 720px) {
  .waiting-row { grid-template-columns: minmax(0, 1fr); }
  .waiting-row .results button { flex: 1; }
}
.waiting-row .who a { color: var(--link); text-decoration: none; }
.waiting-row .who a:hover { text-decoration: underline; }
.waiting-row .results button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.waiting-save { margin-top: 14px; align-items: center; gap: 12px; }
.waiting-save .hint { margin: 0; }
#waitingRule .waiting-setting { margin-top: 0; padding-top: 0; border-top: 0; }
/* a line's cells for correcting a saved record only (Roster editOnly) */
.drawer-wrap:not(.editing-line) .edit-only { display: none !important; }

/* The platform page: a stud's pages, switched on and off in place (148). */
.page-ticks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.page-ticks label.tick { font-size: 13px; white-space: nowrap; }

/* Settings: the Telegram link code (149). */
.link-code { margin: 14px 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); }
.link-code .code { font: 600 24px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 2px; margin: 6px 0 12px; user-select: all; }
a.button.hidden { display: none; }

/* The products library (153): one card per item, the picture beside it. */
.lib-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.lib-kinds button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lib-list { display: grid; gap: 10px; }
.lib-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.lib-item.hidden { display: none; }
.lib-pic { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.lib-pic img { width: 100%; height: 100%; object-fit: cover; }
.lib-pic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lib-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.lib-body .detail { color: var(--muted); font-size: 13px; line-height: 1.6; }
.lib-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 150px; }
.lib-link { display: flex; gap: 6px; }
.lib-link select { min-width: 0; flex: 1; }
.tag-ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
@media (max-width: 720px) {
  .lib-item { grid-template-columns: 56px minmax(0, 1fr); }
  .lib-pic { width: 56px; height: 56px; }
  .lib-act { grid-column: 1 / -1; min-width: 0; }
}

/* the stud's map (155): drawn to measure, one hangar or the whole stud */
.map-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.map-tabs button { display: grid; gap: 0; text-align: start; padding: 8px 12px; line-height: 1.35; }
.map-tabs button .detail { font-size: 12px; }
.map-tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.map-tabs button.on .detail { color: inherit; opacity: .8; }
@media (max-width: 720px) { .map-tabs { display: grid; grid-template-columns: 1fr 1fr; } }
.map-scroll { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
/* zooming the map alone (the owner, 2026-10-16): pinch, drag, or + − ⤢ */
.map-frame { position: relative; }
.map-zoom { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.map-zoom button { width: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.map-frame:not(.zoomed) .map-zoom [data-zoom="reset"], .map-frame:not(.zoomed) .map-zoom [data-zoom="out"] { opacity: .45; }
.stud-map { touch-action: pan-x pan-y; }
.map-frame.zoomed .stud-map { touch-action: none; cursor: grab; }
.stud-map { display: block; width: 100%; height: auto; max-height: 82vh; stroke: none; stroke-width: 0; }
/* (the icons' rule above draws every svg as a line drawing; the map is not one) */
.stud-map text { stroke: none; }
.map-scroll.whole .stud-map { min-width: 760px; }
.stud-map text { font-family: "Poppins", "IBM Plex Sans Arabic", system-ui, sans-serif; pointer-events: none; }
.stud-map .map-hangar { fill: var(--card); stroke: var(--ink); stroke-width: .12; }
.stud-map .map-corridor { fill: var(--map-floor); }
.stud-map .map-passage { fill: var(--map-floor); stroke: var(--muted); stroke-width: .06; stroke-dasharray: .3 .2; }
.stud-map .map-open { fill: var(--map-open); }
.stud-map .map-gate { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.stud-map .map-label { fill: var(--ink); font-weight: 600; }
.stud-map .map-letter { fill: var(--ink); opacity: .13; font-weight: 600; }
.stud-map .map-hangar-name { fill: var(--muted); }
.map-box, .map-room { cursor: pointer; }
.map-box:focus, .map-room:focus { outline: none; }
.map-box rect { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: .07; }
.map-box.empty rect { fill: var(--card); stroke: var(--muted); stroke-dasharray: .25 .15; }
.map-box.stallion rect { fill: var(--map-stallion); }
.map-box.mare rect { fill: var(--map-mare); }
.map-box.young rect { fill: var(--map-young); }
.map-box.shared rect { fill: var(--map-shared); }
.map-box.other rect { fill: var(--accent-soft); }
.map-box:hover rect, .map-box:focus rect, .map-room:hover rect, .map-room:focus rect { stroke: var(--link); stroke-width: .2; stroke-dasharray: none; }
.stud-map .map-code { fill: var(--ink); font-weight: 600; }
.stud-map .map-box.empty .map-code { fill: var(--muted); font-weight: 500; }
.stud-map .map-horse { fill: var(--ink); }
.stud-map .map-foal { fill: var(--good); }
.map-room rect { fill: var(--map-room); stroke: var(--muted); stroke-width: .06; }
.stud-map .map-room-name { fill: var(--muted); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.map-key { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.map-key.key-stallion i { background: var(--map-stallion); }
.map-key.key-mare i { background: var(--map-mare); }
.map-key.key-young i { background: var(--map-young); }
.map-key.key-shared i { background: var(--map-shared); }
.map-key.key-empty i { background: var(--card); border: 1px dashed var(--muted); }
.map-key i.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); border: 0; }
.map-waiting { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.map-waiting .hint { display: block; margin: 2px 0 8px; }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chips button { padding: 4px 10px; font-size: 13px; }
.map-in { list-style: none; padding: 0; margin: 0 0 14px; }
.map-in li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* deleting a horse (156): what goes, or what stops it */
.del-panel { margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 6%, transparent); }
.del-panel h3 { margin: 0 0 8px; font-size: 15px; color: var(--bad); }
.del-panel ul { margin: 0 0 10px; padding-inline-start: 20px; }
.del-panel .field { margin: 10px 0; }

/* a box opened (155): its horses one at a time, slid through */
#map_drawer .drawer-foot:empty { display: none; }
.map-edit { padding: 6px 14px; }
.map-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.map-dots button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.map-slides { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.map-slides::-webkit-scrollbar { display: none; }
.map-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.map-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; border-radius: 12px; margin-bottom: 12px; }
.map-photos img { flex: 0 0 100%; height: 240px; object-fit: cover; border-radius: 12px; scroll-snap-align: center; }
.map-portrait { flex: 0 0 100%; height: 140px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 600; color: var(--accent-ink); background: var(--accent); }
.map-slide-name { margin: 0 0 6px; font-size: 18px; }
.map-slide-name a { color: var(--ink); text-decoration: none; }
.map-slide-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.map-slide .map-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.map-slide-name .detail { font-size: 13px; font-weight: 400; }
.map-ped-head { margin: 18px 0 0; font-size: 14px; }
.map-photos:empty { display: none; }
.map-tree { grid-template-columns: repeat(4, minmax(118px, 1fr)); grid-template-rows: repeat(16, 32px); gap: 4px; min-width: 470px; margin-top: 8px; }
.map-tree .node { padding: 2px 8px; color: var(--ink); text-decoration: none; }
.map-tree .node .nm { font-size: 12px; line-height: 1.15; white-space: normal; unicode-bidi: plaintext;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.map-tree .node .rel { font-size: 10.5px; }
.map-tree a.node:hover { border-color: var(--link); }
/* the turnout on the map (169): arenas in their colours, boxes lit by them, green once out */
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.map-head h2 { margin: 0; }
.to-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.to-day { display: flex; align-items: center; gap: 6px; }
.to-day button { padding: 4px 12px; font-size: 16px; line-height: 1.2; }
.to-day button[data-day="0"] { font-size: 13px; }
.to-sky { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.to-sky span { display: inline-flex; align-items: center; gap: 5px; }
.to-sky b { color: var(--ink); }
.to-sky svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-progress { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.to-progress i { width: 110px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; display: inline-block; }
.to-progress i b { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.to-progress i.in b { background: var(--link); }
.to-progress { flex-wrap: wrap; }
.to-bar .add { margin-inline-start: auto; }
.to-notes { margin: 0 0 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
.to-notes h3 { margin: 0 0 6px; font-size: 14px; color: var(--warn); }
.to-notes ul { list-style: none; margin: 0; padding: 0; }
.to-notes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.to-notes li:first-child { border-top: 0; }
.to-notes li b { unicode-bidi: plaintext; }
.to-notes li.kept .to-n-what { color: var(--bad); font-weight: 600; }
.to-notes li.moved .to-n-what { color: var(--link); font-weight: 600; }
.to-notes .detail { font-size: 12px; }
.to-program { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.to-program h3 { margin: 0; padding: 10px 12px; font-size: 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.to-program ol { list-style: none; margin: 0; padding: 0; }
.to-program li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.to-program li:last-child { border-bottom: 0; }
.to-p-at { flex: 0 0 auto; min-width: 46px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.to-p-turnout .to-p-at { min-width: 92px; }
.to-p-what { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.to-p-what svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-p-sun { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.to-p-sun .to-p-what { color: var(--warn); }
.to-p-feed .to-p-what { color: var(--good); }
.to-p-turnout { cursor: pointer; border-inline-start: 4px solid var(--arena); }
.to-p-turnout:hover { background: color-mix(in srgb, var(--arena) 8%, var(--card)); }
.to-p-arena { flex: 0 0 auto; padding: 1px 7px; border-radius: 6px; color: #fff; background: var(--arena); font-size: 12px; }
.to-p-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
/* a group whose horses do not fit beside its arena (the page measures it, .to-wrap): its names under its hours,
   arena and weather, on as many lines as they need; one that fits as it was (the owner, 2026-10-26: «اسم الحصان
   بقائمة برنامج النهار» — «تمام 1») */
.to-program li.to-p-turnout.to-wrap { align-items: flex-start; }
.to-p-turnout.to-wrap .to-p-what { flex-wrap: wrap; row-gap: 3px; }
.to-p-turnout.to-wrap .to-wx { order: 1; }
.to-p-turnout.to-wrap .to-p-names { order: 2; flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; }
/* a name never broken in two: a line breaks after «،» only */
.to-p-n { white-space: nowrap; }
/* the slot tapped in the day's program, marked a moment in its arena's colour as its drawer opens at it (2026-10-26) */
.to-slot.to-picked { animation: to-picked 1.6s ease-out; border-radius: 10px; }
@keyframes to-picked { 0%, 40% { box-shadow: 0 0 0 3px var(--arena); background: color-mix(in srgb, var(--arena) 10%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .to-slot.to-picked { animation: none; box-shadow: 0 0 0 3px var(--arena); } }
.to-p-count { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.to-p-turnout.all .to-p-count { color: var(--good); font-weight: 600; }
.to-p-all { flex: 0 0 32px; width: 32px; height: 30px; padding: 0; background: var(--good); border-color: var(--good); color: #fff; font-weight: 700; }
.to-p-now { padding: 2px 12px; color: var(--bad); font-size: 12px; border-bottom: 0; }
.to-p-now i { flex: 1; height: 2px; background: var(--bad); }
.to-p-now .to-p-at { color: var(--bad); }
.to-arena-day { margin-top: 8px; }
.to-arena-day li.to-p-slot { display: block; padding: 6px 8px; }
.to-arena-day .to-slot { margin: 0; }
.stud-map .map-arena.to-arena rect, .stud-map .map-arena.to-arena path { fill: color-mix(in srgb, var(--arena) 30%, var(--map-arena)); stroke: var(--arena); stroke-width: .35; }
.stud-map.to-mode .map-box rect { fill: var(--card); }
.stud-map .map-arena.to-arena.busy rect, .stud-map .map-arena.to-arena.busy path { fill: color-mix(in srgb, var(--arena) 48%, var(--map-arena)); stroke-width: .5; }
.stud-map .map-arena-now { fill: var(--ink); font-weight: 700; }
.stud-map .map-arena-horse { fill: var(--ink); font-weight: 600; }
.to-when { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.to-when.done { color: var(--muted); background: var(--line); }
.to-when.now { color: #fff; background: var(--arena); }
.to-when.later { color: var(--ink); background: color-mix(in srgb, var(--arena) 15%, var(--card)); }
.to-slot.done { opacity: .7; }
.to-slot.now { box-shadow: 0 0 0 2px var(--arena); }
.stud-map.to-mode .map-box.to-plan rect { fill: color-mix(in srgb, var(--arena) 32%, var(--card)); stroke: var(--arena); stroke-width: .18; stroke-dasharray: none; }
.stud-map.to-mode .map-box.to-outnow rect { fill: color-mix(in srgb, var(--arena) 68%, var(--card)); stroke-width: .25; }
.map-key.key-outnow i { background: color-mix(in srgb, var(--ink) 55%, var(--card)); }
.stud-map.to-mode .map-box.to-done rect { fill: color-mix(in srgb, var(--good) 45%, var(--card)); stroke: var(--good); stroke-width: .18; stroke-dasharray: none; }
.map-key.key-out i { background: color-mix(in srgb, var(--good) 45%, var(--card)); border-color: var(--good); }
.to-slot { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-inline-start: 4px solid var(--arena); border-radius: 10px; }
.to-slot-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.to-slot-head b { font-size: 16px; }
.to-slot-head .link { margin-inline-start: auto; }
.to-warn { margin: 6px 0; font-size: 12.5px; color: var(--warn); }
.to-horses { list-style: none; margin: 8px 0; padding: 0; }
.to-horses li { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.to-horses .to-name { unicode-bidi: plaintext; }
.to-horses li.out .to-name { color: var(--ink); font-weight: 600; }
.to-horses li.back .to-name { color: var(--good); font-weight: 600; }
.to-horses li { flex-wrap: wrap; }
.to-in { padding: 3px 10px; border: 1px solid var(--link); border-radius: 7px; background: transparent; color: var(--link); font-size: 12.5px; font-weight: 600; }
.to-time.in { border-color: var(--link); color: var(--link); }
.to-strip-tap { display: inline-flex; align-items: center; gap: 8px; }
.to-strip-done { color: var(--good); font-weight: 600; font-size: 13px; }
.to-tick { width: 28px; height: 28px; flex: 0 0 28px; padding: 0; border-radius: 8px; border: 2px solid var(--line); background: var(--card);
  color: #fff; font-weight: 700; cursor: pointer; }
.to-tick.on { background: var(--good); border-color: var(--good); }
.to-all.in, .to-p-all.in, .to-out.in { background: var(--link); border-color: var(--link); }
.to-all { width: 100%; margin-top: 4px; background: var(--good); border-color: var(--good); color: #fff; font-weight: 600; }
.to-alldone { margin-top: 4px; font-weight: 600; color: var(--good); }
.to-outat { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.to-time { padding: 2px 9px; border: 1px dashed var(--good); border-radius: 7px; background: transparent; color: var(--good);
  font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.to-time-edit { display: inline-flex; gap: 6px; align-items: center; }
.to-time-edit input { width: 84px; padding: 4px 8px; }
.to-time-edit button { padding: 4px 10px; }
.to-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 8px 10px;
  border-radius: 10px; background: color-mix(in srgb, var(--arena) 14%, var(--card)); border-inline-start: 4px solid var(--arena); font-size: 13.5px; }
.to-out { padding: 6px 14px; background: var(--good); border-color: var(--good); color: #fff; font-weight: 600; }
.to-out.on { background: transparent; color: var(--good); }
.pick.busy { opacity: .55; }
/* the plan runs itself (173): states by the clock, and the exceptions */
.stud-map.to-mode .map-box.to-kept rect { fill: var(--line); stroke: var(--muted); stroke-dasharray: .2 .15; }
.map-key.key-kept i { background: var(--line); border: 1px dashed var(--muted); }
.to-state { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 2px solid var(--line); color: var(--muted); }
.to-state.out { border-color: var(--arena); color: var(--arena); }
.to-state.back { border-color: var(--good); background: var(--good); color: #fff; }
.to-state.kept { border-color: var(--muted); color: var(--muted); }
.to-horses li.later .to-name { color: var(--ink); font-weight: 500; }
.to-horses li.out .to-name { font-weight: 600; }
.to-horses li.kept .to-name { color: var(--muted); text-decoration: line-through; }
.to-away { font-size: 12.5px; color: var(--muted); }
.to-away-head { margin: 8px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.to-exc { margin-inline-start: auto; padding: 3px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--ink); font-size: 12px; font-weight: 600; }
.to-exc.undo { border-color: var(--warn); color: var(--warn); }
.to-strip-said { font-size: 12.5px; font-weight: 600; }
.to-strip-said.out { color: var(--arena); }
.to-strip-said.back { color: var(--good); }
.to-strip-said.kept { color: var(--muted); }
.to-strip.kept { background: var(--bg); border-inline-start-color: var(--muted); }
.to-ex-who { margin: 0 0 12px; font-size: 14px; }
/* a foal at foot (175) */
.to-foal { font-size: 11.5px; color: var(--muted); }
.foal-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 10px; padding: 8px 10px;
  border-radius: 10px; background: color-mix(in srgb, var(--map-mare) 55%, var(--card)); border-inline-start: 4px solid #d6409f; font-size: 13.5px; }
.foal-strip.due { background: color-mix(in srgb, var(--warn) 14%, var(--card)); border-inline-start-color: var(--warn); }
.foal-strip.none { background: var(--bg); border-inline-start-color: var(--line); }
.foal-strip .foal-wean { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foal-strip.due b { color: var(--warn); font-size: 12.5px; }
.foal-strip select { width: auto; padding: 4px 8px; font-size: 13px; }
.foal-feed { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--map-mare) 55%, var(--card)); font-weight: 600; }
.to-notes.wean { border-color: color-mix(in srgb, #d6409f 40%, var(--line)); background: color-mix(in srgb, #d6409f 7%, var(--card)); }
.to-notes.wean h3 { color: #d6409f; }
.to-there { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-inline-start: 4px solid var(--arena); border-radius: 10px;
  background: color-mix(in srgb, var(--arena) 7%, var(--card)); }
.to-there ul { margin: 6px 0 8px; padding-inline-start: 18px; font-size: 13.5px; }
.to-there ul li { margin: 3px 0; unicode-bidi: plaintext; }
.to-there-instead { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.to-there-q { font-weight: 600; margin-bottom: 6px; }
.to-dest { margin-bottom: 8px; }
.to-sug-box { margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--card); }
.to-sug-head { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.to-sug-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); }
.to-sug-row:first-of-type { border-top: 0; }
.to-sug { padding: 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; unicode-bidi: plaintext; }
.to-sug.free { border: 1px solid var(--good); background: color-mix(in srgb, var(--good) 10%, var(--card)); color: var(--good); }
.to-sug.taken { border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 500; }
/* the feed store, opened from the map */
.stud-map .map-store { cursor: pointer; }
.stud-map .map-store:hover .map-building, .stud-map .map-store:focus .map-building { stroke: var(--link); stroke-width: .4; }
.stud-map .map-store:focus { outline: none; }
.st-list { list-style: none; margin: 0 0 12px; padding: 0; }
.st-item { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-inline-start: 4px solid var(--good); border-radius: 10px; }
.st-item.warn { border-inline-start-color: var(--warn); }
.st-item.bad { border-inline-start-color: var(--bad); }
.st-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-top b { font-size: 15px; unicode-bidi: plaintext; }
.st-qty { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-item.bad .st-qty, .st-note { color: var(--bad); }
.st-item.warn .st-qty { color: var(--warn); }
.st-note { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.st-item .detail { font-size: 12.5px; margin-top: 3px; }
.clock-said { min-height: 1.2em; color: var(--good); font-weight: 600; }
.clock-said.bad { color: var(--bad); }
/* a horse's panes: who it is, its care, its breeding, its feed */
.map-panes { display: flex; gap: 4px; margin: 4px 0 14px; padding: 3px; border-radius: 10px; background: var(--map-floor); overflow-x: auto; }
.map-panes button { flex: 1 0 auto; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.map-panes button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.map-care { list-style: none; margin: 0; padding: 0; }
.map-care li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.map-care li:last-child { border-bottom: 0; }
.map-care-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.map-care-top b { font-size: 14px; unicode-bidi: plaintext; }
.map-care .detail { font-size: 12.5px; margin-top: 3px; unicode-bidi: plaintext; }
.map-due { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.map-due.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.map-due.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.map-due.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.map-feed-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.map-feed-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.map-feed-card b { font-size: 17px; }
.map-feed-card .detail { font-size: 11.5px; }
.map-feed-scroll { overflow-x: auto; margin-bottom: 6px; }
.map-feed-day { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.map-feed-day th, .map-feed-day td { padding: 6px 8px; border: 1px solid var(--line); text-align: center; white-space: nowrap; }
.map-feed-day th { background: var(--map-floor); font-weight: 600; }
/* its offspring, below the pedigree */
.map-kids { list-style: none; margin: 8px 0 0; padding: 0; }
.map-kids li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.map-kids li:last-child { border-bottom: 0; }
.map-kid-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-kid-top a { color: var(--ink); font-weight: 600; text-decoration: none; unicode-bidi: plaintext; }
.map-kids .detail { font-size: 12.5px; }
.map-kid-box { min-width: 44px; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--map-floor);
  color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; }
.map-kid-box.stallion { background: var(--map-stallion); } .map-kid-box.mare { background: var(--map-mare); } .map-kid-box.young { background: var(--map-young); }
/* the arenas and paddocks outside (157) */
.map-arena { cursor: pointer; }
.map-arena rect, .map-arena path { fill: var(--map-arena); stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: .15; }
.map-arena:hover rect, .map-arena:hover path, .map-arena:focus rect, .map-arena:focus path { stroke: var(--link); stroke-width: .3; }
.map-arena:focus { outline: none; }
.stud-map .map-arena-name { fill: var(--ink); opacity: .55; font-weight: 600; }
.stud-map .map-arena-size { fill: var(--muted); }
.map-key.key-arena i { background: var(--map-arena); }
/* the land around (161): tracks under everything, other buildings, fences */
.stud-map .map-track { fill: none; stroke: var(--map-track); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.stud-map .map-building { fill: var(--map-building); stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: .25; }
.stud-map .map-fence { fill: none; stroke: var(--muted); stroke-width: .35; stroke-dasharray: 2 1.4; }
.stud-map .map-road { fill: none; stroke: var(--map-road); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.stud-map .map-paved { fill: var(--map-road); stroke: none; rx: 1.5; }
.stud-map .map-drive { fill: none; stroke: var(--map-road); stroke-width: 3; stroke-linecap: butt; }
.stud-map .map-building-name { fill: var(--muted); }
/* a place there but not in use (164) */
.map-arena.off rect, .map-arena.off path { fill: var(--map-arena); fill-opacity: .35; stroke-dasharray: 1.2 .8; }
.map-arena.off text { opacity: .6; }

/* an account that sees some pages only (176): the places' lists of where each horse stands are not its business */
body.only-pages .places-only { display: none !important; }
.role-pages { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }

/* Breeding (177): the day's tasks, the mares by state, a mare's panel, the expected foal */
.br-group + .br-group { margin-top: 18px; }
.br-group h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.br-group h3 .muted { font-weight: 400; margin-inline-start: 4px; }
.br-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); }
.br-group h3 + .br-task { border-top: 0; }
.br-name { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-weight: 600; font-size: 15px;
  text-align: start; cursor: pointer; justify-self: start; }
.br-name:hover { color: var(--link); filter: none; }
.br-detail { grid-column: 1; font-size: 13px; color: var(--muted); line-height: 1.55; }
.br-detail .badge { margin-inline-start: 4px; font-size: 11.5px; padding: 0 8px; }
.br-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.br-acts button { padding: 7px 12px; font-size: 13px; }
.br-warn { color: var(--bad); font-weight: 600; }
.br-hint { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.br-mares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.br-mare { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: start; background: var(--card);
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font: inherit; cursor: pointer; }
.br-mare:hover { border-color: var(--accent); filter: none; }
.br-mare-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.br-mare-top .muted { font-size: 12.5px; white-space: nowrap; }
.br-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.br-line { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
.br-plan { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; }
.br-plan button { padding: 6px 12px; font-size: 13px; }
.br-mare-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.br-mare-acts button { font-size: 13.5px; }
.br-h { font-size: 13.5px; font-weight: 600; margin: 18px 0 8px; }
.br-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 13.5px; }
.br-ev-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; padding-top: 1px; unicode-bidi: plaintext; }
.br-ev-what { overflow-wrap: anywhere; }
.br-ev-follicle .br-ev-what { color: var(--violet); }
.br-ev .icon-btn { padding: 2px; }
.br-ev .icon-btn svg { width: 16px; height: 16px; }
.br-who { margin: 0 0 12px; font-weight: 500; }
.br-sub { margin: -8px 0 14px; font-size: 13px; }
.br-foal { margin-top: 14px; }
.br-foal-facts { margin-bottom: 12px; }
.br-tree .node.br-shared { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.br-private-btn { background: color-mix(in srgb, var(--violet) 14%, var(--card)); color: var(--violet);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); }
.br-outside { margin-top: 12px; }
@media (max-width: 640px) {
  .br-task { grid-template-columns: minmax(0, 1fr); }
  .br-acts { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 6px; }
  .br-acts button { flex: 1 1 auto; }
}
.br-table { overflow-x: auto; }
.br-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.br-table th, .br-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.br-table th { color: var(--muted); font-weight: 500; font-size: 12px; }
.br-table td:first-child, .br-table th:first-child { text-align: start; white-space: nowrap; unicode-bidi: plaintext; }

/* a mare's calendar (177): her seasons as recorded and as expected */
.br-cal-sum { font-size: 13px; color: var(--muted); margin: 0 0 8px; line-height: 1.6; }
.br-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.br-cal-head b { font-size: 14px; }
.br-cal-head button { padding: 2px 14px; font-size: 18px; line-height: 1.3; }
.br-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.br-cal-wd { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.br-day { min-height: 44px; padding: 3px 1px; border-radius: 7px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.br-day:hover { filter: none; border-color: var(--link); }
.br-day .n { font-size: 12px; line-height: 1.2; }
.br-day .mks { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; }
.br-day.out { visibility: hidden; }
.br-day.heat, .br-cal-key .sw.heat { background: color-mix(in srgb, var(--violet) 30%, var(--card)); border-color: color-mix(in srgb, var(--violet) 50%, transparent); }
.br-day.heat-exp, .br-cal-key .sw.heat-exp { background: color-mix(in srgb, var(--violet) 10%, var(--card)); border: 1px dashed color-mix(in srgb, var(--violet) 60%, transparent); }
.br-day.heat-if { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--violet) 14%, var(--card)) 0 4px, var(--card) 4px 8px);
  border: 1px dashed color-mix(in srgb, var(--violet) 60%, transparent); }
.br-day.foalheat, .br-cal-key .sw.foalheat { background: color-mix(in srgb, var(--good) 18%, var(--card)); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.br-day.foalheat-exp { background: color-mix(in srgb, var(--good) 8%, var(--card)); border: 1px dashed color-mix(in srgb, var(--good) 50%, transparent); }
.br-day.due, .br-cal-key .sw.due { background: color-mix(in srgb, var(--accent) 40%, var(--card)); border-color: var(--accent); }
.br-day.today { outline: 2px solid var(--ink); outline-offset: -2px; }
.br-day.sel { box-shadow: inset 0 0 0 2px var(--link); }
.mk { display: inline-block; font-style: normal; flex: none; }
.mk.cover { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: #072b4a; font-size: 9.5px; line-height: 15px; font-weight: 600; text-align: center; }
.mk.yes { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.mk.no { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); }
.mk.chk { width: 14px; height: 14px; border-radius: 3px; font-size: 11px; line-height: 14px; color: #fff; font-weight: 700; text-align: center; }
.mk.plus { background: var(--good); } .mk.minus { background: var(--bad); } .mk.q { background: var(--muted); }
.mk.foal { width: 8px; height: 8px; background: var(--good); transform: rotate(45deg); margin: 2px; }
.br-cal-day { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: 13px; line-height: 1.6; }
.br-cal-day:empty { display: none; }
.br-cal-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.br-cal-key span { display: inline-flex; align-items: center; gap: 5px; }
.br-cal-key .sw { width: 16px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.mk.plan { width: 15px; height: 15px; border-radius: 50%; border: 1.5px dashed var(--accent); color: var(--ink); font-size: 9.5px; line-height: 12px; font-weight: 600; text-align: center; }

/* the day's teasing: its question before its answers (178) */
.br-q { font-size: 12.5px; color: var(--muted); align-self: center; }
@media (max-width: 640px) { .br-q { flex-basis: 100%; } }

/* the breeding monitor (the owner, 2026-10-20): a line a mare, a lamp for where she is */
.br-mon-key { font-size: 12px; color: var(--muted); margin: -8px 0 12px; }
.br-mon-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 8px; font-size: 13.5px; font-weight: 600; }
.br-mon-sec .muted { font-weight: 400; font-size: 12.5px; }
.br-mon-sec.br-mon-low { margin-top: 20px; color: var(--muted); }
.br-mon-list { display: flex; flex-direction: column; gap: 6px; }
.br-mon-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  text-align: start; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; cursor: pointer; }
.br-mon-row:hover { border-color: var(--accent); filter: none; }
.br-lamp { width: 11px; height: 11px; border-radius: 50%; background: var(--line); flex: none; }
/* the lamps' one-line key (the review, 2026-10-26) */
.br-lamp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.br-lamp-key > span { display: inline-flex; align-items: center; gap: 6px; }
.br-lamp-key .br-lamp { width: 9px; height: 9px; box-shadow: none; animation: none; }
.lane-cover .br-lamp { background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 85%, transparent); }
.lane-decide .br-lamp { background: var(--violet); box-shadow: 0 0 8px color-mix(in srgb, var(--violet) 60%, transparent); }
.lane-watch .br-lamp { background: var(--link); }
.lane-plan .br-lamp { background: transparent; border: 2px solid var(--muted); }
.lane-check .br-lamp { background: var(--warn); }
.br-mon-row.lane-foal { background: color-mix(in srgb, var(--good) 10%, var(--card)); border-color: color-mix(in srgb, var(--good) 38%, var(--line)); }
.lane-foal .br-lamp { background: var(--good); box-shadow: 0 0 11px color-mix(in srgb, var(--good) 80%, transparent); }
.br-mon-row.low { background: var(--bg); border-style: dashed; color: var(--muted); }
.br-mon-row.low b { color: var(--muted); font-weight: 500; }
.br-mon-row.low .br-lamp { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.br-mon-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-mon-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14.5px; }
.br-x { color: var(--muted); font-size: 12px; }
.br-mon-what { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.br-mon-what .badge { font-size: 11px; padding: 0 7px; margin-inline-start: 4px; }
.br-mon-age { font-size: 12px; color: var(--muted); white-space: nowrap; }
.br-steps { display: inline-flex; gap: 4px; flex: none; }
.br-steps i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line); }
.br-steps i.on { background: var(--good); border-color: var(--good); }
.br-steps i.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
@keyframes br-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.br-mon-row.due-now .br-lamp { animation: br-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .br-mon-row.due-now .br-lamp { animation: none; } }
.br-mon-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 500; }
.br-mon-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.br-mon-bar i { display: block; height: 100%; background: var(--good); box-shadow: 0 0 8px color-mix(in srgb, var(--good) 70%, transparent); }
.br-mon-done { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-weight: 600; color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line));
  box-shadow: 0 0 14px color-mix(in srgb, var(--good) 35%, transparent); }

/* --- the weather at the stud (181) ------------------------------------------ */
.wx-card { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.wx-card.wx-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.wx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.wx-top > .wx-icon { width: 46px; height: 46px; }
.wx-lead { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.wx-lead .wx-t { font-size: 28px; line-height: 1.1; font-weight: 600; }
.wx-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1; min-width: 180px; font-size: 13.5px; color: var(--muted); }
.wx-facts .wx-place { flex-basis: 100%; color: var(--ink); font-weight: 600; }
.wx-hours { list-style: none; margin: 12px 0 0; padding: 0 0 4px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.wx-hours li { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px;
  padding: 6px 4px; border-radius: 10px; background: var(--bg); font-size: 12.5px; }
.wx-hours li.wet { background: color-mix(in srgb, #3b82c4 14%, var(--bg)); }
.wx-hours .wx-h { color: var(--muted); }
.wx-hours .wx-icon { width: 24px; height: 24px; }
.wx-hours .wx-r { color: #3b82c4; font-size: 11.5px; }
.wx-credit { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.wx-icon { width: 20px; height: 20px; flex: none; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wx-icon .wx-sun { stroke: #e0a100; }
.wx-icon .wx-moon { stroke: #8a94a6; }
.wx-icon .wx-cloud { stroke: #8a94a6; fill: color-mix(in srgb, #8a94a6 14%, transparent); }
.wx-icon .wx-rain, .wx-icon .wx-snow { stroke: #3b82c4; }
.wx-icon .wx-bolt { stroke: #e0a100; }
.wx-icon.wx-fog .wx-cloud { fill: none; }
/* a turnout's weather in the day's program: the sky at its start, and what to mind */
.to-wx { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.to-wx .wx-icon { width: 18px; height: 18px; }
.to-wx-warn { display: inline-block; margin-inline-start: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
/* Settings: where the stud is */
.place-results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.place-results button { width: 100%; text-align: start; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 400; }
.place-results button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* the week's work (the owner, 2026-10-20): seven days, a day tapped */
.br-week-nav { display: flex; gap: 6px; }
.br-week-nav button { padding: 4px 11px; font-size: 13px; }
.br-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
.br-wd { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 66px; padding: 6px 2px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.br-wd:hover { filter: none; border-color: var(--accent); }
.br-wd .nm { font-size: 10.5px; color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.br-wd .dt { font-size: 13px; font-weight: 600; }
.br-wd .dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; min-height: 9px; }
.br-wd .dots i { width: 7px; height: 7px; border-radius: 50%; }
.br-wd .dots .heavy { color: var(--bad); font-size: 11px; line-height: 1; }
.br-wd.today { border-color: var(--ink); }
.br-wd.sel { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.br-wd.past:not(.sel) { background: var(--bg); }
.k-cover { background: var(--accent); } .k-tease { background: var(--link); } .k-season { background: var(--violet); }
.k-check { background: var(--warn); } .k-foal { background: var(--good); } .k-missed { background: var(--bad); }
.k-done { background: transparent; border: 1.5px solid var(--good); }
.br-day-title { font-size: 14px; margin: 2px 0 8px; }
.br-load { font-size: 12.5px; color: var(--muted); margin: -2px 0 10px; }
.br-load .over { color: var(--bad); font-weight: 600; }
.br-load b { color: var(--bad); font-weight: 600; }
.br-ok { color: var(--good); font-weight: 700; }
.br-no { color: var(--bad); font-weight: 700; }
.br-missed h3 { color: var(--bad); }

/* a horse's own page: its pedigree as the map's bracket, with room to read the names (2026-10-20) */
.horse-tree { grid-template-rows: repeat(16, 36px); min-width: 560px; }
.horse-tree .node .nm { font-size: 13px; }

/* estimated show scores (182): the stallion choice compares them */
.pick.br-pick { flex-wrap: wrap; }
.br-score { flex-basis: 100%; font-size: 11.5px; color: var(--muted); padding-inline-start: 24px; }
.br-up { color: var(--good); font-weight: 600; }
.br-down { color: var(--bad); }
.br-table tr.br-total td { font-weight: 600; border-top: 1.5px solid var(--line); }

/* --- the rules (183): set in Settings, said on the pages of the work ----------- */
.rules-said { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules-said li { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; line-height: 1.5; }
.rules-said li b { font-weight: 600; }
.card-head .rules-edit { padding: 6px 12px; font-size: 13px; }
.rules-tabs { margin-top: 4px; }

/* the breeding calendar by the month (the owner, 2026-10-20) */
.br-cal-view button { padding: 5px 12px; font-size: 13px; }
.br-month-title { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.br-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: 14px; }
.br-month .wd { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.br-md { min-height: 46px; padding: 4px 1px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.br-md:hover { filter: none; border-color: var(--accent); }
.br-md .n { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.br-md .dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
.br-md .dots i { width: 6px; height: 6px; border-radius: 50%; }
.br-md .dots .heavy { color: var(--bad); font-size: 10px; line-height: 1; }
.br-md.today { border-color: var(--ink); }
.br-md.sel { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.br-md.past:not(.sel) { background: var(--bg); }
.br-md.out { visibility: hidden; }

/* every page's ways to add, at its top (the owner, 2026-10-20) */
.page-adds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.page-adds button.add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
.page-adds button.add svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* a word at the far end of a horse to tick, on its line (the owner: "there is
   room on the same line, in the other corner") — worming: the days to its
   next drench (2026-10-21) */
.pick-note { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; font-size: 12.5px; color: var(--muted);
             unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
.pick-note.soon { color: var(--warn); font-weight: 600; }
.pick-note.late { color: var(--bad); font-weight: 600; }

/* shows (187): a horse picked from the stud's, from outside, or all; a new
   show made beside the list of shows; the five points' total said as typed */
.horse-scope { margin: 2px 0 8px; }
.horse-scope button { padding: 6px 10px; font-size: 12.5px; }
.inline-add { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 10px; font-size: 12.5px; }
.inline-add svg { width: 14px; height: 14px; }
.points-total { font-weight: 600; margin-top: 4px; }
.points-row .points { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; }
.points-row .points .field { margin: 0; min-width: 0; }
.points-row .points label { font-size: 11.5px; line-height: 1.3; }
.points-row .points input { text-align: center; padding-inline: 4px; }

/* the horse form: the platform's choice of a reference horse (188) */
.hf-kind { margin: 0 0 16px; }
.hf-kind .hint { margin-top: 6px; }

/* the breeding board's groups (2026-10-21): one Filter button, all first,
   then each stage, each with its count */
.br-filter-wrap { position: relative; margin: 10px 0 12px; }
.br-filter {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 500;
}
.br-filter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.br-filter b { font-weight: 600; color: var(--link); }
.br-filter.on, .br-filter[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.br-filter-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; width: min(290px, 100%);
  display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow);
}
.br-filter-menu.hidden { display: none; }
.br-filter-menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 8px; background: transparent; color: var(--ink); font-weight: 400; font-size: 14.5px; text-align: start;
}
.br-filter-menu button[aria-checked="true"] { background: var(--accent-soft); font-weight: 600; }
.br-mon-note { margin: 0 0 8px; font-size: 12.5px; }

/* the Filter's groups as a tree; the check round (2026-10-21) */
.br-filter-menu button.lv1 { padding-inline-start: 22px; }
.br-filter-menu button.lv2 { padding-inline-start: 34px; }
.br-filter-menu button.lv3 { padding-inline-start: 46px; font-size: 14px; }
.br-filter-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 8px; }
.br-round-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.br-round-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 8px; }
.br-round { display: flex; flex-direction: column; gap: 8px; }
.br-round-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.br-round-row .pick { border: 0; padding: 4px 0; align-items: flex-start; }
.br-round-row .pick .detail { display: block; font-size: 12.5px; }
.br-round-res { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.br-round-res.hidden { display: none; }
/* the Filter beside the board's title: its menu opens inward, under it */
.card-head .br-filter-wrap { margin: 0; }
.card-head .br-filter-menu { inset-inline-start: auto; inset-inline-end: 0; width: 280px; max-width: calc(100vw - 48px); }
/* the board's head: its title and the Filter on one line, always */
.br-mon-head { flex-wrap: nowrap; }
.br-mon-head h2 { min-width: 0; }

/* the calendar's day list, open only when asked for (2026-10-21): closed, a
   line for today */
.br-today-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
  font-weight: 400; font-size: 13.5px; text-align: start;
}
.br-today-line b { font-weight: 600; }
.br-open-mark { color: var(--muted); font-size: 16px; line-height: 1; }
.br-day-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.br-day-close { flex: none; }
/* the Filter grows with the group's name up to a size, then the name is cut
   short; the word and the count always show; the title keeps its room */
.br-mon-head h2 { flex: none; }
.br-mon-head .br-filter-wrap { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-end; margin-inline-start: auto; }
.br-mon-head .br-filter { min-width: 0; max-width: min(250px, 100%); }
.br-filter svg, .br-f-word { flex: none; }
.br-f-what { display: inline-flex; min-width: 0; }
.br-f-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-f-n { flex: none; white-space: nowrap; }

/* the dashboard's way to the stats and reports (2026-10-21) */
.dash-reports { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.dash-reports.hidden { display: none; }
.dash-reports svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash-reports .dr-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dash-reports .dr-go { flex: none; color: var(--link); font-weight: 600; }

/* a name in English and in Arabic (194; the owner, 2026-10-22): EN | ع beside its label */
.twin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.twin-head label { margin-bottom: 0; }
.twin-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; }
.twin-lang button { background: transparent; color: var(--muted); border-radius: 0; padding: 1px 8px; font-size: 11.5px; font-weight: 600; line-height: 18px; min-height: 0; }
.twin-lang button.on { background: var(--accent-soft); color: var(--ink); }
.twin-other:empty { display: none; }

/* the stud's logo (195; the owner, 2026-10-22): square, in place of its letters */
.brand .mark.has-logo { background: transparent; padding: 0; overflow: hidden; }
.brand .mark.has-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.field-title { display: block; font-size: 13.5px; margin-bottom: 6px; }
.stud-logo-row { display: flex; align-items: center; gap: 14px; }
.stud-logo { width: 88px; height: 88px; border-radius: 14px; border: 1px dashed var(--line); display: grid; place-items: center;
  overflow: hidden; flex: none; }
.stud-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stud-logo span { font-size: 12px; color: var(--muted); text-align: center; padding: 4px; }
.stud-logo-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.twin input[readonly] { color: var(--muted); }

/* what goes in each meal, and from when (196; the owner, 2026-10-22) */
.mi-meal { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mi-meal:last-child { border-bottom: 0; }
.mi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mi-now { margin-top: 4px; }
.mi-next { margin-top: 4px; color: var(--accent-ink, var(--ink)); font-size: 13.5px; }
.mi-before { margin-top: 6px; font-size: 13px; color: var(--muted); }
.mi-before summary { cursor: pointer; }
.mi-before ul { margin: 6px 0 0; padding-inline-start: 18px; }
.mi-lines { display: grid; gap: 8px; margin: 12px 0 4px; }
.mi-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto 36px; gap: 8px; align-items: center; }
.mi-unit { color: var(--muted); font-size: 13px; min-width: 24px; }

/* a check round: how many times each mare was covered, a yellow tag at the row's far end (the owner, 2026-10-22) */
.br-round-row .pick .br-covers { margin-inline-start: auto; flex: none; align-self: center; }

/* a column kept to one line: a code, an amount with its unit (202) */
td.nowrap { white-space: nowrap; }
/* what the units already say (what one sack holds): shown, not typed */
.field:not(.twin) > input[readonly] { background: transparent; color: var(--muted); }
/* codes typed one under another — an item's barcodes (202) */
.codes { display: flex; flex-direction: column; gap: 6px; }
.code-line { display: flex; gap: 6px; align-items: center; }
.code-line input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.code-line .icon-btn { flex: none; }
.codes + .inline-add { margin-top: 6px; align-self: flex-start; }

/* feeding courses (205): the courses, the feed room's notebook, the horses */
.fc-course { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fc-course:last-child { border-bottom: 0; }
.fc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-head h3 { margin: 0; font-size: 16px; }
.fc-tools { margin-inline-start: auto; display: flex; gap: 14px; }
.fc-who { margin: 4px 0 2px; font-size: 13.5px; color: var(--muted); }
.fc-who summary { cursor: pointer; }
.fc-names { margin-top: 4px; line-height: 1.7; color: var(--ink); }
.fc-meals { margin-top: 6px; }
.fc-meal { padding: 8px 0; border-top: 1px dashed var(--line); }
.fc-meal-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-meal-top .link { margin-inline-start: auto; }
.fc-time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; min-width: 3.2em; display: inline-block; }
.fc-meal-now { margin-top: 3px; padding-inline-start: 3.7em; }
.fc-meal .mi-next, .fc-meal .mi-before { padding-inline-start: 3.7em; }
.fc-own-head { margin: 18px 0 2px; font-weight: 600; color: var(--muted); font-size: 13.5px; }
.fc-course.own .fc-head h3 { font-size: 15px; }
.fc-drawer-course { font-weight: 600; margin: 0 0 10px; }
.fb-days { align-items: center; }
.fb-day { min-width: 6em; text-align: center; font-weight: 600; }
.fb-time { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.fb-time:last-child { border-bottom: 0; }
.fb-time > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: baseline; font-size: 16px; font-weight: 600; }
.fb-time > summary::-webkit-details-marker { display: none; }
.fb-time > summary::after { content: '▾'; margin-inline-start: 6px; color: var(--muted); font-size: 12px; }
.fb-time:not([open]) > summary::after { content: '▸'; }
[dir="rtl"] .fb-time:not([open]) > summary::after { content: '◂'; }
.fb-sum { margin-inline-start: auto; font-weight: 500; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.fb-time[open] > summary { margin-bottom: 8px; }
.fb-group { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.fb-head { display: flex; align-items: baseline; gap: 10px; }
.fb-count { margin-inline-start: auto; font-weight: 600; white-space: nowrap; }
.fb-recipe { margin-top: 4px; }
.fb-horses { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fb-horse { white-space: nowrap; }
.fb-place { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fb-add { color: var(--warn); font-weight: 600; }
.fb-total { margin-top: 6px; color: var(--muted); }
.fh-add { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.fh-add span { flex: 1; }
@media print {
  body.print-book #app > :not(#feedBook) { display: none !important; }
  body.print-book .fb-group { break-inside: avoid; }
}

/* the feed room by box, wing by wing (206) */
.fb-wing { margin-top: 8px; }
.fb-wing-name { font-weight: 600; font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.fb-wing-name .fb-count { font-weight: 500; }
.fb-box { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
tr.fh-wing td { background: var(--bg); font-weight: 600; color: var(--muted); font-size: 13px; padding-top: 10px; }

/* a composition written where it is named (207): the course's drawer, the horse's */
.comp-title { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 2px; }
.comp-title .hint { margin: 0; }
.comp-meal { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.comp-meal.comp-bad { border-color: var(--bad); }
.comp-head { display: grid; grid-template-columns: minmax(0, 1fr) 144px 32px; gap: 8px; align-items: start; }
.comp-head .comp-x { margin-top: 22px; }
.comp-head .clock-said { margin-top: 3px; }
.comp-new { margin-top: 8px; }
.comp-badge { margin-top: 6px; }
.comp-meal .mi-lines { margin: 10px 0 2px; }
.comp-meal .inline-add { margin-top: 6px; }
.comp > .inline-add { margin-top: 10px; }

/* today's horses on no course, under the notebook's meals (208) */
.fb-none { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); }
.fb-none-n { margin-inline-start: 6px; color: var(--muted); font-size: 13.5px; }

/* the deleted items (209): by the site's sections, each to bring back or delete for good */
.bin-hint { margin: -8px 0 14px; }
.chips .bin-n { opacity: .7; margin-inline-start: 3px; }
.bin-sec h2 .count { color: var(--muted); font-weight: 500; font-size: 14px; }
.bin-item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.bin-sec h2 + .bin-item { border-top: 0; padding-top: 2px; }
.bin-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.bin-what { font-size: 15px; }
.bin-subject { unicode-bidi: plaintext; }
.bin-when { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.bin-gone { font-size: 12.5px; color: var(--muted); }
.bin-acts { display: flex; gap: 8px; flex: none; }
.bin-acts .bin-forget { color: var(--bad); }

/* the feeding page, opened by a tap (210): a meal, a horse */
.fb-time > summary:hover .fb-name { text-decoration: underline; }
.fb-horse[data-fh-info] { cursor: pointer; }
@media (hover: hover) { .fb-horse[data-fh-info]:hover { text-decoration: underline; } }
tr.fh-row { cursor: pointer; }
@media (hover: hover) { tr.fh-row:hover td { background: var(--bg); } }
.fi-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.fi-acts button { padding: 7px 12px; font-size: 13px; }
.fi-meal { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px dashed var(--line); }
.fi-meal:first-child { border-top: 0; padding-top: 2px; }
.fi-what { margin-top: 2px; }
.fi-adds > div, .fi-note { padding: 4px 0; }
.fi-page { margin-top: 18px; }

/* the feed room's own order (210): wings and horses moved up and down */
.fo-wing { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.fo-wing-head { display: flex; align-items: center; gap: 8px; }
.fo-wing-head .fo-moves { margin-inline-start: auto; }
.fo-list { list-style: none; margin: 6px 0 0; padding: 0; }
.fo-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--line); }
.fo-name { flex: 1; min-width: 0; unicode-bidi: plaintext; }
.fo-moves { display: inline-flex; gap: 4px; flex: none; }
.fo-moves .icon-btn { font-size: 13px; line-height: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.fo-list li:first-child [data-up], .fo-list li:last-child [data-down],
.fo-wing:first-child .fo-wing-head [data-up], .fo-wing:last-child .fo-wing-head [data-down] { visibility: hidden; }
.fo-moved { background: color-mix(in srgb, var(--accent) 24%, transparent); }
/* the notebook in the stud's columns: each wing whole in its own, its horses one under another */
.fb-wings[data-cols] { columns: var(--fb-cols) 11em; column-gap: 26px; column-rule: 1px dashed var(--line); }
.fb-wings[data-cols] .fb-wing { break-inside: avoid; margin-top: 0; padding-top: 8px; }
.fb-wings[data-cols] .fb-horses { display: block; }
.fb-wings[data-cols] .fb-horse { display: block; white-space: normal; padding: 3px 0; }

/* the additions seen in the feed notebook: under each meal's line, and first in its drawer */
.fb-time > summary { flex-wrap: wrap; }
.fb-adds-sum { flex-basis: 100%; order: 3; margin-inline-start: 3.7em; font-size: 13.5px; font-weight: 600; color: var(--warn); }
.fb-adds { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 7%, transparent); }
.fb-adds-title { font-weight: 600; font-size: 13.5px; color: var(--warn); }
.fb-adds-item { margin-top: 8px; }
.fb-adds-head { display: flex; gap: 10px; align-items: baseline; }
.fb-adds-head .fb-count { margin-inline-start: auto; font-weight: 600; white-space: nowrap; }

/* an addition written horse by horse (211): each ticked horse its line — its meals, how much */
.ad-line { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); display: grid; gap: 8px; }
.ad-who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ad-meals { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ad-meals .tick { display: inline-flex; align-items: center; gap: 6px; }
.ad-qty { display: flex; align-items: center; gap: 8px; }
.ad-qty input { max-width: 120px; }

/* today's meals already given (the notebook) */
.fb-time > summary .fb-past { font-size: 11.5px; font-weight: 500; align-self: center; }
.fb-past-said { margin: 0 0 10px; }

/* the additions, all in one place (the feeding page) */
.ax-tools { margin: 0 0 10px; gap: 8px; }
.ax-horse { padding: 10px 0; border-top: 1px solid var(--line); }
.ax-horse:first-child { border-top: 0; padding-top: 2px; }
.ax-who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ax-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; padding-inline-start: 10px;
  border-inline-start: 3px solid color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ax-what { flex: 1 1 220px; min-width: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ax-acts { display: inline-flex; gap: 14px; flex: none; }
.ax-acts .ax-stop { color: var(--bad); }

/* the feeding pane on the map: the course it follows; its table meal by meal, the day in all */
.map-feed-course { margin: 0 0 10px; }
.map-feed-day th.map-feed-meal { text-align: start; font-weight: 600; background: var(--bg); }
.map-feed-day tfoot td, .map-feed-day tfoot th { font-weight: 700; }
.map-feed-day .map-feed-added { color: var(--warn); }

/* the exceptional meal: each meal, and under it its additions — given unless unticked (212) */
.picks.ex-meals { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ex-meal { display: grid; gap: 6px; }
.ex-adds { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-inline-start: 28px; color: var(--warn); font-weight: 600; font-size: 13.5px; }
.ex-adds .tick { display: inline-flex; align-items: center; gap: 6px; }
.ex-adds input:disabled + * , .ex-adds .tick:has(input:disabled) { opacity: .5; }

/* the horses' working names (213): passport name, then the working one in each language */
.wn-wrap { overflow-x: auto; }
.wn-table th[scope="row"] { text-align: start; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--bg); }
.wn-table th[scope="row"] .detail { font-weight: 400; }
.wn-table input { width: 100%; min-width: 8em; }
.wn-who { margin: 8px 0 10px; font-weight: 600; }
@media (max-width: 640px) {
  /* on a phone: the name, and under it its two boxes side by side */
  .wn-table thead { display: none; }
  .wn-table, .wn-table tbody { display: block; }
  .wn-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .wn-table th[scope="row"] { grid-column: 1 / -1; background: none; padding: 0; border: 0; }
  .wn-table td { padding: 0; border: 0; }
  .wn-table input { min-width: 0; font-size: 16px; }
}

/* the owner's own account: the working names too (214) */
.wn-mine { margin: 0 0 14px; }
.wn-mine .hint { margin-top: 2px; }

/* a horse's line: its name first, its box at the far end (the owner, 2026-10-24) */
.fb-horse { display: inline-flex; align-items: baseline; gap: 6px; }
.fb-wings[data-cols] .fb-horse { display: flex; }
.fo-name, .ax-who, .ad-who { display: flex; align-items: baseline; gap: 6px; }
.fb-box { order: 9; margin-inline-start: auto; padding-inline-start: 10px; }

/* the map coloured by feeding course (the owner, 2026-10-24) */
.map-colour { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.map-colour button { padding: 6px 12px; }
.map-colour button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
/* the breeding log's choice: what it shows (the owner, 2026-10-26) */
.br-log-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.br-log-tabs button { padding: 6px 12px; }
.br-log-tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
/* the full path: a plan a rectangle, as the page draws its mares (the owner, 2026-10-26: «يبين مستطيلات») — the mare ×
   her stallion and how it stands at the top, each step on a line of its own under them */
.br-plog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br-plog li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.br-plog li > .badge { grid-column: 2; grid-row: 1; justify-self: end; }
.br-plog-who { grid-column: 1; grid-row: 1; min-width: 0; }
.br-plog-who bdi { display: inline-block; }
.br-plog-x { color: var(--muted); }
.br-plog-step { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.br-plog-step b { font-weight: 600; color: var(--ink); }
.br-plog li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .br-plog li:hover { background: var(--bg); } }
/* closed, its last covering's day only; open, every step and the way to her (the owner, 2026-10-26) */
.br-plog-chev { grid-column: 3; grid-row: 1; color: var(--muted); font-size: 18px; line-height: 1; }
.br-plog-chev::before { content: '⌄'; }
.br-plog li.open .br-plog-chev::before { content: '⌃'; }
.br-plog-last { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.br-plog li.open > .br-plog-last { display: none; }
.br-plog li:not(.open) > .br-plog-step, .br-plog li:not(.open) > .br-plog-open { display: none; }
.br-plog-open { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.stud-map .map-box.by-course rect { fill: color-mix(in srgb, var(--course) 70%, var(--card)); }
.stud-map .map-box.by-course.mixed rect { fill: color-mix(in srgb, var(--course) 70%, var(--card)); stroke: var(--course2); stroke-width: .22; stroke-dasharray: .35 .2; }
.map-key.key-mixed i { background: repeating-linear-gradient(45deg, var(--map-shared) 0 3px, var(--card) 3px 6px); }

/* the boxes by course on the feed page (the owner, 2026-10-24) */
.fm-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.fm-course { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); border: 2px solid var(--course);
  background: color-mix(in srgb, var(--course) 45%, var(--card)); }
.fm-course b { font-size: 15px; } .fm-course span { font-size: 13px; color: var(--ink); }
.fm-scroll { overflow-x: auto; }
.fm-scroll .fm-map { min-width: 640px; max-height: none; }
.fm-map .map-box[data-fh-info] { cursor: pointer; }

/* what each course gives, in its square (the owner, 2026-10-24) */
.fm-courses { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.fm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fm-meals { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.fm-meals li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; font-size: 13.5px; }
.fm-meals li > span:last-child { grid-column: 2; color: var(--ink); }
.fm-horses { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13.5px; }
.fm-horses [data-fh-info] { cursor: pointer; text-decoration: underline dotted; }

/* the squares say one meal at a time, chosen by its button (the owner, 2026-10-24) */
.fm-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.fm-pick button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.fm-pick button.on .detail { color: inherit; }
.fm-meal { margin-top: 6px; font-size: 14px; color: var(--ink); }

/* the additions on the feed page's map: a dot in the box's corner, a line each under the squares */
.stud-map .fm-add-dot { stroke: var(--card); stroke-width: .06; }
.fm-adds { display: grid; gap: 4px; margin: -4px 0 12px; font-size: 13.5px; font-weight: 600; }
/* an addition: what at the start, how many horses at the end — under the square's own count */
.fm-add { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fm-add-what { display: inline-flex; align-items: center; gap: 6px; }
.fm-add-n { font-weight: 400; white-space: nowrap; }
.fm-add i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* the additions inside their square (the owner, 2026-10-25) */
.fm-course .fm-adds { display: grid; gap: 4px; margin: 8px 0 0; font-size: 13px; }
/* the course squares all one size (the owner, 2026-10-25) */
.fm-courses { align-items: stretch; grid-auto-rows: 1fr; }
.fm-course { align-content: start; }

/* a course square tapped: its drawer (the owner, 2026-10-25) */
.fm-course[data-fm-square] { cursor: pointer; }
@media (hover: hover) { .fm-course[data-fm-square]:hover { filter: brightness(.97); } }
.fms-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fms-top i { width: 16px; height: 16px; border-radius: 4px; background: var(--course); display: inline-block; }
.fms-top .detail { margin-inline-start: auto; }
.fms-horses { display: grid; gap: 2px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.fms-horses .fb-horse { display: flex; padding: 6px 0; border-bottom: 1px dashed var(--line); white-space: normal; }

/* the feed notebook's calendar (the owner, 2026-10-25), the breeding page's look */
.fb-days { flex-wrap: wrap; gap: 6px; }
.fb-cal { margin: 4px 0 6px; }
.fbc-dots i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.fbc-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 10px; font-size: 11.5px; color: var(--muted); }
.fbc-key span { display: inline-flex; align-items: center; gap: 5px; }
.fbc-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.k-change { background: var(--link); } .k-add { background: var(--warn); } .k-exc { background: var(--bad); }
.fb-day-title { margin: 4px 0 8px; font-size: 15px; }
/* each feeding course a card of its own (the owner, 2026-10-25) */
.fc-course { padding: 14px 16px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.fc-course:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.fc-own-head { margin: 18px 0 8px; }

/* feed raised step by step (218) */
.fst-line { margin: 10px 0 0; font-size: 13.5px; }
.fst-table input:not([type=checkbox]) { width: 6em; }
.fcs-plan { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.fcs-plan h4 { margin: 0 0 8px; }
.fcs-items { margin: 0 0 8px; padding-inline-start: 18px; display: grid; gap: 4px; }
.fcs-warn { color: var(--bad); font-weight: 600; margin: 6px 0; }

/* each horse's needs (219) */
.fnu-item { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }
.fnu-item h4 { margin: 0 0 6px; }
.nd-sum { margin: 6px 0 10px; }
.nd-list { display: grid; gap: 6px; }
.nd-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--card); }
@media (hover: hover) { .nd-row:hover { border-color: var(--accent); } }
.nd-top { display: flex; align-items: baseline; gap: 8px; }
.nd-top .fb-box { margin-inline-start: auto; }
.nd-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.nd-chip { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.nd-chip.bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--bad); font-weight: 600; }
.nd-chip.warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 12%, var(--card)); }
.nd-chip.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.nd-chip.quiet { color: var(--muted); }
.nd-line { margin: 0 0 10px; color: var(--muted); }
.nd-work { margin: 0 0 10px; } .nd-work p { margin: 0 0 4px; } .nd-work p.hint { margin: 0; }
.nd-table tr.bad td, .nd-facts li.bad b { color: var(--bad); font-weight: 700; }
.nd-table tr.warn td, .nd-facts li.warn b { color: var(--warn); font-weight: 700; }
.nd-facts { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.nd-advice { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); }
.nd-advice h4 { margin: 0 0 6px; } .nd-advice ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.fc-ff { margin-top: 12px; }

/* a horse's day said whole (220): least, most, what it eats, a mark */
.nd-table td:nth-child(2), .nd-table td:nth-child(3) { white-space: nowrap; color: var(--muted); }
.nd-table td.nd-mark { font-weight: 700; text-align: center; }
.nd-table tr.good td.nd-mark { color: var(--good); }
.nd-table tr.bad td.nd-mark { color: var(--bad); } .nd-table tr.warn td.nd-mark { color: var(--warn); }
.nd-table tr.bad th, .nd-table tr.warn th { font-weight: 700; }

/* a proposed ration */
.nd-prop { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.nd-prop h4 { margin: 0 0 8px; } .nd-prop h5 { margin: 10px 0 4px; font-size: 13.5px; }
.nd-prop-said { margin: 8px 0 0; font-weight: 600; }
.nd-prop-meals { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.nd-prop-table td.nd-up { color: var(--good); font-weight: 600; } .nd-prop-table td.nd-down { color: var(--bad); font-weight: 600; }
.fc-suggest { margin: 12px 0 4px; } .fc-suggest .hint { margin-top: 4px; }