/* ============================================================
   13-consent.css
   The privacy banner and the "Privacy settings" dialog (js/consent.js).
   Loaded by the app and by legal/datenschutz.html, so it reads only the
   tokens from 01-tokens.css and styles its own buttons.
   "Reject all" and "Accept all" share one class on purpose: the same size,
   colour and weight is what the DSK and the EDPB ask for.
   ============================================================ */

/* Just under the app's dialogs (.modal-back is 60), above everything else on
   the page: at 95 it sat on top of an open dialog and covered its buttons —
   "Use the cloud copy" at the first sign-in, for one. A dialog now dims the
   banner while it is open; it is answerable again as soon as the dialog
   closes. "Customize" opens a native <dialog>, which is above both anyway. */
.cc-banner{
  position:fixed; z-index:59; left:18px; bottom:18px; width:min(460px, calc(100vw - 36px));
  max-height:calc(100vh - 36px); overflow:auto;
  display:flex; flex-direction:column; gap:10px; padding:18px 18px 12px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-3); border-radius:var(--r3); box-shadow:var(--shadow);
  animation:ccIn .22s ease;
}
.cc-banner:focus{outline:none;}
.cc-banner h2, .cc-dialog h2{font-size:22px; letter-spacing:.03em; margin:0;}
.cc-text p{margin:0 0 7px; font-size:13.5px; line-height:1.5; color:var(--text-dim);}
.cc-text p:last-child{margin-bottom:0;}
.cc-links{margin:0; font-size:13px; color:var(--text-faint);}
.cc-links a, .cc-note a, .cc-purpose a{color:var(--text-dim); text-decoration:underline;}

.cc-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.cc-btn{
  font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; min-height:44px; padding:10px 14px;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--r1);
}
.cc-btn:hover{background:var(--accent-hi); border-color:var(--accent-hi);}
.cc-more{
  align-self:center; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  background:none; border:none; color:var(--text); text-decoration:underline; padding:6px 10px; min-height:36px;
}
.cc-more:hover{color:var(--accent-hi);}

/* ---------- the dialog ---------- */
.cc-dialog{
  width:min(640px, calc(100vw - 24px)); max-height:min(88vh, 900px); padding:0; margin:auto;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r3); box-shadow:var(--shadow);
}
.cc-dialog[open]{display:flex; flex-direction:column;}
.cc-dialog::backdrop{background:rgba(4,5,7,.8);}
.cc-dlg-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 8px;}
.cc-x{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:24px; line-height:1;
  background:none; border:1px solid transparent; color:var(--text-dim);
}
.cc-x:hover{background:var(--surface-2); color:var(--text);}
.cc-dlg-body{overflow:auto; padding:4px 20px 12px; display:flex; flex-direction:column; gap:12px;}
.cc-intro{margin:0; font-size:14px; line-height:1.55; color:var(--text-dim);}
.cc-purpose{background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r2); padding:13px 14px;}
.cc-row{display:flex; align-items:flex-start; gap:14px;}
.cc-head{flex:1; min-width:0;}
.cc-head h3{font-size:17px; margin:0 0 3px;}
.cc-head p{margin:0; font-size:13px; line-height:1.5; color:var(--text-dim);}
.cc-always{
  flex:0 0 auto; font-size:12px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  color:var(--ok); background:var(--ok-soft); border-radius:20px; padding:4px 10px; margin-top:2px;
}
.cc-purpose details{margin-top:8px; font-size:13px; color:var(--text-dim);}
.cc-purpose summary{cursor:pointer; font-weight:600; color:var(--text); padding:4px 0; width:max-content;}
.cc-purpose details p{margin:6px 0; line-height:1.5;}
.cc-table{width:100%; border-collapse:collapse; margin:6px 0; font-size:12.5px;}
.cc-table th, .cc-table td{text-align:left; vertical-align:top; padding:6px 8px 6px 0; border-bottom:1px solid var(--line-2); line-height:1.4;}
.cc-table th{color:var(--text); font-weight:600;}
.cc-note{margin:0; font-size:12.5px; line-height:1.5; color:var(--text-faint);}
.cc-meta{margin:0; font-size:12.5px; line-height:1.5; color:var(--text-faint);}
.cc-meta code{font-size:12px; color:var(--text-dim); word-break:break-all;}
.cc-dlg-foot{grid-template-columns:1fr 1fr 1fr; padding:12px 20px 18px; border-top:1px solid var(--line);}

/* the on/off switch (the same look as Settings' .cfg-switch) */
.cc-switch{
  position:relative; flex:0 0 46px; width:46px; height:28px; border-radius:14px; padding:0; margin-top:2px; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line-2); transition:background .16s, border-color .16s;
}
.cc-knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--text-dim); transition:transform .16s, background .16s;
}
.cc-switch[aria-checked="true"]{background:var(--accent); border-color:var(--accent);}
.cc-switch[aria-checked="true"] .cc-knob{transform:translateX(18px); background:var(--on-accent);}
.cc-switch:disabled{opacity:.4; cursor:not-allowed;}

/* the footer links and the note under "Create account" */
.legal-links .link-btn{font:inherit; background:none; border:none; padding:0; cursor:pointer; color:var(--text-faint);}
.legal-links .link-btn:hover{color:var(--text-dim);}
.auth-fine{margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--text-faint);}
.auth-fine a{color:var(--text-dim); text-decoration:underline;}
/* Turnstile: invisible unless it needs a click; then it sits above the buttons */
.auth-captcha.ask{margin-bottom:10px;}

@keyframes ccIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

@media (max-width:960px){
  /* over the bottom tab bar until a choice is made */
  .cc-banner{left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom)); max-height:calc(100vh - 20px);}
}
@media (max-width:520px){
  .cc-dlg-foot{grid-template-columns:1fr 1fr;}
  .cc-dlg-foot .cc-btn:last-child{grid-column:1 / -1;}
  .cc-dlg-head{padding:14px 14px 6px;}
  .cc-dlg-body{padding:4px 14px 10px;}
  .cc-dlg-foot{padding:10px 14px 14px;}
}
@media (prefers-reduced-motion: reduce){
  .cc-banner{animation:none;}
  .cc-switch, .cc-knob{transition:none;}
}
body.reduce-motion .cc-banner{animation:none;}
body.reduce-motion .cc-switch, body.reduce-motion .cc-knob{transition:none;}