.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 45em) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}

.request-title {
  padding-block-end: var(--space-m);
}
@media (min-width: 45em) {
  .request-title {
    border-bottom: 1px solid var(--neutral-border);
    max-width: 60%;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

/*SECTION - Comment box */
.comment-container {
  width: 100%;
}

/* The field's own appearance -- border, radius, fill, padding, type and its
   hover and focus states -- is now the shared form recipe in
   css-components.css's "shared form controls" section, so that this input and
   the new request page's text fields are one control. What stays here is the
   one page-specific thing about it: it is the collapsed state of the comment
   form, and the `.hidden` class is what the template swaps when the editor is
   meant to be showing instead.

   `.comment-show-container-content` went with the rest. It was a single
   --clr-neutral-160 colour declaration and the class appears in no template --
   checked across templates/, zero matches. */
.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .comment-fields,
.request-main .request-submit-comment {
  display: none;
}

.r_p .request-submit-comment {
  display: inline-block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

.request-main .comment-fields.shown {
  display: block;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

.request-main .comment-form-controls {
  margin-block-start: var(--space-s);
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 1rem;
}

.request-main input#mark_as_solved {
  display: none;
}

button.mark-as-solved {
  text-decoration: underline;
}

button.mark-as-solved:hover {
  background-color: var(--neutral-bg-soft);
  border: 1px solid var(--neutral-border);
  border-radius: 0.25rem;
  transition-duration: var(--transition-duration);
}

@media (min-width: 45em) {
  .request-main {
    flex: 0 0 60%;
    order: 0;
    min-width: 0;
  }
}

.comment {
  border-bottom: 1px solid var(--neutral-border);
}

.comment-wrapper,
.request-follow-up {
  padding: var(--space-s) 0;
  line-height: 1.5;
}

.satisfaction-box {
  padding: var(--space-s);
}

.comment-info,
.satisfaction-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* The one classed link on this page that was carrying css-reset.css's old hover
   tint as a hand-copy. The tint is gone for the reason set out at that rule --
   a background fill was never the hover under any version of this decision --
   and the theme's actual hover is restated here, because the class is what
   stops `a:not([class])` reaching this anchor. That hover is --brand-text as of
   2026-10-25, a deliberate deviation from Codex's underline thickening; the
   reasoning and Joy's instruction are on the `a:not([class])` rule in
   css-reset.css and are not repeated here. */
.satisfaction-link-change {
  text-decoration-skip-ink: auto;
  color: var(--hyperlink-link);
  cursor: pointer;
  transition: color var(--motion-duration-control) var(--ease-in-out);

  &:hover,
  &:active {
    color: var(--brand-text);
  }
}

.satisfaction-box input[type='radio'] ~ label {
  font-size: var(--step-1);
  font-weight: var(--font-bold);
  border: 1px solid var(--neutral-border-strong);
  border-radius: 0.25rem;
  letter-spacing: unset;
  margin-top: 1rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--neutral-bg-soft);
  color: var(--neutral-text);
  cursor: pointer;
}

.satisfaction-box input[type='radio'][value='good'] + label:hover {
  color: var(--success-text);
  border-color: var(--success-border);
  background-color: var(--success-bg);
  transition-duration: var(--transition-duration);
}

.satisfaction-box input[type='radio'][value='bad'] + label:hover {
  color: var(--critical-text);
  border-color: var(--critical-border);
  background-color: var(--critical-bg);
  transition-duration: var(--transition-duration);
}

.satisfaction-box input[type='radio'][checked='checked'][value='good'] + label,
#satisfaction_rating_underscore_good {
  color: var(--success-text);
  background-color: var(--success-bg);
  font-size: var(--step-1);
  font-weight: var(--font-bold);
  border: 1px solid var(--success-border);
  border-radius: 0.25rem;
  letter-spacing: unset;
  margin-top: 1rem;
  padding: 0.25rem 0.5rem;
}

.satisfaction-box input[type='radio'][checked='checked'][value='bad'] + label,
#satisfaction_rating_underscore_bad {
  color: var(--critical-text);
  background-color: var(--critical-bg);
  font-size: var(--step-1);
  font-weight: var(--font-bold);
  border: 1px solid var(--critical-border);
  border-radius: 0.25rem;
  letter-spacing: unset;
  margin-top: 1rem;
  padding: 0.25rem 0.5rem;
}

