:root{--accent:#ed006c;--accent-soft:#fff0f6}html[data-theme=ocean]{--accent:#1469b8;--accent-soft:#eef6ff;--bg:#f5f8fc}html[data-theme=forest]{--accent:#237349;--accent-soft:#edf8f0;--bg:#f5faf7}html[data-theme=violet]{--accent:#7542b0;--accent-soft:#f6efff;--bg:#f9f6fc}html[data-theme=amber]{--accent:#a65b00;--accent-soft:#fff5e5;--bg:#fdf9f1}html[data-theme]{--pink:var(--accent)}html[data-theme] .primary,html[data-theme] .brand-icon,html[data-theme] button:not(.secondary):not(.nav):not(.close):not(.mobile-toggle):not(.bell):not(.text-btn):not([data-remove-invoice-item]){accent-color:var(--accent)}html[data-theme] .primary,html[data-theme] button[type=submit],html[data-theme] body>main>form>button{background:var(--accent);color:#fff}html[data-theme] .nav.active,html[data-theme] .badge,html[data-theme] .stat-icon{background:var(--accent-soft);color:var(--accent)}html[data-theme] body{background:var(--bg,#fbf6f9)}html[data-theme] input,html[data-theme] select,html[data-theme] textarea{accent-color:var(--accent);outline-color:var(--accent)}body>main select,body>main textarea{display:block;width:100%;padding:12px;border:1px solid #ddcfd8;border-radius:8px;background:white;font:14px Arial;margin-top:7px}body>main details summary{cursor:pointer;font-weight:700}#employee-task-banner{margin:0 0 18px;padding:14px 18px;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft)}#employee-task-banner a{color:var(--accent);font-weight:700}#employee-task-banner p{margin:5px 0}

/* Section bars on the workspace follow the user's colour theme. */
.app main details>summary,
.app .detail details>summary,
body>main details>summary,
.app .health-section>h4,
.app .vaccine-entry>h4{
 background:var(--accent,#ed006c);color:#fff;
 border:0;border-radius:8px;padding:12px 16px;
 font-size:16px;font-weight:700;line-height:1.5;
 white-space:normal;overflow-wrap:anywhere;box-sizing:border-box;
}
.app main details>summary,
.app .detail details>summary,
body>main details>summary{cursor:pointer;list-style-position:inside;}
.app .health-section>h4,
.app .vaccine-entry>h4{display:flex;align-items:center;gap:9px;margin:0 0 16px;}
.app main details[open]>summary,
.app .detail details[open]>summary,
body>main details[open]>summary{margin-bottom:16px;}
.app main details>summary::marker,
.app .detail details>summary::marker,
body>main details>summary::marker{color:#fff;}
.app main details>summary:focus-visible,
.app .detail details>summary:focus-visible,
body>main details>summary:focus-visible{outline:3px solid var(--accent,#ed006c);outline-offset:3px;}
@media(max-width:550px){
 .app main details>summary,.app .detail details>summary,body>main details>summary,
 .app .health-section>h4,.app .vaccine-entry>h4{font-size:15px;padding:11px 13px;}
}

/* Large, temporary welcome stays in the document, with the complete video visible. */
.app .welcome-video{display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,1.8fr);gap:28px;padding:28px;align-items:center;}
.app .welcome-video-frame{width:100%;max-width:760px;justify-self:center;}
.app .welcome-video video{width:100%;height:auto;max-height:480px;object-fit:contain;}
@media(max-width:900px){.app .welcome-video{grid-template-columns:1fr;padding:18px;gap:18px;}.app .welcome-video-frame{max-width:640px;}.app .welcome-video video{max-height:380px;}}
@media(max-width:550px){.app .welcome-video video{max-height:320px;}}

/* 1.50: animal details and edits belong to the wall, not an overlay. */
.app .inline-animal-card{width:100%;margin:0 0 28px;scroll-margin-top:24px;}
.app .inline-animal-card .detail.panel{position:relative;width:100%;max-width:none;max-height:none;overflow:visible;box-sizing:border-box;padding:30px;background:var(--surface,#fff);border:1px solid var(--border,#eddfe7);border-radius:18px;box-shadow:none;}
.app .inline-animal-card .close{position:absolute;right:16px;top:16px;}
.app .inline-animal-card .detail-top{padding-right:30px;}
.app .inline-editor{scroll-margin-top:24px;}
/* Server pages use the chosen accent for section strips and link underlines. */
body:not(:has(.app))>main>section>h2{background:var(--accent,#ed006c);color:#fff;padding:13px 16px;border-radius:10px;line-height:1.4;font-weight:800;}
body:not(:has(.app))>main a:not(.button):not(.primary):not(.secondary){text-decoration:none;border-bottom:3px solid var(--accent,#ed006c);padding-bottom:4px;line-height:1.8;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
@media(max-width:600px){.app .inline-animal-card .detail.panel{padding:20px 16px;}.app .inline-animal-card .detail-data{grid-template-columns:1fr;}}