@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--brand-navy:#0e162b;--brand-pink:#ff0055;--brand-mint:#00d99b;--brand-yellow:#ffe400;--brand-aqua:#a3e1e8;--brand-leaf:#77a82d;--navy:var(--brand-navy);--blue:#20324b;--sky:var(--brand-aqua);--red:var(--brand-pink);--pale-red:#ffeaf1;--green:#008866;--pale-green:#e0faf2;--ink:#17233b;--muted:#607487;--line:#dce4ea;--light:#fafcfc;--pink:var(--brand-pink)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#fff;color:var(--ink);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a3e1e8;outline-offset:2px}.app{height:100dvh;min-height:400px;display:flex;flex-direction:column;max-width:900px;margin:0 auto;background:#fff;overflow:hidden}.top{flex:none;background:var(--navy);color:#fff;padding:env(safe-area-inset-top) 16px 0}.top-inner{min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:8px}.top-name{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px}.top-name:before{content:"";display:block;background:var(--sky);width:4px;height:25px;border-radius:3px}.top-actions{display:flex;gap:18px;align-items:center}.top-save{font:700 11px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em;white-space:nowrap}.top-save:before{content:'●';color:#00d99b;font-size:14px;margin-right:5px}.menu-button{background:none;border:0;color:white;font-size:29px;padding:0;line-height:1.1}.farm-strip{background:#0e162b;color:#fff;border-top:3px solid var(--sky);text-align:center;padding:11px 8px 10px;font:700 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase}.body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:15px 15px 24px}.bottom{flex:none;background:white;padding:9px 15px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:8px;box-shadow:0 -3px 10px #0e162b09}.bottom>*{flex:1}.tinycap{display:block;color:var(--blue);font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em}.heading{font-size:19px;font-weight:800;color:var(--navy);margin:2px 0 12px}.status{display:flex;align-items:center;justify-content:space-between}.muted{color:var(--muted)}.small{font-size:12px}.hint{font-size:12px;color:var(--muted);line-height:1.55;margin:9px 0}.card{border:1px solid var(--line);border-radius:7px;background:#fff;margin-bottom:12px;overflow:hidden}.card-pad{padding:12px}.details-head{background:#eefaf6;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 11px;padding:12px}.detail-value{font-size:13px;line-height:1.28;overflow-wrap:anywhere;margin-top:5px}.stage{border:2px solid #d9e4eb;border-radius:8px;margin:11px 0;overflow:hidden;padding:12px}.stage.current{border-color:var(--blue);background:#eefaf6}.stage.complete{border-color:#8ed6c1;background:#f2fcf8}.stage-row{display:flex;align-items:center;gap:10px;margin:8px 0 12px}.stage-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-weight:800;flex:none}.stage-title{font-weight:800;flex:1}.stage-state{font:600 12px 'DM Sans';border-radius:30px;background:#fff2d8;color:#8b5d1c;padding:5px 9px;white-space:nowrap}.stage-state.done{background:#d8f7e9;color:#007352}.time-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.time-row label{display:block;min-width:0}.time-input{display:block;box-sizing:border-box;width:100%;min-width:0;height:48px;max-height:48px;min-height:48px;appearance:none;-webkit-appearance:none;background:#fff;border:2px solid var(--navy);border-radius:6px;margin-top:4px;padding:7px 10px;text-align:center;font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--navy)}.time-input::placeholder{color:#96a5ad;letter-spacing:0}.btn{border:2px solid var(--navy);border-radius:6px;background:var(--navy);color:#fff;min-height:47px;padding:10px 13px;text-transform:uppercase;font:800 18px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.06em;line-height:1.1;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn.primary{background:var(--red);border-color:var(--red)}.btn.secondary{background:var(--navy);border-color:var(--navy)}.btn.outline{background:#fff;border-color:var(--navy);color:var(--navy)}.btn.soft{background:#eefaf6;border-color:#8edfcc;color:var(--navy)}.btn.danger{background:#bf1239;border-color:#bf1239}.btn.smallbtn{font-size:14px;min-height:40px}.btn.wide{width:100%}.buttons{display:flex;gap:8px;align-items:stretch}.buttons>*{flex:1;min-width:0}.pillrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}.pill{border:1px solid #d0dee5;border-radius:30px;padding:8px 11px;font-weight:700;font-size:12px;background:#eceff1;color:#4b6370}.pill.red{background:var(--pale-red);border-color:#ef7691;color:#a81235}.pill.green{background:var(--pale-green);border-color:#75d7b7;color:#006f50}.pill.active{outline:2px solid var(--blue);outline-offset:1px}.section-head{display:flex;justify-content:space-between;gap:6px;align-items:center;margin:12px 0 6px}.section-head strong{color:var(--blue);font:800 14px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.08em}.section-head button{background:none;border:none;color:var(--blue);font-weight:700;text-decoration:underline}.animal-card{display:flex;align-items:center;gap:7px;width:100%;min-height:52px;text-align:left;border-radius:6px;border:1.5px solid var(--red);background:var(--pale-red);color:#951037;padding:6px 9px;margin-bottom:5px}.animal-card.next{border:3px solid var(--blue)}.animal-card.green{border-color:#73d8b8;background:var(--pale-green);color:#006e50}.animal-card.no-sample{background:#edf0f1;border-color:#c7d1d7;color:#4f5f66}.animal-card.just-linked{animation:flash .7s ease-out}.pos{font:700 13px 'Barlow Condensed',Arial,sans-serif;width:23px;flex:none;opacity:.75}.line{font-size:20px;font-weight:800;letter-spacing:.02em;min-width:0;flex:1}.yield{white-space:nowrap;font-size:12px;font-weight:600}.right-tag{white-space:nowrap;font:800 12px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.05em}.sample-id{font:700 11px 'DM Sans';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw}.latest-slot{min-height:55px}.no-last{border:1px dashed #a9dcca;background:#f4fbf8;border-radius:5px;padding:12px;text-align:center;color:#71988a;font-size:12px}.camera-panel{position:relative;width:100%;height:clamp(300px,43dvh,420px);border-radius:7px;background:#1e242b;overflow:hidden;isolation:isolate}.camera-video{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:hidden;background:#1e242b}.camera-video video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;max-width:100%!important;background:#1e242b!important}.camera-video>div{max-width:100%!important}.camera-placeholder{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#cbd7df;font-weight:600;padding:12px}.camera-hud{position:absolute;inset:0;z-index:2;pointer-events:none}.camera-title{position:absolute;left:10px;right:10px;top:9px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:#fff;font:800 16px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.07em;text-shadow:0 2px 3px #000}.camera-badge{background:#000a;border-radius:18px;font-size:11px;padding:5px 8px}.finder{position:absolute;width:150px;height:150px;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #fff6;border-radius:6px}.finder:before{content:"";height:2px;background:#ff0055;position:absolute;top:50%;left:-9px;right:-9px;box-shadow:0 0 8px #ff0055}.scan-affirm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;background:#008866ec;color:white;font-weight:800;padding:12px 20px;border-radius:6px;pointer-events:none}.scan-affirm[hidden]{display:none}.scan-status{background:#e7faf4;color:#174a65;border:1px solid #b8d6e5;border-radius:6px;margin:7px 0 8px;padding:9px 10px;font-size:12px;font-weight:600;line-height:1.45;min-height:35px;overflow-wrap:anywhere}.scan-status.error{background:#ffebec;border-color:#ecafb6;color:#91263b}.camera-controls{margin:8px 0}.camera-controls .btn{font-size:16px}.diag{padding:10px;margin:8px 0;border:1px solid var(--line);border-radius:6px;font:11px/1.5 monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#526777;min-width:0;max-width:100%;overflow-x:hidden}.diag pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%}.frame-tip{font:12px/1.5 system-ui,-apple-system,Arial,sans-serif;color:#526777;margin:10px 0}.frame-result{font:600 12px/1.5 system-ui,-apple-system,Arial,sans-serif;overflow-wrap:anywhere;background:#e7faf4;color:#174a65;border-radius:6px;padding:9px;margin-top:10px}.frame-preview{display:block;width:100%;max-height:360px;object-fit:contain;background:#1e242b;margin-top:9px;border-radius:6px}.frame-preview[hidden]{display:none}.camera-panel .scan-status{position:absolute;z-index:4;left:10px;right:10px;bottom:10px;margin:0;box-shadow:0 2px 12px #0008}.camera-panel .scan-status[hidden]{display:none!important}.camera-retry{position:absolute;z-index:5;left:50%;top:58%;transform:translate(-50%,-50%);min-width:175px;max-width:85%;box-shadow:0 3px 12px #0009}.camera-retry[hidden]{display:none!important}.input{width:100%;border:2px solid var(--navy);border-radius:6px;padding:10px 12px;min-height:48px;background:white;color:var(--navy);font-size:18px;font-weight:600}.field-label{display:block;color:var(--blue);font:800 14px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.08em;margin:12px 0 5px}.empty{background:#f2f6f9;border-radius:6px;color:var(--muted);padding:16px;text-align:center}.notice{border-left:4px solid var(--blue);background:#eefaf6;padding:11px;font-size:13px;line-height:1.5;border-radius:3px;margin:9px 0}.notice.ok{background:#e9fbf1;border-color:var(--green)}.notice.warning{background:#fff3df;border-color:#e0a83c}.menu-row{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:8px;border:1px solid #bce9d8;background:#eefaf6;color:var(--navy);border-radius:6px;margin:6px 0;padding:13px;font-weight:700}.menu-row span{color:var(--blue)}.modal-layer{position:fixed;inset:0;z-index:50;background:#0e162b8c;display:flex;align-items:flex-end;justify-content:center}.sheet{background:#fff;width:100%;max-width:900px;border-radius:16px 16px 0 0;padding:12px 16px max(19px,env(safe-area-inset-bottom));max-height:90dvh;overflow-y:auto;display:flex;flex-direction:column;gap:7px}.sheet h2{font-size:23px;color:var(--navy);margin:4px 0}.sheet .buttons{margin-top:12px}.sheet .btn{font-size:17px}.sheet-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.sheet-close{background:none;border:none;font-size:28px;color:var(--navy)}.toast{position:fixed;z-index:99;left:50%;top:max(65px,env(safe-area-inset-top));transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 15px;border-radius:8px;box-shadow:0 6px 25px #0006;max-width:92vw;min-width:170px;text-align:center;font-size:13px}.toplink{background:none;border:none;color:var(--blue);font-size:13px;font-weight:700;padding:4px}.footer-note{font-size:11px;color:#78909c;text-align:center;padding-top:8px}.spaced{margin:12px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}@keyframes flash{0%{box-shadow:0 0 0 5px #00a47990}100%{box-shadow:0 0 0 0 #00a47900}}@media(min-width:700px){.body{padding:22px 26px}.top{padding-left:27px;padding-right:27px}.bottom{padding-left:26px;padding-right:26px}.camera-panel{height:370px}}

