/* =========================================================================
   GFI Heroes — the policy sheet (2026-10-14, ported from the Pledge tracker)
   Written business and delivered business share this sheet. It was one long
   column of fields in a 460px panel; it is grouped (the client · the policy ·
   money · where it sits), two-up where the fields are short, with a header
   band and a save bar that stays on screen. One field per row on a phone.
   Every dark fill carries bold white text.
   ========================================================================= */

.policy-modal-panel.pm2{
  max-width:720px; padding:0; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line2); border-radius:16px;
  max-height:calc(100dvh - 40px);
}

/* ---- header ---- */
.pm2-head{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:17px 22px 15px; border-bottom:1px solid var(--line); background:var(--panel2);
}
.pm2 h3#policy-modal-title{
  margin:0; font-family:var(--sans); font-size:19px; font-weight:800; letter-spacing:-.01em;
  color:var(--text); text-wrap:balance;
}
.pm2-sub{ margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.5; text-wrap:balance; }
.pm2-x{
  flex:none; appearance:none; cursor:pointer; font:inherit; font-size:15px; line-height:1;
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--line2); background:var(--panel); color:var(--muted);
}
.pm2-x:hover{ background:var(--panel3); color:var(--text) }

/* ---- body ---- */
.pm2-body{ flex:1 1 auto; overflow-y:auto; padding:16px 22px 20px; }
.pm2-sec{
  margin:16px 0 9px; font-size:10px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--muted2);
}
.pm2-sec:first-child{ margin-top:2px }
.pm2-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px 14px; }
.pm2-wide{ grid-column:1 / -1 }
.pm2 .field{ margin:0; min-width:0 }
.pm2 .field label{
  display:block; font-size:11.5px; font-weight:700; color:var(--text);
  margin:0 0 5px; letter-spacing:.1px;
}
.pm2 .field input,
.pm2 .field select{
  width:100%; height:40px; padding:0 11px; border-radius:9px;
  border:1.5px solid var(--line); background:var(--panel); color:var(--text);
  font:inherit; font-size:14px;
}
.pm2 .field input:focus,
.pm2 .field select:focus{
  outline:none; border-color:#2E6FD6; box-shadow:0 0 0 3px rgba(46,111,214,.14);
}
.pm2 .field input:disabled,
.pm2 .field select:disabled{ background:var(--panel3); color:var(--muted2); cursor:default }
.pm2 .policy-modal-hint{
  margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.5; text-wrap:pretty;
}