.satisfaction-rating-reason {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.satisfaction-box
  input[type='radio'][checked='checked'][value='bad']
  ~ div.satisfaction-reason {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--space-s) 0;
}

#satisfaction_rating_reason_code {
  border-radius: 0.25rem;
  padding: 0.5rem;
}

#new_satisfaction_rating
  > div.satisfaction-comment
  > div.form-field.text.optional.satisfaction_rating_comment {
  gap: 1rem;
}

#satisfaction_rating_comment {
  padding: 1rem;
}

.satisfaction-comment {
  margin-block-start: var(--space-s);
}

.satisfaction-cancel {
  font-size: var(--step-0) !important;
  margin: unset;
}

/* THE LAST THREE --clr-* REFERENCES IN THIS FILE ARE HERE AND THEY STAY, which
   is a decision rather than an oversight. This is the orange primary button,
   and it is orange because every primary button on the site is: css-buttons.css
   :3 sets `.btn { --bg: var(--clr-primary-100) }` and its own note at :28 says
   `.btn` has not been migrated to the token tier yet, deferring it to
   docs/brand-refresh/plan.md. Converting this one button to --brand-bg would
   make the satisfaction form the only place on the site with a Codex-coral
   primary action and the legacy coral everywhere else -- a worse state than
   either end. They convert when .btn does, in one change.
   Note this rule does not use .btn at all; it restyles Zendesk's own injected
   submit button, which is why it is a pile of !important. */
.satisfaction-submit {
  color: var(--clr-white) !important;
  background-color: var(--clr-primary-100) !important;
  font-size: var(--step-0) !important;
  font-weight: var(--font-bold);
  border-radius: 0.25rem;
  letter-spacing: unset;
  padding: 0.25rem 0.5rem;
  border: none !important;
  cursor: pointer;
  &:hover {
    background-color: var(--clr-primary-120) !important;
    transition-duration: var(--transition-duration);
  }
}

/* `.author-link a { text-decoration: none }` was here and is gone. Nothing in
   templates/ or assets/ carries `.author-link` -- the comment author's name is
   `{{#link 'user_profile'}}` with no class at all -- so it matched nothing. It
   is worth deleting now rather than leaving dead, because if it ever DID match
   it would strip the underline Codex requires on every hyperlink state. */

.zd-comment {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.collapsible-sidebar-title {
  padding-block-end: var(--space-m);
}

/* The inset is .request-sidebar's now -- see the long note on that rule. This
   used to carry `0 var(--space-s) var(--space-xs)`, which combined with
   .collapsible-sidebar's `10px 0` below and the panel's own `padding: 0` to
   make the sidebar's edges come from three rules at once.

   `flex-wrap: wrap` IS GONE AND THAT IS WHAT MAKES THE DIVIDERS FULL WIDTH.
   This is a column flex container, so wrapping lets it build more than one
   column -- and the cross size of a flex line is set by its widest item, not by
   the container. With every <dl> in one line and `align-items: stretch`
   defaulting, they all came out as wide as the widest row's *content*
   ("Requester Country", "#1503726") rather than as wide as the card, so each
   group's border-bottom stopped short of the right-hand padding. Joy spotted it
   in preview on 2026-10-24. Nothing here ever wanted a second column: the
   sidebar is a single stack.

   `gap` is gone with it, for the reason the .request-details note below gives --
   the space either side of a divider is now that rule's padding alone, rather
   than padding above and a gap below. */
.collapsible-sidebar-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Sidebar navigation that collapses on mobile.
   max-height is the collapsed height of the title row, and the toggle button
   below centres itself in it at `top: 22.5px`. Both are measured against this
   element, which is why zeroing its padding did not move the chevron. */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
@media (min-width: 45em) {
  .collapsible-sidebar {
    max-height: none;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 45em) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir='rtl'] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded='false'] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded='true'] .x-icon {
  display: inline-block;
}
/* The focus ring is owned sitewide by css-reset.css's *:focus-visible. This
   rule used to say `outline: none` plus a near-white 1px border, which left the
   one control that opens the mobile sidebar with no visible focus state at all.
   Per that block's own note, a component that wants a tighter ring pins the
   offset and nothing else. */
