/* Direction: night-watch navy — misty mountains, olive primary, gold accents, tricolour details */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0b1220;
  --surface: #111b2f;
  --surface-2: #18263f;
  --border: #263652;
  --border-strong: #545963;
  --ink: #e9eef7;
  --muted: #9dabc2;
  --accent: #8fa83a;
  --accent-hover: #a0b558;
  --accent-ink: #0b1220;
  --accent-text: #e3b04b;
  --accent-strong: #8fa83a;
  --accent-soft: #283326;
  --accent-border: #46562c;
  --success: #6dbe5a;
  --success-ink: #ffffff;
  --success-soft: #21382d;
  --success-strong: #6dbe5a;
  --warning: #e3b04b;
  --warning-ink: #ffffff;
  --warning-soft: #3b3529;
  --warning-strong: #e3b04b;
  --danger: #e5645b;
  --danger-ink: #ffffff;
  --danger-soft: #3b242d;
  --danger-strong: #e77068;
  --chart-1: #8fa83a;
  --chart-2: #16d4bd;
  --chart-3: #128cce;
  --chart-4: #c09bfb;
  --chart-5: #c1587b;
  --chart-6: #f39e4f;

  --font-display: "Oswald", "Noto Sans Devanagari", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: 0.02em;
  --radius-card: 22px;
  --radius-btn: 16px;
  --radius-input: 14px;
  --card-pad: 1.1rem;
  --x-saffron: #ff9933;
  --x-white: #ffffff;
  --x-flag-green: #138808;
  --x-gold: #e3b04b;
  --x-deep: #0b1220;
  --x-chakra: #3c4cc4;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dddee0;
  --border-strong: #b6b8bc;
  --ink: #0b1220;
  --muted: #64686f;
  --accent: #8fa83a;
  --accent-hover: #7a8f31;
  --accent-ink: #0b1220;
  --accent-text: #5e6f26;
  --accent-strong: #5e6f26;
  --accent-soft: #eff3e3;
  --accent-border: #cdd8a6;
  --success: #6dbe5a;
  --success-ink: #0b1220;
  --success-soft: #edf7eb;
  --success-strong: #427336;
  --warning: #e3b04b;
  --warning-ink: #0b1220;
  --warning-soft: #fcf6e9;
  --warning-strong: #8a6b2d;
  --danger: #e5645b;
  --danger-ink: #0b1220;
  --danger-soft: #fceceb;
  --danger-strong: #b24e47;
  --chart-1: #839b2b;
  --chart-2: #24a18f;
  --chart-3: #157fba;
  --chart-4: #a782df;
  --chart-5: #b34c6f;
  --chart-6: #cd7c28;
}

/* Consistency Tracker — app-level styles */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ---- motivating look: tricolour glow, warm cards, bold hero ---- */
.mist::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 38% at 85% 0%, color-mix(in srgb, var(--x-saffron) 18%, transparent), transparent),
    radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--x-flag-green) 20%, transparent), transparent);
}
.card {
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--x-gold));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--x-gold)) 0%, var(--surface) 42%);
  box-shadow: 0 14px 34px -22px color-mix(in srgb, black 80%, transparent);
}
.card-title { display: flex; align-items: center; gap: .5rem; }
.card-title::before {
  content: ""; width: 4px; height: 1.1em; border-radius: 4px; flex-shrink: 0;
  background: linear-gradient(var(--x-saffron), var(--x-flag-green));
}
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-secondary):not(.btn-link):not(.btn-icon) {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--x-gold)));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 90%, transparent);
}
.btn:active { transform: scale(.97); }

.hero {
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: 10rem;
  border-radius: var(--radius-card); padding: 1.25rem; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--x-gold));
  background:
    radial-gradient(110% 150% at 100% 0%, color-mix(in srgb, var(--x-saffron) 34%, transparent), transparent 58%),
    radial-gradient(110% 150% at 0% 100%, color-mix(in srgb, var(--x-flag-green) 40%, transparent), transparent 58%),
    var(--surface);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, black 85%, transparent);
}
.hero::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--x-saffron) 0 33.34%, var(--x-white) 33.34% 66.67%, var(--x-flag-green) 66.67% 100%);
}
.hero-text { position: relative; z-index: 1; }
.hero-text.has-cut { max-width: 58%; }
.hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-text); }
.hero-title { font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.9rem); line-height: 1; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; margin-top: .25rem; overflow-wrap: anywhere; }
.hero-sub { margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.hero-cut {
  position: absolute; right: .6rem; bottom: 0; z-index: 0; height: 92%; max-height: 13rem; width: auto; max-width: 42%;
  object-fit: contain; object-position: bottom right; animation: rise .7s cubic-bezier(.2,1.2,.4,1);
  filter: drop-shadow(0 10px 14px color-mix(in srgb, black 50%, transparent));
}

.tricolor {
  height: 3px;
  background: linear-gradient(90deg, var(--x-saffron) 0 33.34%, var(--x-white) 33.34% 66.67%, var(--x-flag-green) 66.67% 100%);
}

.mist { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mist svg { filter: blur(1.5px); }
.mist-fog {
  position: absolute; inset-inline: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, var(--canvas) 5%, transparent);
}
.mist-drift { animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

.page-in { animation: pagein .35s ease-out; }
@keyframes pagein { from { transform: translateY(8px); } to { transform: none; } }

.tab-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; font-size: 11px; font-weight: 600; color: var(--muted);
  position: relative; transition: color .2s, transform .15s;
}
.tab-link:active { transform: scale(.92); }
.tab-link:focus-visible { outline: 2px solid var(--x-gold); outline-offset: -4px; border-radius: 12px; }
.tab-link.is-active { color: var(--accent-text); }
.tab-link.is-active::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--x-gold);
}

