/* Teal structures the brand surface; coral highlights actions and progress.
   Movement follows navigation and state.
   Content stays still enough to read. No animation delays a request or input. */
.sidebar { background: var(--hy-ocean-700); border-right: 0; color: var(--hy-white); }
.sidebar .wordmark, .sidebar .account strong { color: var(--hy-white); }
.sidebar .wordmark span, .sidebar .account small { color: var(--hy-ocean-50); }
.sidebar .nav-item, .sidebar .btn-ghost { color: var(--hy-white); }
.sidebar .nav-item:hover, .sidebar .btn-ghost:hover { background: rgba(0,0,0,.12); color: var(--hy-white); }
.sidebar .nav-item[aria-current="page"] { background: var(--hy-ocean-100); color: var(--hy-ocean-800); box-shadow: inset 3px 0 var(--hy-ocean-300); }
.sidebar .nav-section { border-color: rgba(255,255,255,.2); }
.topbar { box-shadow: inset 0 3px var(--hy-ocean-600); }
.crumbs, .page-head h1 { color: var(--hy-ocean-800); }
.page-head { position: relative; padding-left: 18px; }
.page-head::before { content: ""; position: absolute; inset: 2px auto 4px 0; width: 4px; border-radius: 4px; background: var(--hy-ocean-600); transform-origin: top; animation: hy-heading-line 280ms var(--hy-motion-easing-out) both; }
.chart-card figcaption, .monthly-card h2 { color: var(--hy-ocean-800); }
.kpi-band { border-top: 3px solid var(--hy-ocean-600); }
.kpi strong { color: var(--hy-ocean-800); }
.bottom-nav .nav-item[aria-current="page"] { color: var(--hy-ocean-800); background: var(--hy-ocean-100); }

