/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* ── Signup step 2 ────────────────────────────────────────────────────
   Selection state comes from the checked input inside each label, so the
   chips need no JavaScript. That is deliberate: Safari below 16.4 gets no
   import maps and therefore no Stimulus, and this screen still has to work.
   :has() is Safari 15.4+, which is the app's floor. */
.wc-chip:has(:checked) {
  background: #1a1a17;
  border-color: #1a1a17;
  color: #fff;
}
.wc-chip:focus-within {
  outline: 2px solid #1a1a17;
  outline-offset: 2px;
}

/* The date field appears only once "A later date" is the chosen option. */
.wc-avail .wc-avail-date { display: none; }
.wc-avail:has(input[value="later"]:checked) .wc-avail-date { display: block; }

/* ══ MATCHING SETTINGS PANEL — the mockup's art direction ══════════════
   project-woc/matching-settings-mockup_a envoyer.html, applied 7 Oct 2026 as
   its own release, after every behaviour fix of the evening — so a rollback
   to v149 returns the paint and keeps the behaviour.

   THE MOCKUP SAYS WHAT TO TAKE FROM IT: "Take the colours, type scale,
   spacing and control shapes. The behaviour (accordion, Edit/Done, saving) is
   already built." It also shows a FUTURE information model — Roles plural, a
   list derived from the chosen industry, "My role is not here — add it", "1 of
   3 used", skills from two roles. That is the role model recorded for after
   Friday, not tonight's paint, and none of it is implemented here.

   EVERY RULE IS SCOPED UNDER .ms-panel, deliberately. The chips share the
   .wc-chip class with signup step 2 — the screen ~100 graduates fill in on
   Friday from phones of unknown model, whose selection state is CSS :has() on
   real checkboxes because those browsers get no import maps. That screen must
   not move tonight. Scoping restyles the panel and leaves signup exactly as
   it was tested.

   44px MINIMUM TOUCH TARGETS, AND THIS IS WHERE THE DESIGN AND THE RULE MEET.
   The mockup's chips are 12.5px type with 9px/13px padding — about 35px tall.
   Elsa's standing instruction is 44px minimum regardless of the smaller type,
   so every interactive rule below takes the mockup's colours, radius and type
   and then enforces min-height: 44px. The type shrinks; the box does not. */
/* ⚠️ THE hidden ATTRIBUTE MUST WIN, AND IT DID NOT — v150's own bug.
   Three controllers here hide things by setting el.hidden: the accordion
   collapses a section's panel, fieldedit swaps a field's readout for its
   control, and disclosure opens the panel. The hidden attribute works through
   the UA stylesheet's `[hidden] { display: none }`, specificity 0,1,0 — and
   `.ms-panel .ms-section-body { display: flex }` is 0,2,0. So the restyle beat
   it: every section was permanently open and every field showed its readout
   AND its control at once, which is what "the panel lost its frame" was.

   One rule closes the whole class of bug, rather than hunting for which
   classes happen to set display today. Keep it ABOVE everything, and never
   remove it to make something visible — if an element needs to show, the
   controller must drop its hidden attribute. */
.ms-panel [hidden] { display: none !important; }

.ms-panel {
  --ms-ground: #f6f5f2;
  --ms-card:   #ffffff;
  --ms-line:   #e4e0d7;
  --ms-line-2: #ddd9d0;
  --ms-ink:    #1a1a17;
  --ms-body:   #3f3b34;
  --ms-text:   #4a463e;
  --ms-muted:  #6b6760;
  --ms-link:   #6b5f4e;
  --ms-stripe: #faf9f6;
  --ms-val-bg: #f0eee8;

  /* ITS OWN ENCLOSURE. In the mockup .phone IS the device, so it needs no
     border; on a profile page the same ground without one reads as part of
     the page rather than as a thing you opened. The border and radius are the
     card's own — #e4e0d7 and 3px — so the panel reads as the biggest card in
     the design rather than as a different language. */
  background: var(--ms-ground);
  border: 1px solid var(--ms-line);
  border-radius: 3px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: var(--ms-ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ms-panel .ms-eyebrow {
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ms-muted);
  font-weight: 600;
}
.ms-panel .ms-title {
  margin: 0;
  font-family: Newsreader, "Source Serif 4", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ms-ink);
}
.ms-panel .ms-intro { font-size: 12px; color: var(--ms-text); line-height: 1.5; }

.ms-panel .ms-card { background: var(--ms-card); border: 1px solid var(--ms-line); border-radius: 3px; }
.ms-panel .ms-stack { display: flex; flex-direction: column; gap: 13px; }