.collapsible-sidebar-toggle:focus-visible {
  --outline-offset: 2px;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 45em) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded='true'] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded='true'] .collapsible-sidebar-body {
  display: block;
}

/* ---- Ticket details ----
   Codex's `infolabel` (Figma node 18656:170683), which the library describes as
   "displays a non-interactive key-value pair" -- which is exactly what each of
   these rows is. Its one structural departure from what this page had is that
   IT STACKS: label above value with a 2px gap, where this <dl> was two columns
   (dt 40%, dd 55%). Joy chose the stacked form on 2026-10-24 having seen both,
   and it is the better fit here for a reason beyond matching the library -- half
   of these values are names, dates and country strings that wrapped to two or
   three lines inside a 55% column, so the rows were already uneven.

   WHICH IS WHY THE `font-size: 0` TRIO IS GONE rather than converted. Three
   declarations existed only to make a <dl> behave like a two-column grid: zero
   font size on the container collapsed the whitespace between the two
   inline-blocks, each child restated its own size to escape it, and
   `dd::after { content: '\a' }` forced the line break after each value. A
   stacked <dl> is what the element does unaided, so all three have nothing left
   to do. Leaving `font-size: 0` behind would be an active hazard, not dead
   weight -- anything added to this list later that forgets to restate its size
   renders at zero.

   --neutral-border-soft for the row rules, where commit 1 converted them to
   --neutral-border. The stronger value was right when this list sat directly on
   the page; now that it sits inside a bordered card (below), a divider as heavy
   as the card's own edge competes with it. Soft is also what Codex uses for
   `content/border/color` inside a surface. */
/* PADDING ON BOTH SIDES, SO EACH DIVIDER SITS CENTRED IN ITS OWN GAP. Joy,
   2026-10-24: "We need padding below the divider on this sidebar." It had
   padding above the line only, and what followed it was
   .collapsible-sidebar-body's `gap: 1rem` -- which the first row then cancelled
   half of, because `dt:first-of-type` zeroes its own top margin. Three rules
   deciding one gap, and the result read as a line pinned to the group beneath
   it.

   Stating it here instead means the space above a divider and the space below
   it are the same declaration and cannot drift apart. The first and last
   groups drop their outer half, so the card's own 16px inset is the only thing
   between the panel edge and the first label. */
.request-details {
  border-bottom: var(--border-width-regular) solid var(--neutral-border-soft);
  margin: 0;
  padding-block: var(--space-s);
}

.request-details:first-child {
  padding-block-start: 0;
}

.request-details:last-child {
  border: 0;
  padding-block-end: 0;
}

/* Label: --step--1 and --neutral-text-soft, against the value's --step-0 and
   --neutral-text. The contrast between the pair is what makes a stacked row
   readable -- with both at the same size and colour the label and the value
   below it read as two values. */
.request-details dt {
  margin-block-start: var(--space-s);
  color: var(--neutral-text-soft);
  font-size: var(--step--1);
  line-height: var(--leading-control);
}

/* The margin above separates one row from the row before it, so the first row
   of each group has nothing to be separated from -- the card's own padding does
   that job for the first group and .collapsible-sidebar-body's `gap: 1rem` for
   the rest. Without this the panel opened on 32px of dead space, because a
   flex item's first child's top margin collapses out to the item's own edge
   and then stops (flex item margins do not collapse further), landing on top
   of the card's 16px inset rather than inside it. */
