:root {
  --hp-navy: #f4f6f8;
  --hp-blue: #5f8fcf;
  --hp-bg: #08111d;
  --hp-panel: #101a2a;
  --hp-soft: #152234;
  --hp-line: rgba(255, 255, 255, .11);
  --hp-text: #f4f6f8;
  --hp-muted: #a4adba;
  --hp-warn: #d4af37;
  --hp-bad: #c85c5c;
  --hp-gold: #d4af37;
  --hp-gold-soft: rgba(212, 175, 55, .14);
  --hp-action: #4f9fd8;
  --hp-action-hover: #68b7ee;
  --hp-radius: 8px;
  --hp-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  --hp-shadow-lift: 0 12px 24px rgba(0, 0, 0, .26);
  --hp-page-start: #08111d;
  --hp-card-gradient: linear-gradient(180deg, #121e30, #0e1827);
  --hp-hero-bg: rgba(16, 26, 42, .92);
  --hp-hero-overlay: rgba(5, 12, 21, .82);
  --hp-header-bg: #0a1320;
  --hp-nav-bg: transparent;
  --hp-nav-active-bg: rgba(212, 175, 55, .13);
  --hp-nav-active-border: rgba(212, 175, 55, .58);
}

[hidden] {
  display: none !important;
}

:root[data-theme="dark"] {
  --hp-navy: #f4f6f8;
  --hp-blue: #5f8fcf;
  --hp-bg: #08111d;
  --hp-panel: #101a2a;
  --hp-soft: #152234;
  --hp-line: rgba(255, 255, 255, .11);
  --hp-text: #f4f6f8;
  --hp-muted: #a4adba;
  --hp-page-start: #08111d;
  --hp-action: #4f9fd8;
  --hp-action-hover: #68b7ee;
  --hp-card-gradient: linear-gradient(180deg, #121e30, #0e1827);
  --hp-hero-bg: rgba(16, 26, 42, .92);
  --hp-hero-overlay: rgba(5, 12, 21, .82);
  --hp-header-bg: #0a1320;
  --hp-nav-bg: transparent;
  --hp-nav-active-bg: rgba(212, 175, 55, .13);
  --hp-nav-active-border: rgba(212, 175, 55, .58);
  --hp-shadow: 0 1px 3px rgba(0, 0, 0, .26);
  --hp-shadow-lift: 0 12px 24px rgba(0, 0, 0, .28);
}

:root[data-theme="spring"] {
  --hp-gold: #b9c96a;
  --hp-gold-soft: rgba(185, 201, 106, .15);
  --hp-action: #75b99a;
  --hp-action-hover: #8bceb0;
  --hp-page-start: #0a1818;
  --hp-bg: #091417;
  --hp-panel: #102223;
  --hp-soft: #162c2a;
  --hp-card-gradient: linear-gradient(180deg, #142a2a, #0f2021);
  --hp-header-bg: #0b191a;
  --hp-nav-active-bg: rgba(185, 201, 106, .13);
  --hp-nav-active-border: rgba(185, 201, 106, .54);
}

:root[data-theme="summer"] {
  --hp-gold: #d8b852;
  --hp-gold-soft: rgba(216, 184, 82, .15);
  --hp-action: #5aa8c9;
  --hp-action-hover: #72beda;
  --hp-page-start: #081723;
  --hp-bg: #08131d;
  --hp-panel: #10202b;
  --hp-soft: #162a35;
  --hp-card-gradient: linear-gradient(180deg, #142837, #0e1d29);
  --hp-header-bg: #091722;
}

:root[data-theme="fall"] {
  --hp-gold: #d69a4b;
  --hp-gold-soft: rgba(214, 154, 75, .16);
  --hp-action: #bf7449;
  --hp-action-hover: #d98b5e;
  --hp-page-start: #1a110d;
  --hp-bg: #140e0d;
  --hp-panel: #251916;
  --hp-soft: #30201b;
  --hp-card-gradient: linear-gradient(180deg, #2b1d18, #201512);
  --hp-header-bg: #1a110f;
  --hp-nav-active-bg: rgba(214, 154, 75, .13);
  --hp-nav-active-border: rgba(214, 154, 75, .55);
}

:root[data-theme="winter"] {
  --hp-gold: #c8b96c;
  --hp-gold-soft: rgba(200, 185, 108, .14);
  --hp-action: #6b9fc8;
  --hp-action-hover: #82b5dc;
  --hp-page-start: #08131f;
  --hp-bg: #07111c;
  --hp-panel: #101c2b;
  --hp-soft: #172638;
  --hp-card-gradient: linear-gradient(180deg, #142337, #0e1929);
  --hp-header-bg: #091522;
}

:root[data-module-descriptions="off"] .hp-module-description {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 70% 4rem, rgba(95, 143, 207, .12), transparent 20rem),
    linear-gradient(180deg, var(--hp-page-start) 0, var(--hp-bg) 18rem);
  color: var(--hp-text);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 44px;
  touch-action: manipulation;
}

.hp-app-frame {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.hp-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 22px;
  padding: 22px 14px;
  border-right: 1px solid var(--hp-line);
  background: rgba(8, 17, 29, .88);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}

.hp-main-column {
  min-width: 0;
}

.hp-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 30px 8px;
  background: linear-gradient(180deg, rgba(8, 17, 29, .96), rgba(8, 17, 29, .74) 72%, rgba(8, 17, 29, 0));
}

.hp-search {
  display: flex;
  width: min(520px, 100%);
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .03);
}

.hp-search img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  opacity: .82;
}

.hp-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--hp-text);
}

.hp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-context-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp-user-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 4px 8px 4px 5px;
  background: rgba(255, 255, 255, .03);
}

.hp-user-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--hp-action);
  background: var(--hp-soft);
  font-size: 10px;
  font-weight: 900;
}

.hp-user-switcher select {
  max-width: 190px;
  border: 0;
  outline: 0;
  color: var(--hp-text);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.hp-view-toggle {
  display: flex;
  gap: 3px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 3px;
  background: rgba(255, 255, 255, .03);
}

.hp-view-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 11px;
  color: var(--hp-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.hp-view-toggle button.active {
  color: var(--hp-text);
  background: var(--hp-soft);
}

.hp-header {
  background: var(--hp-header-bg);
  color: #ffffff;
  border-bottom: 1px solid var(--hp-line);
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hp-brand {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 10px;
  color: var(--hp-text);
  text-decoration: none;
  text-align: center;
}

.hp-brand-mark {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.hp-brand-text {
  display: grid;
  gap: 1px;
}

.hp-brand-name {
  color: var(--hp-text);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.12;
}

.hp-brand-tagline {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-nav {
  display: grid;
  gap: 6px;
}

.hp-nav-button,
.hp-button {
  min-height: 40px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 9px 12px;
  background: var(--hp-soft);
  color: var(--hp-text);
  font-weight: 650;
  cursor: pointer;
}

.hp-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--hp-nav-bg);
  border-color: transparent;
  color: var(--hp-muted);
  text-align: left;
}

.hp-nav-button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .8;
}

.hp-nav-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: 1.2;
}

.hp-nav-copy small {
  overflow: hidden;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
}

.hp-nav-button.active {
  background: var(--hp-nav-active-bg);
  border-color: var(--hp-nav-active-border);
  border-left-color: var(--hp-gold);
  color: var(--hp-text);
}

.hp-nav-button:hover,
.hp-nav-button:focus {
  outline: none;
  background: rgba(255, 255, 255, .05);
  border-color: var(--hp-line);
  color: var(--hp-text);
}

.hp-nav-button.active img,
.hp-nav-button:hover img,
.hp-nav-button:focus img {
  opacity: 1;
}

.hp-button.primary {
  background: var(--hp-action);
  border-color: rgba(104, 183, 238, .78);
  color: #06111c;
}

.hp-button.primary:hover,
.hp-button.primary:focus {
  outline: none;
  background: var(--hp-action-hover);
  border-color: rgba(104, 183, 238, .95);
  box-shadow: var(--hp-shadow-lift), 0 0 0 2px rgba(104, 183, 238, .18);
}

.hp-button-with-icon,
.hp-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hp-button-with-icon img,
.hp-icon-button img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 18px;
}

.hp-button.primary img {
  filter: brightness(.12);
}

.hp-sidebar-footer {
  display: grid;
  gap: 2px;
  margin-top: auto;
  border-top: 1px solid var(--hp-line);
  padding: 14px 8px 0;
  color: var(--hp-text);
  font-size: 13px;
}

.hp-sidebar-footer small {
  color: var(--hp-muted);
}

.hp-mobile-nav-toggle {
  display: none;
}

.hp-icon-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--hp-text);
  cursor: pointer;
}

.hp-icon-button:hover,
.hp-icon-button:focus {
  outline: none;
  border-color: rgba(212, 175, 55, .42);
  background: rgba(212, 175, 55, .09);
}

.hp-icon-button.danger:hover,
.hp-icon-button.danger:focus {
  border-color: rgba(200, 92, 92, .64);
  background: rgba(200, 92, 92, .15);
}

.hp-link-button {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hp-navy);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.hp-link-button:hover,
.hp-link-button:focus {
  color: var(--hp-blue);
  text-decoration: underline;
}

.hp-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 30px 40px;
}

.hp-view {
  display: grid;
  gap: 18px;
}

.hp-view > * {
  min-width: 0;
  max-width: 100%;
}

.hp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.hp-section-header h2 {
  margin: 0;
  color: var(--hp-navy);
  font-size: 21px;
}

.hp-section-header p {
  margin: 4px 0 0;
  color: var(--hp-muted);
}

.hp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.hp-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hp-settings-grid {
  display: grid;
  gap: 16px;
}

.hp-settings-grid > * {
  min-width: 0;
  max-width: 100%;
}

.hp-settings-utility-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.25fr) minmax(260px, .75fr);
  grid-template-areas:
    "backup appearance"
    "backup audit";
  gap: 14px;
  align-items: stretch;
}

.hp-settings-backup-card {
  grid-area: backup;
  align-content: start;
}

.hp-settings-quiet-card {
  align-content: start;
  min-height: 232px;
}

.hp-settings-appearance-card {
  grid-area: appearance;
}

.hp-settings-audit-card {
  grid-area: audit;
}

.hp-settings-quiet-card p {
  margin: 0;
  color: var(--hp-muted);
}

