/* Saham Stud — premium, mobile-first stable management
   Warm equestrian design system: sand & cream surfaces, espresso ink,
   gold accents, muted green / honey / terracotta status tones.
   Class names are kept stable so the existing JS keeps working. */

:root {
  /* Surfaces & ink */
  --sand:      #F2EADB;   /* app background */
  --sand-2:    #EADFC9;
  --surface:   #FFFDF8;   /* cards */
  --surface-2: #FBF5EA;
  --ink:       #2E2519;   /* primary text */
  --ink-2:     #5B4E3C;   /* secondary text */
  --muted:     #938468;   /* tertiary text */
  --line:      #E8DDC8;   /* hairlines */
  --line-2:    #DED0B6;

  /* Brand */
  --espresso:   #3E2E20;
  --espresso-2: #2A1E14;
  --gold:       #C39A4C;
  --gold-2:     #A87F33;
  --gold-soft:  #F3E7CC;

  /* Status tones */
  --green: #5E7A53; --green-bg: #E9F0E1; --green-ink: #3B5230;
  --amber: #C68F36; --amber-bg: #F8ECD4; --amber-ink: #84591A;
  --red:   #B14E39; --red-bg:   #F6E3DB; --red-ink:   #893524;
  --teal:  #5B7B73; --teal-bg:  #E5EDE9; --teal-ink:  #38554C;

  /* Legacy aliases still referenced by inline styles in the JS */
  --blue: var(--teal); --blue-bg: var(--teal-bg);
  --gray-50: var(--surface-2);
  --gray-100: #EFE7D7;
  --gray-200: var(--line);
  --gray-300: var(--line-2);
  --gray-500: var(--muted);
  --gray-700: var(--ink-2);
  --gray-900: var(--ink);

  --shadow:    0 1px 2px rgba(46,37,25,0.05), 0 3px 12px rgba(46,37,25,0.05);
  --shadow-lg: 0 10px 30px rgba(46,37,25,0.14);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --ff-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --ff-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--ff-body);
  background:
    radial-gradient(1200px 480px at 50% -10%, #F7F0E2 0%, rgba(247,240,226,0) 70%),
    var(--sand);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--ff-display); letter-spacing: 0.01em; }

/* ---------- Header ---------- */
.header {
  background: linear-gradient(135deg, var(--espresso) 0%, var(--espresso-2) 100%);
  color: #F4ECDD;
  padding: calc(12px + env(safe-area-inset-top)) 18px 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 14px rgba(42,30,20,0.28);
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--gold-2);
}
.header h1 {
  font-size: 1.32rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
}
.header .subtitle { font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.02em; }
.header-logout {
  margin-left: auto;
  background: rgba(255,255,255,0.10);
  color: #F4ECDD;
  border: 1px solid rgba(244,236,221,0.35);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.header-logout:hover { background: rgba(255,255,255,0.20); }
.header-logout:active { transform: scale(0.96); }
.stable-switch {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.12);
  color: #F4ECDD;
  border: 1px solid rgba(244, 236, 221, 0.30);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stable-switch:active { transform: scale(0.97); }
.stable-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.stable-row:last-child { border-bottom: none; }
.stable-row:active { background: var(--surface-2); }
.stable-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--espresso), #6A4F37);
  color: #F4ECDD; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; box-shadow: inset 0 0 0 2px rgba(195,154,76,0.4);
}
.stable-row .meta { font-size: 0.76rem; color: var(--muted); margin-top: 1px; }
.invite-code {
  font-family: var(--ff-display); font-size: 1.5rem; letter-spacing: 3px;
  text-align: center; background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); padding: 12px; color: var(--espresso); font-weight: 700;
}

/* RTL (Arabic). The flex layouts + the html[dir=rtl] attribute handle most of
   the mirroring; these are small nudges so text and form fields read correctly.
   Full RTL visual polish is tracked as a follow-up. */
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group select,
[dir="rtl"] .form-group textarea { text-align: right; }
[dir="rtl"] .detail-row .value { text-align: left; }   /* keep dates/numbers tidy */
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }

/* ---------- Nav tabs ---------- */
.nav {
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 99;
  scrollbar-width: none;
  padding: 8px 12px;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
.nav-btn {
  flex: 0 0 auto;
  padding: 9px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  min-height: 40px;
}
.nav-btn:active { transform: scale(0.96); }
.nav-btn.active {
  color: #F4ECDD;
  background: linear-gradient(135deg, var(--espresso) 0%, var(--espresso-2) 100%);
  box-shadow: 0 4px 12px rgba(62,46,32,0.28);
  border-color: var(--gold-2);
}

/* ---------- Sections ---------- */
.section {
  display: none;
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  max-width: 640px;
  margin: 0 auto;
}
.section.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Dashboard hero ---------- */
.hero {
  background: linear-gradient(150deg, #44331F 0%, #2E2114 100%);
  color: #F4ECDD;
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(195,154,76,0.35);
}
.hero::after {
  content: "🐎";
  position: absolute;
  right: -8px; bottom: -14px;
  font-size: 5.5rem;
  opacity: 0.10;
  transform: rotate(-8deg);
}
.hero-date { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; }
.hero-headline { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; line-height: 1.15; }
.hero-sub { font-size: 0.86rem; opacity: 0.82; }

/* ---------- Quick actions ---------- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.qa-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow);
}
.qa-btn:active { transform: scale(0.96); background: var(--surface-2); }
.qa-ic { font-size: 1.3rem; line-height: 1; }
.qa-tx { font-size: 0.68rem; font-weight: 600; color: var(--ink-2); }

/* ---------- Stat tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-tile {
  border-radius: var(--radius);
  padding: 16px 14px;
  cursor: pointer;
  transition: transform 0.1s;
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat-tile:active { transform: scale(0.97); }
.stat-tile .num { font-size: 2rem; font-weight: 700; font-family: var(--ff-display); line-height: 1; }
.stat-tile .label { font-size: 0.74rem; font-weight: 600; margin-top: 4px; color: var(--ink-2); }
.stat-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.green-tile { background: linear-gradient(180deg, var(--green-bg), var(--surface)); }
.green-tile .num { color: var(--green-ink); }
.green-tile::before { background: var(--green); }
.amber-tile { background: linear-gradient(180deg, var(--amber-bg), var(--surface)); }
.amber-tile .num { color: var(--amber-ink); }
.amber-tile::before { background: var(--amber); }
.red-tile { background: linear-gradient(180deg, var(--red-bg), var(--surface)); }
.red-tile .num { color: var(--red-ink); }
.red-tile::before { background: var(--red); }
.blue-tile { background: linear-gradient(180deg, var(--teal-bg), var(--surface)); }
.blue-tile .num { color: var(--teal-ink); }
.blue-tile::before { background: var(--teal); }
.stat-ic { position: absolute; top: 12px; right: 12px; font-size: 1.1rem; opacity: 0.5; }

/* ---------- List header (section toolbars) ---------- */
.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.list-head .lh-title { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700; }

/* ---------- Horse list rows (dashboard) ---------- */
.horse-item {
  display: flex;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.horse-item:last-child { border-bottom: none; }
.horse-item:active { background: var(--surface-2); }
.horse-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--espresso), #6A4F37);
  color: #F4ECDD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(195,154,76,0.45);
}
.horse-info { flex: 1; min-width: 0; }
.horse-info .name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.horse-info .detail { font-size: 0.8rem; color: var(--muted); margin-top: 1px; }
.horse-status {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.horse-status.done { background: var(--green-bg); color: var(--green-ink); }
.horse-status.pending { background: var(--amber-bg); color: var(--amber-ink); }
.horse-status.problem { background: var(--red-bg); color: var(--red-ink); }
.horse-status.not-done { background: var(--gray-100); color: var(--muted); }

/* ---------- Horse cards (Horses tab) ---------- */
.horse-card-grid { display: flex; flex-direction: column; gap: 12px; }
.horse-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s;
}
.horse-card:active { transform: scale(0.99); }
.horse-card-top { display: flex; align-items: center; gap: 13px; padding: 14px; }
.hc-photo-wrap { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.hc-photo {
  width: 60px; height: 60px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px rgba(195,154,76,0.35);
}
.hc-photo-wrap .hc-photo-ph,
.hc-photo-wrap .hc-over { position: absolute; inset: 0; }
.hc-photo-ph {
  width: 60px; height: 60px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--espresso), #6A4F37);
  color: #F4ECDD;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem; font-family: var(--ff-display);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(195,154,76,0.45);
}
.hc-main { flex: 1; min-width: 0; }
.hc-name { font-family: var(--ff-display); font-weight: 700; font-size: 1.18rem; line-height: 1.1; }
.hc-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-go { color: var(--gold-2); font-size: 1.3rem; flex-shrink: 0; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--ink-2);
  border: 1px solid transparent;
}
.chip.ok      { background: var(--green-bg); color: var(--green-ink); }
.chip.soon    { background: var(--amber-bg); color: var(--amber-ink); }
.chip.overdue { background: var(--red-bg);   color: var(--red-ink); }
.chip.alert   { background: var(--red-bg);   color: var(--red-ink); border-color: rgba(177,78,57,0.35); }
.chip.muted   { background: var(--gray-100); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  text-align: center;
  font-family: var(--ff-body);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg, var(--espresso), var(--espresso-2)); color: #F4ECDD; box-shadow: 0 4px 14px rgba(62,46,32,0.25); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #3A2A14; box-shadow: 0 4px 14px rgba(168,127,51,0.3); }
