/* ==========================================================================
   FILE          assets/aes-account.css
   UPLOAD TO     public_html/assets/aes-account.css
   WHAT IT IS    THE ACCOUNT PAGES AND THE CONSENT BANNER

   A SEPARATE FILE ON PURPOSE. assets/aes.css is the site's foundation and
   is deliberately left byte-for-byte as it was; every new rule lives here
   instead. If any of this ever has to be undone, deleting one file and one
   <link> undoes it, with no risk to the forty-two pages that were already
   working.

   Every colour below is a variable already declared in aes.css. Nothing new
   is introduced to the palette, which is why these pages look like the rest
   of the site rather than like an add-on.
   ========================================================================== */

/* ---- layout ------------------------------------------------------------ */
.acc-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:34px; align-items:start;
}
@media(max-width:900px){ .acc-grid{ grid-template-columns:1fr } }

.acc-main{ min-width:0 }
.acc-side{ min-width:0; display:flex; flex-direction:column; gap:22px }

.acc-h2{ margin:0 0 10px }
.acc-lead{ color:var(--mute); margin:0 0 22px; max-width:66ch; line-height:1.6 }
.acc-rule{ border:0; border-top:1px solid var(--line); margin:46px 0 40px }

/* ---- panels ------------------------------------------------------------ */
.acc-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:28px 28px 26px; margin:0 0 22px;
}
.acc-card h2{ margin:0 0 16px; font-size:clamp(19px,2vw,23px) }
.acc-card h3{ margin:0 0 12px }
.acc-card p{ color:var(--steel); line-height:1.62; margin:0 0 14px }
.acc-card--quiet{ background:rgba(21,40,56,.55) }
.acc-card--danger{ border-color:rgba(210,34,43,.5); background:rgba(210,34,43,.06) }
.acc-card--danger p{ color:var(--steel) }

/* ---- messages ---------------------------------------------------------- */
.acc-flash{
  padding:13px 17px; border-radius:6px; margin:0 0 22px;
  font-size:15px; line-height:1.55;
}
.acc-flash--good{ background:rgba(46,127,194,.12); border:1px solid rgba(46,127,194,.5); color:#CFE4FF }
.acc-flash--bad { background:var(--red-soft);       border:1px solid rgba(210,34,43,.55); color:#FFB4B8 }

.acc-note{
  color:var(--mute); font-size:14px; line-height:1.6; margin:14px 0 0;
}
.acc-note--panel{
  background:rgba(46,127,194,.08); border:1px solid rgba(46,127,194,.3);
  border-radius:var(--r); padding:16px 20px; margin:0 0 26px;
  color:var(--steel); font-size:14.5px;
}
.acc-note a{ color:var(--halo) }

/* ---- lists and definition pairs ---------------------------------------- */
.acc-list{ margin:0; padding-left:20px; color:var(--steel); line-height:1.62 }
.acc-list li{ margin-bottom:10px }

.acc-dl{ margin:0; font-size:14.5px }
.acc-dl dt{
  font-family:"Share Tech Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); margin-top:14px;
}
.acc-dl dt:first-child{ margin-top:0 }
.acc-dl dd{ margin:4px 0 0; color:var(--steel); word-break:break-word; line-height:1.55 }

/* ---- checkboxes -------------------------------------------------------- */
.acc-consent{
  background:rgba(15,30,46,.6); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px;
}
.acc-check{
  display:grid; grid-template-columns:22px 1fr; gap:13px;
  align-items:start; margin:18px 0; cursor:pointer;
  color:var(--steel); font-size:15px; line-height:1.6;
}
.acc-check input{
  width:19px; height:19px; margin:2px 0 0; accent-color:var(--blue); cursor:pointer;
}
.acc-check a{ color:var(--halo) }

/* ---- action rows ------------------------------------------------------- */
.acc-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; align-items:center }
.acc-acts--sticky{
  position:sticky; bottom:0; z-index:5;
  padding:16px 0 18px; margin-top:26px;
  background:linear-gradient(180deg,rgba(15,30,46,0),var(--wall) 34%);
}
.acc-signout{ margin-top:4px }

/* ---- the two mode cards ------------------------------------------------ */
.acc-modes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:22px; margin-bottom:18px;
}
.acc-mode{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 24px; transition:border-color .18s, background .18s;
}
.acc-mode:hover{ border-color:rgba(201,212,224,.3); background:var(--panel-2) }
.acc-mode--on{ border-color:var(--blue); background:var(--blue-soft) }
.acc-mode__tag{
  display:inline-block; font-family:"Share Tech Mono",monospace;
  font-size:11px; letter-spacing:.2em; color:var(--halo); margin-bottom:10px;
}
.acc-mode h3{ margin:0 0 10px }
.acc-mode p{ color:var(--mute); font-size:15px; line-height:1.6; margin:0 0 20px }