.bar { height: .55rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--x-gold)); transition: width .5s ease; animation: barin .7s ease-out; transform-origin: left; }
@keyframes barin { from { transform: scaleX(.05); } to { transform: none; } }

.ring-bg { stroke: var(--border); }
.ring-fg { stroke: var(--x-gold); animation: ringdraw .9s ease-out; }
@keyframes ringdraw { from { stroke-dashoffset: var(--c); } }

.st-btn {
  @apply min-h-12 rounded-2xl border border-border bg-surface text-sm font-semibold text-ink;
  transition: transform .12s, background .2s, color .2s;
}
.st-btn:hover { background: var(--surface-2); }
.st-btn:active { transform: scale(.94); }
.st-btn:focus-visible, .seg-btn:focus-visible, .hm-cell:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
.st-done.is-on { @apply bg-accent text-accent-ink; border-color: transparent; }
.st-half.is-on { background: var(--warning); color: var(--x-deep); border-color: transparent; }
.st-missed.is-on { background: var(--danger); color: var(--x-deep); border-color: transparent; }

.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: var(--surface-2); }
.seg-btn { min-height: 48px; border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, transform .12s; padding: 0 4px; }
.seg-btn:active { transform: scale(.95); }
.seg-btn.is-on { @apply bg-accent text-accent-ink; }

.tick {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px;
  border: 2px solid var(--border); flex-shrink: 0; transition: background .2s, border-color .2s;
}
.is-ticked .tick, .is-ticked.tick { @apply bg-accent text-accent-ink; border-color: transparent; }
.is-ticked .tick-label { text-decoration: line-through; color: var(--muted); }

.now-block { box-shadow: 0 0 0 2px var(--x-gold); }
.now-badge { border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em; background: var(--x-gold); color: var(--x-deep); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

.hm-cell { width: 100%; min-height: 44px; aspect-ratio: 1; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--ink); transition: transform .12s; }
.hm-cell:active { transform: scale(.92); }
.hm-cell:disabled { opacity: .3; }
.hm-none { background: var(--surface-2); color: var(--muted); }
.hm-present { background: color-mix(in srgb, var(--success) 70%, transparent); }
.hm-absent { background: color-mix(in srgb, var(--danger) 70%, transparent); }
.hm-holiday { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.hm-today { outline: 2px solid var(--x-gold); outline-offset: 1px; }
.hm-sel { box-shadow: 0 0 0 3px var(--ink); }

.yh { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); }
.yh-1 { background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); }
.yh-2 { background: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
.yh-3 { background: color-mix(in srgb, var(--accent) 78%, var(--surface-2)); }
.yh-4 { background: var(--x-gold); }
.yh-off { background: transparent; }

.line-stroke { stroke: var(--x-gold); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-area { fill: color-mix(in srgb, var(--x-gold) 16%, transparent); }
.bv { width: 100%; border-radius: 6px 6px 2px 2px; min-height: 3px; transition: height .5s ease; }
.bv-gold { background: var(--x-gold); }
.bv-olive { background: var(--accent); }
.bv-green { background: var(--success); }
.bv-red { background: var(--danger); }

#toast-note {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 80;
  max-width: 90vw; padding: 12px 18px; border-radius: 16px; font-size: 14px; font-weight: 600;
  background: var(--x-gold); color: var(--x-deep); animation: pagein .25s ease-out;
}
#confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; width: 100%; height: 100%; }
.rankup {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--canvas) 80%, transparent); animation: pagein .3s ease-out;
}
.rankup > div { animation: rise .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes rise { from { transform: scale(.6) translateY(30px); } to { transform: none; } }

.htmx-request .btn, .htmx-request.btn { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .mist-drift, .page-in, .ring-fg, .bar > span, .now-badge, .rankup > div { animation: none; }
}
html.reduced-motion .mist-drift, html.reduced-motion .page-in, html.reduced-motion .ring-fg, html.reduced-motion .bar > span, html.reduced-motion .now-badge, html.reduced-motion .rankup > div { animation: none; }