/* The herd: Cow album overlay, farm health cards, goals, the quiet cards, the herd-day pick screen, and the small pieces on the brief,
   the offer cards and the hub HUD. Same dark-cab look as style.css; the cow cards are cream polaroids on the dark sheet.
   Accents: pink (primary), amber (money, warnings), teal (healing / health), green (sound), red (limping). */
.hd-ovl, .hd-quiet, .hd-dayo { --ok: #7fd39a; --lame: #ff7a5a; --heal: #f2c14e; --rest: #8fb4e8; --gone: #8a8480 }
.hd-hbtn { font: inherit; color: inherit; cursor: pointer; text-align: left; position: relative; min-width: 4.4em; padding-left: .75em; padding-right: .75em; flex: none }
.hd-hbtn i { font-style: normal; font-size: .74em; color: #b9aca0 }
.hd-hbtn:hover { background: var(--glass); filter: brightness(1.2) }
.hd-hbtn b { display: flex; align-items: center; gap: .3em } .hd-ic { width: 1.05em; height: 1.05em; color: var(--amber); display: inline-flex } .hd-ic svg { width: 100%; height: 100% }
.hd-pip { position: absolute; top: .35em; right: .5em; width: .7em; height: .7em; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 .18em rgba(233, 91, 147, .3); animation: hdpulse 1.6s ease-in-out infinite }
@keyframes hdpulse { 50% { box-shadow: 0 0 0 .4em rgba(233, 91, 147, 0) } }

/* ---- the overlay ---- */
.sheet.hd-sheet { width: min(80em, 96vw); height: min(44em, 93vh); max-height: 93vh; grid-template-rows: auto minmax(0, 1fr); padding: 1.1em 1.5em 1.2em; gap: .9em; overflow: hidden }
.hd-head { display: flex; align-items: center; gap: 1.4em }
.hd-title { display: flex; align-items: center; gap: .6em; color: var(--amber) }
.hd-title > svg { width: 2.3em; height: 2.3em } .hd-title h3 { font-size: 2.1em; color: var(--cream) }
.hd-title span { color: var(--muted); font-weight: 700; font-size: .9em }
.hd-tabs { display: flex; gap: .4em; margin-left: auto }
.hd-tabs button, .hd-filters button { font: inherit; font-weight: 800; font-size: .92em; color: #cbbfb0; background: rgba(255, 255, 255, .05); border: 0; border-radius: .8em; padding: .5em 1em; cursor: pointer; box-shadow: 0 .16em 0 rgba(0, 0, 0, .35); transition: transform .1s }
.hd-tabs button:hover, .hd-filters button:hover { background: rgba(255, 255, 255, .11); transform: translateY(-.06em) }
.hd-tabs button.on, .hd-filters button.on { background: var(--pink); color: #2a0c1a; box-shadow: 0 .16em 0 var(--pink-d) }
.hd-tabs small, .hd-filters small { opacity: .7; font-weight: 700 }
.hd-body { min-height: 0; overflow: auto; display: grid; align-content: start; gap: .8em; padding: .2em .3em .6em 0 }
.hd-filters { display: flex; flex-wrap: wrap; gap: .4em }
.hd-empty { display: grid; gap: .4em; justify-items: center; padding: 4em 1em; text-align: center; color: var(--muted) } .hd-empty b { color: var(--cream); font-size: 1.4em }

/* ---- cow cards ---- */
.hd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.4em, 1fr)); gap: 1em .9em; padding: .3em .2em 1em }
.hd-c { all: unset; box-sizing: border-box; cursor: pointer; background: var(--clipt-bg); color: var(--clipt-ink); border-radius: .9em; padding: .45em .45em .55em; display: grid; gap: .3em; align-content: start; box-shadow: 0 .22em 0 #d9c4b6, 0 .8em 1.4em rgba(0, 0, 0, .4); transition: transform .14s var(--ease-pop), box-shadow .14s; animation: rise .45s calc(var(--i, 0) * .03s) both }
.hd-c:nth-child(3n+1) { transform: rotate(-1.1deg) } .hd-c:nth-child(3n+2) { transform: rotate(.7deg) } .hd-c:nth-child(3n) { transform: rotate(-.4deg) }
.hd-c:hover, .hd-c:focus-visible { transform: translateY(-.25em) rotate(0); box-shadow: 0 .22em 0 #d9c4b6, 0 1.3em 2em rgba(0, 0, 0, .5); outline: none }
.hd-c:focus-visible { outline: .18em solid var(--amber); outline-offset: .15em }
.hd-ph { position: relative; aspect-ratio: 16/9; border-radius: .55em; overflow: hidden; background: #1a1612 }
.hd-ph img { width: 100%; height: 100%; object-fit: cover; display: block }
.hd-ph.por img { object-position: 50% 35%; filter: saturate(.8) }
.hd-tag { position: absolute; right: .3em; bottom: .3em; background: var(--amber); color: #2a2008; font-weight: 900; font-size: .78em; padding: .1em .55em; border-radius: .4em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .4) }
.hd-dot { position: absolute; left: .4em; top: .4em; width: .85em; height: .85em; border-radius: 50%; border: .13em solid #fff; background: var(--gone); box-shadow: 0 .06em .2em rgba(0, 0, 0, .5) }
.hd-dot.ok { background: var(--ok) } .hd-dot.lame { background: var(--lame) } .hd-dot.heal { background: var(--heal) } .hd-dot.rest { background: var(--rest) }
.hd-dot.big { position: static; width: 1em; height: 1em; display: inline-block; vertical-align: middle; border-color: var(--cream) }
.hd-ribbon { position: absolute; left: 0; top: .55em; background: rgba(40, 34, 30, .88); color: var(--cream); font-weight: 800; font-size: .72em; padding: .15em .8em .15em 1.5em; border-radius: 0 .4em .4em 0; letter-spacing: .06em; text-transform: uppercase }
.hd-c.gone .hd-ph img { filter: grayscale(.9) brightness(.8) } .hd-c.gone { background: #e9e0d6 }
.hd-nm { display: grid; gap: 0; padding: 0 .2em } .hd-nm b { font-size: 1.12em; font-weight: 900; font-stretch: 78%; line-height: 1.1 } .hd-nm small { color: var(--clipt-mut); font-weight: 700; font-size: .76em }
.hd-mt { display: flex; justify-content: space-between; padding: 0 .2em; font-weight: 800; font-size: .84em; color: #6a5560 } .hd-mt .hd-stars, .hd-tl .hd-stars { color: #d99a1c; letter-spacing: .04em }
.hd-bd { display: flex; flex-wrap: wrap; gap: .25em; padding: 0 .1em; min-height: .2em }
.hd-b { display: inline-flex; align-items: center; gap: .25em; font-size: .68em; font-weight: 850; padding: .12em .6em .12em .4em; border-radius: 2em; background: #eee3d8; color: #5a4a50; letter-spacing: .02em }
.hd-b svg { width: 1.15em; height: 1.15em; fill: currentColor } .hd-b.sv, .hd-b.rm { padding-left: .6em }
.hd-b.fan { background: #ffd9e7; color: #a2305f } .hd-b.pet { background: #ffe3cf; color: #a24a1c } .hd-b.fv { background: #fdeeb8; color: #7a5a0c } .hd-b.sv { background: #d6f1de; color: #1f6a3a } .hd-b.rm { background: #dfe2ef; color: #3a4270 }
.hd-c.ghost { cursor: default; background: rgba(255, 255, 255, .04); color: var(--muted); box-shadow: none; border: .1em dashed rgba(255, 255, 255, .16); transform: none; animation: none }
.hd-c.ghost:hover { transform: none; box-shadow: none } .hd-c.ghost .hd-ph img { filter: grayscale(1) brightness(.45) contrast(.9) } .hd-c.ghost .hd-nm b { font-weight: 800; color: #bdb3a6 } .hd-c.ghost .hd-nm small { color: var(--muted) } .hd-c.ghost .hd-tag { background: #4a413a; color: #d7ccbc }

/* ---- one cow ---- */
.hd-det { display: grid; grid-template-columns: 17.5em minmax(0, 1fr); gap: 1.6em; align-items: start; padding: .2em .2em 1em }
.hd-l { display: grid; gap: .8em } .hd-r { display: grid; gap: .55em; min-width: 0 }
.hd-back { all: unset; cursor: pointer; font-weight: 800; color: var(--pink); font-size: .92em } .hd-back:hover { text-decoration: underline } .hd-back:focus-visible { outline: .18em solid var(--amber) }
.hd-polaroid { margin: 0; background: var(--clipt-bg); padding: .55em .55em .4em; border-radius: .6em; box-shadow: 0 .25em 0 #d9c4b6, 0 1.2em 2em rgba(0, 0, 0, .5); transform: rotate(-1.6deg); display: grid; gap: .35em }
.hd-polaroid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: .3em; background: #1a1612 } .hd-polaroid.por img { object-position: 50% 35%; aspect-ratio: 4/3 }
.hd-polaroid.gone img { filter: grayscale(.9) brightness(.85) }
.hd-polaroid figcaption { font-size: .78em; font-weight: 800; color: var(--clipt-mut); text-align: center; font-family: var(--mono); letter-spacing: .02em }
.hd-badges { display: flex; flex-wrap: wrap; gap: .3em } .hd-badges:empty { display: none } .hd-badges .hd-b { font-size: .78em }
.hd-tempc, .hd-conf { background: rgba(255, 255, 255, .05); border-radius: .9em; padding: .55em .8em; display: grid; gap: .1em }
.hd-tempc i, .hd-conf i, .hd-stats i, .hd-big i { font-style: normal; font-size: .72em; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.hd-tempc b, .hd-conf b { font-size: 1.1em; font-weight: 850; color: var(--cream) } .hd-tempc .hd-mem { font-style: italic; margin-top: .35em; padding-top: .35em; border-top: 1px solid rgba(255, 255, 255, .1); color: #f6d889 } .hd-tempc .hd-mem.bad { color: #ffb09a }
.hd-tempc p { margin: .1em 0 0; font-size: .82em; color: #cfc4b8; line-height: 1.35 }
.hd-id { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap } .hd-id h2 { margin: 0; font-size: 3em; font-weight: 900; font-stretch: 62%; line-height: 1; color: var(--cream) }
.hd-eartag { background: var(--amber); color: #2a2008; font-weight: 900; padding: .1em .7em; border-radius: .4em; font-size: 1.05em }
.hd-sub { margin: 0; color: #cbbfb0; font-weight: 600; font-size: .95em } .hd-now { margin: .1em 0 0 }
.hd-st { display: inline-block; font-weight: 800; padding: .25em .8em; border-radius: 2em; font-size: .88em; background: rgba(255, 255, 255, .08) }
.hd-st.ok { background: rgba(127, 211, 154, .18); color: #a8ecbf } .hd-st.lame { background: rgba(255, 122, 90, .2); color: #ffb09a } .hd-st.heal { background: rgba(242, 193, 78, .18); color: #f6d889 } .hd-st.rest { background: rgba(143, 180, 232, .18); color: #b6d0f2 } .hd-st.gone { background: rgba(138, 132, 128, .25); color: #cfc7bd }
.hd-story { margin: 0; font-style: italic; color: #e3d8c8; border-left: .22em solid var(--pink); padding: .1em 0 .1em .8em; font-size: .95em; line-height: 1.4 }
.hd-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5em }
.hd-stats > div { background: rgba(255, 255, 255, .05); border-radius: .8em; padding: .45em .6em; display: grid; gap: .05em } .hd-stats b { font-size: 1.15em; font-weight: 850; color: var(--cream) } .hd-stats .hd-stars { color: var(--amber); font-size: .85em; letter-spacing: 0 }
.feet { display: flex; gap: .15em } .feet u { text-decoration: none; font-size: .56em; font-weight: 900; padding: .15em .25em; border-radius: .3em; background: rgba(255, 255, 255, .08); color: #8d8279; font-family: var(--mono) } .feet u.on { background: rgba(127, 211, 154, .3); color: #b9f1cc }
.hd-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.4em; margin-top: .3em }
.hd-cols h5 { margin: 0 0 .5em; font-size: .78em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800 }
.hd-tl { list-style: none; margin: 0; padding: 0 0 0 .2em; display: grid; gap: .55em; position: relative }
.hd-tl::before { content: ""; position: absolute; left: 4.35em; top: .3em; bottom: .3em; width: .13em; background: rgba(255, 255, 255, .12); border-radius: 1em }
.hd-tl li { display: grid; grid-template-columns: 4em 1fr; gap: 1em; align-items: start; position: relative } .hd-tl li::after { content: ""; position: absolute; left: 4.1em; top: .35em; width: .62em; height: .62em; border-radius: 50%; background: var(--pink); border: .12em solid #1b1411 }
.hd-tl li.ev::after { background: #8a8480 } .hd-tl li.healed::after { background: var(--ok) } .hd-tl li.relapse::after { background: var(--lame) } .hd-tl li.slow::after { background: var(--heal) }
.hd-tl i { font-style: normal; font-size: .76em; color: var(--muted); font-weight: 700; font-family: var(--mono); padding-top: .2em; text-align: right }
.hd-tl li > div { display: grid; gap: .05em; font-size: .92em; padding-left: .3em } .hd-tl b { font-weight: 800; color: var(--cream) } .hd-tl small { color: #b5a99b; font-weight: 600 } .hd-tl .hd-stars { color: var(--amber) } .hd-tl em { font-style: normal; color: #f6d889; font-weight: 700; font-size: .9em }
.hd-tl li.healed em { color: #a8ecbf } .hd-tl li.relapse em { color: #ffb09a } .hd-tl li.ev > div { color: #d8cdbd; font-style: italic }
.hd-vids { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em } .hd-vids li { background: rgba(255, 255, 255, .05); border-radius: .8em; padding: .5em .8em; display: grid; gap: .05em; font-size: .9em } .hd-vids b { color: var(--cream); font-weight: 800 } .hd-vids span { color: var(--muted); font-size: .85em; font-weight: 600 } .hd-vids .none { color: var(--muted); font-style: italic }

/* ---- farm cards ---- */
.hd-farms { display: grid; grid-template-columns: repeat(auto-fill, minmax(24em, 1fr)); gap: 1em; padding: .2em .2em 1em }
.hd-fc { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.1em; overflow: hidden; box-shadow: 0 .25em 0 rgba(0, 0, 0, .35); display: grid; align-content: start }
.hd-fart { height: 5.2em; background-size: cover; background-position: center 40%; position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: .6em .9em; gap: .5em }
.hd-fart::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(14, 10, 9, .88)) } .hd-fart b, .hd-fart span { position: relative }
.hd-fart b { font-size: 1.5em; font-weight: 900; font-stretch: 70%; color: var(--cream) } .hd-fart span { font-size: .82em; font-weight: 800; color: var(--amber) }
.hd-fcb { padding: .7em .9em .9em; display: grid; gap: .6em } .hd-fc.idle .hd-fcb p { margin: 0 }
.hd-lamerow { display: grid; grid-template-columns: 9.4em minmax(0, 1fr); gap: .8em; align-items: center }
.hd-big { display: grid; gap: .05em } .hd-big b { font-size: 3em; font-weight: 900; font-stretch: 70%; color: var(--cream); line-height: 1 }
.hd-big em { font-style: normal; font-size: .76em; font-weight: 800; color: #cbbfb0; white-space: nowrap } .hd-big em.hd-dn { color: #a8ecbf } .hd-big em.hd-up { color: #ffb09a }
.hd-gr { width: 100%; height: auto; overflow: visible } .hd-gr .gl line { stroke: rgba(255, 255, 255, .09) } .hd-gr .gl text, .hd-gr .ax { fill: #8d8279; font-size: 8.5px; font-weight: 700; text-anchor: end; font-family: var(--mono) } .hd-gr .ax { text-anchor: start }
.hd-gr .stl { stroke: rgba(255, 255, 255, .25); stroke-dasharray: 3 3 } .hd-gr .ln { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: hddraw 1s .1s ease-out forwards }
.hd-gr.hd-up .ln { stroke: var(--lame) } .hd-gr .ar { fill: rgba(127, 211, 154, .14) } .hd-gr.hd-up .ar { fill: rgba(255, 122, 90, .13) } .hd-gr .dt circle { fill: #1b1411; stroke: var(--ok); stroke-width: 2 } .hd-gr.hd-up .dt circle { stroke: var(--lame) }
@keyframes hddraw { to { stroke-dashoffset: 0 } }
.hd-chips { display: flex; flex-wrap: wrap; gap: .35em } .hd-chips span { font-size: .78em; font-weight: 800; padding: .2em .75em; border-radius: 2em; background: rgba(255, 255, 255, .07); color: #cbbfb0 }
.hd-chips .r { background: rgba(255, 122, 90, .18); color: #ffb09a } .hd-chips .a { background: rgba(242, 193, 78, .16); color: #f6d889 } .hd-chips .t { background: rgba(60, 188, 179, .18); color: #8fe3dc }
.hd-quote { margin: 0; font-style: italic; color: #e3d8c8; border-left: .22em solid var(--pink); padding-left: .8em; font-size: .92em; line-height: 1.4 }
.hd-news { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; font-size: .84em; color: #cfc4b8 } .hd-news i { font-style: normal; font-family: var(--mono); font-size: .85em; color: var(--muted); margin-right: .6em } .hd-news .none { color: var(--muted); font-style: italic }
.hd-news li.cull { color: #cfc7bd } .hd-news li.saved { color: #a8ecbf } .hd-news li.calf, .hd-news li.pet { color: #f6d889 }
.hd-fcb .btn { justify-self: start }

/* ---- goals ---- */
.hd-goals { display: grid; gap: .8em; padding: .2em .2em 1em } .hd-lead { margin: 0; color: #cbbfb0 }
.hd-goals ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(26em, 1fr)); gap: .6em }
.hd-goals li { background: rgba(255, 255, 255, .05); border-radius: 1em; padding: .65em .95em; display: grid; gap: .3em }
.hd-goals li.done { background: rgba(127, 211, 154, .12) } .hd-gt { display: flex; justify-content: space-between; gap: 1em } .hd-gt b { font-weight: 800; color: var(--cream) } .hd-gt span { font-weight: 850; color: var(--muted); font-family: var(--mono); font-size: .9em } .hd-goals li.done .hd-gt span { color: #a8ecbf }
.hd-goals .meter u { display: block; height: 100%; border-radius: 1em; background: var(--pink) } .hd-goals li.done .meter u { background: var(--ok) }
.hd-goals .meter { height: .55em; margin: 0 } .hd-goals small { color: var(--muted); font-weight: 700 }

/* ---- the quiet card ---- */
.hd-quiet { background: radial-gradient(ellipse at 50% 45%, rgba(24, 18, 20, .78), rgba(4, 3, 4, .93)); z-index: 74 }
.sheet.hd-qs { width: min(44em, 94vw); grid-template-columns: 13em 1fr; gap: 1.6em; align-items: center; padding: 1.6em 1.9em; background: linear-gradient(#241c1a, #171110); border-color: rgba(246, 236, 220, .14) }
.hd-quiet.warm .hd-qs { background: linear-gradient(#2a221a, #1c1511); border-color: rgba(242, 193, 78, .35) }
.hd-qb { display: grid; gap: .7em } .hd-qb small { font-family: var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; font-size: .74em } .hd-qb h3 { font-size: 2.4em; color: var(--cream) }
.hd-qb p { margin: 0; line-height: 1.45; color: #e3d8c8; opacity: 0; animation: hdin .9s both }
@keyframes hdin { from { opacity: 0; transform: translateY(.4em) } to { opacity: 1; transform: none } }
.hd-qf { display: flex; gap: .8em; margin-top: .6em; flex-wrap: wrap }
.hd-qs .hd-polaroid { transform: rotate(-2.4deg) }

/* ---- herd day ---- */
.hd-dayo { z-index: 72 }
.sheet.hd-daysheet { width: min(84em, 97vw); height: min(45em, 94vh); max-height: 94vh; grid-template-rows: auto minmax(0, 1fr); padding: 1.1em 1.4em 1.2em; overflow: hidden; gap: .8em }
.hd-dayh { display: grid; grid-template-columns: auto 1fr 15em; gap: 1.1em; align-items: center }
.hd-farmer { width: 4.6em; height: 4.6em; border-radius: 50%; object-fit: cover; border: .16em solid var(--cream); box-shadow: 0 .2em 0 #0b0706 }
.hd-dayh small { font-family: var(--mono); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--amber) } .hd-dayh h3 { font-size: 2em } .hd-dayh p { margin: .1em 0 0; color: #d8cdbd; font-style: italic; font-size: .95em }
.hd-clock { display: grid; gap: .15em } .hd-clock i { font-style: normal; font-size: .72em; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase } .hd-clock b { font-family: var(--mono); font-size: 1.6em; color: var(--cream) }
.hd-clock .meter { height: .7em; margin: 0 } .hd-clock .meter u { display: block; height: 100%; background: var(--amber); transition: width .25s linear; border-radius: 1em } .hd-clock .meter u.low { background: var(--lame) }
.hd-daybody { display: grid; grid-template-columns: minmax(0, 1fr) 17em; gap: 1.2em; min-height: 0 }
.hd-yard { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.4em, 1fr)); gap: .8em; align-content: start; overflow: auto; padding: .3em .3em 1em }
.hd-tile { all: unset; box-sizing: border-box; cursor: pointer; background: var(--clipt-bg); color: var(--clipt-ink); border-radius: .9em; padding: .4em .4em .5em; display: grid; gap: .25em; align-content: start; box-shadow: 0 .2em 0 #d9c4b6, 0 .7em 1.2em rgba(0, 0, 0, .4); transition: transform .12s var(--ease-pop) }
.hd-tile:hover { transform: translateY(-.2em) } .hd-tile:focus-visible { outline: .18em solid var(--amber); outline-offset: .12em }
.hd-tile.picked { box-shadow: 0 .2em 0 var(--pink-d), 0 0 0 .2em var(--pink), 0 .7em 1.2em rgba(0, 0, 0, .4); transform: translateY(-.1em) } .hd-tile.lame:not(.picked) { box-shadow: 0 .2em 0 #b8452d, 0 .7em 1.2em rgba(0, 0, 0, .4) }
.hd-n { position: absolute; left: .35em; top: .3em; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--pink); color: #2a0c1a; font-weight: 900; display: grid; place-items: center; box-shadow: 0 .1em .3em rgba(0, 0, 0, .5) }
.hd-fl { display: flex; flex-wrap: wrap; gap: .2em } .hd-fl span { font-size: .66em; font-weight: 850; padding: .12em .55em; border-radius: 2em; background: #eee3d8; color: #5a4a50 }
.hd-fl .f-limp { background: #ffd9ce; color: #a0301a } .hd-fl .f-sore { background: #fdeeb8; color: #7a5a0c } .hd-fl .f-fav { background: #ffd9e7; color: #a2305f } .hd-fl .f-due { background: #dfe7ef; color: #3a4a60 } .hd-fl .f-fresh { background: #e4f2dc; color: #3a6a2a }
.hd-order { background: rgba(255, 255, 255, .05); border-radius: 1em; padding: .8em .9em; display: grid; gap: .6em; align-content: start; min-height: 0; overflow: auto }
.hd-order h5 { margin: 0; font-size: .82em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; display: flex; justify-content: space-between } .hd-order ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em }
.hd-order li { display: grid; grid-template-columns: 1.6em 1fr; gap: .1em .6em; align-items: center; padding: .35em .6em; border-radius: .7em; background: rgba(255, 255, 255, .05); min-height: 2.4em; cursor: pointer } .hd-order li small { grid-column: 2; color: #b5a99b; font-weight: 600; font-size: .74em }
.hd-order li i { font-style: normal; font-weight: 900; color: var(--muted); font-family: var(--mono) } .hd-order li.on { background: rgba(233, 91, 147, .2) } .hd-order li.on i { color: var(--pink) } .hd-order li.empty { border: .1em dashed rgba(255, 255, 255, .16); background: none; cursor: default } .hd-order li b { font-weight: 850; color: var(--cream) } .hd-order li.empty span { color: var(--muted); font-size: .8em; font-style: italic }
.hd-hint { margin: 0; font-size: .84em; color: #d8cdbd; line-height: 1.35; min-height: 3.4em } .hd-df { display: grid; gap: .5em } .hd-df .btn { width: 100% }

/* ---- the brief: her file, a card under the herd record on the left ---- */
.b-biz .hd-memo { background: var(--glass); gap: .35em }
.hd-mrow { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: center } .hd-mrow:not(:has(.hd-mini)) { grid-template-columns: 1fr }
.hd-memo.new h6 { color: var(--pink) } .hd-memo p { color: #e3d8c8 }
.hd-mini { width: 5.4em; aspect-ratio: 16/9; object-fit: cover; border-radius: .35em; transform: rotate(-3deg); box-shadow: 0 .1em .3em rgba(0, 0, 0, .5); border: .16em solid var(--clipt-bg) }
.hd-memo .hd-badges .hd-b { font-size: .64em }

/* ---- the job cards ---- */
.hd-offer { display: flex; align-items: center; flex-wrap: wrap; gap: .1em .6em; margin-top: .15em; font-size: .72em; font-weight: 750; color: #6a5560 }
.hd-offer .hd-sp { width: 4.6em; height: 1.3em } .hd-offer b { color: #2b1e24; font-weight: 900 } .hd-offer em { font-style: normal; font-weight: 900 } .hd-offer em.hd-dn { color: #2f8a52 } .hd-offer em.hd-up { color: #c0442a }
.hd-hdtag { background: #ffe1ec; color: #a2305f; padding: .1em .7em; border-radius: 2em; font-weight: 850 }
.hd-sp .ln { fill: none; stroke: #2f8a52; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round } .hd-sp .ar { fill: rgba(47, 138, 82, .15) } .hd-sp circle { fill: #2f8a52 }
.hd-sp.hd-up .ln { stroke: #c0442a } .hd-sp.hd-up .ar { fill: rgba(192, 68, 42, .14) } .hd-sp.hd-up circle { fill: #c0442a }

@media (max-width: 1000px) {
  .hd-det { grid-template-columns: 1fr } .hd-stats { grid-template-columns: repeat(3, 1fr) } .hd-cols { grid-template-columns: 1fr }
  .sheet.hd-qs { grid-template-columns: 1fr } .hd-daybody { grid-template-columns: 1fr } .hd-dayh { grid-template-columns: auto 1fr }
}
@media (prefers-reduced-motion: reduce) { .hd-c, .hd-qb p, .hd-gr .ln { animation: none; opacity: 1; stroke-dashoffset: 0 } }