/* =========================================================================
   FREE SAILING — saying what you're after, and the two small forms.

   Everything here is prefixed .dm- or .sy- and lives inside its own block, so
   loading this stylesheet on a page cannot move anything already on it. No
   token is declared here; every colour, radius and shadow is one already in
   site.css.
   ========================================================================= */

/* --------------------------------------------------------------- the block */
.dm{ display:block; }
.dm-card{
  background:linear-gradient(168deg,#F7FBFE,#EEF3F8 88%);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dm.is-thin .dm-card{
  border-color:#BFE7FA;
  box-shadow:var(--shadow-2);
}
.dm-bd{ padding:28px 30px 30px; }
.dm-h{
  margin-top:9px; font-size:26px; line-height:1.16; letter-spacing:-.02em;
  color:var(--navy);
}
.dm-lead{
  margin-top:11px; max-width:62ch; color:var(--ink-60);
  font-size:15px; line-height:1.55;
}
/* --------------------------------------------------------- what you said
   Same visual language as profile.html's own "on this device" ledger
   (.led/.row/.x, assets/css/blm.css) — kept as its own .dm- rule set here
   rather than a shared class, because blm.css is not loaded on every page
   this widget mounts on (this file already is, everywhere). Values match
   blm.css exactly, including the WCAG target-size fix already measured
   there (.dm-x padding/min-height) — no need to re-discover it. */
.dm-prior{ margin-top:16px; }
.dm-prior-lb{
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-25);
}
.dm-led{
  margin-top:8px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; overflow:hidden;
}
.dm-row{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  border-bottom:1px solid var(--line-2); font-size:14.5px;
}
.dm-row:last-child{ border-bottom:0; }
.dm-w{ flex:1; min-width:0; color:var(--ink); }
.dm-t{ flex:none; font-size:12px; color:var(--ink-25); white-space:nowrap; }
.dm-x{
  flex:none; background:none; border:1px solid var(--line); border-radius:999px;
  padding:9px 15px; min-height:38px; 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);
}
.dm-x:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.dm-prior-note{
  margin-top:8px; max-width:62ch; color:var(--ink-25); font-size:12.5px;
}

/* ------------------------------------------------------------------- form */
.dm-form{ margin-top:22px; }
.dm-set{ border:0; padding:0; margin:0; }
.dm-lg{
  padding:0; font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-25);
}
.dm-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.dm-chip{ display:inline-flex; }
.dm-chip input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.dm-chip span{
  display:inline-block; padding:9px 15px; border:1px solid var(--line);
  border-radius:999px; background:var(--white); color:var(--ink-60);
  font-size:13.5px; line-height:1.25; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.dm-chip span:hover{ border-color:#BFE7FA; color:var(--navy); }
.dm-chip input:checked + span{
  background:var(--navy); border-color:var(--navy); color:#fff;
}
.dm-chip input:focus-visible + span{
  outline:2px solid var(--cyan); outline-offset:2px;
}

.dm-lb{
  display:block; margin-top:18px; margin-bottom:6px;
  font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-25);
}
.dm-in{
  width:100%; max-width:100%; box-sizing:border-box;
  padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--white); color:var(--ink); font:inherit; font-size:14.5px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dm-in::placeholder{ color:var(--ink-25); }
.dm-in:focus{
  outline:0; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(2,162,238,.16);
}
textarea.dm-in{ min-height:118px; resize:vertical; line-height:1.5; }
select.dm-in{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C6B74' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

.dm-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dm-two .dm-lb{ margin-top:18px; }

.dm-go{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px;
}
.dm-note{ color:var(--ink-25); font-size:12.5px; max-width:46ch; line-height:1.45; }
.dm-err{
  margin-top:12px; color:var(--orange-text); font-size:13.5px; font-weight:600;
}

/* ------------------------------------------------------------ thank you */
.dm-done{
  background:var(--white); border:1px solid #BFE7FA; border-left:3px solid var(--cyan);
  border-radius:var(--r); padding:26px 28px; box-shadow:var(--shadow-1);
}
.dm-done b{ display:block; color:var(--navy); font-size:19px; letter-spacing:-.015em; }
.dm-done span{
  display:block; margin-top:8px; color:var(--ink-60); font-size:14.5px;
  line-height:1.55; max-width:60ch;
}

/* on a dark section the same block keeps its own light card, deliberately —
   it is the one thing on that section a person is meant to reach for */
.band .dm-card{ background:linear-gradient(168deg,#FBFDFF,#EEF3F8 88%); border-color:transparent; }
.band .dm-h{ color:var(--navy); }
.band .dm-lead{ color:var(--ink-60); }

/* ----------------------------------------------------- the two small forms */
.sy-wrap{ max-width:760px; }
.sy-why{
  margin-top:14px; padding:16px 18px; border-radius:var(--r);
  background:var(--pale); color:var(--ink-60); font-size:13.5px; line-height:1.55;
}
.sy-why b{ color:var(--navy); }

@media (max-width:720px){
  .dm-bd{ padding:22px 20px 24px; }
  .dm-h{ font-size:22px; }
  .dm-two{ grid-template-columns:1fr; gap:0; }
  .dm-go{ gap:12px; }
  .dm-go .btn{ width:100%; justify-content:center; }
  .dm-row{ flex-wrap:wrap; gap:6px 12px; }
  .dm-t{ order:3; width:100%; }
}