/**
 * Roof Pitch Tools — calculator interface
 * v2.0
 *
 * WIDTH — READ THIS FIRST
 * This stylesheet imposes NO width of any kind. There is no max-width on the
 * tool, the answer block, the reference tables or the FAQ. Every one of them
 * is width:100% and fills exactly the content area your theme provides
 * (GeneratePress: Customize > Layout > Container). Change your container
 * width and the tools follow it.
 *
 * Instead of capping the width, the layout ADAPTS to it using container
 * queries: below ~700px the tool stacks, above it the inputs move into a
 * side column so the space is actually used rather than left empty.
 * This measures the tool's own box, not the viewport, so it behaves
 * correctly inside any container, sidebar or column.
 *
 * COLOUR
 * The accent still comes from your theme. Everything else is derived from it
 * with color-mix, which is what gives the interface its tint without
 * hard-coding a brand colour. Three semantic colours (pass / caution / fail)
 * are real values because green-amber-red carries meaning that a derived
 * neutral cannot — all three are overridable tokens.
 */

.rpt {
  /* Type inherited from the theme. */
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
  color: inherit;

  /* ---- colour tokens ---- */
  --rpt-ink: var(--rpt-color-ink, var(--wp--preset--color--contrast, currentColor));
  --rpt-accent: var(--rpt-color-accent, var(--wp--preset--color--primary, var(--wp--preset--color--accent, currentColor)));
  --rpt-surface: var(--rpt-color-surface, var(--wp--preset--color--base, transparent));

  /* Semantic states. Override if they clash with your palette. */
  --rpt-ok: var(--rpt-color-ok, #0F8A5F);
  --rpt-warn: var(--rpt-color-warn, #B0761C);
  --rpt-no: var(--rpt-color-no, #C0453C);

  /* Neutral tints — solid fallbacks, upgraded below. */
  --rpt-line: rgba(128, 128, 128, 0.24);
  --rpt-hair: rgba(128, 128, 128, 0.14);
  --rpt-soft: rgba(128, 128, 128, 0.05);
  --rpt-softer: rgba(128, 128, 128, 0.025);

  /* Accent tints. */
  --rpt-tint: rgba(128, 128, 128, 0.05);
  --rpt-tint-2: rgba(128, 128, 128, 0.09);
  --rpt-accent-line: rgba(128, 128, 128, 0.3);

  /* ---- geometry ---- */
  --rpt-radius: 16px;
  --rpt-radius-sm: 10px;
  --rpt-pill: 999px;
  --rpt-pad: clamp(1.1rem, 3.5cqi, 1.75rem);

  --rpt-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fill the theme's content area. No cap, no centring, no imposed size. */
  display: block;
  width: 100%;
  margin: 0 0 2rem;

  /* Lets the layout respond to its own box rather than the viewport. */
  container-type: inline-size;
  container-name: rpt;
}

@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
  .rpt {
    --rpt-line: color-mix(in srgb, currentColor 18%, transparent);
    --rpt-hair: color-mix(in srgb, currentColor 10%, transparent);
    --rpt-soft: color-mix(in srgb, currentColor 4.5%, transparent);
    --rpt-softer: color-mix(in srgb, currentColor 2%, transparent);
    --rpt-tint: color-mix(in srgb, var(--rpt-accent) 7%, transparent);
    --rpt-tint-2: color-mix(in srgb, var(--rpt-accent) 13%, transparent);
    --rpt-accent-line: color-mix(in srgb, var(--rpt-accent) 32%, transparent);
  }
}

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

.rpt p { margin: 0 0 0.85rem; }
.rpt p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Tool card
   ========================================================================== */

.rpt-tool {
  border: 1px solid var(--rpt-line);
  border-radius: var(--rpt-radius);
  overflow: hidden;
  background: var(--rpt-surface);
  position: relative;
}

/* A hairline of accent along the top edge. The one piece of pure colour. */
.rpt-tool::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rpt-accent);
  opacity: 0.85;
  z-index: 1;
}

/* Stacked by default — correct on phones and in narrow columns. */
.rpt-tool__body { display: block; }

/* ==========================================================================
   Inputs
   ========================================================================== */

.rpt-inputs {
  padding: var(--rpt-pad);
  padding-top: calc(var(--rpt-pad) + 3px);
  background: var(--rpt-soft);
  border-bottom: 1px solid var(--rpt-line);
}

.rpt-inputs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem 1.1rem;
}

.rpt-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.rpt-field__label {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.75;
  line-height: 1.3;
}

