/* ============================================================
   Purefield - Establishment Liability rating tool theme

   Loaded AFTER assets/css/appsure.css, which supplies the reset,
   Inter, and the .container / .card / .form-* utilities. This
   file is a brand override, not a new system.

   Colours are the PUREFIELD BRAND, sampled from the logo: the
   four squares give teal, forest, slate and gold, and the gold
   wordmark sets the accent. Two conventions are carried over
   from the actuarial workbook on purpose, because underwriters
   read that spreadsheet daily and the muscle memory is worth
   keeping: editable fields are cream-filled (the workbook's
   "complete the yellow fields only" rule), and the headline
   total sits in a solid green block like cell K17 does.
   ============================================================ */

:root {
  /* Brand - sampled from the Purefield logo */
 --pf-navy:        #0E384A;  /* logo square 1, deep teal: header, panel rules */
 --pf-navy-deep:   #092A38;  /* darker teal for gradients and footer */
 --pf-green:       #245741;  /* logo square 2, forest: TOTAL premium block */
 --pf-slate:       #384559;  /* logo square 3: section header bars */
 --pf-gold:        #B98D36;  /* logo square 4: accents, active nav, focus */
 --pf-gold-bright: #C99E46;  /* the wordmark gold */
 --pf-gold-soft:   #F5EBD4;  /* gold wash for chips and rules */

  /* Workbook conventions, deliberately retained */
 --pf-cream:       #FFF2CC;  /* the yellow "complete these" input cells */
 --pf-input-text:  #0E384A;  /* entered values (brand teal, not the sheet's blue) */
 --pf-green-soft:  #E4EFE9;  /* READY status badge */
 --pf-green-ink:   #1A4130;

  /* Neutrals, tinted toward the brand teal */
 --pf-pale-blue:   #E3ECF0;  /* field label cells */
 --pf-faint-blue:  #F1F6F8;  /* alternating table rows */
 --pf-grey:        #F4F6F7;  /* page background */
 --pf-text:        #1F2933;
 --pf-muted:       #667079;

  /* Derived */
 --pf-rule:        #C9DAE1;
 --pf-rule-soft:   #E3ECF0;
 --pf-amber:       #FFF4CE;
 --pf-amber-ink:   #8A6100;
 --pf-amber-rule:  #EBD08A;
 --pf-red:         #FDECEC;
 --pf-red-ink:     #9B1C1C;
 --pf-red-rule:    #F0BDBD;

 --pf-header-h:    72px;
 --pf-radius:      10px;
}

body {
  background: var(--pf-grey);
  color: var(--pf-text);
}

.pf-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pf-main { flex: 1; }

/* Nothing on this page may push the viewport sideways. */
.pf-scroll { overflow-x: auto; }


/* ---------- Header ---------- */

.site-header.pf-header {
  position: sticky;
  top: 0;
  background: var(--pf-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: none;
 -webkit-backdrop-filter: none;
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.pf-brand {
  display: block;
  text-decoration: none;
  line-height: 1.15;
}

/* The logo lockup is a transparent PNG cropped to mark + wordmark. Height is
   fixed and width auto so it scales cleanly; the intrinsic 887x160 is declared
   on the tag so it reserves space and does not shift the header on load. */
.pf-logo {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
}

.pf-tagline {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-pale-blue);
}

.pf-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pf-nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
}

a.pf-nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.pf-nav-link.is-active {
  color: #ffffff;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
}

.pf-nav-link.is-disabled {
  color: rgba(255, 255, 255, 0.42);
  cursor: not-allowed;
}

.pf-nav-link.is-disabled::after {
  content: " (not in demo)";
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Narrow viewports: let the bar wrap and drop the demo-only placeholders. */
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; row-gap: 8px; }
  .pf-nav-link.is-disabled { display: none; }
  .pf-logo { height: 30px; }
  .pf-tagline { font-size: 0.62rem; letter-spacing: 0.04em; }
}


