/* ============================================================================
   datestool — pages.css
   Page-specific layout and component overrides. One section per page type.
   Converted from the design canvas extras CSS; all frame-* selectors
   replaced with real media queries.
   ============================================================================ */

/* ============================================================================
   Index page — /
   ============================================================================ */

/* Main grows to fill space between nav and footer */
.index-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Tighter top padding so all four cards + footer fit above the fold */
.index-main .page {
  padding-top: var(--space-6);
}
@media (min-width: 1024px) {
  .index-main .page {
    padding-top: var(--space-10);
  }
}

/* Tighter gap on mobile to conserve vertical space */
.index-inner {
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .index-inner {
    gap: var(--space-8);
    max-width: 760px;
  }
}

.index-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.index-subtext {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* Link-card grid */
.link-card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .link-card-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color     var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
}
@media (min-width: 1024px) {
  .link-card {
    padding: var(--space-6);
  }
}

.link-card:hover {
  border-color: var(--color-accent);
}
.link-card:hover .link-card-title {
  color: var(--color-accent-text);
}
.link-card:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--input-focus-ring);
}
.link-card:active {
  border-color: var(--color-accent);
}

.link-card-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-fast) var(--ease);
}
@media (min-width: 1024px) {
  .link-card-title {
    font-size: var(--text-lg);
  }
}

.link-card-desc {
  display: block;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
@media (min-width: 1024px) {
  .link-card-desc {
    font-size: var(--text-base);
  }
}

/* ============================================================================
   Add / Subtract calculator — /add-subtract/
   ============================================================================ */

/* Hero: a date string ("21 Aug 2026"), not a number — needs smaller size on mobile */
.as-hero-date {
  font-size: 40px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--result-hero-color);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .as-hero-date {
    font-size: var(--text-result);
  }
}

.as-hero-dow {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--result-label-color);
  margin-top: 6px;
}

.as-hero-stack { min-width: 0; }

/* Error colours for the date hero */
.result-card.is-error .as-hero-date { color: var(--color-error-text); }
.result-card.is-error .as-hero-dow  { color: var(--color-error-text); opacity: 0.8; }

/* Two-column breakdown (week / quarter) */
.result-breakdown.as-breakdown-2 {
  grid-template-columns: 1fr 1fr;
}

/* Segmented field: full-width on mobile, auto on desktop */
.as-segmented-field .segmented {
  display: flex;
  width: 100%;
}
.as-segmented-field .segmented-item {
  flex: 1 1 0;
  min-width: 0;
}
@media (min-width: 1024px) {
  .as-segmented-field .segmented {
    display: inline-flex;
    width: auto;
    align-self: flex-start;
  }
  .as-segmented-field .segmented-item {
    flex: 0 0 auto;
  }
}

.as-amount-input {
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .as-amount-input {
    max-width: 200px;
  }
}

/* ============================================================================
   Working days calculator — /working-days/
   ============================================================================ */

/* "Public holidays are not excluded." caption under the result card */
.wd-v2-note {
  text-align: center;
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: calc(var(--space-5) * -1 + var(--space-2));
}

/* ============================================================================
   Age calculator — /age/
   ============================================================================ */

/* Two-column row for hours / minutes */
.result-breakdown-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--result-divider);
}

/* Uniform breakdown sizing across both rows */
.result-breakdown-2 .result-breakdown-num {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* Next birthday / born-on-day captions below the result card */
.age-extras {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  margin-top: calc(var(--space-5) * -1 + var(--space-2));
}
.age-extras .t-caption {
  margin: 0;
  text-align: center;
}

/* ============================================================================
   Prose pages — /privacy/ and /terms/
   ============================================================================ */

body.is-prose .page {
  padding-top: var(--space-10);
}
@media (min-width: 1024px) {
  body.is-prose .page {
    padding-top: var(--space-16);
  }
}

body.is-prose .page-inner {
  max-width: 860px;
  display: block;
}

/* Simplified nav for prose pages: just a "Calculators" link to the right of wordmark */
.nav-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.nav-right .nav-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
}
.nav-right .nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}
.nav-right .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--input-focus-ring);
}

/* Page heading */
.prose-header {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid var(--color-border-default);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
}
.prose-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}
@media (max-width: 639px) {
  .prose-h1 { font-size: 1.625rem; }
}
.prose-meta {
  font-size: 0.875rem;
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.prose-meta-sep {
  color: var(--color-text-tertiary);
  margin: 0 0.5rem;
}

/* Notice block — blue left-edge accent */
.prose-notice {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 1rem 1.125rem;
  margin: 0 auto var(--space-10);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-primary);
  max-width: 68ch;
}

/* Body prose */
.prose {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--color-text-primary);
  font-size: var(--text-md);
  line-height: 1.7;
}

.prose h2 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin: 2.5rem 0 0.75rem 0;
}
.prose section:first-child h2 { margin-top: 0; }

.prose p {
  margin: 0 0 1rem 0;
}
.prose p:last-child { margin-bottom: 0; }

.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.prose ul li {
  padding-left: 0.25rem;
}
.prose ul li::marker {
  color: var(--color-text-tertiary);
}

.prose a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
.prose a:hover { text-decoration: underline; }

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Server log data table */
.prose-table-wrap {
  margin: 0.75rem 0 1.25rem 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 68ch;
  overflow-x: auto;
}
.prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.55;
}
.prose-table thead th {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid var(--color-border-default);
}
.prose-table tbody td {
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  vertical-align: top;
}
@media (max-width: 639px) {
  .prose-table thead th,
  .prose-table tbody td { padding: 0.55rem 0.7rem; }
}
.prose-table tbody tr:last-child td { border-bottom: none; }
.prose-table tbody tr:nth-child(even) td { background: var(--color-bg-subtle); }
.prose-table td:first-child {
  font-weight: var(--weight-medium);
  white-space: nowrap;
  width: 38%;
}

