/* Community kit — modals, buttons, mailing list, live-weather window card.
   Theme with: --ck-accent, --ck-accent-ink, --ck-panel, --ck-text, --ck-dim, --ck-line, --ck-head */
:root{
  --ck-accent:#d7b36a; --ck-accent-ink:#1b1306; --ck-panel:rgba(12,22,40,.94); --ck-raise:rgba(255,255,255,.06);
  --ck-text:#eef1f6; --ck-dim:rgba(238,241,246,.64); --ck-line:rgba(255,255,255,.12); --ck-head:inherit;
}
.ck-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ck-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ck-flag{ width:16px; height:12px; border-radius:2px; object-fit:cover; vertical-align:-1px; }
.ck-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:700; font-size:14px; padding:10px 18px; border-radius:999px; border:0; cursor:pointer; background:var(--ck-accent); color:var(--ck-accent-ink); transition:transform .12s, filter .12s; text-decoration:none; }
.ck-btn:hover{ filter:brightness(1.07); } .ck-btn:active{ transform:scale(.97); } .ck-btn:disabled{ opacity:.55; cursor:default; }
.ck-btn.ghost{ background:var(--ck-raise); color:var(--ck-text); border:1px solid var(--ck-line); }
.ck-google{ background:#fff; color:#1f1f1f; } .ck-x{ background:#000; color:#fff; border:1px solid #333; }
.ck-link{ font:inherit; font-size:13px; color:var(--ck-dim); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:6px 2px; }
.ck-muted{ color:var(--ck-dim); font-size:14px; }

.ck-toast{ position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); opacity:0; z-index:2000; background:rgba(14,20,32,.96); color:#fff; border:1px solid var(--ck-line); padding:11px 18px; border-radius:14px; font-size:14px; box-shadow:0 14px 40px rgba(0,0,0,.45); transition:all .25s; pointer-events:none; max-width:min(92vw,520px); text-align:center; }
.ck-toast.show{ opacity:1; transform:translate(-50%,0); }

.ck-overlay{ position:fixed; inset:0; z-index:1500; background:rgba(2,6,14,.62); backdrop-filter:blur(6px); display:grid; place-items:center; padding:16px; }
.ck-overlay[hidden]{ display:none; }
.ck-modal{ width:min(440px,100%); max-height:92vh; overflow:auto; background:var(--ck-panel); color:var(--ck-text); border:1px solid var(--ck-line); border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.ck-modal-body{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.ck-modal h2{ font-family:var(--ck-head); font-size:22px; margin:0; letter-spacing:.01em; }
.ck-stack{ display:flex; flex-direction:column; gap:10px; }
.ck-stack .ck-btn{ width:100%; padding:12px; }
.ck-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ck-dim); }
.ck-field input, .ck-field select, .ck-field textarea{ font:inherit; font-size:15px; color:var(--ck-text); background:var(--ck-raise); border:1px solid var(--ck-line); border-radius:12px; padding:10px 12px; outline:none; }
.ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus{ border-color:var(--ck-accent); }
.ck-field select option{ color:#111; }
.ck-field small{ font-size:12px; opacity:.8; }
.ck-row-end{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.ck-avrow{ display:flex; align-items:center; gap:14px; }
.ck-avpick{ position:relative; cursor:pointer; }
.ck-av{ width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#3a4d70,#22304c); font-weight:800; font-size:20px; color:#fff; flex-shrink:0; }
.ck-av.lg{ width:72px; height:72px; }
.ck-av img{ width:100%; height:100%; object-fit:cover; }
.ck-avcam{ position:absolute; right:-2px; bottom:-2px; background:var(--ck-accent); border-radius:50%; width:24px; height:24px; display:grid; place-items:center; font-size:12px; }
.ck-pv{ display:flex; gap:16px; align-items:flex-start; } .ck-pv p{ margin:.5em 0 0; color:var(--ck-text); }

/* Mailing list */
.ck-ml-title{ font-family:var(--ck-head); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ck-accent); }
.ck-ml-blurb{ margin:4px 0 10px; font-size:13.5px; color:var(--ck-dim); line-height:1.45; }
.ck-ml-form{ display:flex; gap:8px; flex-wrap:wrap; }
.ck-ml-form input[type=email]{ flex:1 1 180px; min-width:0; font:inherit; font-size:15px; color:var(--ck-text); background:var(--ck-raise); border:1px solid var(--ck-line); border-radius:999px; padding:10px 15px; outline:none; }
.ck-ml-form input[type=email]:focus{ border-color:var(--ck-accent); }
.ck-ml-msg{ font-size:13px; color:#ffb4a8; margin-top:6px; min-height:0; }
.ck-ml-done{ font-size:14px; color:var(--ck-accent); font-weight:600; }

/* Live-weather window card */
.ck-window{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 16px; align-items:center; }
.ck-window > .ck-win-grid, .ck-window > .ck-win-foot{ grid-column:1 / -1; }
.ck-win-frame{ position:relative; flex-shrink:0; width:var(--ck-win-size,132px); height:var(--ck-win-size,132px); margin:9px; }
.ck-win-frame canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ck-porthole .ck-win-frame{ border-radius:50%; padding:0; }
.ck-porthole .ck-win-frame canvas{ border-radius:50%; }
.ck-porthole .ck-win-frame::after{ content:''; position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 4px, #f2d898 0 3px, transparent 3.5px), radial-gradient(circle at 50% calc(100% - 4px), #f2d898 0 3px, transparent 3.5px),
    radial-gradient(circle at 4px 50%, #f2d898 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 4px) 50%, #f2d898 0 3px, transparent 3.5px);
  border:9px solid transparent; box-shadow: 0 0 0 9px #a87d30 inset, 0 0 0 10px #f0d48c inset, 0 0 0 2px #5a3e10, 0 10px 26px rgba(0,0,0,.55); }
.ck-arch .ck-win-frame{ width:var(--ck-win-w,118px); height:var(--ck-win-h,156px); margin:8px; }
.ck-arch .ck-win-frame canvas{ border-radius:65px 65px 6px 6px; }
.ck-arch .ck-win-frame::after{ content:''; position:absolute; inset:-8px; border-radius:73px 73px 10px 10px; pointer-events:none;
  box-shadow: 0 0 0 8px #e9e1d0 inset, 0 0 0 9px #fffaf0 inset, 0 0 0 1px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.55); }
.ck-win-glass{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%); }
.ck-porthole .ck-win-glass{ border-radius:50%; } .ck-arch .ck-win-glass{ border-radius:65px 65px 6px 6px; }
.ck-win-read{ min-width:0; flex:1; }
.ck-win-k{ font-family:var(--ck-head); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ck-accent); }
.ck-win-place{ display:flex; align-items:center; gap:6px; font-size:16px; font-weight:700; margin-top:2px; }
.ck-win-place small{ font-weight:500; color:var(--ck-dim); font-size:13px; }
.ck-win-gps{ font:inherit; font-size:15px; width:26px; height:26px; border-radius:8px; border:1px solid var(--ck-line); background:var(--ck-raise); color:var(--ck-text); cursor:pointer; }
.ck-win-main{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:6px 0 0; }
.ck-win-temp{ font:inherit; font-family:var(--ck-head); font-size:34px; font-weight:700; line-height:1; color:var(--ck-text); background:none; border:0; padding:0; cursor:pointer; }
.ck-win-cond{ font-size:14px; font-weight:600; } .ck-win-feel{ font-size:12.5px; color:var(--ck-dim); }
.ck-win-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; margin:2px 0 0; font-size:12.5px; }
.ck-win-grid div{ display:flex; justify-content:space-between; gap:6px; border-bottom:1px dashed var(--ck-line); padding:2px 0; }
.ck-win-grid dt{ color:var(--ck-dim); } .ck-win-grid dd{ margin:0; font-weight:600; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-arrow{ display:inline-block; transition:transform .6s; }
.ck-win-foot{ font-size:12px; color:var(--ck-dim); margin-top:6px; }
@media (max-width:360px){ .ck-win-grid{ grid-template-columns:1fr; } }