.hp-card {
  background: var(--hp-panel);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 16px;
  box-shadow: var(--hp-shadow);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hp-card:hover,
.hp-card:focus-within,
.hp-glance-card:hover,
.hp-glance-card:focus-within,
.hp-record-row:hover,
.hp-record-row:focus-within,
.hp-contact-panel:hover,
.hp-contact-panel:focus-within,
.hp-contact-row:hover,
.hp-contact-row:focus-within,
.hp-due-line:hover,
.hp-due-line:focus-within {
  border-color: rgba(212, 175, 55, .42);
  box-shadow: var(--hp-shadow-lift), 0 0 0 2px rgba(212, 175, 55, .1);
}

.hp-module-card {
  display: grid;
  gap: 10px;
  text-align: left;
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 18px;
  background: var(--hp-card-gradient);
  color: var(--hp-text);
  cursor: pointer;
  box-shadow: var(--hp-shadow);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hp-module-card:hover,
.hp-module-card:focus {
  outline: none;
  border-color: rgba(212, 175, 55, .42);
  box-shadow: var(--hp-shadow-lift), 0 0 0 2px rgba(212, 175, 55, .11);
  transform: translateY(-1px);
}

.hp-module-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.hp-module-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.hp-module-card h3 {
  margin: 0;
  color: var(--hp-navy);
  font-size: 19px;
}

.hp-module-card p {
  margin: 0;
  color: var(--hp-muted);
}

.hp-module-meta {
  width: fit-content;
  color: var(--hp-gold);
  background: var(--hp-gold-soft);
  border: 1px solid var(--hp-line);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.hp-stat {
  position: relative;
  background: var(--hp-panel);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 14px;
  box-shadow: var(--hp-shadow);
}

.hp-stat-with-icon {
  min-height: 112px;
  padding-top: 16px;
}

.hp-stat-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.hp-stat-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.hp-stat strong {
  display: block;
  margin-top: 10px;
  color: var(--hp-navy);
  font-size: 28px;
  line-height: 1.1;
}

.hp-stat span {
  display: block;
  margin-top: 4px;
  color: var(--hp-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-status-card {
  border-left: 4px solid var(--hp-blue);
}

.hp-status-warn {
  border-left-color: var(--hp-warn);
}

.hp-click-stat {
  width: 100%;
  text-align: left;
  color: var(--hp-text);
  cursor: pointer;
}

.hp-click-stat small {
  display: block;
  margin-top: 4px;
  color: var(--hp-muted);
}

.hp-placeholder {
  display: grid;
  gap: 14px;
}

.hp-placeholder-list {
  margin: 0;
  padding-left: 18px;
  color: var(--hp-muted);
}

.hp-notice {
  background: var(--hp-soft);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 12px;
  color: var(--hp-navy);
}

.hp-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: var(--hp-hero-bg);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
}

.hp-dashboard {
  position: relative;
  display: grid;
  gap: 22px;
}

.hp-dashboard::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: min(620px, 76vw);
  aspect-ratio: 1;
  background: url("../../assets/horse-professional/brand/watermark-a-crop.svg") center / contain no-repeat;
  opacity: .07;
  transform: translateX(-50%);
  pointer-events: none;
}

.hp-dashboard > * {
  position: relative;
  z-index: 1;
}

.hp-dashboard-hero {
  --hp-banner-image: none;
  position: relative;
  display: flex;
  min-height: 180px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 34px 36px;
  background-color: var(--hp-hero-bg);
  background-image: linear-gradient(90deg, var(--hp-hero-overlay) 0%, rgba(5, 12, 21, .68) 54%, rgba(5, 12, 21, .34) 100%), var(--hp-banner-image);
  background-clip: padding-box;
  background-position: center;
  background-size: cover;
  box-shadow: var(--hp-shadow);
}

.hp-dashboard-hero[data-banner="winter"] {
  background-position: center 72%;
}

.hp-dashboard-hero[data-banner="spring"] {
  background-position: center 55%;
}

.hp-dashboard-hero[data-banner="summer"] {
  background-position: center 50%;
}

.hp-dashboard-hero[data-banner="fall"] {
  background-position: center 70%;
}

.hp-dashboard-hero[data-banner="halloween"] {
  background-position: center 46%;
}

.hp-dashboard-hero[data-banner="christmas"] {
  background-position: center 62%;
}

.hp-dashboard-hero[data-banner="fourth-of-july"] {
  background-position: center 50%;
}

.hp-dashboard-hero[data-banner="easter"] {
  background-position: center 60%;
}

.hp-dashboard-hero[data-banner="thanksgiving"] {
  background-position: center 58%;
}

.hp-dashboard-hero[data-banner="none"] {
  background-image: linear-gradient(135deg, var(--hp-panel), var(--hp-soft));
}

.hp-dashboard-hero > div {
  position: relative;
  z-index: 1;
}

.hp-dashboard-hero h2 {
  max-width: 720px;
  margin: 6px 0 0;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .58);
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: 0;
}

.hp-dashboard-hero p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .72);
  font-size: 17px;
}

.hp-dashboard-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 14px;
}

.hp-dashboard-module-card {
  min-height: 178px;
  align-content: start;
}

.hp-dashboard-module-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--hp-navy);
  font-size: 17px;
  font-weight: 700;
}

.hp-dashboard-module-heading strong {
  color: var(--hp-gold);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.hp-dashboard-module-card p {
  font-size: 13px;
}

.hp-dashboard-module-card small {
  margin-top: auto;
  color: var(--hp-blue);
  font-weight: 650;
}

.hp-dashboard-areas {
  display: grid;
  gap: 10px;
}

.hp-dashboard-areas-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px;
}

.hp-dashboard-areas-heading h3,
.hp-dashboard-areas-heading p {
  margin: 0;
}

.hp-dashboard-areas-heading p {
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-dashboard-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.hp-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hp-panel-heading h3,
.hp-at-a-glance h3 {
  margin: 0;
  color: var(--hp-navy);
  font-size: 22px;
}

.hp-panel-heading p {
  margin: 3px 0 0;
  color: var(--hp-muted);
  font-size: 14px;
}

.hp-panel-heading .hp-attention-count {
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, .035);
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-link-action {
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--hp-gold);
  cursor: pointer;
  font-weight: 650;
}

.hp-task-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--hp-line);
}

.hp-task-row {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--hp-line);
  border-radius: 0;
  padding: 15px 12px;
  background: transparent;
  color: var(--hp-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.hp-task-row:hover,
.hp-task-row:focus {
  outline: none;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 3px 0 0 rgba(212, 175, 55, .72);
}

.hp-task-row strong {
  display: block;
  color: var(--hp-text);
  font-size: 15px;
}

.hp-task-row small {
  display: block;
  margin-top: 2px;
  color: var(--hp-muted);
}

.hp-task-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--hp-muted);
}

.hp-task-urgent {
  background: var(--hp-bad);
}

.hp-task-due {
  background: var(--hp-warn);
}

.hp-task-neutral {
  background: #49c37d;
}

.hp-attention-icon {
  width: 38px;
  height: 38px;
}

.hp-at-a-glance {
  display: grid;
  gap: 16px;
}

.hp-glance-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
}

.hp-glance-strip > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  border-right: 1px solid var(--hp-line);
  padding: 4px 16px;
}

.hp-glance-strip > div:last-child {
  border-right: 0;
}

.hp-glance-strip span:not(.hp-card-icon) {
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-glance-strip strong {
  grid-column: 2;
  color: var(--hp-text);
  font-size: 26px;
  line-height: 1;
}

.hp-hero h2 {
  max-width: 720px;
  margin: 2px 0 0;
  color: var(--hp-navy);
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: 0;
}

.hp-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--hp-muted);
  font-size: 16px;
}

.hp-eyebrow,
.hp-subtle-count {
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-date-chip {
  flex: 0 0 auto;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(4, 10, 18, .52);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(5px);
  font-weight: 650;
  font-size: 13px;
}

.hp-glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.hp-glance-card {
  background: var(--hp-panel);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 15px;
  box-shadow: var(--hp-shadow);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hp-workflow-card {
  width: 100%;
  text-align: left;
  color: var(--hp-text);
  text-decoration: none;
}

button.hp-workflow-card {
  border: 1px solid var(--hp-line);
  cursor: pointer;
}

button.hp-workflow-card:hover,
button.hp-workflow-card:focus,
a.hp-workflow-card:hover,
a.hp-workflow-card:focus {
  outline: none;
  border-color: rgba(212, 175, 55, .42);
  box-shadow: var(--hp-shadow-lift), 0 0 0 2px rgba(212, 175, 55, .11);
}

.hp-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-card-title-row h3 {
  margin: 0;
}

.hp-card-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.hp-card-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.hp-glance-card .hp-card-label {
  display: block;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-glance-card strong {
  display: block;
  margin-top: 8px;
  color: var(--hp-navy);
  font-size: 18px;
}

.hp-workflow-line {
  display: block;
  margin-top: 10px;
  color: var(--hp-navy);
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
}

.hp-workflow-line-button {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.hp-workflow-line:hover,
.hp-workflow-line:focus {
  color: var(--hp-gold);
  text-decoration: underline;
}

.hp-workflow-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
}

.hp-workflow-subline .hp-workflow-line {
  display: inline-flex;
  margin-top: 0;
  font-size: 14px;
}

.hp-glance-card p {
  margin: 6px 0 0;
  color: var(--hp-muted);
  font-size: 14px;
}

.hp-glance-card small {
  display: inline-block;
  margin-top: 10px;
  color: var(--hp-blue);
  font-weight: 700;
}

.hp-small-note {
  margin: 0;
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hp-backup-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 10px;
  background: var(--hp-soft);
}

.hp-check-row {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  color: var(--hp-text);
  font-size: 13px;
  font-weight: 650;
}

.hp-check-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--hp-gold);
}

.hp-wide-card {
  grid-column: 1 / -1;
}

.hp-form-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hp-line);
}

.hp-form-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.hp-form-section h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hp-navy);
  font-size: 15px;
}

.hp-form-section h4 img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hp-settings-section {
  display: grid;
  gap: 12px;
}

.hp-settings-section-heading h3,
.hp-settings-section-heading p {
  margin: 0;
}

.hp-settings-section-heading h3 {
  color: var(--hp-navy);
  font-size: 19px;
}

.hp-settings-section-heading p {
  margin-top: 3px;
  color: var(--hp-muted);
}

.hp-contact-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hp-contact-card {
  align-content: start;
  padding: 16px;
  background: var(--hp-panel);
}

.hp-contact-card-heading,
.hp-contact-row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hp-contact-card-heading > div {
  flex: 1;
}

.hp-contact-card-heading h3,
.hp-contact-card-heading small {
  display: block;
  margin: 0;
}

.hp-contact-card-heading h3 {
  color: var(--hp-navy);
  font-size: 17px;
}

.hp-contact-card-heading small {
  color: var(--hp-muted);
}

.hp-contact-default {
  display: grid;
  gap: 5px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.hp-contact-default select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--hp-soft);
  color: var(--hp-text);
}

.hp-contact-list {
  display: grid;
  gap: 8px;
}

.hp-contact-row.is-default {
  border-color: rgba(212, 175, 55, .5);
}

.hp-default-badge {
  border: 1px solid var(--hp-nav-active-border);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--hp-gold-soft);
  color: var(--hp-gold) !important;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.hp-preference-toggle {
  width: fit-content;
  align-items: flex-start;
  margin: 4px 0 12px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 10px 12px;
  background: var(--hp-soft);
}

.hp-preference-toggle span,
.hp-preference-toggle small {
  display: block;
}

.hp-preference-toggle small {
  margin-top: 2px;
  color: var(--hp-muted);
  font-weight: 500;
}

.hp-theme-field {
  margin-top: 12px;
}

.hp-contact-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 12px;
  background: var(--hp-soft);
}

.hp-contact-panel h5 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hp-navy);
  font-size: 14px;
}

.hp-contact-panel h5 img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hp-contact-row {
  display: grid;
  gap: 3px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 10px;
  background: var(--hp-panel);
}

.hp-contact-row strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hp-navy);
}

