/* widgets.css — shared widget shells + per-widget styles.
   Read/write and store identity are encoded by label AND shape AND color
   (color is never the only signal — accessibility, spec §8). */

.widget {
  margin-top: var(--sp-lg);
  background: var(--bg-1);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
}
.widget__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}
.widget__title { font-family: var(--font-display); font-size: var(--size-lg); }
.widget__hint { font-size: var(--size-sm); color: var(--text-muted); }
.widget__body { padding: var(--sp-lg); }
.widget__noscript {
  padding: var(--sp-md) var(--sp-lg);
  color: var(--text-muted); font-size: var(--size-sm); font-style: italic;
}

/* — Op chips / tags (reads vs writes). Shape differs: reads are pill, writes are tab. */
.op-tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--size-sm);
  padding: 0.28em 0.7em; border: 1px solid transparent; cursor: pointer;
  background: var(--bg-2); color: var(--text);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.op-tag--read  { border-radius: 999px; border-color: var(--teal-line);  color: var(--teal); }
.op-tag--write { border-radius: var(--radius-sm); border-color: var(--amber-line); color: var(--amber); }
.op-tag::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; }
.op-tag--read::before  { border-radius: 50%; }                       /* ● read */
.op-tag--write::before { border-radius: 1px; }                       /* ■ write */
.op-tag[aria-pressed="true"], .op-tag:hover { background: var(--bg-3); }
.op-tag[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }

/* — Store inspector (C). */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-sm); }
.store-card {
  text-align: left; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--rule-solid);
  border-radius: var(--radius-sm); padding: var(--sp-md);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  color: inherit; font: inherit;
}
.store-card:hover { transform: translateY(-2px); }
.store-card[aria-pressed="true"] { border-color: var(--accent); background: var(--bg-3); }
.store-card__label { font-family: var(--font-display); font-size: var(--size-md); }
.store-card__blurb { font-size: var(--size-sm); color: var(--text-secondary); margin-top: var(--sp-xs); }
.store-detail { margin-top: var(--sp-lg); min-height: 6rem; }
.store-detail__surface {
  font-family: var(--font-mono); color: var(--accent);
  font-size: var(--size-md);
}

/* The Relocate-across-stores reveal: one operator, five surface verbs. */
.relocate-reveal { margin-top: var(--sp-lg); border-top: 1px solid var(--rule); padding-top: var(--sp-md); }
.relocate-reveal__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-sm); align-items: center; }
.relocate-reveal__verbs { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); }
.surface-verb {
  font-family: var(--font-mono); font-size: var(--size-sm);
  padding: 0.2em 0.6em; border-radius: var(--radius-sm);
  background: var(--teal-soft); color: var(--teal); border: 1px solid var(--teal-line);
}
.surface-verb[data-active="true"] { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }

/* — Operator palette (D). */
.palette-group { margin-bottom: var(--sp-md); }
.palette-group h4 { font-size: var(--size-sm); color: var(--text-muted); margin-bottom: var(--sp-sm); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-mono); font-weight: 500; }
.palette-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.op-detail { margin-top: var(--sp-md); padding: var(--sp-md); background: var(--bg-2); border-radius: var(--radius-sm); border: 1px solid var(--rule); min-height: 4.5rem; }
.op-detail__name { font-family: var(--font-display); font-size: var(--size-md); }
.op-detail__example { color: var(--text-secondary); font-style: italic; margin-top: var(--sp-xs); }

/* — Step sequence (shared by Decompose E and Gallery F). */
.mech-picker { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.mech-pick {
  font-family: var(--font-body); font-size: var(--size-base);
  padding: 0.35em 0.85em; cursor: pointer; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--rule-solid); border-radius: 999px;
}
.mech-pick[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.steps { display: grid; gap: var(--sp-sm); }
.step {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sp-md); align-items: start;
  padding: var(--sp-md); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step[data-revealed="true"] { opacity: 1; transform: none; }
.step__idx { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--size-sm); padding-top: 0.2em; }
.step__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); }
.step__store {
  font-family: var(--font-mono); font-size: var(--size-xs);
  padding: 0.15em 0.5em; border-radius: 999px;
  background: var(--bg-3); color: var(--text-secondary); border: 1px solid var(--rule-solid);
}
.step__surface { color: var(--accent-2); font-family: var(--font-mono); font-size: var(--size-xs); }
.step__note { color: var(--text-secondary); font-size: var(--size-sm); margin-top: var(--sp-xs); }

.step-controls { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.btn {
  font-family: var(--font-mono); font-size: var(--size-sm);
  padding: 0.4em 0.9em; cursor: pointer; color: var(--text);
  background: var(--bg-3); border: 1px solid var(--rule-solid); border-radius: var(--radius-sm);
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* — Compound gallery (F): expandable rows. */
.gallery { display: grid; gap: var(--sp-sm); }
.gallery details {
  border: 1px solid var(--rule-solid); border-radius: var(--radius-sm); background: var(--bg-2);
  padding: var(--sp-sm) var(--sp-md);
}
.gallery summary { cursor: pointer; display: flex; align-items: baseline; gap: var(--sp-sm); }
.gallery summary::-webkit-details-marker { display: none; }
.gallery summary .name { font-family: var(--font-display); font-size: var(--size-md); }
.gallery summary .family { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--text-muted); }
.gallery summary .blurb { color: var(--text-secondary); font-size: var(--size-sm); }
.gallery details[open] { background: var(--bg-3); }
.gallery .steps { margin-top: var(--sp-md); }
.gallery .step { opacity: 1; transform: none; } /* gallery shows steps statically */

@media (max-width: 640px) {
  .widget__body { padding: var(--sp-md); }
  .relocate-reveal__row { grid-template-columns: 1fr; }
}