/* =============================================================================
   Custom kit — request form, tracker and quote.
   Built from the existing EKIT tokens so it matches the rest of the site.
   ========================================================================== */

.ck-form-wrap { max-width: 860px; margin-inline: auto; }
.ck-card { padding: clamp(14px, 2.2vw, 22px); }

/* ---------------------------------------------------------- jump rail --- */
/* The whole request is one page, so this is a shortcut list rather than a
   wizard stepper: it scrolls, and the highlight follows the scroll position. */
.ck-steps {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0 0 18px; padding: 0;
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: var(--header-h); z-index: 3;
  background: var(--bg); padding-block: 8px;
}
.ck-steps::-webkit-scrollbar { display: none; }
.ck-step {
  color: var(--text-subtle); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.ck-step__link {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  color: inherit; text-decoration: none;
}
.ck-step__link:hover { background: var(--bg-muted); color: var(--text); }
.ck-step__dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--bg-muted); color: var(--text-muted);
}
.ck-step__link:hover .ck-step__dot { background: var(--border); }
.ck-step.is-current { color: var(--brand); }
.ck-step.is-current .ck-step__link,
.ck-step.is-current .ck-step__link:hover { background: var(--brand-soft); color: var(--brand); }
.ck-step.is-current .ck-step__dot { background: var(--brand); color: #fff; }

@media (max-width: 700px) {
  /* Only the section in view keeps its label on a phone, so the rail fits. */
  .ck-step__label { display: none; }
  .ck-step.is-current .ck-step__label { display: inline; }
}

/* --------------------------------------------------------- sections ----- */
/* One card, seven sections. The rule and the numbered marker are what keep a
   long single page readable now that there is no step counter doing it. */
.ck-sec { position: relative; padding-left: 42px; }
.ck-sec + .ck-sec {
  margin-top: clamp(24px, 3.2vw, 34px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--border-soft);
}
/* Anchored scrolling lands the heading clear of the header and the rail. */
.ck-sec { scroll-margin-top: calc(var(--header-h) + 68px); }
.ck-sec__no {
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 750;
  background: var(--brand-soft); color: var(--brand);
}
.ck-sec + .ck-sec .ck-sec__no { top: calc(clamp(22px, 3vw, 30px) + 1px); }
.ck-sec__body > .ck-sub:last-child,
.ck-sec__body > .form-grid:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .ck-sec__no { width: 22px; height: 22px; font-size: 11px; }
}
/* Phones: the number sits beside the section heading only, and every field
   underneath uses the full card width. A 34-42px left gutter kept for the
   number squeezed the inputs into a narrow column. */
@media (max-width: 600px) {
  .ck-sec { padding-left: 0; }
  .ck-sec__body > .ck-h:first-child { padding-left: 32px; min-height: 22px; }
  /* Sinhala headings are taller; keep the number level with the text. */
  [data-ck-lang="si"] .ck-sec__no { top: 8px; }
  [data-ck-lang="si"] .ck-sec + .ck-sec .ck-sec__no { top: calc(clamp(22px, 3vw, 30px) + 8px); }
}

/* ---------------------------------------------------------- form bits ---- */
.ck-h { font-size: clamp(17px, 2.2vw, 21px); font-weight: 720; margin: 0 0 4px; }
.ck-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; line-height: 1.55; }
.ck-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-soft);
}
@media (max-width: 520px) {
  .ck-nav .btn { flex: 1; justify-content: center; }
}

.ck-unknown {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 14px; margin-bottom: 16px; cursor: pointer;
}
.ck-unknown:hover { border-color: var(--brand-300); background: var(--brand-soft); }

/* component rows */
.ck-comp {
  border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 12px; margin-bottom: 10px; background: var(--surface);
}
.ck-comp__main { display: flex; gap: 8px; align-items: center; }
.ck-comp__main .input { flex: 1; min-width: 0; }
.ck-comp__qty { width: 84px; flex: none !important; }
.ck-comp__note { margin-top: 8px; font-size: 13px; }

.ck-guides { display: grid; gap: 10px; }