.hp-contact-row strong img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hp-contact-row span,
.hp-contact-row small {
  color: var(--hp-muted);
}

.hp-contact-row .hp-button {
  justify-self: start;
  min-height: 36px;
  padding: 7px 10px;
}

.hp-contact-row .hp-icon-button {
  justify-self: start;
}

.hp-contact-add {
  display: grid;
  gap: 8px;
}

.hp-contact-add input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--hp-panel);
  color: var(--hp-text);
}

.hp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.hp-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-form-grid input,
.hp-form-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--hp-panel);
  color: var(--hp-text);
}

.hp-form-grid input:focus,
.hp-form-grid select:focus {
  outline: none;
  border-color: var(--hp-blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .12);
}

.hp-record-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-soft);
}

.hp-record-form[hidden] {
  display: none;
}

.hp-form-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 2px;
}

.hp-form-heading h4 {
  margin: 0;
  color: var(--hp-navy);
  font-size: 16px;
}

.hp-form-heading p {
  margin: 2px 0 0;
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-form-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.hp-form-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.hp-attachment-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-care-due-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-soft);
}

.hp-care-due-list h4 {
  margin: 0;
  color: var(--hp-navy);
}

.hp-due-line {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(120px, 1.4fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  background: var(--hp-panel);
}

.hp-empty-state-compact {
  padding: 8px;
}

.hp-field-stack {
  display: grid;
  gap: 6px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-field-stack textarea {
  width: 100%;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--hp-panel);
  color: var(--hp-text);
  resize: vertical;
}

.hp-field-stack textarea:focus {
  outline: none;
  border-color: var(--hp-blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .12);
}

.hp-action-row,
.hp-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hp-record-expander {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 12px 14px;
  background: var(--hp-soft);
  color: var(--hp-text);
  text-align: left;
}

.hp-record-expander:hover {
  border-color: var(--hp-blue);
  background: var(--hp-panel);
}

.hp-record-expander > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.hp-record-expander strong {
  color: var(--hp-navy);
  font-size: 15px;
}

.hp-record-expander small {
  color: var(--hp-muted);
}

.hp-record-expander-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hp-blue);
  font-size: 13px;
  font-weight: 700;
}

.hp-record-expander-action img {
  width: 17px;
  height: 17px;
}

.hp-care-record-actions {
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(92px, auto);
  align-items: stretch;
}

.hp-care-record-actions .hp-care-status,
.hp-care-record-actions .hp-button {
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  justify-content: center;
  white-space: nowrap;
}

.hp-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto) minmax(140px, auto);
  gap: 10px;
}

.hp-filter-field {
  display: grid;
  gap: 6px;
}

.hp-filter-field > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.hp-filter-field > span img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.hp-filter-row input,
.hp-filter-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--hp-panel);
  color: var(--hp-text);
}

.hp-filter-row input:focus,
.hp-filter-row select:focus {
  outline: none;
  border-color: var(--hp-blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .12);
}

.hp-button.danger {
  background: var(--hp-bad);
  border-color: var(--hp-bad);
  color: #ffffff;
}

.hp-list {
  display: grid;
  gap: 10px;
}

.hp-record-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--hp-line);
  border-left-width: 4px;
  border-radius: var(--hp-radius);
  background: var(--hp-panel);
}

.hp-record-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hp-record-overdue {
  border-left-color: var(--hp-bad);
}

.hp-record-due-soon {
  border-left-color: var(--hp-warn);
}

.hp-record-due-today {
  border-left-color: var(--hp-warn);
}

.hp-record-current {
  border-left-color: var(--hp-blue);
}

.hp-record-attention {
  border-left-color: var(--hp-warn);
}

.hp-record-title {
  color: var(--hp-navy);
  font-size: 17px;
  font-weight: 700;
}

.hp-record-title span {
  color: var(--hp-muted);
  font-weight: 600;
}

.hp-record-meta {
  margin-top: 4px;
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-record-row p {
  margin: 8px 0 0;
  color: var(--hp-text);
}

.hp-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.hp-detail-grid div {
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  padding: 8px;
  background: var(--hp-soft);
}

.hp-detail-grid span {
  display: block;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-detail-grid strong {
  display: block;
  margin-top: 2px;
  color: var(--hp-navy);
  font-size: 13px;
}

.hp-status-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 5px 9px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hp-record-heading .hp-care-status {
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 9px 12px;
  white-space: nowrap;
}

.hp-status-pill img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.hp-status-inventory {
  min-height: 30px;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .04);
  color: var(--hp-muted);
  text-transform: none;
}

.hp-care-status {
  min-height: 30px;
  border: 1px solid transparent;
  color: #08111d;
}

.hp-care-status.hp-pill-overdue {
  border-color: rgba(200, 92, 92, .58);
  background: #c85c5c;
}

.hp-care-status.hp-pill-due-today,
.hp-care-status.hp-pill-due-soon {
  border-color: rgba(212, 175, 55, .64);
  background: var(--hp-gold);
}

.hp-care-status.hp-pill-current {
  border-color: rgba(73, 195, 125, .56);
  background: #49c37d;
}

.hp-medical-status {
  min-height: 30px;
  border: 1px solid rgba(200, 92, 92, .42);
  background: rgba(200, 92, 92, .16);
  color: var(--hp-text);
  text-transform: none;
}

.hp-medical-status.hp-pill-overdue {
  border-color: rgba(200, 92, 92, .58);
  background: #c85c5c;
  color: #08111d;
}

.hp-medical-status.hp-pill-due-today,
.hp-medical-status.hp-pill-due-soon {
  border-color: rgba(212, 175, 55, .64);
  background: var(--hp-gold);
  color: #08111d;
}

.hp-medical-summary {
  min-height: 30px;
  border: 1px solid var(--hp-line);
  background: rgba(255, 255, 255, .04);
  color: var(--hp-muted);
  text-transform: none;
}

.hp-planned-module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hp-pill-overdue {
  background: var(--hp-bad);
}

.hp-pill-due-soon {
  background: var(--hp-warn);
}

.hp-pill-due-today {
  background: var(--hp-warn);
}

.hp-pill-current {
  background: var(--hp-blue);
}

.hp-pill-attention {
  background: var(--hp-warn);
}

.hp-empty-state {
  padding: 22px;
  border: 1px dashed var(--hp-line);
  border-radius: var(--hp-radius);
  color: var(--hp-muted);
  text-align: center;
}

.hp-empty-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-items: center;
  margin-bottom: 10px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.hp-empty-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.hp-empty-state h3 {
  margin: 0 0 6px;
  color: var(--hp-navy);
}

.hp-empty-state p {
  margin: 0;
}

/* Native Farrier and Breeding workspaces */
.hp-native-module {
  display: grid;
  gap: 16px;
}

.hp-module-stats .hp-click-stat {
  appearance: none;
  border-color: var(--hp-line);
  font-family: inherit;
}

.hp-module-stats .hp-click-stat:hover,
.hp-module-stats .hp-click-stat:focus,
.hp-module-stats .hp-click-stat.active {
  outline: none;
  border-color: rgba(212, 175, 55, .5);
  box-shadow: var(--hp-shadow-lift), 0 0 0 2px rgba(212, 175, 55, .11);
}

.hp-filter-row-two {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, auto);
}

.hp-module-form {
  border-left: 4px solid var(--hp-blue);
}

.hp-inline-workflow {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-soft);
}

.hp-module-record-actions {
  align-content: flex-start;
  justify-content: flex-end;
}

.hp-history-panel {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: var(--hp-soft);
}

.hp-history-panel h4 {
  margin: 0;
  color: var(--hp-navy);
  font-size: 14px;
}

.hp-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hp-history-heading p {
  margin: 3px 0 0;
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-history-panel h4:not(:first-child) {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hp-line);
}

.hp-history-panel > p {
  margin: 0;
  color: var(--hp-muted);
}

.hp-history-row {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--hp-line);
}

.hp-history-row:last-child {
  border-bottom: 0;
}

.hp-history-row strong {
  color: var(--hp-navy);
  font-size: 13px;
}

.hp-history-row span,
.hp-module-summary-line {
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-undo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(212, 175, 55, .48);
  border-left: 4px solid var(--hp-gold);
  border-radius: var(--hp-radius);
  padding: 12px 14px;
  background: var(--hp-panel);
  color: var(--hp-text);
  box-shadow: var(--hp-shadow);
}

.hp-undo-banner > span {
  flex: 1 1 auto;
}

.hp-print-only {
  display: none;
}

.hp-foal-chart table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
}

.hp-foal-chart th,
.hp-foal-chart td {
  border: 1px solid var(--hp-line);
  padding: 9px;
  color: var(--hp-text);
  font-size: 12px;
  text-align: left;
}

.hp-foal-chart th {
  background: var(--hp-soft);
  color: var(--hp-navy);
}

.hp-print-title h2 {
  margin: 0;
  color: var(--hp-navy);
}

.hp-print-title p {
  margin: 4px 0 0;
  color: var(--hp-muted);
}

.hp-module-summary-line {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hp-line);
  border-radius: 10px;
  background: var(--hp-soft);
}

.hp-schedule-day-card,
.hp-schedule-agenda {
  border-radius: 24px;
}

.hp-schedule-day-card {
  display: grid;
  gap: 22px;
  padding: 24px;
}

.hp-schedule-day-heading,
.hp-schedule-day-actions,
.hp-schedule-row-heading,
.hp-schedule-assignees {
  display: flex;
  align-items: center;
}

.hp-schedule-day-heading {
  justify-content: space-between;
  gap: 20px;
}

.hp-schedule-day-heading h3 {
  margin: 3px 0 5px;
  font-size: clamp(22px, 3vw, 30px);
}

.hp-schedule-day-heading p,
.hp-schedule-meta,
.hp-schedule-assignees,
.hp-schedule-notes {
  margin: 0;
  color: var(--hp-muted);
}

.hp-schedule-day-actions {
  gap: 10px;
}

.hp-schedule-date-picker {
  display: grid;
  gap: 4px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
}

.hp-schedule-date-picker input {
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--hp-text);
  background: var(--hp-soft);
}

.hp-schedule-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(76px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.hp-schedule-day {
  min-width: 76px;
  min-height: 88px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  color: var(--hp-muted);
  background: var(--hp-soft);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hp-schedule-day:hover:not(.active),
.hp-schedule-day:focus-visible:not(.active) {
  border-color: var(--hp-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hp-gold) 38%, transparent), 0 8px 20px rgba(8, 17, 29, .12);
  transform: translateY(-1px);
}

.hp-schedule-assignee-picker {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 14px;
}

.hp-schedule-assignee-picker legend {
  padding: 0 6px;
  font-weight: 700;
}

.hp-schedule-assignee-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hp-schedule-assignee-toolbar span { display: flex; gap: 8px; }
.hp-schedule-assignee-toolbar button {
  border: 0;
  padding: 4px 0;
  color: var(--hp-action);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.hp-schedule-day span,
.hp-schedule-day small,
.hp-schedule-day strong {
  display: block;
}

.hp-schedule-day strong {
  margin: 3px 0;
  color: var(--hp-text);
  font-size: 24px;
  font-weight: 600;
}

.hp-schedule-day.active {
  border-color: var(--hp-action-hover);
  color: #06111c;
  background: var(--hp-action);
  box-shadow: 0 8px 20px rgba(8, 17, 29, .16);
}

.hp-schedule-day.active strong {
  color: #06111c;
}

.hp-schedule-agenda {
  margin-top: 18px;
  padding: 24px;
}

.hp-schedule-form {
  margin: 20px 0 24px;
}

.hp-schedule-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-schedule-title-field {
  grid-column: span 2;
}

.hp-schedule-form select[multiple] {
  height: auto;
  padding: 8px;
}

.hp-schedule-form label small {
  color: var(--hp-muted);
  font-weight: 500;
}

.hp-schedule-no-assignees {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 78px;
  border: 1px dashed var(--hp-line);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--hp-muted);
  background: var(--hp-soft);
}

.hp-schedule-no-assignees strong {
  color: var(--hp-text);
  font-size: 13px;
}

.hp-schedule-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hp-schedule-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 16px;
  background: var(--hp-panel);
  transition: border-color .18s ease, background .18s ease;
}

