/* Emma — shared UI styles (Atlas-style, white + blue). Load AFTER Tailwind CDN + emma-tw.js. */
:root {
  --emma-brand: #1d4ed8;   /* blue accent */
  --emma-navy:  #0b2545;    /* deep navy for brand panels */
}
html { scroll-behavior: smooth; font-size: 14px; }
@media (min-width: 1536px) { html { font-size: 14.5px; } }
[x-cloak] { display: none !important; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.serif { font-family: 'Fraunces', Georgia, serif; }

/* brand helpers */
.bg-brand { background-color: var(--emma-brand); }
.text-brand { color: var(--emma-brand); }
.border-brand { border-color: var(--emma-brand); }
.bg-brand-soft { background-color: color-mix(in srgb, var(--emma-brand) 10%, transparent); }
.ring-brand:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--emma-brand) 25%, transparent); border-color: var(--emma-brand); }
::selection { background: color-mix(in srgb, var(--emma-brand) 22%, transparent); }

/* Emma wordmark */
.wordmark { font-weight: 800; letter-spacing: -0.02em; font-size: 1.35rem; line-height: 1; color: #0f172a; }
.wordmark .dot { color: var(--emma-brand); }

/* gentle motion */
@keyframes emma-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: emma-rise .4s cubic-bezier(.2,.7,.3,1) both; }
a, button, .card, input, select, textarea {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .2s ease, opacity .15s ease;
}
.card.hoverable:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(15,23,42,.18); }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } html { scroll-behavior: auto; } }

/* thin grey scrollbar */
.scroll-thin { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.3) transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(100,116,139,.25); border-radius: 9999px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.45); }

/* ribbon hover tooltips */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) scale(.96); transform-origin: left center;
  background: #0b2545; color: #fff; font-size: 11px; line-height: 1; padding: 5px 8px;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease; z-index: 60;
}
.tip:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

/* sidebar visible on desktop, hidden on small screens (ribbon remains) */
@media (max-width: 1023px) { .app-sidebar { display: none; } }