/* ---------- Hero ---------- */

.pf-hero {
  background: linear-gradient(180deg, var(--pf-navy) 0%, var(--pf-navy-deep) 100%);
  color: #ffffff;
  padding: 44px 0 40px;
}

.pf-hero h1 {
  color: #ffffff;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  margin-bottom: 10px;
}

.pf-hero p {
  color: #D5E3F2;
  max-width: 60ch;
  font-size: 1rem;
  margin: 0;
}

.pf-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


/* ---------- Layout ---------- */

.pf-tool {
  padding: 28px 0 56px;
}

/* Use the width the screen actually has. The Appsure default caps at 1200px,
   which on a 1600px+ underwriting monitor leaves a third of the page empty
   and pushes the commercial panel below the fold. */
.container {
  max-width: 1680px;
  padding: 0 32px;
}

/* Three columns at wide viewports: inputs, pricing, commercial. Drops to two
   (inputs + stacked results) on a laptop, then one on a phone. */
.pf-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pf-col-inputs {
  position: sticky;
  top: calc(var(--pf-header-h) + 16px);
  min-width: 0;
}

.pf-col-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 1023px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .pf-col-inputs { position: static; }
  .pf-col-commercial { display: contents; }
}


/* ---------- Panels ---------- */

.pf-panel {
  background: #ffffff;
  border: 1px solid var(--pf-rule);
  border-radius: var(--pf-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(23, 54, 93, 0.09);
}

.pf-panel-head {
  background: var(--pf-slate);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 12px 18px;
}

.pf-panel-head.is-navy { background: var(--pf-navy); }

.pf-panel-body { padding: 18px; }

.pf-panel-foot {
  border-top: 1px solid var(--pf-rule-soft);
  background: #FAFCFE;
  padding: 12px 18px;
  font-size: 0.78rem;
  color: var(--pf-muted);
}


/* ---------- Workbook-style fields ---------- */

.pf-field {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  border: 1px solid var(--pf-rule);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pf-field:focus-within {
  border-color: var(--pf-navy);
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.4);
}

.pf-field-label {
  background: var(--pf-pale-blue);
  color: var(--pf-navy);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 12px 12px;
  margin: 0;
  display: flex;
  align-items: center;
}

.pf-field-control {
  position: relative;
  background: var(--pf-cream);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  min-width: 0;
}

.pf-field-control input,
.pf-field-control select {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 12px 2px;
  color: var(--pf-input-text);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
}

.pf-field-control input { font-variant-numeric: tabular-nums; }

.pf-field-control select {
  appearance: none;
 -webkit-appearance: none;
  padding-right: 20px;
  cursor: pointer;
  /* Native option lists render in the OS palette; force the closed state only. */
  color: var(--pf-input-text);
}

.pf-field-control.is-select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--pf-navy);
  pointer-events: none;
}

.pf-prefix {
  color: var(--pf-input-text);
  font-weight: 700;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.pf-field-hint {
  margin: -8px 0 14px;
  font-size: 0.74rem;
  color: var(--pf-muted);
}

.pf-legend {
  margin: 0 0 14px;
  font-size: 0.76rem;
  color: var(--pf-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--pf-cream);
  border: 1px solid var(--pf-rule);
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .pf-field { grid-template-columns: minmax(0, 1fr); }
  .pf-field-label { padding-bottom: 6px; }
}


/* ---------- Button ---------- */

.pf-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pf-navy);
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border: 0;
  border-radius: var(--pf-radius);
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pf-btn:hover { background: var(--pf-navy-deep); }
.pf-btn:focus-visible { outline: 3px solid var(--pf-slate); outline-offset: 2px; }
.pf-btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }


/* ---------- Status ---------- */

.pf-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pf-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pf-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pf-status.is-ready {
  background: var(--pf-green-soft);
  color: var(--pf-green-ink);
  border: 1px solid #B7D6A2;
}

