/* Updates by email (12 Oct 2026).

   The sign up box: a compact one at the top of every public page's footer,
   and a fuller one on the home page. Both are the same markup, run by
   assets/subscribe.js, and post to the operator's /api/subscribe, which
   sends a confirmation email (double opt in) before anyone is added.

   A stylesheet, not styles carried in the script like products.js: the box
   is static markup in the page, so its styles have to be there before the
   first paint or the footer would jump when the script arrived.

   It is used on the pages that load assets/madar.css and on the legal pages
   that do not, so every token has its brand value as a fallback, and every
   rule is scoped under .sub with its own margins, faces and sizes, because
   the legal pages style bare p, h2 and a, and madar.css sets the footer in
   mono at 12px.

   Colour discipline: no copper here except the focus ring and the caret.
   The button is not the one thing on the page that needs the reader, so it
   is the quiet button, and a ticked box is a light fill, not an accent. */

.sub{
  --sub-panel:var(--panel,#0D111A); --sub-field:var(--panel-2,#151A23);
  --sub-line:var(--line,rgba(155,193,224,.11)); --sub-line-2:var(--line-2,rgba(155,193,224,.2)); --sub-line-3:var(--line-3,rgba(155,193,224,.34));
  --sub-text:var(--text,#EAEEF6); --sub-dim:var(--dim,#8B95A8); --sub-faint:var(--faint,#7A8497);
  --sub-ice:var(--ice,#9BC1E0); --sub-copper:var(--copper,#F2926B); --sub-stop:var(--stop,#E08585);
  --sub-void:var(--void,#07090D);
  --sub-display:var(--display,"Space Grotesk",system-ui,sans-serif);
  --sub-body:var(--body,"Inter",system-ui,sans-serif);
  --sub-mono:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  --sub-ease:cubic-bezier(.16,1,.3,1);
  font-family:var(--sub-body);font-size:15px;line-height:1.6;color:var(--sub-text);
  letter-spacing:normal;text-transform:none;text-align:start;position:relative
}
.sub *,.sub *::before,.sub *::after{box-sizing:border-box}
.sub p{margin:0;color:inherit}
.sub fieldset{border:0;margin:0;padding:0;min-width:0}
.sub legend{padding:0}

/* the heading and its line */
.sub .sub-h{font-family:var(--sub-display);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--sub-text);margin:0;text-wrap:balance}
.sub .sub-lede{margin-top:8px;color:var(--sub-dim);font-size:14.5px;line-height:1.65;max-width:46ch}

/* the fields */
.sub-body{display:grid;gap:20px;min-width:0}
.sub-body[hidden]{display:none}
.sub-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:end}
.sub-field{display:grid;gap:7px;min-width:0}
.sub .sub-k{font-family:var(--sub-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub-dim);line-height:1.4}
.sub .sub-k i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--sub-faint)}
.sub input[type="email"],.sub input[type="text"]{
  width:100%;height:46px;padding:0 14px;font:16px/1.2 var(--sub-body);color:var(--sub-text);
  background:var(--sub-field);border:1px solid var(--sub-line-2);border-radius:10px;
  caret-color:var(--sub-copper);-webkit-appearance:none;appearance:none;
  transition:border-color .16s var(--sub-ease)
}
.sub input::placeholder{color:var(--sub-faint)}
@media (hover:hover) and (pointer:fine){.sub input[type="email"]:hover,.sub input[type="text"]:hover{border-color:var(--sub-line-3)}}
.sub input[type="email"]:focus-visible,.sub input[type="text"]:focus-visible{outline:2px solid var(--sub-copper);outline-offset:2px;border-radius:10px;border-color:var(--sub-line-3)}
.sub input[aria-invalid="true"]{border-color:var(--sub-stop)}
.sub input:disabled{opacity:.55;cursor:not-allowed}

