/* ========================================================================== 00 FONTS — self-hosted, Latin subset only No Google Fonts request. This app runs on a NAS with no guaranteed connectivity at the chute; a blocking external font request is a blank screen. Files live in static/fonts/. font-display:swap avoids invisible text while they load. Inter Tight ships as one variable-weight file (wght axis 100–900) covering all four weights used here, so a single @font-face with a weight range replaces four static files. ========================================================================== */ @font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/barlow-condensed-600.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/barlow-condensed-700.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter Tight"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/inter-tight-variable.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-500.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-mono-600.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ========================================================================== HEADGATE DESIGN SYSTEM — v3.0 Replaces static/style.css in full. Do not append to this file. RULES FOR ANYONE EDITING THIS FILE, INCLUDING FUTURE CLAUDE: 1. No version-dated layers. The old file grew to 2,832 lines across 32 appended blocks (v1.0.2 … v2.19.2c), each patching the last. That is how .hero-command ended up defined eight times. If a rule is wrong, change the rule. Do not add a later one that wins. 2. No hardcoded colour. Every colour is a token in :root. The old file had 381 unique hex values against 60 token uses. If you need a colour that is not here, add a token and say what it means. 3. No !important. The old file had 178. Every one of them is a specificity argument that was lost. If you need !important, the selector above it is wrong. The single exception is the reduced-motion block at the bottom, where overriding author styles is the entire point. 4. Section order is load-bearing. Tokens, then base, then components, then layout, then responsive, then the legacy shim. The shim is last on purpose and is the only place allowed to reference dead class names. ORGANISATION 01 Tokens 02 Base and reset 03 Typography 04 Ear tag chip (signature element) 05 Buttons 06 Forms 07 Tables 08 Cards and panels 09 Status pills, badges, flashes 10 App shell — sidebar, topbar, footer 11 Dashboard — today band, stats, charts 12 Phone and PWA 13 Chute mode 14 Utilities 15 Responsive 16 Legacy compatibility shim 17 Print and accessibility Sections 18+ are per-feature additions made after the v3.0 rewrite, in the order each feature shipped. Same rules apply: tokens, not hex; no !important; reuse .pill/.card/.btn/--warn-tint etc. before inventing a new pattern. Add a new numbered section for a genuinely new feature area; do not append loose rules after the legacy shim. 18 Working cattle session 19 Animal profile 20 Admin portal (2.29.4c) 21 Settings 22 Calving 23 Vaccines & medications 24 Calendar 25 Pastures 26 Hay inventory 27 Purchasing 28 Sales 29 Reports 30 Business hub ========================================================================== */ /* ========================================================================== 01 TOKENS ========================================================================== */ :root{ /* --- surface ------------------------------------------------------- */ --ink:#141A17; --ink-2:#3A443E; /* #69726C on --paper was 4.49:1 — a hair under the 4.5:1 floor. Darkened to #69716B (imperceptible) so it clears on both --card and --paper. */ --muted:#69716B; --paper:#F2F4EF; --card:#FFFFFF; /* V-03. Was #DEE3DA -- 1.18:1 against --paper, which is decoration indoors and gone in direct sun. These lines separate one animal's row from the next, so they have to survive being read in a chute. #AEB7A8 is 1.87:1. WCAG 1.4.11 asks 3:1 for UI boundaries and #848E7D would meet it, but 3:1 on every hairline rules the whole interface like a ledger. Row dividers are not required to understand the content -- the rows are also separated by spacing -- so the stronger value is held back for borders that carry state. */ --line:#AEB7A8; --line-2:#EDF0EA; /* --- brand --------------------------------------------------------- */ /* base.html sets --brand-primary / --brand-accent inline per tenant. These fall back to Headgate's own palette when a ranch has not set its own, so a white-label deploy needs no stylesheet change. */ --brand:var(--brand-primary,#0E5240); --brand-2:#0A3E30; --brand-tint:#E7F0EC; --brand-on:#FFFFFF; /* --- ear tag colours ----------------------------------------------- */ /* These are data, not theme. A tag colour identifies a herd group in the pen; the interface uses the same colours so the screen matches the animal. Do not repurpose them for decoration. */ --tag-yellow:#F2C230; --tag-yellow-ink:#3B2E00; --tag-green:#4F9A3F; --tag-green-ink:#0E2A0A; --tag-orange:#E0651B; --tag-orange-ink:#3A1500; --tag-blue:#2F6FB0; --tag-blue-ink:#08203A; --tag-red:#C0392B; --tag-red-ink:#340B07; --tag-white:#FFFFFF; --tag-white-ink:#2A2A2A; /* --- state --------------------------------------------------------- */ /* alert = money at risk right now (withdrawal active, overdue step) warn = money at risk soon (withdrawal closing, due today) ok = clear */ --alert:#B3261E; --alert-2:#8E1E17; --alert-tint:#FBEBEA; --alert-edge:#F0CDCA; --warn:#8A6100; --warn-tint:#FDF5DF; --warn-edge:#F2C230; --warn-edge-soft:#EEDCA8; --ok:#2E6B3E; --ok-tint:#E9F3EA; --ok-edge:#C7E0CC; --info:#1F5C8B; --info-tint:#E8F1F8; --info-edge:#C7DCEC; /* --- interactive ----------------------------------------------------- */ /* Hover border on inputs/choices/chips, and placeholder text. Not a semantic state colour, just a step darker than --line for hover. */ --line-hover:#C6CEC2; --placeholder:#9BA39D; /* --- sidebar (dark surface) ------------------------------------------ */ /* Text and accent colours for the sidebar's own dark-green surface. Not usable on --paper or --card; they only have contrast against --brand-2. */ --sidebar-text:#EAF1EE; --sidebar-text-dim:#D3E2DC; --sidebar-muted:#8FB3A6; /* #6F978A on --brand-2 was 3.71:1, below the 4.5:1 floor for the nav-group labels it's used on. Lightened to #83A69A to clear it. */ --sidebar-muted-2:#83A69A; --sidebar-avatar-bg:#1C6A54; --sidebar-avatar-ink:#CFE6DD; /* --- chute mode (dark surface) ----------------------------------------- */ /* Its own dark-ground micro-palette per section 13. Not usable on --paper or --card. */ --chute-muted:#8B958F; --chute-card:#1E2723; --chute-card-line:#2E3833; --chute-chip-bg:#2A342F; --chute-chip-line:#3A453F; --chute-chip-ink:#D6DEDA; --chute-chip-hover:#354039; --chute-go-hover:#E5B520; --chute-ok:#4CAF6B; --chute-alert:#E2685B; /* --- calendar event categories --------------------------------------- */ /* Task/AI/Health/Maintenance dots reuse --brand/--info/--warn-edge/--muted since they already carry the right meaning; Calving and Preg Check are their own event types with no existing semantic token to borrow, so they each get one named colour rather than a bare hex sitting in the component rule. */ --cal-calving:#C2568B; --cal-pregcheck:#5B7FC7; /* --- print ------------------------------------------------------------ */ --print-border:#999999; --print-th-bg:#EEEEEE; --print-ink:#000000; /* --- type ---------------------------------------------------------- */ --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif; --ui:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --t-xs:11px; --t-sm:12.5px; --t-md:13.5px; --t-lg:15px; --t-xl:18px; /* V-02: was 10.5px. Set through the `font` shorthand, so the first pass -- which searched for font-size: -- missed it, and the Email/Password labels on the login screen stayed below the caption floor. Uppercase tracked text is the hardest thing on the page to read in sun. */ --label:600 11px/1.2 var(--ui); /* uppercase eyebrow label */ --label-track:.11em; /* --- geometry ------------------------------------------------------ */ --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:99px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --shadow:0 1px 2px rgba(20,26,23,.05), 0 4px 16px rgba(20,26,23,.05); --shadow-lg:0 8px 32px -8px rgba(20,26,23,.18); /* --- ergonomics ---------------------------------------------------- */ /* 44px is Apple's minimum. 54px is what a gloved thumb needs, and is used for anything tapped while an animal is in the chute. */ --tap:44px; --tap-glove:54px; --sidebar-w:264px; --topbar-h:56px; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); /* --- hub hero band --------------------------------------------------- */ /* One shared dark-surface treatment for every top-level hub's desktop header (Today/Work/Land/Business) so they read as one product instead of four independently hand-tuned gradients. Do not add a fifth. */ --hero-grad: radial-gradient(circle at 82% 20%,rgba(205,174,104,.24),transparent 31%), linear-gradient(125deg,var(--brand-2),#123f34 72%,#183a32); --hero-shadow:0 16px 36px rgba(10,42,34,.16); --hero-eyebrow:#bcd0c8; --hero-body:#d9e6e1; --hero-glass-bg:rgba(255,255,255,.1); --hero-glass-border:rgba(255,255,255,.24); --hero-glass-bg-hover:rgba(255,255,255,.17); } /* ========================================================================== 02 BASE AND RESET ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--ui);font-size:var(--t-md);line-height:1.45; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{max-width:100%} button{font:inherit;color:inherit;cursor:pointer} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} hr{border:0;border-top:1px solid var(--line-2);margin:var(--s4) 0} :focus-visible{ outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm); } /* The default brand-green outline is close to invisible on the app's own brand-green surfaces -- confirmed by contrast ratio (~1.3:1 against the sidebar, an exact color match against the chute header), nowhere near WCAG's 3:1 minimum for a focus indicator. Every surface that's brand- green, brand-2, or the shared hero gradient gets a light outline instead, scoped locally so nothing else on the page is affected. */ .app-sidebar :focus-visible, .chute-head :focus-visible, .command-hero :focus-visible, .field-hero :focus-visible, .land-hero :focus-visible, .business-hero :focus-visible{ outline-color:var(--brand-on); } .visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap; } .skip-link{ position:fixed;left:var(--s3);top:0;z-index:100;transform:translateY(-160%); background:var(--card);padding:var(--s3) var(--s4);border-radius:var(--r-sm); box-shadow:var(--shadow-lg);font-weight:600; } .skip-link:focus{top:var(--s3);transform:none} /* ========================================================================== 03 TYPOGRAPHY ========================================================================== */ h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2} h1{font-size:24px} h2{font-size:19px} h3{font-size:15px} h4{font-size:var(--t-md)} p{margin:0 0 var(--s3)} p:last-child{margin-bottom:0} /* Big numerals — herd counts, weights, money. Condensed so a five-digit figure still fits a narrow card without shrinking the type. */ .figure{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:.01em} .figure-xl{font-size:38px} .figure-lg{font-size:30px} .figure-md{font-size:22px} /* Anything that lines up in a column: weights, doses, dates, money. */ .num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums} .eyebrow{ font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase; color:var(--muted); } .muted{color:var(--muted)} .section-title{ font-family:var(--display);font-weight:700;font-size:26px; letter-spacing:.03em;text-transform:uppercase; } /* ========================================================================== 04 EAR TAG CHIP — the signature element -------------------------------------------------------------------------- An animal is never rendered as a database row. It is rendered as its tag: punch hole, rounded body, heavy condensed numerals, real tag colour. This is the one place the product spends its visual boldness, and it earns it by being functional — colour is the herd group, so the screen matches what is hanging in the animal's ear. Markup: DCE233 ========================================================================== */ .tag{ display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start; min-width:44px;padding:17px 8px 7px;border-radius:22px 22px 8px 8px; font-family:var(--display);font-weight:700;line-height:.94;letter-spacing:.01em; position:relative;flex:none;text-decoration:none; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); } /* The punched hole at the top where a real button tag's post goes through the ear -- a tall, rounded-top body with a dark hole near the peak is what actually reads as "livestock ear tag" rather than a generic chip. */ .tag::before{ content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%); width:9px;height:9px;border-radius:50%; background:rgba(0,0,0,.5); box-shadow:inset 0 1px 2px rgba(0,0,0,.5); } .tag--white::before{background:rgba(0,0,0,.62)} .tag b{display:block;font-size:19px;margin-top:3px} .tag i{ font-style:normal;font-family:var(--ui);font-weight:600;font-size:8.5px; letter-spacing:.09em;text-transform:uppercase;opacity:.72; } a.tag:hover{text-decoration:none;filter:brightness(1.06)} .tag--yellow{background:var(--tag-yellow);color:var(--tag-yellow-ink)} .tag--green {background:var(--tag-green); color:var(--tag-green-ink)} .tag--orange{background:var(--tag-orange);color:var(--tag-orange-ink)} .tag--blue {background:var(--tag-blue); color:var(--tag-blue-ink)} .tag--red {background:var(--tag-red); color:var(--tag-red-ink)} .tag--white { background:var(--tag-white);color:var(--tag-white-ink); box-shadow:inset 0 0 0 1px var(--line),inset 0 -2px 0 rgba(0,0,0,.07); } .tag--sm{min-width:34px;padding:13px 6px 5px;border-radius:16px 16px 6px 6px} .tag--sm::before{top:4px;width:7px;height:7px} .tag--sm b{font-size:15px;margin-top:2px} /* V-02, KNOWINGLY LEFT: .tag i / .tag--sm i are uppercase tracked text at 8.5px and 7.5px inside a fixed-width tag pill (min-width 34px). They are the least readable text in the app -- tiny, tracked, uppercase and at .72 opacity -- but raising them overflows the pill, so the pill has to be redesigned rather than the type nudged. Left as a known item instead of silently breaking the tag or silently ignoring it. */ .tag--sm i{font-size:7.5px} .tag--lg{min-width:60px;padding:22px 12px 11px;border-radius:30px 30px 10px 10px} .tag--lg::before{top:9px;width:12px;height:12px} .tag--lg b{font-size:30px;margin-top:4px} .tag--lg i{font-size:var(--t-xs)} /* An animal that no longer has a tag in its ear — sold, dead, culled. */ .tag--void{opacity:.45;filter:grayscale(1)} /* Tag beside a name. The single most repeated pattern in the product. */ .identity{display:flex;align-items:center;gap:11px;min-width:0} .identity .thumb{ /* Width/height come from each usage's own HTML attributes (40px in ai.html's list rows, 64px in ai_detail.html's larger detail view) -- this rule only handles shape, fit and the icon-fallback centering. */ border-radius:50%;object-fit:cover;flex:none; background:var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--placeholder); } /* Herd Inventory's desktop table photo column -- same rounded-square convention as .animal-mobile-card .thumb below, since it's the same photo at a different breakpoint. .placeholder is unscoped so it also covers the mobile card's no-photo state further down this file. */ .herd-table-card .thumb{width:40px;height:40px;border-radius:var(--r);object-fit:cover} .thumb.placeholder{display:flex;align-items:center;justify-content:center;background:var(--line-2);color:var(--placeholder)} .identity .name{min-width:0} .identity .name b{display:block;font-weight:600;line-height:1.25} .identity .name small{display:block;color:var(--muted);font-size:var(--t-xs)} /* ========================================================================== 05 BUTTONS ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:var(--tap);padding:9px 15px; background:var(--brand);color:var(--brand-on);border:1px solid transparent; border-radius:var(--r-sm);font-weight:600;font-size:var(--t-md); text-decoration:none;white-space:nowrap; transition:background .12s ease,border-color .12s ease; } .btn:hover{background:var(--brand-2);color:var(--brand-on);text-decoration:none} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed} /* Still fully clickable -- just visually de-prioritized on a ranch with no herd yet, where "work cattle" and "record birth" have nothing to act on. */ .btn.is-dim{opacity:.5} .btn.is-dim:hover{opacity:.75} .quick-btn.is-dim{opacity:.5} .btn--secondary{background:var(--card);color:var(--brand);border-color:var(--line)} .btn--secondary:hover{background:var(--brand-tint);color:var(--brand)} .btn--quiet{background:transparent;color:var(--brand);border-color:transparent} .btn--quiet:hover{background:var(--brand-tint);color:var(--brand)} .btn--danger{background:var(--alert);border-color:var(--alert)} .btn--danger:hover{background:var(--alert-2)} .btn--danger-quiet{background:transparent;color:var(--alert);border-color:var(--line)} .btn--danger-quiet:hover{background:var(--alert-tint);color:var(--alert)} .btn--sm{min-height:34px;padding:6px 12px;font-size:var(--t-sm)} .btn--lg{min-height:var(--tap-glove);padding:14px 22px;font-size:var(--t-lg)} .btn--block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center} .btn-row form{margin:0;display:inline-flex} /* Edit/Delete row pinned to the bottom of a record card -- pastures.html, contacts.html, hay.html, poultry.html. */ .card-actions{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3)} .card-actions form{margin:0;display:inline-flex} /* Save/Cancel row at the foot of a .form -- ai_inventory_edit.html, ai_event_edit.html, ai_sync_edit.html, parent_profile_edit.html, animal_edit.html. */ .form-action-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)} /* Back-link row above the form on animal_edit.html -- same shape as .btn-row, plus the margin-bottom .btn-row alone doesn't carry. */ .animal-edit-nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)} /* ========================================================================== 06 FORMS ========================================================================== */ .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)} .form--1{grid-template-columns:minmax(0,1fr)} .form--3{grid-template-columns:repeat(3,minmax(0,1fr))} .form .full{grid-column:1/-1} .field{display:grid;gap:5px;min-width:0} .field > span,.field > label{ font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase; color:var(--ink-2); } /* `.form label` sets text-transform:uppercase, and resets it only on the input/select/textarea inside. A inside a label therefore inherited it, rendering whole sentences of guidance in spaced all-caps -- "A ROUGH NUMBER IS FINE. TWENTY OR MORE AND WE WILL START YOU WITH THE SPREADSHEET IMPORTER". Fine for a two-word field label, hard work for a sentence. Scoped to .field before v2.41.0c, so every hint outside a .field wrapper was affected: login, genetics, health, inventory, the AI screens, and both new onboarding forms. */ .hint,.field .hint{font-size:var(--t-xs);color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400} .field-help{font-size:var(--t-xs);color:var(--muted)} .field .error{font-size:var(--t-xs);color:var(--alert);font-weight:600} input[type=text],input[type=number],input[type=date],input[type=time], input[type=datetime-local], input[type=email],input[type=password],input[type=search],input[type=tel], select,textarea{ width:100%;min-height:var(--tap);padding:10px 12px; background:var(--card);color:var(--ink); border:1px solid var(--line);border-radius:var(--r-sm); font:inherit; } textarea{min-height:88px;resize:vertical} input:hover,select:hover,textarea:hover{border-color:var(--line-hover)} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint); } input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--alert)} input::placeholder,textarea::placeholder{color:var(--placeholder)} /* A readonly field (e.g. an auto-assigned ID preview) looks identical to a real editable field otherwise -- nothing distinguishes it, so typing into one silently does nothing with no visual cue why. Applies everywhere a readonly input is used, not just one form. */ input[readonly]{background:var(--paper);color:var(--muted);cursor:not-allowed} input[readonly]:focus{box-shadow:none;border-color:var(--line)} input[type=checkbox],input[type=radio]{ width:20px;height:20px;min-height:0;accent-color:var(--brand);margin:0; } .password-field{position:relative} .password-field input[type=password],.password-field input[type=text]{padding-right:40px} .password-toggle{ position:absolute;right:4px;top:50%;transform:translateY(-50%); display:grid;place-items:center;width:32px;height:32px; background:transparent;border:0;border-radius:var(--r-sm); color:var(--muted);cursor:pointer; } .password-toggle:hover{color:var(--ink);background:var(--paper)} .password-toggle svg{width:18px;height:18px;display:block} .password-toggle .icon-eye-off{display:none} .password-toggle[aria-pressed="true"] .icon-eye{display:none} .password-toggle[aria-pressed="true"] .icon-eye-off{display:block} /* Checkbox or radio with its label, sized as one tap target. */ .choice{ display:flex;align-items:center;gap:var(--s2);min-height:var(--tap); padding:8px 11px;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);cursor:pointer; } .choice[hidden]{display:none} .choice:hover{border-color:var(--line-hover)} .choice input{flex:none} .choice .name{min-width:0} .choice .name b{display:block;font-weight:600;font-size:var(--t-md)} .choice .name small{display:block;color:var(--muted);font-size:var(--t-xs)} .choice:has(input:checked){border-color:var(--brand);background:var(--brand-tint)} .choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s2)} /* Per-animal card in the sale-editing grid (sale_edit.html) -- same selected-state language as .choice, plus a price/notes sub-section .choice alone doesn't need. */ .sale-animal-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2); } .sale-animal-card.selected{border-color:var(--brand);background:var(--brand-tint)} .sale-animal-select{display:flex;align-items:center;gap:var(--s2);cursor:pointer;min-height:var(--tap)} .sale-animal-select input{flex:none} .sale-animal-select span{min-width:0} .sale-animal-select b{display:block;font-weight:600} .sale-animal-select small{display:block;color:var(--muted);font-size:var(--t-xs)} .sale-animal-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)} /* sales.html: saving immediately, irreversibly marks every selected animal Sold -- same weight as .dose-warning's safety-critical language. */ .sale-save-warning{ display:flex;align-items:flex-start;gap:var(--s2); background:var(--warn-tint);border-left:3px solid var(--warn-edge); border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--warn); } /* Three mini counts (Males/Females/Total) inside a poultry group card. */ .record-counts{display:flex;gap:var(--s3);margin:var(--s2) 0} .record-counts>div{flex:1;text-align:center;background:var(--paper);border-radius:var(--r-sm);padding:8px} .record-counts b{display:block;font-size:var(--t-lg);font-family:var(--mono)} .record-counts span{display:block;color:var(--muted);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em} /* Sire photo + name header at the top of the semen-lot edit form -- same shape/fit convention as .identity .thumb and .parent-card .ph, just bigger since this is a profile header, not a list row. */ .sire-edit-header{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)} .sire-edit-photo{ width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none; background:var(--line-2);display:flex;align-items:center;justify-content:center; color:var(--placeholder);font-size:22px; } .sire-edit-header h3{margin:0} .sire-edit-header p{margin:2px 0 4px;color:var(--muted);font-size:var(--t-sm)} /* Migrated/duplicate/skipped/warning tiles on the import report. */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3)} /* Tap-to-select chips — body condition, sex, category. Faster than a select on a phone and readable at arm's length. */ .chip-set{display:flex;flex-wrap:wrap;gap:var(--s2)} .chip{ display:inline-flex;align-items:center;min-height:44px;padding:9px 14px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill); font-weight:600;font-size:var(--t-md); } .chip:hover{border-color:var(--line-hover)} .chip.is-on{background:var(--tag-yellow);border-color:var(--tag-yellow);color:var(--tag-yellow-ink)} fieldset{border:0;margin:0;padding:0;min-width:0} legend{font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-2);padding:0 0 var(--s2)} /* Parentage links, nested inside a larger animal-edit .form -- a bordered box makes the boundary of the sub-section obvious. Shared by animal_edit.html, animal_form.html, breeding.html, record_edit.html. */ .parent-link-fieldset{ border:1px solid var(--line);border-radius:var(--r-sm); padding:var(--s4);background:var(--paper); } .nested-form{margin-top:var(--s2)} /* ========================================================================== 07 TABLES -------------------------------------------------------------------------- Every table is wrapped by base.html's auto-responsive script. Keep that. ========================================================================== */ .responsive-table,.auto-responsive-table{ overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0; } /* Right-edge fade, only once base.html's script confirms the table actually overflows -- see the comment there for why this can't be unconditional the way it is on chip rows (no trailing whitespace to safely eat into on a dense data table). */ .responsive-table.is-scrollable,.auto-responsive-table.is-scrollable{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%); } table{width:100%;border-collapse:collapse} th{ text-align:left;padding:10px var(--s5); background:var(--paper);border-bottom:1px solid var(--line-2); font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase; color:var(--muted);white-space:nowrap; } td{ padding:11px var(--s5);border-bottom:1px solid var(--line-2); font-size:var(--t-md);vertical-align:middle; } tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--brand-tint)} td.right,th.right{text-align:right} .table-compact th,.table-compact td{padding:8px var(--s4)} /* Flags a row (or a single spanning cell, as kpi_report.html's caveat row does) that deserves a second look -- an inactive user, a KPI caveat. */ .row-caution{background:var(--warn-tint);color:var(--warn)} .row-critical{background:var(--alert-tint);color:var(--alert)} tbody tr.row-caution:hover{background:var(--warn-tint)} tbody tr.row-critical:hover{background:var(--alert-tint)} .restriction-badge{color:var(--alert);margin-left:5px;font-size:var(--t-sm)} /* -------------------------------------------------------------------------- B-071 Record tables become one card per record on a phone -------------------------------------------------------------------------- These tables are all wrapped and scrollable, so nothing was unreachable -- but at 375px the wrapper is ~309px and the tables want 520-970px, so the columns falling off the right edge were the ones you came to use. Measured: /health 968px, /weaning 891, /expenses 799, /equipment 696, /preg-check 624 (Days bred AND BCS off-screen), /sales 597 (Amount and Actions). base.html copies each column's header into its cells as data-label and adds .table-cards to the wrapper, so this is the Feed Board's card pattern applied to every record table at once rather than fifteen template edits. 767px, not the 900px the .phone-only switch uses: between the two there is still ~740px of wrapper, which fits most of these tables, and carding a tablet would waste the width it has. ------------------------------------------------------------------------ */ @media (max-width:767px){ .table-cards > table, .table-cards > table > tbody, .table-cards > table > tbody > tr, .table-cards > table > tbody > tr > td, .table-cards > table > tr, .table-cards > table > tr > td{ display:block; width:auto } /* The column names now live in each cell. */ .table-cards > table > thead, .table-cards tr.row-headers{ display:none } .table-cards{ overflow-x:visible } .table-cards.is-scrollable{ -webkit-mask-image:none; mask-image:none } .table-cards > table > tbody > tr, .table-cards > table > tr{ background:var(--card);border:1px solid var(--line-2); border-radius:var(--r);padding:var(--s2) var(--s4);margin-bottom:var(--s3); } .table-cards > table > tbody > tr:last-child, .table-cards > table > tr:last-child{ margin-bottom:0 } /* The hover tint reads as a selected state on a card. */ .table-cards > table > tbody > tr:hover, .table-cards > table > tr:hover{ background:var(--card) } .table-cards td{ display:flex !important;gap:var(--s4);align-items:baseline; justify-content:space-between; /* A long value -- a combination product name, a note -- drops onto its own line under the label instead of being squeezed against the card edge. Short values stay on the label's line, which is most of them. */ flex-wrap:wrap;overflow-wrap:anywhere; padding:8px 0;border-bottom:1px dashed var(--line-2); font-size:var(--t-md);text-align:left; } .table-cards tr > td:last-child{ border-bottom:0 } .table-cards td[data-label]::before{ content:attr(data-label); font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase; color:var(--muted);flex:none;max-width:45%; } /* The first field anchors the card, so give it weight -- but keep its label, because "which field is this" must not become a guess. */ .table-cards tr > td:first-child{ font-weight:600 } /* An input is the reason the rancher opened this screen: full width, on its own line, never sharing a row with its own label. */ .table-cards td.cell-input{ display:block !important } .table-cards td.cell-input::before{ display:block;margin-bottom:var(--s1) } .table-cards td.cell-input input, .table-cards td.cell-input select, .table-cards td.cell-input textarea{ width:100% !important;min-height:var(--tap) } .table-cards td.cell-actions{ display:block !important } .table-cards td.cell-actions::before{ display:block;margin-bottom:var(--s2) } .table-cards td.cell-actions .inline-form{ display:inline-block } .table-cards td.cell-actions > *{ margin-right:var(--s2) } /* A spanning cell is a full-width statement, almost always an empty state. B-081: on /ai this was a 738px cell in a 341px wrapper, so a rancher read roughly the first half of a message whose whole job is to orient someone who has nothing yet. */ .table-cards td.cell-full{ display:block !important;border-bottom:0; color:var(--muted);text-align:center;padding:var(--s3) 0; } .table-cards td.cell-full::before{ content:none } } /* ========================================================================== 08 CARDS AND PANELS ========================================================================== */ .panel{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);overflow:hidden;min-width:0; } .panel-head{ display:flex;align-items:center;gap:var(--s3); padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2); } .panel-head h3,.panel-head h2,.panel-head b{font-size:var(--t-lg)} .panel-head .sub{font-size:var(--t-sm);color:var(--muted)} .panel-head .go{margin-left:auto;font-size:var(--t-sm);font-weight:600;white-space:nowrap} .panel-body{padding:var(--s4) var(--s5)} .panel-foot{padding:var(--s3) var(--s5);border-top:1px solid var(--line-2);background:var(--paper)} .panel > table:first-child th{border-top:0} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:var(--s4);min-width:0; } /* Page header. Replaces .module-heading. */ .page-head{ display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap; margin-bottom:var(--s4); } .page-head .titles{min-width:0} .page-head h1{font-size:23px} .page-head p{margin:3px 0 0;color:var(--muted);font-size:var(--t-sm)} .page-head .actions{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap} /* Empty state. An empty screen is an invitation to act, not an apology. */ .empty{ display:grid;justify-items:center;gap:var(--s3);text-align:center; padding:var(--s7) var(--s5);color:var(--muted); } .empty h3{color:var(--ink);font-size:var(--t-lg)} .empty p{max-width:46ch;font-size:var(--t-sm)} /* ========================================================================== 09 PILLS, BADGES, FLASHES ========================================================================== */ .pill{ display:inline-flex;align-items:center;gap:5px; padding:3px 9px;border-radius:var(--r-pill); font-size:var(--t-xs);font-weight:600;white-space:nowrap; } .pill--alert{background:var(--alert-tint);color:var(--alert)} .pill--warn {background:var(--warn-tint); color:var(--warn)} .pill--ok {background:var(--ok-tint); color:var(--ok)} .pill--info {background:var(--info-tint); color:var(--info)} .pill--quiet{background:var(--line-2); color:var(--ink-2)} /* Same shape as .pill, bare modifier names (not --dashed) since that's the convention already hardcoded in ai_presets.html/parent_profiles.html. */ .status-pill{ display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill); font-size:var(--t-xs);font-weight:600;white-space:nowrap; background:var(--info-tint);color:var(--info); } .status-pill.active{background:var(--ok-tint);color:var(--ok)} .status-pill.muted{background:var(--line-2);color:var(--ink-2)} /* Medication-row flags (working_session_detail.html's batch product picker). Same visual language as .pill, kept as their own class names since a product row can carry more than one at once (recent + Rx together). */ .chip-recent,.chip-rx{ display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-pill); font-size:var(--t-xs);font-weight:600; } .chip-recent{background:var(--info-tint);color:var(--info)} .chip-rx{background:var(--warn-tint);color:var(--warn)} /* Longer than a flag word -- a full handler-safety sentence, so it reads as an inline warning line rather than a pill. */ .chip-danger{display:flex;align-items:flex-start;gap:6px;margin-top:4px;color:var(--alert);font-weight:600} .dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block} .dot--alert{background:var(--alert)} .dot--warn{background:var(--warn-edge)} .dot--ok{background:var(--ok)} .count{ display:inline-flex;align-items:center;justify-content:center; min-width:19px;height:19px;padding:0 6px;border-radius:var(--r-pill); background:var(--alert);color:var(--brand-on);font-size:var(--t-xs);font-weight:600; } .flash{ display:flex;align-items:flex-start;gap:var(--s3); padding:var(--s3) var(--s4);border-radius:var(--r-sm); margin-bottom:var(--s3);font-size:var(--t-md);border-left:3px solid transparent; } .flash.success{background:var(--ok-tint); border-left-color:var(--ok); color:var(--ok)} .flash.error {background:var(--alert-tint);border-left-color:var(--alert);color:var(--alert)} .flash.warning{background:var(--warn-tint); border-left-color:var(--warn-edge);color:var(--warn)} .flash.info {background:var(--info-tint); border-left-color:var(--info); color:var(--info)} .notice{ background:var(--brand-tint);border-left:3px solid var(--brand); padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-size:var(--t-sm); } .notice h2{font-size:var(--t-lg)} /* ai_schedule.js toggles this onto #schedule-preview-status's own .notice once any calculated step lands on a warning (a rest day, a Sunday, etc). */ .notice.warning-notice{background:var(--warn-tint);border-left-color:var(--warn-edge);color:var(--warn)} /* Same JS renders one of these per calculated schedule step -- same visual language as .pill--ok/.pill--warn, kept separate since the class names are hardcoded in ai_schedule.js and out of this fix's scope to rename. */ .schedule-ok,.schedule-warning{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px; border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;white-space:nowrap; } .schedule-ok{background:var(--ok-tint);color:var(--ok)} .schedule-warning{background:var(--warn-tint);color:var(--warn)} /* Withdrawal banner — the single most consequential warning in the product. Shown on an animal that cannot legally be sold or milked right now. */ .restriction{ display:flex;align-items:center;gap:var(--s3); background:var(--alert-tint);border:1px solid var(--alert-edge);border-left:4px solid var(--alert); border-radius:var(--r-sm);padding:var(--s3) var(--s4); } .restriction b{color:var(--alert)} .restriction small{display:block;color:var(--ink-2);font-size:var(--t-xs)} .restriction--soon{background:var(--warn-tint);border-color:var(--warn-edge-soft);border-left-color:var(--warn-edge)} .restriction--soon b{color:var(--warn)} /* ========================================================================== 10 APP SHELL ========================================================================== */ .app-shell{ display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh;min-height:100dvh; } .app-sidebar{ position:sticky;top:0;height:100vh;height:100dvh;z-index:30; background:var(--brand-2);color:var(--sidebar-text); padding:var(--s4) var(--s3); display:flex;flex-direction:column;gap:var(--s4); } .sidebar-brand{ display:flex;align-items:center;gap:10px; padding:2px 6px var(--s4);border-bottom:1px solid rgba(255,255,255,.1); } .sidebar-brand img{width:34px;height:34px;border-radius:var(--r-sm);object-fit:contain;background:var(--card);flex:none} /* The default mark (v2.48.0c: Headgate's own white mark, previously one ranch's registered brand) is white on transparent and sits directly on the dark sidebar. The white .sidebar-brand img background above exists for arbitrary uploaded ranch logos, and would make this one vanish white-on-white for every ranch that has not uploaded its own. */ .sidebar-brand img.is-default-mark{background:none;border-radius:0} .sidebar-brand-copy{display:flex;flex-direction:column;min-width:0} .sidebar-brand h2{font-size:15px;color:var(--sidebar-text);letter-spacing:.01em;line-height:1.15} .sidebar-brand p{ margin:4px 0 0;font-size:11px;line-height:1.25;letter-spacing:.06em;color:var(--sidebar-muted); } .app-nav{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;margin:0 -4px;padding:2px} .app-nav .nav-group{ font:var(--label);letter-spacing:.15em;text-transform:uppercase; color:var(--sidebar-muted-2);padding:var(--s4) 10px var(--s1); } .app-nav a{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:var(--r-sm); color:var(--sidebar-text-dim);font-size:var(--t-sm);font-weight:500;text-decoration:none; } .app-nav a:hover{background:rgba(255,255,255,.07);color:var(--brand-on);text-decoration:none} .app-nav a.active{background:var(--card);color:var(--brand-2);font-weight:600} .app-nav .nav-icon{width:16px;text-align:center;font-size:13px;opacity:.85;flex:none} .app-nav a.active .nav-icon{opacity:1} .app-nav .count{margin-left:auto} .workspace-home,.nav-workspace summary{ min-height:54px;display:flex;align-items:center;gap:11px;padding:9px 11px; border-radius:var(--r);color:var(--sidebar-text-dim);cursor:pointer;list-style:none; } .workspace-home > span:last-child,.nav-workspace summary > span:nth-child(2){display:flex;flex-direction:column;min-width:0} .workspace-home b,.nav-workspace summary b{font-size:14px;line-height:1.2;color:inherit} .workspace-home small,.nav-workspace summary small{font-size:11.5px;color:var(--sidebar-muted);line-height:1.35;margin-top:2px} .nav-workspace summary::-webkit-details-marker{display:none} .nav-workspace summary:hover{background:rgba(255,255,255,.07);color:var(--brand-on)} .nav-workspace summary.active,.workspace-home.active{background:rgba(255,255,255,.12);color:var(--brand-on)} .nav-workspace .chevron{margin-left:auto;font-size:var(--t-xs);color:var(--sidebar-muted);transition:transform .16s ease} .nav-workspace[open] .chevron{transform:rotate(180deg)} .workspace-links{display:grid;gap:2px;margin:3px 0 5px 37px;padding-left:8px;border-left:1px solid rgba(255,255,255,.13)} .app-nav .workspace-links a{padding:8px 9px;font-size:13px;border-radius:var(--r-sm)} .app-nav .workspace-links a.active{background:var(--card);color:var(--brand-2)} .sidebar-install-app{ display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;text-align:left; border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm); background:rgba(255,255,255,.07);color:var(--sidebar-text-dim); } .sidebar-install-app[hidden]{display:none!important} .sidebar-install-app span{display:flex;flex-direction:column} .sidebar-install-app small{font-size:var(--t-xs);color:var(--sidebar-muted)} .farm-switcher{display:flex;align-items:center;gap:9px;padding:9px 7px;color:var(--sidebar-text-dim);font-size:12px} .farm-symbol{ width:28px;height:28px;border-radius:50%;background:var(--sidebar-avatar-bg);flex:none; display:grid;place-items:center;font-size:var(--t-xs);color:var(--sidebar-avatar-ink); } .farm-switcher div{display:flex;flex:1;min-width:0;flex-direction:column} .farm-switcher small{color:var(--sidebar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-foot{ border-top:1px solid rgba(255,255,255,.1);padding-top:var(--s3); display:flex;align-items:center;gap:9px;font-size:var(--t-sm); } .sidebar-foot .avatar{ width:28px;height:28px;border-radius:50%;background:var(--sidebar-avatar-bg);flex:none; display:grid;place-items:center;font-size:var(--t-xs);font-weight:600;color:var(--sidebar-avatar-ink); } .sidebar-foot small{display:block;color:var(--sidebar-muted);font-size:var(--t-xs)} .sidebar-session-actions{display:none} .sidebar-session-actions form{margin:0} .sidebar-session-actions > * + *{margin-top:8px} .sidebar-session-actions button,.sidebar-session-actions a{ width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm);background:rgba(255,255,255,.06);color:var(--sidebar-text-dim);font-weight:600; } .app-main{min-width:0;display:flex;flex-direction:column} .utility-bar{ position:sticky;top:0;z-index:20; min-height:var(--topbar-h); display:flex;align-items:center;gap:var(--s3); padding:var(--s2) var(--s5);padding-top:calc(var(--s2) + var(--safe-top)); background:var(--card);border-bottom:1px solid var(--line); } .utility-bar h2{font-size:var(--t-xl)} .utility-bar .date{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted)} .utility-spacer{flex:1} .utility-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-left:auto;color:var(--muted);font-size:var(--t-sm)} .utility-actions form{margin:0} .utility-button{ min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--card);color:var(--ink-2);font-size:var(--t-sm);font-weight:600; box-shadow:0 1px 2px rgba(18,38,31,.04); } .utility-button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)} .search-box{ display:flex;align-items:center;gap:var(--s2);min-height:var(--tap); padding:7px 11px;width:240px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm); color:var(--muted);font-size:var(--t-sm); } .weather-strip{ display:flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--ink-2); padding-right:var(--s3);border-right:1px solid var(--line); } .weather-strip b{font-family:var(--mono);font-weight:600} .app-content{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);flex:1} .app-footer{ display:flex;align-items:center;justify-content:center;gap:var(--s3); padding:var(--s4) var(--s5);margin-top:auto; border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-xs); } .app-footer a{color:var(--muted);text-decoration:underline} /* ========================================================================== 11 DASHBOARD -------------------------------------------------------------------------- The decorative hero is gone. It occupied 315px of the highest-value screen real estate to display the ranch's own name, which the owner already knows. That space now answers: what costs me money if I do not do it today. ========================================================================== */ .command-hero{ display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5); padding:var(--s5) var(--s6);border-radius:calc(var(--r-lg) + 2px); color:#fff;background:var(--hero-grad); box-shadow:var(--hero-shadow);overflow:hidden; } .command-hero .eyebrow{color:var(--hero-eyebrow);letter-spacing:.13em} .command-hero h1{font-family:var(--display);font-size:clamp(30px,3.2vw,46px);line-height:1.04;color:#fff;margin:5px 0 7px} .command-hero p{max-width:630px;color:var(--hero-body);font-size:var(--t-md);margin:0} .command-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;min-width:390px} .command-hero .btn--secondary{background:var(--hero-glass-bg);border-color:var(--hero-glass-border);color:#fff} .command-hero .btn--secondary:hover{background:var(--hero-glass-bg-hover)} .desktop-all-clear{display:flex;align-items:center;gap:13px;padding:18px var(--s5);border-top:1px solid var(--line-2);background:var(--ok-tint)} .desktop-all-clear > i{font-size:23px;color:var(--ok)} .desktop-all-clear div{display:flex;flex-direction:column;gap:2px} .desktop-all-clear span{font-size:var(--t-sm);color:var(--muted)} .today{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);overflow:hidden; } .today-head{ display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; padding:var(--s4) var(--s5) var(--s3); } .today-head h2{ font-family:var(--display);font-size:26px;font-weight:700; letter-spacing:.03em;text-transform:uppercase; } .today-head .summary{font-size:var(--t-sm);color:var(--muted)} .today-head .go{margin-left:auto;font-size:var(--t-sm);font-weight:600} .today-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-2); } .today-cell{ padding:var(--s4) var(--s5);border-right:1px solid var(--line-2); display:flex;flex-direction:column;gap:var(--s3);min-width:0; } .today-cell:last-child{border-right:0} .today-cell-head{display:flex;align-items:center;gap:9px} .today-cell-head b, .today-cell-head h2{ font:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-2); margin:0; } .today-cell-head .n{ margin-left:auto;font-family:var(--display);font-weight:700;font-size:30px;line-height:.8; } .today-cell-head .n.is-alert{color:var(--alert)} .today-cell-head .n.is-warn{color:var(--warn)} .task-row{display:flex;align-items:center;gap:10px;font-size:var(--t-md);min-width:0} .task-row .text{min-width:0;flex:1} .task-row .text b{ display:block;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .task-row .text small{display:block;color:var(--muted);font-size:var(--t-xs)} .task-row .when{ margin-left:auto;font-family:var(--mono);font-size:var(--t-xs); color:var(--muted);white-space:nowrap; } .task-row .when.is-late{color:var(--alert);font-weight:600} .stat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)} .stat{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:var(--s4);min-width:0; } .stat small{ font:var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .stat b{ display:block;font-family:var(--display);font-weight:700;font-size:38px; line-height:1;margin:7px 0 3px; } .stat .delta{font-size:var(--t-xs);font-weight:600} .delta--up{color:var(--ok)} .delta--down{color:var(--alert)} .delta--flat{color:var(--muted)} .split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s4)} .stack{display:flex;flex-direction:column;gap:var(--s4);min-width:0} /* Composition bars. Replaces the CSS conic-gradient donut, which could not be labelled, read by a screen reader, or changed without editing CSS. */ .bar-list{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s3)} .bar-row{ display:grid;grid-template-columns:96px minmax(0,1fr) 46px; align-items:center;gap:var(--s3);font-size:var(--t-sm); } .bar{height:9px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden} .bar > span{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand)} .bar-row .value{text-align:right;font-family:var(--mono);font-weight:600;font-size:var(--t-sm)} .ledger{padding:var(--s4) var(--s5);display:grid;gap:var(--s4)} .ledger-row{display:flex;align-items:baseline;gap:var(--s3)} .ledger-row small{ font:var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted); } .ledger-row b{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:var(--t-lg)} .ledger-row b.is-negative{color:var(--alert)} .ledger-net{border-top:1px solid var(--line-2);padding-top:var(--s3)} .ledger-net b{font-family:var(--display);font-size:29px;font-weight:700;color:var(--ok)} /* ========================================================================== 12 PHONE AND PWA -------------------------------------------------------------------------- Not the desktop squeezed down. Different information order: what needs doing, then what is restricted, then the four things worth one tap. ========================================================================== */ .mobile-bottom-nav{display:none} .mobile-menu-button{display:none} .mobile-sidebar-close{display:none} .mobile-sidebar-backdrop{display:none} .mobile-title{display:none} /* Phone home screen (dashboard.html) vs the desktop Today band / split panel. Same today_band data, two different layouts — see section 15 for the breakpoint that swaps which one is visible. */ .phone-only{display:none} .phone-greeting{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:var(--s2) 0 var(--s1)} .phone-greeting .eyebrow{display:block} .phone-greeting h1{ font-family:var(--display);font-size:32px;font-weight:700; letter-spacing:.01em;margin-top:2px; } .phone-greeting-calendar{ display:flex;align-items:center;justify-content:center;flex:none; width:40px;height:40px;margin-top:2px;border-radius:50%; border:1px solid var(--line);background:var(--card);color:var(--brand);font-size:16px; text-decoration:none;box-shadow:var(--shadow); } .phone-greeting-calendar:hover,.phone-greeting-calendar:active{border-color:var(--brand);background:var(--brand-tint)} .phone-card{margin-top:var(--s4)} .phone-card:first-of-type{margin-top:0} .phone-card .today-cell-head{padding:var(--s4) var(--s5) var(--s3)} .all-clear-card{display:flex;align-items:center;gap:13px;padding:var(--s4);background:var(--ok-tint);border-color:rgba(31,112,74,.2)} .all-clear-card > i{font-size:24px;color:var(--ok)} .all-clear-card h2{font-size:16px}.all-clear-card p{margin:2px 0 0;color:var(--muted);font-size:13px} .phone-herd-list{display:none} .onboarding-card{border-color:var(--ok-edge);margin-bottom:var(--s4)} .onboarding-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)} .onboarding-head h2{font-size:18px;margin:0} .onboarding-progress{font-size:13px;color:var(--muted);white-space:nowrap} .onboarding-sub{margin:2px 0 var(--s3);color:var(--muted);font-size:13px} .onboarding-steps{display:flex;flex-direction:column;gap:8px} .onboarding-step{ display:flex;align-items:center;gap:var(--s3);padding:10px 14px; border:1px solid var(--line-2);border-radius:9px;background:var(--paper); } .onboarding-step.is-done{opacity:.6} .onboarding-dot{ width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none; display:grid;place-items:center;font-size:11px;color:#fff; } .onboarding-step.is-done .onboarding-dot{background:var(--ok);border-color:var(--ok)} .onboarding-body{flex:1;min-width:0;display:flex;flex-direction:column} .onboarding-body b{font-size:14px} .onboarding-body small{color:var(--muted);font-size:12px;margin-top:1px} .onboarding-cta{white-space:nowrap} /* I-001: the herd step carries two routes (import / add one). Wrapping is deliberate -- at 375px two buttons do not fit beside a step label, and stacking them beats shrinking either below a glove target. */ .onboarding-cta-group{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end} .onboarding-foot{display:flex;justify-content:flex-end;margin-top:var(--s3)} /* Some controls SHOULD stay visually small -- a tag number inside a dense card, a "powered by" credit, a quiet dismiss. Making them 44px tall would make the page look clumsy, which is the wrong trade. Instead the visible control keeps its size and an invisible ::after extends the finger target to the minimum. The design stays tight; the thumb still lands. */ .tap-target{position:relative} .tap-target::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:100%;height:100%;min-width:var(--tap);min-height:var(--tap); } .link-quiet{border:0;background:none;color:var(--muted);text-decoration:underline;padding:0;cursor:pointer;font:inherit;font-size:13px} .phone-card .task-row,.phone-card .empty{padding-left:var(--s5);padding-right:var(--s5)} .phone-card .task-row{padding-bottom:var(--s3)} .phone-card .task-row:last-of-type{padding-bottom:var(--s4)} .phone-card > .go{display:block;padding:0 var(--s5) var(--s4);font-size:var(--t-sm);font-weight:600} .quick-grid{margin-top:var(--s4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)} .quick-btn{ display:flex;flex-direction:column;align-items:flex-start;gap:6px; min-height:72px;padding:var(--s4) var(--s3); background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);text-align:left;text-decoration:none;color:var(--ink); } .quick-btn:hover{border-color:var(--brand);text-decoration:none} .quick-btn .nav-icon{font-size:17px;color:var(--brand)} .quick-btn b{font-size:var(--t-md);font-weight:600} .quick-btn small{color:var(--muted);font-size:var(--t-xs)} /* Sticky save bar on long phone forms. base.html adds .has-save-bar to body. */ .mobile-save-bar{ position:fixed;left:0;right:0;bottom:0;z-index:40;display:none; gap:var(--s2);padding:var(--s3) var(--s4); padding-bottom:calc(var(--s3) + var(--safe-bottom)); background:var(--card);border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(20,26,23,.07); } /* ========================================================================== 13 CHUTE MODE -------------------------------------------------------------------------- The screen used with gloves on, in direct sun, with an animal restrained and a queue behind it. Dark ground because the phone is held at an angle under glare; 54px targets because the thumb is in a glove; one decision per screen because the animal does not wait. This is the differentiator. CattleMax, Ranch Manager and Cattlytics are record-keepers you visit after the work. Nothing here is a visit. ========================================================================== */ /* Field Mode (v2.30.9c): the chute screen used to swap to a dark, near- black surface -- good contrast, but read as a different app bolted onto an otherwise light product. Same layout and interaction, re-themed onto the app's normal light surface instead. The --chute-* tokens (section 13) are redefined here rather than at every individual selector, so every card/chip/choice on this screen re-themes from this one place. */ .chute{ background:var(--paper);color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column; --chute-muted:var(--muted); --chute-card:var(--card); --chute-card-line:var(--line); --chute-chip-bg:var(--paper); --chute-chip-line:var(--line); --chute-chip-ink:var(--ink); --chute-chip-hover:var(--line-2); --chute-ok:var(--ok); --chute-alert:var(--alert); } .chute[hidden]{display:none} /* The header keeps a bold brand-green band -- the one deliberate holdover from the dark theme, so there's still a clear "you're at the chute now" signal even though the rest of the screen matches the app. Its own --chute-muted override keeps the subtitle/counter light against this green band regardless of the light body tokens set just above. */ .chute-head{ display:flex;align-items:center;gap:var(--s3); padding:var(--s4);padding-top:calc(var(--s4) + var(--safe-top));flex:none; background:var(--brand); --chute-muted:rgba(255,255,255,.75); } /* B-067. The only way out of full-screen chute mode was a bare wrapping a Font Awesome arrow, which measured 12 x 20 px -- roughly a quarter of the 44px touch minimum, aimed at with gloves, on a screen that deliberately hides the sidebar and offers no other exit. Give it a real target the same size as everything else on this screen. */ .chute-head > a[aria-label="Back to session"]{ flex:none;display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;margin:calc(var(--s2) * -1); border-radius:var(--r-sm);color:var(--brand-on); } .chute-head > a[aria-label="Back to session"]:hover{background:rgba(255,255,255,.14)} .chute-head .text{min-width:0} .chute-head .text b{display:block;color:var(--brand-on);font-size:var(--t-lg);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chute-head .text small{display:block;color:var(--chute-muted);font-size:var(--t-sm); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chute-head .progress{ margin-left:auto;font-family:var(--mono);font-size:var(--t-sm);color:var(--chute-muted); } .chute-body{flex:1;overflow-y:auto;padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3)} .chute-field{background:var(--chute-card);border:1px solid var(--chute-card-line);border-radius:var(--r);padding:var(--s4)} .chute-field > small{ font:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--chute-muted); } .chute-value{ font-family:var(--display);font-weight:700;font-size:44px;line-height:1; color:var(--ink);margin-top:6px; } .chute-value u{text-decoration:none;font-size:var(--t-xl);color:var(--chute-muted);margin-left:6px} .chute-field .chip-set{margin-top:var(--s3)} /* Any chip anywhere on the chute surface (Give, Procedures, gate chips, Classification, category picker) -- broader than .chute-field alone so chips inside .chute-more-fields (not itself a .chute-field) still pick up the same treatment instead of the global light .chip default. */ .chute .chip{background:var(--chute-chip-bg);border-color:var(--chute-chip-line);color:var(--chute-chip-ink)} .chute .chip.is-on{background:var(--tag-yellow);border-color:var(--tag-yellow);color:var(--tag-yellow-ink)} .chute .chip.ghost{background:transparent;color:var(--chute-muted)} .chute .chip.sm{padding:7px 14px;font-size:var(--t-sm);min-height:var(--tap-glove)} .chute .chip.gate-chip{border-style:dashed} .chute .chip.gate-chip.is-on{border-style:solid} @keyframes chuteChipFlash{0%{box-shadow:0 0 0 3px var(--tag-yellow)}100%{box-shadow:0 0 0 0 transparent}} .chute .chip.chip-flash{animation:chuteChipFlash .7s ease} @media (prefers-reduced-motion: reduce){ .chute .chip.chip-flash{animation:none} } /* Route/medication-flag badges (route-pill, med-tag) keep a neutral chip treatment here rather than the light surface's default tinted pills, for visual consistency with the rest of the chute's chip language. Rx/VFD stays a dedicated warning color (not the neutral chip ink) since it's a legibility-first safety flag, not decoration -- kept dark enough for contrast on the now-light chip background (was bright tag-yellow, which only worked against the old dark ground). */ .chute .route-pill{background:var(--chute-chip-bg);color:var(--chute-chip-ink)} .chute .med-tag{background:var(--chute-chip-bg);color:var(--chute-chip-ink)} .chute .med-tag-warn{background:var(--chute-chip-bg);color:var(--warn)} /* Computed dose. The number the operator acts on, plus the withdrawal date it creates — written before the gun is put down, not after. */ .dose-callout{ background:var(--warn-tint);border-left:3px solid var(--warn-edge); border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-top:var(--s3); } .dose-callout b{ display:block;font-family:var(--mono);font-weight:600;font-size:var(--t-xl); color:var(--tag-yellow-ink); } .dose-callout small{display:block;font-size:var(--t-sm);color:var(--warn)} .chute-foot{ position:sticky;bottom:0;z-index:5; flex:none;display:grid;grid-template-columns:1fr 1.7fr;gap:var(--s5); padding:var(--s4);padding-bottom:calc(var(--s4) + var(--safe-bottom)); background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 16px -8px rgba(20,26,23,.12); } .chute-foot .btn{min-height:var(--tap-glove);font-size:var(--t-lg)} /* B-036. Skip used to be --chute-chip-bg on the --card foot bar: a 1.11:1 fill defined only by a 1.30:1 hairline. In glare it was effectively not there, while sitting 12px from a 54px Save button under the same thumb. A 2px --muted outline is 5.03:1 against the bar -- a real silhouette -- and the foot's gap went 12px -> 24px so reaching for Save cannot graze it. Deliberately still quiet: this is the secondary control, and Save keeps the only filled treatment on the screen. */ .btn--chute-skip{background:var(--chute-chip-bg);color:var(--chute-chip-ink);border:2px solid var(--muted)} .btn--chute-skip:hover{background:var(--chute-chip-hover);color:var(--ink);border-color:var(--ink)} .btn--chute-go{background:var(--tag-yellow);color:var(--tag-yellow-ink);border-color:var(--tag-yellow)} .btn--chute-go:hover{background:var(--chute-go-hover);color:var(--tag-yellow-ink)} /* Shell escape: chute.html and its .chute sections replace the whole app frame (sidebar, topbar, footer, bottom nav) rather than sitting inside .app-content's light, padded, nav-reserving layout. */ /* .app-shell's grid-template-columns still defines a 264px first track even with .app-sidebar display:none -- CSS grid auto-placement then slides .app-main (the next real item) into that leftover 264px track instead of the wide second one, squeezing the whole chute screen into a 264px column with the rest of the viewport blank. Collapse to a single full-width track whenever chute-mode hides the sidebar, same as the existing mobile-breakpoint override just below. */ body.chute-mode .app-shell{grid-template-columns:1fr} body.chute-mode .app-content{padding:0;max-width:none;gap:0} body.chute-mode .app-sidebar, body.chute-mode .utility-bar, body.chute-mode .app-footer, body.chute-mode .mobile-bottom-nav, body.chute-mode .mobile-menu-button{display:none} .chute-product{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--chute-card-line)} .chute-recent-weight{display:block;margin-top:var(--s2);color:var(--chute-muted);font-size:var(--t-xs)} /* Live scale (v2.70.0c). Sits inside the Weight card, under the manual input, because that is the thing it fills in -- a reading that appears anywhere else on this screen invites the operator to read it and type it by hand. Both buttons are --tap-glove tall: this is aimed at with gloves on. */ .chute-scale{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--chute-card-line)} .chute-scale .btn--scale, .chute-scale .btn--scale-use{ min-height:var(--tap-glove); background:var(--chute-chip-bg);border:1px solid var(--chute-chip-line);color:var(--chute-chip-ink); } .chute-scale .btn--scale:hover, .chute-scale .btn--scale-use:hover:not(:disabled){background:var(--chute-chip-hover)} .chute-scale .btn--scale-use:not(:disabled){ background:var(--brand);border-color:var(--brand);color:var(--brand-on); } .chute-scale .btn--scale-use:disabled{opacity:.5;cursor:not-allowed} .chute-scale-note{display:block;color:var(--chute-muted);font-size:var(--t-xs)} .chute-scale-live{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} /* An author display: rule outranks the UA's [hidden]{display:none}, so the live readout showed its "— lb" and a dead Use button before anything was connected, and .btn's display:inline-flex left "Connect scale" on screen next to the live reading after connecting. Same trap as .gate-panel and .qp-chip above, and it bit all three of these elements. */ .chute-scale[hidden], .chute-scale-live[hidden], .chute-scale .btn[hidden]{display:none} .chute-scale-reading{font-family:var(--display);font-weight:700;font-size:var(--t-xl);color:var(--ink);line-height:1} .chute-scale-reading u{text-decoration:none;font-size:var(--t-sm);color:var(--chute-muted);margin-left:4px} /* The status line is the only thing telling the operator whether the number beside it may be trusted, so it never inherits a muted-on-muted treatment. */ .chute-scale-status{flex:1;min-width:120px;font-size:var(--t-sm);color:var(--chute-muted)} .chute-scale-status.is-good{color:var(--chute-ok);font-weight:600} .chute-scale-status.is-warn{color:var(--warn);font-weight:600} .chute-scale-status.is-bad{color:var(--chute-alert);font-weight:600} /* Reused from the per-product dose fields (work_animal.html) — never had CSS anywhere, so warnings and the pregnancy-approval gate were rendering invisibly. These are safety-critical displays, not decoration. */ .dose-warning{ display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3); font-size:var(--t-sm);color:var(--warn); } .dose-warning.level-warn{color:var(--warn)} /* Same row shape as .dose-warning, muted instead of warn-toned -- mixing instructions, needle size, species notes: informational, not a warning. */ .dose-note{ display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3); font-size:var(--t-sm);color:var(--muted); } .pregnancy-safety-warning{ margin-top:var(--s3);padding:var(--s3);border-radius:var(--r-sm); background:rgba(179,38,30,.15);border-left:3px solid var(--alert); } .pregnancy-safety-warning b{display:flex;align-items:center;gap:var(--s2);color:var(--alert-2)} .pregnancy-safety-warning p{margin:var(--s2) 0;font-size:var(--t-sm);color:var(--chute-chip-ink)} .pregnancy-safety-warning label{display:block;margin-top:var(--s2);font-size:var(--t-sm)} .pregnancy-safety-warning input[type=text], .pregnancy-safety-warning input:not([type=checkbox]){width:100%;margin-top:4px} .chute-adjust{margin-top:var(--s3)} .chute-adjust summary{ cursor:pointer;font-size:var(--t-sm);color:var(--chute-muted);font-weight:600; } .chute-adjust[open] summary{color:var(--brand)} .chute-adjust label{display:block;margin-top:var(--s3);font-size:var(--t-sm);color:var(--chute-muted)} .chute-adjust label > input,.chute-adjust label > select{margin-top:4px} .chute-more summary{ cursor:pointer;padding:var(--s4);font-weight:600;color:var(--ink); background:var(--chute-card);border:1px solid var(--chute-card-line);border-radius:var(--r); } .chute-more[open] summary{border-radius:var(--r) var(--r) 0 0} .chute-more-fields{ padding:var(--s4);background:var(--chute-card);border:1px solid var(--chute-card-line); border-top:0;border-radius:0 0 var(--r) var(--r);display:flex;flex-direction:column;gap:var(--s3); } .chute-more-fields label{font-size:var(--t-sm);color:var(--chute-muted)} .chute-more-fields label > input,.chute-more-fields label > select,.chute-more-fields label > textarea{margin-top:4px} .chute-more-fields .choice-grid{margin-bottom:var(--s2)} /* .choice's light-mode default (line ~494) now matches the chute's own surface exactly -- no override needed here. (Previously this repainted .choice for a dark chute ground; keep this comment as a marker in case the chute theme ever changes again -- a hardcoded color here bit us once already when the surrounding theme flipped.) */ .chute .choice:hover{border-color:var(--brand)} .chute .choice:has(input:checked){border-color:var(--brand);background:var(--brand-tint)} /* Identify-first redesign (v2.29.0): restructured "More" section -- Procedures as a chip multi-select (was a checkbox list), Change Tag / Reclassify folded in as gate chips whose panels stay closed until tapped (a scroll can't brush them by accident), Classification/Status/BCS as chip rows instead of