/* =============================================================
   Time Tracking — product theme.

   Loads on top of email-inbox.css, which is the house design system
   under a product's name (the hub page already uses it that way).
   Everything structural — type, header, buttons, cards, radii,
   spacing, section rhythm — comes from there untouched. This file
   is the accent, plus the handful of components only this product
   has.

   When email-inbox.css is eventually renamed to css/system.css,
   the OVERRIDES block below should disappear into it as tokens;
   those nine values are hardcoded there today, so a theme cannot
   reach them from tokens alone.
   ============================================================= */

/* Slate carries the structure, petrol carries the action.

   Neither works alone here. Slate on its own leaves the buttons and the
   headline accent painted in a grey gradient, which reads as disabled
   rather than restrained — the system draws both from --grad-brand.
   Petrol on its own would tint the whole page green, which is both Label
   Sync's territory and, inside this product, the colour of a running
   timer.

   Split, the ground stays graphite — that is what separates this page
   from its siblings at a glance — and the green-blue only appears where
   something can be clicked. The running badge uses the power-up's own
   #16A34A, brighter and yellower than the petrol, so state and brand
   stay legible as two different things.

   Split between them, the page's overall tone stays graphite — that is
   what separates it from its sibling at a glance — and the saturation
   appears only where something can be clicked. */

