.ms-room{
  --ms-cream:#F7F4ED;--ms-cream-light:#FBF8F1;--ms-cream-warm:#EDE7DA;
  --ms-green:#0E4B2C;--ms-green-deep:#093822;--ms-orange:#E8701F;
  --ms-tint-green:rgba(9,56,34,.09);
  --ms-ink:#1A1A1A;--ms-gray:#6B5E4D;--ms-line:rgba(14,75,44,.12);
  --ms-r:12px;--ms-ease:cubic-bezier(.2,.6,.2,1);
  --ms-card-text:14.5px;
  font-family:var(--body);color:var(--ms-ink);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ms-room{
    --ms-cream:var(--cream);--ms-cream-light:var(--raise);
    --ms-cream-warm:var(--warm);
    --ms-green:var(--green-mid);--ms-green-deep:var(--green);
    --ms-orange:var(--orange);
    --ms-tint-green:var(--tint-green);
    --ms-ink:var(--green);--ms-gray:var(--gray);--ms-line:var(--line);
  }
}
:root[data-theme="dark"] .ms-room{
  --ms-cream:var(--cream);--ms-cream-light:var(--raise);
  --ms-cream-warm:var(--warm);
  --ms-green:var(--green-mid);--ms-green-deep:var(--green);
  --ms-orange:var(--orange);
  --ms-tint-green:var(--tint-green);
  --ms-ink:var(--green);--ms-gray:var(--gray);--ms-line:var(--line);
}


/* THE ROOM'S OWN WIDTH AND GROUND: NOW SHARED, NOT WRITTEN HERE
   main/.shell in app-css.js cap every room near 900px on cream padded
   30/40 and 32 a side, and the wide-room override that lifts that cap and
   paints the cream-white ground underneath now lives in app-css.js too,
   in the one rule body:has(.ms-room,.road-phased) reads: this class is
   one of two names on its :has() list, not a second declaration of the
   same numbers. */

/* ------------------------------------------------------ the section heads */

/* A title and its line on the left, a settled note on the right when
   there is one. The display face is the page's own voice for a section
   title, as on the road; nothing inside a card uses it. */
.ms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-bottom:16px}
.ms-head-open{margin-top:48px}
.ms-head-open.is-first{margin-top:0}
.ms-sect{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.25;
color:var(--ms-green-deep);margin:0 0 6px}
.ms-sectsub{color:var(--ms-gray);font-size:14px;line-height:1.5;max-width:70ch}

/* ------------------------------------------------------------ mango's card */

/* MANGO'S CARD, ONE ON THE PAGE, IN THE ROAD'S OWN HAND
   White, a hairline and the large radius, like the road's cards: the
   dragon inside a round frame of his own instead of spilling past a
   pill, a title and a line in the body face, and the one orange press on
   the page at its right. Under 640px the press takes the full width. */
.ms-mc{display:flex;align-items:center;gap:18px;margin:26px 0 16px;padding:14px 16px 14px 16px;
background:#fff;border:1px solid var(--ms-line);border-radius:16px;text-decoration:none;
color:inherit;transition:border-color .15s var(--ms-ease),box-shadow .15s var(--ms-ease)}
.ms-mc:hover{border-color:rgba(14,75,44,.28);box-shadow:0 6px 18px rgba(9,56,34,.07);
color:inherit !important}
/* HE STANDS IN HIS FRAME AND RISES OUT OF IT
   The round frame is drawn behind him (::before) rather than clipping
   him: his feet on its lower edge, his head well past its top and past
   the card's own edge, the card's top margin keeping him clear of the
   heading above. */