.request-details dt:first-of-type {
  margin-block-start: 0;
}

/* 0.125rem rather than a token on purpose: Codex's gap here is `space/0-5`
   (2px) and this scale's smallest step is --space-3xs, which is 4px at its
   narrowest and 6px at its widest. Double the design's gap is enough to stop
   the pair reading as one unit. The margin-inline-start: 0 cancels the <dd>'s
   40px UA indent, which the inline-block layout above used to mask. */
.request-details dd {
  margin-block-start: 0.125rem;
  margin-inline-start: 0;
  color: var(--neutral-text);
  font-size: var(--step-0);
  line-height: var(--leading-body-0);
}

.request-details .request-collaborators {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.request-attachments {
  padding-block-end: 0;
}

/* ---- Attachment rows ----
   Joy, 2026-10-24: "We should probably give the uploaded attachments some
   attention as well. The InfoLabel component might provide some help".

   INFOLABEL IS NOT THE COMPONENT, and the reason is worth writing down because
   it is not obvious from looking at it: Codex documents infolabel as "a
   non-interactive key-value pair" (node 23619:1625), so the pattern has nothing
   to say about a row whose whole content is a link. The component that does is
   the `file` row inside fileUpload (node 13608:2710), and what it settles is
   the layout these rows had wrong -- a graphic in its own column, then a text
   block where the name sits over the size, the size at font/size/xs in
   neutral/text-soft. In the old markup the paperclip, the name and the size
   were three siblings in normal flow, so the size wrapped under the *icon*
   rather than under the name it belongs to.

   WHAT IS NOT TAKEN FROM IT is the surface: Codex's file row is a bordered
   card with a 48px circular icon, which is right for a 640px upload list and
   wrong inside a 35%-width sidebar next to filenames like "Screenshot
   2024-08-28 at 3.24.55 PM.png". The grid, the gaps and the type are the
   component's; the card is left off.

   The explicit row/column placement is load-bearing. Auto-placement would put
   the icon at 1/1, the link at 1/2 and the meta at 2/1 -- which is the bug,
   restated in grid.

   One rule for both lists on purpose: `.attachment-item` is also each
   comment's own attachment list (request_page.hbs:59), which had the same
   three loose siblings. */
.attachment-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem 0.5rem;
  align-items: start;
  margin-block-end: var(--space-2xs);
}

.attachment-item:first-child {
  margin-block-start: var(--space-2xs);
}

.attachment-item:last-child {
  margin-block-end: 0;
}

/* The 16px icon against a 1.4 line box: a nudge down puts it on the middle of
   the first line rather than on its cap height. `currentColor` is what the
   path already uses, so this is the one declaration that colours it. */
.attachment-icon {
  grid-area: 1 / 1;
  margin-block-start: 0.1875rem;
  color: var(--neutral-icon);
}

/* `anywhere` rather than `break-word`: these are machine-generated filenames
   with no break opportunities for most of their length, and in a sidebar this
   narrow the alternative is a link that overflows the card. */
.attachment-item > a {
  grid-area: 1 / 2;
  overflow-wrap: anywhere;
}

.attachment-item .attachment-meta {
  grid-area: 2 / 2;
  color: var(--neutral-text-soft);
  font-size: var(--step--1);
  line-height: var(--leading-control);
}

