/* =========================================================================
   rams.css: the RAMS engine's builder (rams-modal.js), in the modal the
   composer's Create RAMS opens and in the opp's Health & Safety tab. Moved
   out of CSS/main.css unchanged.

   Loaded on every page JUST BEFORE main.css (includes/head-tag-contents.php),
   not after it as a section file is: these rules sat inside main.css, ahead
   of the shared rules that follow them there (the tick picker's base sizes,
   .link-disguise and the rest), and where a rule here and a shared one tie,
   the shared one has always won. Loaded first, every one of those ties
   still goes the same way. The one rule that leaned on coming after
   main.css's own .mc-diary-box (the modal's narrower width) now names the
   shell it narrows, .mc-diary-box.mc-rams-box, so it wins from here.
   ========================================================================= */

/* The RAMS modal's Add a Site-Specific Concern hovers in the safety orange,
   as the composer's RAMS tool does (main.css, .mc-rams-btn:hover) */

/* The RAMS modal (ramsEngine): the diary's shell, narrower. The head
   floats, so every section after it clears it.
   Its colours are a safety palette (Nick, 08/10/2026: "a red, orange and
   yellow safety look"): red for what fails, safety orange the accent,
   amber yellow the washes, and a hazard stripe under the modal's head only
   (a structure is meant to be safe once built, so its card carries none). Every RAMS rule reads these; the AI buttons keep
   the house AI styling. */
.mc-rams, .ov-rams-packs {
  --rams-red: #c62828;
  --rams-orange: #ef6c00;
  --rams-yellow: #f9a825;
  --rams-ink: #8a3b00;
  --rams-wash: #fff8e8;
  --rams-line: #f6d9a8;
  --rams-stripe: repeating-linear-gradient(-45deg, #f9a825 0 10px, #ef6c00 10px 20px);
}
.mc-rams .avx-modal-head { --amh-accent: var(--rams-orange); position: relative; overflow: hidden; }
.mc-rams .avx-modal-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rams-stripe); }
/* the stripe is the modal's loader: while it waits on the server the
   pattern marches across (one repeat of the -45deg stripe is 28.28px wide) */
.mc-rams.is-busy .avx-modal-head::after { animation: rams-stripe-march .6s linear infinite; }
@keyframes rams-stripe-march { from { background-position: 0 0; } to { background-position: 28.28px 0; } }
@media (prefers-reduced-motion: reduce) { .mc-rams.is-busy .avx-modal-head::after { animation: none; } }
.mc-rams-msg > .fa-spinner { width: 16px; margin-right: 6px; color: var(--rams-orange); }
.mc-rams .avx-modal-head h3 { color: var(--rams-ink); }
/* The builder in the opp's Health & Safety tab: the pane head carries the
   hazard stripe, and the loader, as the modal's head does */
.mc-rams-pane .mc-rams-box { width: auto; }
.mc-rams-pane .mc-rams-phead { position: relative; padding-bottom: 14px; }
.mc-rams-pane .mc-rams-phead .mc-rams-sub { flex-basis: 100%; margin: 0; font-size: 12px; color: #7a8699; }
.mc-rams-pane .mc-rams-phead::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; border-radius: 3px; background: var(--rams-stripe); }
.mc-rams-pane.is-busy .mc-rams-phead::after { animation: rams-stripe-march .6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mc-rams-pane.is-busy .mc-rams-phead::after { animation: none; } }
.mc-rams-pane .ov-pane-head h3 { color: var(--rams-ink); }
.mc-rams-pane .ov-pane-head i.ov-pane-ico { color: var(--rams-orange); }
.ov-rams-packs { clear: both; margin-top: 18px; }
/* The RAMS Engine's control panel, in the modal and the opp's Health &
   Safety tab (Nick, 09/10/2026: "a dashboard style control panel ... with
   a diamond plate style look"); its one mark is the small version, the
   brass plaque being the Quote Drafting Engine's alone (Nick, 12/10/2026).
   The house instrument panel's pieces (.pn-rivet, .pn-label, .pn-version:
   the Quote Engine's) on tread plate steel: raised
   bars, alternate ones a quarter turn, over brushed steel. Generate sits in
   a hazard-striped surround, the RAMS safety palette's. */