:root {
  /* ---- action: petrol, and only where something happens ---- */
  --primary:       #0F766E;
  --primary-2:     #14B8A6;
  --primary-ink:   #115E59;
  --grad-brand:    linear-gradient(135deg, #115E59 0%, #0F766E 50%, #14B8A6 100%);
  --shadow-glow:   0 18px 44px -16px rgba(15, 118, 110, 0.38);
  --border-active: #A8CFC9;   /* borders warm to petrol on hover and focus */

  /* ---- structure: slate, at rest ---- */
  --page:          #F8F9FB;
  --surface-2:     #EEF0F4;
  --border:        #DDE1E7;

  /* ---- state, and only state ----
     Both are lifted from the power-up itself, where they already mean
     this to anyone who has used it. They are never decoration here. */
  --run:     #16A34A;
  --run-bg:  #E3F6EA;
  --over:    #C2261D;
  --over-bg: #FBE6E3;

  /* The two dark blocks — the showcase band and the closing CTA — are one
     surface used twice, so they share these. Two near-identical darks read
     as a mistake rather than as a rhythm. */
  --band-1: #182029;
  --band-2: #131A22;
  --band-3: #0E141A;
  --band-accent: #5EEAD4;
  --band-muted:  #8E9BAC;
}

/* =============================================================
   OVERRIDES — colours written literally into email-inbox.css that
   no token can reach. There are more of them than the token block
   suggests: the dark band and the final CTA are painted in blue
   hexes rather than in var(), so a theme that only sets --primary
   comes out half blue. Every one below was found by scanning the
   stylesheet for blue literals, not by eye.

   These belong in css/system.css as tokens when it gets that name.
   ============================================================= */

/* the wash behind the hero */
body::before { background: linear-gradient(180deg, #E7EAEF 0%, #EFF1F5 42%, var(--page) 100%); }

.btn-primary:hover { box-shadow: 0 24px 50px -14px rgba(15, 118, 110, 0.45); }
.flow-points li svg { background: rgba(15, 118, 110, 0.12); }

/* ---- the dark stage band ---- */
/* Same surface as .final-cta below: the same diagonal ground and the same
   pair of petrol glows, so the page opens and closes on one dark rather
   than two that nearly match. */
.showcase-band {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(20, 184, 166, 0.24), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(45, 212, 191, 0.13), transparent 55%),
    linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%);
}
.showcase-band .kicker { color: var(--band-accent); }
.showcase-band .section-sub { color: var(--band-muted); }
.showcase-band .flow-n { color: var(--band-muted); }
.showcase-band .flow-item.is-active .flow-n { color: var(--band-accent); }
.showcase-band .flow-step:focus-visible { outline-color: var(--band-accent); }
.showcase-band .flow-item.is-active .flow-step { border-color: rgba(94, 234, 212, 0.50); }
.showcase-band .flow-ic { color: var(--band-muted); }
.showcase-band .flow-label { color: #D3DAE3; }
.showcase-band .flow-copy p { color: var(--band-muted); }
.showcase-band .flow-copy em { color: #99E9DA; }
.showcase-band .flow-points li { color: #DCE1E8; }
.showcase-band .flow-points li svg { background: rgba(45, 212, 191, 0.22); color: #8FE3D5; }
.showcase-band .flow-copy code {
  color: #B7E9DF;
  background: rgba(45, 212, 191, 0.15);
  border-color: rgba(45, 212, 191, 0.30);
}
.flow-arrow { color: var(--band-muted); }
.flow-arrow:hover { background: rgba(45, 212, 191, 0.16); border-color: rgba(45, 212, 191, 0.45); }
.flow-arrow:focus-visible { outline: 2px solid var(--band-accent); }
/* The screen's halo. Neutral here — a blue glow on a slate band is the
   one thing that would give the borrowed stylesheet away.

   And a taller frame than the system's 1440:744. That ratio was set for
   Email Inbox's recordings; these are of a Trello card modal, which is
   nearer square, and forcing one into 1.94:1 costs about a quarter of its
   height — the entry list and View full log, which is the whole point of
   the clip. 1.60:1 is the shape both masters reach after losing only the
   chrome around the subject. The frame is still pinned: what matters is
   that every stage shares one shape, not which one. */
.shot {
  aspect-ratio: 1440 / 900;
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.8), 0 0 110px -26px rgba(20, 184, 166, 0.34);
}

/* Two shapes, and the seam is where the rail already puts one.

   The three "On the card" clips are of a Trello card modal, which is nearer
   square; the two "Across the team" ones are of a fullscreen report whose
   table reaches both edges. 1.60:1 costs the report a sixth of its width —
   the Comment column and half of List — and 1.93:1 costs the card modal a
   quarter of its height, which is the entry list. There is no single ratio,
   only a choice about which clip to damage.

   So the frame changes once, between "Set an estimate" and "Report across
   boards" — exactly where the rail's own label changes from On the card to
   Across the team. A frame that changes shape inside a group would read as a
   bug; one that changes at a boundary the page already announces reads as the
   two kinds of screen they are. */
.shot.is-wide { aspect-ratio: 2084 / 1080; }

/* Two frame shapes are fine; two *page* heights are not. Without this the
   pane got 72px shorter the moment you stepped from Set an estimate to
   Report across boards, and everything below it slid up — which is what
   actually reads as a bug, more than the screen changing shape does.

   So the slot reserves the taller frame's height at every stage and the
   screen sits centred in it. Stepping now changes the picture and nothing
   else. min-width: 0 because this box has an aspect-ratio and is a grid
   item: without it the ratio turns its height back into a minimum width. */
.stage-media {
  aspect-ratio: 1440 / 900;
  min-width: 0;
  display: grid;
  align-items: center;
}
.stage-media > .shot { width: 100%; }

/* ---- toolkit ----
   The system's toolkit is a tablist over one shared viewer. There are no
   stills yet, so there is nothing to view, and rows that behave like tabs
   while nothing answers them are worse than rows that admit they are a
   list: the markup uses .tk-grid rather than .tk-list, which is also what
   keeps the system's tab controller from attaching to it at all.

   So the selected and hover states go. A row you cannot press should not
   light up under the cursor — that is the page promising something. What
   is left is the list at full width, in as many columns as it can hold.

   Putting the viewer back: restore .tk-list, the .tk-pane markup and the
   row attributes from the plan doc, and delete this block. */
.tk-grid { display: grid; grid-template-columns: 1fr; gap: 2px; list-style: none; }
.tk-row { cursor: default; }
.tk-row:hover { background: none; }
@media (min-width: 620px) {
  .tk-grid { grid-template-columns: 1fr 1fr; gap: 2px 16px; }
}
@media (min-width: 1100px) {
  /* Eight rows, four across: the one count that divides evenly and still
     leaves a description room for two lines. */
  .tk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; }
}

/* ---- pricing band ---- */
.pricing { background: linear-gradient(180deg, #EDEFF3 0%, #E3E6EE 100%); }
.price-panel { border-color: var(--border); }

/* ---- final CTA ---- */
.final-cta { background: linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%); }
.final-cta::before {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(20, 184, 166, 0.24), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(45, 212, 191, 0.13), transparent 55%);
}

@media (min-width: 768px) {
  .showcase-band .flow-label { color: var(--band-muted); }
  /* The desktop rail paints the open stage's hairline #5B8CFF directly —
     the last blue on the band, and the most visible one. */
  .showcase-band .flow-item.is-active .flow-step { border-top-color: var(--band-accent); }
}

/* =============================================================
   The rail
   ============================================================= */

/* Five stages, so five columns. The shared rule says four, which
   leaves the fifth in an implicit auto track narrower than its
   neighbours. */
@media (min-width: 768px) {
  .flow { grid-template-columns: repeat(5, 1fr); }
}

/* The slot that carries "01"–"05" on Email Inbox carries a group name
   here instead. Numbering would assert a sequence this product does
   not have — an estimate gets set before tracking, not third — while
   the two groups are true: three things happen on a card, two happen
   across the team. */
.flow-n {
  font-variant-numeric: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* On a phone the system lays the step out as one flex row — icon, label,
   then the small slot pushed to the right. That slot held "01"; it now
   holds "Across the team", which does not shrink, so it squeezed the
   label and set a floor the row could not go below. Stacked instead: the
   group name sits above the label, which reads better anyway and lets the
   row shrink to whatever the screen is. */
@media (max-width: 767px) {
  .flow-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
  }
  .flow-ic { grid-row: 1 / 3; }
  .flow-n { grid-column: 2; grid-row: 1; margin-left: 0; }
  .flow-label { grid-column: 2; grid-row: 2; }
}
@media (min-width: 768px) {
  .flow-n { font-size: 10.5px; }
}

/* The hero's <em> is filled with --grad-brand by the system. That only
   works while the accent is saturated: under a slate-only theme it
   rendered the emphasised words lighter than the ink around them, which
   is de-emphasis, and a marker underline substituted for it read as
   selected text. A saturated accent restores it, so the system's own rule stands
   and this file says nothing about it. */

/* =============================================================
   Every figure on this page is a measurement, so figures line up.
   No extra typeface needed — the system's own faces carry it.
   ============================================================= */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* =============================================================
   Hero — copy left, visual right.

   The system stacks the hero: centred copy on top, a full-width
   product shot beneath. That suits Email Inbox, whose hero is a
   2400px collage that needs the whole width to be readable. This
   one is a single panel, so it sits beside the sentence instead of
   under it, and the copy stops being centred.
   ============================================================= */

/* The system hides .hero-visual below 768px and that rule stands here too,
   so nothing overrides it. While this was a dashed placeholder with a
   sentence in it, showing it on a phone was worth doing; the drawing that
   replaced it is 2.6:1 and half fine print, and at 350px the labels come out
   about four pixels tall — a grey smear that pushes the CTA down a screen.
   (display: none still downloads it. Email Inbox keeps its sources in data-
   attributes to avoid that; 81 KB compressed did not seem worth the same
   machinery here. If it ever does, that is the pattern.) Delete this comment
   and add `display: block` back if the art becomes something a phone can
   read. */

/* Left at every width, not only where the two columns appear: below the
   breakpoint the copy simply runs full width, and a hero that centres
   itself on a phone and left-aligns on a laptop is two designs. */
.hero-copy { align-items: flex-start; text-align: left; }
.hero-cta,
.hero-trust { justify-content: flex-start; }
/* No text-wrap: balance here. It evens the line lengths and in doing so
   breaks the headline mid-sentence — "One timer. Every / board." — which
   costs more than the ragged edge it fixes. Left to wrap on its own, the
   first line is a whole sentence. */

@media (min-width: 1000px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: 56px;
  }
  /* 56px was set for a headline running the full width of the page. In a
     column it breaks "Every / board." and runs to four lines, so it comes
     down and the hard break in the markup comes out — the sentence wraps
     where the column says, not where a wider layout once wanted it. */
  .hero h1 { font-size: 46px; max-width: 100%; }
  .hero-sub { max-width: 46ch; }
  /* The system opens this to the full width at the same breakpoint,
     which is what makes the stacked hero work. Here it is a column. */
  .hero-visual { max-width: none; width: 100%; margin-top: 0; }
}

@media (min-width: 1280px) {
  .hero h1 { font-size: 52px; }
}

/* =============================================================
   Hero composition — currently unused.

   The board fragment that stood in the hero until the real shot
   exists. Kept because nothing here is committed yet and it is the
   only drawing of the product we have; delete the block once the
   recording lands and it is certain nothing wants it back.
   ============================================================= */
.tt-vis {
  display: grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 860px) {
  .tt-vis { grid-template-columns: minmax(0, 1fr) 302px; gap: 22px; }
}

.tt-board {
  background: linear-gradient(180deg, #EFF1F5 0%, #E2E6EC 100%);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 10px;
}
.tt-list {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
  padding-left: 4px;
}
.tt-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 13px;
  box-shadow: 0 1px 2px rgba(20, 28, 40, 0.16);
  display: grid;
  gap: 9px;
}
.tt-card p { font-size: 14px; line-height: 1.35; color: #253044; }
.tt-row { display: flex; align-items: center; gap: 8px; }

.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  background: #EDEFF3;
  color: #64748B;
}
.tt-badge svg { width: 13px; height: 13px; }
.tt-badge.is-running { background: var(--run-bg); color: var(--run); }
.tt-badge.is-over    { background: var(--over-bg); color: var(--over); }

.tt-people { display: flex; margin-left: auto; }
.tt-person {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  margin-left: -6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  display: grid;
  place-items: center;
}

.tt-back {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 15px;
  display: grid;
  gap: 12px;
}
.tt-back-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt-total { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); }
.tt-total span { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.tt-stop {
  height: 30px;
  padding: 0 13px;
  border-radius: 7px;
  border: none;
  background: var(--over);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: default;
}
.tt-back-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.tt-back-foot .over { color: var(--over); font-weight: 600; }

/* The split bar: filled to the estimate, red beyond it, a tick where the
   estimate sits. This is how the product drew progress until 2026-09-02;
   it now draws a ring around the totals panel instead, so this belongs to
   the unused hero composition and would need redrawing before reuse.

   The fill is slate, not the accent. A bar is a readout, not something
   you can press, so it has no business wearing the action colour — and
   next to the green "running" badge a petrol fill read as the same
   green-ish thing meaning something else. Slate filling into red says
   what it means without borrowing from either. */
.tt-bar { position: relative; height: 8px; border-radius: 4px; background: #E4E8EE; overflow: hidden; }
.tt-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
.tt-bar .past { width: 100%; background: var(--over); }
.tt-bar .upto { background: #64748B; }
.tt-bar .mark { top: -2px; bottom: -2px; width: 2px; border-radius: 0; background: var(--ink); opacity: 0.4; }

@media (min-width: 860px) {
  /* Lifted a little so the pair reads as one composition rather than two
     panels sharing a baseline. */
  .tt-back { margin-top: 34px; }
}

/* =============================================================
   Media placeholders.

   These stand in until the recordings exist. Each one is replaced
   by the <video class="shot-media"> the shared script already
   drives — see docs/time-tracking-landing-plan.md for the shot list.
   Deliberately obvious: a fake screenshot would be worse than an
   honest gap.
   ============================================================= */
/* No aspect-ratio below the desktop breakpoint, and never an automatic
   minimum width.

   These frames hold wrapping text, not a video. On a narrow screen the
   text grows tall, and `aspect-ratio` turns that height back into a
   minimum WIDTH — height x 1.94 — which `min-width: auto` on a grid item
   then treats as a floor nothing may shrink below. The rail blew out to
   882px inside a 551px column and took the whole page sideways with it.

   The system's own .shot carries the same ratio safely because what sits
   in it is a <video> with an intrinsic size of its own.

   NOTE: nothing on the page uses .shot-pending today — all five stages have
   their clip, and the toolkit's frame is out until the stills exist. Kept
   because it comes back with that frame, not because it is live. */
.shot-pending {
  border: 1.5px dashed rgba(255, 255, 255, 0.24);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  min-width: 0;
  min-height: 190px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
}
.shot-pending b {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.shot-pending span { font-size: 13px; color: var(--band-muted); max-width: 44ch; line-height: 1.5; }
.shot-pending em {
  font-style: normal;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7B8794;
}
.shot-pending.on-light {
  border-color: var(--border-active);
  background: var(--surface-2);
}

/* Once there is room for the frame to keep its proportions without the
   text being forced to stack, the ratio comes back. */
@media (min-width: 768px) {
  .shot-pending { aspect-ratio: 1440 / 900; min-height: 0; }
  .shot-pending.on-light { aspect-ratio: 1200 / 780; }
}
.shot-pending.on-light b { color: var(--primary-ink); }
.shot-pending.on-light span { color: var(--muted); }
.shot-pending.on-light em { color: var(--muted); }

/* =============================================================
   When the trial ends — the soft wall.

   Worth its own band because no competitor says it out loud, and
   because paid-guard.js genuinely behaves this way.
   ============================================================= */
.tt-wall { padding: 0 20px 64px; }
.tt-wall-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow-sm);
}
.tt-wall h2 { font-size: 22px; margin-bottom: 8px; }
.tt-wall > .tt-wall-inner > p { font-size: 15.5px; color: var(--body); max-width: 64ch; margin-bottom: 24px; }
.tt-wall-grid { display: grid; gap: 16px; }
.tt-keep { border-left: 2px solid var(--run); padding-left: 15px; }
.tt-keep.is-paid { border-left-color: var(--over); }
.tt-keep b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.tt-keep span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

@media (min-width: 768px) {
  .tt-wall-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* =============================================================
   Pricing — two plans, not one.

   Email Inbox sells a single price, so the system has one panel.
   This product has a monthly and a yearly, and the yearly saving is
   the whole argument for it: it does not survive being hidden
   behind a toggle, so both stand side by side.
   ============================================================= */
.tt-tiles { display: grid; gap: 18px; max-width: 860px; margin: 0 auto; }
.tt-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
  align-content: start;
}
.tt-tile.is-best { border-color: var(--primary-2); box-shadow: var(--shadow-md); }
.tt-save {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--grad-brand);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.tt-plan {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tt-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tt-amount span { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tt-tile p { font-size: 14.5px; color: var(--body); }
.tt-tile p b { color: var(--primary-ink); }
.tt-tile .btn { width: 100%; }

.tt-includes { list-style: none; display: grid; gap: 11px; max-width: 860px; margin: 26px auto 0; }
.tt-includes li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink); }
.tt-includes svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.12);
  color: var(--primary);
  margin-top: 1px;
}
.tt-fine { text-align: center; max-width: 58ch; margin: 24px auto 0; font-size: 14px; color: var(--muted); }

@media (min-width: 768px) {
  .tt-tiles { grid-template-columns: 1fr 1fr; }
  .tt-includes { grid-template-columns: 1fr 1fr; column-gap: 30px; }
}

/* =============================================================
   Toolkit — this product's rows carry inline code samples.
   ============================================================= */
.tk-txt code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--primary-ink);
}