/* ══ YOUR PLAN ════════════════════════════════════════════  8 Oct 2026 (rp77) ══
   The plan section in a trade's settings and an organisation's Plan panel.
   It is built from the settings page's own parts (the payout plate, the facts
   list, the buttons), so it reads as one more section of the same page; the
   only new parts are the plan's mark on the plate and the invoice table. The
   mark takes the plans page's colours: navy for a paid plan with the gold
   rule, cream for a free one, so the two pages name a plan the same way. */
.st-plate-b.is-plan { width: auto; min-width: 54px; padding: 0 12px; background: var(--cream-2, #F1EDE3); color: var(--navy, #0A1628);
  font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 15px; font-weight: 400; letter-spacing: .02em; text-transform: none;
  box-shadow: inset 0 0 0 1px var(--line-2, #DDD6C6); border-radius: 4px; }
.st-plate.is-paid .st-plate-b.is-plan { background: var(--navy, #0A1628); color: #F3EEE3; box-shadow: inset 0 2px 0 #D4A943; }
.st-plate[data-state=free] { box-shadow: inset 3px 0 0 var(--line-2, #DDD6C6); }
.st-plate a.st-btn { text-decoration: none; }
.mp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mp-note { min-height: 0; }
.mp-note:empty { display: none; }
.mp-note[data-state=ok] { color: var(--green, #2F6B4F); }
.mp-note[data-state=bad] { color: var(--danger, #A3392B); }
.st-facts dd a { color: var(--navy, #0A1628); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(10,22,40,.35); }

/* the invoices: Stripe's own copies, newest first */
.mp-inv { margin-top: 26px; }
.mp-inv h3 { margin: 0 0 8px; font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.mp-inv table { width: 100%; border-collapse: collapse; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 14px; color: var(--ink, #1F2430); }
.mp-inv th { padding: 8px 10px 8px 0; text-align: left; font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; border-bottom: 1px solid var(--line, #E6E0D0); }
.mp-inv td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line, #E6E0D0); font-variant-numeric: tabular-nums; }
.mp-inv td:last-child, .mp-inv th:last-child { text-align: right; padding-right: 0; }
.mp-inv a { color: var(--navy, #0A1628); text-underline-offset: 3px; }
.mp-st { font-family: var(--sans, 'Inter', sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.mp-st[data-st=paid] { color: var(--green, #2F6B4F); }
.mp-st[data-st=open], .mp-st[data-st=uncollectible] { color: var(--danger-ink, #8E2F23); }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
  .mp-inv th:nth-child(2), .mp-inv td:nth-child(2) { display: none; }
}

/* rp83: what Plus opens (assets/hyyryn-plus-tools.js), in the section's own type and lines */
.mp-tools { margin-top: 30px; display: grid; gap: 28px; }
.mp-tool h3 { margin: 0 0 6px; font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.mp-tool .st-hint { margin: 0 0 12px; max-width: 62ch; }
.mp-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 0 0 12px; }
.mp-row label { display: grid; gap: 4px; font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; color: #6B7280; }
.mp-row select { font: inherit; font-size: 14px; color: var(--ink, #1B2638); background: #fff; border: 1px solid var(--line-2, #D8CFB8); border-radius: 8px; padding: 8px 10px; min-width: 0; max-width: 100%; }
/* rp106 (12 Oct 2026): the statement's choices take the page's own fields (the settings sheet's pills,
   the same chevron), and their names the fields' small capitals, so the tool reads as part of the sheet */
.mp-row label { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; gap: 7px; }
.mp-row select { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: var(--sans, 'Inter', sans-serif); font-size: 14.5px; letter-spacing: 0; text-transform: none;
  padding: 11px 42px 11px 16px; border: 1px solid #D0CCC4; border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 16px center / 14px no-repeat;
  transition: border-color 160ms, box-shadow 160ms; }
.mp-row select:hover { border-color: #B9B3A8; }
.mp-row select:focus { outline: none; border-color: var(--green, #0F5A4F); box-shadow: 0 0 0 3px rgba(15,90,79,.14); }
.mp-code { border-radius: 16px; }
.mp-sum { margin: 0 0 12px; font-family: var(--serif, 'Libre Caslon Text', Georgia, serif); font-size: 15px; color: var(--ink, #1B2638); font-variant-numeric: tabular-nums; }
.mp-sum:empty { display: none; }
.mp-code-l, .mp-preview-l { display: block; margin: 0 0 6px; font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; color: #6B7280; }
.mp-code { display: block; width: 100%; box-sizing: border-box; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink, #1B2638); background: #fff; border: 1px solid var(--line-2, #D8CFB8); border-radius: 8px; padding: 10px 12px; resize: vertical; margin: 0 0 10px; }
.mp-preview { display: block; width: 100%; max-width: 440px; height: 230px; border: 1px dashed var(--line-2, #D8CFB8); border-radius: 12px; background: transparent; }
@media (max-width: 520px) { .mp-row label { flex: 1 1 100%; } .mp-row select { width: 100%; } }


/* ══ YOUR PLAN, LIGHTLY REVAMPED ═══════════════════════════════  12 Oct 2026 (rp109), v4 ══
   Sir, 12 Oct, after buying Plus on preview: "the pin at the top is slightly cropped" and the
   section "just needs a slight revamp". The cropped look was two things at once: the plan's mark
   carried a 2px gold line along its top inside rounded corners (a strip that read as cut off), and
   the plate's coloured edge was an inset bar bent round 14px corners. Now:
     the plate   the plans page's card, small: square, a deed's double rule along its top (navy,
                 then gold), the plan named in the display face, its state as the pill
     the mark    the plan's name on navy (paid) or cream (free), square, a thin gold ring when
                 paid, nothing along one edge
     the tools   "With Plus": each tool a panel of its own on the sheet, named in the display face
   Scoped to the plan plate and the tools, so the payout plate above keeps its own dress. */
#planPlate.st-plate { position: relative; border-radius: 0; border: 0; padding: 22px 22px 18px; background: #FBF7EC;
  box-shadow: inset 0 0 0 1px var(--line-2, #DDD6C6); gap: 12px 20px; }
#planPlate.st-plate::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy, #0A1628); border-bottom: 1px solid #D4A943; }
#planPlate.st-plate[data-state] { box-shadow: inset 0 0 0 1px var(--line-2, #DDD6C6); }
#planPlate .st-plate-b.is-plan { min-width: 64px; height: 44px; padding: 0 14px; border-radius: 0; font-size: 18px; box-shadow: inset 0 0 0 1px var(--line-2, #DDD6C6); }
#planPlate.is-paid .st-plate-b.is-plan { background: var(--navy, #0A1628); color: #F3EEE3; box-shadow: inset 0 0 0 1px rgba(212,169,67,.7); }
#planPlate .st-plate-h { font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 21px; font-weight: 400; line-height: 1.25; color: var(--navy, #0A1628); }
#planPlate .st-plate-h .st-pill { font-family: var(--sans, 'Inter', sans-serif); vertical-align: 3px; }
#planPlate .st-plate-s { margin-top: 4px; font-size: 14.5px; }
.mp-tools { margin-top: 34px; gap: 14px; }
.mp-tools::before { content: 'With Plus'; display: block; padding-top: 16px; border-top: 2px solid var(--navy, #0A1628);
  font-family: var(--sans, 'Inter', sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #5B4318; }
.mp-tool { padding: 20px 22px 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #E6E0D0); }
.mp-tool h3 { margin: 0 0 6px; font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 20px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--navy, #0A1628); }
.mp-preview { border-radius: 0; }
.mp-code { border-radius: 0; }
@media (max-width: 720px) { #planPlate.st-plate { padding: 20px 16px 16px; } .mp-tool { padding: 18px 16px; } }
@media (forced-colors: active) { #planPlate.st-plate, .mp-tool { border: 1px solid CanvasText; } }