/* ActionStudio v0.3.1 — Google Permission Foundation CSS
 *
 * SS UI Spec v1.1 compliance:
 *   - No border-radius anywhere in product UI
 *   - 0.5px borders, flat surfaces
 *   - --ac / --ss-* tokens only (no hardcoded hex for primary colour)
 *   - 13px body, 15px card titles, 22px page titles
 *   - Button 36px, small 28px
 *   - Inline SVG only (no icon fonts)
 */

/* ═══ Compact card ═══════════════════════════════════════════ */

.as-g-compact {
  padding: 0;
}
.as-g-compact-id {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.as-g-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 12px;
  border-bottom: 0.5px solid var(--b);
  margin-bottom: 12px;
}
.as-g-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  background: var(--sa);
  color: var(--t2);
}
.as-g-chip-ok {
  background: #E8F0E7;
  color: #5B8C5A;
}
html:has(#as-app.as-dark) .as-g-chip-ok {
  background: #1E2F1D;
  color: #7BAE79;
}
.as-g-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ═══ Modal backdrop + shell ══════════════════════════════════ */

.as-g-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.60);         /* v0.3.2.1: bumped .45 → .60 for readability over Settings surface */
  z-index: 10000;                       /* v0.3.2.1: above any inherited stacking context from parent cards */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px 16px;
  overflow-y: auto;
}
/* v0.3.5: selector was [data-mode="dark"] / body.as-dark, neither of which
 * matches the plugin's #as-app.as-dark convention. Use :has() to key off the
 * app root class, which works even though the backdrop is appended to body
 * (outside #as-app). With the :root palette mirror in actionstudio.css the
 * inner modal surface switches automatically via var(--s); only the backdrop
 * dim level needs an explicit override since it's a fixed rgba(). */
html:has(#as-app.as-dark) .as-g-modal-backdrop {
  background: rgba(0,0,0,.75);
}

/* ═══ Wizard ══════════════════════════════════════════════════ */

.as-g-wiz,
.as-g-modal {
  width: 100%;
  max-width: 640px;
  background: var(--s);
  border: 0.5px solid var(--b);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  position: relative;                   /* v0.3.2.1: establish stacking context */
  z-index: 1;                           /* v0.3.2.1: above backdrop's flex children stacking baseline */
}

.as-g-wiz-head,
.as-g-modal-head {
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--b);
}

.as-g-wiz-progress {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--t3);
  margin-bottom: 6px;
}
.as-g-wiz-step-label {
  font-weight: 600; color: var(--t2);
}
.as-g-dots {
  display: flex; gap: 4px; margin-left: auto;
}
.as-g-dot {
  width: 6px; height: 6px;
  background: var(--b);
  transition: all .2s ease;
}
.as-g-dot.done { background: var(--ac); }
.as-g-dot.active {
  background: var(--ac);
  width: 18px;
}

.as-g-wiz-title {
  font-size: 18px; font-weight: 700;
  color: var(--t1);
  margin: 6px 0 4px;
}
.as-g-wiz-sub {
  font-size: 12px;
  color: var(--t2);
}

.as-g-wiz-body {
  padding: 20px;
  min-height: 260px;
  max-height: 60vh;
  overflow-y: auto;
}
/* v0.10.35: generic field styling for any wizard step that uses bare
 * <label>/<input>/<select>/<textarea> content (funnel wizard's Name & goal,
 * Entry steps). Mirrors .as-tray-body's own field rules in actionstudio.css
 * — duplicated rather than reused because .as-tray-body is #as-app-scoped
 * and .as-g-wiz-body is appended to document.body, outside #as-app. */
.as-g-wiz-body label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--t3); margin-bottom: 4px; margin-top: 12px;
}
.as-g-wiz-body label:first-child { margin-top: 0; }
.as-g-wiz-body input[type=text],
.as-g-wiz-body input[type=number],
.as-g-wiz-body input[type=date],
.as-g-wiz-body select,
.as-g-wiz-body textarea {
  width: 100%; padding: 7px 10px; border: 0.5px solid var(--b);
  background: var(--inp-bg); color: var(--t1); font-size: 12px;
  box-sizing: border-box;
}
.as-g-wiz-body textarea { resize: vertical; min-height: 80px; }
.as-g-wiz-body .row { display: flex; gap: 10px; }
.as-g-wiz-body .row > div { flex: 1; }