.btn-green { background: var(--green); color: #F4ECDD; }
.btn-amber { background: var(--amber); color: #3A2A14; }
.btn-red { background: var(--red); color: #F8ECE7; }
.btn-outline {
  background: var(--surface);
  color: var(--espresso);
  border: 1.5px solid var(--line-2);
}
.btn-sm {
  padding: 9px 15px;
  font-size: 0.85rem;
  display: inline-block;
  width: auto;
  border-radius: var(--radius-pill);
}

/* ---------- Toggle / tick buttons ---------- */
.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
  min-height: 50px;
}
.toggle-btn.done { background: var(--green-bg); border-color: var(--green); color: var(--green-ink); }
.toggle-btn .check { font-size: 1.2rem; }
.toggle-btn.done .check::after { content: "✓"; }
.toggle-btn:not(.done) .check::after { content: "○"; color: var(--line-2); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 14px; }
.field-note { display:block; margin-top:6px; font-size:.78rem; line-height:1.35; color:var(--gray-500); }
.privacy-attest { display:flex; gap:9px; align-items:flex-start; margin:-2px 0 14px; font-size:.8rem; line-height:1.35; color:var(--ink-2); }
.privacy-attest input { width:auto; margin-top:2px; accent-color:var(--gold-2); }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink-2);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
  -webkit-appearance: none;
  font-family: var(--ff-body);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(195,154,76,0.18);
}
.form-group textarea { resize: vertical; min-height: 80px; }

/* ---------- Modal ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(35,25,16,0.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  animation: slideUp 0.28s cubic-bezier(0.16,0.84,0.44,1);
  border-top: 2px solid var(--gold-2);
}
.modal::before {
  content: "";
  display: block;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--line-2);
  margin: 8px auto 12px;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-header h2 { font-size: 1.25rem; }
.modal-close {
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Urgency / status badges ---------- */
.urgency {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.urgency.low { background: var(--gray-100); color: var(--ink-2); }
.urgency.medium { background: var(--amber-bg); color: var(--amber-ink); }
.urgency.urgent { background: var(--red-bg); color: var(--red-ink); }

.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: capitalize;
}
.badge.open { background: var(--red-bg); color: var(--red-ink); }
.badge.being_handled { background: var(--amber-bg); color: var(--amber-ink); }
.badge.closed { background: var(--green-bg); color: var(--green-ink); }

/* ---------- Work-type pills ---------- */
.work-type-select { display: flex; flex-wrap: wrap; gap: 6px; }
.work-pill {
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.work-pill.selected {
  background: linear-gradient(135deg, var(--espresso), var(--espresso-2));
  color: #F4ECDD;
  border-color: var(--gold-2);
}

/* ---------- Horse profile ---------- */
.profile-cover {
  position: relative;
  height: 170px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  background: linear-gradient(140deg, var(--espresso), #6A4F37);
  box-shadow: var(--shadow);
}
.profile-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.profile-cover .cover-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; color: rgba(244,236,221,0.6);
}
.profile-cover .cover-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(30,21,12,0.82));
  color: #F4ECDD;
}
.profile-cover .cover-name h2 { font-size: 1.55rem; font-weight: 700; line-height: 1.05; }
.profile-cover .cover-name .meta { font-size: 0.82rem; opacity: 0.88; margin-top: 2px; }

.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--espresso), #6A4F37);
  color: #F4ECDD;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.5rem; font-family: var(--ff-display);
  box-shadow: inset 0 0 0 3px rgba(195,154,76,0.45);
}
.profile-info h2 { font-size: 1.4rem; font-weight: 700; }
.profile-info .meta { font-size: 0.85rem; color: var(--muted); }

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: var(--muted); font-weight: 600; }
.detail-row .value { font-weight: 600; text-align: right; max-width: 62%; color: var(--ink); }

