/* InstaSync plan-review — light theme, InstaWP palette. Classes prefixed `is-` to avoid collisions. */
:root {
  --is-primary: #005E54;
  --is-secondary: #11BF85;
  --is-tertiary: #F3E98D;
  --is-light: #EBF9F5;
  --is-ink: #14201d;
  --is-muted: #5b6b66;
  --is-line: #d7e6e0;
  --is-warn: #b8860b;
  --is-warn-bg: #fdf6e3;
  --is-danger: #a3342b;
  --is-radius: 12px;
  --is-shadow: 0 1px 2px rgba(0, 40, 35, .06), 0 6px 18px rgba(0, 40, 35, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--is-ink);
  background: var(--is-light);
}

.is-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- top bar ---- */
.is-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1.25rem;
  background: var(--is-primary); color: #fff;
}
.is-brand { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.is-logo {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--is-secondary); color: var(--is-primary); font-weight: 700;
}
.is-scope-chip {
  font-size: .8rem; padding: .2rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25);
}

/* ---- layout ---- */
.is-wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.is-hero h1 { margin: .25rem 0 .25rem; font-size: 1.5rem; }
.is-route { margin: 0 0 1rem; color: var(--is-muted); font-weight: 600; }
.is-route span:not([aria-hidden]) { color: var(--is-ink); }
.is-summary {
  background: #fff; border: 1px solid var(--is-line); border-radius: var(--is-radius);
  padding: 1rem 1.1rem; box-shadow: var(--is-shadow); margin: 0 0 1.5rem;
}

/* ---- group cards (native <details> disclosure) ---- */
.is-groups { display: grid; gap: 1rem; }
.is-card {
  background: #fff; border: 1px solid var(--is-line); border-radius: var(--is-radius);
  box-shadow: var(--is-shadow); overflow: clip;
  container-type: inline-size;            /* size-aware children (Baseline 2023) */
}
.is-card > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.1rem; cursor: pointer; font-weight: 600; list-style: none;
}
.is-card > summary::-webkit-details-marker { display: none; }
.is-card > summary::after {
  content: "▸"; color: var(--is-muted); transition: transform .15s ease; margin-left: auto;
}
.is-card[open] > summary::after { transform: rotate(90deg); }
.is-card > summary:focus-visible { outline: 3px solid var(--is-secondary); outline-offset: -3px; }
.is-card-title { font-size: 1.02rem; }
.is-card--deploy  { border-left: 4px solid var(--is-secondary); }
.is-card--preserve { border-left: 4px solid var(--is-primary); }
.is-card--review  { border-left: 4px solid var(--is-warn); }

.is-note { margin: 0 1.1rem .6rem; color: var(--is-muted); font-size: .9rem; }

/* ---- lists ---- */
.is-list {
  list-style: none; margin: 0; padding: 0 1.1rem 1rem;
  content-visibility: auto;                /* isolate long lists (Baseline 2025; degrades gracefully) */
  contain-intrinsic-size: auto 200px;
}
.is-list li {
  padding: .5rem .25rem; border-top: 1px solid var(--is-line);
  display: flex; gap: .6rem; align-items: baseline;
}
.is-list li:first-child { border-top: 0; }
.is-list--muted li { color: var(--is-muted); font-size: .92rem; }
.is-list li .is-tag {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--is-muted); flex: 0 0 auto;
}

/* ---- badges ---- */
.is-badge {
  flex: 0 0 auto; min-width: 1.6rem; text-align: center;
  font-size: .85rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px;
}
.is-badge--deploy   { background: var(--is-light); color: var(--is-primary); }
.is-badge--preserve { background: var(--is-light); color: var(--is-primary); }
.is-badge--review   { background: var(--is-warn-bg); color: var(--is-warn); }
.is-badge[data-zero="1"] { opacity: .5; }

/* ---- conflict resolver ---- */
.is-conflicts li { flex-direction: column; align-items: stretch; gap: .45rem; background: var(--is-warn-bg); border-radius: 8px; padding: .75rem; margin-top: .5rem; border-top: 0; }
.is-conflict-obj { font-weight: 600; }
.is-conflict-note { color: var(--is-muted); font-size: .9rem; }
.is-choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.is-choices label {
  font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--is-line);
  border-radius: 999px; background: #fff; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center;
}
.is-choices input { accent-color: var(--is-primary); }
.is-choices label:has(input:checked) { border-color: var(--is-primary); background: var(--is-light); font-weight: 600; }

/* ---- re-scan bar (job mode) ---- */
.is-rescan-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.is-rescan-hint { color: var(--is-muted); font-size: .88rem; }

/* ---- actions ---- */
.is-actions { margin-top: 1.5rem; }
.is-backup-note { color: var(--is-muted); font-size: .9rem; margin: 0 0 .75rem; }
.is-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.is-btn {
  font: inherit; font-weight: 600; padding: .65rem 1.2rem; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
}
.is-btn:focus-visible { outline: 3px solid var(--is-secondary); outline-offset: 2px; }
.is-btn--primary { background: var(--is-primary); color: #fff; }
.is-btn--primary:hover { background: #00473f; }
.is-btn--primary:disabled { background: var(--is-line); color: var(--is-muted); cursor: not-allowed; }
.is-btn--ghost { background: #fff; border-color: var(--is-line); color: var(--is-ink); }
.is-gate-hint { color: var(--is-warn); font-size: .9rem; margin: .6rem 0 0; }

/* ---- progress ---- */
.is-progress { margin-top: 1.5rem; background: #fff; border: 1px solid var(--is-line); border-radius: var(--is-radius); padding: 1rem 1.25rem; box-shadow: var(--is-shadow); }
.is-progress h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.is-phases { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.is-phases li { color: var(--is-muted); }
.is-phases li[data-state="active"] { color: var(--is-ink); font-weight: 600; }
.is-phases li[data-state="done"] { color: var(--is-primary); }
.is-phases li[data-state="done"]::marker { content: "✓ "; }

/* ---- dialog ---- */
.is-dialog { border: 0; border-radius: var(--is-radius); padding: 1.25rem 1.4rem; max-width: 26rem; box-shadow: 0 12px 40px rgba(0, 30, 25, .25); }
.is-dialog::backdrop { background: rgba(10, 30, 25, .45); }
.is-dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.is-dialog p { margin: 0 0 1rem; color: var(--is-muted); }
.is-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin: 0; padding: 0; }

/* size-aware: roomier card padding when the card is wide */
@container (min-width: 520px) {
  .is-card > summary { padding: 1rem 1.3rem; }
  .is-list { padding: 0 1.3rem 1.1rem; }
}