/* Boards Profile, ProfileVisitor and M-Profile, in all 5 templates. Every rule sits under .pf. */
/* A size container has no width of its own; the profile preview page shrink-wraps its column. */
.pf{container:pf / inline-size;display:flex;flex-direction:column;--page-gap:24px;gap:var(--page-gap);width:100%;min-width:0}
/* The gap spaces the panels, not the old sheet's .panel bottom margin. */
.pf .panel{margin:0}
.pf .eb{margin:0}
.pf-body{display:flex;flex-direction:column;gap:24px;min-width:0}
.pf-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.pf-two{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.pf-col{display:flex;flex-direction:column;gap:24px;min-width:0}

.pf-head{padding:0;overflow:hidden}
.pf-cover{position:relative;height:150px;background:var(--plate)}
.pf-cover svg{display:block}
.pf .pf-cover-lines{fill:none;stroke:var(--plate-line);stroke-width:1}
.pf .pf-cover-cell{fill:var(--accent-line);opacity:.55}
.pf-cover-grid{position:absolute;left:67.5%;top:96px;font-size:13px;font-weight:800;text-transform:uppercase;color:var(--accent)}
.pf-cover--photo,.pf-cover--mosaic{height:220px}
.pf-cover-img{display:block;width:100%;height:100%;object-fit:cover}
.pf-cover--repositioning{cursor:grab;box-shadow:inset 0 0 0 3px var(--accent)}
.pf-cover--mosaic{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
.pf-tile{min-width:0;overflow:hidden;cursor:zoom-in}
.pf-tile img{display:block;width:100%;height:100%;object-fit:cover}
.pf-cover-act{position:absolute;top:18px;right:18px;z-index:2;display:flex;gap:8px}
.pf-cover-menu{position:relative}
.pf-cover-btn{display:inline-flex;align-items:center;gap:8px;height:38px;margin:0;padding:0 14px;box-sizing:border-box;border:1px solid var(--plate-line);
  border-radius:11px;background:var(--plate);color:var(--plate-ink);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}
.pf-cover-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pf .pf-cover-dd{position:absolute;top:44px;right:0;z-index:5;min-width:230px}
.pf .pf-cover-dd[hidden]{display:none}
.pf .pf-cover-dd .mrow{cursor:pointer}
.pf-repos{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--panel)}
.pf-repos[hidden]{display:none}
.pf-repos-t{flex-grow:1;font-size:14px;font-weight:700}

.pf-id{display:flex;gap:24px;min-width:0}
.pf-id--head{position:relative;flex-wrap:wrap;align-items:flex-end;margin-top:-56px;padding:0 28px 24px}
/* The photo rides up over the cover; the text starts below it, however many lines it has. */
.pf-id--head .pf-av{align-self:flex-start}
.pf-id--head .pf-idt{padding-top:68px}
/* The row's empty top overlaps the cover: let clicks through to the tiles and the photo below. */
.pf-id--head,.pf-id--head .pf-idt{pointer-events:none}
.pf-id--head .pf-av,.pf-id--head .pf-idt>*,.pf-id--head .pf-act{pointer-events:auto}
.pf-head--plain .pf-id--head{margin-top:0;padding-top:24px}
.pf-head--plain .pf-idt{padding-top:0}
.pf-id--center{flex-direction:column;align-items:center;gap:16px;padding:28px 24px;text-align:center}
.pf-id--side{flex-direction:column;gap:16px;padding:22px 24px}
.pf-av{flex:none;width:132px;height:132px;box-sizing:border-box;border:4px solid var(--panel);border-radius:18px;background:var(--panel2);
  box-shadow:0 0 0 1px var(--line-soft);object-fit:cover;color:var(--muted)}
span.pf-av{display:flex;align-items:center;justify-content:center}
.pf-av--initials{font-size:40px;font-weight:900;color:var(--ink)}
.pf-idt{flex:1 1 260px;display:flex;flex-direction:column;gap:8px;min-width:0;padding-bottom:2px}
.pf-call{display:flex;align-items:baseline;gap:14px;min-width:0}
.pf-id--center .pf-call,.pf-id--center .pf-meta{justify-content:center}
.pf-call h1{margin:0;min-width:0;font-size:60px;font-weight:900;line-height:.9;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.pf-admin{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.pf-flag{flex:none;align-self:center;height:20px;border-radius:3px}
.pf-name{font-size:17px;font-weight:700;color:var(--ink)}
.pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--muted)}
.pf-place{display:inline-flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere}
.pf-place:not(:last-child)::after{content:'';flex:none;width:4px;height:4px;border-radius:50%;background:var(--line)}
.pf .pf-meta .pill{height:24px;padding:0 9px}
.pf .pf-prem{border:1px solid var(--accent-line);background:none;color:var(--accent-line)}
.pf-act{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:2px}
/* A long callsign wraps its button's text rather than running out of the head. */
.pf-act .btn{max-width:100%;height:auto;min-height:44px;padding-block:10px;box-sizing:border-box;white-space:normal;text-align:center}
.pf-id--side .pf-idt,.pf-id--center .pf-idt{flex:none;width:100%}
.pf-id--side .pf-act,.pf-id--center .pf-act{padding:0}
.pf-id--side .pf-act .btn{flex:1 1 auto}

.pf-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-kpi--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-aside .pf-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-kpi>div{padding:18px 22px}
.pf-kpi .kl{letter-spacing:.2em}
.pf-kpi .kv{margin-top:4px;font-size:38px}
.pf-aside .pf-kpi .kv{font-size:30px}
.pf .pf-kv-ok{color:var(--accent-line)}

.pf-panel{display:flex;flex-direction:column;gap:16px;min-width:0;padding:22px 24px;box-sizing:border-box}
.pf-side .pf-panel,.pf-stations,.pf-loc,.pf-dxcc{gap:12px}
.pf-solo{padding:0}
.pf-ph{display:flex;align-items:center;gap:10px;min-width:0}
.pf-ph .eb{flex-grow:1;min-width:0}
.pf-ph-x{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pf-ph-n{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap}
.pf-ph-link{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.pf-legend{display:flex;gap:14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pf-legend span{display:flex;align-items:center;gap:6px}
.pf-line{display:inline-block;width:16px}
.pf-line--ok{height:3px;background:var(--ink)}
.pf-line--un{border-top:2px dashed var(--ink)}
.pf-map-wrap{position:relative;height:330px;overflow:hidden;border:1px solid var(--line-soft);border-radius:12px;background:var(--map)}
.pf-map-canvas{width:100%;height:100%;background:var(--map)}
.pf-map-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;text-align:center;color:var(--muted)}
.pf-map-empty p{margin:0}
.pf-map-empty .qrz-profile-map-empty__title{color:var(--ink);font-weight:700}

.pf-bands{display:flex;flex-wrap:wrap;gap:6px}
.pf-band{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;box-sizing:border-box;border:1px dashed var(--line);border-radius:8px;
  color:var(--muted);font-size:14px;font-weight:800}
.pf-band.on{border:1px solid var(--ink);color:var(--ink)}
.pf-band i{width:8px;height:8px;border-radius:2px}
.pf-heat{--weeks:53;--weeks-phone:26;display:grid;grid-template-columns:24px repeat(var(--weeks),minmax(0,1fr));grid-template-rows:14px repeat(7,auto);grid-auto-flow:column;gap:2px;min-width:0}
.pf-heat-col{display:contents}
.pf-heat-d,.pf-heat-m{font-size:11px;color:var(--muted);white-space:nowrap}
.pf-heat-d{display:flex;align-items:center;height:0;align-self:center}
.pf-heat-m{width:0;line-height:14px}
.pf-heat .pf-cell{width:auto;height:auto;aspect-ratio:1}
.pf-cell{display:block;width:9px;height:9px;border-radius:2px;background:var(--panel2)}
.pf .pf-cell--pad{background:none}
.pf .pf-cell--1{background:var(--heat1)}
.pf .pf-cell--2{background:color-mix(in srgb,var(--heat1),var(--accent))}
.pf .pf-cell--3{background:var(--accent)}
.pf .pf-cell--4{background:var(--accent-line)}
.pf-scale{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}

.pf-stn{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:12px;background:var(--panel2);color:var(--ink)}
.pf-stn-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.pf-stn-call{min-width:0;font-size:22px;font-weight:800;overflow-wrap:anywhere}
.pf-rows{display:grid;grid-template-columns:58px minmax(0,1fr);row-gap:3px;margin:0;font-size:14px}
.pf-rows dt{font-weight:400;text-transform:uppercase;color:var(--muted)}
.pf-rows dd{margin:0;overflow-wrap:anywhere}
.pf-loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf-loc-grid>div{min-width:0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px}
.pf-loc-k{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pf-loc-v{display:block;margin-top:4px;font-size:18px;font-weight:800;overflow-wrap:anywhere}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;box-sizing:border-box;border:1px solid var(--line-soft);border-radius:8px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:13px;font-weight:700}
.pf-chip[hidden]{display:none}
.pf-chip-flag{width:16px;height:12px;border-radius:2px;object-fit:cover}
.pf-chip-more{margin:0;border-color:var(--accent-line);color:var(--accent-line);font-weight:800;cursor:pointer}

.pf-bio{margin:0;font-size:15px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.pf-facts{display:flex;flex-wrap:wrap;gap:6px}
.pf-facts span{display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--line-soft);border-radius:8px;font-size:13px;font-weight:700;color:var(--muted)}
.pf-strip-track{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin}
.pf-photo{flex:none;width:180px;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--panel2);cursor:zoom-in}
.pf-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pf-grid-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pf-grid-photos .pf-photo{width:auto}
.pf-film-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none}
.pf-film-card{position:relative;flex:none;width:120px;overflow:hidden;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel2)}
.pf-film-card img{display:block;width:100%;height:auto;aspect-ratio:960/611;object-fit:cover}
.pf-film-card.thumb-loading img{visibility:hidden}
.pf .pf-claim{margin:0}
.pf-start{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 24px;text-align:center}
.pf-start-t{margin:0;font-size:24px;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.pf-start-d{max-width:520px;margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.pf-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.pf-steps li{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line-soft);border-radius:12px;font-size:14px;font-weight:800}
.pf-steps svg{color:var(--accent-line)}
.pf-blocked{display:flex;flex-direction:column;gap:8px;padding:24px}
.pf-blocked-lead{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.pf-blocked-note{margin:0;font-size:15px;color:var(--muted)}

/* Board EditProfile: the owner's editor and /settings/profile-template. The gallery rules stay unscoped: a touch drag clones an item into body. */
.pf-ed-form{display:flex;flex-direction:column;gap:24px;min-width:0;margin:0}
.pf-ed-who{display:flex;align-items:center;gap:16px;min-width:0}
.pf-ed-photo{flex:none}
.pf-ed-whot{display:flex;flex-direction:column;gap:4px;min-width:0}
.pf-ed-call{font-size:22px;font-weight:800;color:var(--ink)}
.pf-ed-hint,.pf-ed-copy{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.pf-ed-copy{font-size:14px}
.pf-ed-count{margin-left:6px}
.pf-ed-status{margin:0;font-size:14px;color:var(--muted)}
/* The photo uploader marks its state with app-inline-status--*, the other scripts with is-*. */
.pf .pf-ed-status:is(.is-error,.app-inline-status--error){color:var(--neg)}
.pf .pf-ed-status:is(.is-success,.app-inline-status--success){color:var(--accent-line)}
.pf-ed textarea.inp{min-height:96px}
.pf-tpls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pf-tpl{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 10px 12px;box-sizing:border-box;border:1px solid var(--line-soft);border-radius:12px;background:var(--panel);cursor:pointer}
.pf-tpl:hover{border-color:var(--accent-line)}
.pf-tpl.is-selected{padding:9px 9px 11px;border:2px solid var(--accent-line);background:var(--sel-tint)}
.pf-tpl.is-locked{cursor:not-allowed}
.pf-tpl-thumb{position:relative;height:84px;border-radius:8px;background:var(--panel2)}
.pf-tpl.is-selected .pf-tpl-thumb{background:var(--panel)}
.pf-tpl-sketch{display:block;width:100%;height:100%;padding:8px;box-sizing:border-box}
.pf-tpl-sketch .k1{fill:var(--line)}
.pf-tpl-sketch .k2{fill:var(--line);opacity:.55}
.pf-tpl-sketch .k3{fill:var(--line);opacity:.3}
.pf-tpl-sketch .ka{fill:var(--accent-line);opacity:.35}
.pf-tpl-sketch .kb{fill:var(--panel);stroke:var(--line)}
.pf-tpl-prev{position:absolute;top:6px;right:6px;height:20px;margin:0;padding:0 8px;border:0;border-radius:6px;background:var(--accent-fill);color:var(--accent-fill-ink);font-family:inherit;font-size:11px;font-weight:800;cursor:pointer}
.pf-tpl-prev:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.pf-tpl-name{font-size:14px;font-weight:800;color:var(--ink)}
.pf-tpl-desc{font-size:12px;line-height:1.4;color:var(--muted)}
.gallery-editor{display:grid;grid-template-columns:repeat(auto-fill,140px);gap:10px}
.gallery-editor__item{position:relative;height:96px;overflow:hidden;border:1px solid var(--line-soft);border-radius:12px;background:var(--panel2);cursor:grab;user-select:none;-webkit-user-select:none}
.gallery-editor__item:active{cursor:grabbing}
.gallery-editor__item--dragging{opacity:.5}
.gallery-editor__item--ghost{opacity:.8;border:2px solid var(--accent-line)}
.gallery-editor__shimmer{width:100%;height:100%;background:linear-gradient(90deg,var(--panel2) 25%,var(--panel) 50%,var(--panel2) 75%);background-size:200% 100%;animation:pf-shimmer 1.5s infinite}
@keyframes pf-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.gallery-editor__img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-editor__drag-handle,.gallery-editor__remove{position:absolute;top:6px;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:8px;
  background:var(--plate);color:var(--plate-ink);-webkit-tap-highlight-color:transparent}
.gallery-editor__drag-handle{left:6px;cursor:grab;touch-action:none}
.gallery-editor__remove{right:6px;background:var(--neg-fill);color:#fff;cursor:pointer}
.gallery-editor__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:96px;box-sizing:border-box;border:2px dashed var(--line);border-radius:12px;
  color:var(--ink);font-size:15px;font-weight:800;cursor:pointer}
.gallery-editor__add:hover{border-color:var(--accent-line)}
.gallery-editor__add[hidden]{display:none}
.pf-ed-film{padding-top:14px;border-top:1px solid var(--row);cursor:pointer}
.pf .pf-ed-up{align-items:center;margin:0}
.alert.info.pf-ed-up>svg{color:var(--accent-line)}
.pf-ed-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.pf-ed-foot .pf-ed-status{flex:1 1 200px}

@container pf (max-width:899px){
  .pf-cols{grid-template-columns:minmax(0,1fr)}
}
@container pf (max-width:699px){
  .pf-two{grid-template-columns:minmax(0,1fr)}
}
/* Board M-Profile. */
@container pf (max-width:599px){
  .pf{--page-gap:16px}
  .pf-body,.pf-col{gap:16px}
  .pf-cover{height:108px}
  .pf-cover--photo,.pf-cover--mosaic{height:160px}
  .pf-cover-grid{display:none}
  .pf-cover-act{top:12px;right:12px}
  .pf-cover-btn{width:40px;height:40px;padding:0;justify-content:center;border-radius:10px}
  .pf-cover-t{display:none}
  .pf-id--head{flex-direction:column;align-items:flex-start;gap:14px;margin-top:-48px;padding:0 16px 20px}
  .pf-head--plain .pf-id--head{padding-top:20px}
  .pf-av{width:96px;height:96px;border-radius:16px}
  .pf-idt,.pf-id--head .pf-idt{flex-basis:auto;width:100%;padding-top:0}
  .pf-call h1{font-size:40px}
  .pf-meta{font-size:14px}
  .pf-act{width:100%}
  .pf-act .btn{flex:0 1 auto}
  .pf-act .btn:only-child{min-width:min(232px,100%)}
  .pf-act:has(.btn + .btn){gap:8px}
  .pf-act .btn:not(:only-child){padding-inline:14px}
  .pf-kpi,.pf-kpi--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-kpi>div{padding:14px 16px}
  .pf-kpi .kv{font-size:30px}
  .pf-panel{padding:18px 16px}
  .pf-ph,.pf-legend{flex-wrap:wrap}
  .pf-map-wrap{height:216px}
  .pf-heat-old{display:none}
  .pf-heat{grid-template-columns:24px repeat(var(--weeks-phone),minmax(0,1fr))}
  .pf-photo{width:150px}
  .pf-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-ed-who{align-items:flex-start}
  .gallery-editor{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  /* M-EditProfile keeps Back and Save at the bottom of the screen; it cancels the page gutter to sit on the tab bar. */
  .pf-ed-foot{position:sticky;bottom:calc(-1 * var(--gutter, 0px));z-index:5;padding:12px 0;background:var(--bg);border-top:1px solid var(--line-soft)}
  .pf-ed-foot .btn{flex:1 1 0}
  .pf-ed-foot .pf-ed-status{flex-basis:100%}
  .pf .pf-ed-up{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
}