.pf-status.is-review {
  background: var(--pf-amber);
  color: var(--pf-amber-ink);
  border: 1px solid var(--pf-amber-rule);
}

.pf-status.is-error {
  background: var(--pf-red);
  color: var(--pf-red-ink);
  border: 1px solid var(--pf-red-rule);
}

.pf-status-note {
  font-size: 0.8rem;
  color: var(--pf-muted);
}


/* ---------- Headline total ---------- */

.pf-total {
  background: var(--pf-green);
  color: #ffffff;
  border-radius: var(--pf-radius);
  padding: 22px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.pf-total-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.pf-total-value {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.pf-total-sub {
  flex-basis: 100%;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.85);
}


/* ---------- Tables ---------- */

.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.pf-table th {
  background: var(--pf-navy);
  color: #ffffff;
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 10px 14px;
  white-space: nowrap;
}

.pf-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--pf-rule-soft);
  color: var(--pf-text);
  vertical-align: middle;
}

.pf-table tbody tr:nth-child(odd) { background: var(--pf-faint-blue); }
.pf-table tbody tr:last-child td { border-bottom: 0; }

.pf-table tfoot td {
  background: var(--pf-pale-blue);
  font-weight: 700;
  color: var(--pf-navy);
  border-top: 2px solid var(--pf-slate);
}

.pf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pf-cell-name { font-weight: 600; }

.pf-note {
  display: block;
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--pf-muted);
}

.pf-bar {
  display: block;
  margin-top: 6px;
  height: 4px;
  width: 100%;
  max-width: 220px;
  border-radius: 999px;
  background: rgba(23, 54, 93, 0.12);
  overflow: hidden;
}

.pf-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--pf-slate);
  transition: width 0.35s ease;
}


/* ---------- Working / factors ---------- */

.pf-details {
  border-top: 1px solid var(--pf-rule-soft);
}

.pf-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pf-navy);
  background: #FAFCFE;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-details > summary::-webkit-details-marker { display: none; }

.pf-details > summary::before {
  content: "\25B8";
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.pf-details[open] > summary::before { transform: rotate(90deg); }

.pf-details > summary:focus-visible {
  outline: 3px solid var(--pf-slate);
  outline-offset: -3px;
}

.pf-details-body { border-top: 1px solid var(--pf-rule-soft); }


/* ---------- Messages ---------- */

.pf-message {
  border-radius: var(--pf-radius);
  padding: 16px 18px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.pf-message h3 {
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: inherit;
}

.pf-message.is-review {
  background: var(--pf-amber);
  border: 1px solid var(--pf-amber-rule);
  color: #5C4200;
}

.pf-message.is-error {
  background: var(--pf-red);
  border: 1px solid var(--pf-red-rule);
  color: var(--pf-red-ink);
}

.pf-scope {
  background: var(--pf-grey);
  border: 1px solid #DCDCDC;
  border-left: 4px solid var(--pf-navy);
  border-radius: var(--pf-radius);
  padding: 16px 18px;
}

.pf-scope h2 {
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pf-navy);
  margin-bottom: 8px;
}

.pf-scope p {
  font-size: 0.84rem;
  color: var(--pf-muted);
  margin-bottom: 8px;
}

.pf-scope ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.pf-scope li {
  font-size: 0.84rem;
  color: var(--pf-text);
  padding-left: 16px;
  position: relative;
}

.pf-scope li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--pf-slate);
  font-weight: 700;
}

.pf-hidden { display: none !important; }

.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Footer ---------- */

.pf-footer {
  background: var(--pf-navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 22px 0;
  font-size: 0.8rem;
}

.pf-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-footer strong { color: #ffffff; font-weight: 700; }


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------- Technical vs Sold (APS-4110) ----------
   The workbook renders this block as a label/value ladder: computed cells on a
   pale green wash, the one editable cell cream like every other input, and the
   position on a warning tint when the sold price sits under technical. */

.pf-sold { margin-top: 20px; }

.pf-sold-note {
  margin: 0 0 16px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--pf-muted);
}

.pf-sold-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr);
  gap: 8px 12px;
  align-items: center;
}