.as-g-wiz-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-top: 0.5px solid var(--b);
  background: var(--sa);
  gap: 12px;
}
.as-g-foot-left { font-size: 11px; color: var(--t3); }
.as-g-foot-right { display: flex; gap: 8px; }

/* Welcome step */
.as-g-welcome {
  text-align: center; padding: 10px 0;
}
.as-g-welcome-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: var(--acl);
  display: flex; align-items: center; justify-content: center;
  color: var(--ac);
}
.as-g-welcome h2 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 8px;
}
.as-g-welcome p {
  font-size: 13px; color: var(--t2);
  max-width: 440px; margin: 0 auto 14px;
}
.as-g-welcome-list {
  list-style: none; padding: 0; margin: 20px auto 0;
  max-width: 380px; text-align: left;
}
.as-g-welcome-list li {
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--t1);
  border-bottom: 0.5px solid var(--b);
}
.as-g-welcome-list li:last-child { border-bottom: none; }
.as-g-welcome-list li svg {
  color: var(--ac);
  flex: 0 0 auto;
}

/* Scope rows (wizard step 2) */
.as-g-scope-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px;
  border: 0.5px solid var(--b);
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--s);
  transition: background .15s ease, border-color .15s ease;
}
.as-g-scope-row:hover { background: var(--sa); }
.as-g-scope-row.checked {
  border-color: var(--ac);
  background: var(--acl);
}
.as-g-scope-row input[type="checkbox"] {
  margin-top: 2px; flex: 0 0 auto;
  width: 16px; height: 16px;
  accent-color: var(--ac);
}
.as-g-scope-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sa);
  color: var(--t2);
}
.as-g-scope-icon svg {
  width: 16px; height: 16px;
}
.as-g-scope-body { flex: 1; min-width: 0; }
.as-g-scope-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--t1);
}
.as-g-scope-desc {
  margin-top: 2px;
  font-size: 11.5px; color: var(--t2);
  line-height: 1.4;
}

/* Redirecting step */
.as-g-redirecting {
  text-align: center; padding: 30px 0;
}
.as-g-spinner {
  width: 36px; height: 36px;
  margin: 0 auto 16px;
  border: 2.5px solid var(--b);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: as-g-spin 1s linear infinite;
}
@keyframes as-g-spin { to { transform: rotate(360deg); } }
.as-g-redirecting h2 {
  font-size: 16px; font-weight: 700;
  margin: 0 0 6px;
}
.as-g-redirecting p {
  font-size: 12px; color: var(--t2);
  max-width: 380px; margin: 0 auto;
}
.as-g-scopes-sent {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 14px;
  background: var(--sa);
  font-size: 11px; color: var(--t2);
  text-align: left;
}
.as-g-scopes-sent b { color: var(--t1); }

/* Done step */
.as-g-done {
  text-align: center; padding: 10px 0;
}
.as-g-done-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: #E8F0E7;
  display: flex; align-items: center; justify-content: center;
  color: #5B8C5A;
}
html:has(#as-app.as-dark) .as-g-done-icon {
  background: #1E2F1D;
  color: #7BAE79;
}
.as-g-done h2 {
  font-size: 17px; font-weight: 700;
  margin: 0 0 6px;
}
.as-g-done p {
  font-size: 12px; color: var(--t2);
  margin: 0 0 18px;
}
.as-g-done-summary {
  text-align: left; max-width: 400px; margin: 0 auto;
  border: 0.5px solid var(--b);
}
.as-g-done-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--b);
  font-size: 12px;
}
.as-g-done-row:last-child { border-bottom: none; }
.as-g-done-row .lbl {
  flex: 1; color: var(--t1); font-weight: 600;
}

/* ═══ Manage modal ════════════════════════════════════════════ */

.as-g-modal-head {
  display: flex; align-items: center; justify-content: space-between;
}
.as-g-modal-head h2 {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--t1);
}
.as-g-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--t3); padding: 4px;
  display: flex; align-items: center;
}
.as-g-modal-close:hover { color: var(--t1); }
.as-g-modal-close svg {
  width: 18px; height: 18px;
}