.ms-mc-pic{flex:0 0 auto;position:relative;width:84px;height:56px;margin-right:8px}
.ms-mc-pic::before{content:'';position:absolute;inset:0;border-radius:50%;
background:var(--ms-cream-warm)}
.ms-mc-pic img{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
height:84px;width:auto;max-width:none;object-fit:contain;z-index:1;pointer-events:none}
.ms-mc-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ms-mc-h{font-size:15px;font-weight:700;line-height:1.3;color:var(--ms-green-deep)}
.ms-mc-l{font-size:13.5px;line-height:1.45;color:var(--ms-gray)}
.ms-mc-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:40px;
padding:0 16px;border-radius:10px;background:var(--orange);color:#fff;font-size:14px;
font-weight:600;transition:background-color .15s var(--ms-ease)}
.ms-mc:hover .ms-mc-go{background:var(--ms-orange)}
.ms-mc-go svg{transition:transform .15s var(--ms-ease)}
.ms-mc:hover .ms-mc-go svg{transform:translateX(2px)}
/* MANGO, ALL DONE (mangoDone in store-room.js)
   The same card on the settled green: his thank-you pose in a white frame,
   the title in the room's deep green, and a round tick where the press
   would stand. It is a state, not a door: no pointer, no lift. The tick
   lands with one small pop, and not at all where motion is reduced. */
.ms-mc.is-done{margin:26px 0 18px;cursor:default;border-color:rgba(14,75,44,.16);
background:linear-gradient(100deg,var(--ms-tint-green),rgba(9,56,34,.03) 70%)}
.ms-mc.is-done:hover{box-shadow:none;border-color:rgba(14,75,44,.16)}
.ms-mc.is-done .ms-mc-h{font-size:16px}
.ms-mc-ok{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;background:var(--ms-green-deep);color:#fff;
box-shadow:0 4px 12px rgba(9,56,34,.18);animation:ms-pop .45s var(--ms-ease) both .15s}
@keyframes ms-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}
100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ms-mc-ok{animation:none}}
/* NO FRAME BEHIND HIM, AND A CARD NO WIDER THAN ITS WORDS
   The round frame he stood in added nothing once he stood out of it, and
   the card took a whole line of the page for one sentence and a press. It
   sits at the right of its section's heading now, on the heading's own
   line, as wide as it needs and no wider; under 900px it drops below the
   heading at full width. Centred on the heading's height: he rises a pixel
   or two out of his card at this size, so no margin is kept for him. */
.ms-mc-pic::before{display:none}
.ms-head{align-items:center}
.ms-head>div:first-child{flex:1 1 320px;min-width:0}
.ms-head>.ms-mc.ms-mc{flex:0 1 auto;max-width:500px;margin:4px 0 0;padding:12px 14px 12px 12px}
.ms-head>.ms-mc .ms-mc-l{max-width:34ch}
@media(max-width:900px){
  .ms-head>.ms-mc.ms-mc{max-width:none;flex:1 1 100%}
  .ms-head>.ms-mc .ms-mc-l{max-width:none}
}
/* White like every other card, and as wide as what it says: the line keeps
   its reading width and the band stops where the words do. */