.hp-schedule-row:hover {
  border-color: var(--hp-gold);
}

.hp-schedule-row.is-done {
  background: var(--hp-soft);
}

.hp-schedule-row.is-done .hp-schedule-row-copy > * {
  opacity: .68;
}

.hp-schedule-row.is-done .hp-schedule-row-heading strong {
  text-decoration: line-through;
}

.hp-schedule-complete {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--hp-soft);
  cursor: pointer;
}

.hp-schedule-complete img,
.hp-schedule-assignees img {
  width: 21px;
  height: 21px;
}

.hp-schedule-row-copy {
  display: grid;
  gap: 6px;
}

.hp-schedule-row-heading {
  flex-wrap: wrap;
  gap: 8px;
}

.hp-schedule-row-heading strong {
  font-size: 16px;
}

.hp-schedule-type {
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--hp-muted);
  background: var(--hp-soft);
  font-size: 11px;
  font-weight: 700;
}

.hp-schedule-assignees {
  gap: 7px;
}

.hp-schedule-notes {
  line-height: 1.55;
}

.hp-schedule-empty {
  padding: 44px 20px;
}

.hp-horse-skills-editor {
  margin: 18px 0;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 0 16px 16px;
  background: var(--hp-panel);
}

.hp-horse-skills-editor summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  cursor: pointer;
  list-style: none;
}

.hp-horse-skills-editor summary::-webkit-details-marker {
  display: none;
}

.hp-horse-skills-editor summary > img {
  width: 24px;
  height: 24px;
}

.hp-horse-skills-editor summary span,
.hp-horse-skills-editor summary strong,
.hp-horse-skills-editor summary small {
  display: block;
}

.hp-horse-skills-editor summary small {
  margin-top: 2px;
  color: var(--hp-muted);
  font-weight: 500;
}

.hp-horse-skill-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.hp-horse-skill-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, .55fr) 44px;
  align-items: end;
  gap: 10px;
  border-radius: 15px;
  padding: 12px;
  background: var(--hp-soft);
}

.hp-horse-skill-row label {
  display: grid;
  gap: 6px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
}

.hp-horse-skill-row input,
.hp-horse-skill-row select {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--hp-text);
  background: var(--hp-panel);
}

.hp-horse-skill-summary {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.hp-horse-skill-summary > span {
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hp-horse-skill-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hp-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--hp-soft);
}

.hp-skill-chip strong {
  font-size: 12px;
}

.hp-skill-chip small {
  color: var(--hp-muted);
  font-size: 11px;
}

.hp-horse-sales-profile {
  color: #182331;
  background: #fff;
}

.hp-horse-sales-identity {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 24px 0;
}

.hp-horse-sales-identity > div {
  border-bottom: 1px solid #d9dee5;
  padding: 8px 0;
}

.hp-horse-sales-identity span,
.hp-horse-sales-identity strong {
  display: block;
}

.hp-horse-sales-identity span {
  color: #637083;
  font-size: 11px;
  text-transform: uppercase;
}

.hp-horse-sales-profile table {
  width: 100%;
  border-collapse: collapse;
}

.hp-horse-sales-profile th,
.hp-horse-sales-profile td {
  border-bottom: 1px solid #d9dee5;
  padding: 10px;
  text-align: left;
}

.hp-activity-day-card,
.hp-activity-panel {
  border-radius: 24px;
  padding: 24px;
}

.hp-medical-overview,
.hp-medical-case-form,
.hp-medical-appointments,
.hp-medical-case {
  border-radius: 24px;
}

.hp-medical-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
}

.hp-medical-overview h3 {
  margin: 3px 0 5px;
  font-size: clamp(22px, 3vw, 30px);
}

.hp-medical-overview p,
.hp-medical-case-copy small,
.hp-medical-case-copy span,
.hp-medication-heading span,
.hp-medication-card > p {
  color: var(--hp-muted);
}

.hp-medical-overview p {
  margin: 0;
}

.hp-medical-case-form,
.hp-medical-appointments {
  margin-top: 18px;
  padding: 24px;
}

.hp-medical-view-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 6px;
  background: color-mix(in srgb, var(--hp-panel) 88%, var(--hp-soft));
}

.hp-medical-view-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 8px 12px;
  color: var(--hp-muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.hp-medical-view-nav button:hover,
.hp-medical-view-nav button:focus-visible {
  border-color: var(--hp-gold);
  color: var(--hp-text);
}

.hp-medical-view-nav button.active {
  border-color: var(--hp-line);
  color: var(--hp-text);
  background: var(--hp-panel);
  box-shadow: 0 7px 18px rgba(6, 17, 28, .08);
}

.hp-medical-view-nav small {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0 6px;
  color: var(--hp-text);
  background: var(--hp-soft);
  font-size: 11px;
}

.hp-medical-cases {
  margin-top: 18px;
}

.hp-medical-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.hp-medical-section-heading h3,
.hp-medical-section-heading p {
  margin: 0;
}

.hp-medical-section-heading p {
  margin-top: 4px;
  color: var(--hp-muted);
  font-size: 13px;
}

.hp-medical-inline-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  margin-top: 16px;
  border: 1px dashed var(--hp-line);
  border-radius: 15px;
  padding: 14px 16px;
  color: var(--hp-muted);
  background: var(--hp-soft);
}

.hp-medical-case-list > .hp-medical-inline-empty {
  margin-top: 0;
}

.hp-medical-inline-empty img {
  width: 22px;
  height: 22px;
}

.hp-medical-appointment-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.hp-medical-appointment-strip > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--hp-line);
  border-radius: 15px;
  padding: 13px;
  background: var(--hp-soft);
}

.hp-medical-appointment-strip span {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-medical-case-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

details.hp-medical-case {
  padding: 0;
  overflow: hidden;
}

.hp-medical-case > summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.hp-medical-case > summary::-webkit-details-marker {
  display: none;
}

.hp-medical-case:hover,
.hp-medical-case:focus-within {
  border-color: var(--hp-gold);
}

.hp-medical-case-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--hp-soft);
}

.hp-medical-case-icon img {
  width: 25px;
  height: 25px;
}

.hp-medical-case-copy {
  display: grid;
  gap: 2px;
}

.hp-medical-case-copy strong {
  font-size: 17px;
}

.hp-medical-case-copy small {
  margin-top: 3px;
}

.hp-medical-case-body {
  border-top: 1px solid var(--hp-line);
  padding: 20px;
  background: color-mix(in srgb, var(--hp-soft) 55%, var(--hp-panel));
}

.hp-medical-case-notes {
  margin: 0 0 16px;
  color: var(--hp-muted);
}

.hp-medical-case-actions {
  margin-bottom: 16px;
}

.hp-medical-more-actions {
  position: relative;
}

.hp-medical-more-actions > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--hp-muted);
  background: var(--hp-panel);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.hp-medical-more-actions > summary::-webkit-details-marker {
  display: none;
}

.hp-medical-more-actions > summary:hover,
.hp-medical-more-actions > summary:focus-visible {
  border-color: var(--hp-gold);
  color: var(--hp-text);
}

.hp-medical-more-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.hp-medication-form {
  margin: 16px 0;
}

.hp-medication-list {
  display: grid;
  gap: 12px;
}

.hp-medication-card {
  display: grid;
  gap: 13px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 16px;
  background: var(--hp-panel);
}

.hp-medication-card.is-completed {
  opacity: .72;
}

.hp-medical-case .hp-pill-attention,
.hp-medication-card .hp-pill-attention {
  color: #06111c;
}

.hp-medical-case .hp-pill-attention img,
.hp-medication-card .hp-pill-attention img {
  filter: brightness(.12);
}

.hp-medication-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hp-medication-heading > div {
  display: grid;
  gap: 3px;
}

.hp-medication-heading strong {
  font-size: 16px;
}

.hp-medication-meta,
.hp-medication-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.hp-medication-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-medication-meta img {
  width: 17px;
  height: 17px;
}

.hp-medication-times span {
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--hp-soft);
  font-size: 12px;
  font-weight: 700;
}

.hp-medication-log-time {
  display: grid;
  gap: 4px;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 700;
}

.hp-medication-log-time select {
  min-height: 44px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--hp-text);
  background: var(--hp-soft);
}

.hp-button.hp-button-quiet {
  border-color: transparent;
  color: var(--hp-muted);
  background: transparent;
}

.hp-medication-history {
  border-top: 1px solid var(--hp-line);
  padding-top: 10px;
}

.hp-medication-history summary {
  color: var(--hp-action);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.hp-medication-history p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 9px 0 0;
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-activity-day-heading,
.hp-activity-controls {
  display: flex;
  align-items: center;
}

.hp-activity-day-heading {
  justify-content: space-between;
  gap: 20px;
}

.hp-activity-day-heading h3 {
  margin: 3px 0 5px;
  font-size: clamp(22px, 3vw, 30px);
}

.hp-activity-day-heading p {
  margin: 0;
  color: var(--hp-muted);
}

.hp-activity-controls {
  gap: 8px;
}

.hp-activity-filter-row {
  grid-template-columns: minmax(180px, .6fr) minmax(220px, 1fr);
  margin-top: 22px;
}

.hp-activity-panel {
  margin-top: 18px;
}

.hp-activity-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hp-activity-stack {
  overflow: hidden;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  background: var(--hp-panel);
}

.hp-activity-stack > summary {
  display: grid;
  grid-template-columns: 46px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.hp-activity-stack-priority > summary { grid-template-columns: 44px minmax(0, 1fr) auto; }
.hp-activity-stack > summary::-webkit-details-marker { display: none; }
.hp-activity-stack:hover, .hp-activity-stack:focus-within { border-color: var(--hp-gold); }
.hp-activity-stack-body { display: grid; gap: 8px; border-top: 1px solid var(--hp-line); padding: 10px; background: var(--hp-soft); }
.hp-activity-stack-body .hp-activity-entry { background: var(--hp-panel); }

.hp-medical-work-list,
.hp-diet-safety-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.hp-medical-work {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--hp-soft) 72%, var(--hp-panel));
}

.hp-medical-work-date {
  display: grid;
  gap: 2px;
  border-right: 1px solid var(--hp-line);
  padding-right: 14px;
}