/* ============================================================================
   404 page
   ============================================================================ */

.notfound-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-12) var(--layout-page-gutter);
}
@media (min-width: 1024px) {
  .notfound-main {
    padding: var(--space-16) var(--layout-page-gutter-lg);
  }
}

.notfound-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  max-width: 480px;
}

.notfound-number {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-size: 6.5rem;
}
@media (min-width: 1024px) {
  .notfound-number { font-size: 9rem; }
}

.notfound-message {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.notfound-cta,
.notfound-cta:hover { text-decoration: none; }
.notfound-cta { color: var(--btn-primary-text); }

/* ============================================================================
   Working hours calculator — /working-hours/
   ============================================================================ */

/* Active nav item */
.nav-right .nav-link.is-active {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

/* Row table container */
.wh-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Column header row — desktop only */
.wh-header-row {
  display: none;
}
@media (min-width: 1024px) {
  .wh-header-row {
    display: grid;
    grid-template-columns: 40px 52px 1fr 1fr 92px 76px 36px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-default);
  }
}

/* Day row — mobile: two-line flex stack */
.wh-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: stretch;
}
.wh-row:last-child {
  border-bottom: none;
}

/* Row line 1: toggle + day label + spacer + result + copy button */
.wh-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wh-col-toggle { flex: 0 0 40px; }
.wh-col-day    { flex: 0 0 auto; }
.wh-col-result { flex: 1; text-align: right; }
.wh-col-copy   { flex: 0 0 auto; }

/* Row line 2: three equal input columns */
.wh-row-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

/* Inactive rows: collapse inputs on mobile */
@media (max-width: 639px) {
  .wh-row-inactive .wh-row-inputs {
    display: none;
  }
}

/* Input cells stack label above input */
.wh-col-start,
.wh-col-end,
.wh-col-break {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Mobile input labels */
.wh-input-label {
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* "mins" escapes the uppercase inherited from t-caps-label */
.wh-mins-lower {
  text-transform: none;
}

/* Visually hidden labels (accessibility: paired with inputs via for/id) */
.wh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Day header column — left-aligned to match rows below */
.wh-header-row .wh-col-day {
  text-align: left;
}

/* Day label */
.wh-day-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Per-row daily result */
.wh-day-result {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.wh-day-result.wh-day-result-error {
  color: var(--color-error-text);
}

/* Time inputs */
.wh-time-input {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--space-2);
}
.wh-time-input::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

/* Break input: right-aligned number, no spinner */
.wh-break-input {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--space-2);
  text-align: right;
}
.wh-break-input::-webkit-inner-spin-button,
.wh-break-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wh-break-input { -moz-appearance: textfield; }

/* Dark mode: invert calendar picker icon */
[data-theme="dark"] .wh-time-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.4;
}

/* Break error border */
.wh-break-error-input {
  border-color: var(--input-border-error) !important;
}

/* Inline row error message */
.wh-row-error-msg {
  font-size: var(--text-xs);
  color: var(--color-error-text);
  margin: 0;
  line-height: var(--leading-snug);
  white-space: nowrap;
}

/* Copy-to-below button */
.wh-copy-btn {
  color: var(--color-text-tertiary);
}
.wh-copy-btn:hover {
  color: var(--color-text-secondary);
  background: var(--btn-icon-bg-hover);
}

/* Inactive rows: dim inputs only, not day label */
.wh-row-inactive .wh-col-start,
.wh-row-inactive .wh-col-end,
.wh-row-inactive .wh-col-break {
  opacity: 0.32;
  pointer-events: none;
}

/* Result breakdown: single column for this calculator */
.wh-breakdown {
  grid-template-columns: 1fr;
}

/* Desktop layout: single-row CSS grid per row */
@media (min-width: 1024px) {
  .wh-row {
    display: grid;
    grid-template-columns: 40px 52px 1fr 1fr 92px 76px 36px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  /* Promote children of wh-row-top and wh-row-inputs into the grid */
  .wh-row-top,
  .wh-row-inputs {
    display: contents;
  }

  /* Explicit column and row placement — grid-row:1 is required because
     DOM order is col 1,2,6,7 (from wh-row-top) then col 3,4,5 (from
     wh-row-inputs). Without an explicit row, the auto-placement cursor
     wraps to row 2 when it sees a column number lower than the previous. */
  .wh-col-toggle { grid-column: 1; grid-row: 1; }
  .wh-col-day    { grid-column: 2; grid-row: 1; flex: unset; }
  .wh-col-start  { grid-column: 3; grid-row: 1; }
  .wh-col-end    { grid-column: 4; grid-row: 1; }
  .wh-col-break  { grid-column: 5; grid-row: 1; }
  .wh-col-result { grid-column: 6; grid-row: 1; flex: unset; text-align: right; }
  .wh-col-copy   { grid-column: 7; grid-row: 1; flex: unset; }

  /* Reset mobile input label */
  .wh-input-label {
    display: none;
  }

  /* Desktop: restore standard padding on time and break inputs */
  .wh-time-input,
  .wh-break-input {
    padding: 0 var(--space-3);
  }


  /* Inactive rows show inputs (dimmed) on desktop */
  .wh-row-inactive .wh-row-inputs {
    display: contents;
  }
}