@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --ink: #102b42;
  --muted: #657785;
  --paper: #f4f1e9;
  --card: #fffdf8;
  --line: #d6dcd8;
  --accent: #c95b3f;
  --accent-dark: #9d3d2b;
  --blue-wash: #dce8eb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: 'DM Sans', sans-serif;
}

body::before {
  position: fixed;
  inset: 0 0 auto;
  height: 20rem;
  content: '';
  background: linear-gradient(135deg, var(--blue-wash), var(--paper) 70%);
  z-index: -1;
}

button, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100% - 2rem, 43rem);
  margin: 0 auto;
  padding: 3.5rem 0 2rem;
}

.app-header, .intro, .app-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eyebrow, .date { margin: 0 0 .35rem; color: var(--accent-dark); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; letter-spacing: -.045em; }
h1 { font-size: clamp(2rem, 8vw, 3.35rem); line-height: .95; }
h2 { max-width: 15ch; font-size: clamp(1.6rem, 5vw, 2.35rem); line-height: 1.05; }
.icon-button { display: grid; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--card); font-size: 1.35rem; place-items: center; }
.intro { align-items: end; margin: 4.25rem 0 1.4rem; }
.status { margin: 0; padding: .55rem .8rem; border-radius: 999px; color: var(--ink); background: var(--blue-wash); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.observation-form { display: grid; gap: 1rem; }
fieldset { margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255, 253, 248, .82); box-shadow: 0 1rem 2.5rem rgba(16, 43, 66, .05); }
legend { padding: 0 .35rem; color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; }
fieldset > label, .angle-fields label { display: grid; gap: .4rem; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.field-hint { margin: -.25rem 0 .9rem; color: var(--muted); font-size: .83rem; }
input, select { width: 100%; min-height: 3rem; border: 1px solid var(--line); border-radius: .45rem; outline: 0; color: var(--ink); background: #fffefa; padding: .7rem .75rem; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 91, 63, .13); }
.time-input-row { display: grid; grid-template-columns: auto 1fr; gap: .55rem; }
.secondary-button { min-height: 3rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--ink); background: var(--card); padding: .7rem 1rem; font-weight: 700; }
.secondary-button:hover, .secondary-button:focus-visible { border-color: var(--accent); color: var(--accent-dark); }
.angle-fields { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: end; gap: .45rem; }
.angle-mark { padding-bottom: .75rem; color: var(--accent-dark); font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; }
.primary-button { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; border: 0; border-radius: .55rem; color: #fffdf8; background: var(--ink); padding: .8rem 1.15rem; font-weight: 700; }
.primary-button span { font-size: 1.3rem; }
.primary-button:hover, .primary-button:focus-visible { background: #1b496d; }
.saved-observations { margin-top: 3rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); }
h3 { margin: 0 0 .65rem; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; }
#observation-count { color: var(--muted); font-size: .8rem; }
#observation-list { display: grid; gap: .55rem; margin: .75rem 0 0; padding: 0; list-style: none; }
#observation-list li { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
#observation-list time, #observation-list span { color: var(--muted); }
#observation-list strong { font-family: 'Space Grotesk', sans-serif; font-size: .9rem; }
.app-footer { margin-top: 2rem; color: var(--muted); font-size: .74rem; }
.time-overlay { position: fixed; inset: 0; z-index: 10; display: grid; color: #fffdf8; background: rgba(16, 43, 66, .72); padding: 1.5rem; place-items: center; }
.time-overlay[hidden] { display: none; }
.time-overlay p { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.25rem, 5vw, 2rem); font-weight: 600; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 560px) { .app-shell { padding-top: 2rem; } .intro { margin-top: 3.25rem; } #observation-list li { grid-template-columns: 1fr 1fr; } #observation-list span { grid-column: 1 / -1; } }
@media (max-width: 420px) { .app-footer { align-items: flex-start; flex-direction: column; gap: .55rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; } }