/* Pin My Dance — the directory pages (studio, city, cities, home).
   The map has its own shell in map.css; this is everything that is a document rather than a
   canvas. One stylesheet across all of them so the surface ladder, the red and the card shape
   cannot drift apart page by page. */

/* Space Grotesk, served from our own domain. It used to arrive from fonts.googleapis.com, which
   our own Content-Security-Policy blocks (style-src has no googleapis, font-src no gstatic), so
   the headings silently fell back to the system stack on every page. Three files instead of two
   because Google's own CSS splits the face by unicode-range — latin, latin-ext (needed for č ć
   š ž đ and half of Europe) and vietnamese; a browser downloads only the ones a page uses. The
   file is variable, so the same one answers for both 500 and 700, exactly as Google served it. */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/space-grotesk-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/space-grotesk-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --pmd-red:#ED1C24;
  --pmd-red-soft:rgba(237,28,36,.55);
  --pmd-red-faint:rgba(237,28,36,.08);
  --pmd-red-dark:#c4141b;

  /* Three surfaces, not one black. A flat page has no depth and every card has to draw its
     own border to exist; with a ladder the card is lighter than the section behind it and the
     border is only there to sharpen the edge. */
  --bg:#0D1117;
  --surface:#171C23;
  --card:#1F2630;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --ink:#E6EBF2;
  --dim:#97A2B2;
  /* Was #6B7686, and it carried real content at 12.5px: a studio's address, a city's country, the
     footer. Computed against the three surfaces it sits on, that measured 4.11:1, 3.72:1 and
     3.31:1 — under the 4.5:1 text this size needs, on every one of them. This clears 5.02:1 on
     the lightest of them. The cost is that the third grey is now close to the second, so the
     hierarchy between them leans on size and weight instead of colour, which holds up better
     anyway: nobody reads a 12.5px line as "less important" because it is four shades darker. */
  --faint:#8A95A5;

  --r:14px;
  --wrap:1200px;
  --bar-h:60px;
  --font-head:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}