.ms-mc.is-wide{display:inline-flex;max-width:100%;margin:4px 0 20px;cursor:default;
background:#fff;padding-right:24px}
.ms-mc.is-wide:hover{box-shadow:none;border-color:var(--ms-line)}
.ms-mc.is-wide .ms-mc-l{max-width:64ch}
/* Beside its heading it may take more room than the compact cards: it has
   two sentences to say. Below 900px it drops under the title like them. */
.ms-head>.ms-mc.is-wide{max-width:660px;margin:4px 0 0}
/* ONCE THE DESIGN HAS STARTED (withDesignNote): a quiet line under the
   room's title, in the road's design card's own words. */
.ms-lock{display:flex;gap:12px;align-items:flex-start;margin:0 0 22px;padding:14px 16px;
border:1px solid rgba(14,75,44,.14);border-radius:14px;background:var(--ms-tint-green);max-width:760px}
.ms-lock-i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;
height:34px;border-radius:50%;background:var(--ms-green-deep);color:#fff}
.ms-lock-i svg{width:18px;height:18px}
.ms-lock-h{font-size:15px;font-weight:700;color:var(--ms-green-deep);margin:1px 0 3px}
.ms-lock p{margin:0;font-size:14px;line-height:1.5;color:var(--ms-ink)}
.ms-lock a{color:var(--ms-orange);font-weight:700;text-decoration:none;white-space:nowrap}
.ms-lock a:hover{text-decoration:underline}
.ms-head>.ms-mc.is-wide .ms-mc-l{max-width:none}
@media(max-width:640px){
  .ms-mc.is-done,.ms-mc.is-wide{flex-wrap:nowrap}
  .ms-mc.is-done .ms-mc-t,.ms-mc.is-wide .ms-mc-t{flex-basis:auto}
}
@media(max-width:640px){
  .ms-mc{flex-wrap:wrap}
  .ms-mc-t{flex-basis:calc(100% - 80px)}
  .ms-mc-go{width:100%;justify-content:center}
}

/* ----------------------------------------------------------------- a grid */

/* A real 12-column grid, each card spanning 4 (three a row): the
   mockup's own breakpoints (6, two a row, under 1100px; 12, one a row,
   under 700px), not an auto-fit guess. Row height is the default
   stretch, so every card in a row shares the tallest one's height, and
   the trailing row's own orphan(s) -- one or two cards short of a full
   row -- span wider to fill it rather than leaving a hole beside them,
   each width bucket handled inside its own media query so the two never
   fight over which wins. */
.ms-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.ms-card{grid-column:span 4}
@media(min-width:1101px){
  .ms-grid>.ms-card:nth-child(3n+1):nth-last-child(1){grid-column:span 12}
  .ms-grid>.ms-card:nth-child(3n+1):nth-last-child(2),
  .ms-grid>.ms-card:nth-child(3n+2):nth-last-child(1){grid-column:span 6}
}
@media(max-width:1100px){.ms-card{grid-column:span 6}}
@media(max-width:1100px) and (min-width:701px){
  .ms-grid>.ms-card:nth-child(2n+1):nth-last-child(1){grid-column:span 12}
}
@media(max-width:700px){.ms-card{grid-column:span 12}}

/* A column, not a centred box: every card's label sits at the same spot
   and its first line of content starts at the top left, whatever height
   the row stretches it to. flex-direction:column with align-items left
   at its default (stretch) keeps every child the card's own full width,
   exactly what block layout already gave the text; what it adds is a
   main axis that packs from the top and never the middle. */
.ms-card{display:flex;flex-direction:column;width:100%;background:#fff;
border:1px solid var(--ms-line);border-radius:16px;padding:20px 22px;position:relative;
font:inherit;color:inherit;text-align:left;cursor:pointer;
transition:border-color .15s var(--ms-ease),box-shadow .15s var(--ms-ease)}
.ms-card:hover{border-color:rgba(14,75,44,.28);box-shadow:0 6px 18px rgba(9,56,34,.07)}
.ms-card:focus-visible{outline:2px solid var(--ms-orange);outline-offset:2px}
/* PERMANENT, NOT ON HOVER (phase 4b, Part D5)
   A hover shadow and an instruction sentence above the grid were the only
   things saying a card could be pressed, and a phone has no hover. A
   restaurant operator is on a phone. The pencil is part of the card's own
   rest state now; hovering only nudges its colour, it does not summon it. */
.ms-pen{position:absolute;top:18px;right:18px;color:var(--ms-gray);opacity:.7;
transition:color .15s var(--ms-ease),opacity .15s var(--ms-ease)}
.ms-card:hover .ms-pen{color:var(--ms-green);opacity:1}

.ms-lab{display:block;font-family:var(--body);font-weight:700;font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ms-gray);margin-bottom:10px;
padding-right:24px}
/* A LABEL WITH ITS STICKER: side by side while they fit, and on a long
   label the sticker drops to its own line, flush left and a breath below,
   instead of hanging indented against the text above it. */
.ms-lab:has(.ms-tag){display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px}
.ms-lab:has(.ms-tag) .ms-tag{margin-left:0}
/* A REPERAGE, NOT A STAMP -- BUT ONE A SWEEP OF THE PAGE ACTUALLY CATCHES
   Grey text beside a bold label was reading as decoration, not a status:
   nothing stopped the eye. A small filled, bordered mark in the account's
   own orange (the same shade .q-req already marks a required field with,
   in the other three rooms) gives it a shape and a colour of its own,
   while staying well under ms-lab's own size and weight so the field's
   name still leads. Inline padding, no set height, so a card that gains
   one does not grow taller than a card that does not. */
.ms-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;
border:1px solid var(--ms-orange);background:rgba(232,112,31,.12);color:var(--accent-ink,#A54A0C);
font-style:normal;font-weight:600;font-size:10px;letter-spacing:.02em;
text-transform:none;vertical-align:1px}