.hp-medical-work-date strong { font-size: 13px; }
.hp-medical-work-date span,
.hp-medical-work-copy small { color: var(--hp-muted); font-size: 12px; }
.hp-medical-work-copy { display: grid; gap: 4px; min-width: 0; }
.hp-medical-work-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.hp-medical-work-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-medical-kind { color: var(--hp-action); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hp-medical-work .hp-status-pill { min-height: 24px; padding: 3px 8px; font-size: 10px; }
.hp-medical-row-actions { display: flex; align-items: center; gap: 6px; }
.hp-medical-record-notes { color: var(--hp-muted); font-size: 12px; }
.hp-medical-record-notes summary { width: max-content; color: var(--hp-action); font-weight: 800; cursor: pointer; }
.hp-medical-record-notes p { margin: 6px 0 0; line-height: 1.5; }
.hp-medical-work.is-completed { opacity: .7; }
.hp-diet-safety { margin-top: 18px; }
.hp-diet-safety .hp-panel-heading { align-items: end; }
.hp-diet-safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-diet-safety-grid > div { border: 1px solid var(--hp-line); border-radius: 16px; padding: 16px; background: var(--hp-soft); }
.hp-diet-safety-grid > div > span { color: var(--hp-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.hp-diet-safety-grid article { margin-top: 12px; }
.hp-diet-safety-grid article p { margin: 4px 0 0; line-height: 1.55; }
.hp-diet-medical-note { border-color: color-mix(in srgb, var(--hp-gold) 55%, var(--hp-line)) !important; }
.hp-diet-medical-note > small { display: block; margin-top: 14px; color: var(--hp-action); font-weight: 700; }

@media (max-width: 720px) {
  .hp-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-nav-button { min-height: 44px; gap: 8px; font-size: 12px; }
  .hp-brand-name { font-size: 15px; }
  .hp-brand-tagline { font-size: 10px; }
  .hp-diet-safety-grid { grid-template-columns: 1fr; }
  .hp-medical-view-nav button { flex-direction: column; gap: 4px; padding-inline: 5px; font-size: 12px; text-align: center; }
  .hp-medical-view-nav small { height: 20px; min-width: 20px; }
  .hp-medical-section-heading { align-items: flex-start; }
  .hp-medical-work { grid-template-columns: 1fr; align-items: flex-start; }
  .hp-medical-work-date { width: 100%; border-right: 0; border-bottom: 1px solid var(--hp-line); padding: 0 0 9px; }
  .hp-medical-work-copy > strong { white-space: normal; }
  .hp-medical-row-actions { width: 100%; }
}

.hp-activity-entry {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 16px;
  background: var(--hp-panel);
}

details.hp-activity-entry {
  display: block;
  padding: 0;
}

.hp-activity-entry > summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.hp-activity-entry > summary::-webkit-details-marker {
  display: none;
}

.hp-activity-entry:hover,
.hp-activity-entry:focus-within {
  border-color: var(--hp-gold);
}

.hp-activity-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--hp-soft);
}

.hp-activity-icon img {
  width: 23px;
  height: 23px;
}

.hp-activity-copy {
  display: grid;
  gap: 4px;
}

.hp-activity-copy strong {
  line-height: 1.35;
}

.hp-activity-copy small {
  color: var(--hp-muted);
}

.hp-activity-sync {
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--hp-muted);
  background: var(--hp-soft);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hp-activity-sync-synced {
  color: #8cc8aa;
}

.hp-activity-sync-conflict {
  color: #ef9a9a;
}

.hp-activity-expand {
  color: var(--hp-action);
  font-size: 12px;
  font-weight: 800;
}

.hp-activity-entry[open] .hp-activity-expand {
  color: var(--hp-muted);
}

.hp-activity-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  border-top: 1px solid var(--hp-line);
  padding: 16px 16px 18px 76px;
  background: var(--hp-soft);
}

.hp-activity-details span {
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hp-activity-details p {
  margin: 4px 0 0;
  line-height: 1.5;
}

.hp-activity-empty {
  padding: 48px 20px;
}

.hp-diet-overview,
.hp-diet-form,
.hp-diet-groups,
details.hp-diet-plan {
  border-radius: 24px;
}

.hp-diet-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
}

.hp-diet-overview h3 {
  margin: 3px 0 5px;
  font-size: clamp(22px, 3vw, 30px);
}

.hp-diet-overview p,
.hp-diet-items-heading small,
.hp-diet-group-strip p,
.hp-diet-plan summary small,
.hp-diet-medicine-flag small,
.hp-diet-notes {
  color: var(--hp-muted);
}

.hp-diet-overview p,
.hp-diet-group-strip p,
.hp-diet-notes {
  margin: 0;
}

.hp-diet-form,
.hp-diet-groups {
  margin-top: 18px;
  padding: 24px;
}

.hp-diet-form select[multiple] {
  min-height: 116px;
  padding: 8px;
}

.hp-diet-form label small {
  color: var(--hp-muted);
  font-weight: 500;
}

.hp-diet-items-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 10px;
}

.hp-diet-items-heading > div,
.hp-diet-item-list {
  display: grid;
  gap: 5px;
}

.hp-diet-item-row {
  display: grid;
  grid-template-columns: minmax(120px, .5fr) minmax(180px, 1fr) minmax(150px, .7fr) 44px;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 12px;
  background: var(--hp-soft);
}

.hp-diet-item-row label {
  display: grid;
  gap: 6px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 700;
}

.hp-diet-item-row input,
.hp-diet-item-row select,
.hp-diet-log-time select {
  min-height: 44px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--hp-text);
  background: var(--hp-panel);
}

.hp-diet-group-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.hp-diet-group-strip article {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 142px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 16px;
  background: var(--hp-soft);
}

.hp-diet-group-strip article > div:first-child {
  display: grid;
  gap: 3px;
  padding-right: 72px;
}

.hp-diet-group-strip article > div:first-child span {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-diet-group-strip .hp-module-record-actions {
  position: absolute;
  top: 10px;
  right: 10px;
}

.hp-diet-plan-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

details.hp-diet-plan {
  padding: 0;
  overflow: hidden;
}

.hp-diet-plan > summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.hp-diet-plan > summary::-webkit-details-marker {
  display: none;
}

.hp-diet-plan:hover,
.hp-diet-plan:focus-within {
  border-color: var(--hp-gold);
}

.hp-diet-plan-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--hp-soft);
}

.hp-diet-plan-icon img {
  width: 25px;
  height: 25px;
}

.hp-diet-plan > summary > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.hp-diet-plan-body {
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--hp-line);
  padding: 20px;
  background: color-mix(in srgb, var(--hp-soft) 55%, var(--hp-panel));
}

.hp-diet-medicine-flag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--hp-gold) 55%, var(--hp-line));
  border-radius: 16px;
  padding: 13px;
  color: var(--hp-text);
  background: color-mix(in srgb, var(--hp-gold) 9%, var(--hp-panel));
  text-align: left;
  cursor: pointer;
}

.hp-diet-medicine-flag > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--hp-soft);
}

.hp-diet-medicine-flag img {
  width: 21px;
  height: 21px;
}

.hp-diet-medicine-flag > span:last-child {
  display: grid;
  gap: 3px;
}

.hp-diet-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hp-diet-detail-grid > div {
  border: 1px solid var(--hp-line);
  border-radius: 15px;
  padding: 13px;
  background: var(--hp-panel);
}

.hp-diet-detail-grid span {
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hp-diet-detail-grid p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.hp-diet-component-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.hp-diet-component-list > div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--hp-line);
  border-radius: 15px;
  padding: 13px;
  background: var(--hp-panel);
}

.hp-diet-component-list span,
.hp-diet-component-list small {
  color: var(--hp-muted);
  font-size: 11px;
}

.hp-diet-component-list span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hp-diet-log-time {
  display: grid;
  gap: 4px;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 700;
}

.hp-message-overview,
.hp-message-form,
.hp-message-post,
.hp-message-archive {
  border-radius: 24px;
}

.hp-message-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
}

.hp-message-overview h3 {
  margin: 3px 0 5px;
  font-size: clamp(22px, 3vw, 30px);
}

.hp-message-overview p,
.hp-message-post header small,
.hp-message-response-summary,
.hp-message-carried {
  color: var(--hp-muted);
}

.hp-message-overview p,
.hp-message-body,
.hp-message-comments p {
  margin: 0;
}

.hp-message-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.hp-segmented-control {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  padding: 4px;
  background: var(--hp-panel);
}

.hp-segmented-control button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  color: var(--hp-muted);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.hp-segmented-control button.active {
  color: var(--hp-text);
  background: var(--hp-soft);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.hp-message-rollover,
.hp-message-archive-controls label {
  display: grid;
  gap: 5px;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 800;
}

.hp-message-rollover {
  grid-template-columns: auto 112px;
  align-items: center;
}

.hp-message-rollover input,
.hp-message-archive-controls input,
.hp-message-archive-controls select,
.hp-message-actions form input {
  min-height: 44px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 11px;
  color: var(--hp-text);
  background: var(--hp-panel);
}

.hp-message-form {
  margin-top: 18px;
  padding: 24px;
}

.hp-message-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.hp-message-options .hp-check-row {
  width: auto;
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  padding: 11px 14px;
  background: var(--hp-soft);
}

.hp-message-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.hp-message-post {
  display: grid;
  gap: 15px;
  padding: 20px;
}

.hp-message-post.is-urgent {
  border-color: color-mix(in srgb, #dc6e72 62%, var(--hp-line));
  box-shadow: inset 4px 0 0 #dc6e72;
}

.hp-message-post.is-pinned {
  background: color-mix(in srgb, var(--hp-gold) 5%, var(--hp-panel));
}

.hp-message-post > header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.hp-message-post > header > div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.hp-message-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--hp-action);
  background: var(--hp-soft);
  font-size: 12px;
  font-weight: 900;
}

.hp-message-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.hp-message-badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--hp-muted);
  background: var(--hp-soft);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hp-message-badges span.urgent {
  color: #f4b5b7;
}

.hp-message-badges img {
  width: 14px;
  height: 14px;
}

.hp-message-body {
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.55;
}

.hp-message-carried {
  display: block;
}

.hp-message-response-summary {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--hp-line);
  padding-top: 11px;
  font-size: 12px;
}

.hp-message-comments {
  display: grid;
  gap: 8px;
}

.hp-message-comments > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border-radius: 14px;
  padding: 11px 13px;
  background: var(--hp-soft);
}

.hp-message-comments p {
  line-height: 1.45;
}

.hp-message-comments small {
  color: var(--hp-muted);
  white-space: nowrap;
}

.hp-message-actions {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.hp-message-actions form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.hp-message-actions .is-acknowledged {
  color: #9ed7b9;
  border-color: color-mix(in srgb, #62b88d 45%, var(--hp-line));
}

.hp-message-archive {
  margin-top: 18px;
  padding: 24px;
}

.hp-message-archive > .hp-message-list {
  margin-top: 20px;
}

.hp-message-archive-controls {
  display: grid;
  grid-template-columns: minmax(180px, .5fr) minmax(240px, 1fr);
  gap: 12px;
}

.hp-message-empty {
  min-height: 180px;
}

.hp-access-hidden {
  display: none !important;
}

.hp-access-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--hp-action) 35%, var(--hp-line));
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--hp-action) 6%, var(--hp-panel));
}

