/* FREE SAILING — blm.css
   The four BLM surfaces: the Ask page, For you, the correct-me sheet, and the
   transparency section inside the profile. Nothing here styles a score, a
   percentage or a badge, because none of those exist. */

/* ------------------------------------------------------------------ FOR YOU
   A separate section, never a re-order of the main view. It carries no
   explanation and no number, so the only chrome it gets is its own heading. */
#fy[hidden], .fy[hidden]{ display:none; }
.fy-fix{
  font-size:14px; font-weight:700; color:var(--cyan-text); background:none;
  border:0; padding:4px 2px; cursor:pointer; white-space:nowrap;
  transition:color .18s var(--ease);
}
.fy-fix:hover{ color:var(--navy); }
.fy-card{ position:relative; display:flex; flex-direction:column; }
.fy-card h3{ font-size:15.5px; color:var(--navy); letter-spacing:-.012em; line-height:1.28; }
.fy-card .small.muted{ margin-top:3px; }
.fy-card .quote, .fy-card > p.small:not(.muted){ margin-top:9px; }
.fy-card .src{ margin-top:auto; padding-top:10px; }
.fy-when{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal-text); margin-bottom:7px;
}
.fy-skip{
  align-self:flex-start; margin-top:10px; background:none; border:0; cursor:pointer;
  font-size:12px; color:var(--ink-25); padding:3px 0; text-decoration:underline;
  text-underline-offset:2px; transition:color .18s var(--ease);
}
.fy-skip:hover{ color:var(--ink-60); }

/* -------------------------------------------------------------- CORRECT ME
   Whatever is said in here outranks whatever was inferred, permanently. */
.fixsheet{
  position:fixed; inset:0; z-index:80; background:rgba(1,28,87,.42);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fx-fade .22s var(--ease);
}
@media (min-width:721px){ .fixsheet{ align-items:center; } }
@keyframes fx-fade{ from{ opacity:0 } to{ opacity:1 } }
.fx-in{
  background:#fff; border-radius:var(--r-l) var(--r-l) 0 0; padding:26px 24px 30px;
  width:100%; max-width:560px; max-height:88vh; overflow:auto; position:relative;
  box-shadow:var(--shadow-3); animation:fx-rise .3s var(--ease);
}
@media (min-width:721px){ .fx-in{ border-radius:var(--r-l); } }
@keyframes fx-rise{ from{ transform:translateY(18px) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){
  .fixsheet, .fx-in{ animation:none; }
}
.fx-in h2{ font-size:21px; color:var(--navy); letter-spacing:-.02em; padding-right:34px; }
.fx-x{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink-40); font-size:19px;
  line-height:1; cursor:pointer;
}
.fx-x:hover{ background:var(--pale); color:var(--navy); }
.fx-lab{
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cyan-text); margin:22px 0 10px;
}
.fx-row{ display:flex; gap:8px; flex-wrap:wrap; }
/* these chips are the visitor's own voice, so they are not system labels */
.fx-row .chip{
  text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600;
  padding:7px 13px; cursor:pointer; color:var(--ink-60);
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.fx-row .chip:hover{ border-color:var(--cyan); color:var(--navy); }
.fx-row .chip.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.fx-row .chip.off{
  background:var(--pale); border-color:var(--line); color:var(--ink-25);
  text-decoration:line-through;
}
.fx-where{ display:flex; gap:9px; }
.fx-where input{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--r-s);
  padding:11px 13px; font:inherit; font-size:15px; color:var(--ink); background:#fff;
}
.fx-where input:focus{ outline:2px solid var(--cyan); outline-offset:1px; border-color:var(--cyan); }
.fx-foot{ margin-top:22px; font-size:13px; color:var(--ink-40); line-height:1.6; }

/* ----------------------------------------------------------------- THE ASK
   A featured page, in the manner of the Class Sails calculator: one big box,
   the mascot beside it, and the questions people actually arrive with already
   written out and clickable. */
