/* Provider surfaces: the claim form, the dashboard, and the two public
   pages. Same paper, same purple, same rounded cards as the rest of the
   site — an organization's page should not look like a different product. */

.provider-join,.provider-dash,.provider-public,.provider-program{display:grid;gap:26px}
.provider-loading{color:var(--muted,#6e6977);font-size:14px}

/* ---------- how it works ---------- */
.provider-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.provider-steps li{counter-increment:step;position:relative;padding:18px 18px 18px 56px;border:1px solid #e6ddf1;border-radius:16px;background:#fff}
.provider-steps li::before{content:counter(step);position:absolute;left:16px;top:17px;width:26px;height:26px;border-radius:50%;background:#f2eafa;color:#5929a7;font-weight:800;font-size:13px;display:grid;place-items:center}
.provider-steps strong{display:block;font-family:Manrope,'DM Sans',Arial,sans-serif;font-size:15px;letter-spacing:-.02em;margin-bottom:4px}
.provider-steps span{display:block;font-size:13px;line-height:1.5;color:#6e6977}

/* ---------- the claim form ---------- */
.provider-form{background:#fff;border:1px solid #e6ddf1;border-radius:18px;padding:22px;display:grid;gap:16px;box-shadow:0 10px 30px rgba(46,26,72,.05)}
.provider-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.provider-form label,.provider-form .provider-wide{display:grid;gap:6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6e6977}
.provider-form input,.provider-form select,.provider-form textarea{font:inherit;font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:#292139;padding:11px 13px;border:1px solid #e0d8ea;border-radius:10px;background:#fff}
.provider-form input:focus,.provider-form select:focus,.provider-form textarea:focus{outline:3px solid #d9c6f2;outline-offset:1px;border-color:#b99cdb}
.provider-form textarea{resize:vertical}
/* max-content, not auto: an auto track takes all the leftover width, which
   stretched "Email me a code" across the rest of the form. */
.provider-code-row{display:grid;grid-template-columns:minmax(0,240px) max-content;gap:12px;align-items:end}
.provider-code-row .btn{justify-self:start}
.provider-hint{font-size:12.5px;color:#6e6977;margin:0}
.provider-note{font-size:13px;font-weight:600;margin:0;min-height:18px}
.provider-note.is-error{color:#a3203a}
.provider-note.is-ok{color:#12663a}
.provider-signin{margin:0;padding:14px 16px;border-radius:12px;background:#f2eafa;font-size:13.5px}
.provider-signin a{color:#5929a7;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- the dashboard ---------- */
.provider-status{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;border:1px solid #e6ddf1;background:#fff}
.provider-status .pill{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.provider-status.is-pending{background:#fff8ea;border-color:#f0d9a8}
.provider-status.is-pending .pill{background:#f6e2b3;color:#7a5200}
.provider-status.is-verified{background:#eef8f1;border-color:#bfe3cc}
.provider-status.is-verified .pill{background:#c9e9d5;color:#12663a}
.provider-status.is-rejected{background:#fdf0f2;border-color:#f0c6cf}
.provider-status.is-rejected .pill{background:#f4ccd5;color:#8c2039}
.provider-status p{margin:0;font-size:13.5px;color:#4a4453}

.provider-card{background:#fff;border:1px solid #e6ddf1;border-radius:18px;padding:20px;display:grid;gap:14px}
.provider-card h2{font-size:19px;letter-spacing:-.03em;margin:0}
.provider-card h3{font-size:15px;margin:0}
.provider-card .provider-hint{max-width:62ch}
.provider-logo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.provider-logo{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#f2eafa;display:grid;place-items:center;color:#5929a7;font-weight:800;font-size:22px;flex:none}
.provider-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.provider-logo-actions{display:grid;gap:6px}
.provider-logo-actions input[type=file]{font-size:12px}
/* The editor is the circle the logo will be: the owner drags what they get,
   and the crop is replayed at 512px on save rather than guessed at. */
.provider-logo.is-editing{display:block;position:relative;overflow:hidden;width:160px;height:160px;border-radius:50%;cursor:grab;touch-action:none;background:#f2eafa}
.provider-logo.is-editing:active{cursor:grabbing}
.provider-logo.is-editing img{position:absolute;left:0;top:0;border-radius:0;object-fit:fill;max-width:none;max-height:none;width:auto;height:auto;user-select:none;-webkit-user-drag:none}
.provider-logo-editor{display:grid;gap:6px;max-width:220px;margin-top:4px}
.provider-logo-editor[hidden]{display:none}
.provider-logo-editor input[type=range]{width:100%;accent-color:#5929a7}
.provider-logo-reset{justify-self:start;font:inherit;font-size:12px;font-weight:700;color:#5929a7;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.provider-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.provider-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid #eee7f4;border-radius:12px}
.provider-list .program-name{font-weight:700;font-size:14px}
.provider-list .program-meta{font-size:12px;color:#6e6977}
.provider-list .status{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#f1edf6;color:#5c5568}
.provider-list .status.is-published{background:#e3f4e9;color:#12663a}
.provider-list .status.is-pending{background:#fbeccb;color:#7a5200}
.provider-list .status.is-rejected{background:#f7dde2;color:#8c2039}
/* A claim is approved, rejected or waiting. It had no colour of its own,
   so an approved claim read as a plain grey pill next to a red one. */
.provider-list .status.is-approved{background:#e3f4e9;color:#12663a}
.provider-program-form{display:grid;gap:14px}
.provider-program-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* The dashboard forms use the same field language as the claim form: a small
   uppercase label above a white control. They had no rules of their own, so
   the labels sat beside the inputs in the browser's default styling. */
.provider-program-form label,.provider-program-form .provider-field{display:grid;gap:6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6e6977}
.provider-program-form input,.provider-program-form select,.provider-program-form textarea{font:inherit;font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:#292139;padding:11px 13px;border:1px solid #e0d8ea;border-radius:10px;background:#fff;width:100%}
.provider-program-form input:focus,.provider-program-form select:focus,.provider-program-form textarea:focus{outline:3px solid #d9c6f2;outline-offset:1px;border-color:#b99cdb}
.provider-program-form textarea{resize:vertical}
.provider-program-form input[type=file]{padding:9px 11px;font-size:12.5px;letter-spacing:normal;text-transform:none;font-weight:500}
.provider-program-form .provider-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:2px}
.provider-program-form .provider-note:empty{display:none}
.provider-field-label{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6e6977}

/* Towns a program runs in. A program can serve two or three towns, so the
   field is a disclosure of ticks rather than a single select. */
.town-picker{border:1px solid #e0d8ea;border-radius:10px;background:#fff}
.town-picker>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:#292139}
.town-picker>summary::-webkit-details-marker{display:none}
.town-picker>summary::after{content:"\25BE";font-size:10px;color:#6e6977}
.town-picker[open]>summary{border-bottom:1px solid #eee7f4}
.town-picker-body{max-height:220px;overflow:auto;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.town-tick{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px;font-weight:500;letter-spacing:normal;text-transform:none;color:#292139;cursor:pointer}
.town-tick:hover{background:#f7f2fc}
.town-tick input{width:16px;height:16px;accent-color:#5929a7;padding:0;margin:0;flex:none}

/* Up to four photographs, shown as thumbnails under the file control. */
.provider-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.provider-photo{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#f2eafa}
.provider-photo img{width:100%;height:100%;object-fit:cover}
.provider-photo button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(35,27,52,.72);color:#fff;font-size:14px;line-height:1;display:grid;place-items:center}
.provider-photo-note{font-size:12px;color:#6e6977;margin:0}

/* The green verified mark, next to an organization's name wherever one of its
   programs is shown. */
.yb-provider-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;vertical-align:-2px}
.yb-provider-check svg{width:100%;height:100%}
.yb-provider-check.is-green{color:#1f7a3f}

.provider-empty{padding:18px;border:1px dashed #d9cbea;border-radius:14px;color:#6e6977;font-size:13.5px;text-align:center}

/* Up to four photographs on a public listing: the first full width, the rest
   a row beneath it. */
.provider-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.provider-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.provider-gallery.is-set img:first-child{grid-column:1/-1;aspect-ratio:16/8}

/* ---------- the public pages ---------- */
.provider-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.provider-hero .provider-logo{width:84px;height:84px;font-size:28px}
.provider-hero h1{font-family:Manrope,'DM Sans',Arial,sans-serif;font-size:30px;letter-spacing:-.04em;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.provider-hero .provider-meta{font-size:13.5px;color:#6e6977;margin-top:4px}
.provider-about{font-size:14.5px;line-height:1.65;color:#3d3747;max-width:70ch}
.provider-links{display:flex;flex-wrap:wrap;gap:10px}
.provider-program-card{display:grid;gap:10px;padding:18px;border:1px solid #e6ddf1;border-radius:16px;background:#fff}
.provider-program-card h2{font-size:18px;margin:0}
.provider-program-card .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;font-size:13px}
.provider-program-card .facts dt{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6e6977}
.provider-program-card .facts dd{margin:0}
.provider-program-card img{width:100%;max-height:320px;object-fit:cover;border-radius:12px}

@media(max-width:820px){
  .provider-steps{grid-template-columns:1fr}
  .provider-form-grid{grid-template-columns:1fr}
  .provider-code-row{grid-template-columns:1fr}
  .provider-program-form .row{grid-template-columns:1fr}
  .provider-hero h1{font-size:24px}
}

/* The old pilot page is now the provider-account explainer. */
.provider-cta{background:#fff;border:1px solid #e6ddf1;border-radius:18px;padding:22px;display:grid;gap:16px}
.provider-cta h2{font-size:19px;letter-spacing:-.03em;margin:0 0 8px}
.provider-cta-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.55}
.provider-cta-steps strong{display:block;font-family:Manrope,'DM Sans',Arial,sans-serif}
.provider-cta-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.provider-cta-note{margin:0;font-size:13px;color:#6e6977}
.provider-cta-note a{color:#5929a7;font-weight:700}

/* One listing, one edit affordance. The row already carries its review state;
   the button sits beside it rather than under it, so a list of six listings is
   six lines and not eighteen. */
.provider-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.provider-edit { border: 1px solid rgba(89,41,167,.28); background: #fff; color: #5929a7;
  font: inherit; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.provider-edit:hover { background: #F3ECFB; }

/* A claim button that is not ready yet should look it: the purple arrives
   with the sixth digit. */
.provider-form .btn[disabled]{background:#e9e4ef;color:#8a8296;border-color:#e9e4ef;cursor:default}

/* Claiming an existing listing. The finder is two fields and a button; the
   claim itself opens under the row it belongs to, so the program stays in
   view while the form is filled in. */
.provider-claim-find{display:grid;gap:12px;margin:14px 0 0}
.provider-claim-find .row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.provider-claim-find label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#4a4356}
.provider-claim-find input,.provider-claim-find select{padding:9px 11px;border:1px solid #e5e0e8;border-radius:9px;font:inherit;font-size:14px;background:#fff;color:#231b34}
.claim-inline{grid-column:1/-1;margin-top:4px}
.claim-inline .provider-program-form{margin:0}
.claim-inline .provider-hint{margin:0 0 4px}
@media(max-width:640px){.provider-claim-find .row{grid-template-columns:1fr}}