.hp-access-notice span {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-access-principles,
.hp-access-form,
.hp-access-team {
  border-radius: 24px;
  padding: 24px;
}

.hp-access-principles {
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr);
  gap: 24px;
}

.hp-access-principles h3 {
  margin: 4px 0;
  font-size: clamp(22px, 3vw, 30px);
}

.hp-access-principles p,
.hp-access-principle-grid span,
.hp-access-user-copy p,
.hp-access-matrix-heading p,
.hp-settings-team-summary span {
  margin: 0;
  color: var(--hp-muted);
}

.hp-access-principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hp-access-principle-grid > div {
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 14px;
  background: var(--hp-soft);
}

.hp-access-principle-grid span {
  font-size: 12px;
  line-height: 1.45;
}

.hp-access-form,
.hp-access-team {
  margin-top: 18px;
}

.hp-access-full-toggle {
  margin-top: 16px;
  border: 1px solid var(--hp-line);
  border-radius: 15px;
  padding: 13px;
  background: var(--hp-soft);
}

.hp-access-full-toggle span {
  display: grid;
  gap: 3px;
}

.hp-access-full-toggle small {
  color: var(--hp-muted);
}

.hp-access-matrix-heading {
  margin: 22px 0 10px;
}

.hp-access-matrix-heading h4 {
  margin: 0 0 3px;
}

.hp-access-matrix {
  overflow: hidden;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
}

.hp-access-matrix-header,
.hp-access-matrix-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, .7fr) 100px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}

.hp-access-matrix-header {
  color: var(--hp-muted);
  background: var(--hp-soft);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hp-access-matrix-row + .hp-access-matrix-row {
  border-top: 1px solid var(--hp-line);
}

.hp-access-matrix-row select {
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 11px;
  padding: 0 9px;
  color: var(--hp-text);
  background: var(--hp-soft);
}

.hp-access-matrix-row label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 800;
}

.hp-access-user-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hp-access-user-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  padding: 15px;
  background: var(--hp-panel);
}

.hp-access-user-card.is-inactive {
  opacity: .62;
}

.hp-access-user-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: var(--hp-action);
  background: var(--hp-soft);
  font-size: 12px;
  font-weight: 900;
}

.hp-access-user-copy,
.hp-access-user-copy > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.hp-access-user-copy {
  display: grid;
  gap: 6px;
}

.hp-access-focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hp-access-focus-chips span {
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--hp-muted);
  background: var(--hp-soft);
  font-size: 10px;
  font-weight: 800;
}

.hp-settings-team-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--hp-line);
  margin-top: 16px;
  padding-top: 16px;
}

/* Calm-density pass: summaries first, details on demand. */
@media (min-width: 1101px) {
  .hp-view > .hp-section-header [data-navigate="dashboard"] { display: none; }
}

.hp-dashboard { gap: 16px; }
.hp-dashboard-hero { min-height: 132px; padding: 24px 28px; }
.hp-dashboard-hero h2 { font-size: 34px; }
.hp-dashboard-hero p { margin-top: 6px; font-size: 14px; }
.hp-dashboard-modules { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 8px; }
.hp-dashboard-module-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; min-height: 76px; gap: 4px 10px; padding: 11px 12px; }
.hp-dashboard-module-card .hp-module-icon { grid-row: 1 / span 2; width: 34px; height: 34px; margin: 0; }
.hp-dashboard-module-card .hp-module-icon img { width: 21px; height: 21px; }
.hp-dashboard-module-heading { font-size: 14px; }
.hp-dashboard-module-heading strong { font-size: 18px; }
.hp-dashboard-module-card small { grid-column: 2; margin: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hp-at-a-glance { padding-block: 16px; }
.hp-at-a-glance > h3 { font-size: 16px; }

.hp-module-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-module-stats .hp-click-stat { display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; align-items: center; width: auto; min-width: 128px; min-height: 64px; padding: 8px 12px; }
.hp-module-stats .hp-stat-icon { grid-row: 1 / span 2; width: 28px; height: 28px; margin-right: 9px; }
.hp-module-stats .hp-stat-icon img { width: 18px; height: 18px; }
.hp-module-stats .hp-click-stat strong { margin: 0; font-size: 18px; line-height: 1; }
.hp-module-stats .hp-click-stat > span:last-child { margin: 2px 0 0; font-size: 9px; }

.hp-record-disclosure { margin-top: 8px; }
.hp-record-disclosure > summary,
.hp-form-disclosure > summary,
.hp-access-help > summary,
.hp-access-focus-details > summary,
.hp-schedule-completed > summary,
.hp-row-more > summary,
.hp-reaction-picker > summary {
  width: max-content;
  color: var(--hp-action);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.hp-record-disclosure > summary::-webkit-details-marker,
.hp-form-disclosure > summary::-webkit-details-marker,
.hp-access-help > summary::-webkit-details-marker,
.hp-access-focus-details > summary::-webkit-details-marker,
.hp-schedule-completed > summary::-webkit-details-marker,
.hp-row-more > summary::-webkit-details-marker,
.hp-reaction-picker > summary::-webkit-details-marker { display: none; }
.hp-record-disclosure > summary::before,
.hp-form-disclosure > summary::before,
.hp-access-help > summary::before,
.hp-access-focus-details > summary::before { content: "›"; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.hp-record-disclosure[open] > summary::before,
.hp-form-disclosure[open] > summary::before,
.hp-access-help[open] > summary::before,
.hp-access-focus-details[open] > summary::before { transform: rotate(90deg); }
.hp-record-disclosure > div { margin-top: 10px; }

.hp-row-more { position: relative; }
.hp-row-more > summary { display: inline-flex; align-items: center; min-height: 38px; border: 1px solid var(--hp-line); border-radius: 10px; padding: 0 11px; color: var(--hp-muted); background: var(--hp-soft); }
.hp-row-more > div { position: absolute; z-index: 5; right: 0; display: grid; min-width: 150px; gap: 6px; margin-top: 6px; border: 1px solid var(--hp-line); border-radius: 12px; padding: 8px; background: var(--hp-panel); box-shadow: var(--hp-shadow-lift); }
.hp-row-more > div .hp-button { width: 100%; text-align: left; }

.hp-form-disclosure { border: 1px solid var(--hp-line); border-radius: 14px; padding: 0 !important; overflow: hidden; background: var(--hp-soft); }
.hp-form-disclosure > summary { display: flex; align-items: center; width: auto; min-height: 52px; gap: 8px; padding: 0 14px; color: var(--hp-text); font-size: 14px; }
.hp-form-disclosure > summary img { width: 20px; height: 20px; }
.hp-form-section-body { display: grid; gap: 12px; border-top: 1px solid var(--hp-line); padding: 14px; }

.hp-schedule-completed { border-top: 1px solid var(--hp-line); margin-top: 6px; padding-top: 10px; }
.hp-schedule-completed > summary { display: flex; align-items: center; justify-content: space-between; width: auto; min-height: 42px; color: var(--hp-muted); }
.hp-schedule-completed > summary small { border-radius: 999px; padding: 4px 8px; background: var(--hp-soft); }
.hp-schedule-completed > div { display: grid; gap: 8px; margin-top: 8px; }

.hp-message-compose-launch { display: flex; justify-content: flex-end; border-bottom: 1px solid var(--hp-line); padding: 12px 18px; }
.hp-reaction-picker { display: inline-block; }
.hp-reaction-picker > summary { min-height: 30px; border: 1px solid var(--hp-line); border-radius: 999px; padding: 6px 10px; color: var(--hp-muted); }
.hp-reaction-picker > div { display: flex; gap: 4px; margin-top: 6px; }
.hp-message-thread { margin-top: 8px; }
.hp-message-thread > summary { width: max-content; color: var(--hp-action); font-size: 12px; font-weight: 800; cursor: pointer; }
.hp-message-thread .hp-message-comments { margin-top: 8px; }
.hp-message-actions { align-items: center; }
.hp-message-reply { margin-left: auto; }
.hp-message-reply > div { min-width: min(430px, calc(100vw - 64px)); }
.hp-message-reply form { display: flex; gap: 8px; }
.hp-message-reply form input { flex: 1; min-width: 0; }
.hp-message-reply .hp-module-record-actions { justify-content: flex-end; border-top: 1px solid var(--hp-line); margin-top: 8px; padding-top: 8px; }

.hp-settings-nav { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--hp-line); border-radius: 16px; padding: 6px; background: var(--hp-panel); }
.hp-settings-nav button { flex: 1 1 120px; min-height: 42px; border: 1px solid transparent; border-radius: 11px; padding: 7px 11px; color: var(--hp-muted); background: transparent; font-weight: 800; }
.hp-settings-nav button.active { border-color: var(--hp-line); color: var(--hp-text); background: var(--hp-soft); }
.hp-settings-grid > [data-settings-section] { display: none; }
.hp-settings-view-ranch > [data-settings-section="ranch"],
.hp-settings-view-shared > [data-settings-section="shared"],
.hp-settings-view-contacts > [data-settings-section="contacts"],
.hp-settings-view-alerts > [data-settings-section="alerts"],
.hp-settings-view-team > [data-settings-section="team"],
.hp-settings-view-tools > [data-settings-section="tools"] { display: grid; }
.hp-settings-audit-card { display: none !important; }
.hp-canonical-card { display: grid; gap: 18px; }
.hp-canonical-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hp-canonical-form { display: grid; align-content: start; gap: 12px; border: 1px solid var(--hp-line); border-radius: 14px; padding: 16px; background: var(--hp-soft); }
.hp-canonical-form label { display: grid; gap: 6px; }
.hp-canonical-form input,
.hp-canonical-form select,
.hp-canonical-card > label select { width: 100%; min-height: 44px; border: 1px solid var(--hp-line); border-radius: 11px; padding: 0 12px; color: var(--hp-text); background: var(--hp-panel); }
.hp-canonical-ranch-heading, .hp-canonical-account { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hp-canonical-ranch-heading h3 { margin: 3px 0; }
.hp-canonical-account { border-block: 1px solid var(--hp-line); padding-block: 12px; }
.hp-canonical-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--hp-line); border-radius: 14px; }
.hp-canonical-counts > div { display: grid; gap: 3px; padding: 14px; }
.hp-canonical-counts > div + div { border-left: 1px solid var(--hp-line); }
.hp-canonical-counts strong { font-size: 24px; }
.hp-canonical-counts span { color: var(--hp-muted); font-size: 12px; }
.hp-canonical-notice { border: 1px solid color-mix(in srgb, var(--hp-action) 35%, var(--hp-line)); border-radius: 12px; padding: 11px 13px; color: var(--hp-text); background: color-mix(in srgb, var(--hp-action) 10%, transparent); }
.hp-canonical-notice.is-error { border-color: color-mix(in srgb, var(--hp-danger) 42%, var(--hp-line)); background: color-mix(in srgb, var(--hp-danger) 10%, transparent); }
.hp-canonical-invite { margin-top: 4px; }
.hp-canonical-team { margin-top: 4px; }
.hp-canonical-person { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hp-line); }
.hp-canonical-person:last-child { border-bottom: 0; }
.hp-canonical-person > div { display: grid; gap: 2px; min-width: 0; }
.hp-canonical-person small { color: var(--hp-muted); overflow-wrap: anywhere; }
.hp-canonical-person.is-pending { opacity: .82; }
.hp-canonical-area { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); align-items: center; gap: 16px; border-top: 1px solid var(--hp-line); padding-top: 18px; }
.hp-canonical-area h4 { margin: 3px 0; }
.hp-canonical-area p { margin: 0; color: var(--hp-muted); }
.hp-hosted-locked { overflow: hidden; }
.hp-hosted-locked .hp-app-frame { visibility: hidden; }
.hp-hosted-access { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: auto; padding: 28px; background: radial-gradient(circle at top, color-mix(in srgb, var(--hp-action) 13%, transparent), transparent 42%), var(--hp-bg); }
.hp-hosted-access[hidden] { display: none; }
.hp-hosted-access-card { width: min(720px, 100%); display: grid; gap: 18px; border: 1px solid var(--hp-line); border-radius: 22px; padding: clamp(24px, 5vw, 44px); background: var(--hp-panel); box-shadow: var(--hp-shadow); }
.hp-hosted-access-card > img { width: 62px; height: 62px; object-fit: contain; }
.hp-hosted-access-card h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); }
.hp-hosted-access-card > p { margin: 0; color: var(--hp-muted); }
.hp-access-principles { align-items: start; }
.hp-access-help { min-width: min(540px, 100%); }
.hp-access-help > summary { margin-left: auto; }
.hp-access-help .hp-access-principle-grid { margin-top: 12px; }
.hp-access-focus-details { margin-top: 2px; }
.hp-access-focus-details .hp-access-focus-chips { margin-top: 7px; }