/* BEING COLLECTED: the same sticker in the collection's own blue, on a
   card with nothing to press (field-sources.js). */
.ms-tag.is-collecting{border-color:#2f6db0;background:rgba(47,109,176,.10);color:#2f6db0}
/* The whole frame in the collection's blue, the same as the Menu room's
   "Being collected" panel: one look for everything the collection brings,
   in every room. */
.ms-card.is-collecting,.ms-card.is-empty.is-collecting{cursor:default;
border:1px solid rgba(47,109,176,.32);
background:linear-gradient(180deg,rgba(47,109,176,.07),rgba(47,109,176,.02))}
.ms-card.is-collecting:hover,.ms-card.is-empty.is-collecting:hover{box-shadow:none;
border-color:rgba(47,109,176,.32);background:linear-gradient(180deg,rgba(47,109,176,.07),rgba(47,109,176,.02))}
:root[data-theme="dark"] .ms-card.is-collecting{border-color:rgba(143,184,230,.35);
background:linear-gradient(180deg,rgba(143,184,230,.09),rgba(143,184,230,.03))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ms-card.is-collecting{
border-color:rgba(143,184,230,.35);background:linear-gradient(180deg,rgba(143,184,230,.09),rgba(143,184,230,.03))}}
.ms-card.is-grab{text-decoration:none;color:inherit}
:root[data-theme="dark"] .ms-tag.is-collecting{border-color:#8fb8e6;color:#8fb8e6;background:rgba(143,184,230,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ms-tag.is-collecting{
border-color:#8fb8e6;color:#8fb8e6;background:rgba(143,184,230,.12)}}
/* NOT ON YOUR GRAB ACCOUNT: the shown run did not bring it. A quiet grey
   sticker, since it asks nothing of him unless the product needs it. */
.ms-tag.is-not-on-grab{border-color:rgba(90,90,90,.45);background:rgba(90,90,90,.08);color:#5a5a5a}
:root[data-theme="dark"] .ms-tag.is-not-on-grab{border-color:rgba(200,200,200,.4);color:#c8c8c8;background:rgba(200,200,200,.08)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ms-tag.is-not-on-grab{
border-color:rgba(200,200,200,.4);color:#c8c8c8;background:rgba(200,200,200,.08)}}
.ms-val{font-size:var(--ms-card-text);font-weight:500;line-height:1.45}
.ms-val.ms-mt{margin-top:8px}
.ms-val b{font-family:var(--body);font-weight:700;font-size:15.5px;
color:var(--ms-green-deep)}
.ms-val.ms-pre{white-space:pre-line;font-size:var(--ms-card-text)}
.ms-muted{color:var(--ms-gray);font-size:var(--ms-card-text)}
.ms-italic{font-style:italic}
.ms-trunc{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}

.ms-chip{display:inline-block;align-self:flex-start;background:var(--ms-cream-warm);
border-radius:999px;padding:3px 11px;font-size:var(--ms-card-text);color:var(--ms-ink);
margin:8px 8px 0 0}
.ms-chip.is-changed{background:none;border:1px solid var(--ms-orange);color:var(--ms-ink);
font-weight:700;font-size:11px}
/* A ROW OF CHIPS, WRAPPING, NEVER GLUED
   Its own flex row rather than trusting the card's own column layout to
   space bare siblings: every platform its own chip, wrapping to a new
   line the moment the row runs out of width. */
.ms-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ms-chiprow .ms-chip{margin:0}
/* A LOGO MARK, KEYED BY PLATFORM, NEVER FETCHED UNTIL IT EXISTS
   No backticks in this comment: the whole file is a template literal, and
   one would end it early. Hidden by default and requesting nothing: a
   chip shows its name alone until a rule naming its own data-app sets
   display and a background-image, the pair Mathieu adds together once
   the asset is his to give. */
.ms-chip-app{display:inline-flex;align-items:center;gap:6px}
.ms-chip-app::before{content:'';display:none;flex:0 0 auto;width:14px;height:14px;
background-size:contain;background-repeat:no-repeat;background-position:center}
/* One rule a platform, added the day its file exists, for example:
   .ms-chip-app[data-app="lineman"]::before{display:inline-block;
   background-image:url(/assets/img/apps/lineman.png)} */

.ms-when{display:block;margin-top:auto;padding-top:16px;font-size:12px;color:var(--ms-gray);
opacity:.75}

.ms-rank{list-style:none;padding:0;margin:8px 0 0}
.ms-rank li{display:flex;gap:8px;align-items:baseline;padding:2px 0;
font-size:var(--ms-card-text);line-height:1.15}
.ms-rank li::before{content:attr(data-n);font-family:var(--body);font-weight:700;
color:var(--ms-ink)}

/* THE LOGO FILE ITSELF, NEVER A TILE STANDING IN FOR IT
   Contained rather than cropped: it is his mark, not a decoration cut to
   fit a square, and a transparent PNG or an SVG both read cleanly. */
.ms-logo-file{display:block;max-width:100%;max-height:96px;width:auto;
object-fit:contain;border-radius:var(--ms-r)}

/* --------------------------------------------------------------- a card, empty */

/* Cream, the same one the page itself stood on before this pass lightened
   it: an open card reads as an invitation still sitting on that ground,
   next to a told card's own plain white. */
.ms-card.is-empty{background:var(--ms-cream);border:1.5px dashed rgba(14,75,44,.18);
transition:border-color .15s var(--ms-ease),background-color .15s var(--ms-ease)}
.ms-card.is-empty:hover{border-color:var(--ms-orange);background:#fff}
/* THE ONE CARD THAT IS WAITING, AND ONLY IT (COLOUR PASS, PART F1)
   A full outline rather than a dashed one, solid rather than this room's
   own lighter --ms-orange: this is the account-wide "this is owed" signal
   (--action), the same one the dock and the rail already carry, not a
   decoration native to this room. The isolation effect this is built on
   only fires when the rest of the grid stays uniform, which is why every
   OTHER empty card keeps its plain dashed border regardless of how many
   of them there are. */
.ms-card.is-owed{background:#fff;border:1.5px solid var(--action);
box-shadow:inset 3px 0 0 var(--action)}
.ms-empty-p{margin:0;font-size:var(--ms-card-text);color:var(--ms-gray);line-height:1.45}
.ms-add{display:block;margin-top:auto;padding-top:16px;font-family:var(--body);
font-weight:700;font-size:14px;color:var(--accent-ink,#A54A0C)}

/* -------------------------------------------------------------- the panel */

/* One shared panel for every card, filled or empty: pressing a card moves
   its real question into the panel's own body (see store-room.js), so
   this is chrome only -- the position, the dimming, the slide, never the
   field. */
.ms-pool[hidden]{display:none}
.ms-scrim{position:fixed;inset:0;z-index:40;background:rgba(9,56,34,.45);opacity:0;
transition:opacity .2s var(--ms-ease)}
.ms-scrim[hidden]{display:none}
.ms-scrim.is-open{opacity:1}
.ms-panel{position:fixed;top:0;right:0;bottom:0;z-index:41;width:440px;max-width:100%;
background:#fff;box-shadow:-16px 0 40px rgba(9,56,34,.18);display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .25s var(--ms-ease)}
.ms-panel[hidden]{display:none}
.ms-panel.is-open{transform:translateX(0)}
@media(max-width:640px){.ms-panel{width:100%}}
.ms-panel-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;
gap:14px;padding:22px 26px 18px;border-bottom:1px solid var(--ms-line)}
.ms-panel-h{margin:0;flex:1;font-family:var(--display);font-weight:700;font-size:19px;
line-height:1.25;color:var(--ms-green-deep)}
/* THE CROSS, THE DIM AND ESCAPE ARE ONE PRESS, DRAWN THREE WAYS
   All three carry data-ms-close, the same attribute Done carries: closing
   this room's panel is one action whichever of the four asks for it. */
.ms-panel-x{flex:0 0 auto;background:transparent;border:0;font-size:22px;
color:var(--ms-gray);cursor:pointer;line-height:1;padding:2px 4px}
.ms-panel-x:hover{color:var(--ms-ink)}
.ms-panel-body{flex:1 1 auto;overflow-y:auto;padding:26px}
/* THE FOOT: THE ARROWS AT ITS LEFT, DONE AT ITS RIGHT, BOTH PINNED
   The body scrolls alone between a head and a foot that never move,
   the same three zones the mockup draws. */
.ms-panel-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:16px 26px;border-top:1px solid var(--ms-line)}
.ms-panel-nav{display:flex;gap:6px}
.ms-panel-nb{background:transparent;border:1.5px solid var(--ms-line);color:var(--ms-gray);
border-radius:9px;width:38px;height:38px;font-size:15px;cursor:pointer}
.ms-panel-nb:hover{border-color:var(--ms-green);color:var(--ms-green)}
.ms-panel-nb:disabled{opacity:.4;cursor:default}
.ms-panel-nb:disabled:hover{border-color:var(--ms-line);color:var(--ms-gray)}
.ms-panel-done{flex:0 0 auto;background:var(--ms-green-deep);color:var(--ms-cream-light);
border:0;border-radius:var(--ms-r);padding:13px 30px;font-family:var(--body);font-weight:700;
font-size:15px;cursor:pointer}
.ms-panel-done:hover{background:var(--ms-green)}
.ms-panel-body .q-help{font-size:13px;color:var(--ms-gray)}

/* THE PANEL SHOWS ONE QUESTION, NOT A LIST OF THEM
   The account's own .q is a row in a long form, padded top and bottom
   and ruled off from the next one: right on a page of fourteen, a line
   and a gap around the one question this panel ever holds. */
.ms-panel-body section.q{padding:0;border-bottom:0}

/* THE QUESTION IS NOT A SECOND TITLE
   The account's own .q-lab is a heading built for a page with no other
   one on it (17px, weight 900): set beside .ms-panel-h's 19px/700 it read
   as two titles stacked. Smaller and lighter here, clearly the panel's
   second voice and not a rival to its first. */
.ms-panel-body .q-lab{font-size:15.5px;font-weight:600;color:var(--ms-green-deep)}

/* THE SAME STICKER THE CARD ITSELF WEARS, NOT THE ACCOUNT'S PLAIN .q-tag
   The panel opens the account's own shared control, .q-tag included, and
   that one is plain small text: right beside .q-lab's own weight on every
   other room, flat and unreadable next to My store's bordered .ms-tag on
   the card he just pressed to get here. Same shape, same colour, so the
   mark reads as one fact carried in from the card rather than two. */
.ms-panel-body .q-tag{display:inline-block;padding:1px 7px;border-radius:4px;
border:1px solid var(--ms-orange);background:rgba(232,112,31,.12);color:var(--accent-ink,#A54A0C);
font-style:normal;font-weight:600;font-size:10px;letter-spacing:.02em;
text-transform:none;vertical-align:1px}
/* The account's own native asterisk beside a required label, redundant
   once the sticker above says the same thing: two marks for one fact. */
.ms-panel-body .q-req .q-lab::after{content:none}

/* No Needed, no Optional, anywhere in this room: nothing here is chased. */
.ms-panel-body .q-free,.ms-panel-body .q-owed{display:none}

/* ONE PART A LINE, ALWAYS, IN THE CATALOGUE'S OWN ORDER
   The account's own .q-parts pairs a "half" part with the next one on the
   same row (street and postcode, say); right in a room where the parts
   share a screen with a dozen other questions, wrong in a panel that has
   nothing beside them to save room from. One column, full width, whatever
   a part's own half flag says elsewhere. */
.ms-panel-body .q-parts{grid-template-columns:minmax(0,1fr)}
.ms-panel-body .q-part.q-half{grid-column:1/-1}

.ms-panel-body .q-parts,.ms-panel-body .q[data-kind="group"] .q-parts{background:none;
border:0;padding:0;border-radius:0;gap:16px}
.ms-panel-body .q-part>.q-sub{display:flex;align-items:center;font-family:var(--body);
font-weight:700;font-size:10px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;
color:var(--ms-gray);margin-bottom:6px}
.ms-panel-body .q-part[data-when]{padding-left:14px;border-left:2px solid rgba(232,112,31,.18)}

.ms-panel-body .q-i,.ms-panel-body .q-t,.ms-panel-body select{min-height:44px;padding:11px 13px;
font-size:14.5px}
.ms-panel-body .q-t{min-height:96px;line-height:1.55}
.ms-panel-body .q-i:focus,.ms-panel-body .q-t:focus,.ms-panel-body select:focus{
border-color:var(--ms-orange);box-shadow:0 0 0 3px rgba(232,112,31,.15)}
/* THE COUNTRY BOX IS A BOX, NOT A BOX HOLDING ONE
   A select still carries its browser's own native frame in places
   appearance:none alone does not reach; the account's own reset covers
   two of the three engines. This is the one field in the room drawn as a
   select rather than a plain box, so it is the one field the gap showed
   on. Every property re-asserted here, not just the missing prefix, so
   the panel's own select can never again pick up a second frame from
   whatever the browser still thinks a select should look like. */
.ms-panel-body select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
background-color:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-r);
box-shadow:none}

/* A CHOICE, FULL WIDTH, ONE ANSWER A LINE, THE MARK LEFT OF THE WORDS
   The account's own chip is a filter pill in a wrapped row, right for a
   grid of cards. A question with room to itself reads better the mockup's
   way: every answer its own full-width row, the mark drawn rather than
   the account's tick, selected in this room's own green and never the
   account's orange, since a chosen answer inside a field being edited is
   not the same thing as a chosen filter. The chips are the real ones
   intake-form.js already renders; only their skin changes here. */
.ms-panel-body .chips{display:flex;flex-direction:column;gap:10px;max-width:none}
.ms-panel-body .chip{display:block;width:100%}
.ms-panel-body .chip span{position:relative;display:flex;align-items:center;gap:12px;
width:100%;box-sizing:border-box;padding:14px 16px;border-radius:var(--ms-r);
border:1.5px solid var(--ms-line);background:#fff;font-family:var(--body);
font-weight:500;font-size:15px;line-height:1.35;color:var(--ms-ink)}
.ms-panel-body .chip:hover span{border-color:var(--ms-green)}
.ms-panel-body .chip input:checked+span{border-color:var(--ms-green-deep);
background:rgba(14,75,44,.05);color:var(--ms-ink)}
.ms-panel-body .chip input:focus-visible+span{outline:2px solid var(--ms-green-deep);
outline-offset:2px}
/* The mark itself: a plain ring, drawn as its own flex item ahead of the
   words rather than a tick laid over the text with padding, so it lines up
   exactly as the mockup draws it whatever the label's own length. Every
   property the account's own tick sets is overridden here, position and
   transform included, since the two marks share nothing but the pseudo
   element they are drawn on. */
.ms-panel-body .chip span::before{content:'';position:static;top:auto;left:auto;
flex:0 0 auto;width:20px;height:20px;border-radius:50%;
border:1.5px solid var(--ms-line);background:#fff;transform:none;opacity:1;
box-shadow:none;transition:background-color .12s,border-color .12s,box-shadow .12s}
.ms-panel-body .chip:has(input[type="checkbox"]) span::before{border-radius:6px}
.ms-panel-body .chip input:checked+span::before{border-color:var(--ms-green-deep);
background:var(--ms-green-deep);box-shadow:inset 0 0 0 4.5px var(--ms-cream-light)}
/* A CHOICE ON A TABLE LINE STAYS A TOGGLE BESIDE ITS BOX: the one-answer-
   a-line layout above is for a question's own answers, not for a line of a
   table. */
.ms-panel-body .rw .rw-c .chips{flex-direction:row;flex-wrap:wrap;gap:6px}
.ms-panel-body .rw .rw-c .chip{width:auto}
.ms-panel-body .rw .rw-c .chip span{width:auto;padding:10px 14px;font-size:14px}
/* A CHOICE OF THREE OR MORE ON A TABLE LINE TAKES A LINE OF ITS OWN
   Beside the box, four answers stood in a column taller than the line.
   Such a line is two lines now: the box first (the remove cross keeps its
   place at the end of it), then the choice's own name and its answers side
   by side under it. */
.ms-panel-body .rw:has(> .rw-c .chips > .chip:nth-child(3)) > .rw-c:not(:has(.chips)){grid-column:1 / -2}
.ms-panel-body .rw:has(> .rw-c .chips > .chip:nth-child(3)) > .rw-x{grid-row:1;grid-column:-2 / -1}
.ms-panel-body .rw .rw-c:has(.chips > .chip:nth-child(3)){grid-column:1 / -1;display:flex;align-items:center;
flex-wrap:wrap;gap:8px 14px}
.ms-panel-body .rw .rw-c:has(.chips > .chip:nth-child(3)) > .rw-m{display:block;margin:0}
.ms-panel-body .rw .rw-c:has(.chips > .chip:nth-child(3)) .chips{flex-wrap:wrap}
@media (max-width:700px){
  .ms-panel-body .rw:has(> .rw-c .chips > .chip:nth-child(3)) > .rw-x{grid-row:auto;grid-column:auto}
}
/* THE NUMBER STANDS WHERE THE MARK WOULD, ON A RANKED LIST
   A badge floating beside the row does not read as which box the press
   landed on once there is more than one press to place. The number sits
   inside the mark's own square instead, and only there: on a ranked list
   the tick underneath is turned off so the two never show together. */
.ms-panel-body .chip-on .chip-n{position:absolute;z-index:1;left:17.5px;top:calc(50% - 10px);
min-width:20px;height:20px;margin:0;padding:0;border-radius:6px;display:flex;
align-items:center;justify-content:center;background:var(--ms-green-deep);
color:var(--ms-cream-light);font-size:11px;font-weight:800}
.ms-panel-body .chips[data-rank] .chip:has(input:checked) span::before{opacity:0}

/* THE SAME "?" AS THE ONBOARDING GUIDE, FOR A QUESTION'S OWN REASON */
.ms-panel-body .q-part,.ms-panel-body section.q{position:relative}
.ms-why{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
padding:0;margin-left:6px;vertical-align:1px;border:1px solid var(--ms-line);border-radius:50%;
background:#fff;font:inherit;font-size:9.5px;font-weight:700;line-height:1;color:var(--ms-gray);
cursor:pointer;transition:border-color .15s var(--ms-ease),color .15s var(--ms-ease)}
.ms-why:hover,.ms-why[aria-expanded="true"]{border-color:var(--ms-orange);color:var(--ms-orange)}
.ms-why:focus-visible{outline:2px solid var(--ms-orange);outline-offset:2px}
.ms-panel-body .q-help.q-under{position:absolute;z-index:5;visibility:hidden;opacity:0;
pointer-events:none;width:max-content;max-width:260px;margin:0;padding:11px 14px;
border-radius:var(--ms-r);border:1px solid var(--ms-line);background:#fff;
box-shadow:0 8px 24px rgba(9,56,34,.14);font-size:12.5px;line-height:1.5;
color:var(--ms-green-deep);transition:opacity .15s var(--ms-ease)}
.is-said>.q-help.q-under{visibility:visible;opacity:1;pointer-events:auto}

/* -------------------------------------------------------------- the empty room */

.ms-empty-note{margin-top:16px;padding:24px;border:1px solid var(--ms-line);
border-radius:var(--ms-r);background:#fff;max-width:56ch}
.ms-empty-note p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ms-gray)}

/* A WHOLE SECTION THE COLLECTION IS READING (collectPanel in store-room.js):
   the Menu room's panel, for every room. */
.ms-collect{display:flex;gap:20px;padding:26px 28px;border:1px solid rgba(47,109,176,.32);
border-radius:18px;background:linear-gradient(180deg,rgba(47,109,176,.07),rgba(47,109,176,.02))}
.ms-collect-i{flex:none;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
background:rgba(47,109,176,.12);color:#2f6db0}
.ms-collect-b{min-width:0}
.ms-collect .ms-tag{margin-left:0}
.ms-collect-h{margin:10px 0 6px;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.25;
color:var(--ms-green-deep)}
.ms-collect-p{margin:0;max-width:62ch;font-size:15px;line-height:1.6;color:var(--ms-gray)}
.ms-collect-k{margin:12px 0 0;max-width:62ch;font-size:14px;line-height:1.55;color:var(--ms-gray)}
@media(max-width:700px){.ms-collect{flex-direction:column;gap:14px;padding:22px 20px}}