.ask-hero{ background:var(--pale); border-bottom:1px solid var(--line); padding:52px 0 46px; }
.ask-in{ max-width:820px; margin:0 auto; padding:0 24px; }
.ask-top{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.ask-top img{ width:64px; height:64px; flex:none; }
.ask-top h1{ font-size:clamp(28px,4.4vw,42px); color:var(--navy); letter-spacing:-.028em; line-height:1.06; }
.ask-lede{ font-size:16.5px; color:var(--ink-60); line-height:1.62; max-width:60ch; }
.ask-bar{
  display:flex; gap:10px; margin-top:24px; background:#fff; padding:8px;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2);
}
.ask-bar input{
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:17px;
  padding:13px 14px; color:var(--ink);
}
.ask-bar input:focus{ outline:2px solid var(--cyan); outline-offset:-2px; border-radius:var(--r-s); }
.ask-bar button{ flex:none; }
.ask-ex{ margin-top:20px; }
.ask-ex .fx-lab{ margin-top:0; }
.ask-ex-row{ display:flex; gap:9px; flex-wrap:wrap; }
.ask-ex-row button{
  background:#fff; border:1px solid var(--line); border-radius:999px; cursor:pointer;
  padding:9px 15px; font:inherit; font-size:14px; color:var(--ink-60); text-align:left;
  transition:border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.ask-ex-row button:hover{ border-color:var(--cyan); color:var(--navy); transform:translateY(-1px); }
.ask-said{
  margin-top:26px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:16px; color:var(--navy); font-weight:600;
}
.ask-said .fy-fix{ font-size:14px; }
.ask-quiz{ background:var(--navy); color:#fff; }
.ask-quiz h2{ font-size:26px; letter-spacing:-.02em; }
.ask-quiz p{ color:rgba(255,255,255,.78); font-size:15.5px; margin-top:8px; max-width:56ch; }
.ask-quiz .grid{ margin-top:24px; }
.ask-quiz a.card{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); box-shadow:none;
  display:block; color:#fff;
}
.ask-quiz a.card:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.34); }
.ask-quiz a.card h3{ font-size:16px; color:#fff; }
.ask-quiz a.card p{ font-size:13.5px; margin-top:6px; color:rgba(255,255,255,.7); }

/* --------------------------------------------------------------- THE PROFILE
   The transparency lives in here, as a section of the person's own page. It is
   not a reassurance page and there is no separate one. */
.pf-grid{ display:grid; grid-template-columns:1fr 340px; gap:34px; align-items:start; }
.pf-roles{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
/* Real buttons now (role selection), not display-only spans -- same visual
   language as .fx-row .chip above: navy when selected, cyan border on hover. */
.pf-roles .chip{
  text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600;
  cursor:pointer; min-height:36px;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.pf-roles .chip:hover{ border-color:var(--cyan); color:var(--navy); }
.pf-roles .chip.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.led{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.led .row{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  border-bottom:1px solid var(--line-2); font-size:14.5px;
}
.led .row:last-child{ border-bottom:0; }
.led .w{ flex:1; min-width:0; color:var(--ink); }
.led .t{ flex:none; font-size:12px; color:var(--ink-25); white-space:nowrap; }
.led .x{
  flex:none; background:none; border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; font:inherit; font-size:12.5px; color:var(--ink-40); cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.led .x:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.led .row.fix .w{ font-weight:600; color:var(--navy); }
.danger{
  margin-top:16px; background:#fff; border:1px solid #F0C6BA; color:#B03A21;
  border-radius:999px; padding:10px 20px; font:inherit; font-size:14px; font-weight:700;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease);
}
.danger:hover{ background:#B03A21; border-color:#B03A21; color:#fff; }
.never{ padding-left:19px; line-height:1.8; color:var(--ink-60); font-size:14.5px; }
.never li::marker{ color:var(--cyan); }
@media (max-width:900px){
  .pf-grid{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:640px){
  .ask-hero{ padding:36px 0 32px; }
  .ask-top img{ width:48px; height:48px; }
  .ask-bar{ flex-direction:column; }
  .ask-bar button{ width:100%; }
  .led .row{ flex-wrap:wrap; gap:6px 12px; }
  .led .t{ order:3; width:100%; }
}

/* ------------------------------------------------- target size, measured not judged
   Measured at 390: Not this was 42x23, Not right? 70x28 and the per-line Forget
   62x28. WCAG 2.2 AA wants 24x24 and the Forget button is the most important
   control on the profile, so it gets a real one. Padding only — no layout moves. */
.fy-skip{ padding:8px 0; min-height:32px; }
.fy-fix{ padding:7px 2px; min-height:32px; }
.led .x{ padding:9px 15px; min-height:38px; }
.fx-row .chip{ min-height:36px; }
.ask-ex-row button{ min-height:38px; }

/* ── THE MASCOT'S OWN WORK, INSIDE THE BUBBLE, ON EVERY PAGE.
   These were built on one page and the spec says every page. Same engine,
   second renderer — never a second brain. */
.gb-ask,.gb-off{margin-top:14px;padding-top:13px;border-top:1px solid rgba(0,0,0,.09)}
.gb-q{margin:0 0 9px;font-size:14.5px;line-height:1.45}
.gb-chips{display:flex;flex-wrap:wrap;gap:6px}
.gb-chips button{padding:6px 11px;border-radius:99px;font-size:13px;cursor:pointer;
  font-family:inherit;border:1px solid var(--line,#DDE5EA);
  background:var(--wash,#F3F7FA);color:inherit;transition:background .14s}
.gb-chips button:hover{background:var(--card,#fff);border-color:var(--ink,#022B83)}
.gb-form{display:flex;gap:7px}
.gb-form input{flex:1 1 auto;min-width:0;padding:8px 11px;border-radius:9px;
  font-size:14px;font-family:inherit;border:1px solid var(--line,#DDE5EA)}
.gb-skip{margin-top:8px;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--dim,#5C7180);text-decoration:underline}
.gb-off-w{margin:0 0 7px;font-size:12.5px;color:var(--dim,#5C7180);line-height:1.45}
.gb-off-row{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;
  color:inherit;background:var(--wash,#F3F7FA);border:1px solid var(--line,#DDE5EA)}
.gb-off-row:hover{border-color:var(--ink,#022B83)}
.gb-off-row b{display:block;font-size:14.5px;line-height:1.3}
.gb-off-row span{display:block;margin-top:2px;font-size:12.5px;color:var(--dim,#5C7180)}