/* "soon" pill */
.pill-soon { font-size: 9px; background: #f1f5f9; color: #94a3b8; border-radius: 9999px; padding: 2px 6px; }

/* ---- dynamic UI: Turbo no-reload navigation + view transitions ---- */
.turbo-progress-bar { height: 2px; background: var(--emma-brand); }
main { view-transition-name: emma-main; }
@keyframes emma-tv-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
::view-transition-new(emma-main) { animation: emma-tv-in .28s cubic-bezier(.16,.84,.44,1) both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-new(emma-main) { animation: none; } }

/* staggered card entrance */
.stagger > * { animation: emma-rise .45s cubic-bezier(.2,.7,.3,1) both; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s}

/* pressable buttons */
.press:active { transform: translateY(1px) scale(.985); }

/* pill toggle switch */
.switch { width: 40px; height: 22px; border-radius: 9999px; background: #cbd5e1; position: relative; cursor: pointer; flex: none; transition: background .18s ease; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; height: 18px; width: 18px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.switch.on { background: var(--emma-brand); }
.switch.on::after { transform: translateX(18px); }

/* toast host */
#emma-toasts { position: fixed; bottom: 1rem; right: 1rem; z-index: 80; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.emma-toast { pointer-events: auto; background: #0b2545; color: #fff; font-size: 13px; padding: 10px 14px; border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(2,6,23,.5); display: flex; align-items: center; gap: 8px; animation: emma-toast-in .25s cubic-bezier(.16,.84,.44,1) both; }
.emma-toast.leaving { animation: emma-toast-out .2s ease forwards; }
@keyframes emma-toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes emma-toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---- modal overlays (blurred, viewport-centered, portalled to body) ---- */
.emma-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(15, 23, 42, .30);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: emma-ov-in .16s ease both;
}
.emma-overlay.hidden { display: none; }
@keyframes emma-ov-in { from { opacity: 0; } to { opacity: 1; } }
.emma-overlay > .emma-dialog { animation: emma-rise .22s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .emma-overlay, .emma-overlay > .emma-dialog { animation: none; } }

/* right-side drawer overlay */
.emma-drawer { position: fixed; inset: 0; z-index: 90; background: rgba(15,23,42,.30); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: emma-ov-in .16s ease both; }
.emma-drawer.hidden { display: none; }

/* credits meter */
.meter { height: 6px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 9999px; background: var(--emma-brand); transition: width .6s cubic-bezier(.16,.84,.44,1); }
.meter.low > span { background: #f59e0b; }
.meter.crit > span { background: #ef4444; }

/* ---- mobile bottom nav (native-app feel) ---- */
.mnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: flex; justify-content: space-around; align-items: stretch;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid #e2e8f0;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { .mnav, .mnav-sheet, .mnav-backdrop { display: none !important; } }
.mnav-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px 4px; border-radius: 12px; color: #64748b; background: none; border: 0;
  font-size: 10.5px; font-weight: 500; -webkit-tap-highlight-color: transparent;
}
.mnav-tab i { font-size: 19px; line-height: 1; }
.mnav-tab.on { color: var(--emma-brand); }
.mnav-tab.on i { transform: translateY(-1px); }
.mnav-tab:active { transform: scale(.94); transition: transform .1s; }

.mnav-backdrop { position: fixed; inset: 0; z-index: 68; background: rgba(15,23,42,.35); }
.mnav-sheet {
  position: fixed; left: 0; right: 0; z-index: 69;
  bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(15,23,42,.16);
  padding: 6px 0 10px; animation: emma-sheet .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes emma-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mnav-grab { width: 40px; height: 4px; border-radius: 999px; background: #e2e8f0; margin: 6px auto 8px; }
.mnav-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; font-size: 14.5px; color: #334155;
}
.mnav-row i { font-size: 17px; color: #94a3b8; width: 20px; text-align: center; }
.mnav-row.on { color: var(--emma-brand); font-weight: 600; }
.mnav-row.on i { color: var(--emma-brand); }
.mnav-row:active { background: #f8fafc; }

/* ---- mobile polish (leaves desktop untouched) ---- */
@media (max-width: 640px) {
  /* form-builder rows: title on its own line; type/required/delete wrap below */
  .field-row > .flex { flex-wrap: wrap; row-gap: 8px; }
  .field-row > .flex > .flex-1 { flex-basis: calc(100% - 84px); min-width: 0; }
  .field-row .fld-type { margin-left: 44px; }
  /* drawers become full-screen sheets */
  .emma-drawer aside { max-width: 100% !important; }
  /* dialogs hug the screen with breathing room */
  .emma-dialog { margin: 0 12px; }
  /* calendar cells stay tappable but compact */
  .grid-cols-7 > a { min-height: 52px !important; padding: 4px !important; }
}

/* mobile: the topbar avatar dropdown becomes a bottom sheet */
@media (max-width: 640px) {
  [data-menu] {
    position: fixed !important; left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0 !important; width: 100% !important;
    margin: 0 !important; border-radius: 20px 20px 0 0 !important;
    padding: 12px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 40px rgba(15,23,42,.22) !important; z-index: 90 !important;
    animation: emma-sheet .25s cubic-bezier(.2,.7,.3,1) both;
  }
  [data-menu] a { padding: 12px 16px !important; font-size: 14.5px !important; }
}

/* Duotone icons — a solid Bootstrap glyph sitting quietly behind the outline.
   Same read as Font Awesome duotone, using the icon font we already ship. */
.emma-duo{position:relative;display:inline-grid;place-items:center;line-height:1;vertical-align:-.125em}
.emma-duo>i{grid-area:1/1;line-height:1}
.emma-duo__s{transform:scale(1.02)}
.emma-duo__p{position:relative}