.divider { height: 8px; background: var(--gray-100); margin: 0 -16px 12px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty .icon { font-size: 2.6rem; margin-bottom: 10px; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 380px at 50% 0%, #5A4329 0%, rgba(90,67,41,0) 65%),
    linear-gradient(160deg, #3E2E20 0%, #241A11 100%);
}
.login-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 30px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 24px 60px rgba(20,14,8,0.5);
  border: 1px solid rgba(195,154,76,0.4);
}
.login-card h1 { font-size: 1.7rem; margin-bottom: 2px; color: var(--ink); }
.login-card .subtitle { color: var(--gold-2); margin-bottom: 22px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.login-card .pin-display {
  text-align: center;
  font-size: 2rem;
  letter-spacing: 10px;
  margin-bottom: 22px;
  min-height: 44px;
  color: var(--espresso);
}
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-btn {
  padding: 18px;
  font-size: 1.35rem;
  font-weight: 700;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.1s, background-color 0.1s, border-color 0.1s, transform 0.1s;
  min-height: 56px;
}
.pin-btn:active { background: var(--gold-soft); transform: scale(0.95); border-color: var(--gold-2); }
.pin-btn.action { font-size: 0.92rem; background: var(--surface-2); color: var(--ink-2); }
.login-pin-hint { margin: 0 0 8px; color: var(--muted); font-size: .78rem; }
.login-submit { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: var(--radius-sm); background: var(--green); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.login-submit:active { transform: scale(.98); }

/* ---------- Due-date colouring (inline-styled values) ---------- */
.due-ok { color: var(--green-ink); }
.due-soon { color: var(--amber-ink); font-weight: 700; }
.due-overdue { color: var(--red-ink); font-weight: 700; }

/* ---------- Safari assignment rows ---------- */
.assignment-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.assignment-row:last-child { border-bottom: none; }
.assign-horse { font-weight: 700; min-width: 80px; }
.assign-rider { color: var(--muted); font-size: 0.85rem; }

/* ---------- Care dashboard ---------- */
.care-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}
.care-item:last-child { border-bottom: none; }
.care-item:active { background: var(--surface-2); }
.care-photo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--gray-100); }
.care-photo-placeholder {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(140deg, var(--espresso), #6A4F37);
  color: #F4ECDD;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(195,154,76,0.4);
}
.care-body { flex: 1; min-width: 0; }
.care-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.care-name { font-weight: 700; font-size: 0.95rem; }
.care-badge {
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.care-badge.care-overdue { background: var(--red-bg); color: var(--red-ink); }
.care-badge.care-due     { background: var(--amber-bg); color: var(--amber-ink); }
.care-badge.care-upcoming { background: var(--teal-bg); color: var(--teal-ink); }
.care-badge.care-ok      { background: var(--green-bg); color: var(--green-ink); }
.care-badge.care-info    { background: var(--gray-100); color: var(--muted); }
.care-summary { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

.care-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.care-header-text { min-width: 0; }
.care-header-title { font-family: var(--ff-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.care-header-sub { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.care-refresh {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.care-refresh:hover { border-color: var(--gold-2); color: var(--espresso); }
.care-refresh:active { transform: scale(0.97); }
.care-count { color: var(--muted); font-weight: 600; margin-left: 4px; }

.care-clear { text-align: center; padding: 26px 16px; }
.care-clear-icon { font-size: 2.6rem; margin-bottom: 6px; }
.care-clear-title { font-family: var(--ff-display); font-size: 1.1rem; font-weight: 700; color: var(--green-ink); margin-bottom: 4px; }
.care-clear-sub { font-size: 0.85rem; color: var(--muted); }

.care-info-footer { padding: 14px; }
.care-info-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.care-info-icon { font-size: 1.2rem; }
.care-info-text { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--ink-2); }
.care-info-link {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--espresso);
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.care-info-link:hover { border-color: var(--gold-2); background: var(--gold-soft); }
.care-info-link:active { transform: scale(0.97); }

.care-stamp { text-align: center; color: var(--muted); font-size: 0.72rem; margin-top: 14px; }

/* ---------- Toast (save feedback) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  background: var(--espresso);
  color: #F4ECDD;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  border: 1px solid var(--gold-2);
  max-width: 86%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--red); border-color: var(--red); }

/* ========================================================================== */
/* YardMate 0.12 multi-view presentation architecture                         */
/* Shared semantic components below inherit one of five complete token sets.  */
/* ========================================================================== */

html { min-height: 100%; background: var(--sand); }
body { min-height: 100%; background: var(--sand); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--gold-soft); color: var(--ink); }
* { scrollbar-color: var(--gold-2) var(--surface-2); scrollbar-width: thin; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 1000; background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.brand-lockup { min-width: 0; display: flex; align-items: center; gap: 11px; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-mark, .login-mark { display: grid; place-items: center; border: 1px solid currentColor; }
.brand-mark { width: 39px; height: 39px; flex: 0 0 auto; }
.brand-mark svg, .login-mark svg { width: 68%; height: 68%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.view-context { font-size: .62rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.header-user { display: none; }
.header-icon-btn { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: transparent; color: inherit; border-radius: 50%; cursor: pointer; }
.header-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.header-icon-btn span { display: none; }
.header .header-icon-btn { margin-inline-start: 0; }
.header .brand-lockup { margin-inline-end: auto; }

.login-card { text-align: center; }
.login-mark { width: 66px; height: 66px; margin: 0 auto 14px; color: var(--espresso); }
.login-card .subtitle { color:var(--ink-2); }
.login-demo { margin-top: 16px; font-size: .78rem; color: var(--muted); }
.login-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: .72rem; }
.login-links a { color: var(--muted); }
.about-page { max-width: 760px; margin: 0 auto; padding: 64px 24px; line-height: 1.65; }
.about-page h1 { max-width: 680px; margin: 8px 0 24px; }
.about-page h2 { margin: 32px 0 6px; }
.about-page .eyebrow { color: #5f685c; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Five persistent destinations. Every remaining feature is exposed in More. */
.nav { position: fixed; top: auto; bottom: 0; inset-inline: 0; z-index: 150; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); overflow: visible; box-shadow: 0 -8px 28px rgba(20, 25, 22, .08); }
.nav-btn { min-width: 0; min-height: 55px; padding: 5px 2px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; border: 0; border-radius: 10px; font-size: .63rem; line-height: 1.05; overflow: visible; }
.nav-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn.active { background: transparent; color: var(--green); border: 0; box-shadow: none; }
.nav-action { transform: translateY(-13px); }
.nav-action:active { transform: translateY(-13px) scale(.96); }
.nav-action-ring { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; box-shadow: 0 7px 20px color-mix(in srgb, var(--green) 30%, transparent); border: 4px solid var(--surface-2); }
.nav-action-ring svg { width: 23px; height: 23px; }
.section { max-width: 760px; padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); }

/* Authored dashboard compositions share data but not layout. */
.view-hero { min-height: 238px; margin-bottom: 16px; position: relative; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; color: white; }
.view-hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.view-hero .hero-copy { position: relative; z-index: 1; width: 100%; }
.view-hero h2 { font-size: clamp(2rem, 10vw, 3.7rem); line-height: .96; letter-spacing: -.025em; max-width: 12ch; text-wrap: balance; }
.view-hero p { margin-top: 8px; max-width: 44ch; font-size: .86rem; opacity: .86; }
.view-hero .hero-date { margin-bottom: 9px; }

.dashboard-actions { gap: 8px; }
.dashboard-actions .qa-btn { min-height: 76px; border-radius: var(--radius-sm); }
.qa-mark, .quick-tile-mark, .menu-tile-mark { display: block; width: 24px; height: 3px; border-radius: 2px; background: currentColor; }
.tone-ride { color: var(--teal-ink); } .tone-feed { color: var(--amber-ink); }
.tone-problem { color: var(--red-ink); } .tone-care { color: var(--green-ink); }
.tone-health { color: var(--teal-ink); } .tone-lesson { color: var(--gold-2); }
.tone-assign { color: var(--ink-2); } .tone-team { color: var(--green-ink); }
.tone-settings { color: var(--ink); } .tone-medical { color: var(--red-ink); }
.tone-horse { color: var(--espresso); }
.stat-tile { appearance: none; width: 100%; text-align: start; color: var(--ink); }

.command-hero { min-height: 170px; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; color: #eef6ef; background: #13231e; border: 1px solid #2e4a3f; border-radius: 4px; }
.command-hero h2 { font-family: var(--ff-body); font-size: 2rem; font-weight: 760; letter-spacing: -.03em; }
.command-status { width: 105px; height: 105px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid currentColor; text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; }
.command-status span { display: block; font-size: 2.6rem; font-weight: 800; line-height: .9; margin-bottom: 7px; }
.command-status.has-alerts { color: #ff826f; } .command-status.clear { color: #8fd3a8; }
.ops-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 12px; }
.ops-metrics button { appearance: none; border: 0; min-width: 0; padding: 14px 9px; text-align: start; background: var(--surface); cursor: pointer; }
.ops-metrics strong { display: block; font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1; }
.ops-metrics span { display: block; margin-top: 5px; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }

.luxury-hero { min-height: 310px; padding: 26px; color: var(--espresso); background: var(--surface); border: 1px solid var(--gold); }
.luxury-hero .hero-photo { inset-inline-start: auto; width: 46%; filter: sepia(.1) saturate(.8); }
.luxury-hero .hero-photo + .journal-rule, .luxury-hero .journal-rule { width: 48%; }
.luxury-hero .hero-copy { width: 55%; padding-inline-end: 16px; }
.luxury-hero h2 { font-size: clamp(2.4rem, 12vw, 4.5rem); font-weight: 500; }
.journal-rule { position: absolute; top: 25px; inset-inline-start: 26px; display: flex; align-items: center; gap: 9px; color: var(--gold-2); }
.journal-rule span { height: 1px; background: currentColor; flex: 1; }
.journal-rule svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }

.passport-hero { min-height: 340px; background: #173f32; }
.passport-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: rgba(15, 54, 42, .88); z-index: -1; }
.passport-hero .hero-copy { padding: 24px; }
.passport-shield { position: absolute; top: 22px; inset-inline-start: 22px; width: 58px; height: 68px; display: grid; place-items: center; border: 1px solid #c8a75e; border-bottom-width: 4px; color: #eadcb5; font-family: var(--ff-display); font-size: 1.2rem; }
.passport-hero h2 { font-weight: 500; }

.modern-hero { min-height: 270px; border-radius: 16px; background: #174938; }
.modern-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 52%; background: rgba(18, 66, 49, .9); z-index: -1; }
.modern-hero .hero-copy { padding: 22px; }
.modern-hero h2 { font-family: var(--ff-body); font-size: clamp(2rem, 10vw, 3.2rem); font-weight: 760; }

.qatar-hero { min-height: 315px; padding: 24px; color: #fff9eb; background: #4a3729; box-shadow: inset 0 -3px #c7a35b; }
.qatar-hero .hero-photo { inset-inline-start: auto; width: 52%; opacity: .72; }
.qatar-hero .hero-copy { width: 58%; }
.qatar-hero h2 { font-size: clamp(2rem, 9vw, 3.6rem); font-weight: 500; }
.qatar-title-ar { font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; margin-top: 8px; color: #e4ca8b; }
.qatar-medallion { position: absolute; top: 22px; inset-inline-end: 22px; width: 54px; height: 54px; border: 1px solid #d9bd7d; border-radius: 50%; display: grid; place-items: center; color: #e8d7ac; z-index: 2; }

/* Feature directories and quick-action sheet. */
.menu-group + .menu-group { margin-top: 24px; }
.menu-group h3, .settings-block h3 { font-family: var(--ff-body); font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); margin-bottom: 8px; }
.menu-tile { width: 100%; min-height: 51px; display: grid; grid-template-columns: 23px 1fr 20px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: start; cursor: pointer; }
.menu-tile svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.quick-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.quick-tile { min-height: 88px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; }

/* Settings selector: each miniature is a real compositional preview. */
.settings-block > p { color: var(--muted); font-size: .82rem; max-width: 58ch; margin: -2px 0 12px; }
.view-choices { display: grid; gap: 8px; }
.view-choice { width: 100%; min-height: 74px; display: grid; grid-template-columns: 82px 1fr 22px; align-items: center; gap: 12px; padding: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: start; cursor: pointer; }
.view-choice.selected { border-color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold-2); }
.view-choice-copy strong, .view-choice-copy small { display: block; }
.view-choice-copy strong { font-size: .9rem; }
.view-choice-copy small { color: var(--muted); margin-top: 2px; line-height: 1.25; }
.view-check { color: var(--green); font-weight: 800; }
.view-preview { height: 54px; display: grid; grid-template: 11px 1fr 10px / 1fr 1fr; gap: 3px; padding: 4px; background: #f8f2e6; border: 1px solid #d7c5a4; overflow: hidden; }
.view-preview i { display: block; background: #52392b; }
.view-preview i:first-child, .view-preview i:last-child { grid-column: 1 / -1; }
.view-choice-command .view-preview { background: #0f1916; border-color: #294439; }
.view-choice-command .view-preview i { background: #527b68; }
.view-choice-command .view-preview i:nth-child(3) { background: #bd5b4d; }
.view-choice-passport .view-preview { background: #efe7d4; border-color: #b89b5d; }
.view-choice-passport .view-preview i { background: #174737; }
.view-choice-modern .view-preview { background: #fbfaf6; border-color: #ddd8cb; border-radius: 8px; }
.view-choice-modern .view-preview i { background: #225841; border-radius: 4px; }
.view-choice-qatar .view-preview { background: #ead9b9; border-color: #a98347; }
.view-choice-qatar .view-preview i { background: #4a3729; }
.settings-language { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
 .provider-ops-entry { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
 .provider-ops-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
 .provider-ops-list { display:grid; gap:12px; }
 .provider-incident { padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
 .provider-incident-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
 .provider-incident-header strong,.provider-incident-header span { display:block; }
 .provider-incident-header div > span { margin-top:2px; color:var(--muted); text-transform:capitalize; }
 .provider-status { padding:4px 8px; border-radius:999px; font-size:.72rem; font-weight:800; white-space:nowrap; }
 .provider-status-in_progress { background:var(--amber-bg); color:var(--amber-ink); }
 .provider-status-uncertain { background:var(--red-bg); color:var(--red-ink); }
 .provider-incident-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin:12px 0; }
 .provider-incident-meta div { min-width:0; }
 .provider-incident-meta dt { color:var(--muted); font-size:.72rem; }
 .provider-incident-meta dd { margin:2px 0 0; overflow-wrap:anywhere; font-size:.84rem; }
 .provider-incident-actions,.provider-decision-actions { display:grid; gap:8px; }
 .provider-evidence { margin:0 0 10px; }
 .provider-ops-error { color:var(--red); }

/* Horse profile is the strongest expression of each selected view. */
.profile-view { position: relative; }
.profile-close { position: absolute; z-index: 8; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(20,25,22,.62); color: white; font-size: 1.55rem; cursor: pointer; }
.profile-cover { height: auto; min-height: 300px; aspect-ratio: 5 / 4; }
.profile-cover .cover-fallback svg { width: 60px; height: 60px; fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; }
.profile-crest { display: none; }
.registered-name { margin-top: 4px; font-family: var(--ff-display); font-style: italic; opacity: .85; }
.profile-id-line { margin-top: 8px; font-size: .7rem; letter-spacing: .05em; opacity: .86; font-variant-numeric: tabular-nums; }
.profile-primary-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.profile-status .chip-row { padding-bottom: 10px !important; }
.profile-status > div:last-child { margin: 0 0 14px !important; }

[data-view="luxury"] .profile-cover { aspect-ratio: 4 / 5; min-height: 420px; border-radius: 0; border: 1px solid var(--gold-2); }
[data-view="luxury"] .profile-cover .cover-name { inset-inline: 22px; bottom: 22px; text-align: center; border-top: 1px solid rgba(237,216,171,.7); padding-top: 13px; }
[data-view="luxury"] .profile-cover .cover-name h2 { font-size: 2.2rem; font-weight: 500; }
[data-view="luxury"] .profile-crest { display: grid; place-items: center; position: absolute; z-index: 4; top: 22px; inset-inline-start: 22px; width: 58px; height: 66px; color: #f1ddb0; border: 1px solid currentColor; font-family: var(--ff-display); }
[data-view="luxury"] .profile-details-card, [data-view="luxury"] .profile-identity-card { border-radius: 0; border-color: var(--gold); box-shadow: none; }
[data-view="luxury"] .profile-view, [data-view="passport"] .profile-view { display:flex; flex-direction:column; }
[data-view="luxury"] .profile-cover, [data-view="passport"] .profile-cover { order:1; }
[data-view="luxury"] .profile-status, [data-view="passport"] .profile-status { order:2; }
[data-view="luxury"] .profile-primary-actions { order:3; }
[data-view="luxury"] .profile-identity-card { order:4; }
[data-view="luxury"] .profile-details-card { order:5; }
[data-view="luxury"] .profile-pedigree-card { order:6; }
[data-view="luxury"] .profile-breeding-card { order:7; }
[data-view="luxury"] .profile-problems-card { order:8; }
[data-view="luxury"] .profile-rides-card { order:9; }

[data-view="command"] .profile-cover { aspect-ratio: 16 / 8; min-height: 220px; border-radius: 3px; }
[data-view="command"] .profile-cover .cover-name h2 { font-family: var(--ff-body); font-size: 2rem; }
[data-view="command"] .profile-primary-actions .btn { border-radius: 3px; }
[data-view="command"] .profile-view .card { border-radius: 3px; }
[data-view="command"] .profile-primary-actions .btn-outline { color:var(--ink); border-color:var(--line-2); background:transparent; }

[data-view="passport"] .profile-cover { min-height: 430px; aspect-ratio: 4 / 5; border-radius: 0; }
[data-view="passport"] .profile-crest { display: grid; place-items: center; position: absolute; z-index: 4; top: 22px; inset-inline-start: 22px; width: 62px; height: 73px; color: #ead6a5; border: 1px solid currentColor; border-bottom-width:4px; }
[data-view="passport"] .profile-cover .cover-name h2 { font-size: 2.25rem; font-weight: 500; }
[data-view="passport"] .profile-identity-card { border-radius: 0; border-color: var(--gold); box-shadow: none; }
[data-view="passport"] .profile-identity-card .detail-row { display: grid; grid-template-columns: 1fr 1.4fr; }
[data-view="passport"] .profile-pedigree-card .detail-row { min-height: 58px; }
[data-view="passport"] .profile-identity-card { order:3; }
[data-view="passport"] .profile-primary-actions { order:4; }
[data-view="passport"] .profile-pedigree-card { order:5; }
[data-view="passport"] .profile-breeding-card { order:6; }
[data-view="passport"] .profile-details-card { order:7; }
[data-view="passport"] .profile-problems-card { order:8; }
[data-view="passport"] .profile-rides-card { order:9; }

[data-view="modern"] .profile-cover { border-radius: 16px; }
[data-view="modern"] .profile-primary-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
[data-view="modern"] .profile-primary-actions .btn { min-height: 44px; width: 100%; }

[data-view="qatar"] .profile-cover { aspect-ratio: 4 / 5; min-height: 420px; border-radius: 2px; border-bottom: 3px solid var(--gold-2); }
[data-view="qatar"] .profile-crest { display: grid; place-items: center; position: absolute; z-index: 4; top: 22px; inset-inline-start: 22px; width: 62px; height: 62px; color: #ead5a3; border: 1px solid currentColor; border-radius: 50%; }
[data-view="qatar"] .profile-cover .cover-name h2 { font-size: 2.15rem; font-weight: 500; }

/* Theme 1 — Luxury Stud Book */
[data-view="luxury"] {
  --sand:#eee5d4; --sand-2:#e1d3ba; --surface:#fffaf0; --surface-2:#f6ecdc;
  --ink:#2e211a; --ink-2:#5c4838; --muted:#6b5a47; --line:#d8c8aa; --line-2:#cbb791;
  --espresso:#3a281f; --espresso-2:#251a15; --gold:#bd9851; --gold-2:#9d7838; --gold-soft:#efe0bd;
  --green:#536c50; --green-bg:#e5ebdf; --green-ink:#3b5038;
  --radius:0px; --radius-sm:2px; --shadow:0 7px 22px rgba(55,39,29,.07); --shadow-lg:0 18px 38px rgba(45,31,23,.16);
}
[data-view="luxury"] body { background: #eee5d4; }
[data-view="luxury"] .header { background: #f8f0e2; color: var(--espresso); border-bottom: 1px solid var(--gold); box-shadow: 0 4px 20px rgba(58,40,31,.08); }
[data-view="luxury"] .brand-mark { border-radius: 0; color: var(--gold-2); }
[data-view="luxury"] .stable-switch { color: var(--espresso); background: transparent; border-color: var(--line-2); border-radius: 0; }
[data-view="luxury"] .nav { background:#36251e; border-top-color:#8f6f3c; }
[data-view="luxury"] .nav-btn { color:#d8cab5; border-radius:0; }
[data-view="luxury"] .nav-btn.active { color:#e3c686; }
[data-view="luxury"] .nav-action-ring { background:#ad8747; border-color:#36251e; border-radius:0; }
[data-view="luxury"] .card { border-radius:0; box-shadow:none; }
[data-view="luxury"] .card-title { font-family:var(--ff-display); font-size:.82rem; letter-spacing:.13em; color:var(--gold-2); }
[data-view="luxury"] .horse-card { border-radius:0; border-color:var(--line-2); box-shadow:none; }
[data-view="luxury"] .hc-photo, [data-view="luxury"] .hc-photo-ph { border-radius:0; }
[data-view="luxury"] .btn { border-radius:2px; }

/* Theme 2 — Stable Command Centre */
[data-view="command"] {
  --sand:#0d1714; --sand-2:#101d19; --surface:#172620; --surface-2:#12211c;
  --ink:#eef5ef; --ink-2:#c0d0c6; --muted:#8da399; --line:#294238; --line-2:#365347;
  --espresso:#0a1210; --espresso-2:#070d0b; --gold:#d8a94e; --gold-2:#e2b85c; --gold-soft:#352d18;
  --green:#69b583; --green-bg:#173a28; --green-ink:#9cdfb1;
  --amber:#d9a84b; --amber-bg:#382d15; --amber-ink:#f1c96d;
  --red:#e06858; --red-bg:#3e201d; --red-ink:#ff9b8e;
  --teal:#58a997; --teal-bg:#163730; --teal-ink:#87d1c0;
  --gray-100:#20312a; --radius:4px; --radius-sm:3px; --shadow:none; --shadow-lg:0 15px 35px rgba(0,0,0,.3);
  --ff-display:var(--ff-body);
}
[data-view="command"] body { background:#0d1714; }
[data-view="command"] .header { background:#0a1210; color:#eef5ef; border-bottom:1px solid #345246; box-shadow:none; }
[data-view="command"] .brand-mark { border-radius:3px; color:#80c497; }
[data-view="command"] .stable-switch { color:#c4d4ca; background:#15231e; border-color:#345246; border-radius:3px; }
[data-view="command"] .nav { background:#0a1210; border-top-color:#2b453a; box-shadow:none; }
[data-view="command"] .nav-btn { color:#8fa49a; border-radius:2px; }
[data-view="command"] .nav-btn.active { color:#90d5a8; background:#15261f; }
[data-view="command"] .nav-action-ring { background:#c18b31; color:#101713; border-color:#0a1210; border-radius:3px; box-shadow:none; }
[data-view="command"] .card { border:0; border-radius:3px; box-shadow:inset 0 3px #3a5b4e; }
[data-view="command"] .card-title { color:#a9bcb2; font-size:.68rem; }
[data-view="command"] .horse-card { border:0; border-radius:3px; background:#172620; box-shadow:none; }
[data-view="command"] .horse-card-top { padding:10px; }
[data-view="command"] .hc-photo-wrap { width:48px; height:48px; }
[data-view="command"] .hc-photo, [data-view="command"] .hc-photo-ph { border-radius:3px; }
[data-view="command"] .btn, [data-view="command"] input, [data-view="command"] select, [data-view="command"] textarea { border-radius:3px; }
[data-view="command"] .stat-tile { border-radius:3px; }

/* Theme 3 — Horse Passport */
[data-view="passport"] {
  --sand:#e9e2d2; --sand-2:#ded4c0; --surface:#fffdf7; --surface-2:#f4efe4;
  --ink:#173b30; --ink-2:#415f55; --muted:#5b6f68; --line:#d8d0bd; --line-2:#c6baa0;
  --espresso:#173f32; --espresso-2:#0f2d24; --gold:#c4a25f; --gold-2:#a98643; --gold-soft:#eee1bd;
  --green:#275a47; --green-bg:#e1ece6; --green-ink:#214c3c;
  --radius:4px; --radius-sm:3px; --shadow:0 5px 18px rgba(23,63,50,.06); --shadow-lg:0 18px 42px rgba(23,63,50,.16);
}
[data-view="passport"] body { background:#e9e2d2; }
[data-view="passport"] .header { background:#173f32; color:#f5eedc; border-bottom:1px solid #b89651; box-shadow:none; }
[data-view="passport"] .brand-mark { border-radius:0; color:#d4b979; }
[data-view="passport"] .stable-switch { border-radius:0; }
[data-view="passport"] .nav { background:#f5efdf; }
[data-view="passport"] .nav-btn { color:#587067; border-radius:0; }
[data-view="passport"] .nav-btn.active { color:#173f32; border-top:2px solid #a98643; }
[data-view="passport"] .nav-action-ring { background:#173f32; border-color:#f5efdf; border-radius:0; }
[data-view="passport"] .card, [data-view="passport"] .horse-card { border-radius:0; box-shadow:none; }
[data-view="passport"] .card-title { font-family:var(--ff-display); color:#856b37; font-size:.8rem; }
[data-view="passport"] .hc-photo, [data-view="passport"] .hc-photo-ph { border-radius:0; }

/* Theme 4 — Modern Equestrian */
[data-view="modern"] {
  --sand:#f4f2ec; --sand-2:#ebe8df; --surface:#ffffff; --surface-2:#f8f6f0;
  --ink:#163c31; --ink-2:#49625a; --muted:#596d66; --line:#e1ddd2; --line-2:#d2ccbd;
  --espresso:#174938; --espresso-2:#103629; --gold:#d2a64f; --gold-2:#ad8032; --gold-soft:#f4e7c8;
  --green:#1e654b; --green-bg:#e5f0ea; --green-ink:#194f3d;
  --radius:16px; --radius-sm:12px; --shadow:0 5px 18px rgba(28,65,52,.07); --shadow-lg:0 18px 38px rgba(28,65,52,.15);
  --ff-display:var(--ff-body);
}
[data-view="modern"] body { background:#f4f2ec; }
[data-view="modern"] .header { background:#fff; color:#163c31; border-bottom:1px solid #e1ddd2; box-shadow:0 4px 20px rgba(28,65,52,.06); }
[data-view="modern"] .brand-mark { border-radius:50%; color:#1e654b; }
[data-view="modern"] .stable-switch { color:#49625a; background:#f8f6f0; border-color:#ddd8cc; }
[data-view="modern"] .header-icon-btn { border-color:#ddd8cc; }
[data-view="modern"] .nav { background:#fff; }
[data-view="modern"] .nav-btn { color:#71847e; }
[data-view="modern"] .nav-btn.active { color:#1e654b; }
[data-view="modern"] .nav-action-ring { background:#1e654b; border-color:#fff; }
[data-view="modern"] .horse-card-grid { gap:14px; }
[data-view="modern"] .horse-card { border-radius:16px; overflow:hidden; }

/* Theme 5 — Qatar / Bilingual Stable */
[data-view="qatar"] {
  --sand:#eadfc9; --sand-2:#dfcfb0; --surface:#fffaf0; --surface-2:#f4ead8;
  --ink:#35281f; --ink-2:#624e3d; --muted:#6a5945; --line:#d8c7a7; --line-2:#c7b184;
  --espresso:#4a3729; --espresso-2:#2d231c; --gold:#c49a50; --gold-2:#9f7637; --gold-soft:#edddba;
  --green:#345a45; --green-bg:#e1e9df; --green-ink:#294936;
  --radius:10px; --radius-sm:7px; --shadow:0 5px 18px rgba(62,45,32,.07); --shadow-lg:0 18px 40px rgba(62,45,32,.16);
}
[data-view="qatar"] body { background:#eadfc9; }
[data-view="qatar"] .header { background:#4a3729; color:#fff6df; border-bottom:2px solid #bf944c; box-shadow:none; }
[data-view="qatar"] .brand-mark { border-radius:50%; color:#e2c27e; }
[data-view="qatar"] .nav { background:#3e3026; border-top-color:#a67e43; }
[data-view="qatar"] .nav-btn { color:#d9ccb9; font-size:.64rem; }
[data-view="qatar"] .nav-btn > span:last-child { display:block; width:100%; padding-inline:2px; white-space:normal; overflow-wrap:anywhere; text-align:center; font-size:.59rem; line-height:1.25; }
[data-view="qatar"] .nav-btn.active { color:#efcd84; }
[data-view="qatar"] .nav-action-ring { background:#b88c43; border-color:#3e3026; }
[data-view="qatar"] .card { border-color:#cfbc98; }
[data-view="qatar"] .card-title { font-family:var(--ff-display); color:#7a5c2d; }

/* True RTL mirroring; numeric record values retain their readable direction. */
[dir="rtl"] .brand-copy { align-items:flex-start; }
[dir="rtl"] .menu-tile { text-align:right; }
[dir="rtl"] .menu-tile svg, [dir="rtl"] .hc-go { transform:rotate(180deg); }
[dir="rtl"] .profile-id-line, [dir="rtl"] .invite-code { direction:ltr; text-align:right; }
[dir="rtl"] .view-choice { text-align:right; }
[dir="rtl"] .stat-tile, [dir="rtl"] .ops-metrics button { text-align:right; }

@media (min-width: 760px) {
  .header { padding-inline: 26px; }
  .view-context { max-width:none; }
  .section { max-width:1120px; padding:30px 28px 110px; }
  .horse-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .view-hero { min-height:360px; }
  .dashboard-actions { grid-template-columns:repeat(4,1fr); }
  .stat-grid { grid-template-columns:repeat(4,1fr); }
  .modal { max-width:760px; }
  .profile-cover { min-height:460px; }
  [data-view="modern"] .horse-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  [data-view="modern"] .horse-card-top { display:block; padding:0; }
  [data-view="modern"] .hc-photo-wrap { width:100%; height:190px; }
  [data-view="modern"] .hc-photo, [data-view="modern"] .hc-photo-ph { border-radius:0; }
  [data-view="modern"] .hc-main { padding:14px 14px 4px; }
  [data-view="modern"] .hc-go { position:absolute; inset-inline-end:14px; bottom:19px; }
  [data-view="command"] #app { padding-inline-start:190px; }
  [data-view="command"] .nav { top:76px; bottom:0; inset-inline-start:0; inset-inline-end:auto; width:190px; grid-template-columns:1fr; grid-auto-rows:68px; align-content:start; padding:18px 10px; border-top:0; border-inline-end:1px solid #294238; }
  [data-view="command"] .nav-btn { flex-direction:row; justify-content:flex-start; gap:12px; padding:0 14px; font-size:.72rem; transform:none; }
  [data-view="command"] .nav-action { order:4; }
  [data-view="command"] .nav-action-ring { width:34px; height:34px; border:0; }
  [data-view="command"] .nav-action-ring svg { width:18px; height:18px; }
  [data-view="command"] .section { max-width:1280px; }
  [data-view="command"] .horse-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
}

@media (max-width: 430px) {
  .header { padding-inline:13px; gap:7px; }
  .brand-mark { width:35px; height:35px; }
  .header h1 { font-size:1.12rem; }
  .header-icon-btn { width:40px; height:40px; }
  .logout-btn { display:none; }
  .stable-switch { max-width:48vw; }
  .section { padding-inline:12px; }
  .view-hero { min-height:235px; }
  .luxury-hero, .qatar-hero { min-height:290px; }
  .luxury-hero .hero-copy, .qatar-hero .hero-copy { width:64%; }
  .luxury-hero .hero-photo, .qatar-hero .hero-photo { width:45%; }
  .view-hero h2 { font-size:2.15rem; }
  .command-hero { min-height:150px; padding:18px; }
  .command-status { width:86px; height:86px; }
  .ops-metrics { grid-template-columns:repeat(2,1fr); }
  .view-choice { grid-template-columns:70px 1fr 18px; }
  .profile-cover { min-height:310px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* ========================================================================== */
/* YardMate visual checkpoint 0.14 — five front doors, one shared inner core. */
/* ========================================================================== */

.home-experience { width: 100%; padding-block-end: 10px; }
.home-experience button { font: inherit; color: inherit; }
.home-experience svg,
.profile-core svg,
.home-horse-picker svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-section-heading { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.home-section-heading h3 { margin: 0; font-family: var(--ff-body); font-size: 1.05rem; font-weight: 760; letter-spacing: -.018em; }
.home-section-heading > button { min-height: 34px; display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .75rem; font-weight: 700; }
.home-section-heading > button svg { width: 15px; height: 15px; }
[dir="rtl"] .home-section-heading > button svg,
[dir="rtl"] .home-horse-arrow,
[dir="rtl"] .schedule-row > svg,
[dir="rtl"] .command-queue button > svg:last-child,
[dir="rtl"] .passport-index button > svg:last-child,
[dir="rtl"] .profile-inline-link svg { transform: scaleX(-1); }

.horse-photo-frame,
.horse-photo-empty { position: relative; overflow: hidden; background: #e7e1d4; }
.horse-photo-frame > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
.horse-photo-empty { display: grid; place-content: center; justify-items: center; gap: 7px; color: #766f62; text-align: center; }
.horse-photo-empty svg { width: 42px; height: 42px; stroke-width: 1.2; opacity: .72; }
.horse-photo-empty span { max-width: 14ch; font-size: .66rem; font-weight: 700; line-height: 1.2; }

.home-empty { min-height: 220px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.home-block + .home-block { margin-block-start: 24px; }

/* Modern and Qatar use a horizontal photographic roster, not dashboard cards. */
.modern-greeting { margin: 2px 2px 25px; }
.modern-greeting p { margin: 0 0 6px; color: #a17429; font-size: .72rem; font-weight: 760; }
.modern-greeting h2 { margin: 0; max-width: 12ch; font-family: var(--ff-body); font-size: 2rem; font-weight: 790; letter-spacing: -.038em; line-height: 1.02; text-wrap: balance; }
.modern-greeting > span { display: block; margin-block-start: 9px; color: var(--muted); font-size: .88rem; }
.home-horse-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; padding: 2px 1px 8px; }
.home-horse-rail::-webkit-scrollbar { display: none; }
.home-horse-card { position: relative; min-width: 0; overflow: hidden; display: grid; grid-template-rows: 190px auto; scroll-snap-align: start; border: 1px solid #ded9ce; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(26, 67, 52, .08); padding: 0; text-align: start; cursor: pointer; }
.home-horse-card:active { transform: scale(.985); }
.home-horse-photo { width: 100%; height: 190px; border-radius: 0; }
.home-horse-copy { min-width: 0; display: block; padding: 14px 44px 15px 15px; }
[dir="rtl"] .home-horse-copy { padding: 14px 15px 15px 44px; }
.home-horse-copy strong,
.home-horse-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-horse-copy strong { color: #153f32; font-size: 1.17rem; }
.home-horse-copy small { margin-block-start: 3px; color: #66776f; font-size: .73rem; }
.home-horse-arrow { position: absolute; inset-inline-end: 15px; inset-block-end: 23px; color: #9e7939; }

.home-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #ddd8cd; }
.home-quick-actions button { min-width: 0; min-height: 82px; display: grid; justify-items: center; align-content: center; gap: 8px; border: 0; border-inline-end: 1px solid #e3ded4; border-block-end: 1px solid #e3ded4; background: transparent; color: #204f40; cursor: pointer; padding: 9px 5px; }
.home-quick-actions button:nth-child(3n) { border-inline-end: 0; }
.home-quick-actions button:nth-last-child(-n+3) { border-block-end: 0; }
.home-quick-actions button:active { background: #ebe8df; }
.home-quick-actions svg { width: 24px; height: 24px; }
.home-quick-actions span { font-size: .69rem; font-weight: 720; line-height: 1.15; text-align: center; }

.schedule-list { border-block: 1px solid #ddd8ce; }
.schedule-row { width: 100%; min-height: 64px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 20px; align-items: center; gap: 10px; border: 0; border-block-end: 1px solid #e4dfd5; background: transparent; text-align: start; cursor: pointer; }
.schedule-row:last-child { border-block-end: 0; }
.schedule-row time { color: #9a722f; font-size: .75rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.schedule-row span { min-width: 0; }
.schedule-row strong,
.schedule-row small { display: block; overflow-wrap: anywhere; }
.schedule-row strong { font-size: .9rem; }
.schedule-row small { margin-block-start: 2px; color: #687871; font-size: .72rem; }
.schedule-row > svg { width: 16px; height: 16px; color: #8a9a93; }
.schedule-empty { min-height: 86px; display: flex; align-items: center; gap: 14px; border-block: 1px solid #ddd8ce; color: #687871; }
.schedule-empty > svg { width: 25px; height: 25px; color: #9b7737; }
.schedule-empty p { margin: 0; }
.schedule-empty strong,
.schedule-empty span { display: block; }
.schedule-empty strong { color: #21483c; font-size: .88rem; }
.schedule-empty span { margin-block-start: 2px; font-size: .73rem; }

/* Luxury: a stud-book feature plate and fine-rule ledgers. */
[data-view="luxury"] #section-today { padding-inline: 16px; }
.luxury-mast { margin-block: 6px 18px; text-align: center; }
.luxury-mast span { color: #92703a; font-size: .67rem; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.luxury-mast h2 { margin: 5px 0 13px; color: #35251d; font-size: 2.25rem; font-weight: 500; line-height: .95; letter-spacing: -.025em; }
.luxury-mast i { display: block; width: 100%; height: 1px; background: #b99250; }
.luxury-feature { position: relative; width: 100%; min-height: 355px; display: block; overflow: hidden; border: 0; background: #3d2a21; padding: 0; text-align: start; cursor: pointer; }
.luxury-feature-photo { width: 100%; height: 355px; background: #d9cbb4; }
.luxury-feature-photo.horse-photo-frame::after { content: ""; position: absolute; inset: 48% 0 0; z-index: 3; background: linear-gradient(to bottom, transparent, rgba(29, 18, 13, .88)); pointer-events: none; }
.luxury-feature-copy { position: absolute; z-index: 4; inset-inline: 20px; inset-block-end: 19px; display: block; color: #fff9ec; border-block-start: 1px solid rgba(232, 202, 142, .7); padding-block-start: 11px; }
.luxury-feature-copy small,
.luxury-feature-copy strong,
.luxury-feature-copy em { display: block; }
.luxury-feature-copy small { color: #e4c47f; font-family: var(--ff-body); font-size: .63rem; font-style: normal; letter-spacing: .11em; text-transform: uppercase; }
.luxury-feature-copy strong { margin-block-start: 4px; font-family: var(--ff-display); font-size: 2.3rem; font-weight: 500; line-height: 1; }
.luxury-feature-copy em { margin-block-start: 5px; font-family: var(--ff-body); font-size: .74rem; font-style: normal; opacity: .82; }
.luxury-ledger { display: grid; grid-template-columns: 1.25fr .9fr; border-block-end: 1px solid #c7b184; background: #fffaf0; }
.luxury-ledger article { min-width: 0; padding: 17px 12px; }
.luxury-ledger article + article { border-inline-start: 1px solid #cdb990; }
.luxury-ledger h3 { margin: 0 0 10px; color: #91703a; font-size: .67rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.luxury-ledger article > button,
.luxury-ledger article > div { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; border: 0; border-block-start: 1px solid #e5dac5; background: transparent; padding-block: 8px; text-align: start; }
.luxury-ledger article > button { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.luxury-ledger article > button span { grid-column: 1; font-size: .76rem; font-weight: 700; }
.luxury-ledger article > button strong { grid-column: 1; color: #746657; font-size: .64rem; font-weight: 500; }
.luxury-ledger article > button time { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #8b6530; font-size: .63rem; font-weight: 700; }
.luxury-ledger article > div span { color: #776958; font-size: .61rem; }
.luxury-ledger article > div strong { overflow: hidden; color: #34271f; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.luxury-ledger p { color: #746657; font-size: .72rem; line-height: 1.45; }
.luxury-open-record { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; color: #513b2d; cursor: pointer; font-size: .78rem; font-weight: 740; }

/* Command: dense operational queue with compact, meaningful metrics. */
[data-view="command"] #section-today { max-width: 920px; padding: 16px 12px 104px; }
.command-heading { min-height: 56px; display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-block-end: 14px; }
.command-heading h2 { margin: 0; font-family: var(--ff-body); font-size: 1.7rem; font-weight: 790; letter-spacing: -.035em; line-height: 1; }
.command-heading p { margin: 7px 0 0; color: #8da399; font-size: .72rem; }
.command-heading > span { flex: none; border: 1px solid #3b5b4d; color: #91c7a3; padding: 5px 8px; font-size: .59rem; font-weight: 760; text-transform: uppercase; letter-spacing: .07em; }
.command-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #304a3f; margin-block-end: 18px; }
.command-metrics button { min-width: 0; min-height: 92px; display: grid; align-content: center; gap: 7px; border: 0; border-inline-end: 1px solid #304a3f; background: #12211c; text-align: start; cursor: pointer; padding: 12px 8px; }
.command-metrics button:last-child { border-inline-end: 0; }
.command-metrics strong { font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.command-metrics span { color: #93a69d; font-size: .57rem; font-weight: 720; line-height: 1.2; text-transform: uppercase; }
.command-metrics .urgent strong { color: #ff9b8e; }
.command-metrics .due strong { color: #f1c96d; }
.command-metrics .active strong { color: #87d1c0; }
.command-metrics .clear strong { color: #9cdfb1; }
.command-panel { margin-block-end: 18px; }
.home-command .home-section-heading { margin: 0; border-block-end: 1px solid #304a3f; }
.home-command .home-section-heading h3 { color: #c7d4cd; font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.home-command .home-section-heading > button { color: #94a89e; }
.command-queue button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 5px 21px minmax(0, 1fr) auto 15px; align-items: center; gap: 9px; border: 0; border-block-end: 1px solid #263d34; background: transparent; color: #dfe9e2; text-align: start; cursor: pointer; }
.command-queue button:active { background: #14261f; }
.command-queue i { width: 4px; height: 20px; background: #6a8578; }
.command-queue i.urgent { background: #e06858; }
.command-queue i.due { background: #d9a84b; }
.command-queue i.clear { background: #69b583; }
.command-queue svg { width: 17px; height: 17px; color: #87a397; }
.command-queue span { min-width: 0; font-size: .78rem; font-weight: 650; }
.command-queue strong { color: #f0f5f1; font-size: .88rem; font-variant-numeric: tabular-nums; }
.command-queue button > svg:last-child { width: 13px; height: 13px; color: #678176; }
.home-command .schedule-list,
.home-command .schedule-empty { border-color: #304a3f; }
.home-command .schedule-row { border-color: #263d34; color: #dfe9e2; }
.home-command .schedule-row time { color: #e2b85c; }
.home-command .schedule-row small,
.home-command .schedule-empty { color: #8da399; }
.home-command .schedule-empty strong { color: #dfe9e2; }

/* Passport: one horse as an official identity folio, then care chronology. */
[data-view="passport"] #section-today { padding-inline: 12px; }
.passport-identity { position: relative; width: 100%; min-height: 360px; display: block; overflow: hidden; border: 0; background: #173f32; padding: 0; text-align: start; cursor: pointer; }
.passport-identity-photo { width: 100%; height: 360px; background: #1f4c3e; color: #d9cfb8; }
.passport-identity-photo.horse-photo-frame::after { content: ""; position: absolute; z-index: 3; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, rgba(8, 38, 29, .92)); pointer-events: none; }
.passport-seal { position: absolute; z-index: 4; inset-block-start: 18px; inset-inline-start: 18px; width: 54px; height: 65px; display: grid; place-items: center; border: 1px solid #d2b26f; border-block-end-width: 4px; color: #f0ddb1; font-family: var(--ff-display); font-size: 1.1rem; }
.passport-identity-copy { position: absolute; z-index: 4; inset-inline: 20px; inset-block-end: 21px; color: #fffdf6; }
.passport-identity-copy small,
.passport-identity-copy strong,
.passport-identity-copy em { display: block; }
.passport-identity-copy small { color: #d4b66e; font-size: .64rem; font-style: normal; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.passport-identity-copy strong { margin-block-start: 5px; font-family: var(--ff-display); font-size: 2.35rem; font-weight: 500; line-height: 1; }
.passport-identity-copy em { margin-block-start: 6px; font-size: .75rem; font-style: normal; opacity: .84; }
.passport-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #c7b98f; border-block-start: 0; background: #fffdf7; }
.passport-facts div { min-width: 0; padding: 12px 8px; border-inline-end: 1px solid #ded4bd; }
.passport-facts div:last-child { border-inline-end: 0; }
.passport-facts span,
.passport-facts strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passport-facts span { color: #68776f; font-size: .55rem; font-weight: 730; text-transform: uppercase; }
.passport-facts strong { margin-block-start: 4px; color: #173f32; font-size: .7rem; }
.passport-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 18px; border-block: 1px solid #c8bea7; }
.passport-index button { min-width: 0; min-height: 52px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; align-items: center; gap: 8px; border: 0; border-inline-end: 1px solid #d6ccb6; border-block-end: 1px solid #d6ccb6; background: transparent; text-align: start; cursor: pointer; }
.passport-index button:nth-child(2n) { border-inline-end: 0; }
.passport-index button:nth-last-child(-n+2) { border-block-end: 0; }
.passport-index svg { width: 17px; height: 17px; color: #856b37; }
.passport-index span { font-size: .72rem; font-weight: 720; }
.passport-timeline .home-section-heading { border-block-end: 1px solid #bcae8e; margin: 0; }
.passport-timeline .home-section-heading h3 { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 500; }
.passport-timeline > section { display: grid; grid-template-columns: 95px minmax(0, 1fr); border-block-end: 1px solid #d3c8af; padding-block: 11px; }
.passport-timeline h4 { display: flex; align-items: start; justify-content: space-between; margin: 0; padding-inline-end: 12px; color: #536b61; font-size: .66rem; font-weight: 760; text-transform: uppercase; }
.passport-timeline h4 span { color: #967739; font-variant-numeric: tabular-nums; }
.passport-timeline section > button { min-height: 34px; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 0; background: transparent; text-align: start; cursor: pointer; }
.passport-timeline section > button i { width: 5px; height: 18px; background: #6f8c7e; }
.passport-timeline section > button i.overdue { background: #b14e39; }
.passport-timeline section > button i.due { background: #c68f36; }
.passport-timeline section > button span { font-size: .71rem; font-weight: 700; }
.passport-timeline section > button time { color: #6e776f; font-size: .65rem; }
.passport-timeline section > p { margin: 0; color: #7b817b; font-size: .7rem; }

/* Qatar: Modern usability with equal-weight Arabic and restrained local tone. */
[data-view="qatar"] #section-today { padding-inline: 12px; }
.qatar-greeting { position: relative; min-height: 174px; overflow: hidden; margin: 0 0 25px; border-block-end: 2px solid #b78d45; background: #4a3729; color: #fff7e7; padding: 20px; }
.qatar-greeting::after { content: "YM"; position: absolute; inset-inline-end: 17px; inset-block-start: 17px; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid #d4b66f; border-radius: 50%; color: #e3cc98; font-family: var(--ff-display); font-size: .85rem; }
.qatar-greeting > p { margin: 0 0 13px; color: #d4b05e; font-size: .62rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.qatar-greeting h2 { max-width: calc(100% - 58px); margin: 0; font-size: 1.42rem; font-weight: 500; line-height: 1.25; }
.qatar-greeting h2 span { display: block; }
.qatar-greeting h2 span[lang="ar"] { margin-block-start: 3px; font-family: Tahoma, "Noto Sans Arabic", Arial, sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.6; letter-spacing: normal; }
.qatar-greeting > div { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-block-start: 10px; color: #ddcfb8; font-size: .72rem; }
.qatar-greeting > div span[lang="ar"] { line-height: 1.65; }
.home-qatar .home-section-heading h3 { color: #4a3729; font-family: Tahoma, "Noto Sans Arabic", var(--ff-body); font-size: .94rem; line-height: 1.6; letter-spacing: normal; }
.qatar-horse-card { border-color: #ccb98d; border-radius: 10px; background: #fffaf0; box-shadow: none; }
.qatar-horse-card .home-horse-copy strong { color: #4a3729; }
.home-qatar .home-quick-actions { border-color: #cdbb93; }
.home-qatar .home-quick-actions button { border-color: #d9c8a4; color: #4a3729; }
.home-qatar .schedule-list,
.home-qatar .schedule-empty { border-color: #cdbb93; }
.home-qatar .schedule-row { border-color: #dccdab; }
.home-qatar .schedule-row strong,
.home-qatar .schedule-empty strong { color: #4a3729; }

/* Shared YardMate Core: selected Home style stops at the Home boundary. */
html[data-inner-core="true"] {
  --sand:#f4f2ec; --sand-2:#ebe8df; --surface:#fffdf8; --surface-2:#f8f6ef;
  --ink:#173f32; --ink-2:#49645a; --muted:#60746c; --line:#dfdbd1; --line-2:#cec8bb;
  --espresso:#173f32; --espresso-2:#102f26; --gold:#c2a05e; --gold-2:#9a7637; --gold-soft:#f1e5c7;
  --green:#27644c; --green-bg:#e3eee8; --green-ink:#1e523e;
  --radius:16px; --radius-sm:12px; --shadow:0 5px 18px rgba(23,63,50,.07); --shadow-lg:0 18px 42px rgba(23,63,50,.16);
  --ff-display:var(--ff-body);
}
html[data-inner-core="true"] body { background: #f4f2ec; }
html[data-inner-core="true"] .header { background: #fffdf8; color: #173f32; border-block-end: 1px solid #dfdbd1; box-shadow: 0 4px 18px rgba(23,63,50,.06); }
html[data-inner-core="true"] .brand-mark { color: #27644c; border-radius: 50%; }
html[data-inner-core="true"] .stable-switch { color: #49645a; border-color: #d6d0c4; background: #f7f4ed; border-radius: 10px; }
html[data-inner-core="true"] .header-icon-btn { color: #173f32; border-color: #d6d0c4; }
html[data-inner-core="true"] .nav { background: #fff; border-color: #dfdbd1; box-shadow: 0 -8px 24px rgba(23,63,50,.08); }
html[data-inner-core="true"] .nav-btn { color: #73847d; border-radius: 10px; }
html[data-inner-core="true"] .nav-btn.active { color: #1e654b; background: #edf3ef; }
html[data-inner-core="true"] .nav-action-ring { background: #1e654b; color: white; border-color: #fff; border-radius: 50%; }

/* Profile Core remains consistent even when opened directly from a styled Home. */
#modal-content:has(.profile-core) { max-width: 760px; background: #f4f2ec; color: #173f32; border-block-start-color: #b38d49; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
#modal-content:has(.profile-core)::before { display: none; }
#modal-content:not(:has(.profile-core)) {
  --surface:#fffdf8; --surface-2:#f8f6ef; --ink:#173f32; --ink-2:#49645a;
  --muted:#60746c; --line:#dfdbd1; --line-2:#cec8bb; --espresso:#173f32;
  --espresso-2:#102f26; --gold:#c2a05e; --gold-2:#9a7637; --green:#27644c;
  --green-bg:#e3eee8; --green-ink:#1e523e; --radius:16px; --radius-sm:12px;
  background: #fffdf8; color: #173f32; border-block-start-color: #b38d49;
}
.profile-core { --ink:#173f32; --ink-2:#49645a; --muted:#60746c; --line:#dfdbd1; --line-2:#cec8bb; --surface:#fffdf8; --surface-2:#f8f6ef; --green:#27644c; --green-bg:#e3eee8; --green-ink:#1e523e; --gold:#c2a05e; --gold-2:#9a7637; position: relative; display: block !important; color: var(--ink); padding-block-end: 8px; }
.profile-core > * { order: initial !important; }
.profile-core .profile-close { inset-block-start: 12px; inset-inline-end: 0; border-color: rgba(255,255,255,.7); background: rgba(18, 43, 34, .78); }
.profile-core .profile-cover { min-height: 330px; aspect-ratio: 4 / 4.3; margin: 0 -16px 0; border: 0; border-radius: 0; background: #d9ded7; box-shadow: none; }
.profile-core .profile-cover::after { content: ""; position: absolute; z-index: 1; inset: 47% 0 0; background: linear-gradient(to bottom, transparent, rgba(11, 39, 30, .92)); pointer-events: none; }
.profile-core .cover-fallback { z-index: 0; display: grid; place-content: center; justify-items: center; gap: 9px; color: #60746c; background: #dfe4df; }
.profile-core .cover-fallback svg { width: 56px; height: 56px; }
.profile-core .cover-fallback span { font-size: .72rem; font-weight: 700; }
.profile-core .profile-cover img { z-index: 1; }
.profile-core .cover-name { inset-inline: 20px; inset-block-end: 20px; z-index: 3; padding: 0; }
.profile-core .cover-name h2 { color: #fff; font-family: var(--ff-body); font-size: 2.25rem; font-weight: 790; letter-spacing: -.04em; line-height: 1; }
.profile-core .registered-name { color: #e7cf98; font-family: var(--ff-body); font-size: .78rem; font-style: normal; }
.profile-core .cover-name .meta,
.profile-core .profile-id-line { color: #f2f4f1; opacity: .86; }
.profile-core .profile-id-line { letter-spacing: normal; }
.profile-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; border-block-end: 1px solid #d9d5cc; background: #fffdf8; padding-inline: 12px; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs button { flex: 0 0 auto; min-height: 48px; border: 0; border-block-end: 2px solid transparent; background: transparent; color: #60746c; cursor: pointer; padding-inline: 10px; font-size: .72rem; font-weight: 720; }
.profile-tabs button[aria-current="page"] { border-color: #a57d37; color: #173f32; }
.profile-status { padding-block: 14px 8px; }
.profile-core .profile-chip-row { padding: 0; }
.profile-status > p { margin: 9px 0 0; color: #60746c; font-size: .75rem; }
.profile-core .chip { border-radius: 7px; padding: 5px 8px; }
.profile-primary-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-block: 2px 18px; }
.profile-primary-actions button { min-width: 0; min-height: 68px; display: grid; place-content: center; justify-items: center; gap: 6px; border: 1px solid #d2cdc2; border-radius: 12px; background: #fffdf8; color: #214e40; cursor: pointer; padding: 8px 4px; }
.profile-primary-actions button:active { transform: scale(.97); }
.profile-primary-actions .profile-action-primary { border-color: #173f32; background: #173f32; color: white; }
.profile-primary-actions svg { width: 22px; height: 22px; }
.profile-primary-actions span { overflow: hidden; font-size: .64rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.profile-core-grid { display: grid; gap: 12px; }
.profile-core .card { border: 1px solid #dfdbd1; border-radius: 14px; background: #fffdf8; box-shadow: none; padding: 16px; }
.profile-core .card-title { color: #6e623f; font-family: var(--ff-body); font-size: .71rem; letter-spacing: .06em; }
.profile-core .card-title svg { width: 17px; height: 17px; }
.profile-core .detail-row { min-height: 44px; gap: 14px; }
.profile-core .detail-row .label { color: #667970; }
.profile-core .detail-row .value { color: #173f32; }
.profile-inline-link { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-block-start: 8px; border: 0; border-block-start: 1px solid #e1ddd4; background: transparent; color: #1f5c46; cursor: pointer; padding: 10px 0 0; font-size: .75rem; font-weight: 740; }
.profile-inline-link svg { width: 16px; height: 16px; }
.profile-ride-row { padding-block: 11px; border-block-end: 1px solid #e1ddd4; }
.profile-ride-row:last-child { border-block-end: 0; }
.profile-ride-row > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-ride-row strong { font-size: .78rem; }
.profile-ride-row button { min-height: 32px; border: 0; background: transparent; color: #974434; cursor: pointer; font-size: .7rem; text-decoration: underline; text-underline-offset: 3px; }
.profile-ride-row > span,
.profile-ride-row > p { display: block; margin: 3px 0 0; color: #60746c; font-size: .72rem; }
.profile-record-links { margin-block-start: 18px; }
.profile-record-links h3 { margin: 0 0 9px; font-family: var(--ff-body); font-size: .78rem; font-weight: 760; }
.profile-record-links > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid #d9d5cc; }
.profile-record-links button { min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 8px; border: 0; border-inline-end: 1px solid #dfdbd1; border-block-end: 1px solid #dfdbd1; background: transparent; color: #214e40; cursor: pointer; padding: 8px; text-align: start; }
.profile-record-links button:nth-child(2n) { border-inline-end: 0; }
.profile-record-links button span { min-width: 0; overflow: hidden; font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.home-horse-picker { display: grid; gap: 0; }
.home-horse-picker > button { min-height: 68px; display: grid; grid-template-columns: 50px minmax(0, 1fr) 18px; align-items: center; gap: 12px; border: 0; border-block-end: 1px solid var(--line); background: transparent; color: var(--ink); text-align: start; cursor: pointer; }
.picker-photo { width: 50px; height: 50px; border-radius: 10px; }
.picker-photo svg { width: 23px; height: 23px; }
.picker-photo span { display: none; }
.home-horse-picker strong,
.home-horse-picker small { display: block; }
.home-horse-picker small { margin-block-start: 2px; color: var(--muted); font-size: .72rem; }

/* Direction-specific typography: Arabic keeps connected script and room. */
[dir="rtl"] .home-experience,
[dir="rtl"] .profile-core { font-family: Tahoma, "Noto Sans Arabic", Arial, sans-serif; line-height: 1.65; }
[dir="rtl"] .home-experience h2,
[dir="rtl"] .home-experience h3,
[dir="rtl"] .home-experience h4,
[dir="rtl"] .profile-core h2,
[dir="rtl"] .profile-core h3,
[dir="rtl"] .luxury-feature-copy small,
[dir="rtl"] .command-heading h2,
[dir="rtl"] .command-heading > span { letter-spacing: normal; line-height: 1.6; }
[dir="rtl"] .profile-core .cover-name h2 { line-height: 1.35; letter-spacing: normal; }

@media (min-width: 760px) {
  .home-horse-rail { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .home-horse-card { grid-template-rows: 220px auto; }
  .home-horse-photo { height: 220px; }
  .luxury-feature,
  .luxury-feature-photo,
  .passport-identity,
  .passport-identity-photo { min-height: 520px; height: 520px; }
  .luxury-ledger { grid-template-columns: 1.5fr 1fr; }
  .profile-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-core .profile-cover { min-height: 520px; aspect-ratio: 16 / 11; }
  .command-metrics button { min-height: 110px; padding-inline: 18px; }
  .command-metrics strong { font-size: 2.35rem; }
}

@media (max-width: 370px) {
  .home-horse-rail { grid-auto-columns: 84vw; }
  .home-quick-actions span { font-size: .64rem; }
  .command-metrics strong { font-size: 1.55rem; }
  .command-metrics span { font-size: .52rem; }
  .luxury-ledger { grid-template-columns: 1fr; }
  .luxury-ledger article + article { border-inline-start: 0; border-block-start: 1px solid #cdb990; }
  .profile-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four compact locale choices are available before authentication. */
.login-languages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-block: 10px 16px; }
.login-languages button { border: 1px solid #d4d9d4; border-radius: 6px; padding: 6px 8px; background: #fff; color: #173f32; cursor: pointer; }
.login-languages button:focus-visible { outline: 2px solid #216c51; outline-offset: 2px; }

.public-language { display:flex; flex-wrap:wrap; gap:8px; margin-block:0 20px; }
.public-language button { font:inherit; padding:8px 12px; border:1px solid #bccac1; border-radius:8px; background:#fff; color:#173f32; cursor:pointer; }
.public-language button[aria-pressed="true"] { background:#173f32; color:#fff; }
.public-language button:focus-visible { outline:2px solid #417a58; outline-offset:3px; }

/* YardMate v0.16 — daily Yard Board / operations workspace */
.ops-shell { max-width: 1120px; margin: 0 auto; padding: 4px 0 28px; }
.ops-hero { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:22px; margin-bottom:14px; background:linear-gradient(145deg,#173f32,#225841); color:#fffaf0; border-radius:18px; box-shadow:var(--shadow); }
.ops-hero p { margin:0 0 5px; color:#e4c47d; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ops-hero h2 { margin:0 0 6px; font-size:1.7rem; line-height:1.05; }
.ops-hero span { display:block; max-width:54ch; color:#e3eee8; font-size:.9rem; }
.ops-hero .btn { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }
.ops-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:13px; }
.ops-stat { min-height:78px; padding:13px; background:var(--surface); border:1px solid var(--line); border-radius:14px; position:relative; overflow:hidden; }
.ops-stat::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--gold); }
.ops-stat strong { display:block; font-size:1.55rem; line-height:1; color:var(--espresso); }
.ops-stat span { display:block; margin-top:7px; color:var(--muted); font-size:.75rem; font-weight:700; }
.ops-stat.tone-problem::before { background:var(--red); }.ops-stat.tone-feed::before { background:#a17429; }.ops-stat.tone-care::before,.ops-stat.tone-task::before { background:var(--green); }
.ops-primary-actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ops-panel { margin-bottom:13px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.ops-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ops-panel-head h3 { margin:0; font-size:.95rem; color:var(--espresso); }
.ops-panel-head > span { min-width:28px; padding:3px 8px; text-align:center; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:800; }
.ops-row { display:flex; align-items:center; gap:9px; padding:11px 0; border-top:1px solid var(--line); }
.ops-row:first-of-type { border-top:0; }.ops-row > div:first-child { min-width:0; flex:1; }
.ops-row strong,.ops-row span,.ops-row small { display:block; }.ops-row strong { font-size:.86rem; color:var(--ink); }.ops-row span { margin-top:2px; color:var(--ink-2); font-size:.8rem; overflow-wrap:anywhere; }.ops-row small { margin-top:4px; color:var(--muted); font-size:.7rem; }
.ops-row.urgent { padding-inline-start:9px; border-inline-start:4px solid var(--red); }.ops-row.due { padding-inline-start:9px; border-inline-start:4px solid #c89431; }
.ops-empty { padding:15px 8px; color:var(--muted); font-size:.82rem; text-align:center; }
.ops-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ops-tool { min-height:58px; display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); text-align:start; cursor:pointer; }
.ops-tool-mark { width:8px; height:30px; border-radius:99px; background:var(--green); }.ops-tool.tone-problem .ops-tool-mark { background:var(--red); }.ops-tool.tone-feed .ops-tool-mark { background:#a17429; }.ops-tool.tone-docs .ops-tool-mark { background:#55788c; }.ops-tool.tone-ride .ops-tool-mark { background:#66528c; }
.ops-tool strong { font-size:.8rem; }.ops-locations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ops-location { min-width:0; padding:10px; text-align:start; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); cursor:pointer; }.ops-location strong,.ops-location span { display:block; }.ops-location strong { font-size:.8rem; }.ops-location span { margin-top:3px; color:var(--muted); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-modal-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px; }.modal h3 { margin:18px 0 7px; font-size:.86rem; color:var(--espresso); }
.ops-show { margin:12px 0; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }.ops-show .ops-row { padding-top:0; }
.ops-checklist { display:grid; gap:5px; margin:6px 0 9px; }.ops-checklist button { padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); text-align:start; color:var(--ink-2); }.ops-checklist button.done { color:var(--green-ink); text-decoration:line-through; background:var(--green-bg); }
.ops-quick-location { padding:14px; background:var(--green-bg); border-radius:12px; }.ops-quick-location strong,.ops-quick-location span { display:block; }.ops-quick-location span { margin-top:3px; color:var(--green-ink); font-size:.75rem; }
.ops-quick-line { display:grid; grid-template-columns:minmax(70px,.35fr) 1fr; gap:5px 10px; padding:10px 0; border-top:1px solid var(--line); }.ops-quick-line strong { font-size:.76rem; }.ops-quick-line span { font-size:.8rem; }.ops-quick-line small { grid-column:2; color:var(--muted); }
@media (min-width:760px) { .ops-stats { grid-template-columns:repeat(6,minmax(0,1fr)); }.ops-tools { grid-template-columns:repeat(4,minmax(0,1fr)); }.ops-locations { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:480px) { .ops-shell { padding-inline:1px; }.ops-hero { border-radius:12px; padding:16px; }.ops-hero h2 { font-size:1.45rem; }.ops-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.ops-tools { grid-template-columns:1fr; }.ops-row { align-items:flex-start; flex-wrap:wrap; }.ops-row .btn,.ops-row a.btn { flex:0 0 auto; }.ops-locations { grid-template-columns:repeat(2,minmax(0,1fr)); } }
[data-view="qatar"] .ops-hero { border-radius:2px; background:#4a3729; border-bottom:3px solid #bf944c; box-shadow:none; }.home-qatar .ops-panel,[data-view="qatar"] .ops-panel { border-color:#cdbb93; }.home-qatar .ops-tool,[data-view="qatar"] .ops-tool { border-color:#d9c8a4; background:#fffaf0; }