.pmd-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- bar ---------- */
.pmd-bar{
  position:sticky;top:0;z-index:100;height:var(--bar-h);
  background:rgba(13,17,23,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.pmd-bar-in{height:var(--bar-h);display:flex;align-items:center;gap:22px}
.pmd-logo{
  font-family:var(--font-head);font-weight:700;letter-spacing:.06em;font-size:15px;
  color:#fff;text-decoration:none;white-space:nowrap;
}
.pmd-logo .r{color:var(--pmd-red)}
.pmd-nav{display:flex;gap:20px;margin-left:auto}
.pmd-nav a{color:var(--dim);text-decoration:none;font-size:14px}
.pmd-nav a:hover,.pmd-nav a.on{color:#fff}
/* In the bar there is no room for these, and no need: the footer carries them on a wide screen. */
.pmd-nav-more,.pmd-nav-live{display:none}

/* Three lines, and the same three lines turn into a cross when the panel is open — a button that
   says "menu" and then keeps saying "menu" leaves you looking for the way out. */
.pmd-burger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0 8px;margin-left:2px;
  background:none;border:0;cursor:pointer;flex:0 0 auto;
}
.pmd-burger span{
  display:block;height:2px;border-radius:2px;background:#fff;
  transition:transform .18s ease,opacity .14s ease;
}
.pmd-burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pmd-burger.is-open span:nth-child(2){opacity:0}
.pmd-burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pmd-cta{
  background:var(--pmd-red);color:#fff;text-decoration:none;font-weight:700;font-size:13px;
  padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .15s;
}
.pmd-cta:hover{background:var(--pmd-red-dark)}

/* ---------- breadcrumb ---------- */
.pmd-crumbs{font-size:12.5px;color:var(--faint);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pmd-crumbs a{color:var(--faint);text-decoration:none}
.pmd-crumbs a:hover{color:var(--ink)}
.pmd-crumbs span[aria-current]{color:var(--dim)}

/* ---------- buttons ---------- */
.pmd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;
}
.pmd-btn:hover{background:#28313d;border-color:rgba(255,255,255,.18)}
.pmd-btn-primary{background:var(--pmd-red);border-color:var(--pmd-red);color:#fff}
.pmd-btn-primary:hover{background:var(--pmd-red-dark);border-color:var(--pmd-red-dark)}
.pmd-btn svg{width:15px;height:15px;flex:0 0 15px}

/* ---------- chips ---------- */
.pmd-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pmd-chip{
  font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--dim);
  background:var(--surface);border:1px solid var(--line-soft);
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.pmd-chip-live{background:var(--pmd-red);border-color:var(--pmd-red);color:#fff}
.pmd-chip-past{color:var(--faint);background:transparent;border-style:dashed}

/* ---------- photo / placeholder ---------- */
.pmd-ph{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r)}
.pmd-ph>img{width:100%;height:100%;object-fit:cover;display:block}
.pmd-ph-wide{aspect-ratio:16/9}
.pmd-ph-tall{aspect-ratio:4/5}
.pmd-ph-square{aspect-ratio:1}

/* A logo cropped to 16:9 loses its own name, so it sits whole over a blurred copy of itself.
   The blur is the same image, so the panel always tones with the mark instead of fighting it. */
.pmd-ph-logo>img{object-fit:contain;padding:12%;position:relative;z-index:1}
.pmd-ph-blur{
  position:absolute;inset:-10%;background-size:cover;background-position:center;
  filter:blur(12px) saturate(.8) brightness(.45);z-index:0;
}

/* The stand-in for the 54% with no photo: still this site, not a broken image. */
.pmd-ph-empty{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1B222C 0%,#141920 100%);
  border:1px solid var(--line-soft);
}
.pmd-ph-initial{
  font-family:var(--font-head);font-weight:700;font-size:clamp(28px,14cqw,54px);
  color:rgba(255,255,255,.13);letter-spacing:-.03em;line-height:1;
}
.pmd-ph-empty{container-type:inline-size}
.pmd-ph-pin{
  position:absolute;right:12px;bottom:10px;width:16px;height:16px;
  color:var(--pmd-red);opacity:.65;
}

/* ---------- email reveal ---------- */
.pmd-mail{
  background:none;border:0;padding:0;font:inherit;color:var(--dim);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.pmd-mail:hover{color:var(--ink)}
.pmd-mail-shown{color:var(--ink);text-decoration:none}

/* ---------- footer ---------- */
.pmd-foot{border-top:1px solid var(--line-soft);margin-top:72px;padding:26px 0 40px;color:var(--faint)}
.pmd-foot-in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:12.5px}
.pmd-foot nav{display:flex;flex-wrap:wrap;gap:16px}
.pmd-foot a{color:var(--faint);text-decoration:none}
.pmd-foot a:hover{color:var(--ink)}

@media(max-width:720px){
  .pmd-nav{gap:14px}
  .pmd-bar-in{gap:12px}
  .pmd-foot-in{flex-direction:column;align-items:flex-start}
}

/* The stand-in lives behind every photograph, so a hotlinked image that stops answering leaves
   a designed tile instead of a blank rectangle. 5 of 30 sampled images no longer load. */
.pmd-ph-under{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1B222C 0%,#141920 100%);
  container-type:inline-size;
}
.pmd-ph>img{position:relative;z-index:2}
.pmd-ph-logo .pmd-ph-blur{z-index:1}
.pmd-ph-failed{background:transparent}
/* A city with no usable photograph shows a crop of the real map at its own coordinates —
   the same basemap the map page draws — rather than a dark rectangle with a letter in it. */
.pmd-ph-map{background-size:cover;background-position:center;background-color:#0F141A}

/* ---------- borrowed photographs ---------- */
/* The city pictures come from Wikimedia Commons on a CC licence, and Commons marks them as
   requiring attribution. So the credit goes on the picture, not on a page of small print
   somewhere else. It is quiet — nine pixels, low contrast, in the corner — but it is there on
   every tile, and it is a link to the file it came from. */
.pmd-credit{
  position:absolute;right:7px;bottom:6px;z-index:4;
  font-size:9px;line-height:1;letter-spacing:.02em;
  color:rgba(255,255,255,.5);
  background:rgba(6,9,13,.44);border-radius:3px;padding:3px 5px;
  backdrop-filter:blur(2px);
  max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;                      /* the tile is one link; do not fight it */
}
.pmd-credit a{color:inherit;text-decoration:none}
/* On a page hero the credit is a line of its own, so the link is clickable and the licence
   is named in full. */
.pmd-credit-line{position:static;pointer-events:auto;display:inline-block;background:none;padding:0}
.pmd-credit-line a{text-decoration:underline;text-underline-offset:2px}
.pmd-credit-line a:hover{color:rgba(255,255,255,.86)}

/* The header's brand mark and live pill: shared, because the header is now shared. */
.pmd-bar .pmd-logo{display:flex;align-items:center;gap:8px}
.pmd-mark{display:block;width:17px;height:auto;flex:0 0 auto}
.pmd-nav .on{color:#fff}
.hp-nav-map{display:inline-flex;align-items:center;gap:6px}
.hp-nav-map svg{width:14px;height:14px}
.hp-live-pill{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  background:rgba(237,28,36,.13);border:1px solid rgba(237,28,36,.4);
  color:#ff6b70;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
}
.hp-live-pill i{width:5px;height:5px;border-radius:50%;background:var(--pmd-red);display:block}
@media(max-width:900px){
  .pmd-burger{display:flex}
  /* The pill moves into the panel, beside Events, where the number has a name next to it. */
  .hp-live-pill{display:none}

  /**
   * The same <nav> is the row on a desktop and the panel on a phone.
   *
   * One list of links, so the two cannot drift — which is exactly the bug the homepage had this
   * morning, where a hand-written copy of a card had quietly lost its link. It is positioned
   * against .pmd-bar (sticky counts as positioned), so it spans the full width rather than the
   * padded content column. Animated on max-height rather than toggled with display:none, because
   * a menu that appears without moving reads as a page reload on a small screen.
   */
  .pmd-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;margin:0;
    background:#0f141b;
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 26px 44px -26px rgba(0,0,0,.92);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .22s ease,visibility .22s;
  }
  /* A fixed height here clipped Contact off the end. Bounded by the viewport instead, and
     scrollable in the case where a short phone in landscape cannot show six rows. */
  .pmd-nav.is-open{max-height:min(78vh,620px);visibility:visible;overflow-y:auto}
  /* 15px and a 50px row: a tap target, not a line of prose. */
  .pmd-nav a{
    display:flex;align-items:center;gap:9px;
    padding:15px 20px;font-size:15px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .pmd-nav a.on{color:#fff;background:rgba(255,255,255,.04);box-shadow:inset 3px 0 0 var(--pmd-red)}
  .pmd-nav-more{display:flex;color:var(--dim);font-size:14px}
  .pmd-nav-more:first-of-type{margin-top:0}
  .pmd-nav-live{
    display:inline-block;margin-left:auto;
    background:rgba(237,28,36,.14);border:1px solid rgba(237,28,36,.42);
    color:#ff6b70;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  }
}

/* ---------- a picture taller than its frame ---------- */
/* An event's picture is usually a poster: portrait, the title at the top, the sponsors at the
   bottom. Cropped into a 16:9 card it loses two thirds of itself, including the part that says
   what it is. So it is shown whole, against a blurred copy of itself — the way a cinema puts a
   one-sheet on a landscape screen. The same treatment the logo path already used, without the
   margin: a wordmark needs air around it, a poster IS the image. */
.pmd-ph-poster>img{
  object-fit:contain;object-position:center;
  padding:0;position:relative;z-index:2;
}
.pmd-ph-poster .pmd-ph-blur{z-index:1}
/* Lighter than the logo blur. Behind a wordmark the panel only has to be a tone; behind a poster
   it is the poster's own colour, and dimming it to a third throws that away. */
.pmd-ph-poster .pmd-ph-blur{filter:blur(16px) saturate(1.05) brightness(.55)}
/* A hairline down each side, so a poster on a dark card reads as placed rather than floating. */
.pmd-ph-poster>img{box-shadow:0 0 0 1px rgba(0,0,0,.35)}

/* ---------- the map crop, lifted ---------- */
/* CARTO's dark tiles render land and ocean at almost the same black, which is why the big map
   lifts its whole tile pane. A crop of the same tiles on a card needs the same lift for the same
   reason: without it the streets and the place names are there but not readable, and a card that
   is nearly black reads as a card with nothing on it — which is what it was replacing. */
.pmd-ph-map{filter:brightness(1.45) contrast(1.02)}
/* The pin sits in the corner at 65% and disappeared over a lifted crop with a gradient of card
   text across the bottom. It is the one mark that says "this is a place, not a photograph". */
.pmd-ph-map .pmd-ph-pin{
  opacity:1;right:10px;bottom:8px;width:18px;height:18px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));
}

/* ---------- the written pages: about, contact, privacy, terms ---------- */
/* Four pages of prose, and prose is the one thing the rest of this stylesheet does not do. They
   were a light-theme island — white cards on #f5f5f5, Bootstrap from a CDN, their own logo block
   and no way back into the site. Same words, same URLs, this surface. A measured column: 68
   characters, because a line of text twice that long is one the eye loses its place in. */
.pg{max-width:74ch;padding-top:26px;padding-bottom:56px}
.pg-title{
  font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(26px,3.4vw,36px);line-height:1.1;letter-spacing:-.025em;margin:0 0 10px;
}
.pg-lede{margin:0 0 6px;color:var(--dim);font-size:16px;line-height:1.55}
.pg-sec{margin-top:30px}
.pg-sec h2{
  font-family:var(--font-head);font-weight:700;color:#fff;font-size:17.5px;
  letter-spacing:-.015em;margin:0 0 10px;padding-left:11px;
  border-left:3px solid var(--pmd-red);
}
.pg-sec h3{font-weight:700;color:#fff;font-size:14.5px;margin:18px 0 6px}
.pg p{color:var(--dim);font-size:15px;line-height:1.62;margin:0 0 11px}
.pg a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(237,28,36,.6)}
.pg a:hover{text-decoration-color:var(--pmd-red)}
.pg ul,.pg ol{color:var(--dim);font-size:15px;line-height:1.62;margin:0 0 12px;padding-left:20px}
.pg li{margin-bottom:5px}
.pg li::marker{color:rgba(237,28,36,.75)}
/* A list that is the point of its section, rather than an aside inside a paragraph. */
.pg-list{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:12px;padding:14px 16px 14px 4px;margin:0 0 12px;
}
.pg-list ul,.pg-list ol{margin:0;padding-left:26px}
.pg-note{
  background:var(--surface);border:1px solid var(--line-soft);
  border-left:3px solid rgba(255,255,255,.22);
  border-radius:0 12px 12px 0;padding:14px 16px;margin:0 0 12px;
}
.pg-note>*:last-child{margin-bottom:0}
.pg-note-red{border-left-color:var(--pmd-red);background:var(--pmd-red-faint)}
.pg-badge{font-size:13px !important;color:var(--faint) !important}
.pg-email a{font-size:16px;font-weight:700}
@media(max-width:600px){
  .pg{padding-top:20px}
  .pg-sec{margin-top:24px}
}

/* ---------- the submission form (add-studio) ---------- */
/* The page every "Add your pin" button on the site leads to. It was the last light-theme island:
   white card on #f5f5f5, Bootstrap from a CDN, a fixed "Back to map" chip in the corner and no
   navigation. Sixteen fields is a lot to ask of anybody, so the grouping is the point — where it
   is, how to reach you, what you do — and the inputs are 16px because anything smaller makes iOS
   zoom the page on focus and lose the field you were typing in. */
.fm-page{max-width:720px;padding-top:26px;padding-bottom:56px}
.fm{margin-top:22px}
.fm-field{margin-bottom:15px}
.fm-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fm-label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink)}
.fm-req::after{content:' *';color:var(--pmd-red)}
.fm-input{
  display:block;width:100%;
  padding:11px 13px;font:inherit;font-size:16px;line-height:1.35;
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .14s,box-shadow .14s;
}
.fm-input::placeholder{color:var(--faint)}
.fm-input:hover{border-color:rgba(255,255,255,.18)}
.fm-input:focus{
  outline:none;border-color:var(--pmd-red);
  box-shadow:0 0 0 3px rgba(237,28,36,.22);
}
/* The closed control is ours; the open list belongs to the operating system, which is why the
   colour-scheme hint matters — without it the options draw black on black on a dark desktop. */
.fm-select{
  appearance:none;-webkit-appearance:none;color-scheme:dark;
  padding-right:38px;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='%2397A2B2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
}
.fm-area{min-height:96px;resize:vertical;line-height:1.55}
.fm-hint{margin:7px 0 0;font-size:13px;color:var(--faint);line-height:1.5}
.fm-hint a{color:var(--dim)}
.fm-group{
  border:1px solid var(--line-soft);border-radius:14px;
  padding:16px 16px 4px;margin:0 0 18px;
}
.fm-group legend{
  padding:0 8px;margin-left:-4px;
  font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--dim);
}
.fm-geo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 16px}
.fm-geo-status{font-size:13px;color:var(--faint)}
.fm-submit{width:100%;padding:14px;font-size:15.5px;margin-top:4px}
/* One shape for all three outcomes, told apart by the edge rather than by a wash of colour. */
.fm-msg{
  border:1px solid var(--line-soft);border-left:3px solid var(--dim);
  background:var(--surface);border-radius:0 12px 12px 0;
  padding:14px 16px;margin:18px 0 0;color:var(--dim);font-size:14.5px;line-height:1.55;
}
.fm-msg a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fm-msg strong{color:#fff}
.fm-ok{border-left-color:#3fb950;background:rgba(63,185,80,.08)}
.fm-err{border-left-color:var(--pmd-red);background:var(--pmd-red-faint)}
.fm-warn{border-left-color:#d29922;background:rgba(210,153,34,.08)}
@media(max-width:640px){
  .fm-row{grid-template-columns:1fr}
  .fm-group{padding:14px 13px 2px}
}