/* SP-54 (Car Comments), 2026-10-28: the comments section below the facts and the floating micro-menu at the top.
   Linked from car.php only. PS2 (operator, 2026-10-28): the panel of mockup C; every space is a named value for the Live
   Localhost Tuner (?tune=1), set to the operator's tuned values. */

.car-comments {
  --mc-above: 28px;          --mc-above--label: "Comments: space above the panel";
  --mc-pad-top: 16px;        --mc-pad-top--label: "Panel: top padding";
  --mc-pad-x: 14px;          --mc-pad-x--label: "Panel: side padding";
  --mc-title-below: 12px;    --mc-title-below--label: "Title: space below (to the divider)";
  --mc-divider-below: 20px;  --mc-divider-below--label: "Divider: space below (to the first comment)";
  --mc-list-x: 6px;          --mc-list-x--label: "Comment list: side inset";
  --mc-comment-pad-y: 15px;  --mc-comment-pad-y--label: "Comment: top/bottom padding";
  --mc-comment-pad-x: 14px;  --mc-comment-pad-x--label: "Comment: side padding";
  --mc-comment-between: 0px; --mc-comment-between--label: "Comments: space between";
  --mc-avatar: 34px;         --mc-avatar--label: "Avatar: size";
  --mc-avatar-gap: 29px;     --mc-avatar-gap--label: "Avatar: space to the post";
  --mc-head-below: 7px;      --mc-head-below--label: "Name/date line: space below";
  --mc-compose-above: 16px;  --mc-compose-above--label: "Writing area: space above";
  --mc-toolbar-below: 6px;   --mc-toolbar-below--label: "Toolbar: space below";
  --mc-textarea-h: 96px;     --mc-textarea-h--label: "Text box: height";
  --mc-bar-above: 16px;      --mc-bar-above--label: "Footer bar: space above";
  --mc-bar-pad-y: 10px;      --mc-bar-pad-y--label: "Footer bar: top/bottom padding";
  --mc-bar-gap: 12px;        --mc-bar-gap--label: "Footer bar: space between note and buttons";
  --mc-below: 8px;           --mc-below--label: "Comments: space below the panel";
  margin: var(--mc-above) 0 var(--mc-below);
}
.car-comments [hidden] { display: none !important; }

