/* Modal shell — centered with blur scrim; click-to-close only if [data-close] is present */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:10010;
  background:rgba(255,255,255,.55); backdrop-filter:blur(28px) saturate(180%)}
.modal.show{display:flex}
.modal .scrim{position:absolute; inset:0}
.modal .scrim[data-close]{cursor:pointer} /* only close when attribute exists */

.modal .card{
  position:relative; background:#ffffff; color:var(--ink); border-radius:20px;
  width:min(480px,26vw); min-width:560px; box-shadow:var(--shadow);
}
.modal header{padding:22px 24px;border-bottom:1px solid rgba(0,0,0,.1);font-weight:500;font-size:20px}
.modal section{padding:20px; display:grid; gap:14px}
.modal .grid2{grid-template-columns:1fr 1fr}
.modal .grid2 .full{grid-column:1 / -1}
.modal footer{padding:16px 20px; display:flex; justify-content:flex-end; gap:10px}

/* Fields */
.field label{display:block;margin:0 0 6px;color:#555;font-size:12px;font-weight:500}
.field input, .field select{
  height:38px;border-radius:10px;border:none;font-size:14px;background:rgba(0,0,0,.04);color:var(--ink);padding:0 10px;width:100%; margin-bottom: 6px;
}
.field textarea {
	width: 100%;
	min-height: 140px;
	border-radius: 10px;
	border: none;
	background: rgba(0,0,0,.04);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
	padding: 10px;
	resize: vertical;
	font: var(--font-ui);
font-weight:400;
}
.field textarea:focus{background:rgba(0,0,0,.06); outline:none}

/* Login / gate variant card (blue) — used by admin login if needed */
.card.card--gate{background:#2253f4; color:#f3f5f2; border-radius:32px}
.card.card--gate header{color:#f3f5f2; font-size:28px; font-weight:400; letter-spacing:-.02em}
.card.card--gate .field label{color:rgba(255,255,255,.85)}
.card.card--gate input[type="password"],
.card.card--gate input[type="text"],
.card.card--gate input[type="email"]{
  width:100%; height:48px; border-radius:0; background:rgba(255,255,255,.08); color:#f3f5f2; font-size:18px;
  border:none; border-bottom:1px solid rgba(243,245,242,.5); outline:none; padding:0 14px;
}
.card.card--gate footer .btn.brand{
  height:48px; padding:0 18px; border-radius:99px; background:#fff; color:#2253f4; border:none; box-shadow:0 1px 0 rgba(0,0,0,.05)
}

/* Gate modal: ensure Cancel (ghost) matches everywhere (admin + client) */
.card.card--gate footer .btn.ghost{
  height:48px;
  padding:0 18px;
  border-radius:999px;
  background:transparent;
  color:#f3f5f2;
  border:1px solid rgba(243,245,242,.35);
  box-shadow:none;
}
.card.card--gate footer .btn.ghost:hover{
  background:rgba(255,255,255,.08);
}

#apprvlModal .btn.cancel {
	border: 1px solid var(--bad);
	color: var(--bad);
	background: none;
}

#apprvlModal .btn.cancel:hover{
  Border:1px solid #fff; color: #f3f5f2; background: var(--bad);
}

/* Remember-me switch */
.remember-field{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.switch{
  position:relative;
  width:42px;
  height:24px;
  display:inline-block;
  flex:0 0 auto;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.switch .slider{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  transition:background .2s ease, border-color .2s ease;
}
.switch .slider::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.switch input:checked + .slider{
  background:var(--ok);
  border-color:rgba(0,0,0,.0);
}
.switch input:checked + .slider::after{
  transform:translateX(18px);
}
.remember-text {
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	user-select: none;
}

/* ===== Briefr: Admin Brief modal (read-only payload view) ===== */
#briefViewBody.details .kv{
  display: grid;
  gap: 0;
  padding: 14px 18px 18px;
}

#briefViewBody.details .kv .row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

#briefViewBody.details .kv .row:last-child{
  border-bottom: none;
}

#briefViewBody.details .kv .k {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--muted);
	opacity: .9;
	padding-top: 2px;
	font: var(--font-ui);
	font-size: 14px;
}

#briefViewBody.details .kv .v {
	color: var(--ink);
	white-space: pre-wrap;
	word-break: break-word;
	font: var(--font-title);
}

/* Optional: subtle zebra to help scanning without looking “stripy” */
#briefViewBody.details .kv .row:nth-child(2n+1) {
	background: rgba(255,255,255,.03);
	padding: 12px 0;
}

/* ---------- Auth: bad border flash ----------
@keyframes badFlash {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  20%  { box-shadow: 0 0 0 3px var(--bad); }
  40%  { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  60%  { box-shadow: 0 0 0 3px var(--bad); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}*/

/* ---------- Auth: bad border flash + jiggle ---------- */
@keyframes badFlashJiggle {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: translateX(0); }
  10%  { transform: translateX(-3px); }
  20%  { box-shadow: 0 0 0 3px var(--bad); transform: translateX(3px); }
  30%  { transform: translateX(-2px); }
  40%  { box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: translateX(2px); }
  50%  { transform: translateX(-1px); }
  60%  { box-shadow: 0 0 0 3px var(--bad); transform: translateX(1px); }
  70%  { transform: translateX(0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: translateX(0); }
}

/* Apply to the modal card */
.card.flash-bad {
  animation: badFlashJiggle 520ms ease;
  will-change: transform;
}