/* Brand > Your editing style, the two-edits preview, and the per-video "How your style was applied" note.
 * Shared tokens only (--card, --line, --muted, --ink-strong, --r, --r-sm), so Classic and the Volare look both read right;
 * the Volare look re-points the accent below. Nothing here sets a width wider than its box: it reflows to 390px. */
.es { display: block; padding: var(--s4) var(--s5); }
.es-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.es-sub { margin-top: 0.25rem; font: var(--w-regular) var(--text-sm)/1.45 var(--sans); color: var(--muted); max-width: 46rem; }
.es-body { margin-top: var(--s4); display: grid; gap: var(--s5); min-width: 0; }
.es-h3 { font: var(--w-medium) var(--text-md)/1.35 var(--sans); color: var(--ink-strong); }
.es-note, .es-empty, .es-quiet { font: var(--w-regular) var(--text-sm)/1.5 var(--sans); color: var(--muted); }
.es-note { margin: 0.25rem 0 var(--s3); max-width: 46rem; }
.es-empty { padding: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r-sm); text-align: center; }
.es-quiet { margin-top: var(--s2); }
.es-actions, .es-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.es-err { min-height: 1.25rem; font: var(--w-regular) var(--text-sm)/1.4 var(--sans); color: var(--dk-tx-st-fail, var(--st-fail, #87372B)); }
.es-label { font: var(--w-medium) var(--text-sm)/1.4 var(--sans); color: var(--ink-strong); }
.es-check { display: flex; align-items: flex-start; gap: var(--s2); font: var(--w-regular) var(--text-sm)/1.45 var(--sans); color: var(--ink-strong); }
.es-check input { margin-top: 0.2rem; flex: none; }

/* starting points */
.es-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.es-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; text-align: left; cursor: pointer;
  padding: var(--s3); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: inherit; font: inherit;
}
.es-preset:hover { border-color: var(--ink-strong); }
.es-preset.is-on { background: var(--blue-soft, rgba(135, 153, 195, .14)); border-color: var(--blue-line, #8799C3); }
.es-preset-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font: var(--w-medium) var(--text-md)/1.4 var(--sans); color: var(--ink-strong); }
.es-tag { font: var(--w-regular) var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.es-preset-blurb { font: var(--w-regular) var(--text-sm)/1.45 var(--sans); color: var(--muted); }
.es-preset:disabled { opacity: .6; cursor: default; }

/* the ten parts */
.es-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.es-card { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.es-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.es-card-title { font: var(--w-medium) var(--text-md)/1.35 var(--sans); color: var(--ink-strong); }
.es-conf { flex: none; padding: 0.125rem 0.5rem; border-radius: 999px; font: var(--w-medium) var(--text-xs)/1.4 var(--sans); background: var(--soft); color: var(--ink-strong); }
.es-conf--sure { background: var(--st-done-bg, var(--dk-b-dce3d3, #DCE3D3)); color: var(--dk-tx-st-done, var(--st-done, #3B5233)); }
.es-conf--fairly { background: var(--st-busy-bg, var(--dk-b-e6eef9, #E6EEF9)); color: var(--dk-tx-st-busy, var(--st-busy, #24425F)); }
.es-conf--guess { background: var(--st-attn-bg, var(--dk-b-eedfc3, #EEDFC3)); color: var(--dk-tx-st-attn, var(--st-attn, #6B4814)); }
.es-plain { font: var(--w-regular) var(--text-md)/1.5 var(--sans); color: var(--ink-strong); overflow-wrap: anywhere; }
.es-from { font: var(--w-regular) var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.es-bans { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.es-ban { padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--st-fail-bg, var(--dk-b-efd8d1, #EFD8D1)); color: var(--dk-tx-st-fail, var(--st-fail, #87372B)); font: var(--w-regular) var(--text-xs)/1.4 var(--sans); }
.es-stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.es-still { margin: 0; min-width: 0; }
.es-still-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xs, 6px); background: var(--soft); pointer-events: none; }
.es-still figcaption { margin-top: 0.25rem; font: var(--w-regular) var(--text-xs)/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.es-correct-btn { align-self: flex-start; margin-top: auto; }
.es-correct { display: grid; gap: var(--s2); margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line-2); }

/* rules adjusted for you */
.es-rules { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.es-rule { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.es-rule.is-off { opacity: .8; }
.es-rule-main { min-width: 0; display: grid; gap: 0.25rem; }
.es-rule .btn { flex: none; }
.es-evidence { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.es-evidence li { padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--soft); font: var(--w-regular) var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.es-floors { margin-top: var(--s3); font: var(--w-regular) var(--text-sm)/1.5 var(--sans); color: var(--muted); }
.es-floors strong { color: var(--ink-strong); font-weight: var(--w-medium); }
.es-videos { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; gap: var(--s2); }
.es-owned { margin-top: var(--s2); }
.es-learn { display: grid; gap: var(--s2); max-width: 36rem; }

/* per-video note */
.es-applied { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; font: var(--w-regular) var(--text-md)/1.5 var(--sans); color: var(--ink-strong); }

/* two edits */
.cal { display: grid; gap: var(--s3); margin-top: var(--s4); min-width: 0; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cal-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-dots li { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--mist, var(--dk-b-1f1f21a12, rgba(31, 31, 33, .12))); }
.cal-dots li.is-done { background: var(--ink-strong); }
.cal-dots li.is-now { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-strong); }
.cal-count { font: var(--w-regular) var(--text-sm)/1.4 var(--sans); color: var(--muted); }
.cal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.cal-side { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.cal-label { font: var(--w-medium) var(--text-sm)/1.4 var(--sans); color: var(--ink-strong); }
.cal-says { min-height: 2.6em; font: var(--w-regular) var(--text-sm)/1.45 var(--sans); color: var(--muted); }
.cal-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-sm); background: #20242b; isolation: isolate; }
.cal-zoom { position: absolute; inset: 0; display: block; transform-origin: 50% 40%; transition: transform .2s; }
.cal-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cal-img--blank { background: linear-gradient(135deg, #3a4150, #1d2128); }
.cal-graphic { position: absolute; top: 8%; right: 4%; bottom: 22%; display: grid; align-content: center; gap: 6%; padding: 4%; background: var(--dk-b-f8f7f2a94, rgba(248, 247, 242, .94)); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.cal-graphic i { display: block; height: 0.3rem; border-radius: 3px; background: #8799C3; }
.cal-graphic i:nth-child(2) { width: 70%; background: var(--dk-b-b9c3dd, #b9c3dd); }
.cal-graphic i:nth-child(3) { width: 45%; background: var(--dk-b-d6dbe9, #d6dbe9); }
.cal-cap { position: absolute; left: 50%; transform: translateX(-50%); max-width: 90%; padding: 0.15rem 0.5rem; border-radius: 4px; background: rgba(0, 0, 0, .66); color: #fff; font: 500 0.7rem/1.3 var(--sans); white-space: nowrap; }
.cal-cap--bottom { bottom: 8%; } .cal-cap--middle { top: 50%; margin-top: -0.6rem; } .cal-cap--top { top: 8%; }
.cal-hold { position: absolute; left: 4%; right: 4%; bottom: 3%; height: 4px; border-radius: 2px; background: var(--dk-b-ffffffa30, rgba(255, 255, 255, .3)); }
.cal-hold b { display: block; height: 100%; border-radius: 2px; background: var(--dk-paper, #fff); }
.cal-grade { display: grid; gap: var(--s2); justify-items: start; }
.cal-done { margin-top: var(--s4); display: grid; gap: var(--s3); }

/* the Volare look: periwinkle accent, salt tiles, lines as inset shadows */
html[data-look="volare"] .es-preset,
html[data-look="volare"] .es-card,
html[data-look="volare"] .es-rule { border: 0; box-shadow: var(--v-line); border-radius: 12px; background: var(--v-salt); }
html[data-look="volare"] .es-preset:hover { background: var(--v-alabaster); }
html[data-look="volare"] .es-preset.is-on { background: var(--v-peri-12); box-shadow: inset 0 0 0 1px var(--v-periwinkle); }
html[data-look="volare"] .es-empty { border-color: var(--v-ink-12); }
html[data-look="volare"] .es-evidence li,
html[data-look="volare"] .es-conf { background: var(--v-ink-06); }
html[data-look="volare"] .es-conf--sure { background: var(--st-done-bg); }
html[data-look="volare"] .es-conf--fairly { background: var(--v-peri-24); }
html[data-look="volare"] .es-conf--guess { background: var(--st-attn-bg); }
html[data-look="volare"] .es-ban { background: var(--st-fail-bg); }
html[data-look="volare"] .cal-frame { border-radius: 12px; box-shadow: var(--v-frame-shadow); }
html[data-look="volare"] .es-card-title,
html[data-look="volare"] .es-h3 { letter-spacing: -.01em; }

@media (max-width: 1019px) { .es-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .es { padding: var(--s3); }
  .es-presets, .cal-pair { grid-template-columns: 1fr; }
  .es-rule { flex-direction: column; }
  .es-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-actions .btn, .es-row .btn { flex: 1 1 100%; }
}

/* how the creator illustrates (learned habits), one plain line each */
.es-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.es-list li { line-height: 1.45; overflow-wrap: anywhere; }
.es-kit li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.es-sw { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-2); vertical-align: middle; }
.es-pal { display: flex; align-items: center; gap: 8px; }
.es-sec { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s2); }
.es-sec summary { cursor: pointer; font-weight: 500; }
.es-crops { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.es-crop { width: 120px; max-width: 30%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.es-kit li.es-pal { flex-wrap: nowrap; align-items: flex-start; }
.es-sw { flex: none; margin-top: 2px; }

/* could not load: one compact neutral row (an icon, one line, Retry), not a wide strip */
.es-offline { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-xs);
  background: var(--fill-faint, transparent); box-shadow: inset 0 0 0 1px var(--line); font: var(--type-meta); color: var(--muted); max-width: 40rem; }
.es-offline-i { flex: none; }
.es-offline-text { min-width: 0; }
.es-retry { margin-left: auto; flex: none; }