/* ==========================================================================
   SMM Panel — catalogue: platform tiles, metric icons and the provider import.
   Loaded after app.css (and admin.css) on pages that list services or categories.
   Brand glyphs: Simple Icons (CC0 1.0) in assets/icons/brands.svg. Brand colours
   and glyph inks are generated at the end of this file by build-brands.php.
   ========================================================================== */

/* ---------- Platform tile: brand glyph on its colour, or a Lucide icon on a neutral tile ---------- */
.pf { position: relative; display: inline-flex; flex: none; vertical-align: middle; line-height: 0; }
.pf.has-metric { margin: 0 5px 5px 0; }
.pf-tile {
  --pf: var(--sunken); --pf-ink: var(--ink-2);
  width: 32px; height: 32px; border-radius: calc(9px * var(--rf, 1)); display: grid; place-items: center; flex: none;
  background: var(--pf); color: var(--pf-ink);
  box-shadow: inset 0 0 0 1px rgba(12, 26, 30, .08), inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(12, 26, 30, .08);
}
.pf-glyph { width: 17px; height: 17px; display: block; fill: currentColor; stroke: none; }
.pf-tile > .icon { width: 17px; height: 17px; vertical-align: 0; }
.pf-tile.pf-generic { background: var(--sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.pf-tile.pf-generic.brand { background: var(--brand-50); color: var(--brand); box-shadow: none; }

.pf-xs .pf-tile { width: 18px; height: 18px; border-radius: calc(5px * var(--rf, 1)); }
.pf-xs .pf-glyph, .pf-xs .pf-tile > .icon { width: 11px; height: 11px; }
.pf-sm .pf-tile { width: 26px; height: 26px; border-radius: calc(7px * var(--rf, 1)); }
.pf-sm .pf-glyph, .pf-sm .pf-tile > .icon { width: 14px; height: 14px; }
.pf-lg .pf-tile { width: 40px; height: 40px; border-radius: calc(11px * var(--rf, 1)); }
.pf-lg .pf-glyph, .pf-lg .pf-tile > .icon { width: 21px; height: 21px; }
.pf-xl .pf-tile { width: 44px; height: 44px; border-radius: calc(12px * var(--rf, 1)); }
.pf-xl .pf-glyph, .pf-xl .pf-tile > .icon { width: 23px; height: 23px; }

/* Metric badge: what the service delivers (followers, likes, views…), pinned to the tile's corner. */
.pf-metric {
  position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(16, 24, 32, .10);
}
.pf-metric .icon { width: 10px; height: 10px; stroke-width: 2.5; vertical-align: 0; }
.pf-sm.has-metric { margin: 0 4px 4px 0; }
.pf-sm .pf-metric { width: 15px; height: 15px; right: -4px; bottom: -4px; }
.pf-sm .pf-metric .icon { width: 9px; height: 9px; }
.pf-lg .pf-metric, .pf-xl .pf-metric { width: 19px; height: 19px; }
.pf-lg .pf-metric .icon, .pf-xl .pf-metric .icon { width: 11px; height: 11px; }
/* An extra-small tile has no room for the badge, which would cover the logo. */
.pf-xs .pf-metric { display: none; }

:root[data-theme="dark"] .pf-tile { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .pf-tile.pf-generic { box-shadow: inset 0 0 0 1px var(--line-strong); }
:root[data-theme="dark"] .pf-metric { box-shadow: 0 0 0 1px var(--line-strong); }

/* Tiles inside existing components */
.chip .pf { margin-left: -4px; }
.chip.active .pf-tile.pf-generic, .chip[aria-pressed="true"] .pf-tile.pf-generic { background: transparent; color: inherit; box-shadow: none; }
.panel-header > .pf { align-self: center; }
.platform .pf { flex: none; }
.picker-trigger .pf { margin-right: 2px; }
.list-item > .pf, .list > li > .pf { align-self: center; }
.list > li.items-start > .pf { align-self: flex-start; }
.svc-cell { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.svc-cell > .grow { min-width: 0; }
.svc-cell > .pf { margin-top: 1px; }
.svc-line { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; vertical-align: middle; }
.svc-line > span:last-child { min-width: 0; }
.metric-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sunken); color: var(--ink-2); flex: none; }
.metric-ico .icon { width: 12px; height: 12px; stroke-width: 2.3; vertical-align: 0; }

/* ---------- Provider import ---------- */
/* Settings above the list, in columns where there is room (the list needs the full width). */
.import-layout { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.import-layout > .panel { margin-top: 0; }
.import-set-grid { display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: start; }
.import-settings .switch-row { padding: 9px 0; }
.import-settings .switch-row:first-child { padding-top: 0; }
.import-settings .panel-footer { gap: 8px 14px; }
@media (min-width: 640px) { .import-settings .panel-footer .btn-block { width: auto; } }
fieldset.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain-fieldset > legend { padding: 0; }
.import-filters .search { flex: 1 1 260px; }
.import-filters select { max-width: 260px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--brand-50); color: var(--brand-hover); border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.chip-check:has(input:focus-visible) { box-shadow: var(--ring); outline: 2px solid transparent; outline-offset: 2px; }
.select-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 9px 14px; background: var(--brand-50); border-bottom: 1px solid var(--brand-100); color: var(--ink-2); font-size: .86rem; text-align: center; }
.select-banner button { background: none; border: 0; padding: 2px 0; color: var(--brand); font: 600 .86rem/1.3 var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.select-banner button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: calc(4px * var(--rf, 1)); }
@media (min-width: 1024px) { .import-table td.card-title { min-width: 300px; } }
.nm-clean, .nm-was { display: none; }
.clean-on .nm-clean { display: inline; }
.clean-on .has-clean .nm-raw { display: none; }
.clean-on .nm-was { display: block; }
/* Running totals of a job sent in parts: cells fill each row (any number of them), separated by hairlines. */
.run-counts { display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
.run-counts > div { flex: 1 1 104px; padding: 10px 12px; min-width: 0; background: var(--paper); }
.run-counts .k { display: block; font-size: .76rem; color: var(--muted); }
.run-counts .v { display: block; font-family: var(--font-display); font-feature-settings: normal; font-weight: 620; font-size: 1.2rem; letter-spacing: -0.02em; }
@media (max-width: 479px) { .run-counts > div { flex-basis: 40%; } }
.panel > .panel-note { margin: 12px 14px 0; }
.run-log { max-height: 240px; overflow-y: auto; }
.run-log > li { font-size: .84rem; padding: 9px 14px; }
body.admin .toolbar.link-search { padding: 0; border: 0; }
.cand-list { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; padding: 2px; }
.cand { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; font: inherit; box-shadow: var(--e1); transition: border-color .15s, background-color .15s; }
.cand:hover { border-color: var(--line-strong); background: var(--paper-2); }
.cand:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring); }
.cand[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.cand .grow { min-width: 0; }
.cand .t { display: block; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.cand .s { display: block; font-size: .78rem; color: var(--muted); }

/* Staff service list: the edit button shows its label only where the table has room for it (the row and name link to the same page). */
.svc-edit-label { display: none; }
@media (min-width: 1440px), (max-width: 767px) { .svc-edit-label { display: inline; } }
/* Rows laid out as cards (narrow panels) have room for the word; an icon alone on a full-width button reads as empty. */
@container table-wrap (max-width: 899px) { .svc-edit-label { display: inline; } }
.platform-preview { padding-top: 6px; }

/* ---------- Order page: platform, category, service (1.6.2) ---------- */
/* The platform grid adapts to the room it has (a container), not the window: the order column is narrower on computers
   (beside the summary) than on tablets. Four tiles a row from 680 pixels, three below, four small ones on phones (three on
   the narrowest), so a name like "Instagram" or "SoundCloud" fits without breaking. Collapsed, it shows ten platforms with
   four tiles a row, seven with three, six on phones, then All and More (three rows, two on most phones). The chosen
   platform always shows. Browsers without container queries get tiles at least 160 pixels wide instead. */
.pf-step { container: pf-step / inline-size; }
.pf-step-label { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.pf-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.pf-choice {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--e1);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.pf-choice:hover { border-color: var(--brand-200); color: var(--ink); text-decoration: none; box-shadow: var(--e2); }
.pf-choice:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
.pf-choice[aria-current="true"] { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.pf-choice[aria-current="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--brand), var(--ring); }
.pf-choice-text { display: grid; min-width: 0; }
.pf-choice .t { font-weight: 600; font-size: .86rem; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pf-choice .s { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-choice[aria-current="true"] .s { color: var(--brand-hover); }
.pf-check { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 2px var(--paper); }
.pf-check .icon { width: 12px; height: 12px; }
.pf-choice[aria-current="true"] .pf-check { display: grid; }
.pf-more { display: none; color: var(--ink-2); }
.pf-more .t { font-weight: 550; }
/* Without scripts every platform shows (and there is no More). */
.js .pf-more.pf-more-10 { display: flex; }
.js .pf-choices:not(.expanded) .pf-x10:not([aria-current="true"]) { display: none; }
@container pf-step (min-width: 680px) {
  .pf-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container pf-step (max-width: 679px) {
  .pf-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .js .pf-more.pf-more-7 { display: flex; }
  .js .pf-choices:not(.expanded) .pf-x7:not([aria-current="true"]) { display: none; }
}
@container pf-step (max-width: 479px) {
  .pf-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pf-choice { flex-direction: column; justify-content: center; gap: 7px; min-height: 82px; padding: 10px 2px 9px; text-align: center; }
  .pf-choice .t { font-size: .7rem; line-height: 1.2; }
  .pf-choice .s { display: none; }
  .js .pf-more.pf-more-6 { display: flex; }
  .js .pf-choices:not(.expanded) .pf-x6:not([aria-current="true"]) { display: none; }
}
/* The narrowest phones (under about 385 pixels): three small tiles a row, so the longer names still fit. */
@container pf-step (max-width: 319px) {
  .pf-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Without container queries (before Chrome 105, Safari 16, Firefox 110), phones get the small tiles by the window's
   width instead (the order column is the window less about 66 pixels there). */
@supports not (container-type: inline-size) {
  @media (max-width: 545px) {
    .pf-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .pf-choice { flex-direction: column; justify-content: center; gap: 7px; min-height: 82px; padding: 10px 2px 9px; text-align: center; }
    .pf-choice .t { font-size: .7rem; line-height: 1.2; }
    .pf-choice .s { display: none; }
    .js .pf-more.pf-more-6 { display: flex; }
    .js .pf-choices:not(.expanded) .pf-x6:not([aria-current="true"]) { display: none; }
  }
  @media (max-width: 385px) {
    .pf-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}
/* With scripts on, the no-script service list never shows and the category and service controls keep their place until
   order.js shows them, so nothing moves. If order.js could not start, the page falls back to the no-script form. */
.js .order-layout [data-nojs] { display: none; }
.js .order-layout [data-js][hidden] { display: block !important; visibility: hidden; }
.js .order-layout.nojs-fallback [data-nojs] { display: block; }
.js .order-layout.nojs-fallback [data-js] { display: none !important; }

/* platform colours: generated by build-brands.php from Simple Icons 15.22.0, do not edit by hand */
.pf-instagram { --pf: #ff0069; --pf-ink: #fff; }
.pf-tiktok { --pf: #000000; --pf-ink: #fff; }
.pf-youtube { --pf: #ff0000; --pf-ink: #fff; }
.pf-facebook { --pf: #0866ff; --pf-ink: #fff; }
.pf-x { --pf: #000000; --pf-ink: #fff; }
.pf-telegram { --pf: #26a5e4; --pf-ink: #fff; }
.pf-spotify { --pf: #1ed760; --pf-ink: #101418; }
.pf-soundcloud { --pf: #ff5500; --pf-ink: #fff; }
.pf-twitch { --pf: #9146ff; --pf-ink: #fff; }
.pf-discord { --pf: #5865f2; --pf-ink: #fff; }
.pf-pinterest { --pf: #bd081c; --pf-ink: #fff; }
.pf-snapchat { --pf: #fffc00; --pf-ink: #101418; }
.pf-reddit { --pf: #ff4500; --pf-ink: #fff; }
.pf-threads { --pf: #000000; --pf-ink: #fff; }
.pf-whatsapp { --pf: #25d366; --pf-ink: #101418; }
.pf-kick { --pf: #53fc19; --pf-ink: #101418; }
.pf-vimeo { --pf: #1ab7ea; --pf-ink: #101418; }
.pf-trustpilot { --pf: #00b67a; --pf-ink: #fff; }
.pf-google { --pf: #4285f4; --pf-ink: #fff; }
.pf-applemusic { --pf: #fa243c; --pf-ink: #fff; }
.pf-tumblr { --pf: #36465d; --pf-ink: #fff; }
.pf-quora { --pf: #b92b27; --pf-ink: #fff; }
.pf-rumble { --pf: #85c742; --pf-ink: #101418; }
.pf-dailymotion { --pf: #0a0a0a; --pf-ink: #fff; }
.pf-audiomack { --pf: #ffa200; --pf-ink: #101418; }
.pf-clubhouse { --pf: #ffe450; --pf-ink: #101418; }
.pf-tidal { --pf: #000000; --pf-ink: #fff; }
.pf-shazam { --pf: #0088ff; --pf-ink: #fff; }
.pf-viber { --pf: #7360f2; --pf-ink: #fff; }
.pf-imdb { --pf: #f5c518; --pf-ink: #101418; }
/* end platform colours */