.auth-ocean { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; padding: 32px 20px; background: var(--hy-ocean-500); }
.auth-overlay { position: fixed; inset: 0; z-index: 100; }
.auth-card { position: relative; z-index: 1; box-sizing: border-box; width: min(100%, 510px); padding: 40px; background: var(--hy-white); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,30,50,.18); text-align: left; animation: hy-auth-enter 420ms var(--hy-motion-easing-out) both; }
.auth-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }
.auth-brand .wordmark { color: var(--hy-ocean-800); font-size: 32px; letter-spacing: .08em; line-height: 1.3; }
.auth-brand .wordmark span { color: var(--hy-text-muted); font-size: 12px; margin-top: 6px; letter-spacing: .04em; }
.auth-mark { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 14px; background: var(--hy-ocean-50); stroke: var(--hy-ocean-600); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mark-frame { stroke-dasharray: 80; animation: hy-mark-draw 900ms var(--hy-motion-easing-out) both; }
.mark-wave { stroke-dasharray: 52; stroke-dashoffset: 52; animation: hy-mark-wave 2400ms 200ms ease-in-out infinite; }
.mark-check { stroke-dasharray: 32; stroke-dashoffset: 32; opacity: 0; transition: stroke-dashoffset 300ms ease-out, opacity 200ms ease-out; }
[data-phase="records"] .mark-check { stroke-dashoffset: 0; opacity: 1; }
[data-phase="records"] .mark-wave { opacity: 0; }
.auth-caption { min-height: 114px; }
.auth-title { margin: 0 0 12px; color: var(--hy-ocean-800); font-size: 20px; letter-spacing: .01em; }
.auth-detail { margin: 0; color: var(--hy-text-muted); font-size: 13px; line-height: 1.9; }
.auth-card .auth-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 24px 0 18px; }
.auth-card .auth-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; color: var(--hy-text-muted); font-size: 11px; }
.auth-card .auth-step-label { display: block; width: auto; height: auto; border: 0; border-radius: 0; white-space: normal; }
.auth-card .auth-step-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hy-line-200); background: var(--hy-white); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; font-family: var(--hy-font-family-num); }
.auth-card .is-current { font-weight: 700; color: var(--hy-ocean-800); }
.auth-card .is-current .auth-step-number { background: var(--hy-ocean-700); color: var(--hy-white); border-color: var(--hy-ocean-700); animation: hy-step-beat 2s ease-in-out infinite; }
.auth-card .is-complete { color: var(--hy-ocean-800); }
.auth-card .is-complete .auth-step-number { border-color: var(--hy-ocean-100); background: var(--hy-ocean-50); color: var(--hy-ocean-700); }
.auth-progress { height: 3px; overflow: hidden; border-radius: 3px; background: var(--hy-bg-track); }
.auth-progress i { display: block; height: 100%; width: calc((var(--auth-step, 0) + 1) * 33.333%); background: var(--hy-ocean-600); transition: width 380ms var(--hy-motion-easing-out); }
.auth-tide { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-tide i { position: absolute; display: block; width: 160vw; height: 100vw; min-width: 850px; min-height: 600px; left: -70%; top: 15%; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; transform: rotate(-24deg); animation: hy-tide 18s ease-in-out infinite alternate; }
.auth-tide i:nth-child(2) { left: -55%; top: 25%; animation-delay: -6s; opacity: .7; }
.auth-tide i:nth-child(3) { left: -40%; top: 35%; animation-delay: -12s; opacity: .4; }

/* One timing vocabulary for rows, controls, panels, tabs and successful writes. */
.nav-item { transition: background-color 160ms ease, color 160ms ease, box-shadow 180ms ease; }
.record-row, .sheet-link { animation: hy-row-in 240ms var(--hy-motion-easing-out) both; animation-delay: var(--row-delay,0ms); }
.record-row > span:last-child { transition: transform 160ms var(--hy-motion-easing-out); }
.btn svg, .nav-ico { transition: transform 160ms var(--hy-motion-easing-out), color 160ms ease; }
.btn { transition: transform 120ms var(--hy-motion-easing-out), box-shadow 160ms ease, background-color 160ms ease, color 160ms ease; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn:disabled { transform: none; animation: none; }
.field { transition: color 160ms ease; }
.field:focus-within { color: var(--hy-ocean-700); }
.field input, .field textarea, .field select, .score-choice, .member-choice { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms var(--hy-motion-easing-out); }
.score-choice:active, .member-choice:active { transform: scale(.985); }
.score-choice[aria-checked="true"], .score-choice:has(input:checked) { animation: hy-choice 200ms var(--hy-motion-easing-out); }
.tab-panel.is-on { animation: hy-tab-in 200ms var(--hy-motion-easing-out) both; }
.tab-panel.from-back.is-on { animation-name: hy-tab-back; }
.profile-band > div, .status-counts > div { animation: hy-detail-in 260ms var(--hy-motion-easing-out) both; }
.profile-band > div:nth-child(2), .status-counts > div:nth-child(2) { animation-delay: 45ms; }
.profile-band > div:nth-child(3), .status-counts > div:nth-child(3) { animation-delay: 90ms; }
.dialog-pop[open] { animation: hy-dialog-in 220ms var(--hy-motion-easing-out) both; }
.dialog-pop[open]::backdrop { animation: hy-backdrop-in 180ms ease both; }
@media (hover:hover) and (pointer:fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(11,110,153,.16); }
  .btn:hover svg { transform: translateY(-1px); }
  .record-row:hover > span:last-child { transform: translateX(3px); }
  .surface, .kpi { transition: border-color 180ms ease, box-shadow 180ms ease; }
  .surface:has(.record-row:hover), .kpi:hover { border-color: var(--hy-ocean-300); box-shadow: 0 3px 16px rgba(18,152,163,.1); }
}
@keyframes hy-heading-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hy-auth-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hy-mark-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes hy-mark-wave { 0%,15% { stroke-dashoffset: 52; } 55%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -52; } }
@keyframes hy-step-beat { 50% { box-shadow: 0 0 0 4px var(--hy-ocean-50); } }
@keyframes hy-tide { to { transform: translate(24px,-18px) rotate(-20deg); } }
@keyframes hy-row-in { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes hy-tab-in { from { opacity: .3; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes hy-tab-back { from { opacity: .3; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes hy-detail-in { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes hy-choice { 50% { transform: scale(.98); } }
@keyframes hy-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes hy-backdrop-in { from { background: rgba(14,42,71,0); } to { background: rgba(14,42,71,.32); } }
@media (max-width:900px) {
  .topbar { background: var(--hy-ocean-700); border-bottom-color: var(--hy-ocean-800); color: var(--hy-white); }
  .topbar .crumbs, .topbar-user { color: var(--hy-white); }
  .topbar .avatar { background: var(--hy-ocean-100); color: var(--hy-ocean-800); }
}
@media (max-width:600px) {
  .auth-card { padding: 28px 24px; border-radius: 12px; }
  .auth-brand { margin-bottom: 30px; }
  .auth-title { font-size: 18px; }
  .auth-card .auth-steps { gap: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .auth-card, .auth-tide i, .mark-frame, .mark-wave, .auth-card .is-current .auth-step-number,
  .page-head::before, .record-row, .sheet-link, .tab-panel.is-on, .profile-band > div,
  .status-counts > div, .dialog-pop[open], .dialog-pop[open]::backdrop, .score-choice { animation: none !important; }
  .auth-progress i, .mark-check, .nav-item, .btn, .btn svg, .nav-ico, .record-row > span:last-child,
  .field, .field input, .field textarea, .field select, .score-choice, .member-choice,
  .surface, .kpi { transition: none !important; }
  .record-row, .sheet-link, .tab-panel.is-on, .profile-band > div, .status-counts > div { opacity: 1; transform: none; }
  .mark-frame, .mark-wave { stroke-dashoffset: 0; }
  .btn:hover:not(:disabled), .btn:hover svg, .record-row:hover > span:last-child, .btn:active:not(:disabled), .score-choice:active, .member-choice:active { transform: none; }
}

/* Teal provides the structure. Coral marks emphasis, pending work and actions.
   Colour never carries a state alone: labels, figures and legends stay visible. */
.sidebar { overflow-y: auto; }
.sidebar .account { gap: 6px; line-height: 1.7; }
.sidebar .account small, .sidebar .account .org-note { font-size: 14px; color: var(--hy-white); }
.sidebar .account strong { font-size: 16px; }
.kpi-band { border-top: 0; overflow: hidden; }
.kpi { border-top: 3px solid var(--hy-ocean-500); }
.kpi:nth-child(2) { border-top-color: var(--hy-coral-500); background: var(--hy-coral-50); }
.kpi:nth-child(2) strong { color: var(--hy-text-accent); }
.badge-wait::before { background: var(--hy-coral-500); }
.work-queue .queue-card:nth-child(n+2):not(:last-child) { border-top: 3px solid var(--hy-coral-500); }
.work-queue .queue-card:nth-child(n+2):not(:last-child) strong { color: var(--hy-text-accent); }
.status-counts > div { border-left: 2px solid var(--hy-coral-500); padding-left: 12px; }
.heat-cell.low { background: var(--hy-coral-50); border-left: 3px solid var(--hy-coral-500); }
.heat-cell.low strong { color: var(--hy-text-accent); }
.auth-mark .mark-wave, .auth-mark .mark-check { stroke: var(--hy-coral-500); }
.auth-progress i { background: var(--hy-coral-500); }
.auth-card .is-current .auth-step-number { background: var(--hy-action-primary); border-color: var(--hy-action-primary); }
.page-skeleton > .loading-title { color: var(--hy-text-accent); font-weight: 500; }
.page-skeleton { position: relative; }
.page-skeleton::before { content: ""; display: block; width: 48px; height: 3px; margin: 0 0 24px; background: var(--hy-coral-500); transform-origin: left; animation: hy-loading-breath 1.6s ease-in-out infinite; }
.skeleton-card { border-top: 3px solid var(--hy-ocean-200); }
.skeleton-card:nth-child(2) { border-top-color: var(--hy-coral-500); }
.page-stage.is-in { animation: hy-page-arrive 380ms var(--hy-motion-easing-out) both; }
.reveal-item { animation-duration: 440ms; }
.queue-card, .creation-step, .template-item { transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--hy-motion-easing-out); }
.template-item[open] > :not(summary), .template-preview[open] > :not(summary) { animation: hy-detail-in 240ms var(--hy-motion-easing-out) both; }
.btn:not(.btn-outline):not(.btn-soft):not(.btn-ghost):not(.btn-secondary) { box-shadow: 0 3px 0 rgba(140,46,34,.18); }
.btn[aria-busy="true"] { animation: hy-saving-breath 1.4s ease-in-out infinite; }
.btn.is-saved { animation: hy-save-settle 360ms var(--hy-motion-easing-out); }
.nav-item[aria-current="page"] .nav-ico { animation: hy-nav-settle 320ms var(--hy-motion-easing-out); }
.month-bar-row:nth-child(2) i { transition-delay: 90ms; }
.month-bar-row:nth-child(3) i { transition-delay: 180ms; }
.chart-card.is-on .month-bar-track i { transition-duration: 900ms; }
@media (hover:hover) and (pointer:fine) {
  .queue-card:hover { transform: translateY(-3px); box-shadow: var(--hy-shadow-raised); }
  .btn:hover:not(:disabled) { box-shadow: 0 5px 12px rgba(14,42,71,.12); }
}
@keyframes hy-page-arrive { from { opacity: .45; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hy-loading-breath { 50% { transform: scaleX(1.8); opacity: .5; } }
@keyframes hy-saving-breath { 50% { box-shadow: 0 0 0 4px var(--hy-coral-50); } }
@keyframes hy-save-settle { 45% { transform: translateY(-2px); } }
@keyframes hy-nav-settle { from { transform: translateY(3px); } to { transform: none; } }
@media (prefers-reduced-motion:reduce) {
  .page-stage.is-in, .reveal-item, .page-skeleton::before, .btn[aria-busy="true"], .btn.is-saved,
  .nav-item[aria-current="page"] .nav-ico, .template-item[open] > :not(summary), .template-preview[open] > :not(summary) { animation: none !important; }
  .queue-card, .creation-step, .template-item { transition: none; }
  .queue-card:hover { transform: none; }
  .chart-card.is-on .month-bar-track i { transition: none; }
}
.loading-page-title { margin: 0 0 8px; color: var(--hy-ocean-800); font-size: var(--hy-font-size-3xl); font-weight: 700; line-height: var(--hy-line-height-heading); }