@import './tokens.css';

/*
 * Photo Opp on Darkroom. Darkroom (linked before this file) supplies the
 * tokens, the fonts and the signature pieces (.dr-appbar, .dr-wordmark,
 * .dr-nav, .dr-btn, .dr-link, .dr-card, .dr-frame, .dr-plate, .dr-specs,
 * .dr-tag, .dr-check, .dr-next). This file only lays the app out and styles
 * what Darkroom has no piece for. Every colour, font and radius here is a
 * token; there are no hex values below this line.
 *
 * Colour rules: the safelight (--dr-safelight, via --color-accent) marks only
 * what can be acted on next — links, the one primary button, focus, errors,
 * a radar pin under the pointer. Things that must be told apart use
 * --dr-cat-*. The tone is on the wordmark only.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
:root[data-theme='light'] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; } }

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
/* Unlayered rules beat Darkroom's layered ones whatever their specificity,
   so element-wide rules here stay off anything Darkroom styles. */
:where(h1, h2, h3):not([class*='dr-']) { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.dr-specs dd { margin-top: 0.125rem; } /* Darkroom's own spacing, undone by the reset above */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Layout ---- */
.wrap { width: 100%; max-width: 48rem; margin-inline: auto; padding-inline: var(--space-2); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--space-6); } }
.page { padding-block: var(--space-4) var(--space-12); }
.page > * + * { margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* ---- Family bar and masthead ---- */
@media (max-width: 29.99rem) { #updated { display: none; } }
.masthead { position: sticky; top: 0; z-index: 10; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.masthead__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-2); padding-block: var(--space-1); }
.masthead .dr-wordmark { white-space: nowrap; }
.masthead__nav { gap: 0.25rem var(--space-2); font-size: var(--text-sm); }
.account { display: inline-flex; gap: var(--space-2); align-items: center; }
.account__name { color: var(--color-text-faint); }
@media (max-width: 29.99rem) { .account__name { display: none; } }
/* Sign out is a button that sits in .dr-nav, so it borrows the nav links' look. */
.linkbtn { display: inline-flex; align-items: center; min-height: 2.75rem; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0; cursor: pointer; color: var(--color-text-muted); font: inherit; transition: color var(--transition); }
.linkbtn:hover { color: var(--color-text); }

/* ---- Headings ---- */
.page-head .dr-section-title { margin-top: var(--space-1); }
.card .dr-label { display: block; }

/* ---- Cards ---- */
.card { min-width: 0; padding: var(--space-3); }
@media (min-width: 48rem) { .card { padding: var(--space-4); } }
.card > * + * { margin-top: var(--space-2); }
.figure { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---- Forms ---- */
label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0.25rem; }
.dr-input { width: 100%; }
select.dr-input { padding-inline: 0.65rem; }
.hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 0.2rem; }
.fields { display: grid; gap: var(--space-2); }
@media (min-width: 40rem) { .fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dr-btn:disabled { cursor: progress; }

/*
 * ---- Chips: toggle groups that wrap ----
 * Darkroom's .dr-segmented is one unbroken row; these groups hold four to
 * seven choices and must wrap at 390px, so they keep a grid of their own
 * with the segmented control's pressed state (ink fill), not the safelight:
 * a chosen option is a state, not the next thing to act on.
 */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-1); }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.4rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: transparent; color: var(--color-text-muted);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.chip:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.chip[aria-pressed='true'], .chip--time.is-active { background: var(--dr-ink); border-color: var(--dr-ink); color: var(--dr-void); }
