/* Paliku Gardens Timeline Generator — Deep Ocean & Editorial brand.
 *
 * All rules scoped under .paliku-tg so the tool can drop into a host page
 * without leaking. Brand tokens live as CSS variables at the top; swap any
 * --pt-* value to retheme without touching the rule bodies. */

/* ============================================================================
   1. BRAND TOKENS
   ============================================================================ */

.paliku-tg {
  /* Palette — Deep Ocean & Editorial. 8-slot system, mapped by purpose. */
  --pt-ink:          #10222C;   /* body and heading text */
  --pt-deep-ocean:   #1B3A4B;   /* brand accent, primary button, logo lockup */
  --pt-tide:         #2C6E7D;   /* links */
  --pt-driftwood:    #A89478;   /* small uppercase labels, accent borders */
  --pt-sand:         #D9CFBC;   /* dividers, subtle borders */
  --pt-linen:        #EAE3D2;   /* engine warning callout background */
  --pt-page:         #F7F3EB;   /* default page background */
  --pt-paper:        #FCFAF5;   /* elevated surface backgrounds */

  /* Derived ink shades (internal, not brand colors) — for muted body text. */
  --pt-ink-soft:     rgba(16, 34, 44, 0.72);
  --pt-ink-faint:    rgba(16, 34, 44, 0.55);

  /* Fonts. Loaded via Google Fonts <link> in index.html with system fallbacks. */
  --pt-font-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --pt-font-body:    "Lora", Georgia, "Times New Roman", serif;

  /* Geometry */
  --pt-radius:       4px;
  --pt-max-w:        720px;

  /* Base typography */
  font-family: var(--pt-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--pt-ink);
  background: var(--pt-page);
}

.paliku-tg *,
.paliku-tg *::before,
.paliku-tg *::after { box-sizing: border-box; }

/* ============================================================================
   2. LAYOUT
   ============================================================================ */

.paliku-tg .pt-container {
  max-width: var(--pt-max-w);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

/* ============================================================================
   3. PAGE HEADER (brand mark + tool title + subtitle)
   ============================================================================ */

.paliku-tg .pt-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.paliku-tg .pt-page-header h1 {
  font-family: var(--pt-font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--pt-ink);
  margin: 0;
}

.paliku-tg .pt-subtitle {
  font-family: var(--pt-font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--pt-ink-soft);
  margin: 0;
  max-width: 38rem;
}

/* Print-only elements hidden on screen by default. The @media print block
   below re-enables them. Keeping the defaults before @media print so the
   print rules win the cascade when they apply. */
.paliku-tg .pt-brand-print,
.paliku-tg .pt-running-header,
.paliku-tg .pt-print-footer { display: none; }

/* ============================================================================
   4. FORM
   ============================================================================ */

.paliku-tg .pt-form {
  display: grid;
  gap: 1.75rem;
}

.paliku-tg .pt-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: none;
  padding: 0;
  margin: 0;
}

.paliku-tg .pt-field > label,
.paliku-tg .pt-field > legend {
  font-family: var(--pt-font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
  color: var(--pt-ink);
  line-height: 1.3;
}

.paliku-tg .pt-optional {
  color: var(--pt-ink-faint);
  font-weight: 400;
  font-size: 0.88rem;
}

.paliku-tg input[type="date"],
.paliku-tg input[type="time"],
.paliku-tg input[type="number"],
.paliku-tg input[type="text"] {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--pt-sand);
  border-radius: var(--pt-radius);
  font: inherit;
  font-size: 1rem;
  background: var(--pt-paper);
  color: var(--pt-ink);
  max-width: 18rem;
}

.paliku-tg input[type="date"]:focus,
.paliku-tg input[type="time"]:focus,
.paliku-tg input[type="number"]:focus,
.paliku-tg input[type="text"]:focus {
  outline: 2px solid var(--pt-deep-ocean);
  outline-offset: 1px;
  border-color: var(--pt-deep-ocean);
}

.paliku-tg input[type="number"]::-webkit-outer-spin-button,
.paliku-tg input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.paliku-tg input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  max-width: 9rem;
}

/* ----- Chips ----- */