/* ---- The panel ----
   Codex's card surface. The component is `card-v2`; plain `card` is marked
   DEPRECATED in the library, which is worth recording because it is why the
   panel was hard to find at all. Declaration for declaration this is the
   *resting* state of .kb-section-card (css-components.css:2667) and
   .kb-update-card (:2948) -- --neutral-bg fill, one hairline of
   --neutral-border-soft, --radius-md, and the 0 2px 6px --shadow-regular drop.
   No hover, active, focus or transition rules follow it, because this surface
   is not a control: it is a static container that happens to share the cards'
   recipe. Those three files are the only places the recipe appears, so if
   Codex moves the card the grep is `--shadow-y-offset`.

   ONE TREATMENT AT BOTH BREAKPOINTS, where there used to be two. The panel was
   a 4px-radius outlined box under 45em and a filled --neutral-bg-soft block
   with no border at all above it. The fill was the legacy --clr-neutral-5
   before commit 1 and the split looks like it was about separating the sidebar
   from the page on a wide screen, which the card's border and shadow now do
   on their own -- and do without the sidebar reading as a different kind of
   thing on a phone than on a laptop.

   The padding is the card's, not the body's: --space-s is 16px at its
   narrowest, which is Codex's `space/4`. .collapsible-sidebar and
   .collapsible-sidebar-body above both had their own padding and both are now
   zeroed, so this is the single place the panel's inset is set. The toggle
   button's absolute `top` is measured against .collapsible-sidebar, which is
   inside this padding, so moving the inset out here left it correct. */
.request-sidebar {
  flex: 1 0 auto;
  order: 0;
  padding: var(--space-s);
  border: var(--border-width-regular) solid var(--neutral-border-soft);
  border-radius: var(--radius-md);
  background-color: var(--neutral-bg);
  box-shadow: 0 var(--shadow-y-offset) var(--shadow-blur) 0
    var(--shadow-regular);
}
@media (min-width: 45em) {
  .request-sidebar {
    font-size: var(--step-0);
    flex: 0 0 auto;
    width: 35%;
  }
}
.request-sidebar h2 {
  font-size: var(--step-1);
  font-weight: 600;
  position: relative;
}
@media (min-width: 45em) {
  .request-sidebar h2 {
    display: none;
  }
}

.comment-author,
.avatar {
  display: flex;
}

.comment-author {
  display: flex;
  gap: 0.5rem;
}
/* THE THREE CKEDITOR CHAINS THAT WERE HERE ARE GONE, not converted. Each was
   a six- or seven-step `#main-content > section.request-main > form >
   div.comment-container > div.comment-fields > div.ck.ck-reset.ck-editor.
   ck-rounded-corners > ...` selector, and between them they set the shell's
   border and radius, the editable area's padding and hairline, and the
   toolbar's type. All three are now class-based rules in css-components.css's
   "shared form controls" section, which the new request page's editor picks up
   from the same place -- it had four more chains of the same shape.

   Three reasons they could not stay as they were, beyond the duplication:
   the chains spell out a DOM that Zendesk and CKEditor generate, so a changed
   wrapper silently drops the styling; the `:focus-within` rule drew a 2px
   orange border that fought CKEditor's own `.ck-focused` border for the same
   edge; and `transition-duration` with no `transition-property` animated
   nothing in any of them. */

/* `.request-attachments dt, dd { width: 100% }` and
   `.request-attachments dd { margin: 10px 0 0 0 }` were both here and both went
   with the two-column layout above: the widths were overrides of the 40/55
   split, and the margin was the one row that needed its value pushed clear of
   its label. A stacked row is full-width by construction, and the generic dd
   rule sets the gap for every row including this one. */
.comment-form {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: var(--space-m) 0;
  flex-direction: column;
}

.comment-message {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.comment-avatar {
  position: relative;
  display: flex;
}

.avatar-img-request {
  display: inline-block;
  position: relative;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  min-width: 3rem;
}

/* The agent badge on a commenter's avatar. This was --clr-secondary-140, a
   legacy purple with no dark tier and no Codex role equivalent -- the refreshed
   palette has no purple outside the hyperlink-visited roles, and borrowing a
   link role for an icon would be the wrong semantics. Converted to the neutral
   icon role so it flips with the theme; that drops the purple, which is a
   visible change and is flagged for Joy rather than settled here. */
.icon-avatar {
  color: var(--neutral-icon-strong);
  border: 2px solid var(--neutral-bg);
  border-radius: 50%;
  bottom: -3px;
  background-color: var(--neutral-bg);
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  position: absolute;
  right: -7px;
  text-align: center;
  width: 1.5rem;
  z-index: 5;
}