.as-g-tabs {
  display: flex; gap: 2px;
  padding: 10px 20px 0;
  border-bottom: 0.5px solid var(--b);
}
.as-g-tab {
  padding: 8px 12px 10px;
  font-size: 12px; font-weight: 600;
  color: var(--t2); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.as-g-tab.active {
  color: var(--ac);
  border-bottom-color: var(--ac);
}
.as-g-tab:hover:not(.active) { color: var(--t1); }

.as-g-modal-body {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.as-g-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 0.5px solid var(--b);
  background: var(--sa);
}

/* Manage-access scope rows */
.as-g-mg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--b);
}
.as-g-mg-row:last-child { border-bottom: none; }
.as-g-mg-icon {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sa); color: var(--t2);
}
.as-g-mg-icon svg {
  width: 15px; height: 15px;
}
.as-g-mg-body { flex: 1; }
.as-g-mg-name {
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.as-g-mg-desc {
  font-size: 11px; color: var(--t3);
  margin-top: 2px;
}

.as-g-note {
  padding: 10px 14px; margin-top: 16px;
  background: var(--acl);
  border-left: 2px solid var(--ac);
  font-size: 11px; color: var(--t2);
}

/* Scope-gated CTA */
.as-g-gated {
  padding: 40px 20px; text-align: center;
  background: var(--sa);
  border: 0.5px dashed var(--b);
}
.as-g-gated-icon {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
}
.as-g-gated-title {
  font-size: 13px; font-weight: 600;
  color: var(--t1);
  margin-bottom: 6px;
}
.as-g-gated-msg {
  font-size: 11.5px; color: var(--t2);
  max-width: 340px; margin: 0 auto 16px;
  line-height: 1.5;
}

/* ═══ 4-state calendar picker ═════════════════════════════════ */

.as-g-cal-row {
  padding: 10px 0;
  border-bottom: 0.5px solid var(--b);
}
.as-g-cal-row:last-child { border-bottom: none; }
.as-g-cal-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.as-g-cal-dot {
  width: 10px; height: 10px;
  flex: 0 0 auto;
}
.as-g-cal-name {
  font-size: 13px; font-weight: 600;
  color: var(--t1);
  flex: 1;
}
.as-g-cal-cur {
  font-size: 10.5px; color: var(--t3);
}
.as-g-cal-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  padding-left: 20px;
}
.as-g-cal-state-opt {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 11px;
}
.as-g-cal-state-opt input[type="radio"] {
  margin-top: 2px; flex: 0 0 auto;
  width: 13px; height: 13px;
  accent-color: var(--ac);
}
.as-g-cal-state-body { flex: 1; }
.as-g-cal-state-title {
  font-weight: 600; color: var(--t1);
  font-size: 11px;
}
.as-g-cal-state-desc {
  font-size: 10px; color: var(--t3);
  line-height: 1.3;
}

/* ═══ Pill (reused from global tokens, making sure class is available) ═══ */

.as-g-wiz .pill,
.as-g-modal .pill,
.as-g-compact .pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--sa); color: var(--t2);
}
.as-g-wiz .pill.ok,
.as-g-modal .pill.ok,
.as-g-compact .pill.ok {
  background: #E8F0E7;
  color: #5B8C5A;
}
html:has(#as-app.as-dark) .as-g-wiz .pill.ok,
html:has(#as-app.as-dark) .as-g-modal .pill.ok,
html:has(#as-app.as-dark) .as-g-compact .pill.ok {
  background: #1E2F1D;
  color: #7BAE79;
}

/* v0.4.0: radio circle lock.
 * The 4-state calendar picker radios (Full / Availability only / Private to me /
 * Not included) were rendering as stretched ovals because they're flex children
 * inside .as-g-cal-state-opt with no explicit width/height or flex-shrink.
 * Locking dimensions keeps them circular at every zoom level. */
.as-g-cal-state-opt input[type="radio"],
.as-g-modal input[type="radio"],
.as-g-wiz input[type="radio"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
  appearance: auto;
  -webkit-appearance: auto;
}