/* SP-45 (Contributor Access) WP6 - "My Citroën" (/my/). Inside the site frame (home_shell.css + gallery_shell.css: the
   header, footer, right rail and the car page's main column). Buttons follow the intake's (.cr-btn: dark, brand on
   hover); "Add another Citroën" uses the Gallery's own "Add your Car" green. Photos are gallery-card size (4:3). */
.my-page { --my-dark: #152536; --my-brand: #0d6efd; --my-muted: #5a6772; --my-line: #d0d5db; --my-soft: #f5f6f8; --my-add: #8bd39b; --my-add-hover: #74c684; }

.my-wrap { font-size: 15px; line-height: 1.5; color: #222; }
.my-wrap h1.my-heading { margin: .2rem 0 1rem; }
.my-loading { color: var(--my-muted); }
.my-muted { color: var(--my-muted); font-size: .85rem; margin: .35rem 0; }
.my-intro { color: #333; margin: 0 0 1.2rem; max-width: 640px; }

/* Buttons and quiet links */
.my-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 6px;
  border: 1px solid var(--my-dark); background: #fff; color: var(--my-dark); font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background .12s ease, border-color .12s ease; }
.my-btn:hover { background: var(--my-soft); }
.my-btn--primary { background: var(--my-dark); color: #fff; }
.my-btn--primary:hover:not(:disabled) { background: var(--my-brand); border-color: var(--my-brand); }
.my-btn:disabled { opacity: .55; cursor: not-allowed; }
.my-btn--add { background: #1e7a46; border-color: #1e7a46; color: #fff; font-size: 14px; min-height: 40px; padding: 0 18px; border-radius: 6px; }   /* option C: solid my Citroën green, standard size (operator, 2026-10-04) */
.my-btn--add:hover:not(:disabled) { background: #17633a; border-color: #17633a; }
.my-link { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--my-brand); text-decoration: underline; cursor: pointer; }
.my-link:hover { opacity: .75; }

/* Notices */
.my-notice { border-radius: 8px; padding: .65rem .9rem; margin: 0 0 1rem; border: 1px solid; }
.my-notice p { margin: .15rem 0; }
.my-notice--ok { background: #eef8f0; border-color: #9fd3ab; }
.my-notice--info { background: #eef4fb; border-color: #a9c6e8; }
.my-notice--error { background: #fdf1f0; border-color: #e5a9a3; }
.my-review-tag { display: block; margin-top: .3rem; font-size: .75rem; color: #7a5b12; }

/* Sign-in */
.my-signin { max-width: 560px; }
.my-signin__form label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
.my-signin__row { display: flex; gap: 8px; flex-wrap: wrap; }
.my-signin__row input { flex: 1 1 240px; min-height: 40px; padding: 0 10px; border: 1px solid var(--my-line); border-radius: 6px; font: inherit; }
.my-signin__result { margin-top: 1rem; }

/* First arrival: the private link, shown once */
.my-first { border: 1px solid #9fd3ab; background: #eef8f0; border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1.2rem; }
.my-first__title { font-weight: 700; margin: 0 0 .5rem; }
.my-linkbox { display: flex; gap: 8px; }
.my-linkbox__input { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--my-line); border-radius: 6px; font: inherit; font-size: .85rem; background: #fff; }

/* The car: orientation first */
.my-car { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; margin-bottom: 1.2rem; background: #fff; }
.my-car__top { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.my-car__photos { display: flex; gap: .75rem; flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* between phone and wide layouts (641-~800px) two 220px photos could overrun the card: they may shrink, never overflow (2026-10-15) */
.my-car__photos > .my-car__photo { flex: 0 1 auto; min-width: 0; }
.my-car__photo { display: block; width: 260px; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: #f1f2f4; }
.my-car__photos.is-two .my-car__photo { width: 220px; }
.my-car__photo--standin { object-fit: contain; background: #fff; border: 1px solid #eef0f2; box-sizing: border-box; padding: .4rem .5rem; }
.my-car__photo--none { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: .85rem; }
.my-car__id { flex: 1 1 220px; min-width: 0; }
.my-car__title { font-size: 1.35rem; font-weight: 700; margin: .1rem 0 .15rem; }
.my-car__number { margin: 0 0 .6rem; font-size: .9rem; }
.my-car__facts { list-style: none; margin: 0; padding: 0; color: #333; }
.my-car__facts li { margin: .1rem 0; }
.my-car__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eef0f2; }
.my-car__actions .my-muted { flex-basis: 100%; margin: 0; }
.my-car__state { flex-basis: 100%; margin: 0 0 .2rem; font-weight: 600; }
.my-car--compact { padding: .7rem; margin-bottom: .6rem; }
.my-car--compact .my-car__photo { width: 120px; }
.my-car--compact .my-car__title { font-size: 1.05rem; }

/* Add another Citroën */
.my-add { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid #cfe9d5;
  background: #f4fbf6; border-radius: 10px; padding: 1rem 1.1rem; margin: 0 0 1.4rem; }
.my-add__title { font-size: 1.1rem; margin: 0 0 .2rem; }
.my-add p { margin: 0; max-width: 460px; }

/* Secondary, deliberately quiet */
.my-more { color: #333; font-size: .92rem; margin: 0 0 1.2rem; }
.my-more p { margin: .25rem 0; }
.my-account { border-top: 1px solid #eef0f2; padding-top: .8rem; margin-top: 1.4rem; }
.my-account__links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.my-account__panel { margin-top: .8rem; max-width: 560px; }
.my-account__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.my-account__form .my-muted { flex-basis: 100%; }
.my-account__form input { flex: 1 1 240px; min-height: 38px; padding: 0 10px; border: 1px solid var(--my-line); border-radius: 6px; font: inherit; }

/* The update page */
.my-form { max-width: 720px; }
.my-form .is-saving { opacity: .6; pointer-events: none; }
.my-group { border: 1px solid #e5e7eb; border-radius: 10px; padding: .4rem 1rem 1rem; margin: 0 0 1.1rem; min-width: 0; }
.my-group__title { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--my-dark); padding: 0 .3rem; }
.my-row { display: grid; grid-template-columns: 230px 1fr; gap: .25rem 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid #f0f1f3; }
.my-row:last-child { border-bottom: 0; }
.my-row__label { font-size: .88rem; color: #333; font-weight: 600; }
.my-row input, .my-row select, .my-row textarea { width: 100%; box-sizing: border-box; min-height: 38px; padding: 6px 10px; border: 1px solid var(--my-line);
  border-radius: 6px; font: inherit; font-size: 15px; background: #fff; }
.my-row textarea { grid-column: 1 / -1; }
.my-row[data-field="comments"] .my-row__label { position: absolute; left: -9999px; } /* the group heading already says "Comments" */
.my-row__value { font-weight: 600; }
.my-row__hint { grid-column: 2; margin: 0; font-size: .8rem; color: var(--my-muted); }
.my-row__report { grid-column: 2; justify-self: start; font-size: .82rem; }
.my-report { grid-column: 1 / -1; background: var(--my-soft); border-radius: 8px; padding: .7rem .8rem; margin-top: .3rem; display: grid; gap: .35rem; }
.my-report label { font-size: .85rem; font-weight: 600; }
.my-report__current { margin: 0; font-size: .9rem; }
.my-report__buttons { display: flex; gap: 1rem; align-items: center; margin-top: .2rem; }
.my-open-request { grid-column: 1 / -1; background: #fff8e6; border: 1px solid #ecd9a0; border-radius: 8px; padding: .5rem .8rem; margin: .3rem 0; font-size: .88rem; }
.my-open-request p { margin: 0 0 .2rem; }
/* WP9 refinement 3: the Registry's decision on a report, with its reason */
.my-decision { grid-column: 1 / -1; background: #f1f5f9; border: 1px solid #cfd8e3; border-radius: 8px; padding: .5rem .8rem; margin: .3rem 0; font-size: .88rem; }
.my-decision p { margin: 0 0 .2rem; } .my-decision__reason { font-weight: 600; }
.my-save { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; padding: .8rem 0; border-top: 1px solid #eef0f2; }
.my-save__msg { flex: 1 1 260px; }
.my-save__msg .my-notice { margin: 0; }

/* The photo page */
.my-slots { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.my-slot { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.my-slot__title { font-weight: 700; margin: 0; }
.my-slot__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.my-slot__preview img { width: 260px; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; outline: 2px dashed var(--my-brand); }

@media (max-width: 780px) { .my-wrap { padding: 0 16px; box-sizing: border-box; width: 100%; } } /* the car page frame has no side gutter at phone width */
@media (max-width: 640px) {
  .my-car__photo, .my-car__photos.is-two .my-car__photo { width: 100%; }
  .my-car__photos { flex: 1 1 100%; flex-direction: column; }
  .my-car--compact .my-car__photos { flex: 0 0 auto; }
  .my-row { grid-template-columns: 1fr; }
  .my-row__hint, .my-row__report { grid-column: 1; }
  .my-row input, .my-row select, .my-row textarea, .my-signin__row input { font-size: 16px; } /* iOS: no zoom on focus */
  .my-btn { width: 100%; }
  .my-link { width: auto; }
}

/* WP6 r2 - the shared two-photo presentation (photo_slots.js), as on the intake: status line, two cards, the add pad */
.my-photos { max-width: 720px; margin-bottom: 1rem; }
.my-photos .cr-slots__status { font-weight: 600; margin: 0 0 .7rem; }
.my-photos .cr-slots { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.my-photos .cr-photo-card { display: flex; flex-direction: column; gap: .45rem; width: 300px; max-width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; padding: .7rem; box-sizing: border-box; }
.my-photos .cr-photo-card__slot { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--my-muted); }
.my-photos .cr-photo-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: #f1f2f4; }
.my-photos .cr-photo-card__nopreview { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: #f1f2f4; border-radius: 8px; color: #9ca3af; }
.my-photos .cr-photo-card__body { display: flex; flex-direction: column; gap: .2rem; }
.my-photos .cr-photo-card__name { font-size: .9rem; overflow-wrap: anywhere; }
.my-photos .cr-photo-card__note { font-size: .8rem; color: var(--my-muted); }
.my-photos .cr-photo-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.my-photos .cr-photo-drop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 1.5px dashed #c9d1d9; border-radius: 10px; padding: 1rem 1.1rem; background: #fafbfc; }
.my-photos .cr-photo-drop__text { display: flex; flex-direction: column; }
.my-photos .cr-photo-msg { margin: .6rem 0 0; font-size: .9rem; }
.my-photos .cr-photo-msg:empty { display: none; }

/* Live Localhost Tuner (2026-10-03): My Citroën's main sizes and gaps as NAMED values (same numbers as above), so ?tune=1 on
   localhost can adjust them; change a number here, in one place. */
.my-wrap{ --my-heading-size:28px; --my-car-pad:8px; --my-car-gap:26px; --my-block-gap:20px; --my-photo-w:220px; --my-photo-w-two:220px;
  --my-photo-gap:20px; --my-car-title-size:21.6px; --my-actions-gap:14px; --my-actions-top:16px; --my-add-pad:16px; --my-row-label-w:230px; --my-group-gap:18px; }
.my-wrap h1.my-heading{ font-size:var(--my-heading-size); }
.my-car{ padding:var(--my-car-pad); margin-bottom:var(--my-block-gap); }
.my-car__top{ gap:var(--my-car-gap); }
.my-car__photos{ gap:var(--my-photo-gap); }
.my-car__photo{ width:var(--my-photo-w); }
.my-car__photos.is-two .my-car__photo{ width:var(--my-photo-w-two); }
.my-car__title{ font-size:var(--my-car-title-size); }
.my-car__actions{ gap:var(--my-actions-gap); margin-top:var(--my-actions-top); padding-top:var(--my-actions-top); }
.my-add{ padding:var(--my-add-pad) calc(var(--my-add-pad) + 2px); margin-bottom:var(--my-block-gap); }
.my-row{ grid-template-columns:var(--my-row-label-w) 1fr; }
.my-group{ margin-bottom:var(--my-group-gap); }
@media (max-width: 640px){ .my-car__photo, .my-car__photos.is-two .my-car__photo{ width:100%; } .my-row{ grid-template-columns:1fr; } }
/* Live tuner labels (plain names shown in the ?tune=1 panel; no effect on the page) */
.my-wrap{ --my-heading-size--label:"Page heading size"; --my-car-pad--label:"Car block: inner padding"; --my-car-gap--label:"Car block: gap photo ↔ details";
  --my-block-gap--label:"Space between blocks"; --my-photo-w--label:"Car photo width (one photo)"; --my-photo-w-two--label:"Car photo width (two photos)";
  --my-photo-gap--label:"Gap between two photos"; --my-car-title-size--label:"Car title size"; --my-actions-gap--label:"Gap between action buttons";
  --my-actions-top--label:"Space above the action buttons"; --my-add-pad--label:"'Another Citroën' panel padding"; --my-row-label-w--label:"Update page: label column width";
  --my-group-gap--label:"Update page: space between groups"; }

/* Option A (operator, 2026-10-03): heading + "Private" tag and a standing line on every visit; the one-time box, compact */
.my-wrap{ --my-standing-gap:18px; --my-first-pad:12px; --my-standing-gap--label:"Space below the private-page line"; --my-first-pad--label:"'Keep your private link' box padding"; }
.my-heading-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.my-heading-row .my-heading{ margin-bottom:.2rem; }
.my-private-tag{ display:inline-block; padding:.2rem .6rem; border:1px solid #1e7a46; border-radius:8px; color:#1e7a46; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.my-standing{ color:#333; margin:0 0 var(--my-standing-gap); max-width:640px; }
.my-first{ padding:var(--my-first-pad) calc(var(--my-first-pad) + 2px); }
.my-first__title{ margin:0 0 .15rem; }
.my-first__text{ margin:0 0 .5rem; font-size:.9rem; color:#333; }
/* Forum and "Selling a car?" cells (operator, 2026-10-04): the same cell as "Another Citroën?" */
.my-cell{ border:1px solid #cfe9d5; background:#f4fbf6; border-radius:10px; padding:var(--my-add-pad) calc(var(--my-add-pad) + 2px); margin:0 0 var(--my-block-gap); }
.my-cell p{ margin:0; }
.my-local-tag{ color:#c00; font-weight:700; }
/* Page width for every My Citroën page (operator, 2026-10-04: 960px, tuned). The shared home shell's 820px body-copy
   width stays as it is for Home; only these pages widen. */
body.my-page{ --home-text-width:960px; --home-text-width--label:"Page width: header and content"; }
/* 2026-10-15: these now take the sitewide section-name settings (home_shell.css --sec-*), one set of knobs for every header.
   The page name in the site-header row, behind a vertical divider (operator, 2026-10-04): the intake header's
   .cr-header__context settings - 20px | 1px line | 20px (the row's own 16px gap + 4px margin before the line) - in green. */
body.my-page{ --my-label-size:var(--sec-label-size, 18px); --my-label-space:var(--sec-label-space, 20px); --my-label-by-gap:var(--sec-label-by-gap, 0px); --my-label-by-gap--label:"Header: space between 'my Citroën' and its byline"; --my-label-size--label:"Header: 'My Citroën' size"; --my-label-space--label:"Header: space each side of the divider"; }
/* desktop only: beside the 'my Citroën' label the title keeps its natural width. On phones the shared header rule
   (flex:1 1 0) must win, or the title cannot sit beside the logo and the row wraps (operator, 2026-10-09: PS1). */
@media (min-width: 641px){ body.my-page .citreg-header-title{ flex:0 1 auto; } }
.my-header-label{ flex:none; align-self:stretch; display:flex; flex-direction:column; justify-content:center; margin-left:calc(var(--my-label-space) - var(--hdr-gap, 16px)); padding-left:var(--my-label-space);
  border-left:1px solid var(--home-border, #d0d5db); white-space:nowrap; }
/* name and byline on the site title's own lines: the title's 36px line, then the tagline's 14px muted line (operator, 2026-10-04) */
.my-header-label__name{ color:#1e7a46; font-size:var(--my-label-size); font-weight:600;   /* semibold, one weight for both section labels (operator, 2026-10-17) */ line-height:1.25; }
.my-header-label__by{ color:var(--sec-by-color, #222); font-size:var(--sec-by-size, 12.5px); font-weight:400; line-height:1.35; margin-top:var(--my-label-by-gap); }
@media (max-width: 640px){
  /* phones: the header row wraps; the name takes its own line under it, without the divider */
  .my-header-label{ order:5; flex:1 0 100%; margin-left:0; padding-left:0; border-left:0; }
  .my-header-label__name{ font-size:calc(var(--my-label-size) * .8); line-height:1.2; }
  .my-header-label__by{ font-size:12px; }
}
.my-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.my-wrap{ --my-intro-above:0px; --my-intro-below:18px; --my-intro-gap:21px;
  --my-intro-above--label:"Cells: space above the Private row"; --my-intro-below--label:"Cells: space below the Private row"; --my-intro-gap--label:"Cells: gap between columns"; }
.my-cell3{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:var(--my-intro-gap); margin:var(--my-intro-above) 0 var(--my-intro-below); }
.my-cell3 .my-standing{ margin:0; max-width:none; }
@media (max-width: 640px){
  .my-cell3{ grid-template-columns:1fr; row-gap:8px; justify-items:start; }   /* phones: the Private tag above its line */
  .my-linkbox .my-btn{ flex:none; width:auto; }                               /* the Copy button no longer squeezes the link */
}
/* Sign-in / expired-link page: every space a named value with a plain label for the Live Localhost Tuner (operator,
   2026-10-04). Defaults equal the previous fixed values, so nothing moves until tuned. */
.my-signin{ --my-si-width:560px; --my-si-title-size:28px; --my-si-title-below:25px; --my-si-notice-pad:10px; --my-si-notice-below:20px;
  --my-si-intro-above:16px; --my-si-intro-below:24px; --my-si-label-above:13px; --my-si-label-below:5px; --my-si-row-gap:8px; --my-si-input-h:40px; --my-si-result-above:16px; --my-si-foot-above:6px;
  --my-si-width--label:"Sign-in: page width"; --my-si-title-size--label:"Sign-in: heading size"; --my-si-title-below--label:"Sign-in: space below heading";
  --my-si-notice-pad--label:"Sign-in: message box padding"; --my-si-notice-below--label:"Sign-in: space below message box";
  --my-si-intro-above--label:"Sign-in: space above the instruction line"; --my-si-intro-below--label:"Sign-in: space below the instruction line"; --my-si-label-above--label:"Sign-in: space above 'Your email address'";
  --my-si-label-below--label:"Sign-in: space between label and field"; --my-si-row-gap--label:"Sign-in: field ↔ button gap"; --my-si-input-h--label:"Sign-in: field and button height";
  --my-si-result-above--label:"Sign-in: space above the 'link is on its way' reply"; --my-si-foot-above--label:"Sign-in: space above 'Check your inbox…'";
  max-width:var(--my-si-width); }
.my-signin .my-signin__title{ font-size:var(--my-si-title-size); margin:0 0 var(--my-si-title-below); }
.my-signin .my-notice{ padding:var(--my-si-notice-pad) calc(var(--my-si-notice-pad) + 4px); margin:0 0 var(--my-si-notice-below); }
.my-signin .my-signin__intro{ margin:var(--my-si-intro-above) 0 var(--my-si-intro-below); }
.my-signin .my-signin__form label{ margin:var(--my-si-label-above) 0 var(--my-si-label-below); }
.my-signin .my-signin__row{ gap:var(--my-si-row-gap); }
.my-signin .my-signin__row input, .my-signin .my-signin__row .my-btn{ min-height:var(--my-si-input-h); }
.my-signin .my-signin__result{ margin-top:var(--my-si-result-above); }
.my-signin .my-signin__result .my-notice{ margin-bottom:0; }
.my-signin .my-signin__foot{ margin:var(--my-si-foot-above) 0 0; }
/* "My Citroën" as a place name in running text: the header label's green (operator trial, 2026-10-04) */
.my-place{ color:#1e7a46; font-weight:600; }   /* option 2: green + semibold (operator, 2026-10-04) */
/* Gateway round 5 (operator, 2026-10-04): the Private row in a green cell like the other my Citroën messages; with two
   or more entries, an "Entry #N" strip above each record and a rule between records; each record's identity in column 1
   (fixed width, text sized to it), photos in columns 2-3. Every value named and labelled for the Live tuner. */
.my-wrap{ --my-intro-pad:12px; --my-id-w:230px; --my-strip-pad:6px; --my-strip-below:6px; --my-rule-gap:22px;
  --my-intro-pad--label:"Cells (Private, Another Citroën, Forum): padding"; --my-id-w--label:"Record: identity column width";
  --my-strip-pad--label:"'Entry #' strip: padding"; --my-strip-below--label:"'Entry #' strip: space below"; --my-rule-gap--label:"Space above and below the rule between records"; }
.my-cell3{ max-width:none; border:1px solid #cfe9d5; background:#f4fbf6; border-radius:10px; padding:var(--my-intro-pad) calc(var(--my-intro-pad) + 4px); }
.my-car__top--grid{ display:grid; grid-template-columns:var(--my-id-w) auto; justify-content:start; align-items:start; }
.my-car__top--grid .my-car__id{ min-width:0; }
.my-car__top--grid .my-car__title{ overflow-wrap:anywhere; }
.my-entry-strip{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1e7a46;
  border:1px solid #cfe9d5; background:#f4fbf6; border-radius:8px; padding:var(--my-strip-pad) calc(var(--my-strip-pad) + 8px); margin:0 0 var(--my-strip-below); }
.my-entry-rule{ border:0; border-top:1px solid var(--home-border, #d0d5db); margin:var(--my-rule-gap) 0; opacity:1; }
@media (max-width: 640px){
  .my-car__top--grid{ grid-template-columns:1fr; }
}
/* Private cell, column 3: "Add another Citroën" (operator, 2026-10-04) */
.my-cell3{ grid-template-columns:auto 1fr auto; }
.my-cell3__add{ white-space:nowrap; }
@media (max-width: 640px){ .my-cell3{ grid-template-columns:1fr; } .my-cell3__add{ width:100%; } }
/* The three cells share one grid: a fixed tag column, so every cell's text starts at the same line; the button at the
   right (operator, 2026-10-04). */
.my-wrap{ --my-cell-tag-w:82px; --my-cell-btn-w:210px; --my-cell-tag-w--label:"Cells: tag column width"; --my-cell-btn-w--label:"Cells: button column width"; }
/* all three cells share one set of columns: tag | text | button, every button the same width (operator, 2026-10-04) */
.my-cell3{ grid-template-columns:var(--my-cell-tag-w) 1fr var(--my-cell-btn-w); }
.my-cell3 .my-cell3__add{ justify-self:stretch; }
.my-private-tag--stack{ text-align:center; line-height:1.25; padding-top:.3rem; padding-bottom:.3rem; }
.my-cell3 .my-private-tag{ justify-self:start; white-space:nowrap; }
.my-cell3__add{ justify-self:end; }
@media (max-width: 640px){ .my-cell3{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .my-cell3{ grid-template-columns:1fr; } }
/* Entry selector and action bar on the update and photo pages (operator, 2026-10-04): the my Citroën green cell; one card
   per car, the current one outlined; the bar at the foot. Named and labelled for the Live tuner. */
.my-wrap{ --my-switch-pad:12px; --my-switch-gap:10px; --my-switch-thumb-w:72px; --my-bar-pad:12px; --my-bar-gap:12px;
  --my-switch-pad--label:"Selector: cell padding"; --my-switch-gap--label:"Selector: gap between car cards"; --my-switch-thumb-w--label:"Selector: car thumbnail width";
  --my-bar-pad--label:"Action bar: padding"; --my-bar-gap--label:"Action bar: gap between buttons"; }
.my-switch{ border:1px solid #cfe9d5; background:#f4fbf6; border-radius:10px; padding:var(--my-switch-pad) calc(var(--my-switch-pad) + 4px); margin:0 0 var(--my-block-gap); }
.my-switch__title{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1e7a46; }
.my-switch__cards{ display:flex; flex-wrap:wrap; gap:var(--my-switch-gap); }
.my-switch__card{ display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; background:#fff; border:1px solid #d0d5db; border-radius:8px; color:#1b1b1b; text-decoration:none; }
.my-switch__card:hover{ opacity:.8; }
.my-switch__card.is-current{ border:2px solid #1e7a46; padding:5px 11px 5px 5px; cursor:default; }
.my-switch__card.is-current:hover{ opacity:1; }
.my-switch__thumb{ display:block; width:var(--my-switch-thumb-w); aspect-ratio:4/3; object-fit:cover; border-radius:5px; background:#f1f2f4; }
.my-switch__thumb--standin{ object-fit:contain; background:#fff; }
.my-switch__text{ display:flex; flex-direction:column; line-height:1.25; }
.my-switch__name{ font-weight:700; font-size:14px; }
.my-switch__num{ font-size:12px; color:#5a6772; }
.my-switch__ask .my-notice{ margin:12px 0 0; }
.my-switch__ask-buttons{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.my-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--my-bar-gap); border:1px solid #cfe9d5; background:#f4fbf6; border-radius:10px; padding:var(--my-bar-pad) calc(var(--my-bar-pad) + 4px); }
.my-bar .my-save__msg{ flex-basis:100%; }
.my-bar .my-save__msg:empty{ display:none; }
.my-bar__saved{ color:#1e7a46; font-weight:600; }
@media (max-width: 640px){ .my-switch__card{ flex:1 1 100%; } .my-bar .my-btn{ width:100%; } }
/* inside a button (inline-flex) the space before the green place name collapses: "Back to my Citroëns" keeps it this way */
.my-btn .my-place{ margin-left:.28em; }
/* Update and photo pages: the form, the intro text and the photo area were capped at fixed widths (720 / 640 / 720px)
   narrower than the column; now they fill it by default, each a labelled tuner value (operator, 2026-10-05). */
.my-wrap{ --my-form-w:1200px; --my-intro-w:1200px; --my-photos-w:1200px;
  --my-form-w--label:"Update page: form width (max)"; --my-intro-w--label:"Update/photo pages: intro text width (max)"; --my-photos-w--label:"Photo page: photo area width (max)"; }
.my-wrap .my-form{ max-width:var(--my-form-w); }
.my-wrap .my-intro{ max-width:var(--my-intro-w); }
.my-wrap .my-photos{ max-width:var(--my-photos-w); }
.my-save .my-bar{ flex:1 1 100%; }   /* the action bar spans the column like the cells above it */
/* Option B (operator, 2026-10-05): an error report held on the page until the foot button; the bar's running count */
/* a held report: a full-width two-cell row under its field - the label cell on a contrasting green, aligned with the
   rows' label column (operator, 2026-10-05) */
.my-held{ grid-column:1 / -1; display:grid; grid-template-columns:var(--my-row-label-w) 1fr; margin-top:8px; border:1px solid #1e7a46; border-radius:8px; overflow:hidden; }
.my-held__label{ background:#1e7a46; color:#fff; font-weight:700; padding:10px 12px; }
.my-held__body{ background:#f4fbf6; padding:10px 14px; }
.my-held__text{ margin:0; color:#1b1b1b; }
.my-held__when{ margin:4px 0 0; font-size:13px; color:#5a6772; }
.my-held__when .my-link{ font-size:13px; }
.my-leave-ask .my-notice{ margin:0 0 12px; }
@media (max-width: 640px){ .my-held{ grid-template-columns:1fr; } }
.my-bar__count{ color:#1e7a46; font-weight:600; font-size:14px; }
.my-bar__count:empty{ display:none; }
.my-outcomes .my-notice + .my-notice{ margin-top:8px; }
/* The leave prompt floats at the top of the screen, over the page (operator, 2026-10-05): the action-bar look */
body.my-page{ --my-leave-top:12px; --my-leave-top--label:"Leave prompt: distance from the top"; }
.my-leave{ position:fixed; top:var(--my-leave-top); left:50%; transform:translateX(-50%); z-index:2000; width:min(820px, calc(100% - 32px)); box-sizing:border-box;
  border:1px solid #1e7a46; background:#f4fbf6; border-radius:10px; padding:12px 16px; box-shadow:0 10px 30px rgba(21,37,54,.22); }
.my-leave__text{ margin:0 0 10px; font-weight:600; color:#1b1b1b; }
.my-leave__buttons{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width: 640px){ .my-leave__buttons .my-btn{ width:100%; } }
/* Photo page (operator, 2026-10-05): the two places side by side, alike - photo 1 and photo 2 (or the box to add it);
   short buttons on one row with a help line under them. Named and labelled for the Live tuner. */
.my-wrap{ --my-ph-box-w:340px; --my-ph-gap:16px; --my-ph-help-size:12.5px;
  --my-ph-box-w--label:"Photo page: photo box width"; --my-ph-gap--label:"Photo page: gap between the two boxes"; --my-ph-help-size--label:"Photo page: help line text size"; }
.my-photos{ display:grid; grid-template-columns:repeat(2, minmax(0, var(--my-ph-box-w))); gap:var(--my-ph-gap); align-items:stretch; }
.my-photos .cr-slots__status, .my-photos .cr-photo-msg, .my-photos .my-photo-confirm{ grid-column:1 / -1; }
.my-photos .cr-slots{ display:contents; }
.my-photos .cr-photo-card{ width:auto; }
.my-photos .cr-photo-drop, .my-photos .my-photo-empty{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.6rem; border:1.5px dashed #c9d1d9; border-radius:10px; padding:.7rem; background:#fafbfc; box-sizing:border-box; min-height:220px; }
.my-photos .cr-photo-drop__text{ flex:none; justify-content:center; align-items:center; text-align:center; border-radius:8px; background:#f1f2f4; padding:1rem; aspect-ratio:4/3; }
.my-photos .my-photo-empty{ background:transparent; }
.my-photos .cr-photo-card__actions{ flex-wrap:nowrap; gap:8px; }
.my-photos .cr-photo-card__actions .my-btn{ min-height:34px; padding:0 12px; font-size:13px; }
.my-photos .cr-photo-card__help{ margin:.35rem 0 0; font-size:var(--my-ph-help-size); color:var(--my-muted); line-height:1.35; }
@media (max-width: 640px){ .my-photos{ grid-template-columns:1fr; } .my-photos .my-photo-empty{ display:none; } .my-photos .cr-photo-card__actions .my-btn{ width:auto; } }
/* The photo being published: one notice over the photo itself (operator, 2026-10-05) */
.my-photos .my-ph-pending{ position:relative; border-radius:8px; overflow:hidden; }
.my-photos .my-ph-pending .cr-photo-card__img, .my-photos .my-ph-pending .cr-photo-card__nopreview{ display:block; }
.my-ph-pending__veil{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px;
  text-align:center; color:#fff; background:rgba(21,37,54,.62); font-size:14px; line-height:1.35; }
.my-ph-pending__veil strong{ font-size:17px; }
.my-ph-pending__small{ font-size:12.5px; opacity:.9; max-width:250px; }
.my-ph-pending__dot{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:my-spin 1s linear infinite; margin-bottom:4px; }
@keyframes my-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .my-ph-pending__dot{ animation:none; } }
.my-photos .cr-photo-card.is-pending .cr-photo-card__actions{ display:none; }
/* Photo-page confirmations (operator, 2026-10-05): the accent bar (style A), inside the photo it concerns */
.my-ok-ic{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#1e7a46; color:#fff; font-size:13px; font-weight:700; flex:none; }
.my-ok-ic.is-error{ background:#a12a2a; }
.my-photos .cr-photo-msg.my-msg-a{ display:flex; gap:10px; align-items:center; margin:.4rem 0 0; padding:10px 14px; background:#fff; border:1px solid #d0d5db; border-left:5px solid #1e7a46; border-radius:8px; font-size:15px; color:#1b1b1b; }
.my-photos .cr-photo-msg.my-msg-a strong{ color:#1e7a46; }
.my-photos .cr-photo-msg.my-msg-a.is-error{ border-left-color:#a12a2a; }
.my-photos .cr-photo-msg.my-msg-a.is-error strong{ color:#a12a2a; }
.my-ph-notebox{ position:relative; }
.my-photos .cr-photo-msg.my-ph-note{ position:absolute; left:50%; bottom:33%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); margin:0; padding:8px 14px; font-size:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.22); transition:opacity .5s ease; }
.my-photos .cr-photo-msg.my-ph-note.is-gone{ opacity:0; }
/* WP7 remainder: discarding a private draft (two-step confirm in place) */
.my-discard { margin-top: .5rem; }
.my-discard__q { margin: 0 0 .5rem; font-size: .9rem; }
.my-discard__btns { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Phones (operator, 2026-10-09): the green page name moves into the Private cell - top left, the size of the Private pill -
   with the pill on the same line at the right; the header's name and its byline are not shown (the byline on every view;
   the name wherever the Private cell carries it). Wider screens unchanged. Named values for the Live Localhost Tuner. */
.my-cell3__name{ display:none; }
.my-cell3{ --my-cell-name-size:15px; --my-cell-name-size--label:"Private cell: 'my Citroën' size (phones)"; }   /* 11.5 -> 15, tuned by the operator 2026-10-09 */
/* the car title on phones (tuned by the operator 2026-10-09: 13px at 360px; wider screens keep 21.6px) */
@media (max-width: 640px){ .my-wrap{ --my-car-title-size:13px; } }
/* the Private cell's line 'This is a private page...' on phones (operator, 2026-10-09: tunable); wider screens unchanged (15px) */
@media (max-width: 640px){ .my-cell3{ --my-standing-size:15px; --my-standing-size--label:"Private cell: text size (phones)"; } .my-cell3 .my-standing{ font-size:var(--my-standing-size); } }
@media (max-width: 640px){
  .my-header-label__by{ display:none; }
  body.my-page:has(.my-cell3 .my-cell3__name) #my-header-label{ display:none; }
  .my-cell3{ grid-template-columns:1fr auto; }
  .my-cell3__name{ display:block; grid-column:1; grid-row:1; color:#1e7a46; font-weight:700; font-size:var(--my-cell-name-size); align-self:center; }
  .my-cell3 .my-private-tag{ grid-column:2; grid-row:1; justify-self:end; }
  .my-cell3 .my-standing, .my-cell3 .my-cell3__add{ grid-column:1 / -1; }
}

/* Phones (operator, 2026-10-09): one header line - [symbol] Citroën Registry | my Citroën (green). The separate name line under the
   header and the name in the Private cell give way to it; the byline stays hidden. Wider screens unchanged. Named values for the
   Live Localhost Tuner (title, divider and name each adjustable). */
.my-hdr-inline{ display:none; }
@media (max-width: 640px){
  body.my-page{ --my-hdr-title-size:16px; --my-hdr-name-size:16px; --my-hdr-sep-size:16px; --my-hdr-sep-space:7px; --my-hdr-name-nudge:0px;
    --my-hdr-title-size--label:"Phone header: 'Citroën Registry' size (my Citroën pages)"; --my-hdr-name-size--label:"Phone header: 'my Citroën' size";
    --my-hdr-sep-size--label:"Phone header: divider size"; --my-hdr-sep-space--label:"Phone header: space each side of the divider";
    --my-hdr-name-nudge--label:"Phone header: 'my Citroën' nudge down"; }
  body.my-page .citreg-header-title h2{ font-size:var(--my-hdr-title-size); }
  body.my-page .my-hdr-inline{ display:inline; white-space:nowrap; }
  .my-hdr-inline__sep{ display:inline-block; margin:0 var(--my-hdr-sep-space); font-size:var(--my-hdr-sep-size); font-weight:300; color:#9aa4ae; }
  .my-hdr-inline__name{ display:inline-block; font-size:var(--my-hdr-name-size); color:#1e7a46; font-weight:600; position:relative; top:var(--my-hdr-name-nudge); }
  body.my-page #my-header-label{ display:none !important; }
  .my-cell3__name{ display:none !important; }
  .my-cell3 .my-private-tag{ justify-self:start; }
}

/* Sign-in page on phones (operator, 2026-10-09, tuned at 355px; wider screens keep the values above): heading 28 -> 16px, space below
   it 25 -> 20, below the message box 20 -> 0, above the instruction line 16 -> 14, below it 24 -> 20 -> 12, between label and field 5 -> 10;
   'Check your inbox' 11.9 -> 13px; space above the heading a named value (0).
   'Your email address' is not shown on phones (kept for screen readers - the field keeps its name). 'Check your inbox...' size is a
   named value (phones 11.9px, as before). Admin 2026-10-22: the instruction line is gone (the box holds the context line), so
   the space below the box, 0 -> 12px, now separates it from the field (and from the "Sent" reply). */
@media (max-width: 640px){
  .my-signin{ --my-si-title-size:16px; --my-si-title-below:20px; --my-si-notice-below:12px; --my-si-intro-above:14px; --my-si-intro-below:10px; --my-si-label-below:4px;
    --my-si-foot-size:13px; --my-si-foot-size--label:"Sign-in: 'Check your inbox...' size (phones)";
    --my-si-title-above:5px; --my-si-title-above--label:"Sign-in: space above heading (phones)";
    --my-si-row-gap:12px; --my-si-row-gap--label:"Sign-in: space between email box and button (phones)"; }
  .my-signin .my-signin__title{ margin-top:var(--my-si-title-above); }
  .my-signin .my-signin__foot{ font-size:var(--my-si-foot-size); }
  .my-signin .my-signin__form label{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* Phones (operator, 2026-10-09): the space between the header and the page's first line ('Manage your my Citroën...' and every other
   /my/ view) - the shared layout's 28px top margin, now a named phone value for /my/. Wider screens keep 28px. */
@media (max-width: 640px){
  body.my-page{ --my-top-gap:15px; --my-top-gap--label:"my Citroën: space below the header (phones)"; }   /* 28 -> 15, operator 2026-10-09 */
  body.my-page .gallery-rail-flex{ margin-top:var(--my-top-gap); }
}
/* Local P2: an accepted file-drag target, without altering the shared intake widget. */
.my-photos .my-drop-active { outline: 3px solid #167a90; outline-offset: 3px; }

/* SP-50 (Cars for Sale): the sale line on each car block, and the car's sale page (#/car/<n>/sale). The For Sale green is
   my Citroën's own (#1e7a46), as in the public pages' forsale.css. */
.my-sale-line{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:.2rem; padding-top:.7rem; border-top:1px dashed #e5e7eb; }
.my-sale-line .my-muted{ flex-basis:auto; flex:1; min-width:12em; }
.my-sale-line__text{ flex:1; min-width:12em; font-weight:600; font-size:.9rem; }
.my-sale-tag{ display:inline-block; background:#1e7a46; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.my-sale-line--draft .my-sale-tag, .my-sale-line--submitted .my-sale-tag{ background:#6b7280; }
.my-sale-status__btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:.5rem; }
.my-sale-price{ display:flex; gap:8px; }
.my-sale-price select{ width:auto; flex:0 0 auto; }
.my-sale-price input{ flex:1; min-width:0; }
.my-row--text .my-row__hint--wide{ grid-column:1 / -1; }
.my-sale-count{ grid-column:1 / -1; justify-self:end; font-size:.78rem; color:var(--my-muted); }
.my-sale-photos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:.6rem 0 .8rem; }
.my-sale-photo{ margin:0; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; background:#fff; }
.my-sale-photo.is-main{ border-color:#1e7a46; box-shadow:0 0 0 1px #1e7a46; }
.my-sale-photo img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.my-sale-photo figcaption{ display:flex; justify-content:space-between; gap:6px; padding:6px 8px; font-size:.82rem; }
.my-sale-photo__main{ color:#1e7a46; font-weight:700; }
.my-sale-photo-status{ font-size:.88rem; margin:.5rem 0 0; }
.my-sale-photo-status.is-error{ color:#b42318; }
.my-sale-attest{ display:flex; gap:10px; align-items:flex-start; margin:0 0 .6rem; padding:.7rem .9rem; border:1px solid #cfe9d5; background:#f4fbf6; border-radius:8px; font-weight:600; cursor:pointer; }
.my-sale-attest input{ margin-top:.2rem; }
.my-sale-confirm p{ margin:.6rem 0 0; font-weight:600; }
.my-sale-discard{ margin:.4rem 0 0; }
.my-sale-h2{ font-size:1.05rem; margin:1.8rem 0 .6rem; }
.my-sale-inquiry{ border:1px solid #e5e7eb; border-radius:8px; padding:.7rem .9rem; margin:0 0 .7rem; background:#fff; }
.my-sale-inquiry--past{ background:#f7f8f9; }   /* R6.3 (operator, 2026-10-19): earlier listing periods read as records; text unchanged */
.my-sale-inquiry__who{ margin:0 0 .35rem; font-size:.9rem; overflow-wrap:anywhere; }
.my-sale-inquiry__msg{ margin:0; white-space:pre-line; }
.my-sale-period{ display:flex; align-items:center; gap:10px; margin:.9rem 0 .5rem; font-size:.8rem; font-weight:600; color:#5a6772; }   /* R4: one dated divider per listing period */
.my-sale-period::after{ content:""; flex:1 1 auto; border-top:1px solid #e5e7eb; }
.my-sale-period--current{ color:#1e7a46; }
.my-sale-past__list{ margin:0; padding-left:1.1rem; color:var(--my-muted); font-size:.9rem; }
@media (max-width:640px){ .my-sale-photos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* SP-50 Post a Listing (#sell): one compact block per car, the action beside it */
.my-sell-car{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; }
.my-sell-car .my-car__top{ flex:1 1 320px; }
.my-sell-car__act{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.my-sell-other{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
@media (max-width:640px){ .my-sell-car__act{ align-items:stretch; width:100%; } }
/* a failure's way forward (operator, 2026-10-16): Try again | Back to myCitroën */
.my-recovery{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; }
/* SP-50 (Cars for Sale) - the For Sale pages of myCitroën. No Forum sidebar on them; they use the whole content width. */
body.my-fs-page .gallery-rail{ display:none; }
body.my-fs-page .gallery-rail-flex{ gap:0; }
/* tuned on the For Sale draft by the operator (2026-10-17): the white frame wider, the trail closer to what follows -
   on the For Sale pages of myCitroën only (the sitewide standard elsewhere is unchanged) */
body.my-fs-page{ --home-clamp:1521px; }
body.my-fs-page .cr-trail{ --cr-trail-below:2px; }   /* no rail, no gap before it (the rail's values do not act here) */
body.my-fs-page .gallery-rail-flex > main{ max-width:none; } /* without the sidebar the For Sale pages use the whole content width (954px) */
/* The page's own parts on top of forsale.css (the sale page's layout, photographs and panel - the same classes and named
   values; see forsale.css). Every vital size and space is a named value for the Live Localhost Tuner, labelled
   "Chapter: what" - the tuner lists them under the page's chapters, in page order (operator, 2026-10-17). */

/* ---- the band (operator, 2026-10-17): "For Sale:" | the state | the next step, highlighted ---- */
.my-fs-band{ --myfs-band-pad-top:14px; --myfs-band-pad-bottom:14px; --myfs-band-pad-left:14px; --myfs-band-pad-right:14px; --myfs-band-gap:2.7em; --myfs-pill-gap:8px; --myfs-pill-gap--label:"Band: gap between the two pills"; --myfs-band-size:16px; --myfs-band-below:18px; --myfs-band-row-gap:4px;
  --myfs-band-row-gap--label:"Band: space between the pills and the text line (when it wraps)";
  --myfs-band-pad-top--label:"Band: inner space top"; --myfs-band-pad-bottom--label:"Band: inner space bottom";
  --myfs-band-pad-left--label:"Band: inner space left"; --myfs-band-pad-right--label:"Band: inner space right";
  --myfs-band-gap--label:"Band: space between its three parts"; --myfs-band-size--label:"Band: text size"; --myfs-band-below--label:"Band: space below";
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--myfs-band-gap); row-gap:var(--myfs-band-row-gap); margin:0 0 var(--myfs-band-below);
  padding:var(--myfs-band-pad-top) var(--myfs-band-pad-right) var(--myfs-band-pad-bottom) var(--myfs-band-pad-left); border:1px solid #cfe9d5; border-left:4px solid #1e7a46; background:#f4fbf6; border-radius:8px; color:#152536; font-size:var(--myfs-band-size); }
.my-fs-band{ align-items:center; }
.my-fs-band .fs-tag{ font-size:var(--fs-tag-size, .7rem); }
.my-fs-band__pills{ display:inline-flex; align-items:center; gap:var(--myfs-pill-gap, 8px); }
.my-fs-band__pill{ border-radius:4px; font-size:var(--fs-tag-size, .7rem); padding:2px 8px; }   /* the For Sale tag's corner radius on both pills (operator, 2026-10-17) */
.my-fs-band__state{ font-weight:400; }
.my-fs-band__next{ color:#1e7a46; font-weight:700; margin-left:auto; text-align:right; }   /* the next step on the right */

/* ---- the overview on the For Sale track (one car): the sale page's format ---- */
.my-fst{ --fs-panel-w:340px; --fs-gap:28px; --myfst-btn-gap:8px; --myfst-btns-above:1rem;
  --fs-panel-w--label:"Layout: sale panel width"; --fs-gap--label:"Layout: photos ↔ panel gap";
  --myfst-btn-gap--label:"Sale panel: gap between the entry buttons"; --myfst-btns-above--label:"Sale panel: space above the entry buttons"; }
.my-fst-tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.my-fst-tags .my-private-tag{ font-size:var(--fs-tag-size, .7rem); padding:2px 8px; }
.my-fst-later{ color:#a9b3be !important; font-style:italic; font-weight:400 !important; font-size:1.1rem !important; }
.my-fst-actions{ display:grid; gap:var(--myfst-btn-gap); margin:var(--myfst-btns-above) 0 0; }
.my-fst-actions .my-btn{ text-align:center; margin:0; }
.my-fst-nophoto{ display:flex; align-items:center; justify-content:center; color:#5a6772; }
.my-fst-rest > .my-cell3:first-child, .my-fst-rest > .fs-h2:first-child{ margin-top:0; }
@media (min-width:641px){   /* the narrower left column: tag | text, the button under the text (phones keep their one column) */
  .my-fst-rest .my-cell3{ grid-template-columns:auto 1fr; }
  .my-fst-rest .my-cell3 .my-cell3__add{ grid-column:2; justify-self:start; } }

/* ---- the listing, completed in place (operator, 2026-10-17): the sale page with the seller's parts typed in place;
   unfilled parts read as the page's own [ grey ] placeholders, a fine solid border marks what can be typed (R6.1, 2026-10-19; was dashed) ---- */
.my-fse{ --fs-panel-w:340px; --fs-gap:28px; --myfse-line:#b9c6bf;
  --myfse-in-pad-y:4px; --myfse-in-pad-x:8px; --myfse-price-size:1rem; --myfse-cur-size:.7rem; --myfse-loc-size:1rem; --myfse-loc-below:.9rem;
  --myfse-attest-size:.9rem; --myfse-attest-below:.7rem; --myfse-btn-gap:.5rem; --myfse-acts-below:1rem;
  --myfse-view-size:.95rem; --myfse-life-size:.85rem; --myfse-life-gap:6px;
  --myfse-ctl-size:.72rem; --myfse-ctl-gap:6px; --myfse-add-size:.72rem; --myfse-note-size:.95rem; --myfse-note-weight:500; --myfse-regnote-size:1rem; --myfse-regnote-above:.75rem; --myfse-desc-size:1rem; --myfse-line2-size:1rem; --myfse-desc-minh:10em; --myfse-msgs-above:2rem;
  --fs-panel-w--label:"Layout: sale panel width"; --fs-gap--label:"Layout: photos ↔ panel gap";
  --myfse-in-pad-y--label:"Sale panel: typed fields, inner space top and bottom"; --myfse-in-pad-x--label:"Sale panel: typed fields, inner space left and right";
  --myfse-price-size--label:"Sale panel: price size"; --myfse-cur-size--label:"Sale panel: currency size";
  --myfse-loc-size--label:"Sale panel: location size"; --myfse-loc-below--label:"Sale panel: space below the location";
  --myfse-attest-size--label:"Sale panel: 'I own this Citroën' text size"; --myfse-attest-below--label:"Sale panel: space below 'I own this Citroën'";
  --myfse-btn-gap--label:"Sale panel: space between the buttons"; --myfse-acts-below--label:"Sale panel: space below the buttons";
  --myfse-view-size--label:"Sale panel: 'View the listing' size (live)"; --myfse-life-size--label:"Sale panel: Keep listed / Sold / Withdraw size (live)";
  --myfse-life-gap--label:"Sale panel: gap between Keep listed / Sold / Withdraw";
  --myfse-ctl-size--label:"Photos: Main / Make main / Remove size"; --myfse-ctl-gap--label:"Photos: space between Make main and Remove"; --myfse-add-size--label:"Photos: 'Add photos' tile text size"; --myfse-note-size--label:"Photos: 'Photos: n of 7' note size"; --myfse-note-weight--label:"Photos: 'Photos: n of 7' note weight"; --myfse-regnote-size--label:"Photos: Registry-photos notice text size"; --myfse-regnote-above--label:"Photos: space above the Registry-photos notice";
  --myfse-desc-size--label:"Description: text size"; --myfse-desc-minh--label:"Description: box height"; --myfse-line2-size--label:"Sale panel: second title line size (body, VIN)";
  --myfse-msgs-above--label:"Contact History: space above it and earlier listings"; }
.my-fse, .my-fst{ --fs-title-above:0; }   /* the pills moved to the band (2026-10-17): the title opens the sale panel */
.my-fse-in{ display:block; width:100%; box-sizing:border-box; font:inherit; color:inherit; background:transparent; border:1px solid var(--myfse-line); border-radius:6px; padding:var(--myfse-in-pad-y) var(--myfse-in-pad-x); }
.my-fse-in:hover{ border-color:#1e7a46; }
.my-fse-in:focus{ outline:none; border-style:solid; border-color:#1e7a46; background:#f4fbf6; }
.my-fse-in::placeholder{ color:#a9b3be; font-style:italic; font-weight:400; opacity:1; }
.my-fse-desc::placeholder{ font-style:normal; font-weight:700; }   /* "Description" in grey bold (operator, 2026-10-17) */
.my-fse-line2{ margin:0 0 .6rem; color:#152536; font-size:var(--myfse-line2-size); }
.my-fse-price{ display:flex; align-items:center; gap:6px; margin:0 0 .35rem; }
.my-fse-cur{ font:inherit; font-size:var(--myfse-cur-size); font-weight:600; color:#1e7a46; border:1px solid var(--myfse-line); border-radius:6px; padding:6px 4px; background:transparent; }
.my-fse-price__in{ font-size:var(--myfse-price-size); font-weight:700; color:#1e7a46; padding-top:2px; padding-bottom:2px; }
.my-fse-loc{ color:#5a6772; font-size:var(--myfse-loc-size); font-weight:600; }   /* semibold, as the public sale page shows it (R2) */
/* R1 (operator, 2026-10-19): "Location" with a small pin, immediately before the input, on the same row */
.my-fse-locrow{ display:flex; align-items:center; gap:8px; margin:0 0 var(--myfse-loc-below); }
.my-fse-locrow .my-fse-loc{ flex:1 1 auto; min-width:0; }
.my-fse-loclabel{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font-size:.78rem; font-weight:600; color:#5a6772; cursor:pointer; }
.my-fse-loclabel__icon{ width:14px; height:14px; fill:#1e7a46; }
.my-fse-acts{ margin:0 0 var(--myfse-acts-below); }
.my-fse-acts .my-sale-attest{ margin:0 0 var(--myfse-attest-below); font-size:var(--myfse-attest-size); }
.my-sale-retain{ margin:0 0 var(--myfse-attest-below); color:#5a6772; font-size:14px; line-height:1.45; }   /* the photo sentence before Publish (SP-50 decision register D2) */
.my-fse-publish{ width:100%; border:0; font:inherit; font-weight:600; cursor:pointer; margin:0 0 var(--myfse-btn-gap); }
.my-fse-publish:disabled{ opacity:.6; cursor:default; }
.my-fse-save{ display:block; width:100%; box-sizing:border-box; text-align:center; margin:0 0 var(--myfse-btn-gap); }
.my-fse-view{ font-weight:600; font-size:var(--myfse-view-size); color:#1e7a46; border-color:#1e7a46; }   /* a button (operator, 2026-10-17), green outline */
.my-fse-view:hover{ color:#1e7a46; }
.my-fse-life{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px var(--myfse-life-gap); }
/* Gate 1 Part 6C (operator, 2026-10-18): compact buttons, one row where they fit, told apart by colour */
.my-fse-life .my-fse-life__btn{ min-height:30px; padding:0 10px; font-size:var(--myfse-life-size); font-weight:600; white-space:nowrap; background:#fff; }
.my-fse-life__btn--keep{ color:#1e7a46; border-color:#1e7a46; }
.my-fse-life__btn--keep:hover:not(:disabled){ background:#f4fbf6; }
.my-fse-life__btn--sold{ color:#fff; background:#152536 !important; border-color:#152536; }
.my-fse-life__btn--sold:hover:not(:disabled){ background:#2b3d50 !important; }
.my-fse-life__btn--withdraw{ color:#8a5a5a; border-color:#c9b3b3; }
.my-fse-life__btn--withdraw:hover:not(:disabled){ background:#fbf5f5; }
@media (max-width: 640px){ .my-fse-life .my-fse-life__btn{ flex:1 1 auto; } }
/* the sold state (Gate 1 Part 6C, second pass): the car's Registry photo ghosted, the editor closed until Relist */
.my-fse-ghost .fs-main__img{ opacity:.45; }
.my-fse-sold__last{ margin:0 0 .6rem; }
.my-fse-acts .my-save__msg{ margin:.3rem 0 0; font-size:.9rem; }
.my-fse-empty{ display:block; position:relative; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.my-fse-empty .fs-main__img{ opacity:.45; }
.my-fse-empty__label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-style:italic; color:#152536; }
.my-fse-empty:hover .fs-main__img{ opacity:.6; }
.my-fse-thumb__ctl{ display:flex; flex-direction:column; align-items:center; gap:var(--myfse-ctl-gap); font-size:var(--myfse-ctl-size); margin-top:3px; line-height:1.25; }   /* one control per line: they fit the narrowest thumbnail */
.my-fse-thumb__ctl .my-link{ font-size:var(--myfse-ctl-size); }
.my-fse-thumb__make{ color:#1e7a46 !important; }                       /* Make main: green */
.my-fse-thumb__rm{ color:#8a5a5a !important; text-decoration-style:dotted; }   /* Remove: muted, apart - and it asks first (operator, 2026-10-17) */
.my-fse-thumb__ask{ color:#152536; font-weight:600; }
.my-fse-thumb__yn{ display:flex; gap:10px; }
.my-fse-slot{ display:block; width:100%; aspect-ratio:4/3; box-sizing:border-box; border:1.5px dashed #d6dde3; border-radius:6px; background:transparent; cursor:pointer; padding:0; }   /* a free slot (of 7) */
.my-fse-slot:hover{ border-color:var(--myfse-line); background:#f8fbf9; }
.my-fse-thumb__main{ color:#1e7a46; font-weight:700; }
.my-fse-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; aspect-ratio:4/3; box-sizing:border-box;
  border:2px dashed var(--myfse-line); border-radius:6px; background:#fff; color:#1e7a46; font:inherit; font-size:var(--myfse-add-size); font-weight:600; cursor:pointer; line-height:1.1; }
.my-fse-add span:first-child{ font-size:1.4rem; font-weight:400; }
.my-fse-add:hover{ border-color:#1e7a46; background:#f4fbf6; }
.my-fse-photo-note{ font-size:var(--myfse-note-size); font-weight:var(--myfse-note-weight); color:#5a6772; margin:.5rem 0 0; }   /* larger and weightier (operator, 2026-10-18) */
.my-notice.my-fse-regnote{ font-size:var(--myfse-regnote-size); margin:var(--myfse-regnote-above) 0 0; }   /* D5 in the light-blue information cell: neutral context (R5, operator, 2026-10-19) */
.my-fse-descsec .my-fse-desc{ font-size:var(--myfse-desc-size); line-height:1.6; min-height:var(--myfse-desc-minh); resize:vertical; }
.my-fse .my-sale-inquiries, .my-fse .my-sale-past{ margin-top:var(--myfse-msgs-above); }

/* ---- SP-50 PS1 (Admin, 2026-10-23): the listing page ready for the Live Localhost Tuner on phones. Phone copies of the
   page's values, at the values they already have there (nothing moves until tuned): a change made in F12 device mode
   acts on phones only, wider screens keep theirs. Labels end "(phones)"; the tuner badges them Phone. ---- */
@media (max-width: 640px){
  body.my-fs-page .my-wrap{ --myfsm-gutter:16px; --myfsm-gutter--label:"Page: side margins (phones)"; padding-left:var(--myfsm-gutter); padding-right:var(--myfsm-gutter); }
  body.my-fs-page .cr-trail{ --cr-trail-below:2px; --cr-trail-below--label:"Breadcrumb: space below (phones)"; }
  .my-fs-band{ --myfs-band-pad-top:14px; --myfs-band-pad-bottom:14px; --myfs-band-pad-left:27px; --myfs-band-pad-right:27px; --myfs-band-gap:2.7em; --myfs-pill-gap:19px; --myfs-band-size:13px; --myfs-band-below:18px; --myfs-band-row-gap:13px;   /* Admin tuner values, 2026-10-23 (rounds 1-2) */
    --myfs-band-pad-top--label:"Band: inner space top (phones)"; --myfs-band-pad-bottom--label:"Band: inner space bottom (phones)";
    --myfs-band-pad-left--label:"Band: inner space left (phones)"; --myfs-band-pad-right--label:"Band: inner space right (phones)";
    --myfs-band-gap--label:"Band: space between its three parts (phones)"; --myfs-pill-gap--label:"Band: gap between the two pills (phones)";
    --myfs-band-size--label:"Band: text size (phones)"; --myfs-band-row-gap--label:"Band: space between the pills and the text line (phones)"; --myfs-band-below--label:"Band: space below (phones)"; }
  .my-fse{ --fs-gap:28px; --fs-thumbs-gap:8px; --fs-thumbs-above:10px; --fs-panel-pad-y:14px; --fs-panel-pad-x:16px;
    --fs-title-size:1.305rem; --fs-listed-size:.8rem; --fs-h2-size:1.15rem; --fs-desc-above:2rem;
    --myfse-in-pad-y:4px; --myfse-in-pad-x:8px; --myfse-price-size:1rem; --myfse-cur-size:.7rem; --myfse-loc-size:1rem; --myfse-loc-below:.9rem;
    --myfse-attest-size:.9rem; --myfse-attest-below:.7rem; --myfse-btn-gap:.5rem; --myfse-acts-below:1rem;
    --myfse-view-size:.95rem; --myfse-life-size:.85rem; --myfse-life-gap:6px;
    --myfse-ctl-size:.72rem; --myfse-ctl-gap:6px; --myfse-add-size:.72rem; --myfse-note-size:.95rem; --myfse-regnote-size:1rem; --myfse-regnote-above:.75rem;
    --myfse-desc-size:1rem; --myfse-line2-size:1rem; --myfse-desc-minh:10em; --myfse-msgs-above:2rem;
    --fs-gap--label:"Layout: space between photos, sale panel and description (phones)";
    --fs-thumbs-gap--label:"Photos: gap between thumbnails (phones)"; --fs-thumbs-above--label:"Photos: space above the thumbnails (phones)";
    --fs-panel-pad-y--label:"Sale panel: inner space top and bottom (phones)"; --fs-panel-pad-x--label:"Sale panel: inner space left and right (phones)";
    --fs-title-size--label:"Sale panel: car title size (phones)"; --fs-listed-size--label:"Sale panel: footnote size (phones)";
    --fs-h2-size--label:"Description / Contact History: heading size (phones)"; --fs-desc-above--label:"Description: space above (phones)";
    --myfse-in-pad-y--label:"Sale panel: typed fields, inner space top and bottom (phones)"; --myfse-in-pad-x--label:"Sale panel: typed fields, inner space left and right (phones)";
    --myfse-price-size--label:"Sale panel: price size (phones)"; --myfse-cur-size--label:"Sale panel: currency size (phones)";
    --myfse-loc-size--label:"Sale panel: location size (phones)"; --myfse-loc-below--label:"Sale panel: space below the location (phones)";
    --myfse-attest-size--label:"Sale panel: 'I own this Citroën' text size (phones)"; --myfse-attest-below--label:"Sale panel: space below 'I own this Citroën' (phones)";
    --myfse-btn-gap--label:"Sale panel: space between the buttons (phones)"; --myfse-acts-below--label:"Sale panel: space below the buttons (phones)";
    --myfse-view-size--label:"Sale panel: 'View the listing' size (live, phones)"; --myfse-life-size--label:"Sale panel: Keep listed / Sold / Withdraw size (live, phones)";
    --myfse-life-gap--label:"Sale panel: gap between Keep listed / Sold / Withdraw (phones)";
    --myfse-ctl-size--label:"Photos: Main / Make main / Remove size (phones)"; --myfse-ctl-gap--label:"Photos: space between Make main and Remove (phones)";
    --myfse-add-size--label:"Photos: 'Add photos' tile text size (phones)"; --myfse-note-size--label:"Photos: 'Photos: n of 7' note size (phones)";
    --myfse-regnote-size--label:"Photos: Registry-photos notice text size (phones)"; --myfse-regnote-above--label:"Photos: space above the Registry-photos notice (phones)";
    --myfse-desc-size--label:"Description: text size (phones)"; --myfse-desc-minh--label:"Description: box height (phones)";
    --myfse-line2-size--label:"Sale panel: second title line size (body, VIN) (phones)"; --myfse-msgs-above--label:"Contact History: space above it and earlier listings (phones)"; }
}