.ms-panel .ms-section-title { font-size: 14px; font-weight: 600; color: var(--ms-ink); }
.ms-panel .ms-summary { font-size: 11.5px; color: var(--ms-muted); margin-top: 3px; line-height: 1.4; }
.ms-panel .ms-label  { font-size: 12.5px; font-weight: 600; color: var(--ms-ink); }
.ms-panel .ms-hint   { font-size: 11.5px; color: var(--ms-muted); line-height: 1.45; }
.ms-panel .ms-rule   { height: 1px; background: #efede7; }

/* One field: label row, control, hint. */
.ms-panel .ms-step { display: flex; flex-direction: column; gap: 7px; }
.ms-panel .ms-top  { display: flex; align-items: center; gap: 8px; }
.ms-panel .ms-row  { display: flex; flex-wrap: wrap; gap: 6px; }

/* The section head is a button, so it is also a touch target. */
.ms-panel .ms-section-head {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 15px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.ms-panel .ms-section-body { padding: 0 15px 16px; display: flex; flex-direction: column; gap: 15px; }
.ms-panel .ms-chev { font-size: 13px; color: #8a8478; flex-shrink: 0; }

/* ── the four chip states ────────────────────────────────────────────────
   .ms-val  a chosen value in the READ state — not a control
   .wc-chip an offered option, unselected
   .wc-chip:has(:checked) selected
   :focus-within the keyboard state, which the mockup cannot show and a
                 phone-and-keyboard screen still needs */
.ms-panel .ms-val {
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 20px;
  background: var(--ms-val-bg);
  color: var(--ms-body);
  border: 1px solid var(--ms-line);
}
.ms-panel .wc-chip {
  min-height: 44px;
  font-size: 12.5px;
  padding: 9px 13px;
  border-radius: 20px;
  background: var(--ms-card);
  color: var(--ms-body);
  border: 1px solid var(--ms-line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ms-panel .wc-chip:hover         { background: var(--ms-stripe); border-color: #cfc8ba; }
.ms-panel .wc-chip:has(:checked) { background: var(--ms-ink); border-color: var(--ms-ink); color: var(--ms-ground); font-weight: 500; }
.ms-panel .wc-chip:focus-within  { outline: 2px solid var(--ms-ink); outline-offset: 2px; }

/* ── striped checkbox lists, for a list too long to be chips ─────────── */
.ms-panel .ms-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--ms-line);
  border-radius: 3px;
  overflow: hidden;
}
.ms-panel .ms-list > label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ms-body);
  cursor: pointer;
  background: var(--ms-card);
}
.ms-panel .ms-list > label:nth-child(even) { background: var(--ms-stripe); }
.ms-panel .ms-list > label:focus-within    { outline: 2px solid var(--ms-ink); outline-offset: -2px; }
.ms-panel .ms-list input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--ms-ink);
  flex-shrink: 0;
  margin: 0;
}

.ms-panel .ms-req {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ms-text);
  background: var(--ms-ground);
  border: 1px solid var(--ms-line-2);
  border-radius: 2px;
  padding: 2px 5px;
  flex-shrink: 0;
}

/* Edit / Done — right-aligned by ms-top's flex-grow label, 44px target. */
.ms-panel .ms-edit {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ms-link);
  background: transparent;
  border: 0;
  padding: 0 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  flex-shrink: 0;
}
.ms-panel .ms-edit:hover { color: var(--ms-ink); }

/* The editing state: tinted ground, bordered, so an open field reads as open. */
.ms-panel .ms-editing {
  background: var(--ms-stripe);
  border: 1px solid var(--ms-line);
  border-radius: 3px;
  padding: 12px 12px 13px;
}

.ms-panel .ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #235532;
  background: #e4efe6;
  border-radius: 20px;
  padding: 5px 11px;
}
.ms-panel .ms-badge .ms-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f6b3f; }

.ms-panel .ms-open-btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ms-ground);
  background: var(--ms-ink);
  border: none;
  border-radius: 20px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}
.ms-panel .ms-save-btn {
  width: 100%;
  height: 50px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-ground);
  background: var(--ms-ink);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.ms-panel a { color: var(--ms-link); }
.ms-panel a:hover { color: var(--ms-ink); }

/* Text inputs and selects: the mockup has none, so they take the card's
   language — 44px, 16px type so iOS does not zoom the page on focus. */
.ms-panel .ms-input {
  min-height: 44px;
  background: var(--ms-card);
  border: 1px solid var(--ms-line-2);
  border-radius: 3px;
  padding: 0 13px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ms-body);
  width: 100%;
  max-width: 420px;
  outline: none;
}
.ms-panel .ms-input:focus { border-color: var(--ms-ink); }

/* ── The header tagline's empty state ──────────────────────────────────
   The tagline is prose in its own column; when it is blank the header shows
   the catalogue role instead. THE FALLBACK IS GENERATED CONTENT, and that is
   the point rather than a styling choice: the inline editor serialises every
   [data-field] element by el.innerText, and a ::before pseudo-element is not
   part of innerText — so the role is displayed and can never be posted back
   as the tagline. Putting the fallback in the span's own text would write
   data into a prose field on the first blur. */
.wc-tagline:empty::before {
  content: attr(data-placeholder);
  color: #8a8478;
}

/* THE CV DROP ZONE'S ONLY STATE, and it is cosmetic by construction.
   `cvdrop` toggles this class while a file is over the zone. Without script
   the class is never added and the zone is a bordered box around a working
   file input — which is the whole point: the input is the feature and the
   drop zone is decoration layered on top of it. */
.wc-drop-over {
  background: #f1f6f2;
  border-color: #2f6b3f !important;
}