/* ----------------------------------------------------------- summary ----- */
.ck-sum dl { margin: 0 0 18px; }
.ck-sum__h {
  font-size: 13px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-subtle); margin: 20px 0 8px;
}
.ck-sum__h:first-child { margin-top: 0; }
.ck-sum__row {
  display: grid; grid-template-columns: 190px 1fr; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px;
}
.ck-sum__row dt { color: var(--text-muted); }
.ck-sum__row dd { margin: 0; white-space: pre-wrap; }
.ck-sum__list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
@media (max-width: 620px) {
  .ck-sum__row { grid-template-columns: 1fr; gap: 2px; }
  .ck-sum__row dt { font-size: 12px; }
}

/* ------------------------------------------------------------- done ------ */
.ck-done { text-align: center; padding: clamp(22px, 4.5vw, 38px) 20px; }
.ck-done__ic {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--success-bg); color: var(--success);
}
.ck-done__h { font-size: clamp(19px, 3vw, 25px); font-weight: 750; margin: 0 0 8px; }
.ck-done__p { color: var(--text-muted); max-width: 48ch; margin: 0 auto; line-height: 1.6; }
.ck-done__ref {
  display: inline-block; margin-top: 22px; padding: 12px 24px;
  border: 1px dashed var(--border-strong); border-radius: 4px; background: var(--bg-muted);
}

/* -------------------------------------------------------- request list --- */
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ck-card-item {
  border: 1px solid var(--border); border-radius: 5px; padding: 14px;
  background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.ck-card-item__ref { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-subtle); }
.ck-card-item__title { font-size: 15.5px; font-weight: 700; margin: 0; }
.ck-card-item__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-soft);
}

/* -------------------------------------------------------------- quote ---- */
.ck-quote { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.ck-quote__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--brand-soft); border-bottom: 1px solid var(--border-soft);
}
.ck-quote__items { padding: 4px 16px; }
.ck-line {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border-soft);
}
.ck-line:last-child { border-bottom: 0; }
.ck-line__media {
  width: 46px; height: 46px; border-radius: 3px; flex: none; overflow: hidden;
  background: var(--bg-muted); display: grid; place-items: center; color: var(--text-subtle);
}
.ck-line__media img { width: 100%; height: 100%; object-fit: cover; }
.ck-quote__totals { margin: 0; padding: 14px 16px; background: var(--bg-muted); }
.ck-quote__note { padding: 0 16px 14px; margin: 0; }

/* --------------------------------------------------------- messages ------ */
.ck-msg { display: flex; gap: 10px; padding: 10px 0; }
.ck-msg__av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--bg-muted); color: var(--text-muted);
}
.ck-msg.is-staff .ck-msg__av { background: var(--brand-soft); color: var(--brand); }
.ck-msg__body { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.ck-msg__who { font-size: 12px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ck-msg__when { font-weight: 500; color: var(--text-subtle); }

/* ===================================================== admin surfaces ==== */
.ckadm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ckadm-stat {
  border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; background: var(--surface);
}
.ckadm-stat__n { font-size: 19px; font-weight: 750; line-height: 1.1; }
.ckadm-stat__l { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* product picker */
.ckadm-search { position: relative; }
.ckadm-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14); max-height: 300px; overflow-y: auto; padding: 4px;
}
.ckadm-result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 3px; padding: 9px 10px;
  cursor: pointer; text-align: left; font-family: inherit;
}
.ckadm-result:hover { background: var(--bg-muted); }

/* quote lines */
.ckadm-line {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.ckadm-line:last-child { border-bottom: 0; }
.ckadm-line__qty { width: 68px; flex: none; }
.ckadm-line__price { width: 100px; flex: none; }
.ckadm-line__sum { min-width: 84px; text-align: right; }

.ckadm-total {
  margin-top: 16px; padding: 12px 14px;
  background: var(--bg-muted); border-radius: 4px;
}

.ckadm-quote {
  border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 12px; margin-bottom: 10px;
}

@media (max-width: 640px) {
  .ckadm-line { flex-wrap: wrap; }
  .ckadm-line__sum { min-width: 0; }
}

/* ============================================ language + draft notice ==== */
.ck-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}

.ck-draft-note {
  flex: 1; min-width: 240px; margin: 0;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 13px; border-radius: 4px;
  background: var(--brand-soft); border: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: 12.75px; line-height: 1.5;
}
.ck-draft-note svg { flex: none; margin-top: 1px; color: var(--brand); }