.rpt-field__row { display: flex; align-items: stretch; }

.rpt-input {
  font-family: inherit;
  font-size: 0.95em;
  color: inherit;
  background: var(--rpt-surface);
  border: 1px solid var(--rpt-line);
  border-radius: var(--rpt-radius-sm);
  padding: 0.62em 0.75em;
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input.rpt-input { font-family: var(--rpt-mono); font-variant-numeric: tabular-nums; }

.rpt-field__row .rpt-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.rpt-input:hover { border-color: var(--rpt-accent-line); }

.rpt-input:focus {
  outline: none;
  border-color: var(--rpt-accent);
  box-shadow: 0 0 0 3px var(--rpt-tint);
}

.rpt-field__row:focus-within .rpt-field__suffix { border-color: var(--rpt-accent); }

select.rpt-input { padding-right: 2em; cursor: pointer; }

.rpt-field__suffix {
  display: flex;
  align-items: center;
  padding: 0 0.8em;
  font-family: var(--rpt-mono);
  font-size: 0.78em;
  opacity: 0.65;
  border: 1px solid var(--rpt-line);
  border-left: 0;
  border-radius: 0 var(--rpt-radius-sm) var(--rpt-radius-sm) 0;
  background: var(--rpt-soft);
  white-space: nowrap;
  transition: border-color .15s ease;
}

/* ==========================================================================
   Results
   ========================================================================== */

.rpt-result { padding: var(--rpt-pad); }

/* ---- hero figure ---- */

.rpt-hero {
  text-align: center;
  padding: 1.35rem 1rem 1.4rem;
  margin-bottom: 1.25rem;
  border-radius: var(--rpt-radius-sm);
  background: var(--rpt-tint);
  border: 1px solid var(--rpt-accent-line);
}

.rpt-hero__label {
  display: block;
  font-size: 0.7em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.45rem;
}

.rpt-hero__value {
  display: block;
  font-family: var(--rpt-mono);
  font-size: clamp(2rem, 9cqi, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--rpt-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.rpt-hero__value.is-text {
  font-family: inherit;
  font-size: clamp(1.05rem, 3.2cqi, 1.35rem);
  line-height: 1.35;
  font-weight: 600;
}

.rpt-hero__sub {
  display: block;
  font-size: 0.8em;
  opacity: 0.65;
  margin-top: 0.4rem;
}

/* ---- stat row ---- */

.rpt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.55rem;
  margin-bottom: 1.35rem;
}

.rpt-stat {
  text-align: center;
  padding: 0.8rem 0.6rem;
  border: 1px solid var(--rpt-hair);
  border-radius: var(--rpt-radius-sm);
  background: var(--rpt-softer);
  min-width: 0;
  transition: border-color .15s ease;
}

.rpt-stat:hover { border-color: var(--rpt-accent-line); }

.rpt-stat__label {
  display: block;
  font-size: 0.66em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.3rem;
}

.rpt-stat__value {
  display: block;
  font-family: var(--rpt-mono);
  font-size: 1.05em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.rpt-stat__value.is-text { font-family: inherit; font-size: 0.85em; }

.rpt-stat__sub { display: block; font-size: 0.7em; opacity: 0.55; margin-top: 0.15rem; }

/* ---- diagram ---- */

.rpt-diagram {
  margin: 0 0 1.35rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--rpt-hair);
  border-radius: var(--rpt-radius-sm);
  background: var(--rpt-softer);
}

.rpt-diagram:empty { display: none; }

.rpt-svg { width: 100%; height: auto; display: block; overflow: visible; }

.rpt-svg-roof { stroke: var(--rpt-accent); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.rpt-svg-run,
.rpt-svg-rise { stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 4 5; opacity: 0.35; fill: none; }
.rpt-svg-arc { stroke: var(--rpt-accent); stroke-width: 1.5; fill: none; opacity: 0.65; }
.rpt-svg-label { fill: currentColor; font-family: var(--rpt-mono); font-size: 11px; opacity: 0.55; }
.rpt-svg-angle { fill: var(--rpt-accent); font-family: var(--rpt-mono); font-size: 14px; font-weight: 600; }

/* ---- detail table ---- */

.rpt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.9em;
  table-layout: fixed;
}

.rpt-table th,
.rpt-table td {
  text-align: left;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--rpt-hair);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.rpt-table th { font-weight: 400; opacity: 0.72; padding-right: 1rem; width: 56%; }

.rpt-table td {
  font-family: var(--rpt-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rpt-table td.is-text { font-family: inherit; font-weight: 500; }

.rpt-table tr:last-child th,
.rpt-table tr:last-child td { border-bottom: 0; }

.rpt-subhead {
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 1.6rem 0 0.7rem;
}

/* ---- checklist with real status colour ---- */

.rpt-checklist { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.rpt-checklist__item {
  padding: 0.7em 0.9em;
  border: 1px solid var(--rpt-hair);
  border-left-width: 3px;
  border-radius: var(--rpt-radius-sm);
  margin-bottom: 0.4rem;
  background: var(--rpt-softer);
}

.rpt-checklist__item.is-ok { border-left-color: var(--rpt-ok); }
.rpt-checklist__item.is-cond { border-left-color: var(--rpt-warn); }
.rpt-checklist__item.is-no { border-left-color: var(--rpt-no); opacity: 0.62; }

.rpt-checklist__top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.rpt-checklist__name { font-weight: 600; font-size: 0.92em; }

.rpt-checklist__val {
  font-family: var(--rpt-mono);
  font-size: 0.78em;
  opacity: 0.65;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rpt-checklist__note { display: block; font-size: 0.8em; opacity: 0.65; margin-top: 0.3rem; line-height: 1.5; }

/* ---- notes ---- */

.rpt-notes {
  font-size: 0.82em;
  opacity: 0.7;
  line-height: 1.6;
  border-top: 1px solid var(--rpt-hair);
  padding-top: 0.9rem;
}

.rpt-notes p { margin: 0 0 0.5rem; }

.rpt-error {
  font-size: 0.88em;
  padding: 0.85em 1em;
  border: 1px dashed var(--rpt-line);
  border-radius: var(--rpt-radius-sm);
  opacity: 0.75;
}

/* ==========================================================================
   Actions
   ========================================================================== */

.rpt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.9rem var(--rpt-pad);
  border-top: 1px solid var(--rpt-line);
  background: var(--rpt-soft);
}

.rpt-actions:empty { display: none; }

.rpt-btn {
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  color: inherit;
  background: var(--rpt-surface);
  border: 1px solid var(--rpt-line);
  border-radius: var(--rpt-pill);
  padding: 0.6em 1.35em;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.rpt-btn:hover { border-color: var(--rpt-accent); color: var(--rpt-accent); background: var(--rpt-tint); }
.rpt-btn:focus-visible { outline: 2px solid var(--rpt-accent); outline-offset: 2px; }
.rpt-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.rpt-btn[disabled]:hover { background: var(--rpt-surface); border-color: var(--rpt-line); color: inherit; }

.rpt-btn--primary { border-color: var(--rpt-accent); color: var(--rpt-accent); background: var(--rpt-tint); }
.rpt-btn--primary:hover { background: var(--rpt-tint-2); }

.rpt-btn--ghost { margin-left: auto; opacity: 0.7; font-weight: 500; background: transparent; }

/* ==========================================================================
   Cut sheet
   ========================================================================== */

.rpt-cutsheet {
  border: 1px solid var(--rpt-hair);
  border-radius: var(--rpt-radius-sm);
  padding: 1.25rem;
  background: var(--rpt-softer);
}

.rpt-cutsheet .rpt-subhead { margin-top: 0; }
.rpt-cutsheet__pitch { font-family: var(--rpt-mono); font-size: 0.8em; opacity: 0.65; margin: 0 0 0.85rem; }

/* ==========================================================================
   Pitch gauge
   ========================================================================== */

.rpt-gauge { padding: var(--rpt-pad); padding-top: calc(var(--rpt-pad) + 3px); }

.rpt-gauge__readout {
  text-align: center;
  margin-bottom: 1.35rem;
  padding: 1.5rem 1rem;
  border-radius: var(--rpt-radius-sm);
  background: var(--rpt-tint);
  border: 1px solid var(--rpt-accent-line);
}

.rpt-gauge__big {
  display: block;
  font-family: var(--rpt-mono);
  font-size: clamp(2.75rem, 16cqi, 4.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--rpt-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.rpt-gauge__sub {
  font-size: 0.72em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.6rem;
}

.rpt-gauge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.55rem;
  margin-bottom: 1.35rem;
}

.rpt-gauge__cell {
  padding: 0.75rem 0.5rem;
  text-align: center;
  border: 1px solid var(--rpt-hair);
  border-radius: var(--rpt-radius-sm);
  background: var(--rpt-softer);
  min-width: 0;
}

.rpt-gauge__cell-label { display: block; font-size: 0.64em; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.6; }

.rpt-gauge__cell-value {
  display: block;
  font-family: var(--rpt-mono);
  font-size: 1em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}

.rpt-gauge__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }

.rpt-gauge__status { font-size: 0.82em; opacity: 0.7; text-align: center; line-height: 1.55; margin: 0 auto 1.25rem; max-width: 46ch; }

.rpt-gauge__manual { border-top: 1px solid var(--rpt-hair); padding-top: 1rem; font-size: 0.88em; }
.rpt-gauge__manual summary { cursor: pointer; opacity: 0.75; margin-bottom: 0.65rem; font-weight: 500; }
.rpt-gauge__manual .rpt-field__row { max-width: 200px; }

/* ==========================================================================
   Server-rendered reference content — all full width
   ========================================================================== */

.rpt-answer {
  width: 100%;
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--rpt-accent-line);
  border-left-width: 3px;
  border-radius: var(--rpt-radius-sm);
  background: var(--rpt-tint);
  line-height: 1.6;
}

.rpt-reference {
  width: 100%;
  margin: 2rem 0;
  border: 1px solid var(--rpt-line);
  border-radius: var(--rpt-radius);
  overflow: hidden;
}

.rpt-reference__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rpt-reference table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rpt-mono);
  font-size: 0.84em;
  font-variant-numeric: tabular-nums;
}

.rpt-reference th,
.rpt-reference td {
  padding: 0.6em 0.9em;
  border-bottom: 1px solid var(--rpt-hair);
  text-align: right;
  white-space: nowrap;
}

.rpt-reference th:first-child,
.rpt-reference td:first-child { text-align: left; white-space: normal; }

.rpt-reference thead th {
  font-family: inherit;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.65;
  background: var(--rpt-soft);
  white-space: normal;
  position: sticky;
  top: 0;
}

.rpt-reference tbody tr:last-child td { border-bottom: 0; }
.rpt-reference tbody tr:hover td { background: var(--rpt-softer); }
.rpt-reference tbody tr.is-common td { background: var(--rpt-tint); }
.rpt-reference tbody tr.is-common th:first-child,
.rpt-reference tbody tr.is-common td:first-child { color: var(--rpt-accent); font-weight: 600; }

.rpt-reference__caption {
  font-size: 0.78em;
  opacity: 0.65;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--rpt-hair);
  margin: 0;
  background: var(--rpt-softer);
}

.rpt-faq { width: 100%; margin: 2rem 0; }

.rpt-faq__item { border-bottom: 1px solid var(--rpt-hair); padding: 1rem 0; }
.rpt-faq__item:first-child { border-top: 1px solid var(--rpt-hair); }
.rpt-faq__q { font-weight: 700; margin: 0 0 0.4rem; font-size: 0.98em; }
.rpt-faq__a { margin: 0; opacity: 0.78; font-size: 0.92em; line-height: 1.6; }

/* ==========================================================================
   Container queries — the layout responds to the space the theme gives it
   ========================================================================== */

@container rpt (min-width: 700px) {
  /* Inputs move into a side column so wide containers are used, not padded. */
  .rpt-tool__body {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }

  .rpt-inputs {
    border-bottom: 0;
    border-right: 1px solid var(--rpt-line);
  }

  .rpt-inputs__grid { grid-template-columns: minmax(0, 1fr); }

  .rpt-result { padding-top: calc(var(--rpt-pad) + 3px); }

  .rpt-gauge__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container rpt (min-width: 1000px) {
  /* Very wide: two input columns rather than one very tall one. */
  .rpt-inputs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-tool__body { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); }
}

/* Fallback for browsers without container query support: a viewport
   media query gets the same two-column layout on desktop. */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .rpt-tool__body { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); }
    .rpt-inputs { border-bottom: 0; border-right: 1px solid var(--rpt-line); }
    .rpt-inputs__grid { grid-template-columns: minmax(0, 1fr); }
  }
}

@container rpt (max-width: 420px) {
  .rpt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-btn { flex: 1 1 auto; text-align: center; }
  .rpt-btn--ghost { margin-left: 0; }
  .rpt-table th { width: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  .rpt *, .rpt *::before, .rpt *::after { transition: none !important; animation: none !important; }
}

@media print {
  .rpt-inputs,
  .rpt-actions,
  .rpt-gauge__controls,
  .rpt-gauge__manual { display: none !important; }
  .rpt-tool { border: 0; }
  .rpt-tool::before { display: none; }
}