.chip--time { padding: 0 0.3rem; }
.chip--time input { border: 0; background: transparent; min-height: 2.6rem; padding: 0 0.2rem; font: inherit; font-variant-numeric: tabular-nums; color: inherit; }
.chip--time input:focus { outline: none; }
.chip--time:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.chips--themes { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Light ---- */
.light .dr-specs { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.light .dr-specs dd { font-variant-numeric: tabular-nums; }

/* ---- Radar ---- */
.radar-card { display: flex; flex-direction: column; }
.radar { width: 100%; max-width: 18rem; margin-inline: auto; aspect-ratio: 1; }
.radar svg { width: 100%; height: 100%; display: block; overflow: visible; }
.radar .ring { fill: none; stroke: var(--color-border-strong); stroke-width: 1; }
.radar .ring--outer { stroke: var(--color-text-faint); }
.radar .axis { stroke: var(--color-border); stroke-width: 1; }
.radar .ring-label, .radar .north { fill: var(--color-text-faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; }
.radar .north { fill: var(--color-text-muted); font-size: 11px; }
.radar .you { fill: var(--color-text); }
/* The sun has to be told apart from the pins: a category colour. */
.radar .sun { fill: var(--dr-cat-1); }
.radar .sun-ray { stroke: var(--dr-cat-1); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.radar .sun--down { fill: none; stroke: var(--color-text-faint); }
.radar .pin circle { fill: var(--color-bg-raised); stroke: var(--color-text-muted); stroke-width: 1.5; }
.radar .pin text { fill: var(--color-text); font-family: var(--font-mono); font-size: 9px; text-anchor: middle; dominant-baseline: central; }
/* A pin is a link to its card: under the pointer it is the next thing to act on. */
.radar a.pin:hover circle, .radar a.pin:focus circle { fill: var(--dr-safelight); stroke: var(--dr-safelight); }
.radar a.pin:hover text, .radar a.pin:focus text { fill: var(--dr-on-safelight); }

/* ---- Opportunities ---- */
.section-title { margin-bottom: var(--space-2); }
.opps { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.opp { scroll-margin-top: 5rem; }
.opp__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; }
/* The frame number: a label, not a signal. */
.opp__num, .idea__lens {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.3rem;
  border: 1px solid var(--color-border-strong); color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.opp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem var(--space-1); }
.opp__name { font-size: var(--text-xl); overflow-wrap: anywhere; margin-top: 0.3rem; }
.opp--here { border-style: dashed; }
.opp h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; margin-top: var(--space-3); }
.opp ul { padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.opp li::marker { color: var(--color-text-faint); }
.opp p, .opp li { max-width: var(--measure); }
.opp .links { max-width: none; }

.lens { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); }
.lens__focal { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-text); min-width: 2.6ch; text-align: center; }
.lens__focal small { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.05em; margin-top: 0.2rem; }
.lens__name { font-weight: 500; }
.lens__alt { color: var(--color-text-muted); font-size: var(--text-sm); }
.lens > div > * + * { margin-top: 0.3rem; }

.exposure { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exposure dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.opp .note { font-size: var(--text-sm); color: var(--color-text-muted); border-left: 2px solid var(--color-warning); padding-left: var(--space-1); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); padding-top: var(--space-2); border-top: 1px solid var(--color-border); margin-top: var(--space-3) !important; }

/* ---- Settings ---- */
.settings__actions { display: flex; align-items: center; }
@media (min-width: 40rem) { .settings__actions { padding-top: 1.6rem; align-items: flex-start; } }
.lenses { border: 0; padding: 0; margin-top: var(--space-3); min-width: 0; }
.lenses legend { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0.4rem; padding: 0; }
.lens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-1); }
.lens-check { display: flex; align-items: center; gap: 0.6rem; margin: 0; min-height: 2.75rem; padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); background: var(--color-bg-raised); color: var(--color-text-muted); cursor: pointer; font-size: var(--text-sm); }
.lens-check:has(input:checked) { border-color: var(--color-border-strong); background: var(--dr-raised); color: var(--color-text); }
/* .dr-check on a real checkbox: drawn by Darkroom, so the native box goes. */
.lens-check .dr-check { appearance: none; -webkit-appearance: none; width: 1.125rem; height: 1.125rem; }
.lens-check b { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 3ch; }
.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1); }

/* ---- Photo ideas ---- */
.ideas__signin > * + * { margin-top: var(--space-2); }
.ideas__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ideas__go .hint { margin: 0; }
.ideas__out[aria-busy='true'] { opacity: 0.5; }
.ideas__out.is-stale::before { content: 'For an earlier view: ask again for this one.'; display: block; font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-1); }
.ideas__overview { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; max-width: var(--measure); }
.ideas__list { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.idea { border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.idea__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.idea__title { font-size: var(--text-xl); margin-top: 0.3rem; }
.idea__detail { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.35rem var(--space-2); margin-top: var(--space-2); max-width: var(--measure); }
.idea__detail dt { padding-top: 0.2rem; }
.idea__detail dd { margin: 0; }
@media (max-width: 29.99rem) { .idea__detail { grid-template-columns: minmax(0, 1fr); } .idea__detail dd { margin-bottom: 0.4rem; } }
.idea__why { margin-top: var(--space-1); color: var(--color-text-muted); font-style: italic; max-width: var(--measure); }
.idea__link { font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---- Notices ---- */
.notice { border: 1px solid var(--color-border-strong); border-left-width: 3px; padding: var(--space-2); font-size: var(--text-sm); background: var(--color-bg-raised); }
.notice--ok { border-left-color: var(--color-positive); }
.notice--warning { border-left-color: var(--color-warning); background: var(--color-warning-dim); }
.notice--error { border-left-color: var(--color-danger); background: var(--color-danger-dim); }
/* Information is not a call to act: no safelight. */
.notice--info { border-left-color: var(--color-text-muted); }
.footnote { max-width: var(--measure); }
.page > .dr-next { margin-top: var(--space-8); }