.paliku-tg .pt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.paliku-tg .pt-chips button {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--pt-sand);
  border-radius: 999px;
  background: var(--pt-paper);
  font-family: var(--pt-font-body);
  font-size: 0.88rem;
  color: var(--pt-ink);
  cursor: pointer;
  line-height: 1.2;
}

.paliku-tg .pt-chips button:hover {
  border-color: var(--pt-deep-ocean);
  background: var(--pt-paper);
}

.paliku-tg .pt-chips button.is-active {
  background: var(--pt-deep-ocean);
  color: var(--pt-page);
  border-color: var(--pt-deep-ocean);
}

.paliku-tg .pt-helper {
  margin: 0.15rem 0 0;
  color: var(--pt-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 38rem;
}

/* ----- Radio cards ----- */

.paliku-tg .pt-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
@media (max-width: 480px) {
  .paliku-tg .pt-radio-group { grid-template-columns: 1fr; }
}

.paliku-tg .pt-radio-option {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--pt-sand);
  border-radius: var(--pt-radius);
  background: var(--pt-paper);
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.paliku-tg .pt-radio-option:hover { border-color: var(--pt-driftwood); }

.paliku-tg .pt-radio-option:has(input:checked) {
  border-color: var(--pt-deep-ocean);
  background: var(--pt-paper);
  box-shadow: inset 0 0 0 1px var(--pt-deep-ocean);
}

.paliku-tg .pt-radio-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.paliku-tg .pt-radio-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--pt-ink);
}

.paliku-tg .pt-radio-option small {
  color: var(--pt-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ============================================================================
   5. OUTPUT — heading, timeline rows
   ============================================================================ */

.paliku-tg .pt-output {
  margin-top: 2.25rem;
}

.paliku-tg .pt-output[hidden] { display: none; }

.paliku-tg .pt-output-heading {
  font-family: var(--pt-font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 4.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--pt-ink);
  margin: 0 0 0.35rem;
}

.paliku-tg .pt-output-subhead {
  color: var(--pt-ink-soft);
  margin: 0 0 1.75rem;
  font-size: 1rem;
  font-style: italic;
}

/* ----- Timeline rows ----- */

.paliku-tg .pt-timeline {
  margin: 0;
  padding: 0;
}

.paliku-tg .pt-timeline-section {
  margin-bottom: 1.85rem;
}
.paliku-tg .pt-timeline-section:last-child { margin-bottom: 0; }

.paliku-tg .pt-timeline-section h3 {
  font-family: var(--pt-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pt-driftwood);
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--pt-sand);
}

.paliku-tg .pt-timeline-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 1rem;
}

.paliku-tg .pt-timeline-row dt {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--pt-ink-soft);
  font-feature-settings: "tnum";
}

.paliku-tg .pt-timeline-row dd {
  margin: 0;
  color: var(--pt-ink);
}

/* ============================================================================
   6. CALLOUTS
   ============================================================================ */

/* Engine warnings — generated per-timeline, indicate a specific condition. */
.paliku-tg .pt-warnings {
  background: var(--pt-linen);
  border-left: 3px solid var(--pt-deep-ocean);
  border-radius: 0 var(--pt-radius) var(--pt-radius) 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: var(--pt-ink);
  line-height: 1.55;
}

.paliku-tg .pt-warnings p { margin: 0; }
.paliku-tg .pt-warnings p + p { margin-top: 0.5rem; }

/* Informational expertise callout — always shown when timeline is shown.
   Editorial feel, distinct from warning style. */
.paliku-tg .pt-hmu-callout {
  background: var(--pt-paper);
  border-left: 3px solid var(--pt-driftwood);
  border-radius: 0 var(--pt-radius) var(--pt-radius) 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: var(--pt-ink);
  line-height: 1.55;
}

.paliku-tg .pt-hmu-callout p { margin: 0; }
.paliku-tg .pt-hmu-callout strong { font-weight: 700; }

/* ============================================================================
   7. ADVANCED OVERRIDES PANEL
   ============================================================================ */

.paliku-tg .pt-advanced {
  margin-top: 2rem;
  border: 1px solid var(--pt-sand);
  border-radius: var(--pt-radius);
  background: var(--pt-paper);
  box-shadow: 0 1px 2px rgba(16, 34, 44, 0.04);
}

.paliku-tg .pt-advanced[hidden] { display: none; }