@media (max-width: 1100px) {
  .hp-app-frame {
    grid-template-columns: 1fr;
  }

  .hp-sidebar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--hp-line);
  }

  .hp-brand {
    display: inline-flex;
    justify-items: start;
    align-self: start;
    text-align: left;
  }

  .hp-brand-mark {
    width: 44px;
    height: 44px;
  }

  .hp-mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 104px;
    min-height: 42px;
    border: 1px solid var(--hp-line);
    border-radius: 11px;
    padding: 0 12px;
    color: var(--hp-text);
    background: var(--hp-soft);
    font-weight: 800;
  }

  .hp-nav {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 6px;
    padding-top: 4px;
  }

  .hp-sidebar.is-nav-open .hp-nav { display: grid; }

  .hp-nav-button {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
  }

  .hp-nav-copy small {
    display: none;
  }

  .hp-topbar {
    flex-wrap: wrap;
  }

  .hp-context-controls {
    flex-wrap: wrap;
  }

  .hp-sidebar-footer {
    display: none;
  }

  .hp-settings-utility-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "backup"
      "appearance"
      "audit";
  }

  .hp-contact-card-grid {
    grid-template-columns: 1fr;
  }

  .hp-settings-utility-grid > .hp-card {
    min-height: 0;
  }

  .hp-glance-strip {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px 0;
  }

  .hp-glance-strip > div:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 720px) {
  .hp-context-controls,
  .hp-user-switcher,
  .hp-user-switcher select,
  .hp-view-toggle {
    width: 100%;
  }

  .hp-view-toggle button {
    flex: 1;
  }

  .hp-access-notice,
  .hp-access-principles,
  .hp-access-principle-grid,
  .hp-access-user-card,
  .hp-settings-team-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hp-access-principles,
  .hp-access-form,
  .hp-access-team {
    border-radius: 20px;
    padding: 18px;
  }

  .hp-access-matrix {
    border: 0;
    overflow: visible;
  }

  .hp-access-matrix-header {
    display: none;
  }

  .hp-access-matrix-row {
    grid-template-columns: 1fr;
    border: 1px solid var(--hp-line);
    border-radius: 15px;
    margin-bottom: 8px;
    background: var(--hp-panel);
  }

  .hp-access-user-card .hp-module-record-actions {
    justify-content: flex-start;
  }

  .hp-message-overview,
  .hp-message-toolbar {
    display: grid;
    align-items: stretch;
  }

  .hp-message-overview,
  .hp-message-form,
  .hp-message-post,
  .hp-message-archive {
    border-radius: 20px;
    padding: 18px;
  }

  .hp-segmented-control,
  .hp-segmented-control button {
    width: 100%;
  }

  .hp-message-rollover {
    grid-template-columns: minmax(0, 1fr) 120px;
  }

  .hp-message-post > header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .hp-message-badges {
    grid-column: 2;
    justify-content: flex-start;
  }

  .hp-message-comments > div,
  .hp-message-actions,
  .hp-message-archive-controls {
    grid-template-columns: 1fr;
  }

  .hp-message-comments small {
    white-space: normal;
  }

  .hp-message-actions form {
    grid-template-columns: 1fr;
  }

  .hp-diet-overview,
  .hp-diet-items-heading {
    display: grid;
    align-items: stretch;
  }

  .hp-diet-overview,
  .hp-diet-form,
  .hp-diet-groups {
    border-radius: 20px;
    padding: 18px;
  }

  .hp-diet-item-row {
    grid-template-columns: 1fr 44px;
  }

  .hp-diet-item-row label {
    grid-column: 1 / -1;
  }

  .hp-diet-item-row .hp-icon-button {
    grid-column: 2;
  }

  .hp-diet-plan > summary {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .hp-diet-plan > summary .hp-status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .hp-diet-plan-body {
    padding: 16px;
  }

  .hp-diet-detail-grid {
    grid-template-columns: 1fr;
  }

  .hp-medical-overview,
  .hp-medication-heading {
    display: grid;
  }

  .hp-medical-overview,
  .hp-medical-case-form,
  .hp-medical-appointments {
    border-radius: 20px;
    padding: 18px;
  }

  .hp-medical-case > summary {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .hp-medical-case > summary .hp-status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .hp-medical-case-body {
    padding: 16px;
  }

  .hp-activity-day-card,
  .hp-activity-panel {
    border-radius: 20px;
    padding: 18px;
  }

  .hp-activity-day-heading,
  .hp-activity-controls {
    display: grid;
  }

  .hp-activity-controls {
    grid-template-columns: repeat(3, 1fr);
  }

  .hp-activity-filter-row {
    grid-template-columns: 1fr;
  }

  .hp-activity-entry,
  .hp-activity-entry > summary {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .hp-activity-sync,
  .hp-activity-expand {
    grid-column: 2;
    justify-self: start;
  }

  .hp-activity-details {
    grid-template-columns: 1fr;
    padding-left: 18px;
  }

  .hp-horse-skill-row {
    grid-template-columns: 1fr 44px;
  }

  .hp-horse-skill-row label:first-child {
    grid-column: 1 / -1;
  }

  .hp-schedule-day-card,
  .hp-schedule-agenda {
    border-radius: 20px;
    padding: 18px;
  }

  .hp-schedule-day-heading,
  .hp-schedule-day-actions {
    display: grid;
    align-items: stretch;
  }

  .hp-schedule-day-actions {
    grid-template-columns: 1fr;
  }

  .hp-schedule-form-grid {
    grid-template-columns: 1fr;
  }

  .hp-schedule-title-field {
    grid-column: auto;
  }

  .hp-schedule-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .hp-schedule-row .hp-module-record-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .hp-topbar {
    position: static;
    display: grid;
    padding: 14px 16px 0;
  }

  .hp-search,
  .hp-topbar-actions {
    width: 100%;
  }

  .hp-topbar-actions {
    justify-content: flex-end;
  }

  .hp-shell {
    padding: 16px;
  }

  .hp-section-header {
    display: grid;
    width: 100%;
  }

  .hp-section-header > * {
    min-width: 0;
    max-width: 100%;
  }

  .hp-section-header .hp-button {
    width: 100%;
  }

  .hp-dashboard-hero {
    display: grid;
    min-height: 160px;
    padding: 20px;
  }

  .hp-dashboard::before {
    top: 120px;
    width: 360px;
    opacity: .055;
  }

  .hp-dashboard-hero h2 {
    font-size: 32px;
  }

  .hp-dashboard-modules,
  .hp-glance-strip {
    grid-template-columns: 1fr;
  }

  .hp-task-list {
    grid-template-columns: 1fr;
  }

  .hp-glance-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--hp-line);
    padding: 8px 0;
  }

  .hp-glance-strip > div:last-child {
    border-bottom: 0;
  }

  .hp-hero {
    padding: 22px;
    display: grid;
  }

  .hp-module-card {
    min-height: 170px;
  }

  .hp-dashboard-module-card {
    min-height: 68px;
  }

  .hp-record-row {
    grid-template-columns: 1fr;
  }

  .hp-filter-row {
    grid-template-columns: 1fr;
  }

  .hp-record-actions .hp-button,
  .hp-action-row .hp-button {
    width: 100%;
  }

  .hp-record-expander {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hp-record-expander-action {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .hp-module-record-actions {
    justify-content: stretch;
  }

  .hp-module-record-actions .hp-icon-button {
    flex: 1 1 44px;
  }

  .hp-history-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .hp-history-heading,
  .hp-undo-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .hp-due-line {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.hp-printing-history {
    background: #ffffff !important;
  }

  body.hp-printing-history * {
    visibility: hidden !important;
  }

  body.hp-printing-history .hp-print-target,
  body.hp-printing-history .hp-print-target * {
    visibility: visible !important;
  }

  body.hp-printing-history .hp-print-target {
    --hp-panel: #ffffff;
    --hp-soft: #f5f7fa;
    --hp-line: #cfd6df;
    --hp-text: #182331;
    --hp-navy: #08111d;
    --hp-muted: #526173;
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 0;
    box-shadow: none;
    background: #ffffff;
  }

  body.hp-printing-history .hp-no-print,
  body.hp-printing-history .hp-record-actions,
  body.hp-printing-history .hp-inline-workflow,
  body.hp-printing-history #care-print-record .hp-record-form {
    display: none !important;
  }

  body.hp-printing-history .hp-print-only.hp-print-target {
    display: block !important;
  }

  body.hp-printing-history .hp-history-panel {
    break-inside: avoid;
  }

  body.hp-printing-history .hp-foal-chart {
    width: 100%;
  }

  @page {
    margin: .5in;
  }
}

/* Connected daily-work modules: one shared visual and interaction language. */
.hp-message-overview,
.hp-message-channel,
.hp-message-archive,
.hp-activity-day-card,
.hp-activity-panel,
.hp-diet-overview,
.hp-diet-form,
.hp-diet-groups,
details.hp-diet-plan,
.hp-medical-overview,
.hp-medical-case-form,
.hp-medical-appointments,
details.hp-medical-case,
.hp-schedule-day-card,
.hp-schedule-agenda {
  border-radius: 20px;
}

.hp-message-overview {
  margin-bottom: 16px;
}

.hp-message-channel {
  overflow: hidden;
  padding: 0;
}

.hp-message-channel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hp-line);
  padding: 16px 20px;
  background: color-mix(in srgb, var(--hp-soft) 38%, transparent);
}

.hp-message-channel-heading > div,
.hp-message-channel-heading > div > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-message-channel-heading > div > div {
  display: grid;
  gap: 0;
}

.hp-message-channel-heading small,
.hp-message-channel-heading > span {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-message-channel-hash {
  color: var(--hp-action);
  font-size: 24px;
  font-weight: 800;
}

.hp-message-channel .hp-message-list,
.hp-message-archive-list {
  gap: 0;
  margin: 0;
  padding: 8px 0;
}

.hp-message-post {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 14px 20px;
  background: transparent;
  box-shadow: none;
}

.hp-message-post:hover,
.hp-message-post:focus-within {
  background: color-mix(in srgb, var(--hp-soft) 48%, transparent);
}

.hp-message-post.is-urgent {
  border: 0;
  box-shadow: inset 3px 0 0 #dc6e72;
}

.hp-message-post.is-pinned {
  background: color-mix(in srgb, var(--hp-gold) 7%, transparent);
}

.hp-message-post-content,
.hp-message-post-content > header > div:first-child {
  display: grid;
  min-width: 0;
}

.hp-message-post-content {
  gap: 7px;
}

.hp-message-post-content > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.hp-message-post-content > header > div:first-child {
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  gap: 8px;
}

.hp-message-post-content > header small {
  color: var(--hp-muted);
  font-size: 11px;
}

.hp-message-body {
  font-size: 15px;
  line-height: 1.5;
}

.hp-message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hp-message-reactions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 38px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 3px 8px;
  color: var(--hp-muted);
  background: transparent;
  cursor: pointer;
}

.hp-message-reactions button:hover,
.hp-message-reactions button.active {
  border-color: color-mix(in srgb, var(--hp-action) 55%, var(--hp-line));
  color: var(--hp-text);
  background: color-mix(in srgb, var(--hp-action) 12%, var(--hp-soft));
}

.hp-message-reactions button:disabled {
  cursor: default;
  opacity: .8;
}

.hp-message-reactions strong {
  font-size: 11px;
}

.hp-message-comments {
  border-left: 2px solid var(--hp-line);
  padding-left: 10px;
}

.hp-message-comments > div {
  grid-template-columns: 26px minmax(0, 1fr);
  padding: 8px 10px;
}

.hp-message-comment-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--hp-action);
  background: var(--hp-panel);
  font-size: 9px;
  font-weight: 900;
}