/* Clear-draft button + language switch, grouped so they stay together as one
   unit when the topbar wraps on a narrow screen. */
.ck-topbar__actions {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none; flex-wrap: wrap;
}

/* Destructive, and it only appears once there is a draft to lose — so it is
   coloured on hover rather than shouting in red the whole time. */
.ck-clear { color: var(--text-muted); }
.ck-clear:hover { color: var(--danger); background: var(--danger-bg); }

/* Segmented ENG / සිං switch. */
.ck-lang {
  display: inline-flex; flex: none; padding: 3px; gap: 2px;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 999px;
}
.ck-lang__btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.4;
  transition: background .15s, color .15s;
}
.ck-lang__btn:hover { color: var(--text-strong); }
.ck-lang__btn.is-on { background: var(--brand); color: #fff; }
.ck-lang__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Sinhala needs a little more line height to stay legible at small sizes. */
[data-ck-lang="si"] .ck-step__label,
[data-ck-lang="si"] .ck-draft-note { line-height: 1.65; }

/* ==================================================== signed-out preview == */
/* Step 1 renders for a guest so they can see the wizard, but nothing in it
   can be filled in — only the "Sign In to Continue" CTA works. */
.ck-draft-note--guest { background: var(--warning-bg, var(--bg-muted)); }
.ck-draft-note--guest svg { color: var(--warning, var(--text-strong)); }

.ck-card.is-guest .input,
.ck-card.is-guest .select,
.ck-card.is-guest .textarea { background: var(--bg-muted); cursor: not-allowed; }

/* A card whose actions are closed because the kit has been paid for. */
.card.is-locked { background: var(--bg-muted); }
.card.is-locked .btn[disabled] { opacity: .55; }

/* ======================================= component photos (optional) ===== */
/* One picture per component, at three points in the flow: the customer picks
   it on the request form, the admin sees it beside the requested part, and
   the admin's own photo rides along on each quoted line. Every one of them is
   optional, so each rule below has to look deliberate when there is no image
   rather than leaving a ragged gap. */

/* ---- request form: picker under each component row ---- */
.ck-comp__photo {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; flex-wrap: wrap;
}
.ck-comp__thumb {
  width: 44px; height: 44px; flex: none;
  object-fit: cover; border-radius: 3px;
  border: 1px solid var(--border-soft); background: var(--bg-muted);
}
.ck-comp__fname {
  max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-muted);
}
.ck-comp__hint { flex: 1 1 180px; min-width: 0; }

/* ---- summary lists that carry a thumbnail ---- */
.ck-sum__list--media { list-style: none; padding-left: 0; }
.ck-compitem {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
}
.ck-compitem__img {
  width: 40px; height: 40px; flex: none;
  border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
}
.ck-compitem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-compitem__img--ph { color: var(--text-subtle); }
a.ck-compitem__img { transition: border-color .15s ease; }
a.ck-compitem__img:hover { border-color: var(--brand); }

/* ---- admin quote builder: photo slot on each draft line ---- */
.ckadm-line__img {
  width: 40px; height: 40px; flex: none; cursor: pointer;
  border-radius: 3px; overflow: hidden; position: relative;
  border: 1px dashed var(--border); background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-subtle); transition: border-color .15s ease, color .15s ease;
}
.ckadm-line__img:hover { border-color: var(--brand); color: var(--brand); }
.ckadm-line__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* An image already chosen is settled, so it loses the "drop something here"
   dashed edge. */
.ckadm-line__img:has(img) { border-style: solid; }
.ckadm-line__img.is-loading { opacity: .5; pointer-events: none; }

/* Contact-page thread: the same bubbles, boxed so a long exchange scrolls
   inside its card instead of pushing the page down. */
.ck-msg-thread { max-height: 320px; overflow-y: auto; }

/* An input whose value comes from the account rather than the keyboard. It
   still reads as a filled field — just not an editable one. */
.input.is-locked {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: default;
}

/* ------------------------------------------------- component suggest ---- */
/* One panel, moved between inputs and anchored on <body> so it is never
   clipped by a card's overflow or trapped under a sticky element. */