/* the panel */
.car-comments__panel { padding: var(--mc-pad-top) 0 0; border: 1px solid #d8dee4; border-radius: 8px; overflow: hidden; }
.car-comments__title { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--mc-title-below); padding: 0 var(--mc-pad-x);
  font-size: 17px; font-weight: 700; color: #152536; }
.car-comments__title svg { color: #4b5d6b; }
.car-comments__count { font-weight: 600; color: #4b5d6b; }
/* every instruction in the page note's voice ("This page updates automatically…", gallery_shell.css .car-page-note) */
.car-comments__note { font-size: .82rem; font-weight: 400; line-height: 1.45; color: #6b7280; }
p.car-comments__note { margin: 0; padding: 0 var(--mc-pad-x); }
.car-comments__divider { margin: 0 var(--mc-pad-x) var(--mc-divider-below); border: 0; border-top: 1px solid #e3e7eb; }

/* comments */
.car-comments__list { list-style: none; margin: 0; padding: 0 var(--mc-list-x); display: flex; flex-direction: column; gap: var(--mc-comment-between); }
.car-comment { display: flex; gap: var(--mc-avatar-gap); padding: var(--mc-comment-pad-y) var(--mc-comment-pad-x); border-radius: 6px; scroll-margin-top: 16px; }
/* operator, 2026-10-28: alternating background (the no-photo cell's grey) sets the posts apart */
.car-comment:nth-child(even) { background: #f1f2f4; }
.car-comment__avatar { flex: none; width: var(--mc-avatar); height: var(--mc-avatar); border-radius: 50%; object-fit: cover; }
.car-comment__avatar--guest { background: #d8dee4; }
.car-comment__avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.car-comment__main { flex: 1; min-width: 0; }
.car-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: var(--mc-head-below); }
.car-comment__author { font-weight: 700; font-size: 14.5px; color: #152536; }
.car-comment__date { font-size: .82rem; color: #6b7280; text-decoration: none; }
.car-comment__date:hover { text-decoration: underline; }
.car-comment__pending { font-size: .82rem; font-style: italic; color: #8a5a00; }
.car-comment__body { font-size: 15px; line-height: 1.6; color: #222; overflow-wrap: anywhere; }
.car-comment__body > :first-child { margin-top: 0; }
.car-comment__body > :last-child { margin-bottom: 0; }
.car-comment__body p { margin: 0 0 10px; }
.car-comment__body img { max-width: 100%; height: auto; border-radius: 3px; }
.car-comment__body blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid #d8dee4; color: #4b5d6b; }
.car-comment__body pre { overflow-x: auto; padding: 8px 10px; background: #f4f6f8; border-radius: 3px; font-size: 13px; }
.car-comment__body a { color: #1f5f99; }
.car-comments__empty { padding-top: 2px !important; }

/* writing */
.car-comments__compose { display: flex; gap: var(--mc-avatar-gap); margin-top: var(--mc-compose-above); padding: 0 calc(var(--mc-list-x) + var(--mc-comment-pad-x)); }
.car-comments__compose-main { flex: 1; min-width: 0; }
.car-comments__toolbar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--mc-toolbar-below); }
.car-comments__tool { min-width: 30px; height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent;
  font: 600 12.5px/1 system-ui, sans-serif; color: #4b5d6b; cursor: pointer; }
.car-comments__tool:hover { background: #e7eaee; color: #152536; }
.car-comments__tool--b { font-weight: 800; }
.car-comments__tool--i { font-style: italic; font-family: Georgia, serif; font-size: 14px; }
.car-comments__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.car-comments__compose textarea { display: block; width: 100%; box-sizing: border-box; min-height: var(--mc-textarea-h); padding: 9px 10px;
  font: inherit; font-size: 15px; line-height: 1.5; color: #222; border: 1px solid #b9c2cb; border-radius: 4px; resize: vertical; }
.car-comments__compose textarea:focus { outline: 2px solid #f2c230; outline-offset: 1px; border-color: #8a96a3; }

/* the footer bar: the sentence with the Forum link left; status, "Posting as" + the one button right (PS4, option A) */
.car-comments__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--mc-bar-gap);
  margin-top: var(--mc-bar-above); padding: var(--mc-bar-pad-y) var(--mc-pad-x); background: #f6f7f8; border-top: 1px solid #e3e7eb; scroll-margin-top: 16px; }
.car-comments__bar p.car-comments__say { padding: 0; }
.car-comments__say a { color: #1f5f99; font-weight: 600; text-decoration: none; }
.car-comments__say a:hover { text-decoration: underline; }
.car-comments__actions, .car-comments__guest, .car-comments__member { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px var(--mc-bar-gap); }
.car-comments__actions { margin-left: auto; }
.car-comments__status { font-size: .82rem; color: #4b5d6b; }
.car-comments__status:empty { display: none; }
.car-comments__status.is-error { color: #a6192e; }

/* narrow phones: the avatar gap gives way to the text (a separate value, so the tuned desktop gap stays) */
@media (max-width: 420px) {
  .car-comments { --mc-avatar-gap: 14px; --mc-avatar-gap--label: "Avatar: space to the post (phones)"; }
}

/* the button in Kandahar Grey (AC 133) instead of the site's yellow; the red symbol block stays (operator, 2026-10-28:
   #C2C3B3). Only one chevron button per area. This section only: the site's
   default .cr-btn is unchanged. */
.cr-btn--kandahar { background: #c2c3b3; }
.cr-btn--kandahar:hover { background: #b1b2a1; }
.cr-btn--kandahar[disabled] { opacity: .6; cursor: default; }

/* Floating micro-menu (on trial): zero height in the flow, so it takes no room; sticks near the top while scrolling */
.car-micro { position: sticky; top: 10px; z-index: 30; height: 0; display: flex; justify-content: flex-end; }
.car-micro.is-away { visibility: hidden; }
.car-micro__btn { position: relative; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; height: 34px;
  padding: 0 12px; border-radius: 17px; background: rgba(21, 37, 54, .88); color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.car-micro__btn:hover, .car-micro__btn[aria-expanded="true"] { background: #152536; }
.car-micro__count:empty { display: none; }
.car-micro__menu { position: absolute; top: 48px; right: 8px; min-width: 210px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.car-micro__menu a { display: block; padding: 9px 14px; font-size: 14px; color: #152536; text-decoration: none; }
.car-micro__menu a:hover, .car-micro__menu a:focus { background: #f4f6f8; }
@media (max-width: 767px) {
  /* phones: the button only (the count and the icon), so it covers as little of the photo as possible */
  .car-micro__label { display: none; }
  .car-micro__btn { height: 32px; padding: 0 10px; }
}