.paliku-tg .pt-advanced-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  user-select: none;
  position: relative;
}

.paliku-tg .pt-advanced-summary::-webkit-details-marker { display: none; }
.paliku-tg .pt-advanced-summary::marker { content: ""; }

.paliku-tg .pt-advanced-summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem;
  top: 1rem;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pt-driftwood);
  font-weight: 400;
}

.paliku-tg .pt-advanced[open] .pt-advanced-summary::after { content: "\2212"; }

.paliku-tg .pt-advanced-summary:hover { background: var(--pt-page); }
.paliku-tg .pt-advanced[open] .pt-advanced-summary { border-bottom: 1px solid var(--pt-sand); }

.paliku-tg .pt-advanced-summary-label {
  font-family: var(--pt-font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--pt-ink);
}

.paliku-tg .pt-advanced-summary-hint {
  color: var(--pt-ink-soft);
  font-size: 0.9rem;
  margin-top: 0.1rem;
}

.paliku-tg .pt-advanced-form {
  display: grid;
  gap: 1.5rem;
  padding: 1.25rem 1.3rem 1.4rem;
}

.paliku-tg .pt-adv-field {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.paliku-tg .pt-adv-field > legend {
  font-family: var(--pt-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
  color: var(--pt-ink);
}

/* Segmented radio groups for the two enumerated overrides */
.paliku-tg .pt-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .paliku-tg .pt-segment { grid-template-columns: 1fr; }
}

.paliku-tg .pt-segment-option {
  display: flex;
  align-items: flex-start;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--pt-sand);
  border-radius: var(--pt-radius);
  background: var(--pt-paper);
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--pt-ink);
}
.paliku-tg .pt-segment-option:hover { border-color: var(--pt-driftwood); }
.paliku-tg .pt-segment-option:has(input:checked) {
  border-color: var(--pt-deep-ocean);
  box-shadow: inset 0 0 0 1px var(--pt-deep-ocean);
}
.paliku-tg .pt-segment-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.paliku-tg .pt-segment-option em {
  font-style: normal;
  color: var(--pt-ink-soft);
}