.cs-panel {
  position: absolute; z-index: 60;
  max-height: 268px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  padding: 4px;
}
.cs-opt {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 4px;
  background: none; color: var(--text); font: inherit; font-size: 13.5px;
  cursor: pointer;
}
.cs-opt:hover, .cs-opt.is-active { background: var(--brand-soft); color: var(--brand-700, var(--brand)); }
.cs-opt mark { background: none; color: var(--brand); font-weight: 700; }

/* Only the suggestions that are real catalogue components carry a photo, so
   only those become a two-column row. `contain`, not `cover`: a cropped
   resistor is not a recognisable resistor. */
.cs-opt--img {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.cs-opt__img {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg-sunken);
}

/* A catalogue component the admin has not photographed yet. Holds the column
   so the row still lines up and still reads as a real part. */
.cs-opt__img--none {
  border: 1px dashed var(--border);
  background: transparent;
}

/* Only rendered when two components in the same result list share a name, to
   say which is which. Quiet by design: it is a disambiguator, not a label the
   customer is meant to read every time. */
.cs-opt__no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
}

/* --------------------------------------------- components-only form ----- */
.cr-row {
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr) 92px auto;
  align-items: start;
  padding: 12px; margin-bottom: 10px;
  border: 1px solid var(--border-soft); border-radius: 6px; background: var(--surface);
}
.cr-row__no {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-subtle);
}
.cr-row__photo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-thumb {
  width: 42px; height: 42px; border-radius: 4px; object-fit: cover;
  border: 1px solid var(--border-soft); flex: none;
}
.cr-row .field__error { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .cr-row { grid-template-columns: minmax(0, 1fr) 78px auto; }
}

/* ------------------------------------------------ per-component review -- */
/* The admin's verdict on one part, and the conversation about it. Shared by
   the customer's tracker and the admin's detail page so the two cannot drift
   into showing the same facts differently. */
.ck-review { display: grid; gap: 10px; }
.ck-review__item {
  border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 12px; background: var(--surface);
}
.ck-review__head { display: flex; align-items: flex-start; gap: 10px; }
.ck-review__img {
  width: 44px; height: 44px; border-radius: 4px; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--bg-muted); color: var(--text-subtle);
  border: 1px solid var(--border-soft);
}
.ck-review__img img { width: 100%; height: 100%; object-fit: cover; }
.ck-review__name { font-weight: 650; font-size: 14px; }
.ck-review__qty { color: var(--text-muted); font-size: 13px; }

.ck-avail {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ck-avail--pending { background: var(--bg-muted); color: var(--text-muted); }
.ck-avail--yes { background: var(--success-bg); color: var(--success); }
.ck-avail--no { background: var(--danger-bg); color: var(--danger); }

.ck-thread { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
.ck-thread__msg { display: flex; gap: 8px; padding: 6px 0; font-size: 13px; }
.ck-thread__who {
  flex: none; font-size: 10.5px; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; padding-top: 2px; width: 54px;
}
.ck-thread__msg--staff .ck-thread__who { color: var(--brand); }
.ck-thread__msg--you .ck-thread__who { color: var(--text-subtle); }
.ck-thread__body { white-space: pre-wrap; }
.ck-thread__form { display: flex; gap: 8px; margin-top: 8px; }
.ck-thread__form .input { flex: 1; min-width: 0; }

/* ------------------------------------------------------- flow chooser --- */
/* Two routes into the custom kit pipeline, asked before the customer starts
   filling anything in. Cards rather than a radio pair: the difference between
   the two is easiest to see, not to read. */
.ck-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck-pick__opt {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: inherit; font: inherit;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.ck-pick__opt:hover, .ck-pick__opt:focus-visible {
  border-color: var(--brand-300); box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
  transform: translateY(-2px); outline: none;
}
.ck-pick__opt:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring); }
/* Capped rather than left at the artwork's own aspect ratio, so the two cards
   sit side by side without the dialog running past the fold. `contain` on the
   artwork's own tint means nothing is cropped to achieve it. */
.ck-pick__img {
  width: 100%; height: 138px; display: block;
  object-fit: contain; background: var(--brand-50);
  border-bottom: 1px solid var(--border-soft);
}
.ck-pick__body { display: block; padding: 11px 13px 2px; }
.ck-pick__name { display: block; font-size: 14.5px; font-weight: 700; }
.ck-pick__desc {
  display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-muted);
}
.ck-pick__go {
  display: flex; align-items: center; gap: 5px;
  margin-top: auto; padding: 9px 13px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--brand);
}
.ck-pick__opt:hover .ck-pick__go { gap: 8px; }
.ck-pick__foot {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.5;
  color: var(--text-subtle); text-align: center;
}