/* ---- the settings editor ----------------------------------------------- */
.acc-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.acc-saved{
  margin-left:auto; font-family:"Share Tech Mono",monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
}
.acc-saved--ok { color:#9DC6FF }
.acc-saved--bad{ color:#FFB4B8 }

.acc-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:22px;
}
.acc-fcard{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 24px 8px;
}
.acc-fcard h3{ margin:0 0 6px }
.acc-fnote{ color:var(--mute); font-size:14px; margin:0 0 20px; line-height:1.55 }

.acc-frow{ padding:0 0 20px; margin-bottom:18px; border-bottom:1px solid var(--line-soft) }
.acc-frow:last-child{ border-bottom:0 }
.acc-frow > label{
  display:block; font-family:"Share Tech Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:5px;
}
.acc-frow > label b{ color:var(--halo); font-weight:400; margin-left:6px }
.acc-frowhelp{ color:var(--mute); font-size:13.5px; line-height:1.55; margin:0 0 12px }

.acc-sliderow{ display:grid; grid-template-columns:1fr 92px; gap:12px; align-items:center }
.acc-sliderow input[type=range]{ width:100%; accent-color:var(--blue); cursor:pointer }
.acc-num,
.acc-colrow input[type=text]{
  background:var(--wall); border:1px solid var(--line); border-radius:6px;
  color:var(--white); font-family:"Share Tech Mono",monospace; font-size:13px;
  padding:8px 10px; width:100%;
}
.acc-num:focus,
.acc-colrow input[type=text]:focus{ border-color:var(--blue); outline:none }

.acc-colrow{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center }
.acc-colrow input[type=color]{
  width:56px; height:38px; padding:0; cursor:pointer;
  background:var(--wall); border:1px solid var(--line); border-radius:6px;
}

/* ==========================================================================
   THE CONSENT BANNER
   Anchored bottom-left so it can never sit on top of the soundtrack player,
   which is fixed to the bottom-right on every page. On a narrow screen it
   spans the width and lifts clear of the player instead.
   ========================================================================== */
.aes-consent{
  position:fixed; left:22px; bottom:22px; z-index:300;
  max-width:560px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0; transform:translateY(14px);
  transition:opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1);
}
.aes-consent.is-in{ opacity:1; transform:translateY(0) }
.aes-consent__in{ padding:22px 24px 20px }
.aes-consent__t{
  color:var(--steel); font-size:14.5px; line-height:1.6; margin:0 0 16px;
}
.aes-consent__t b{ color:var(--white) }
.aes-consent__acts{ display:flex; flex-wrap:wrap; gap:10px }
.aes-consent__acts .btn{ font-size:12px; padding:10px 15px }

@media(max-width:820px){
  .aes-consent{ left:14px; right:14px; bottom:96px; max-width:none }
}
@media(prefers-reduced-motion:reduce){
  .aes-consent{ transition:none; opacity:1; transform:none }
}