.hp-message-actions {
  grid-template-columns: auto minmax(220px, 1fr) auto;
  padding-top: 3px;
}

.hp-message-text-action {
  min-height: 34px;
  border: 0;
  padding: 0 4px;
  color: var(--hp-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.hp-message-text-action.is-acknowledged {
  color: #9ed7b9;
}

.hp-message-composer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--hp-line);
  padding: 16px 20px 20px;
  background: color-mix(in srgb, var(--hp-soft) 30%, var(--hp-panel));
}

.hp-message-compose-box {
  overflow: hidden;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  background: var(--hp-soft);
}

.hp-message-compose-box:focus-within {
  border-color: var(--hp-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-action) 18%, transparent);
}

.hp-message-compose-box textarea {
  display: block;
  width: 100%;
  min-height: 68px;
  resize: vertical;
  border: 0;
  outline: 0;
  padding: 13px 14px 7px;
  color: var(--hp-text);
  background: transparent;
}

.hp-message-compose-tools,
.hp-message-compose-tools > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hp-message-compose-tools {
  border-top: 1px solid color-mix(in srgb, var(--hp-line) 65%, transparent);
  padding: 7px 9px;
}

.hp-message-compose-tools small {
  color: var(--hp-muted);
  font-size: 10px;
}

.hp-message-tool {
  position: relative;
  cursor: pointer;
}

.hp-message-tool input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hp-message-tool span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 9px;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 800;
}

.hp-message-tool input:checked + span {
  border-color: color-mix(in srgb, var(--hp-action) 50%, var(--hp-line));
  color: var(--hp-text);
  background: color-mix(in srgb, var(--hp-action) 13%, transparent);
}

.hp-message-send {
  min-height: 34px;
}

.hp-choice-picker {
  min-width: 0;
  margin: 16px 0;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--hp-soft) 55%, transparent);
}

.hp-choice-picker legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 800;
}

.hp-choice-picker-tools,
.hp-choice-picker-tools > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hp-choice-picker-tools {
  margin-bottom: 10px;
  color: var(--hp-muted);
  font-size: 11px;
}

.hp-choice-picker-tools button {
  min-height: 32px;
  border: 0;
  padding: 0 7px;
  color: var(--hp-action);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.hp-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding: 2px;
}

.hp-choice-grid label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.hp-choice-grid input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  scroll-margin-block: 96px;
}

.hp-choice-grid label > span {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 8px 11px;
  color: var(--hp-muted);
  background: var(--hp-panel);
  font-size: 12px;
  font-weight: 700;
}

.hp-choice-grid-groups label > span {
  display: grid;
  gap: 1px;
}

.hp-choice-grid-groups small {
  color: var(--hp-muted);
  font-size: 10px;
}

.hp-choice-grid input:checked + span {
  border-color: color-mix(in srgb, var(--hp-action) 65%, var(--hp-line));
  color: var(--hp-text);
  background: color-mix(in srgb, var(--hp-action) 15%, var(--hp-panel));
  box-shadow: inset 3px 0 0 var(--hp-action);
}

.hp-choice-grid input:focus-visible + span {
  outline: 2px solid var(--hp-action);
  outline-offset: 2px;
}

.hp-form-error {
  margin: 14px 0 0;
  border: 1px solid color-mix(in srgb, var(--hp-danger) 45%, var(--hp-line));
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--hp-danger);
  background: color-mix(in srgb, var(--hp-danger) 8%, var(--hp-panel));
  font-size: 13px;
  font-weight: 700;
}

.hp-diet-individual-picker {
  margin: 16px 0;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--hp-soft) 55%, transparent);
}

.hp-diet-individual-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.hp-diet-individual-picker > summary small {
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 700;
}

.hp-diet-individual-picker .hp-choice-picker {
  margin: 0 12px 12px;
  background: var(--hp-panel);
}

.hp-checkbox-chip {
  position: relative;
}

.hp-checkbox-chip input {
  scroll-margin-block: 96px;
}

.hp-inline-note,
.hp-activity-midnight-note {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-inline-note {
  margin: 14px 0;
  border: 1px dashed var(--hp-line);
  border-radius: 14px;
  padding: 13px;
}

.hp-field-stack input,
.hp-field-stack select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--hp-text);
  background: var(--hp-soft);
  outline: 0;
}

.hp-field-stack input:focus,
.hp-field-stack select:focus {
  border-color: var(--hp-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-action) 18%, transparent);
}

.hp-diet-schedule-builder,
.hp-diet-additions-builder {
  margin-top: 18px;
  border-top: 1px solid var(--hp-line);
  padding-top: 18px;
}

.hp-diet-builder-heading,
.hp-diet-serving-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.hp-diet-builder-heading h4,
.hp-diet-builder-heading p {
  margin: 0;
}

.hp-diet-builder-heading p {
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-diet-serving-list,
.hp-diet-addition-list,
.hp-diet-serving-summary {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.hp-diet-serving {
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--hp-soft) 56%, transparent);
}

.hp-diet-serving-heading {
  display: grid;
  grid-template-columns: 32px minmax(180px, 1fr) minmax(140px, .45fr);
  align-items: end;
}

.hp-diet-serving-heading > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--hp-action);
  background: var(--hp-panel);
  font-weight: 900;
}

.hp-diet-serving-heading label,
.hp-diet-addition-row label {
  display: grid;
  gap: 5px;
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 750;
}

.hp-diet-serving-heading input,
.hp-diet-addition-row input,
.hp-diet-addition-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--hp-line);
  border-radius: 11px;
  padding: 0 10px;
  color: var(--hp-text);
  background: var(--hp-panel);
}

.hp-diet-serving-items {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.hp-diet-add-feed {
  margin-top: 10px;
}

.hp-diet-addition-row {
  display: grid;
  grid-template-columns: 1.05fr .7fr 1fr .8fr .65fr 1.15fr auto;
  align-items: end;
  gap: 8px;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--hp-soft) 55%, transparent);
}

.hp-diet-serving-summary article {
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  padding: 13px;
  background: color-mix(in srgb, var(--hp-soft) 58%, transparent);
}

.hp-diet-serving-summary article > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hp-diet-serving-summary article > div span {
  color: var(--hp-action);
  font-size: 12px;
  font-weight: 850;
}

.hp-diet-serving-summary ul {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.hp-diet-serving-summary li,
.hp-diet-horse-additions > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 8px;
  color: var(--hp-muted);
  font-size: 12px;
}

.hp-diet-serving-summary li strong,
.hp-diet-horse-additions strong {
  color: var(--hp-text);
}

.hp-diet-horse-additions {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--hp-line);
  padding-top: 14px;
}

.hp-diet-horse-additions h4 {
  margin: 0 0 3px;
}

.hp-activity-time {
  width: 70px;
  color: var(--hp-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hp-activity-entry,
.hp-activity-entry > summary {
  grid-template-columns: 70px 42px minmax(0, 1fr) auto auto;
}

.hp-activity-midnight-note {
  align-self: end;
  margin: 0;
  padding: 0 0 10px;
}

@media (max-width: 900px) {
  .hp-diet-addition-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-diet-addition-instructions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .hp-canonical-auth-grid,
  .hp-canonical-counts {
    grid-template-columns: 1fr;
  }

  .hp-canonical-counts > div + div {
    border-top: 1px solid var(--hp-line);
    border-left: 0;
  }

  .hp-canonical-ranch-heading,
  .hp-canonical-account,
  .hp-canonical-area {
    align-items: stretch;
    flex-direction: column;
  }

  .hp-canonical-area { display: flex; }

  .hp-message-overview,
  .hp-message-channel-heading,
  .hp-message-post-content > header,
  .hp-message-actions,
  .hp-message-compose-tools,
  .hp-diet-builder-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .hp-message-overview {
    display: grid;
    padding: 18px;
  }

  .hp-message-overview .hp-segmented-control,
  .hp-message-channel-heading .hp-segmented-control,
  .hp-message-overview .hp-segmented-control button {
    width: 100%;
  }

  .hp-message-channel-heading .hp-segmented-control button {
    flex: 1;
  }

  .hp-message-channel-heading > span,
  .hp-message-compose-tools small {
    display: none;
  }

  .hp-message-post,
  .hp-message-composer {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .hp-message-post .hp-message-avatar,
  .hp-message-composer .hp-message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 10px;
  }

  .hp-message-post-content > header > div:first-child {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hp-message-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hp-message-actions form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hp-message-actions .hp-module-record-actions {
    justify-content: start;
  }

  .hp-message-compose-tools,
  .hp-message-compose-tools > div {
    flex-wrap: wrap;
  }

  .hp-choice-grid,
  .hp-diet-serving-heading,
  .hp-diet-addition-row,
  .hp-diet-serving-summary li,
  .hp-diet-horse-additions > div {
    grid-template-columns: 1fr;
  }

  .hp-diet-serving-heading > span {
    display: none;
  }

  .hp-diet-addition-instructions {
    grid-column: auto;
  }

  .hp-activity-entry,
  .hp-activity-entry > summary {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .hp-activity-time {
    width: auto;
    grid-column: 2;
    grid-row: 2;
  }
}