@media (max-width: 620px) {
  .ck-pick { grid-template-columns: 1fr; gap: 12px; }
  /* Shorter still on a phone, where the two cards stack and the words are
     doing most of the work. */
  .ck-pick__img { height: 104px; }
}


/* --------------------------------------------------------------------------
   Phones.

   Lives here rather than in responsive.css because this stylesheet is loaded
   AFTER main.css on every page that uses it — a rule in responsive.css cannot
   outrank the `flex: none` a few hundred lines above, whatever the media
   query says.

   That `flex: none` is what pushed the topbar 13px off the edge of a 320px
   screen: the cluster already wraps internally, it just was not allowed to
   shrink far enough for the wrap to engage. The draft note's 240px floor is
   the same story.
   -------------------------------------------------------------------------- */
/* Phones and tablets: the preview / draft note gets a full row of its own and
   the switch button (plus the language switch) sits on the row below. Sharing
   a row squeezed the note into a one-word-per-line column on Request
   Components, which has no language switch to push the button down. */
@media (max-width: 1024px) {
  .ck-draft-note { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .ck-topbar { gap: 10px; }
  .ck-topbar__actions { flex: 1 1 auto; min-width: 0; }
  .ck-draft-note { min-width: 0; }
  /* On a 320px screen the long "Request a Full Project instead" label is
     allowed to wrap rather than push past the edge. */
  .ck-topbar__actions .btn { white-space: normal; text-align: center; }
}

/* ===================== bigger Sinhala, stronger controls ===================== */

/* Sinhala glyphs are visually smaller than Latin at the same size, so every
   piece of wizard text steps up when the page is in Sinhala. */
[data-ck-lang="si"] .ck-h { font-size: 1.7rem; line-height: 1.4; }
[data-ck-lang="si"] .ck-sub { font-size: 1.08rem; line-height: 1.7; }
[data-ck-lang="si"] .ck-card .field__label,
[data-ck-lang="si"] .ck-card .check__text { font-size: 1.06rem; line-height: 1.6; }
[data-ck-lang="si"] .ck-card .field__hint,
[data-ck-lang="si"] .ck-card .t-xs,
[data-ck-lang="si"] .ck-card .t-sm { font-size: 1rem; line-height: 1.6; }
[data-ck-lang="si"] .ck-card .input,
[data-ck-lang="si"] .ck-card .select,
[data-ck-lang="si"] .ck-card .textarea { font-size: 1.06rem !important; /* !important: stays above the 16px touch-screen floor in forms.css */ }
[data-ck-lang="si"] .ck-card .btn { font-size: 1.02rem; }
[data-ck-lang="si"] .ck-step__label { font-size: 1.05rem; }
[data-ck-lang="si"] .ck-draft-note { font-size: 1rem; }

/* ENG / සිං switch: bigger, and the active side is unmistakable. */
.ck-lang { padding: 4px; border: 2px solid var(--brand); background: #fff; box-shadow: 0 4px 14px -6px var(--brand); }
.ck-lang__btn { padding: 9px 20px; font-size: 16px; font-weight: 800; color: var(--brand-700); }
.ck-lang__btn[data-lang="si"] { font-size: 18px; }
.ck-lang__btn:hover { background: var(--brand-50); color: var(--brand-700); }
.ck-lang__btn.is-on { background: var(--brand); color: #fff; box-shadow: 0 3px 10px -3px var(--brand); }

/* "Request a Part List instead" / mode switch: larger text, solid amber so it
   stands out from the page. !important only to beat the inline style the
   button is written with. */
#ck-switch, #cr-switch {
  height: auto !important; padding: 10px 18px !important;
  font-size: 16px !important; font-weight: 800 !important;
  background: #facc15 !important; color: #422006 !important;
  border: 2px solid #ca8a04 !important;
  box-shadow: 0 4px 14px -6px #ca8a04;
}
#ck-switch:hover, #cr-switch:hover { background: #fde047 !important; transform: translateY(-1px); }
#ck-switch svg, #cr-switch svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .ck-topbar__actions { flex-wrap: wrap; }
  #ck-switch { font-size: 14px !important; padding: 8px 12px !important; }
  .ck-lang__btn { padding: 7px 14px; font-size: 14px; }
}

/* Toned down: the top-bar controls were oversized. */
#ck-switch { padding: 7px 14px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none; }
#ck-switch svg, #cr-switch svg { width: 15px; height: 15px; }
.ck-lang { padding: 3px; border-width: 1.5px; box-shadow: none; }
.ck-lang__btn { padding: 6px 15px; font-size: 13.5px; font-weight: 700; }
.ck-lang__btn[data-lang="si"] { font-size: 15px; }
.ck-lang__btn.is-on { box-shadow: none; }
@media (max-width: 640px) {
  #ck-switch { font-size: 13px !important; padding: 6px 10px !important; }
  .ck-lang__btn { padding: 5px 12px; font-size: 13px; }
}

/* Same solid-yellow highlight on the Part List page's switch. */
#cr-switch {
  height: auto !important; padding: 7px 14px !important;
  font-size: 14px !important; font-weight: 700 !important;
  background: #facc15 !important; color: #422006 !important;
  border: 2px solid #ca8a04 !important; box-shadow: none;
}
#cr-switch:hover { background: #fde047 !important; transform: translateY(-1px); }
#cr-switch svg { width: 15px; height: 15px; }
@media (max-width: 640px) { #cr-switch { font-size: 13px !important; padding: 6px 10px !important; } }
/* Its one-line label is 308px wide, which pushed a 320px screen 2px sideways.
   Let it wrap within the card instead (only on the smallest phones). */
#cr-switch { max-width: 100%; }
@media (max-width: 345px) { #cr-switch { white-space: normal; text-align: center; } }

/* Sign-in prompt at the top of the form card, for a signed-out visitor. */
.ck-guestbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: var(--sp-5);
  background: #fff7d6; border: 2px solid #facc15; border-radius: var(--r-lg);
  color: #422006;
}
.ck-guestbar > svg { flex: none; color: #a16207; }
.ck-guestbar__text { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.ck-guestbar__text strong { font-size: 1.05rem; font-weight: 800; }
.ck-guestbar__text span { font-size: .95rem; line-height: 1.55; color: #713f12; }
.ck-guestbar .btn { flex: none; }
[data-ck-lang="si"] .ck-guestbar__text strong { font-size: 1.25rem; }
[data-ck-lang="si"] .ck-guestbar__text span { font-size: 1.05rem; line-height: 1.7; }
:root[data-theme="dark"] .ck-guestbar { background: #422006; border-color: #ca8a04; color: #fef9c3; }
:root[data-theme="dark"] .ck-guestbar__text span { color: #fde68a; }

/* The sign-in box is English only, and just a title and a button — so it
   stays the same size when the page is in Sinhala. */
.ck-guestbar { align-items: center; }
[data-ck-lang="si"] .ck-guestbar__text strong { font-size: 1.05rem; }

/* Delete button on a message the viewer is allowed to delete. */
.ck-msg { position: relative; }
.ck-msg__del {
  flex: none; align-self: flex-start; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer;
  opacity: .6; transition: opacity .15s, background .15s, color .15s;
}
.ck-msg:hover .ck-msg__del, .ck-msg__del:focus-visible { opacity: 1; }
.ck-msg__del:hover { background: #fee2e2; color: #b91c1c; }

/* ENG / Sinhala switch in the "What do you need?" chooser's header
   (custom-kit.html chooseFlow). Compact, between the title and the close
   button. */
.modal__head .ck-lang--modal {
  flex: none; align-self: center; margin: 0 8px 0 auto;
  padding: 3px; border-width: 1.5px; box-shadow: none;
}
.modal__head .ck-lang--modal .ck-lang__btn { padding: 6px 12px; font-size: 13px; }
.modal__head .ck-lang--modal .ck-lang__btn[data-pick-lang="si"] { font-size: 15px; }
@media (max-width: 480px) {
  .modal__head .ck-lang--modal { margin-right: 4px; }
  .modal__head .ck-lang--modal .ck-lang__btn { padding: 5px 9px; font-size: 12px; }
  .modal__head .ck-lang--modal .ck-lang__btn[data-pick-lang="si"] { font-size: 14px; }
}