/* the lists: real checkboxes, drawn over, each row a 44px target */
.sub-lists legend{font-family:var(--sub-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub-dim);line-height:1.4;margin-bottom:6px}
.sub-opt{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;min-height:44px;padding:10px 0;cursor:pointer;border-top:1px solid var(--sub-line)}
.sub-opt:first-of-type{border-top:0}
.sub-opt input{position:absolute;left:0;top:10px;width:20px;height:20px;margin:0;opacity:0;cursor:pointer}
.sub-box{position:relative;width:20px;height:20px;margin-top:1px;border:1px solid var(--sub-line-3);border-radius:4px;background:var(--sub-field);transition:background-color .14s var(--sub-ease),border-color .14s var(--sub-ease)}
.sub-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--sub-void);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .12s var(--sub-ease)}
.sub-opt input:checked + .sub-box{background:var(--sub-text);border-color:var(--sub-text)}
.sub-opt input:checked + .sub-box::after{opacity:1}
.sub-opt input:focus-visible + .sub-box{outline:2px solid var(--sub-copper);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.sub-opt:hover .sub-box{border-color:var(--sub-ice)}}
.sub-opt input:disabled,.sub-opt input:disabled ~ *{cursor:not-allowed}
.sub-opt input:disabled ~ .sub-box,.sub-opt input:disabled ~ .sub-t{opacity:.55}
.sub-lists[aria-invalid="true"] .sub-box{border-color:var(--sub-stop)}
.sub-t{display:grid;gap:2px;min-width:0}
.sub-t b{font-weight:500;color:var(--sub-text);font-size:15px;line-height:1.4}
.sub-t span{color:var(--sub-dim);font-size:13.5px;line-height:1.55}

/* consent, the button, the answer */
.sub .sub-consent{color:var(--sub-dim);font-size:13px;line-height:1.6;max-width:64ch}
.sub .sub-consent a{color:var(--sub-ice);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;white-space:nowrap}
.sub-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.sub .sub-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;
  font-family:var(--sub-display);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  color:var(--sub-text);background:var(--sub-field);border:1px solid var(--sub-line-3);border-radius:10px;cursor:pointer;
  transition:border-color .16s var(--sub-ease),background-color .16s var(--sub-ease),transform .16s var(--sub-ease)
}
@media (hover:hover) and (pointer:fine){.sub .sub-btn:hover{border-color:var(--sub-ice);background:var(--raise,#171D2C)}}
.sub .sub-btn:active{transform:scale(.97)}
.sub .sub-btn:focus-visible{outline:2px solid var(--sub-copper);outline-offset:3px}
.sub .sub-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.sub .sub-status{font-size:13.5px;line-height:1.55;color:var(--sub-dim);min-height:1.55em;flex:1 1 220px}
.sub .sub-status.is-err{color:var(--sub-stop)}
/* the field people never see: off screen upwards, never sideways. Pushed
   left it widened the right to left Arabic guide, and pushed right it
   overflowed its own box there */
.sub .sub-hp{position:absolute;top:-10000px;left:50%;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* after a good answer, the form body goes and the answer takes its place */
.sub-done{display:grid;gap:6px}
.sub-done[hidden]{display:none}
.sub-done:focus{outline:none}
.sub-done:focus-visible{outline:2px solid var(--sub-copper);outline-offset:4px;border-radius:4px}
.sub .sub-done b{font-family:var(--sub-display);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--sub-text)}
.sub .sub-done span{color:var(--sub-dim);font-size:14px;line-height:1.6}
.sub .sub-done code{font-family:var(--sub-mono);font-size:13px;color:var(--sub-ice);overflow-wrap:anywhere}

/* ---------------------------------------------------------- the footer box */
.sub-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(20px,4vw,56px);
  padding:clamp(24px,3vw,32px);margin-bottom:34px;background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:16px}
/* the legal pages lay their footer out as one wrapping row of links, in a
   720px column, which is too narrow for the box's two columns */
footer.wrap > .sub-foot{flex:1 1 100%;margin-bottom:8px;grid-template-columns:minmax(0,1fr);gap:20px}

/* ------------------------------------------------------- the home page block */
.sub-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,5vw,72px);align-items:start}
.sub-home .sub-h{font-size:var(--t-h2,clamp(26px,3.7vw,42px));line-height:1.08;letter-spacing:-.018em;max-width:16ch;text-wrap:pretty}
.sub-home .sub-lede{margin-top:16px;font-size:var(--t-lede,clamp(16px,1.5vw,19px));line-height:1.7;max-width:40ch}

@media (max-width:900px){
  .sub-foot,.sub-home{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .sub-row{grid-template-columns:minmax(0,1fr)}
  .sub-foot{padding:22px 18px}
  .sub .sub-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .sub .sub-btn:active{transform:none}
}