/* ---- type of policy ---- */
.pm2-types{ display:flex; flex-wrap:wrap; gap:7px; }
.pm2-type{
  appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  height:38px; padding:0 18px; border-radius:9px;
  border:1.5px solid var(--line2); background:var(--panel); color:var(--text);
  transition:background .14s, border-color .14s, color .14s;
}
.pm2-type:hover{ border-color:#2E6FD6; background:rgba(46,111,214,.07) }
.pm2-type.on{ background:#00205A; border-color:#00205A; color:#fff }
.pm2-type.on:hover{ background:#103B7E; border-color:#103B7E }
.pm2-type:focus-visible{ outline:2px solid #2E6FD6; outline-offset:2px }

/* ---- footer ---- */
.pm2 .policy-modal-actions{
  flex:none; margin:0; padding:14px 22px 16px;
  border-top:1px solid var(--line); background:var(--panel2);
}
.pm2 .policy-estimate{ margin-top:14px }

/* ===================================================================== dark */

/* White on #2E6FD6 is only 2.95:1 against this panel — under the 4.5 floor, and
   the selected chip is the one thing on this sheet that has to be unmistakable.
   Dark ink on the app's bright accent reads at 6.87:1 instead. */

/* ===================================================================== mobile */
@media (max-width:760px){
  .policy-modal-overlay{ padding:0; align-items:flex-end }
  .policy-modal-panel.pm2{
    max-width:none; border-radius:16px 16px 0 0; max-height:94dvh;
  }
  .pm2-head{ padding:15px 16px 13px }
  .pm2-body{ padding:14px 16px 18px }
  .pm2 .policy-modal-actions{ padding:12px 16px 16px }
  .pm2-grid{ grid-template-columns:minmax(0,1fr) }
  .pm2 .field input,
  .pm2 .field select{ font-size:16px; height:44px }   /* 16px stops iOS zooming on focus */
  .pm2-type{ flex:1 1 auto; height:42px }
}

/* the carrier / product boxes that appear when "Other" is chosen */
.pm2-manual{ margin-top:7px }
.pm2-manual[hidden]{ display:none }
/* When the list above it has been taken away — an unlisted carrier has no
   products to pick from — the typed box becomes the field's first control, so
   it loses the gap that was separating it from the list. Without this it sits
   12px below the carrier box beside it and the row reads as crooked. */
.pm2 .field select[hidden] + .pm2-manual{ margin-top:0 }

/* "Another policy for <client>" — a quiet secondary action on the left of the
   save bar, so writing the next policy for the same person is one click from
   the one you just opened, without competing with Save */
.pm2 .policy-modal-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pm2-act-sp{ flex:1 1 auto; }
.pm2-another{ display:inline-flex; align-items:center; gap:6px; font-weight:800; color:#103B7E; border-color:#C6D8F3; background:#EEF4FD; max-width:100%; }
.pm2-another span{ font-size:15px; line-height:1; }
.pm2-another:hover{ border-color:#2E6FD6; color:#00205A; }
@media (max-width:760px){
  .pm2-another{ order:-1; flex:1 1 100%; justify-content:center; min-height:44px; }
  .pm2 .policy-modal-actions .btn-ghost:not(.pm2-another), .pm2 .policy-modal-actions .btn-add{ min-height:44px; }
}
/* the selected type chip is a dark fill: bold white */
.pm2-type.on{ font-weight:800; }

/* the tracker's own sheet makes the old title and save bar sticky, with their own
   padding and background, for the single-column version. The grouped sheet
   has a header band and a footer band of its own, so those are switched off. */
.pm2 h3#policy-modal-title{ position:static; padding:0; background:none; z-index:auto; }
.pm2 .policy-modal-actions{ position:static; }
.pm2 .policy-estimate{ color:#103B7E; font-weight:600; }
.pm2 .policy-estimate b{ color:#00205A; font-weight:800; }

/* ===================================================================== polish
   The same chrome as the pipeline dialogs: a white header with the gold rule
   under it, real dropdown arrows on every list, 40px buttons in the save bar,
   and the estimate as two clear figures instead of a sentence. */
.pm2-head{ position:relative; background:#FFFFFF; padding:18px 22px 16px; }
.pm2-head::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,#C9A14E,#FFE39C 40%,#E4B45A 70%,rgba(228,180,90,.15)); }
.pm2-x{ width:34px; height:34px; border-radius:10px; color:var(--text); background:#FFFFFF; }
.pm2-x:hover{ border-color:#2E6FD6; background:#FFFFFF; }
.pm2-body{ scrollbar-width:thin; scrollbar-color:#C4CEDD transparent; }
.pm2 .field select{
  appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23103B7E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px;
}
.pm2 .field select:disabled{ cursor:default; opacity:.8; }
.pm2 .field input:hover:not(:disabled):not(:focus),
.pm2 .field select:hover:not(:disabled):not(:focus){ border-color:var(--line2); }

.pm2 .policy-estimate{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; padding:0; border:0; background:none;
  font-family:var(--sans);
}
.pm2 .policy-estimate.is-hidden{ display:none; }
.pm2-est{
  flex:1 1 180px; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:11px;
  background:#EEF4FD; border:1px solid #C6D8F3;
}
.pm2-est small{ font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#1B4E9E; }
.pm2-est b{ font-size:20px; font-weight:800; color:#00205A; font-family:var(--sans); letter-spacing:-.01em; }

.pm2 .policy-modal-actions{ background:#FFFFFF; padding:12px 22px; }
.pm2 .policy-modal-actions .btn-ghost,
.pm2 .policy-modal-actions .btn-add{
  height:40px; min-height:40px; padding:0 18px; border-radius:10px; font-size:13.5px; font-weight:800; font-family:var(--sans);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.pm2 .policy-modal-actions .btn-ghost:not(.pm2-another){ background:#FFFFFF; border:1px solid var(--line2); color:var(--text); }
.pm2 .policy-modal-actions .btn-ghost:not(.pm2-another):hover{ border-color:#2E6FD6; }
.pm2 .policy-modal-actions .btn-add{
  background:linear-gradient(180deg,#163B78,#00205A); border:1px solid #00205A; color:#FFFFFF;
  box-shadow:0 10px 20px -12px rgba(0,32,90,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.pm2 .policy-modal-actions .btn-add:hover{ filter:brightness(1.12); }
.pm2-another{ border:1px dashed #AFC1DD; }
@media (max-width:760px){
  .pm2 .policy-modal-actions .btn-ghost, .pm2 .policy-modal-actions .btn-add{ height:44px; }
  .pm2 .policy-modal-actions .btn-add{ flex:1 1 auto; }
}