/* Checkbox toggle rows */
.paliku-tg .pt-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.paliku-tg .pt-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  row-gap: 0.2rem;
  align-items: start;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--pt-sand);
  border-radius: var(--pt-radius);
  background: var(--pt-paper);
  cursor: pointer;
}
.paliku-tg .pt-toggle:hover { border-color: var(--pt-driftwood); }
.paliku-tg .pt-toggle:has(input:checked) {
  border-color: var(--pt-deep-ocean);
  box-shadow: inset 0 0 0 1px var(--pt-deep-ocean);
}
.paliku-tg .pt-toggle input[type="checkbox"] {
  grid-row: 1 / span 2;
  margin-top: 0.22rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--pt-deep-ocean);
}
.paliku-tg .pt-toggle-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pt-ink);
}
.paliku-tg .pt-toggle small {
  color: var(--pt-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ============================================================================
   8. PRIMARY BUTTON (Download as PDF)
   ============================================================================ */

.paliku-tg .pt-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2rem;
}

.paliku-tg .pt-btn-primary {
  display: inline-block;
  background: var(--pt-deep-ocean);
  color: var(--pt-page);
  font-family: var(--pt-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  border-radius: var(--pt-radius);
  cursor: pointer;
  line-height: 1.2;
  transition: background-color 0.15s ease;
}

.paliku-tg .pt-btn-primary:hover {
  background: var(--pt-ink);
}

.paliku-tg .pt-btn-primary:focus-visible {
  outline: 2px solid var(--pt-deep-ocean);
  outline-offset: 3px;
}

/* ============================================================================
   9. ERROR STATES
   ============================================================================ */

.paliku-tg .pt-load-error {
  margin-top: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--pt-linen);
  border-left: 3px solid var(--pt-deep-ocean);
  border-radius: 0 var(--pt-radius) var(--pt-radius) 0;
  font-size: 0.95rem;
  color: var(--pt-ink);
}

/* ============================================================================
   10. PRINT / PDF
   ============================================================================ */

/* @page rules: page margins + suppress browser auto headers/footers by
   explicitly emptying every margin box except the one we use for the running
   header. Then assign the running element to the top-left box. */
@page {
  size: letter;
  margin: 1.1in 0.7in 0.55in 0.7in;

  @top-left    { content: element(pageHeader); vertical-align: bottom; padding-bottom: 0.18in; }
  @top-center  { content: ""; }
  @top-right   { content: ""; }
  @bottom-left   { content: ""; }
  @bottom-center { content: ""; }
  @bottom-right  { content: ""; }
}

@media print {
  /* Force color preservation for tinted backgrounds, borders, and rules.
     Without this, Chrome strips backgrounds to save ink and the callout +
     footer divider lose their visual treatment. */
  .paliku-tg,
  .paliku-tg * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body { background: #fff; }
  .paliku-tg { background: #fff; color: var(--pt-ink); }
  .paliku-tg .pt-container { max-width: none; margin: 0; padding: 0; }

  /* Hide all on-screen-only chrome */
  .paliku-tg .pt-page-header,
  .paliku-tg #pt-form,
  .paliku-tg #pt-advanced,
  .paliku-tg .pt-actions,
  .paliku-tg .pt-warnings,
  .paliku-tg .pt-load-error {
    display: none !important;
  }

  /* Running header — declared once, repeated on every page via @top-left.
     v0.5.6: contains only the BMP wordmark (logo image). No repeating title
     text — the document heading lives in the body and only appears on page 1. */
  .paliku-tg .pt-running-header {
    display: block;
    position: running(pageHeader);
    width: 100%;
  }
  .paliku-tg .pt-running-logo {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
  }

  /* Output: heading → date → callout → timeline (flex order) */
  .paliku-tg .pt-output {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .paliku-tg .pt-output-heading {
    order: 1;
    font-family: var(--pt-font-display);
    font-weight: 300;
    font-size: 22pt;
    line-height: 1.1;
    margin: 0 0 1pt;
    color: var(--pt-ink);
    page-break-after: avoid;
    break-after: avoid;
  }

  .paliku-tg .pt-output-subhead {
    order: 2;
    font-size: 10.5pt;
    font-style: italic;
    color: var(--pt-ink-soft);
    margin: 0 0 9pt;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* HMU callout — keep editorial container (paper bg + driftwood rule) */
  .paliku-tg .pt-hmu-callout {
    order: 3;
    background: var(--pt-paper) !important;
    border-left: 3px solid var(--pt-driftwood) !important;
    border-radius: 0 2pt 2pt 0;
    padding: 7pt 10pt;
    margin: 0 0 10pt;
    font-size: 9.5pt;
    line-height: 1.45;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .paliku-tg .pt-hmu-callout p { margin: 0; }

  /* Timeline */
  .paliku-tg .pt-timeline { order: 4; margin: 0; }

  .paliku-tg .pt-timeline-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 7pt;
  }
  .paliku-tg .pt-timeline-section:last-child { margin-bottom: 0; }

  .paliku-tg .pt-timeline-section h3 {
    font-size: 7.5pt;
    letter-spacing: 0.16em;
    color: var(--pt-driftwood) !important;
    border-bottom: 1px solid var(--pt-sand) !important;
    padding-bottom: 2.5pt;
    margin: 0 0 3pt;
    page-break-after: avoid;
    break-after: avoid;
  }

  .paliku-tg .pt-timeline-row {
    grid-template-columns: 4.7rem 1fr;
    column-gap: 9pt;
    font-size: 10.5pt;
    line-height: 1.35;
    padding: 1.5pt 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .paliku-tg .pt-timeline-row dt { color: var(--pt-ink-soft) !important; }

  /* Footer — appears once at end of last page; with extra breathing room
     and a thin sand divider above. */
  .paliku-tg .pt-print-footer {
    display: block;
    margin-top: 22pt;
    padding-top: 12pt;
    border-top: 1px solid var(--pt-sand) !important;
    text-align: center;
    font-size: 9pt;
    line-height: 1.6;
    color: var(--pt-ink-soft);
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .paliku-tg .pt-print-footer strong {
    color: var(--pt-ink);
    font-weight: 600;
    display: block;
    font-size: 9.5pt;
    margin-bottom: 2pt;
  }
  .paliku-tg .pt-print-footer a {
    color: var(--pt-tide);
    text-decoration: none;
  }
}