/* UI-20 Sample Capture — faithful layout based on mockup 4.3.1. */
.capture-layer{background:rgba(13,27,42,.65)}
.sheet.capture-sheet{width:100%;max-width:440px;max-height:88dvh;padding:8px 16px max(18px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0;gap:0;box-shadow:0 -10px 32px rgba(0,0,0,.22)}
.capture-grip{display:flex;justify-content:center;margin:0 0 12px}
.capture-grip button{border:0;background:transparent;padding:0 22px 8px;cursor:pointer}
.capture-grip button span{display:block;width:40px;height:4px;border-radius:8px;background:#d0d9dd}
.capture-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px}
.capture-label{font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em;color:var(--blue)}
.capture-line{font:800 42px/1.13 'DM Sans',Arial,sans-serif;color:var(--navy);letter-spacing:.035em;overflow-wrap:anywhere}
.capture-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:1px;flex-shrink:0}
.capture-status-pill{font:700 12px 'DM Sans',Arial,sans-serif;padding:7px 10px;border-radius:20px;border:1px solid #e79cae;color:#b71645;background:#fff1f3}
.capture-camera-indicator{display:flex;align-items:center;gap:5px;color:#007856;font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.07em}
.capture-dot{width:10px;height:10px;border-radius:50%;background:#0bc693;box-shadow:0 0 0 3px #d5f7ed}
.capture-camera{height:clamp(195px,30dvh,260px);position:relative;width:100%;background:#373d42;border-radius:7px;overflow:hidden;isolation:isolate}
.capture-camera-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;color:#c3d0d7;z-index:0;font:600 13px 'DM Sans',Arial,sans-serif}
.capture-camera-placeholder[hidden]{display:none}
.capture-reader{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#373d42;overflow:hidden}
.capture-reader>div{max-width:100%!important}
.capture-reader video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;max-width:100%!important;background:#373d42!important}
.capture-camera-hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.capture-camera-title{position:absolute;left:10px;right:8px;top:9px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:white;font:800 16px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.07em;text-shadow:0 2px 3px #000}
.capture-camera-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:20px;background:#0e162bd6;font:800 12px 'Barlow Condensed',Arial,sans-serif;white-space:nowrap}
.capture-finder{position:absolute;left:50%;top:53%;width:140px;height:140px;transform:translate(-50%,-50%);background:linear-gradient(#fff,#fff) left top/23px 3px no-repeat,linear-gradient(#fff,#fff) left top/3px 23px no-repeat,linear-gradient(#fff,#fff) right top/23px 3px no-repeat,linear-gradient(#fff,#fff) right top/3px 23px no-repeat,linear-gradient(#fff,#fff) left bottom/23px 3px no-repeat,linear-gradient(#fff,#fff) left bottom/3px 23px no-repeat,linear-gradient(#fff,#fff) right bottom/23px 3px no-repeat,linear-gradient(#fff,#fff) right bottom/3px 23px no-repeat}
.capture-finder::after{content:"";position:absolute;left:-8px;right:-8px;top:52%;height:3px;background:#ff0055;box-shadow:0 0 12px #ff0055}
.capture-error{position:absolute;z-index:4;left:7px;right:7px;bottom:7px;background:#ffebec;color:#8e1432;border:1px solid #e79cae;border-radius:5px;padding:6px 8px;font-size:12px;overflow-wrap:anywhere}
.capture-error[hidden],.capture-retry[hidden]{display:none}
.capture-retry{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);z-index:5;background:var(--navy);color:white;border:1px solid white;padding:10px 17px;border-radius:6px;font:800 15px 'Barlow Condensed',Arial,sans-serif}
.capture-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.capture-actions .btn{min-width:0;min-height:55px;padding:8px 5px;font-size:16px;border-width:1.5px;white-space:normal}
.capture-actions .capture-remove{color:#ca103c;border-color:#ff0055}
.capture-actions .btn:disabled{opacity:1;background:#fff;border-color:#cbd6db;color:#b6c6cf;cursor:default}
.capture-actions .capture-add-test{grid-column:1/-1}
@media(min-width:700px){.sheet.capture-sheet{max-width:440px}}

/* UI-20 / mockup 4.3.2: short captured-Sample-ID confirmation. */
.capture-status-pill.linked{color:#007650;border-color:#83d9b6;background:#e8faf1}
.capture-camera.capture-linked{background:#eef4f7}
.capture-camera.capture-linked .capture-reader,
.capture-camera.capture-linked .capture-camera-hud,
.capture-camera.capture-linked .capture-camera-placeholder{opacity:0;visibility:hidden}
.capture-linked-result{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#eef4f7;color:var(--navy);text-align:center;padding:15px}
.capture-linked-caption{font:800 14px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em;color:var(--blue)}
.capture-linked-id{font:800 clamp(24px,7vw,34px) 'DM Sans',Arial,sans-serif;overflow-wrap:anywhere;line-height:1.16}
.capture-complete .capture-actions .capture-delete-display{border-color:#ff0055;color:#ca103c}
.capture-complete .capture-actions .btn:disabled{opacity:1}

/* UI-20 / mockup 4.3.5: fixed in-app number pad, camera off. */
.sheet:has(.manual-capture-pad){max-width:440px;border-radius:22px 22px 0 0;padding:8px 16px max(19px,env(safe-area-inset-bottom));gap:0}
.manual-capture-title{margin:8px 0 6px;font:800 13px 'Barlow Condensed',Arial,sans-serif;color:var(--blue);letter-spacing:.11em}
.manual-capture-display{display:block;width:100%;border:2px solid #d4e1e7;border-radius:6px;color:var(--navy);background:#fff;min-height:54px;font:800 27px 'DM Sans',Arial,sans-serif;letter-spacing:.08em;padding:7px 12px}
.manual-capture-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}
.manual-capture-pad button{min-height:52px;border:1px solid #cbd8df;border-radius:6px;background:#f5f9fb;color:var(--navy);font:700 21px 'DM Sans',Arial,sans-serif}
.manual-capture-pad button:active{background:#d6ecf6}
.manual-capture-pad button.manual-clear{color:#c5103a;font:800 17px 'Barlow Condensed',Arial,sans-serif}
.manual-capture-feedback{padding:10px 12px;border:1.5px solid #e68da5;border-radius:6px;background:#fff0f4;color:#9f1437;font:700 13px/1.4 'DM Sans',Arial,sans-serif;overflow-wrap:anywhere}
.manual-capture-feedback[hidden]{display:none!important}
.manual-capture-actions{display:flex;gap:8px}
.manual-capture-actions .btn{flex:1;font-size:16px;min-height:53px;min-width:0}

/* UI-12 Add Animals — 70-animal demo herd search & filtering. */
.sheet:has(.herd-picker){max-width:460px;height:min(91dvh,830px);max-height:92dvh;overflow:hidden;padding:9px 14px max(12px,env(safe-area-inset-bottom));gap:0}
.herd-picker{display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden;flex:1}
.herd-session-counts{display:flex;gap:5px;align-items:center;flex:none;flex-wrap:nowrap;margin:1px 0 9px;min-width:0}
.herd-session-count{min-width:0;white-space:nowrap;border-radius:20px;border:1px solid #d0dbe0;padding:7px 9px;text-align:center;font:700 clamp(10px,2.7vw,13px) 'DM Sans',Arial,sans-serif;background:#eef1f3;color:#51636d;flex:1}
.herd-session-count.awaiting{background:var(--pale-red);border-color:#ef99ae;color:#ae1640}
.herd-session-count.linked{background:var(--pale-green);border-color:#87d6bb;color:#006f50}
.herd-session-count.no-sample{background:#edf0f1;border-color:#d5dfe3;color:#576c73}
.herd-close{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:1px;padding:0;background:transparent;border:0;color:var(--navy);font:600 27px/1 Arial,sans-serif}

.herd-picker h2,.herd-catalog h2{font:800 23px 'DM Sans',Arial,sans-serif;color:var(--navy);margin:2px 0 0}
.herd-subtitle{font:400 12px/1.4 'DM Sans',Arial,sans-serif;color:#537080;margin:0 0 3px}
.herd-pick-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.herd-section-label{display:block;font:800 13px 'Barlow Condensed',Arial,sans-serif;color:var(--blue);letter-spacing:.1em;padding:6px 0 4px}
.herd-done{border:0;border-radius:5px;background:var(--navy);color:#fff;font:800 14px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.06em;min-height:32px;padding:6px 16px}
.herd-current-code{display:flex;gap:7px;align-items:stretch}
.herd-current-code input{flex:1;min-width:0;min-height:44px;border:2px solid #cbdce5;border-radius:5px;padding:6px 11px;font:700 25px 'DM Sans',Arial,sans-serif;letter-spacing:.07em;color:var(--navy);background:#fff}
.herd-current-code .herd-done{flex:0 0 92px;min-height:58px;border:0;border-radius:6px;background:var(--navy);color:#fff;font:800 18px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.07em;padding:8px 10px}
.herd-current-code input{min-height:58px}
.herd-result-scroll{flex:1 1 220px;min-height:100px;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:6px;padding:3px 2px;background:#fff}
.herd-match{width:100%;min-height:52px;border:1.5px solid #cfd8dc;border-radius:6px;background:#fff;display:flex;align-items:center;gap:8px;padding:7px 12px;margin:0 0 5px;text-align:left;color:var(--navy)}
.herd-match.available{border:1.5px solid #a3e1e8;background:#eefaf6}
.herd-match:active{background:#e2f7f2}
.herd-match-line{font:700 22px 'DM Sans',Arial,sans-serif;letter-spacing:.04em;min-width:69px}
.herd-match-meta{font:600 12px 'DM Sans',Arial,sans-serif;color:#617480;overflow-wrap:anywhere;flex:1}
.herd-match-add{font:800 16px 'Barlow Condensed',Arial,sans-serif;color:var(--blue);white-space:nowrap;letter-spacing:.07em;margin-left:auto}
.herd-match.available .herd-match-add{color:#0e162b}
.herd-match.sampled .herd-match-add{color:#7d8b93}
.herd-match.awaiting .herd-match-add,.herd-match.no-sample .herd-match-add{color:#738390}
.herd-overflow-note{font:400 11px/1.45 'DM Sans',Arial,sans-serif;color:#58727c;margin:5px 0 0}
.herd-empty-result{color:#516d78;font:500 13px/1.5 'DM Sans',Arial,sans-serif;padding:13px 4px}
.herd-number-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:none}
.herd-number-pad button{border:1px solid #cad7dd;border-radius:5px;background:#eef4f7;color:var(--navy);min-height:40px;font:700 19px 'DM Sans',Arial,sans-serif}
.herd-number-pad button:active{background:#d7ebf4}
.herd-number-pad .herd-add-key{background:var(--red);border-color:var(--red);color:#fff;font:800 17px 'Barlow Condensed',Arial,sans-serif}
.herd-view-full{border:1px solid #a7bfd0;background:#eefaf6;color:var(--navy);border-radius:5px;min-height:36px;flex:none;font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.05em}
.herd-warning{border:1px solid #ecbb9e;background:#fff8ed;border-radius:7px;padding:12px;color:#703d15;font-size:13px;line-height:1.5}
.herd-warning strong{font-size:15px}
.herd-warning p{margin:6px 0}
.herd-warning .buttons{margin-top:10px}
.herd-warning-line-label,.herd-warning-sample-label{font:700 11px 'DM Sans',Arial,sans-serif;letter-spacing:.09em;color:#806349;margin-top:10px}
.herd-warning-line{font:800 clamp(30px,8vw,42px)/1.15 'DM Sans',Arial,sans-serif;letter-spacing:.035em;color:var(--navy);overflow-wrap:anywhere}
.herd-warning-sample{font:800 22px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.035em;color:#163a54;overflow-wrap:anywhere}
.herd-warning .herd-warning-detail{font-size:14px;font-weight:600;margin:8px 0}
.herd-warning .herd-warning-consequence{font-weight:700;margin-top:14px;white-space:normal}

.sheet:has(.herd-catalog){max-width:540px;max-height:92dvh;overflow:auto;padding:12px 14px max(15px,env(safe-area-inset-bottom))}
.herd-catalog{display:flex;flex-direction:column;gap:9px;min-height:0}
.herd-filter-row{display:flex;flex-wrap:wrap;gap:5px}
.herd-filter-row button{font:700 11px 'DM Sans',Arial,sans-serif;border:1px solid #d2e1e9;border-radius:20px;background:#eef3f6;color:#496675;padding:7px 9px;min-height:31px}
.herd-filter-row button.active{background:var(--navy);border-color:var(--navy);color:white}
.herd-catalog-scroll{overflow-y:auto;max-height:37dvh;border:1px solid #dce7ed;border-radius:5px}
.herd-catalog-row{display:flex;align-items:center;gap:8px;padding:8px 7px;border-bottom:1px solid #e9eef2;font-size:11px}
.herd-catalog-row strong{font:700 17px 'DM Sans',Arial,sans-serif;min-width:66px}
.herd-catalog-row span{color:#78909c;flex:1}
.herd-catalog-row em{font:800 11px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.03em;font-style:normal;color:#177858;text-align:right}
.herd-catalog-row em.sampled{color:#a66f00}
.herd-catalog-row em.awaiting{color:#bc1e45}
.herd-catalog-row em.no-sample{color:#60747d}
/* UI-24 Yield Capture — mockup in-app decimal keypad, no iOS numeric keyboard. */
.sheet:has(.herd-yield){width:100%;max-width:460px;max-height:92dvh;border-radius:17px 17px 0 0;overflow-y:auto;padding:9px 15px max(18px,env(safe-area-inset-bottom));gap:0}
.herd-yield{display:flex;flex-direction:column;gap:10px}
.yield-grip{width:40px;height:4px;border-radius:4px;background:#cfd8dc;align-self:center;margin:0 0 5px}
.yield-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:7px}
.yield-position{font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.1em;color:var(--blue)}
.yield-line{font:800 36px/1.1 'DM Sans',Arial,sans-serif;letter-spacing:.03em;color:var(--navy);margin-top:4px;overflow-wrap:anywhere}
.yield-status{border:1px solid #f5a3b9;background:#fde8ee;color:#b0103a;border-radius:20px;padding:6px 10px;white-space:nowrap;font:600 12px 'DM Sans',Arial,sans-serif;flex:none;align-self:center}
.yield-entry-label{font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em;color:var(--blue);margin-bottom:-5px}
.yield-display{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;flex:none;border:2px solid var(--navy);background:#fff;border-radius:6px;padding:0 15px;overflow:hidden;cursor:default}
.yield-number{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 34px 'DM Sans',Arial,sans-serif;letter-spacing:.035em;color:var(--navy)}
.yield-placeholder{color:#b0bec5}
.yield-cursor{display:inline-block;width:2px;height:28px;background:#ff0055;margin-left:3px;vertical-align:-5px}
.yield-unit{font:600 20px 'DM Sans',Arial,sans-serif;color:#607d8b;flex:none}
.yield-hint{font:500 12px 'DM Sans',Arial,sans-serif;color:#607d8b;margin:-5px 0 2px}
.yield-error{font:600 12px/1.4 'DM Sans',Arial,sans-serif;color:#a91138;background:#fde8ee;border:1px solid #f5a3b9;padding:8px;border-radius:5px}
.yield-error[hidden]{display:none}
.yield-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.yield-keypad button{border:0;border-radius:6px;background:#eceff1;color:var(--navy);height:clamp(46px,6.7dvh,56px);font:600 24px 'DM Sans',Arial,sans-serif;touch-action:manipulation}
.yield-keypad button:active{background:#d5e4eb}
.yield-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:2px}
.yield-actions .btn{min-width:0;min-height:60px;font-size:16px;letter-spacing:.05em;padding:8px 5px;white-space:normal}
.yield-actions .btn.primary{background:#ff0055;border-color:#ff0055}
.yield-actions .btn:disabled{background:#f5c2cf;border-color:#f5c2cf;color:#fff;opacity:1}
@media(max-height:710px){.sheet:has(.herd-yield){max-height:93dvh}.yield-keypad button{height:43px}.yield-actions .btn{min-height:50px}.herd-yield{gap:7px}}

@media(max-height:700px){.herd-result-scroll{flex-basis:110px}.herd-number-pad button{min-height:34px}}

/* Camera settings — real-track zoom and browser-exposed rear lens selection. */
.sheet:has(.camera-settings){max-width:470px;max-height:92dvh;overflow-y:auto;padding:11px 15px max(16px,env(safe-area-inset-bottom))}
.camera-settings{display:flex;flex-direction:column;gap:9px;min-width:0}
.camera-settings h2{font:800 23px 'DM Sans',Arial,sans-serif;color:var(--navy);margin:1px 0 0}
.camera-settings-tip{font:500 12px/1.5 'DM Sans',Arial,sans-serif;color:#536c78;margin:0}
.camera-settings-preview{height:clamp(195px,30dvh,280px);border-radius:7px;background:#222b30;position:relative;overflow:hidden;isolation:isolate}
#settings-reader{position:absolute;inset:0;width:100%;height:100%;background:#222b30;z-index:1;overflow:hidden}
#settings-reader>div{max-width:100%!important}
#settings-reader video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;max-width:100%!important;background:#222b30!important}
.camera-settings-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.camera-settings-overlay>span{position:absolute;left:10px;top:9px;font:800 14px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.1em;color:white;text-shadow:0 2px 3px #000}
.camera-settings-target{width:140px;height:140px;border:2px solid #ffffff99;border-radius:7px;position:relative}
.camera-settings-target:after{content:"";position:absolute;top:50%;left:-10px;right:-10px;height:2px;background:#ff0055;box-shadow:0 0 6px #ff0055}
.camera-settings-loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;color:#c7d7de;padding:16px;font:600 13px 'DM Sans',Arial,sans-serif;text-align:center;pointer-events:none}
.camera-settings-loading[hidden]{display:none}
.camera-settings .field-label{font:800 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.09em;color:var(--blue);margin:0}
.camera-settings .input{min-height:47px;font-size:15px}
.camera-settings-note{font:500 11px/1.45 'DM Sans',Arial,sans-serif;color:#617a85;margin:-5px 0 2px}
.camera-zoom-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0 0}
.camera-zoom-heading strong{color:var(--navy);font:800 20px 'DM Sans',Arial,sans-serif}
#camera-zoom{width:100%;height:32px;accent-color:#0e162b;min-height:32px}
#camera-zoom:disabled{opacity:.42}
.camera-zoom-buttons{display:flex;gap:8px}
.camera-zoom-buttons button{flex:1;border:1.5px solid #93b7c9;border-radius:6px;background:#eef6fb;color:var(--navy);padding:8px;font:800 17px 'Barlow Condensed',Arial,sans-serif;min-height:43px}
.camera-zoom-buttons button:disabled{opacity:.38}
.camera-settings-status{border:1px solid #b6d0dc;border-radius:6px;background:#eaf4f9;color:#1f5870;padding:9px 10px;font:600 12px/1.45 'DM Sans',Arial,sans-serif;overflow-wrap:anywhere}
.camera-settings .buttons .btn{font-size:16px;min-height:49px}


/* UI-39 Sample Boxes — source mockups 4.0.9, 4.0.10, 4.0.11.
   Scoping keeps the working milk-pot camera and animal screens untouched. */
.box-back{background:none;border:0;color:#fff;font:400 28px/1 "DM Sans",Arial,sans-serif;padding:0 1px 1px 0;margin-right:5px;flex:none;min-width:24px}
.box-scan-screen{display:flex;flex-direction:column;gap:10px;padding:0;max-width:100%;min-width:0}
.box-scan-intro{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.box-scan-intro>span:first-child{color:#455a64;font:500 14px/1.35 "DM Sans",Arial,sans-serif}
.box-camera-indicator{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#607d8b;font:700 12px "Barlow Condensed",Arial,sans-serif;letter-spacing:.08em;flex:none}
.box-camera-indicator i{width:8px;height:8px;border-radius:50%;background:#b0bec5}
.box-camera-indicator.is-live{color:#00876a}
.box-camera-indicator.is-live i{background:#00d99b}
.box-scan-frame{position:relative;height:clamp(185px,25dvh,230px);min-height:185px;max-height:230px;flex:none;border:2px dashed #a3e1e8;border-radius:8px;background:#1e242b;overflow:hidden;isolation:isolate}
.box-scan-video{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:hidden}
.box-scan-video>div{position:relative;max-width:100%!important;width:100%!important;height:100%!important;overflow:hidden}
.box-scan-video video{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;max-width:100%!important}
.box-scan-frame .camera-placeholder{z-index:0;color:#607d8b}
.box-scan-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none;text-align:left;padding:10px;background:transparent}
.box-scan-overlay strong{font:700 18px "Barlow Condensed",Arial,sans-serif;letter-spacing:.06em;color:#fff;background:#0e162bc9;padding:6px 8px;border-radius:5px;text-shadow:0 1px 2px #0008}
.box-scan-overlay span{font:400 13px "DM Sans",Arial,sans-serif;color:#607d8b}
.box-scan-frame.is-live .box-scan-overlay{background:transparent;align-items:flex-start;justify-content:space-between;padding:10px}
.box-scan-frame.is-live .box-scan-overlay strong{font-size:18px;letter-spacing:.06em;color:#fff;background:#0e162bc9;border-radius:5px;padding:6px 8px;text-shadow:0 1px 2px #0008}
.box-scan-frame.is-live .box-scan-overlay .box-camera-indicator{display:flex}
.box-scan-frame .camera-retry{top:50%;max-width:83%;min-width:150px;font-size:14px}
.box-scan-frame .scan-affirm{font-size:13px;z-index:4}
.box-scan-screen .scan-status{margin:0;min-height:0;padding:8px 9px}
.box-scan-screen .scan-status[hidden]{display:none!important}
.box-manual-button{align-self:flex-start;min-height:36px;border:1px solid #9fe4d7;color:#0e162b;background:#eefaf6;border-radius:6px;padding:6px 12px;font:700 13px "Barlow Condensed",Arial,sans-serif;letter-spacing:.07em}
.box-scan-closed{border:1px solid #e0e0e0;border-radius:6px;padding:12px;color:#607d8b;font:500 13px/1.4 "DM Sans",Arial,sans-serif}
.box-scan-card{border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;flex:none;min-width:0}
.box-scan-card-heading{background:#eefaf6;min-height:32px;display:flex;align-items:center;padding:7px 12px;border-bottom:1px solid #e0e0e0;font:700 13px "Barlow Condensed",Arial,sans-serif;letter-spacing:.12em;color:#0e162b}
.box-scan-empty{padding:14px 12px;color:#90a4ae;font:400 14px "DM Sans",Arial,sans-serif}
.box-scan-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:8px 12px}
.box-scan-row+.box-scan-row{border-top:1px solid #eceff1}
.box-scan-row strong{font:700 18px "DM Sans",Arial,sans-serif;letter-spacing:.03em;color:#0e162b;min-width:0;overflow-wrap:anywhere}
.box-scan-row span{font:500 13px "DM Sans",Arial,sans-serif;color:#607d8b;flex:none;white-space:nowrap}
.bottom:has(.box-scan-footer){display:block;flex:none;padding:10px 14px max(14px,env(safe-area-inset-bottom));border-top:1px solid #e0e0e0;box-shadow:none}
.bottom:has(.box-scan-footer)>*{flex:none}
.box-scan-footer{display:flex;flex-direction:column;gap:10px;width:100%}
.box-scan-confirm{display:flex;align-items:center;gap:12px;min-height:44px;color:#0e162b;cursor:pointer;font:500 14.5px/1.35 "DM Sans",Arial,sans-serif}
.box-scan-confirm.inactive{opacity:.45;cursor:default}
.box-scan-confirm input{appearance:none;-webkit-appearance:none;display:block;position:relative;border:2px solid #0e162b;background:#fff;border-radius:5px;width:28px;height:28px;min-width:28px;margin:0;flex:none}
.box-scan-confirm input:checked{background:#0e162b;border-color:#0e162b}
.box-scan-confirm input:checked:after{content:"✓";position:absolute;left:4px;top:-4px;color:white;font:700 24px "DM Sans",Arial,sans-serif}
.box-scan-confirm input:focus-visible{outline:3px solid #a3e1e8;outline-offset:3px}
.box-scan-confirm span{flex:1;min-width:0}
.box-scan-footer .box-done{height:62px;min-height:62px;width:100%;font-size:19px}
.box-scan-footer .box-done:disabled{opacity:1;color:#b0bec5;background:#eceff1;border-color:#eceff1}
@media(max-width:380px){.box-scan-intro>span:first-child{font-size:12.5px}.box-scan-row strong{font-size:16px}.box-scan-row span{font-size:12px}}

/* Sample Boxes camera status sits inside the video, matching the pot reader. */
.box-scan-overlay .box-camera-indicator{align-self:flex-start;display:flex;align-items:center;gap:5px;background:#0e162bc9;color:#fff;padding:8px 10px;border-radius:18px;font:700 12px "Barlow Condensed",Arial,sans-serif;letter-spacing:.08em}
.box-scan-overlay .box-camera-indicator i{background:#aab8c4}
.box-scan-overlay .box-camera-indicator.is-live i{background:#00d99b}
.box-scan-overlay .box-camera-indicator.is-live{color:#fff}
.camera-settings-cleanup{border-top:1px solid #dce5ea;margin-top:14px;padding-top:13px}
.camera-settings-cleanup .btn{border-color:#cf6b79;color:#9b2036}
@media(max-width:360px){.box-scan-overlay strong,.box-scan-frame.is-live .box-scan-overlay strong{font-size:16px}.box-scan-overlay .box-camera-indicator{padding:8px 7px}}


/* Sampling Sessions index and mockup 4.7 test management. */
.sessions-index{display:flex;flex-direction:column;gap:10px;max-width:680px;margin:0 auto;width:100%}
.sessions-index>.hint{margin:0 0 4px}
.sampling-session-row{width:100%;padding:16px 14px;border:1px solid #d1dce3;border-left:4px solid #0e162b;border-radius:8px;text-align:left;background:#fff;display:flex;flex-direction:column;gap:10px;cursor:pointer;color:#0e162b}
.sampling-session-row:focus-visible{outline:3px solid #0e162b;outline-offset:2px}
.sampling-session-main{display:flex;justify-content:space-between;gap:10px;align-items:center}
.sampling-session-main strong{font:700 18px "DM Sans",Arial,sans-serif}
.sampling-session-main span{font:600 13px "DM Sans",Arial,sans-serif;color:#455a64;text-align:right}
.sampling-session-sub{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;color:#607d8b;font:500 13px "DM Sans",Arial,sans-serif}
.session-phase-label{display:inline-block;padding:5px 10px;border-radius:16px;background:#eefaf6;color:#173451;font:700 12px "DM Sans",Arial,sans-serif}
.session-phase-label.is-closed{background:#e8f6ef;color:#087359}
.sessions-index>.btn{margin-top:8px;min-height:56px}
.test-management{display:flex;flex-direction:column;gap:10px;min-width:0}
.test-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.test-tabs button,.test-filter-row button{border:1px solid #bbcdd8;border-radius:5px;background:#fff;color:#0e162b;font:700 14px "Barlow Condensed",Arial,sans-serif;letter-spacing:.04em;padding:11px 4px}
.test-tabs button.active,.test-filter-row button.active{background:#0e162b;color:#fff;border-color:#0e162b}
.test-filter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.test-management-rows{border:1px solid #e0e0e0;border-radius:8px;background:#fff;overflow-y:auto;flex:1;min-height:0}
.test-manager-row{display:flex;align-items:center;gap:14px;min-height:48px;padding:9px 13px;border-bottom:1px solid #e8edf0;cursor:pointer}
.test-manager-row:last-child{border:0}
.test-manager-row input{width:24px;height:24px;accent-color:#0e162b;flex:none}
.test-manager-row strong{font:700 16px "DM Sans",Arial,sans-serif;color:#0e162b}
.test-add-sheet{display:flex;flex-direction:column;gap:11px;width:100%}
.add-test-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.add-test-option{height:70px;display:flex;align-items:center;justify-content:flex-start;gap:11px;background:#fff;border:2px solid #bbcdd8;border-radius:7px;font:700 19px "Barlow Condensed",Arial,sans-serif;letter-spacing:.05em;color:#0e162b;padding:10px}
.add-test-option.selected{background:#eefaf6;border-color:#0e162b}
.test-check{width:25px;height:25px;flex:none;border:2px solid #607d8b;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#0e162b;font-size:22px}
.add-test-option.selected .test-check{border-color:#0e162b}

/* Test Management rows are linked samples, not the herd catalogue. */
.test-manager-animal{display:flex;flex-direction:column;gap:3px;min-width:0}
.test-manager-animal>span{color:#607d8b;font:500 12px "DM Sans",Arial,sans-serif;overflow-wrap:anywhere}


/* Test Management: line number and Sample ID share a baseline and size.
   Existing tests stay on their own smaller line beneath. */
.test-manager-main{display:flex;align-items:baseline;column-gap:12px;row-gap:3px;flex-wrap:wrap;min-width:0}
.test-manager-main strong{font:700 16px/1.3 "DM Sans",Arial,sans-serif;color:#0e162b}
.test-manager-main .test-manager-sample{font:400 16px/1.3 "DM Sans",Arial,sans-serif;color:#718491;overflow-wrap:anywhere}
.test-manager-animal .test-manager-assignments{font:500 12px/1.35 "DM Sans",Arial,sans-serif;color:#607d8b;overflow-wrap:anywhere}
.test-management-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.5fr);gap:8px;width:100%}
.test-management-actions .btn{min-width:0;min-height:48px;white-space:normal}
@media(max-width:370px){.test-manager-main{column-gap:8px}.test-management-actions{grid-template-columns:minmax(0,1fr) 88px}.test-management-actions .btn{font-size:14px}}

/* Data Management — session flows, clearly simulated NMR transfer and test tools. */
.data-hub{display:flex;flex-direction:column;gap:12px;max-width:700px;width:100%;margin:0 auto;padding-bottom:10px}
.data-hub>.hint{margin:0 0 3px}
.data-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.data-summary-grid>div{display:flex;flex-direction:column;gap:5px;border:1px solid #dbe5eb;border-radius:7px;background:#f5f9fc;padding:12px;min-width:0}
.data-summary-grid strong{font:700 24px "Barlow Condensed",Arial,sans-serif;color:#0e162b;line-height:1}
.data-summary-grid span{font:500 12px/1.4 "DM Sans",Arial,sans-serif;color:#526778}
.data-hub-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #dbe5eb;border-radius:8px;padding:14px;min-width:0}
.data-hub-card>.hint{margin:0}
.data-hub-card>.field-label{margin:7px 0 0}
.data-hub-card>.btn{min-height:48px}
.data-hub-status{font:700 18px/1.35 "DM Sans",Arial,sans-serif;color:#0e162b;background:#eefaf6;border:1px solid #c7dfea;border-radius:6px;padding:10px}
.data-hub-row{display:flex;flex-direction:column;gap:5px}
.data-hub-row strong{font:700 15px "DM Sans",Arial,sans-serif;color:#0e162b}
.data-hub-row span{font:500 12.5px/1.5 "DM Sans",Arial,sans-serif;color:#607d8b}
.data-hub-row+.data-hub-row{border-top:1px solid #e1e9ef;padding-top:11px}
.data-hub-controls{display:flex;gap:8px;align-items:stretch;min-width:0}
.data-hub-controls input{width:84px;min-width:74px;max-width:104px;flex:none;text-align:center;font:700 20px "DM Sans",Arial,sans-serif}
.data-hub-controls .btn{flex:1;min-width:0;min-height:50px;font-size:15px}
.data-hub-controls .btn:disabled{opacity:.55}
@media(max-width:350px){.data-hub-controls{gap:6px}.data-hub-controls input{width:72px;min-width:66px}.data-hub-controls .btn{font-size:13px}}


/* v1.6 end-to-end account, site, settings, wizard and issue UI. */
.journey-page{display:flex;flex-direction:column;gap:13px;width:100%;max-width:720px;margin:0 auto;padding:0 0 18px}
.journey-page h2{font:800 25px/1.15 "DM Sans",Arial,sans-serif;margin:1px 0 4px;color:#0e162b}
.journey-page>p.hint{margin:0}
.journey-card{border:1px solid #d5e1e9;border-radius:8px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.journey-card p{margin:0;line-height:1.45}
.journey-card strong{color:#0e162b}
.journey-card>span{color:#607d8b;overflow-wrap:anywhere}
.journey-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.journey-card-head strong{font:700 14px "DM Sans",Arial,sans-serif}
.journey-card-head .btn{min-height:35px;padding:5px 12px;font-size:12px;flex:none}
.journey-list-row{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px;text-align:left;width:100%;background:#fff;border:0;border-bottom:1px solid #e4eaf0;padding:12px 0;cursor:pointer;align-items:center}
.journey-list-row:last-child{border-bottom:0}
.journey-list-row strong{grid-column:1;font:700 15px/1.3 "DM Sans",Arial,sans-serif}
.journey-list-row span{grid-column:1;font:400 12.5px/1.4 "DM Sans",Arial,sans-serif;color:#607d8b}
.journey-list-row b{grid-column:2;grid-row:1 / span 2;font-size:22px;text-align:center;color:#0e162b}
.journey-setting{display:flex;flex-direction:column;gap:8px;padding:9px 0;border-bottom:1px solid #e6edf2}
.journey-setting:last-child{border-bottom:0}
.journey-setting>span{font:600 14px/1.3 "DM Sans",Arial,sans-serif}
.journey-check{display:flex;align-items:center;gap:10px;padding:9px 0}
.journey-check input,.journey-checklist input{width:18px;height:18px;accent-color:#0e162b}
.journey-checklist{display:flex;flex-direction:column;gap:9px;margin:8px 0}
.journey-checklist label{display:flex;align-items:center;gap:8px}
.journey-plain-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e7edf1}
.journey-plain-row:last-child{border-bottom:0}
.journey-menu-heading{margin:20px 0 3px}
.journey-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.journey-grid-2>.input{min-width:0}
.journey-card .input{box-sizing:border-box;display:block;width:100%;min-width:0;height:48px;min-height:48px;padding:10px 12px;font-size:16px;line-height:normal}
.journey-stepper{display:flex;gap:5px;align-items:center;color:#455a64;margin-bottom:3px;font:600 12px "DM Sans",Arial,sans-serif}
.journey-stepper span{flex:1;padding:9px 4px;text-align:center;background:#edf3f7;border-radius:5px}
.journey-stepper span.active{background:#0e162b;color:#fff}
.journey-site-select{display:flex;flex-direction:column;gap:8px}
.journey-site-select label{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid #d7e4ee;border-radius:6px}
.journey-site-select label:has(input:checked){border-color:#0e162b;background:#eefaf6}
.journey-site-select input{flex:none;margin-top:2px}
.journey-site-select label>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.journey-site-select small{font-size:12px;color:#607d8b}
.journey-actions{display:flex;gap:9px}
.journey-actions .btn{flex:1;min-width:0}
.journey-warning{background:#fff4e5;border:1px solid #e8ae5c;color:#6e4800;padding:12px;border-radius:6px;line-height:1.4}
.journey-muted{color:#607d8b;font-size:12px}
.journey-issues{display:flex;flex-direction:column;gap:9px}
.journey-issue-row{width:100%;display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #d9e5ed;border-radius:7px;padding:13px;text-align:left;gap:10px}
.journey-issue-row span{font-size:12px;color:#607d8b}
.journey-issue-row b{font-size:16px}
.journey-issue-row.warning{border-color:#e5ab85;background:#fff5ed}
.journey-done-label{background:#e7f8f1;color:#136d49;border-radius:20px;font:700 12px "DM Sans",Arial,sans-serif;padding:5px 9px;white-space:nowrap}


/* UI-33 main menu: restore the full-height right-hand drawer from the mockups. */
.modal-layer.menu-layer{
  align-items:stretch;justify-content:flex-end;background:rgba(13,27,42,.55);
}
.sheet.menu-sheet{
  padding:0;width:min(320px,86vw);max-width:min(320px,86vw);
  height:100dvh;max-height:100dvh;min-height:0;border-radius:0;
  display:flex;flex-direction:column;gap:0;overflow:hidden;
  box-shadow:-10px 0 30px rgba(13,27,42,.25);
}
.menu-panel-header{
  height:calc(66px + env(safe-area-inset-top));
  flex:none;background:var(--navy);border-bottom:3px solid var(--sky);
  color:white;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 15px 12px 18px;
}
.menu-panel-header strong{font:700 18px 'DM Sans',Arial,sans-serif}
.menu-panel-close{
  display:grid;place-items:center;width:44px;height:44px;border:0;
  margin:-6px -9px -10px 0;background:transparent;color:white;
  font:400 29px 'DM Sans',Arial,sans-serif;cursor:pointer;
}
.menu-panel-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.menu-section-title{
  margin:0;padding:16px 18px 6px;color:var(--blue);
  font:700 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.11em;
}
.menu-nav-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;width:100%;border:0;border-bottom:1px solid #eceff1;
  padding:10px 18px;background:#fff;text-align:left;color:var(--navy);
}
.menu-nav-item:active,.menu-nav-item:focus-visible{background:#eefaf6}
.menu-nav-item>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-nav-item strong{font:600 16px/1.3 'DM Sans',Arial,sans-serif}
.menu-nav-item small{font:400 12px/1.35 'DM Sans',Arial,sans-serif;color:var(--muted)}
.menu-chevron{color:var(--blue);font-size:24px;line-height:1;flex:none}
.menu-panel-footer{flex:none;border-top:1px solid var(--line);padding:10px 18px max(12px,env(safe-area-inset-bottom));background:#fff}
.menu-panel-footer button{border:0;background:none;color:var(--navy);font:600 14px 'DM Sans',Arial,sans-serif;padding:10px 0;text-align:left}

/* Edit Site: match every field's height and typography on mobile Safari.
   Avoid native menulist appearance, which renders a compressed select on iOS. */
.sheet:has(.demo-site-type-frame) #demo-site-name.input,
.sheet:has(.demo-site-type-frame) #demo-site-address.input,
.sheet:has(.demo-site-type-frame) #demo-site-rows.input,
.sheet:has(.demo-site-type-frame) #demo-site-stalls.input{
  display:block;width:100%;height:50px;min-height:50px;max-height:50px;
  padding:0 12px;font-size:18px;line-height:normal;
}
.demo-site-type-frame{
  position:relative;display:block;width:100%;height:50px;min-height:50px;
  border:2px solid var(--brand-navy);border-radius:6px;background:#fff;
}
.demo-site-type-frame #demo-site-type.input{
  display:block;position:relative;width:100%;height:100%;min-height:0;max-height:100%;
  margin:0;padding:0 46px 0 12px;border:0;border-radius:4px;background:transparent;
  color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy);
  font:600 18px/normal 'DM Sans',Arial,sans-serif;
  -webkit-appearance:none;appearance:none;
}
.demo-site-type-frame::after{
  content:"";pointer-events:none;position:absolute;right:17px;top:50%;
  width:11px;height:11px;border-right:2.5px solid var(--brand-navy);
  border-bottom:2.5px solid var(--brand-navy);transform:translateY(-68%) rotate(45deg);
}
.demo-site-type-frame:focus-within{outline:3px solid var(--brand-mint);outline-offset:2px}
.demo-site-type-frame #demo-site-type:focus-visible{outline:none}


/* NMR brand palette — shared across every app screen.
   Semantic pink/green states remain distinct for unlinked/linked samples. */
.top{background:var(--brand-navy)}
.top-name:before{background:var(--brand-pink)}
.farm-strip{background:var(--brand-navy);border-top-color:var(--brand-mint);color:#fff}
.top-save:before{color:var(--brand-mint)}
button:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--brand-mint)}
.btn.primary{background:var(--brand-pink);border-color:var(--brand-pink)}
.btn.secondary{background:var(--brand-navy);border-color:var(--brand-navy)}
.btn.soft{background:#e7faf4;border-color:#8fe8c8;color:var(--brand-navy)}
.btn.outline{border-color:var(--brand-navy);color:var(--brand-navy)}
.stage.current{border-color:var(--brand-navy);background:#f4fbfa}
.stage-num,.journey-stepper span.active{background:var(--brand-navy);color:#fff}
.pill.active{outline-color:var(--brand-mint)}
.time-input{border-color:var(--brand-navy)}
.journey-card .input{border-color:var(--brand-navy)}
.section-head strong,.tinycap,.field-label{color:var(--brand-navy)}
.menu-section-title{color:var(--brand-navy)}
.menu-button,.menu-panel-close{color:#fff}
input[type="checkbox"],input[type="radio"]{accent-color:var(--brand-pink)}
/* Sign-in based on the supplied 4.9.1 reference. */
.signin-top{
  background:var(--brand-navy);
  padding:env(safe-area-inset-top) 13px 0;
  border-bottom:2px solid var(--brand-aqua);
}
.signin-top .top-inner{height:51px;min-height:51px}
.signin-header-title{font:700 20px/1.2 'DM Sans',Arial,sans-serif;color:#fff}
.signin-not-authorised{
  display:flex;gap:5px;align-items:center;
  color:#fff;white-space:nowrap;
  font:700 16px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.02em;
}
.signin-not-authorised i{width:6px;height:6px;border-radius:50%;background:#9cb4c7;flex:none}
.body.signin-body{padding:0 14px 20px;display:block;background:#fff}
.signin-screen{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  max-width:440px;margin:0 auto;min-width:0;
}
.signin-nmr-mark{width:142px;height:89px;flex:none;align-self:flex-start;margin-left:-14px}
.signin-nmr-mark svg{display:block;width:142px;height:88px}
.signin-page-title{
  color:var(--brand-navy);font:400 31px/1.2 'DM Sans',Arial,sans-serif;
  letter-spacing:-.045em;margin:17px 0 0;
}
.signin-page-title strong{font-weight:800}
.signin-title-accent{width:10px;height:2px;background:var(--brand-pink);margin-top:20px;margin-bottom:8px}
.signin-intro{margin:0;color:#284563;font:400 18px/1.45 'DM Sans',Arial,sans-serif}
.signin-form-row{display:flex;flex-direction:column;gap:4px;margin-top:21px;min-width:0}
.signin-form-row + .signin-form-row{margin-top:13px}
.signin-form-row label{color:var(--brand-navy);font:600 18px/1.35 'DM Sans',Arial,sans-serif}
.signin-text-field{
  box-sizing:border-box;display:flex;align-items:center;gap:8px;
  height:56px;min-height:56px;border:1.5px solid var(--brand-navy);
  border-radius:5px;padding:0 12px;min-width:0;
  color:var(--brand-navy);font:500 20px 'DM Sans',Arial,sans-serif;
  overflow:hidden;white-space:nowrap;
}
.signin-password-field{border:1px solid #c5d2df;justify-content:space-between}
.signin-password-field button{
  background:transparent;border:0;min-height:44px;padding:0 1px 0 10px;
  color:var(--brand-navy);
  font:700 17px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.035em;
}
.signin-help{
  display:block;align-self:flex-start;min-height:22px;padding:0;margin-top:11px;
  background:none;border:0;color:var(--brand-navy);
  text-align:left;text-decoration:none;
  font:600 18px 'DM Sans',Arial,sans-serif;
}
.bottom.signin-footer{
  flex:none;display:flex;flex-direction:column;align-items:stretch;gap:15px;
  border-top:0;box-shadow:none;background:#fff;
  padding:0 14px max(13px,env(safe-area-inset-bottom));
}
.bottom.signin-footer > *{flex:none}
.signin-device-status{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;min-height:31px;padding-top:8px;
  border-top:1px solid #e8edf1;max-width:440px;width:100%;margin:0 auto;
  color:#607487;font:500 16px/1.35 'DM Sans',Arial,sans-serif;
}
.signin-device-status span:last-child{text-align:right}
.signin-submit.btn{
  box-sizing:border-box;width:100%;max-width:440px;min-height:58px;height:58px;
  margin:0 auto;border:0;border-radius:5px;
  background:var(--brand-pink);color:#fff;
  font:700 22px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.04em;
}
@media(min-width:700px){
 .body.signin-body{padding:0 14px 20px}
 .bottom.signin-footer{padding:0 14px max(13px,env(safe-area-inset-bottom))}
}


/* iPhone Safari: keep the native date picker visually aligned with the Milking select.
   Date fields can otherwise retain an oversized intrinsic min-height/width. */
.journey-card #wizard-date.input,
.journey-card #wizard-milking.input{
  box-sizing:border-box;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  height:48px;
  min-height:48px;
  max-height:48px;
  flex:0 0 48px;
  margin:0;
  padding:8px 12px;
  border:2px solid var(--brand-navy);
  border-radius:6px;
  background:#fff;
  color:var(--brand-navy);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  line-height:normal;
}
.journey-card #wizard-date.input{
  -webkit-appearance:none;
  appearance:none;
  text-align:left;
}
.journey-card #wizard-date::-webkit-date-and-time-value{
  min-height:0;
  text-align:left;
}
.journey-card #wizard-date::-webkit-datetime-edit{
  padding:0;
  line-height:normal;
}


/* v1.8.6: Safari date-picker intrinsic sizing must not expand the Details card.
   Both controls share the same visual box dimensions at every screen size. */
.journey-card .wizard-date-frame,
.journey-card #wizard-milking.input{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  height:50px;
  min-height:50px;
  max-height:50px;
  flex:0 0 50px;
  margin:0;
  border:2px solid var(--brand-navy);
  border-radius:6px;
  background:#fff;
}
.journey-card .wizard-date-frame{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.journey-card .wizard-date-frame #wizard-date.input{
  position:relative;
  display:block;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
  border:0;
  border-radius:0;
  margin:0;
  padding:0 12px;
  background:transparent;
  font-size:16px;
  font-weight:600;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;
  overflow:hidden;
}
.journey-card #wizard-milking.input{
  display:block;
  padding:0 12px;
  font-size:16px;
  line-height:normal;
}
.journey-card #wizard-date::-webkit-date-and-time-value{
  min-height:0;
  max-height:50px;
  padding:0;
  text-align:left;
}
.journey-page.wizard-page{
  padding-top:8px;
}


/* Safari date text: centre vertically within the same 50px field as Milking. */
.journey-card .wizard-date-frame #wizard-date.input{
  height:50px;
  min-height:50px;
  max-height:50px;
  padding:0 12px;
  line-height:46px;
  text-align:left;
}
.journey-card .wizard-date-frame #wizard-date::-webkit-date-and-time-value{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:46px;
  min-height:46px;
  max-height:46px;
  line-height:46px;
  text-align:left;
}
.journey-card .wizard-date-frame #wizard-date::-webkit-datetime-edit{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  height:46px;
  min-height:46px;
  padding:0;
  line-height:46px;
}


/* v1.8.10: scanning configuration selector, comfortably readable on mobile. */
.camera-settings #camera-scan-mode{
  height:52px;min-height:52px;font-size:16px;line-height:1.3;
  padding:9px 12px;box-sizing:border-box;
}
.camera-settings #camera-mode-note{
  margin:0 0 5px;
  font:500 14px/1.45 'DM Sans',Arial,sans-serif;
  color:#455a64;
}
.camera-settings #camera-resolution-note{
  margin:0 0 5px;font-size:13px;line-height:1.4;
}


/* v1.8.11: core animal records versus current-session sampling statuses. */
.animal-registry{gap:10px}
.animal-registry .pillrow{margin:3px 0 2px}
.animal-registry .pill{font-size:12px;padding:8px 10px}
.animal-registry-list{display:flex;flex-direction:column;gap:4px}
.animal-registry-row{
  width:100%;min-width:0;min-height:52px;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:2px 8px;align-items:center;
  padding:6px 10px;border:1.5px solid #d5e1e9;
  border-radius:7px;background:#fff;color:var(--brand-navy);
  text-align:left;
}
button.animal-registry-row{cursor:pointer}
.animal-registry-row.not-added{background:#f5f7f8;border-color:#d9e1e5}
.animal-registry-row.awaiting{background:var(--pale-red);border-color:#e8a5b5}
.animal-registry-row.linked{background:var(--pale-green);border-color:#90d9bf}
.animal-registry-row.no-sample{background:#f0f2f3;border-color:#cbd6dc}
.animal-registry-row.issue{border-color:#c94360}
.animal-registry-primary{display:flex;align-items:baseline;gap:10px;min-width:0;grid-column:1}
.animal-registry-primary strong{font:800 19px/1.2 'DM Sans',Arial,sans-serif;white-space:nowrap}
.animal-registry-id{font:500 11px/1.3 'DM Sans',Arial,sans-serif;color:#607487;overflow-wrap:anywhere}
.animal-registry-meta{min-width:0;grid-column:1;font:500 12px/1.4 'DM Sans',Arial,sans-serif;color:#607487}
.animal-registry-state{grid-column:2;grid-row:1 / span 2;justify-self:end;text-align:right;
  font:800 12px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:.045em;white-space:nowrap;color:#607487}
.animal-registry-state.awaiting{color:#9c1736}
.animal-registry-state.linked{color:#006c4c}
.animal-registry-state.no-sample{color:#4f5f66}
.animal-registry-chevron{grid-column:3;grid-row:1 / span 2;color:var(--brand-navy);font-size:23px}
@media(max-width:380px){
 .animal-registry-row{padding:6px 8px;gap:2px 5px}
 .animal-registry-primary{gap:6px}
 .animal-registry-primary strong{font-size:17px}
 .animal-registry-id{font-size:10px}
 .animal-registry-state{font-size:11px}
}


/* v1.8.14 — separate sample-pot and sample-box hardware zoom controls. */
.camera-settings #camera-zoom-target{min-height:48px;font-size:16px}
/* v1.8.17 — UI-35 No Sample reason; proportions follow mockup 4.6.8. */
.sheet.no-sample-reason-sheet,
.sheet.linked-capture-sheet{
 width:100%;max-width:440px;max-height:min(92dvh,780px);min-width:0;
 border-radius:16px 16px 0 0;overflow-y:auto;
 padding:8px 16px max(18px,env(safe-area-inset-bottom));
 gap:0;box-shadow:0 -10px 30px rgba(13,27,42,.28);
}
.no-sample-ui35,.linked-capture-ui20{
 display:flex;flex-direction:column;gap:12px;min-width:0;
 color:var(--brand-navy);
}
.no-sample-grip,.linked-capture-grip{
 width:40px;height:4px;min-height:4px;flex:none;align-self:center;
 border-radius:2px;background:#cfd8dc;
}
.no-sample-top,.linked-capture-top{
 display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-width:0;
}
.no-sample-top>div,.linked-capture-heading{
 display:flex;flex-direction:column;gap:4px;min-width:0;
}
.no-sample-eyebrow,.linked-capture-heading>span{
 font:600 13px/1.2 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.1em;color:#2a7aaa;
}
.no-sample-animal-line{
 font:800 44px/1 'DM Sans',Arial,sans-serif;
 color:#0d1b2a;letter-spacing:.03em;overflow-wrap:anywhere;
}
.no-sample-state{
 flex:none;align-self:flex-start;white-space:nowrap;
 border:1px solid #f5a3b9;border-radius:20px;
 background:#fde8ee;color:#b0103a;
 padding:5px 12px;margin-top:4px;
 font:600 12px/1.2 'DM Sans',Arial,sans-serif;
}
.no-sample-field-title{
 display:block;margin:0;
 font:600 12px/1.25 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.08em;color:#2a7aaa;
}
.no-sample-reason-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.no-sample-reason-option{
 display:flex;align-items:center;width:100%;min-width:0;min-height:54px;
 padding:0 14px;border-radius:6px;
 text-align:left;white-space:normal;
 border:1.5px solid #cfd8dc;
 background:#fff;color:#0d1b2a;
 font:600 15px/1.25 'DM Sans',Arial,sans-serif;
}
.no-sample-reason-option.selected{
 background:#0d1b2a;border-color:#0d1b2a;color:#fff;
}
.no-sample-reason-option:focus-visible{
 outline:3px solid var(--brand-mint);outline-offset:1px;
}
.no-sample-reason-error{
 margin:0;color:#b31840;font:600 13px/1.3 'DM Sans',Arial,sans-serif;
}
.no-sample-reason-error[hidden]{display:none}
.no-sample-note.input{
 display:block;box-sizing:border-box;width:100%;height:48px;min-height:48px;max-height:48px;
 margin-top:-7px;padding:11px 14px;resize:none;
 border:1.5px solid #e0e0e0;border-radius:6px;
 color:#0d1b2a;background:#fff;
 font:400 15px/1.3 'DM Sans',Arial,sans-serif;
}
.no-sample-note::placeholder{color:#90a4ae;font-size:14px}
.no-sample-actions{
 display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-top:0;
}
.no-sample-actions .btn{
 width:100%;min-width:0;height:58px;min-height:58px;
 font:700 17px/1.1 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.06em;
}
.no-sample-actions .btn.primary{
 background:#e8174a;border-color:#e8174a;color:#fff;
}
.capture-actions .capture-no-sample{
 border-color:var(--brand-pink);color:#b90f43;
}

/* UI-20 already-linked animal/pot popup — shown on selection, never on scan. */
.linked-capture-heading>strong{
 font:800 52px/1 'DM Sans',Arial,sans-serif;
 color:#0d1b2a;letter-spacing:.03em;overflow-wrap:anywhere;
}
.linked-capture-state{
 display:flex;flex-direction:column;align-items:flex-end;gap:6px;
 flex:none;margin-top:4px;
}
.linked-capture-pill{
 white-space:nowrap;padding:5px 12px;
 border-radius:20px;border:1px solid #7de8c5;
 background:#e0faf2;color:#00664f;
 font:600 12px/1.2 'DM Sans',Arial,sans-serif;
}
.linked-capture-camera{
 display:flex;align-items:center;gap:6px;
 white-space:nowrap;color:#90a4ae;
 font:700 12px/1.2 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.08em;
}
.linked-capture-camera i{
 width:8px;height:8px;flex:none;
 border-radius:50%;background:#cfd8dc;
}
.linked-capture-sample{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 flex:none;width:100%;min-width:0;height:116px;padding:10px;
 background:#00c389;color:#0d1b2a;border-radius:8px;
}
.linked-capture-sample>span{
 font:700 13px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:.12em;
}
.linked-capture-sample>strong{
 max-width:100%;font:800 clamp(23px,7.9vw,32px)/1.1 'DM Sans',Arial,sans-serif;
 letter-spacing:.05em;overflow-wrap:anywhere;text-align:center;
}
.linked-capture-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.linked-capture-actions .btn{
 width:100%;min-width:0;height:56px;min-height:56px;
 padding:8px 5px;white-space:normal;
 border-width:1.5px;border-radius:6px;
 text-align:center;
 font:700 15px/1.15 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.06em;
}
.linked-capture-actions .btn:disabled{
 opacity:1;background:#fff;border-color:#cfd8dc;color:#b0bec5;
}
.linked-capture-actions .linked-capture-delete{
 border-color:#e8174a;color:#c4103d;
}
.linked-capture-actions .linked-capture-add-test{
 grid-column:1 / -1;border-color:#0d1b2a;color:#0d1b2a;
}
.linked-capture-actions .linked-capture-add-test:disabled{
 border-color:#cfd8dc;color:#b0bec5;
}


/* v1.8.24: Make the selected animal immediately identifiable on details screens. */
.animal-detail-identity{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:4px;
 min-width:0;
 padding:14px 16px;
 border:1.5px solid #b9cbd7;
 border-left:5px solid var(--brand-pink,#e8174a);
 border-radius:8px;
 background:#f2f7fa;
}
.animal-detail-id-label{
 color:var(--brand-navy,#0e162b);
 font:800 15px/1.2 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.1em;
}
.animal-detail-id-value{
 display:block;
 max-width:100%;
 color:var(--brand-navy,#0e162b);
 font:800 clamp(38px,10vw,52px)/1.08 'DM Sans',Arial,sans-serif;
 letter-spacing:.025em;
 overflow-wrap:anywhere;
 font-variant-numeric:tabular-nums;
}
.animal-detail-previous-id{
 font:500 13px/1.3 'DM Sans',Arial,sans-serif;
 color:#607487;
}
.animal-detail-identity-modal{margin:4px 0 12px}


/* v1.8.27 Swap Animal: same picker as Add Animals, with denser selectable rows. */
.sheet:has(.swap-animal-picker){
 max-width:460px;
 height:min(91dvh,830px);
 max-height:92dvh;
 overflow:hidden;
 padding:9px 14px max(12px,env(safe-area-inset-bottom));
 gap:0;
}
.swap-animal-picker .herd-session-counts{margin-bottom:4px}
.swap-animal-picker h2{margin:0}
.swap-animal-picker .herd-subtitle{margin:0 0 1px}
.swap-filter-row{
 flex-wrap:nowrap;
 overflow-x:auto;
 overscroll-behavior-x:contain;
 scrollbar-width:none;
 padding:1px 0 4px;
 flex:none;
}
.swap-filter-row::-webkit-scrollbar{display:none}
.swap-filter-row button{flex:none;white-space:nowrap}
.swap-animal-picker .herd-result-scroll{flex-basis:160px}
.swap-animal-picker .herd-match{
 min-height:41px;
 padding:5px 9px;
 margin-bottom:4px;
 gap:7px;
}
.swap-animal-picker .herd-match-line{
 font-size:19px;
 min-width:65px;
}
.swap-animal-picker .herd-match-meta{
 font-size:11.5px;
 line-height:1.3;
}
.swap-animal-picker .herd-match-add{
 font-size:13px;
}
.swap-animal-picker .herd-match.is-current{
 border-color:#7f9aab;
 background:#f1f5f8;
}
.swap-animal-picker .herd-match.is-current .herd-match-add{color:#607487}
.swap-animal-picker .herd-section-label{padding-top:5px}
.swap-animal-picker .herd-number-pad button{min-height:36px}
.swap-animal-picker .herd-number-pad .swap-clear-key{
 background:#e7eef3;
 color:var(--navy);
 border-color:#cad7dd;
 font:800 14px 'Barlow Condensed',Arial,sans-serif;
}


/* v1.8.30: deliberate, separate actions for deleting local test sessions. */
.sampling-session-item{
 display:flex;
 flex-direction:column;
 gap:5px;
 margin-bottom:11px;
 min-width:0;
}
.sampling-session-item .sampling-session-row{margin:0}
.sampling-session-delete{
 align-self:flex-end;
 min-height:40px;
 padding:7px 13px;
 border:1px solid #c23c53;
 border-radius:6px;
 background:#fff;
 color:#ad233d;
 font:800 13px/1.2 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.045em;
 cursor:pointer;
}
.sampling-session-delete:focus-visible{
 outline:3px solid #0e162b;
 outline-offset:2px;
}
.sampling-session-delete:active{background:#fff1f3}
.data-reset-card{
 margin-top:12px;
 border-color:#d4dfe5;
}
.data-reset-card>strong{
 font:750 18px/1.25 'DM Sans',Arial,sans-serif;
 color:var(--brand-navy);
}
.data-reset-card .btn.danger{
 min-height:52px;
 white-space:normal;
}


/* v1.8.35: Skipped sample pots remain visible as unresolved yellow records.
   Awaiting is red, linked is green, No Sample is grey; skip is not No Sample. */
.animal-card.skipped,
.animal-registry-row.skipped,
.herd-match.skipped,
.herd-catalog-row em.skipped{
 background:#fff4c9;
 border-color:#dba72c;
 color:#775300;
}
.animal-registry-state.skipped{color:#806000}
.animal-registry-row.skipped.issue{border-color:#dba72c}
.herd-match.skipped .herd-match-add{color:#856000}
.herd-session-count.skipped{
 background:#fff4c9;
 border-color:#dba72c;
 color:#745100;
}
.journey-issue-row.skipped{
 background:#fff4c9;
 border-color:#dba72c;
}
.journey-issue-row.skipped>strong{color:#775300}
.skipped-warning{
 background:#fff4c9;
 border-color:#dba72c;
 color:#775300;
}
.capture-status-pill.skipped{
 background:#fff4c9;
 border-color:#dba72c;
 color:#775300;
}
.btn[data-action="skip-pot"]{
 border:2px solid #dba72c;
 background:#fff4c9;
 color:#775300;
 font-weight:800;
 margin:7px 0;
}

/* v1.8.40 — clear hierarchy and current-session context in menu drawer */
.menu-primary-link{background:#e9f2f8;border-top:1px solid #dae5ec;padding:15px 17px}
.menu-primary-link strong{font-weight:800;font-size:16px;color:#102a43}
.menu-child-link{padding:11px 17px 11px 35px;background:#fff;color:#536575}
.menu-child-link>span:first-child{font:500 14px/1.35 'DM Sans',Arial,sans-serif}
.menu-active-session{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:#f2faf6;border-bottom:1px solid #d8eae2}
.menu-active-session strong{font:700 13px/1.3 'DM Sans',Arial,sans-serif;color:#153344}
.menu-active-session span{font:400 12px/1.4 'DM Sans',Arial,sans-serif;color:#52677b}

/* Compact Animals list: line and linked sample IDs share a row. */
.animal-registry-primary{flex-wrap:wrap;align-items:baseline}
.animal-registry-sample{font:600 19px/1.2 'DM Sans',Arial,sans-serif;color:#345a72;overflow-wrap:anywhere}
.animal-registry-state,.animal-registry-chevron{grid-row:1}
@media(max-width:380px){.animal-registry-sample{font-size:17px}}

/* Outstanding UI batch: compact two-row Animals filters and Test Management controls. */
.animal-registry .animal-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:3px 0 5px}
.animal-filter-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:58px;padding:7px 2px;border:1px solid #bbcdd8;border-radius:5px;background:#fff;color:#0e162b;font:800 clamp(13px,3.5vw,17px)/1.05 "Barlow Condensed",Arial,sans-serif;letter-spacing:0;text-align:center;white-space:normal}
.animal-filter-label{display:block;overflow-wrap:normal}
.animal-filter-count{display:block;font:800 clamp(19px,5vw,24px)/1 "DM Sans",Arial,sans-serif;font-variant-numeric:tabular-nums}
.animal-filter-grid button.active{background:#0e162b;color:#fff;border-color:#0e162b}
.animal-filter-grid button:focus-visible{outline:3px solid #a3e1e8;outline-offset:2px}
.test-bulk-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.test-bulk-actions .btn{min-width:0;min-height:45px;font-size:14px;padding:8px 5px}
.session-details-identity{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding:10px 0 4px}
.session-details-identity strong{font:700 clamp(18px,4.7vw,24px)/1.2 "DM Sans",Arial,sans-serif;color:#0e162b;overflow-wrap:anywhere}
.session-details-identity+.details-grid{margin-top:12px;padding-top:12px;border-top:1px solid #e4ebef}
.herd-warning-identifiers{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;margin:12px 0}
.herd-warning-identifiers .herd-warning-line{font:800 clamp(30px,8vw,42px)/1.15 "DM Sans",Arial,sans-serif;letter-spacing:.03em;color:var(--navy)}
.herd-warning-identifiers .herd-warning-sample{font:700 clamp(20px,5.5vw,27px)/1.2 "DM Sans",Arial,sans-serif;color:#9e1b32;overflow-wrap:anywhere}

/* Herringbone single-device: two visible columns, independent stall cycles. */
.hh-sampling{gap:10px}
.hh-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.hh-column{display:flex;flex-direction:column;gap:5px;min-width:0}
.hh-row-head{display:flex;justify-content:space-between;align-items:center;gap:4px;width:100%;min-height:44px;padding:7px 9px;border:1px solid #cfd8dc;border-radius:6px;background:#eceff1;color:#455a64;font:700 14px "Barlow Condensed",Arial,sans-serif;text-align:left}
.hh-row-head.active{background:#0d1b2a;color:#fff;border-color:#0d1b2a}
.hh-row-head span{font-size:11px;letter-spacing:.04em}
.hh-stall{width:100%;display:flex;align-items:center;gap:5px;min-height:50px;padding:5px 7px;border:1px dashed #cfd8dc;border-radius:6px;background:#fff;color:#82939e;text-align:left;min-width:0}
.hh-stall-num{font:700 12px "Barlow Condensed",Arial,sans-serif;min-width:20px;flex:none}
.hh-stall-id{font:700 clamp(14px,4vw,19px) "DM Sans",Arial,sans-serif;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}
.hh-stall-result{font:800 12px "Barlow Condensed",Arial,sans-serif;flex:none}
.hh-stall.awaiting{background:#fde8ee;border:1px solid #f5a3b9;color:#b0103a}
.hh-stall.linked{background:#e0faf2;border:1px solid #7de8c5;color:#00664f}
.hh-stall.no-sample{background:#eceff1;border:1px solid #cad5dc;color:#455a64}
.hh-stall.skipped{background:#fff4d5;border:1px solid #edbd54;color:#775100}
.hh-stall.empty{background:#fff}
.hh-stall.empty:has(.hh-stall-id:not(:empty)){background:#eef6fc;border:2px dashed #2a7aaa;color:#2a7aaa}
@media(max-width:360px){.hh-columns{gap:6px}.hh-stall{padding:5px}.hh-stall-num{min-width:16px}.hh-row-head{padding:6px 5px;font-size:13px}}

/* Keyboard-HID sample-pot scanning; the input stays focusable on mobile
   without showing an on-screen keyboard (inputmode="none"). */
.external-scanner-banner{display:flex;flex-direction:column;gap:5px;position:relative;border:1px solid #8bbfca;background:#eaf7f5;color:#113c47;border-radius:8px;padding:11px 13px;font:500 13px/1.4 "DM Sans",Arial,sans-serif}
.external-scanner-banner strong{font:800 15px/1.3 "Barlow Condensed",Arial,sans-serif;letter-spacing:.05em}
.external-scanner-banner #external-scan-feedback{font-weight:700;color:#17664b}
.external-scanner-banner #external-scan-feedback.error{color:#ac2642}
.external-scanner-refocus{align-self:flex-start;border:1px solid #799ca8;background:#fff;color:#123d4d;border-radius:5px;padding:7px 10px;font:700 12px "Barlow Condensed",Arial,sans-serif}
.external-scanner-sink{position:absolute!important;left:0;top:0;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden}
.capture-external{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:12px;background:#eaf7f5!important;color:#123d4d;text-align:center;padding:28px 18px;min-height:180px}
.capture-external .external-capture-title{font:800 20px "Barlow Condensed",Arial,sans-serif;letter-spacing:.05em}
.capture-external p{max-width:280px;font:500 14px/1.5 "DM Sans",Arial,sans-serif;margin:0}
.capture-external>strong{font:800 14px "Barlow Condensed",Arial,sans-serif;color:#086846}
.capture-external #capture-status:not([hidden]){position:static;color:#123d4d;max-width:100%}
.capture-external #capture-status.error{color:#9e1b32}

/* UI-19/41 Quick Scan: non-modal armed cow indicator and compact barcode view. */
.quick-scan-bar{
 display:flex;flex-direction:column;gap:5px;position:sticky;top:0;z-index:5;
 padding:10px 13px;margin:4px 0 12px;border-radius:8px;
 background:#0e162b;color:#fff;box-shadow:0 6px 20px rgba(14,22,43,.2);
}
.quick-scan-title{color:#8ccae1;font:800 13px/1.3 'Barlow Condensed',Arial,sans-serif;letter-spacing:.08em}
.quick-scan-bar strong{color:#fff;font:800 23px/1.1 'DM Sans',Arial,sans-serif}
.quick-scan-instruction{color:#d5e9ec;font:500 12px/1.3 'DM Sans',Arial,sans-serif}
.quick-scan-feedback{color:#f4c7cf;font:700 12px/1.4 'DM Sans',Arial,sans-serif}
.quick-scan-camera{position:relative;width:100%;height:160px;min-height:140px;overflow:hidden;border-radius:7px;background:#142b36}
.quick-scan-camera video{width:100%!important;height:100%!important;object-fit:cover}
.quick-scan-camera canvas{max-width:100%}
.hh-stall.quick-selected,.animal-card.quick-selected{outline:3px solid #1a91b5!important;outline-offset:-3px;box-shadow:0 0 0 2px rgba(0,194,255,.2)}

/* Herringbone Quick Scan Compact — Classic remains unchanged.
 * The active stall column keeps the exact original .hh-stall dimensions.
 * Status uses only the other column; removing the footer frees vertical space.
 */
.app-hh-compact .body-hh-compact{padding:6px 12px max(8px,env(safe-area-inset-bottom))}
.hh-sampling.hh-compact{gap:6px;padding-bottom:8px}
.hh-compact .hh-columns{gap:10px;align-items:start}
.hh-compact .hh-column{min-width:0}
.hh-compact .quick-scan-inactive{
  position:sticky;top:4px;z-index:4;
  width:100%;min-width:0;margin:2px 0 5px;
  padding:9px 8px;gap:5px;border-radius:7px;
  box-shadow:0 4px 12px rgba(14,22,43,.14);
  overflow-wrap:anywhere;
}
.hh-compact .quick-scan-inactive .quick-scan-title{
  font-size:12px;letter-spacing:.04em;line-height:1.25
}
.hh-compact .quick-scan-inactive strong{
  font-size:clamp(17px,4.5vw,22px);line-height:1.1;overflow-wrap:anywhere
}
.hh-compact .quick-scan-progress{
  font:700 12px/1.35 "Barlow Condensed",Arial,sans-serif;
  color:#a3e1e8;letter-spacing:.035em
}
.hh-compact .quick-scan-inactive .quick-scan-instruction,
.hh-compact .quick-scan-inactive .quick-scan-result{
  font-size:12px;line-height:1.4;color:#d5e9ec;overflow-wrap:anywhere
}
.hh-compact .quick-scan-inactive .quick-scan-result{color:#a5f0d0;font-weight:700}
.hh-compact .quick-scan-inactive .quick-scan-feedback{font-size:12px;line-height:1.35}
.hh-compact .quick-scan-inactive .quick-scan-feedback.error{color:#ffb6c8}
.hh-compact .quick-scan-inactive .quick-scan-camera{
  height:155px;min-height:140px;max-width:100%;overflow:hidden
}
@media(max-width:360px){
 .app-hh-compact .body-hh-compact{padding-left:9px;padding-right:9px}
 .hh-compact .hh-columns{gap:6px}
 .hh-compact .quick-scan-inactive{padding:8px 6px}
 .hh-compact .quick-scan-inactive .quick-scan-title{font-size:11px}
}

/* Herringbone 4.1.7 — long-press to lift; drag to insert and shift cows.
 * Touch scrolling remains enabled until the hold has activated.
 */
.hh-stall[data-uid]:not([data-uid=""]){
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.hh-stall.hh-drag-origin{
 position:relative;z-index:6;outline:3px solid #0e162b!important;
 outline-offset:-3px;transform:scale(1.02);
 box-shadow:0 9px 22px rgba(13,27,42,.3);
}
.hh-stall.hh-drag-target{
 outline:3px solid #2a7aaa!important;outline-offset:-3px;
 background:#e5f4fd!important;box-shadow:inset 0 0 0 2px #b8dcf3;
}
.hh-dragging,.hh-dragging *{cursor:grabbing!important}
.hh-drag-ghost{
 position:fixed;z-index:9999;pointer-events:none;
 display:flex;flex-direction:column;gap:2px;
 transform:translateY(-100%);
 max-width:min(190px,48vw);padding:7px 10px;
 background:#0e162b;color:#fff;border:2px solid #a3e1e8;
 border-radius:7px;box-shadow:0 7px 21px rgba(0,0,0,.32);
}
.hh-drag-ghost strong{font:800 19px/1.1 'DM Sans',Arial,sans-serif}
.hh-drag-location{font:700 12px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:.06em;color:#a3e1e8}

/* Live reorder: leave a genuine empty drop space and slide neighbouring cow
 * cards into the source stall BEFORE the user releases their finger. */
.hh-column.hh-drag-column{position:relative}
.hh-dragging .hh-stall[data-slot]{
 transition:transform 170ms cubic-bezier(.21,.75,.3,1);
}
.hh-dragging .hh-stall.hh-drag-shifting{
 transform:translate3d(0,var(--hh-preview-shift,0px),0);
 position:relative;z-index:3;
 box-shadow:0 3px 10px rgba(14,22,43,.15);
}
.hh-dragging .hh-stall.hh-drag-origin{
 opacity:0!important;transform:none!important;
 box-shadow:none!important;
}
.hh-dragging .hh-stall.hh-drag-target{
 outline:none!important;
 box-shadow:0 3px 10px rgba(14,22,43,.15);
 background:inherit;
}
.hh-drag-gap{
 display:flex;align-items:center;justify-content:center;
 position:absolute;z-index:4;pointer-events:none;
 border:2px dashed #187caa;border-radius:7px;
 background:rgba(163,225,232,.25);
 color:#125477;text-align:center;
 box-shadow:inset 0 0 0 2px #f8feff;
 transition:top 170ms cubic-bezier(.21,.75,.3,1);
}
.hh-drag-gap[hidden]{display:none}
.hh-drag-gap-label{
 font:800 12px/1.1 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.045em;
}
.hh-stall.hh-drag-ghost{
 position:fixed!important;z-index:9999;pointer-events:none;
 display:flex;align-items:center;gap:5px;
 margin:0!important;padding:5px 7px!important;
 border:2.5px solid #0e162b!important;border-radius:7px;
 opacity:.97!important;transform:scale(1.055)!important;
 box-shadow:0 12px 28px rgba(14,22,43,.4)!important;
 transition:none!important;box-sizing:border-box;
}
.hh-drag-ghost .hh-stall-num{flex:none}
.hh-drag-ghost .hh-stall-id{white-space:nowrap}
.hh-drag-ghost .hh-drag-location{
 position:absolute;left:0;top:-23px;max-width:100%;
 border-radius:4px 4px 0 0;padding:4px 7px;
 background:#0e162b;color:#a3e1e8;white-space:nowrap;
 font:800 11px/1.1 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.04em;
}
@media(prefers-reduced-motion:reduce){
 .hh-dragging .hh-stall[data-slot],.hh-drag-gap{transition:none}
}

/* Session Management: make stage names readable from arm's length, without
 * affecting stall dimensions, other screens or the action button sizes. */
.session-management-screen .stage-title{
 font-size:clamp(18px,4.8vw,21px);
 line-height:1.25;
 letter-spacing:-.01em;
 min-width:0;
}
.session-management-screen .stage-num{
 width:34px;height:34px;font-size:17px;
}
.session-management-screen .stage-row{gap:10px;align-items:center}
.session-management-screen .stage-state{font-size:12px;flex:none}
@media(max-width:360px){
 .session-management-screen .stage-title{font-size:18px}
 .session-management-screen .stage-state{font-size:11px;padding:4px 6px}
}

/* In-app milking-time keypad: works even if iOS hides its software
   keyboard while a Bluetooth HID barcode scanner is paired. */
.time-input-popup{cursor:pointer;caret-color:transparent}
.time-input-popup:focus-visible{outline:3px solid #7acfe1;outline-offset:2px}
.sheet:has(.milking-time-pad){
 max-width:440px;gap:0;padding:12px 16px max(16px,env(safe-area-inset-bottom));
}
.milking-time-pad{display:flex;flex-direction:column;gap:9px;padding-bottom:1px}
.milking-time-pad h2{margin:0 0 3px;font-size:23px}
.milking-time-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.milking-time-summary-item{
 display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
 border:2px solid #ccdbe3;border-radius:8px;padding:10px 6px;
 background:#f4f8fa;min-width:0;transition:border-color 120ms;
}
.milking-time-summary-item.active{border-color:#14749b;background:#e8f6fa}
.milking-time-summary-item span{
 font:800 13px/1.1 'Barlow Condensed',Arial,sans-serif;
 letter-spacing:.07em;color:var(--navy)
}
.milking-time-summary-item strong{
 font:800 clamp(22px,6.3vw,29px)/1.2 'DM Sans',Arial,sans-serif;
 font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap
}
.milking-time-pad #milking-time-active{
 text-align:center;font-size:15px;letter-spacing:.07em;margin-top:4px
}
.milking-time-preview{
 text-align:center;padding:9px 10px;min-height:58px;border-radius:7px;
 background:#0e162b;color:#fff;
 font:800 34px/1.2 'DM Sans',Arial,sans-serif;
 font-variant-numeric:tabular-nums;letter-spacing:.13em
}
.milking-time-pad #milking-time-message{
 min-height:18px;margin:0;text-align:center;font-size:13px
}
.milking-time-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.milking-time-keys button{
 min-height:53px;border:1.5px solid #bfd3df;border-radius:8px;
 background:#f0f7fb;color:var(--navy);cursor:pointer;
 font:800 23px/1.1 'DM Sans',Arial,sans-serif;touch-action:manipulation
}
.milking-time-keys button:active{background:#c9e9f8}
.milking-time-keys .milking-time-clear{
 color:#ad2b40;font:800 18px/1 'Barlow Condensed',Arial,sans-serif
}
.milking-time-footer-hint{
 margin:0;font-size:12px;text-align:center;color:#556f7a
}
@media(max-height:700px){
 .milking-time-summary-item{padding:6px}
 .milking-time-keys{gap:5px}
 .milking-time-keys button{min-height:45px}
 .milking-time-pad{gap:6px}
 .milking-time-preview{min-height:50px;padding:6px}
}


/* Herringbone logical-section paging and independent single-section layout */
.hh-horizontal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;gap:8px;padding-bottom:8px}
.hh-nav-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;align-items:start}
.hh-nav-page .hh-column{min-width:0}
.hh-single-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:sticky;top:0;z-index:3;margin-bottom:8px}
.hh-single-head .hh-row-head{min-height:49px}
.hh-detail-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:49px;border-radius:6px;border:0;padding:3px 5px;background:#142134;color:white}
.hh-detail-mini strong{font:700 20px "DM Sans",Arial,sans-serif;line-height:1.15;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hh-detail-mini small{font-size:10px;line-height:1.2;color:#dae7f0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hh-view-toolbar{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-bottom:6px;flex-wrap:wrap}
.hh-nav-page .hh-stall{box-sizing:border-box}


/* Compact Quick Entry: the stall grid owns the space. Navigation and layout
   options live in the row-header popup, not permanent top/bottom bars. */
.app-hh-compact .body-hh-compact{
 /* The bottom inset is unused in full-screen Compact. Reserving the iOS
    home-indicator safe area here leaves a blank strip and loses a stall. */
 padding:5px 9px 5px;
 overflow:hidden;
}
.hh-sampling.hh-compact{
 height:100%;
 min-height:0;
 padding:0;
 gap:0;
}
.hh-compact .hh-single-head{
 flex:0 0 auto;
 margin-bottom:6px;
}
.hh-compact .hh-horizontal{
 flex:1 1 auto;
 min-height:0;
 height:100%;
 padding-bottom:0;
}
.hh-compact .hh-nav-page{
 height:100%;
 max-height:100%;
 overflow:hidden;
}
.hh-compact .hh-nav-page>.hh-column{
 height:100%;
 max-height:100%;
 min-height:0;
 overflow-y:auto;
 overscroll-behavior-y:contain;
 scrollbar-width:thin;
}
.hh-compact .hh-nav-page .hh-column>.hh-row-head{
 position:sticky;
 top:0;
 z-index:2;
}
.hh-compact-scanner-input{
 position:absolute;
 width:1px;
 height:1px;
 overflow:hidden;
 pointer-events:none;
}

/* Herringbone: feedback lives in the existing row header, not a success popup. */
.hh-detail-mini strong.hh-link-success{color:#35d27b}
.hh-detail-mini strong.hh-link-duplicate{color:#ff6666}

/* Compact Sampling Sessions rows: retain readable text, reduce whitespace. */
.sampling-session-item{position:relative;display:block;margin-bottom:6px}
.sampling-session-item .sampling-session-row{padding:9px 82px 9px 11px;gap:4px;min-height:62px}
.sampling-session-item .sampling-session-main{gap:6px;flex-wrap:wrap}
.sampling-session-item .sampling-session-main strong{font-size:16px}
.sampling-session-item .sampling-session-main .session-phase-label{padding:3px 8px;font-size:12px}
.sampling-session-item .sampling-session-sub{font-size:13px;gap:3px}
.sampling-session-item .sampling-session-delete{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-height:36px;padding:6px 10px;font-size:13px;background:#fff}


/* Rotary Quick Scan: match Herringbone Compact without hiding the rotary
   arrival-window and permanent guide numbers. Only Quick Scan is affected. */
.app-rotary-compact .body-rotary-compact{
 padding:5px 9px 5px;
 overflow:hidden;
}
.rotary-sampling.rotary-compact{
 height:100%;min-height:0;max-width:none;
 padding:0;margin:0;gap:0;
}
.rotary-quick-head{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px;flex:none;margin-bottom:6px;
}
.rotary-quick-head .rotary-quick-title{
 background:#0d1b2a;color:#fff;border:0;
 min-height:49px;padding:7px 11px;
 font:800 16px "Barlow Condensed",Arial,sans-serif;
}
.rotary-quick-head .rotary-quick-title span{font-size:12px;color:#b5d4e3}
.rotary-quick-head .hh-detail-mini{height:49px;min-height:49px}
.rotary-quick-head .hh-detail-mini strong{font-size:clamp(19px,5vw,24px)}
.rotary-quick-head .hh-detail-mini small{font-size:10px;line-height:1.1}
.rotary-quick-list{
 min-height:0;flex:1 1 auto;overflow-y:auto;
 overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
 scrollbar-width:thin;
}
.rotary-group-title{
 padding:3px 4px 5px;
 color:#1d3147;
 font:800 13px/1.1 "Barlow Condensed",Arial,sans-serif;
 letter-spacing:.05em;
}
.rotary-group-title span{font-size:12px}
.rotary-compact .rotary-group{min-width:0}
.rotary-compact .animal-card{
 box-sizing:border-box;min-height:clamp(39px,5.6dvh,51px);
 margin:0 0 5px;padding:5px 9px;
 gap:6px;border-width:1.5px;border-radius:6px;
}
.rotary-compact .animal-card.next{border-width:2.5px}
.rotary-compact .animal-card .line{
 font-size:clamp(16px,4.5vw,20px);
}
.rotary-compact .animal-card .pos{width:21px;font-size:13px}
.rotary-compact .animal-card .sample-id{font-size:10px;max-width:39%}
.rotary-compact .animal-card .right-tag{font-size:11px}
.rotary-compact .rotary-linked{padding-top:4px}
.rotary-compact-scanner-input{
 position:absolute;width:1px;height:1px;
 overflow:hidden;pointer-events:none;
}
.app-rotary-compact .bottom{padding:6px 9px max(7px,env(safe-area-inset-bottom))}
.app-rotary-compact .bottom .btn{min-height:45px;font-size:13px}

/* Post-Milking shares the compact Rotary/Herringbone visual language.
   Scanning remains sequential, and its camera stays inline and uninterrupted. */
.app-post-compact .body-post-compact{padding:5px 9px 5px;overflow:hidden}
.post-compact{height:100%;min-height:0;max-width:none;padding:0;margin:0;gap:0}
.post-compact .post-quick-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:none;margin-bottom:6px}
.post-compact .post-quick-head .rotary-quick-title{background:#0d1b2a;color:#fff;border:0;min-height:49px;padding:7px 11px;font:800 16px "Barlow Condensed",Arial,sans-serif}
.post-compact .post-quick-head .rotary-quick-title span{font-size:12px;color:#b5d4e3}
.post-compact .post-quick-head .hh-detail-mini{height:49px;min-height:49px}
.post-compact .post-quick-head .hh-detail-mini strong{font-size:clamp(19px,5vw,24px)}
.post-compact .post-quick-head .hh-detail-mini small{font-size:10px;line-height:1.1}
.post-compact .rotary-quick-list{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.post-compact .post-group{min-width:0}
.post-compact .animal-card{box-sizing:border-box;min-height:clamp(39px,5.6dvh,51px);margin:0 0 5px;padding:5px 9px;gap:6px;border-width:1.5px;border-radius:6px}
.post-compact .animal-card.next{border-width:2.5px}
.post-compact .animal-card .line{font-size:clamp(16px,4.5vw,20px)}
.post-compact .animal-card .pos{width:21px;font-size:13px}
.post-compact .animal-card .sample-id{font-size:10px;max-width:39%}
.post-compact .animal-card .right-tag{font-size:11px}
.post-compact .post-linked{padding-top:4px}
.post-compact .post-quick-camera{flex:none;max-height:26dvh;min-height:90px;overflow:hidden;margin-bottom:5px}
.post-compact .post-quick-camera .quick-scan-camera{height:clamp(90px,22dvh,210px);min-height:90px}

/* Post-Parlour camera Quick Scan: compact header and rows, existing inline reader. */
.post-compact .post-compact-camera{flex:none;margin:5px 0 7px;padding:9px;background:#0e162b;border-radius:7px;min-height:0}
.post-compact .post-compact-camera .quick-scan-camera{height:clamp(170px,32dvh,290px);min-height:170px;background:#142b36}
.post-compact .post-compact-camera .quick-scan-feedback[hidden]{display:none}