.rp-panel {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 16px 18px 18px; border-radius: 10px; color: #2a2f35;
  background-color: #a9b0b7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f7f9fb'/><stop offset='1' stop-color='%238c949c'/></linearGradient></defs><g fill='%23000' fill-opacity='.32'><rect x='0' y='6.2' width='12' height='3.4' rx='1.7' transform='rotate(45 6 8)'/><rect x='14' y='20.2' width='12' height='3.4' rx='1.7' transform='rotate(45 20 22)'/><rect x='14' y='6.2' width='12' height='3.4' rx='1.7' transform='rotate(-45 20 8)'/><rect x='0' y='20.2' width='12' height='3.4' rx='1.7' transform='rotate(-45 6 22)'/></g><g fill='url(%23g)'><rect x='-0.6' y='5.4' width='12' height='3.4' rx='1.7' transform='rotate(45 5.4 7.2)'/><rect x='13.4' y='19.4' width='12' height='3.4' rx='1.7' transform='rotate(45 19.4 21.2)'/><rect x='13.4' y='5.4' width='12' height='3.4' rx='1.7' transform='rotate(-45 19.4 7.2)'/><rect x='-0.6' y='19.4' width='12' height='3.4' rx='1.7' transform='rotate(-45 5.4 21.2)'/></g></svg>"), linear-gradient(180deg, #c9ced3, #9aa2aa 55%, #8a929a);
  background-size: 28px 28px, 100% 100%;
  box-shadow: inset 0 0 0 1px #5f666d, inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(0,0,0,.28), 0 6px 18px rgba(20,24,28,.25);
  border: 1px solid #4d545b;
}
.rp-panel .pn-label { font-family: 'Cinzel', "Times New Roman", Times, serif; font-variant-numeric: lining-nums; }
.rp-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.rp-ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 200px; min-width: 0; }
.rp-ctl > .avx-tick, .rp-ctl > select { width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.rp-ctl-go { flex: 0 0 auto; align-items: flex-end; }
.rp-ctl-go.mc-rams-foot { justify-content: flex-end; }
.rp-ctl-go .mc-rams-warn { flex: none; max-width: 260px; margin: 0; padding: 6px 8px 6px 28px; border-radius: 6px; background: rgba(255,248,232,.92); }
/* Generate: a raised safety-orange button in a hazard-striped surround */
.rp-go { display: inline-block; padding: 5px; border-radius: 10px; background: var(--rams-stripe); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.35); }
.rp-gen { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid #8a3b00; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, #ff9a3d, #ef6c00 55%, #c95600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 #6e2f00; transition: transform .08s ease, box-shadow .08s ease; }
.rp-gen:hover:not(:disabled) { background: linear-gradient(180deg, #ffa955, #f57a10 55%, #d25d00); }
.rp-gen:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 #6e2f00; }
.rp-gen:disabled { cursor: not-allowed; color: #f4f4f4; background: linear-gradient(180deg, #b9bec3, #9aa1a8); border-color: #6f767d; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #5a6067; }
/* clear of the corner rivet, as the Quote Engine's is */
/* what Generate did, said on the plate: a printed aluminium strip with a green lamp */
/* The Status is a screen, not a plate (Nick, 09/10/2026: "a modernish
   industrial panel ... needs to look like a real screen"): a backlit LCD,
   pale and slightly green, set in a black bezel, its readout dark and
   monospaced, a soft glare across the top of the glass */
.rp-feedback { display: flex; align-items: center; gap: 9px; padding: 3px 10px; line-height: 1.3; border: 3px solid #15181b; border-radius: 6px;
  font-family: Consolas, "SFMono-Regular", Menlo, "Courier New", monospace; font-weight: 600; font-size: 13px; letter-spacing: .02em; color: #1d2b1a;
  text-shadow: 0 0 1px rgba(29,43,26,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%), linear-gradient(180deg, #e7f0e0, #cfdcc6);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px #8f9aa5, 0 2px 4px rgba(20,24,28,.3); }
.rp-status { flex: none; width: 100%; }
.rp-status .rp-feedback { width: 100%; box-sizing: border-box; }
/* amber while ready, green once Generate has made a pack */
.rp-lamp { flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c2, #f5a623 45%, #a8650a);
  box-shadow: 0 0 0 2px #5f666d, 0 0 7px 1px rgba(245,166,35,.55); }
.rp-feedback.is-done .rp-lamp { background: radial-gradient(circle at 35% 30%, #d8ffd0, #3cc43c 45%, #157a15); box-shadow: 0 0 0 2px #5f666d, 0 0 8px 2px rgba(60,196,60,.65); }
.rp-panel .rp-version { align-self: flex-end; margin: -4px 14px -8px 0; }
/* Aluminium, not brass, on the tread plate (Nick, 09/10/2026: "an
   aluminium screenprinted plaque and pozi screws"): satin aluminium with
   the lettering printed flat in black inside a printed keyline, held by
   steel Phillips screws (a plain cross; Pozidriv's ticks dropped, Nick
   09/10/2026), and the
   panel's corners screwed down the same way. The Quote Engine keeps its brass. */
.rp-panel { --rp-phillips: linear-gradient(90deg, transparent 43%, #3b4148 43% 57%, transparent 57%) center / 64% 64% no-repeat,
    linear-gradient(0deg, transparent 43%, #3b4148 43% 57%, transparent 57%) center / 64% 64% no-repeat,
    radial-gradient(circle at 35% 30%, #fbfcfd, #c3c9cf 55%, #7d858d); }
.rp-panel .pn-label {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 800; color: #1c2025; text-shadow: none;
  background:
    radial-gradient(ellipse at 30% -20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%), linear-gradient(180deg, #f3f5f7, #dde1e5 50%, #c8cdd2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.45);
}
.rp-panel .pn-label::before, .rp-panel .pn-label::after { width: 5px; height: 5px; margin-top: -2.5px; background: var(--rp-phillips); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4); }
.rp-panel .pn-rivet { width: 11px; height: 11px; background: var(--rp-phillips); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.6); }
/* The selectors on the plate in the same skin (Nick, 09/10/2026): an
   aluminium faceplate, the choice printed flat in black inside a keyline,
   a Phillips screw at each end and the chevron on a printed black block.
   The menu that opens stays the house list. */
.rp-panel .avx-tick { --who-accent: var(--rams-orange); }
.rp-panel .avx-tick-btn { position: relative; height: auto; min-height: var(--ctl-h-md); padding: 8px 40px 8px 24px; border: 1px solid #5f666d; border-radius: 4px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: 13px; color: #1c2025;
  background:
    radial-gradient(ellipse at 30% -20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%), linear-gradient(180deg, #f3f5f7, #dde1e5 50%, #c8cdd2);
  box-shadow: inset 0 0 0 2px #e3e6e9, inset 0 0 0 3px #1c2025, inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(0,0,0,.45); }
.rp-panel .avx-tick-btn::before, .rp-panel .avx-tick-btn::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--rp-phillips); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4); }
.rp-panel .avx-tick-btn::before { left: 9px; }
.rp-panel .avx-tick-btn::after { right: 9px; }
.rp-panel .avx-tick-btn > i { position: absolute; right: 21px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; background: #1c2025; color: #e9ecef; font-size: 9px; }
.rp-panel .avx-tick.open .avx-tick-btn > i { transform: rotate(180deg); }
.rp-panel .avx-tick.open .avx-tick-btn { border-color: var(--rams-orange);
  box-shadow: inset 0 0 0 2px #e3e6e9, inset 0 0 0 3px #1c2025, 0 0 0 3px color-mix(in srgb, var(--rams-orange) 30%, transparent); }
/* and the menus they drop, in the same aluminium (Nick, 09/10/2026): a
   brushed plate with a dark edge and a Phillips screw in each top corner,
   the rows printed in black, a darker brushed band on hover, the chosen
   row a darker brushed aluminium band pressed in, its lettering black */
.rp-panel .avx-tick-menu { padding: 16px 8px 8px; border: 1px solid #4d545b; border-radius: 6px;
  background:
    radial-gradient(ellipse at 30% -10%, rgba(255,255,255,.8), rgba(255,255,255,0) 55%), linear-gradient(180deg, #f1f3f5, #d8dde2 60%, #c6cbd1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 2px #e3e6e9, inset 0 0 0 3px #1c2025, 0 10px 24px rgba(20,24,28,.35); }
.rp-panel .avx-tick-menu::before, .rp-panel .avx-tick-menu::after { content: ""; position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rp-phillips); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4); }
.rp-panel .avx-tick-menu::before { left: 7px; }
.rp-panel .avx-tick-menu::after { right: 7px; }
.rp-panel .avx-tick-row { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; color: #1c2025; border-radius: 3px; }
.rp-panel .avx-tick-row:hover { background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.12)); }
.rp-panel .avx-tick-row.is-on, .rp-panel .avx-tick-row.is-on:hover { --who-ink: #1c2025; color: #1c2025;
  background: radial-gradient(ellipse at 30% -20%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%), linear-gradient(180deg, #bcc2c8, #a3aab1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.45); }
.rp-panel .avx-tick-search { margin: 0 0 8px; padding: 7px 10px; border: 1px solid #8a929a; border-radius: 3px;
  background: linear-gradient(180deg, #c9ced3, #e6e9ec); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.rp-panel .avx-tick-search i { color: #1c2025; }
.rp-panel .avx-tick-search input { color: #1c2025; font-weight: 700; }
.rp-panel .avx-tick-empty { color: #3b4148; }
/* the chosen row's Selected pill: a miniature of the plaque, brushed
   aluminium with its keyline, black lettering and a Phillips screw either
   side (the house pill's colours are !important, so these are too) */
.rp-panel .avx-pick-row.is-on .avx-sort-dir, .rp-panel .avx-pick-row.is-on:hover .avx-sort-dir {
  position: relative; padding: 2px 15px; border-radius: 2px; color: #1c2025 !important;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 800; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  background: radial-gradient(ellipse at 30% -20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%), linear-gradient(180deg, #f3f5f7, #dde1e5 50%, #c8cdd2) !important;
  box-shadow: inset 0 0 0 1.5px #e3e6e9, inset 0 0 0 2.5px #1c2025, 0 1px 2px rgba(0,0,0,.45); }
.rp-panel .avx-pick-row.is-on .avx-sort-dir::before, .rp-panel .avx-pick-row.is-on .avx-sort-dir::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--rp-phillips); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4); }
.rp-panel .avx-pick-row.is-on .avx-sort-dir::before { left: 4px; }
.rp-panel .avx-pick-row.is-on .avx-sort-dir::after { right: 4px; }
.ov-rams-packs .ov-att-grid { clear: both; }
/* the modal's shell, narrower than the diary's (.mc-diary-box, main.css); the pane's is auto, above */
.mc-diary-box.mc-rams-box { width: min(760px, 94vw); }
.mc-rams-body { clear: both; padding-top: 6px; }
.mc-rams-sec { clear: both; padding: 14px 0; border-top: 1px solid #eef1f5; }
.mc-rams-sec:first-child { border-top: 0; }
.mc-rams-h { margin: 0 0 8px; padding-left: 9px; border-left: 3px solid var(--rams-orange); font-size: 15px; font-weight: 600; color: #1f2733; }
.mc-rams-h + .mc-rams-hsub { margin: -5px 0 10px 12px; font-size: 12px; line-height: 1.45; color: #7a8699; }
.mc-rams-msg, .mc-rams-note, .mc-rams-ok, .mc-rams-warn, .mc-rams-readline, .mc-rams-source {
  margin: 6px 0; font-size: 13px; line-height: 1.45; color: #4a5568;
}
.mc-rams-ok i { color: #2e9e5b; margin-right: 4px; }
.mc-rams-warn i { color: var(--rams-orange); margin-right: 4px; }
.mc-rams-note a, .mc-rams-readline a { color: var(--rams-ink); }
.mc-rams-readline small.ai-ft-meta { display: block; margin-top: 2px; }
.mc-rams-source { color: #7a8699; }
.mc-rams-sec > .ai-btn { margin-top: 6px; }
/* the reading terminal sits inside the modal: a tighter cap than a page terminal's 620px */
.mc-rams-term .ai-ft-chat { max-height: 280px; }
.mc-rams-plist { margin: 6px 0 10px; }
.mc-rams-plist .tag-avail-list { display: flex; flex-direction: column; }
.mc-rams-prow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #f3e7d3; font-size: 13px; color: var(--rams-ink); text-decoration: none; }
.mc-rams .mc-rams-plist { border-color: var(--rams-line); }
.mc-rams .mc-rams-plist > summary .tag-avail-caret { color: var(--rams-orange); }
.mc-rams-prow > span { flex: 1 1 auto; min-width: 0; }
.mc-rams-pill { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-style: normal; white-space: nowrap; }
.mc-rams-pill.ok { background: #e5f5ec; color: #1f7a45; }
.mc-rams-pill.wait { background: #fff4dc; color: #9a6400; }
.mc-rams-pill.miss { background: #fde8e8; color: var(--rams-red); }
.mc-rams-prow:first-child { border-top: 0; }
.mc-rams-prow:hover > span { text-decoration: underline; }
.mc-rams-site-row { padding: 12px 14px; }
.mc-rams-rows { display: flex; flex-direction: column; gap: 2px; clear: both; }
/* the hazards in a box of their own that scrolls, so the list never runs the page long (Nick, 09/10/2026) */
.mc-rams-sec .mc-rams-rows { max-height: 340px; overflow-y: auto; padding: 4px 8px; border: 1px solid var(--rams-line); border-radius: 8px; background: #fff; }
.mc-rams-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 8px; font-size: 13px;
}
.mc-rams-row-t { flex: 1 1 auto; min-width: 0; }
.mc-rams-row-t small { display: block; color: #7a8699; }
.mc-rams-band {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #eef1f5; color: #4a5568; white-space: nowrap;
}
.mc-rams-band.b-acceptable, .mc-rams-band.b-low { background: #e5f5ec; color: #1f7a45; }
.mc-rams-band.b-medium { background: #fff4dc; color: #9a6400; }
.mc-rams-band.b-high, .mc-rams-band.b-very-high { background: #fde8e8; color: #b42318; }
.mc-rams-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.mc-rams-foot .mu-btn.primary { background: var(--rams-orange); border-color: var(--rams-orange); color: #fff; }
.mc-rams-foot .mu-btn.primary:hover:not(:disabled) { background: #d65f00; border-color: #d65f00; }
.mc-rams-foot .mu-btn.primary:disabled { background: #f3c79a; border-color: #f3c79a; }
.mc-rams-foot .mc-rams-warn { flex: 1 1 260px; margin: 0; }
/* Truss structures: one card a structure, its fields in wrapping rows, its
   items, and the checks PHP made, green, amber or a plain note */
.mc-rams-st-used { display: flex; flex-direction: column; margin: 0 0 10px; clear: both; }
.mc-rams-nottruss, .mc-rams-truss-back { flex: 0 0 auto; font-size: 12px; color: var(--rams-ink); }
.mc-rams-nottruss.armed { color: var(--rams-red); font-weight: 600; }
.mc-rams-dismissed > span { color: #7a8699; }
/* A structure is a card: a tinted head band (its number, its style, a small
   remove), then its fields, its lists in light inset panels, and its checks
   ruled off beneath */
.mc-rams-struct {
  clear: both; margin: 0 0 14px; overflow: hidden; position: relative;
  border: 1px solid var(--rams-line); border-radius: 14px;
  background: #fff; box-shadow: 0 3px 12px rgba(138, 59, 0, .08);
}
.mc-rams-st-body { padding: 14px 16px 12px; }
.mc-rams-st-kind {
  margin: 0 auto 0 10px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--rams-orange); color: #fff;
}
.mc-rams-struct .mc-rams-pickrow { margin: 0 0 10px; }
.mc-rams-struct .mc-rams-num { width: 72px; }
.mc-rams-struct .mc-rams-num[data-f="qty"] { width: 52px; }
/* the structure's controls on one row: each sized to its content */
.mc-rams-struct .mc-rams-pickrow { gap: 10px 12px; }
.mc-rams-struct .mc-rams-pickrow > .mu-filter { flex: 0 0 auto; }
.mc-rams-struct .mc-rams-pickrow > .mu-filter > .avx-tick { min-width: 0; width: auto; }
/* the style picker a little wider, so its longer choices read whole */
.mc-rams-struct .mc-rams-pickrow > .mu-filter:has(select[data-f="style"]) > .avx-tick { min-width: 160px; }
.mc-rams-st-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px; font-size: 14px; color: var(--rams-ink);
  background: var(--rams-wash); border-bottom: 1px solid var(--rams-line);
}
.mc-rams-st-x {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid #e7ebf0; border-radius: 8px;
  background: #fff; color: #7a8699; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mc-rams-st-x:hover { border-color: var(--rams-red); color: var(--rams-red); }
.mc-rams-st-x.armed { width: auto; padding: 0 10px; background: var(--rams-red); border-color: var(--rams-red); color: #fff; font-size: 12px; font-weight: 600; }
.mc-rams-st-x.armed i { margin-right: 6px; }
/* a list: one header row of labels, then a row an item, picker | quantity | remove */
.mc-rams-st-list {
  clear: both; margin: 4px 0 10px; padding: 10px 12px 8px;
  background: #fffcf5; border: 1px solid #f7e6c4; border-radius: 10px;
}
.mc-rams-st-additem { color: var(--rams-ink); }
.mc-rams-st-lhead, .mc-rams-st-item { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; gap: 8px; align-items: center; }
.mc-rams-st-lhead { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--rams-ink); }
.mc-rams-st-item { margin: 0 0 6px; }
.mc-rams-st-item .avx-tick { min-width: 0; width: 100%; }
/* the rows are slim: the compact picker (22px), its quantity box and remove to match */
.mc-rams-st-item .mc-rams-num { width: 100%; height: var(--ctl-h-xs); padding: 0 8px; font-size: 13px; border-radius: 6px; box-sizing: border-box; }
.mc-rams-st-item .mc-rams-st-x { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.mc-rams-st-item .avx-tick.avx-compact .avx-tick-btn { min-height: var(--ctl-h-xs); background: #fff; }
.mc-rams-st-lhead, .mc-rams-st-item { grid-template-columns: minmax(0, 1fr) 80px 24px; }
.mc-rams-st-item { margin: 0 0 4px; }
.mc-rams-st-additem { font-size: 13px; }
.mc-rams-st-res { clear: both; margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid #eef1f5; }
.mc-rams-st-res p { margin: 4px 0; font-size: 13px; line-height: 1.45; color: #4a5568; }
.mc-rams-st-res p i { width: 16px; margin-right: 4px; text-indent: 0; }
/* a line led by an icon wraps under its own words, never under the icon:
   a hanging indent the width of the icon and its gap */
.mc-rams-st-res p, .mc-rams-box .mc-rams-warn, .mc-rams-box .mc-rams-ok, .mc-rams-st-reads .mc-rams-readline { padding-left: 20px; text-indent: -20px; }
/* the icon is 16px with a 4px margin and no space after it in the markup, so
   the words start exactly 20px in and a wrapped line meets them (a space's
   width varies with the font, so it never lined up) */
.mc-rams-box .mc-rams-warn > i:first-child, .mc-rams-box .mc-rams-ok > i:first-child, .mc-rams-st-reads .mc-rams-readline > i:first-child { width: 16px; margin-right: 4px; text-indent: 0; }
.mc-rams-st-reads .mc-rams-readline small.ai-ft-meta { text-indent: 0; }
.mc-rams-st-res .ok i { color: #2e9e5b; }
.mc-rams-st-res .bad i { color: var(--rams-red); }
.mc-rams-st-res .note i { color: #7a8699; }
.mc-rams-st-add { margin-top: 4px; }
.mc-rams-weightcard .ai-ft-action-title i { margin-right: 6px; }
/* the weight card's answers: the approve pair's geometry and colours, own classes */
.mc-rams-weight-apply { border: 1px solid #2e7d32; background: #2e7d32; color: #fff; }
.mc-rams-weight-apply:hover { background: #256428; }
.mc-rams-weight-keep { border: 1px solid #d5d5d5; background: #fff; color: #4a5464; }
.mc-rams-weight-keep:hover { border-color: #8a93a3; }
.mc-rams-weight-apply i, .mc-rams-weight-keep i { margin-right: 5px; }
.mc-rams-st-readload { margin: 2px 0 6px; }
.mc-rams-st-reads .mc-rams-readline i { width: 16px; margin-right: 4px; color: #2e9e5b; }
.mc-rams-st-reads .mc-rams-readline small.ai-ft-meta { display: block; margin-top: 2px; }
.mc-rams-pickrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }

/* Installation tasks (ramsInstall, 2.4.0): a card a row, on the site
   concerns' geometry; the title and its state (In the Pack, or Add to the
   Pack for a row that is out, 2.4.1) side by side, why under them
   (PHP's words black, the AI's own purple and thin, as in every terminal),
   then the record's facts the pack prints under the row */
.mc-rams-tasks { display: flex; flex-direction: column; gap: 10px; clear: both; margin-top: 8px; }
.mc-rams-task { padding: 12px 14px; }
.mc-rams-task-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: #1f2733; }
.mc-rams-task-head .mu-filter { flex: 0 0 auto; }
.mc-rams-task-state { display: block; font-size: 13px; font-weight: 600; color: #2e9e5b; }
.mc-rams-task-why { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #1f2733; }
.mc-rams-aiwhy { color: #642a9a; font-weight: 300; }
.mc-rams-task .ai-ft-meta { display: block; margin-top: 2px; }
.mc-rams-task-detail { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.45; color: #4a5568; }
.mc-rams-install-reads { clear: both; }

/* Sign the RAMS Pack (sales-tools/opps/docs/sign_rams.php, 2.5.0): the pack
   read in its card, and the signatory's name as a line, not a field */
.rams-sign .rams-sign-doc { display: block; clear: both; width: 100%; height: 75vh; box-sizing: border-box; border: 1px solid var(--mu-line); border-radius: 10px; background: #fff; }
.rams-sign .rams-sign-name { display: flex; align-items: center; background: #f6f8fa; }
/* The RAMS modal's Signatures: who has signed the newest pack and who has not */
.mc-rams-signers { display: flex; flex-direction: column; gap: 6px; clear: both; }
.mc-rams-signer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mc-rams-signer > i { width: 16px; text-align: center; }
.mc-rams-signer.is-signed > i { color: #1d8a4b; }
.mc-rams-signer.is-waiting > i { color: var(--rams-orange); }
.mc-rams-signer a.mc-rams-signlink { color: var(--rams-ink) !important; font-weight: 600; }

/* The Health & Safety tab, documents first (2.6.0, Nick 27/10/2026,
   #AX25889): the control panel, then every run as the house accordion
   (details.tag-avail, ramsRuns), then one line of what needs attention and
   the workings folded under How the pack was built. */
.mc-rams-runslot { clear: both; }
.mc-rams-runslot .ov-rams-packs { margin-top: 4px; }
.rr-runs { display: flex; flex-direction: column; gap: 8px; clear: both; }
.rr-runs > details.rr-run { margin: 0; border-color: var(--rams-line); }
.rr-run > summary { flex-wrap: wrap; align-items: center; }
.rr-run > summary .tag-avail-caret { color: var(--rams-orange); }
.rr-head { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.rr-line, .rr-sig { padding-left: 20px; text-indent: -20px; }
.rr-line > i, .rr-sig > i { width: 16px; margin-right: 4px; text-indent: 0; text-align: center; color: var(--rams-orange); }
.rr-line { color: #1f2733; }
.rr-sig { font-size: 12.5px; font-weight: 400; color: #4a5568; }
.rr-acts { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.rr-acts a.rr-pdf { color: var(--rams-ink) !important; font-size: 13px; font-weight: 600; }
.rr-acts a.rr-pdf > i { margin-right: 4px; color: var(--rams-orange); }
.rr-acts .avx-dock-btn { border: none; background: none; padding: 2px 4px; color: var(--rams-ink); font-size: 13px; line-height: 1; cursor: pointer; }
.rr-acts .avx-dock-btn:hover { color: var(--rams-orange); }
.rr-body { display: flow-root; clear: both; }
/* the run just generated slides in at the top, lit in the panel's accent, fading */
@keyframes rr-new {
  0% { opacity: .3; transform: translateY(-8px); background: color-mix(in srgb, var(--rams-orange) 22%, #fff); }
  25% { opacity: 1; transform: none; background: color-mix(in srgb, var(--rams-orange) 22%, #fff); }
  100% { background: #fff; }
}
.rr-run.is-new { animation: rr-new 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .rr-run.is-new { animation: none; } }
/* a task row left out reads as settled; Add anyway is its small override */
.mc-rams-task-state.is-out { color: #7a8699; }
.mc-rams-task-head .mc-rams-task-add { display: block; margin-top: 2px; font-size: 12px; }
/* THE builder's fold (2.6.3), at both levels: Before you generate under the
   control panel, its summary the line of what needs attention; and inside each
   run's row its own How the pack was built, nested lighter and indented */
.mc-rams .mc-rams-fold { border-color: var(--rams-line); margin-top: 12px; }
.mc-rams .mc-rams-fold > summary { flex-wrap: wrap; }
/* room between Before you generate and the RAMS Runs heading under it (Nick, 27/10/2026) */
.mc-rams .mc-rams-fold.mc-rams-next { margin-bottom: 24px; }
.mc-rams .mc-rams-fold > summary .tag-avail-caret { color: var(--rams-orange); }
.mc-rams .mc-rams-fold > .tag-avail-list { display: flow-root; clear: both; overflow: visible; }
.mc-rams-fold > summary .mc-rams-attn { flex: 1 1 260px; padding-left: 20px; text-indent: -20px; font-size: 12.5px; font-weight: 400; color: var(--rams-ink); }
.mc-rams-fold > summary .mc-rams-attn > i { width: 16px; margin-right: 4px; text-indent: 0; text-align: center; color: var(--rams-orange); }
.rr-body .rr-built { margin: 2px 0 4px 14px; border-color: #e6eaf0; background: #fcfcfd; }
.rr-body .rr-built > summary { padding: 7px 10px; font-size: 13px; }
.rr-body .rr-built > summary .tag-avail-caret { color: #7a8699; }
.rr-body > a.rr-pdf { display: inline-block; margin: 2px 0 6px; color: var(--rams-ink) !important; font-size: 13px; font-weight: 600; }
.rr-body > a.rr-pdf > i { margin-right: 4px; color: var(--rams-orange); }
/* The newest pack's card at the top of the composer's RAMS modal, to attach
   as it is, and each older pack's Attach (2.7.3, Nick 27/10/2026, #AX25889).
   The card is a mu-card (it contains its floats) and clears what is above. */
.mc-rams-latest .rr-latest { display: flex; flex-direction: column; gap: 3px; clear: both; float: none; width: auto; margin: 0; border-color: var(--rams-line); }
.rr-latest-t { padding-left: 20px; text-indent: -20px; margin-bottom: 4px; font-weight: 700; color: var(--rams-ink); overflow-wrap: anywhere; }
.rr-latest-t > i { width: 16px; margin-right: 4px; text-indent: 0; text-align: center; color: var(--rams-orange); }
.rr-latest a.mc-rams-signlink { align-self: flex-start; margin: 2px 0 0 20px; color: var(--rams-ink) !important; font-weight: 600; }
.rr-latest-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; clear: both; }
.rr-latest-acts .rp-gen:hover:not(:disabled) { color: #fff; }
.rr-latest-acts a.rr-pdf { color: var(--rams-ink) !important; font-size: 13px; font-weight: 600; }
.rr-latest-acts a.rr-pdf > i { margin-right: 4px; color: var(--rams-orange); }
.rr-latest-acts .avx-dock-btn { border: none; background: none; padding: 2px 4px; color: var(--rams-ink); font-size: 13px; line-height: 1; cursor: pointer; }
.rr-latest-acts .avx-dock-btn:hover { color: var(--rams-orange); }
.rr-acts .rr-attach { color: var(--rams-ink) !important; font-size: 13px; font-weight: 600; }
.rr-acts .rr-attach > i { margin-right: 4px; color: var(--rams-orange); }
.rr-acts .rr-attach:hover { color: var(--rams-orange) !important; }
.mc-rams-site-row.is-ro { padding: 10px 12px; }

/* Generate's questions (2.6.3): the house modal stacked above the composer's
   RAMS modal (.mc-diary, 10050), one plain question a step */
.setaddrbox.mc-rams-ask { z-index: 10070; }
.mc-rams-ask .mc-rams-ask-q { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: #1f2733; }
.mc-rams-ask .ov-addr-actions { align-items: center; }
.mc-rams-ask .setaddrbox-content { --mu-accent: #ef6c00; }
.mc-rams-ask .ov-addr-actions .link-disguise { font-size: 13px; }
.mc-rams-ask .ov-addr-actions .mc-rams-ask-skip { margin-right: auto; }
/* The answers in the RAMS orange (Nick, 27/10/2026: the hover was a pale
   blue under an orange ring): Yes a solid orange that darkens on hover with
   its white words kept, No the outline that takes a faint orange wash. Stated
   at a specificity over any section's .mu-btn:hover. */
.mc-rams-ask .ov-addr-actions .mu-btn.primary { background: #ef6c00 !important; border-color: #ef6c00 !important; color: #fff !important; }
.mc-rams-ask .ov-addr-actions .mu-btn.primary:hover, .mc-rams-ask .ov-addr-actions .mu-btn.primary:focus-visible { background: #c55a00 !important; border-color: #c55a00 !important; color: #fff !important; }
.mc-rams-ask .ov-addr-actions .mu-btn.primary:hover i { color: #fff !important; }
.mc-rams-ask .ov-addr-actions .mu-btn:not(.primary) { border-color: #f3c8a3; color: #8a3f00; }
.mc-rams-ask .ov-addr-actions .mu-btn:not(.primary):hover, .mc-rams-ask .ov-addr-actions .mu-btn:not(.primary):focus-visible { background: #fff3e8 !important; border-color: #ef6c00 !important; color: #8a3f00 !important; }
.mc-rams-hsinfo { clear: both; padding-left: 20px; text-indent: -20px; }
.mc-rams-hsinfo > i { width: 16px; margin-right: 4px; text-indent: 0; text-align: center; color: var(--rams-orange); }
.mc-rams-hsinfo .link-disguise { text-indent: 0; }

/* Generate's wizard (2.7.0): a saved answer picked, the follow-up choices,
   and the last step's site-specific concerns, each kept or removed */
.mc-rams-ask .mc-rams-ask-body { clear: both; float: left; width: 100%; }
.mc-rams-ask .mc-rams-ask-said { clear: both; padding-left: 20px; text-indent: -20px; color: #5b6676; }
.mc-rams-ask .mc-rams-ask-said > i { width: 16px; margin-right: 4px; text-indent: 0; text-align: center; color: #ef6c00; }
.mc-rams-ask .ov-addr-actions .mu-btn.is-picked:not(.primary) { background: #fff3e8 !important; border-color: #ef6c00 !important; }
.mc-rams-ask .ov-addr-actions .mu-btn.primary.is-picked { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ef6c00; }
.mc-rams-wz-choices { clear: both; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.mc-rams-ask .mc-rams-wz-choice { border-color: #f3c8a3; color: #8a3f00; text-align: left; }
.mc-rams-ask .mc-rams-wz-choice > i { color: #c9ced6; }
.mc-rams-ask .mc-rams-wz-choice.is-picked, .mc-rams-ask .mc-rams-wz-choice:hover { background: #fff3e8 !important; border-color: #ef6c00 !important; color: #8a3f00 !important; }
.mc-rams-ask .mc-rams-wz-choice.is-picked > i { color: #ef6c00; }
.mc-rams-wz-rows { clear: both; display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; margin: 0 0 10px; }
.mc-rams-wz-rows .mc-rams-site-row.is-off { opacity: .55; }
.mc-rams-wz-rows .mc-rams-site-row.is-off > b { text-decoration: line-through; }
.mc-rams-wz-keep { margin-top: 4px; font-size: 13px; }
.mc-rams-wz-add { clear: both; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.mc-rams-wz-add .mu-field { flex: 1 1 260px; margin: 0; }
/* Write Up the input's own height, its foot on the input's (Nick, 27/10/2026);
   the actions row under it kept clear of the add row */
.mc-rams-wz-add .mc-rams-wz-write { height: var(--ctl-h, var(--ctl-h-md)); box-sizing: border-box; margin: 0; }
.mc-rams-ask .mc-rams-ask-acts { margin-top: 20px; }
.mc-rams-wz-add[hidden], .mc-rams-wz-addbtn[hidden] { display: none !important; }
.mc-rams-ask .mc-rams-wz-addbtn { clear: both; border-color: #f3c8a3; color: #8a3f00; }
.mc-rams-ask .mc-rams-wz-addbtn:hover { background: #fff3e8 !important; border-color: #ef6c00 !important; color: #8a3f00 !important; }
.mc-rams-wz-out, .mc-rams-wz-readout { clear: both; }
/* the survey's site information on the site step, read only (2.7.2) */
.mc-rams-wz-info { clear: both; margin: 0 0 10px; }
.mc-rams-wz-info-h { margin: 0 0 2px; font-size: 12px; color: #7a8699; }
.mc-rams-wz-info-h i { width: 16px; margin-right: 4px; text-align: center; }
.mc-rams-wz-info .mc-rams-note { margin: 2px 0; white-space: pre-line; }
.mc-rams-wz-read { margin-top: 10px; }