.pf-sold-label {
  padding: 10px 12px;
  background: var(--pf-pale-blue);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pf-text);
}

.pf-sold-input {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--pf-cream);
  border: 1px solid #E6D9A8;
  border-radius: 6px;
}

.pf-sold-input .pf-currency { font-weight: 700; color: var(--pf-input-text); }

.pf-sold-input .pf-amount {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pf-input-text);
  text-align: right;
  outline: none;
}

.pf-sold-input:focus-within {
  border-color: var(--pf-gold);
  box-shadow: 0 0 0 3px rgba(185, 141, 54, 0.18);
}

.pf-sold-input .pf-amount::placeholder {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--pf-muted);
}

.pf-sold-value {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pf-sold-value.is-computed { background: var(--pf-green-soft); color: var(--pf-green-ink); }
.pf-sold-value.is-negative { color: #B3261E; }

.pf-sold-position {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

.pf-sold-position.is-neutral { background: var(--pf-grey);       color: var(--pf-muted); }
.pf-sold-position.is-above   { background: var(--pf-green-soft); color: var(--pf-green-ink); }
.pf-sold-position.is-below   { background: #FBE7DC;              color: #9A4A21; }
.pf-sold-position.is-review  { background: var(--pf-red);        color: var(--pf-red-ink); }

@media (max-width: 560px) {
  .pf-sold-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .pf-sold-label { background: transparent; padding: 8px 2px 2px; }
}


/* The limit of indemnity is a fixed-option select. It keeps the cream editable
   treatment of the typed fields so the form still reads as one set of inputs. */
.pf-field-control-select { padding: 0; }

.pf-field-control-select select {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pf-input-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pf-input-text) 50%),
                    linear-gradient(135deg, var(--pf-input-text) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}


/* ---------- Wide-viewport layout ---------- */

.pf-col-pricing,
.pf-col-commercial { min-width: 0; }

/* The commercial column's panels stack under each other. */
.pf-col-commercial > * + * { margin-top: 20px; }
.pf-col-commercial .pf-sold { margin-top: 0; }

/* Between roughly a laptop and a wide desktop, two columns reads better than
   three: the commercial panel is narrow enough that its label/value grid starts
   wrapping. Inputs stay left, pricing and commercial stack on the right. */
/* Bounded at BOTH ends, and aligned to the 1023px single-column breakpoint.
   This block sits after the single-column rule below
   1023px, so an open-ended max-width would also match a phone and win on
   cascade order, forcing a two-column grid into 375px. */
@media (min-width: 1024px) and (max-width: 1400px) {
  .pf-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .pf-col-commercial { grid-column: 2; margin-top: 20px; }
}

/* The hero text was set narrow for a 1200px page. Give it the room, but keep a
   readable measure rather than letting a line run the full 1680px. */
.pf-hero .container { display: grid; gap: 8px; }
.pf-hero p { max-width: 78ch; }

/* At very wide viewports the coverage table and factors grid can breathe. */
@media (min-width: 1600px) {
  .pf-hero { padding: 52px 0 48px; }
  .pf-tool { padding: 32px 0 64px; }
}


/* The occupation names run long ("Petroleum, Coal, Chemical and Associated
   Product Manufacturing" is the worst). Give the inputs column enough width
   that the select does not truncate, and let the option text ellipsis rather
   than clip if it still cannot fit. */
.pf-layout { grid-template-columns: minmax(340px, 380px) minmax(0, 1.35fr) minmax(0, 1fr); }

@media (min-width: 1024px) and (max-width: 1400px) {
  .pf-layout { grid-template-columns: minmax(340px, 380px) minmax(0, 1fr); }
}

.pf-field-control select {
  text-overflow: ellipsis;
}