/* The sentence builder (src/sentence-view.js), on the field-journal paper kit
   (assets/art/paper.css). Each sign is a torn scrap of watercolour, coloured
   by the part it plays in the sentence. */

.sb {
  --w-time: #e6c35f;
  --w-place: #9cc0b4;
  --w-subject: #aebf94;
  --w-object: #9db8d2;
  --w-verb: #e19a7c;
  --w-describe: #d8b3c0;
  --w-neg: #b9b2a5;
  --w-question: #c09ec7;
  --w-greeting: #e8d8b2;
  --w-link: #ddd2bc;
  --w-other: #d8cdb8;
  --sb-pencil-line: rgb(31 42 30 / .5);
  --sb-mix: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--j-ink);
  font-family: var(--j-font-body);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb { --sb-mix: 48%; --sb-pencil-line: rgb(237 230 211 / .4); } }
:root[data-theme="dark"] .sb { --sb-mix: 48%; --sb-pencil-line: rgb(237 230 211 / .4); }

/* ------------------------------------------------------------ heading */

.sb-head { text-align: center; margin: 8px 0 34px; }
.sb-title {
  margin: 0;
  font: 600 clamp(38px, 6vw, 70px)/1.02 var(--j-font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -.025em;
}
.sb-underline {
  padding-bottom: .08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 4, 130 12, 200 7 S 280 6, 297 11' fill='none' stroke='%23a8472f' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M40 12 C 110 9, 190 13, 262 10' fill='none' stroke='%23a8472f' stroke-width='1.4' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") 0 100% / 100% .22em no-repeat;
}
.sb-lede { margin: 14px auto 0; max-width: 40em; font-size: 19px; line-height: 1.5; color: var(--j-ink-soft); }

/* ------------------------------------------------------------- panels */

.sb-panel {
  position: relative;
  padding: 26px 30px 28px;
  background-color: var(--j-page);
  background-image: var(--j-grain);
  border: 1.5px solid var(--sb-pencil-line);
  border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px;
  box-shadow: 0 1px 1px rgb(var(--j-shadow) / .08), 0 10px 24px -14px rgb(var(--j-shadow) / .35);
}
.sb-panel::after {                     /* a second, looser pencil line */
  content: "";
  position: absolute;
  inset: 3px -3px -2px 2px;
  border: 1px solid var(--sb-pencil-line);
  border-radius: 6px 3px 7px 4px / 4px 7px 4px 6px;
  opacity: .45;
  pointer-events: none;
}
.sb-panel.j-scrap { border: 0; box-shadow: none; background: none; }
.sb-panel.j-scrap::after { content: none; }
.sb-h { margin: 0 0 16px; font: 600 30px/1.1 var(--j-font-display); letter-spacing: -.01em; }
.sb-num { font-variant-numeric: oldstyle-nums; }

.sb-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.sb-order { margin-top: 26px; }
.sb-bottom { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; margin-top: 26px; align-items: start; }

/* ------------------------------------------------------ the paragraph */

.sb-input { --line-gap: 34px; --line-top: 64px; line-height: normal; }
.sb-editor {
  position: relative;
  border: 1.5px solid var(--sb-pencil-line);
  border-radius: 8px;
  background: rgb(255 255 255 / .38);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-editor { background: rgb(0 0 0 / .14); } }
:root[data-theme="dark"] .sb-editor { background: rgb(0 0 0 / .14); }
.sb-backdrop, .sb-text {
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  font: 20px/34px var(--j-font-body);
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.sb-backdrop { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
.sb-backdrop mark {
  color: transparent;
  border-radius: 3px;
  background: linear-gradient(176deg, transparent 8%, rgb(214 176 74 / .5) 10% 90%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 3px;
  margin: 0 -3px;
}
.sb-text {
  position: relative;
  display: block;
  width: 100%;
  min-height: 146px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--j-ink);
  caret-color: var(--j-clay);
}
.sb-text:focus-visible { outline: 3px solid var(--j-focus); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 7px var(--j-focus-halo); }
.sb-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.sb-build { background: var(--j-clay); font-size: 18px; padding: 12px 26px 12px 20px; }
.sb-build:hover { background: #8f3a25; }
.sb-count { color: var(--j-ink-soft); font-size: 15px; }

/* ------------------------------------------------- the sentence list */

.sb-list-card {
  background-color: color-mix(in srgb, #f3e3b3 calc(var(--sb-mix) * .55), var(--j-page));
  transform: rotate(.35deg);
  padding-top: 34px;
}
.sb-tape { position: absolute; top: -12px; left: 50%; margin-left: -52px; }
.sb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sb-li {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 8px 14px 8px 8px;
  text-align: left; cursor: pointer;
  font: 17px/1.35 var(--j-font-body); color: var(--j-ink);
  background: rgb(255 255 255 / .35);
  border: 1.5px solid var(--sb-pencil-line);
  border-radius: 999px 12px 12px 999px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-li { background: rgb(0 0 0 / .12); } }
:root[data-theme="dark"] .sb-li { background: rgb(0 0 0 / .12); }
.sb-li-n {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  font: 600 19px/1 var(--j-font-display);
  border: 1.5px solid var(--sb-pencil-line);
  background: rgb(255 255 255 / .4);
}
.sb-li-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-li.is-current { border-color: var(--j-clay); background: color-mix(in srgb, var(--j-clay) 12%, transparent); }
.sb-li.is-current .sb-li-n { border-color: var(--j-clay); color: var(--j-clay); background: transparent; }
.sb-li:hover { border-color: var(--j-ink-soft); }
.sb-li:focus-visible, .sb-card:focus-visible, .sb-btn:focus-visible, .sb-link:focus-visible, .sb-word:focus-visible {
  outline: 3px solid var(--j-focus); outline-offset: 3px; box-shadow: 0 0 0 7px var(--j-focus-halo);
}
.sb-where { margin: 16px 0 0 4px; color: var(--j-ink-soft); font-size: 15px; }
.sb-empty { color: var(--j-pencil); font-style: italic; }

/* ------------------------------------------------- the sign strip */

.sb-order-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sb-order-head .sb-h { margin: 0; }
.sb-pill {
  padding: 5px 12px; border-radius: 999px;
  font: 14px/1.2 var(--j-font-body); color: var(--j-ink-soft);
  background: rgb(var(--j-shadow) / .08);
  border: 1px solid rgb(var(--j-shadow) / .1);
}
.sb-rough { color: var(--j-clay); border-color: currentColor; background: transparent; font-style: italic; }

.sb-strip-wrap {
  --band: 68px;
  position: relative;
  padding-top: calc(var(--band) + var(--lanes, 0) * 26px);
  margin-top: 6px;
}
.sb-strip {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  column-gap: 0;
  row-gap: calc(var(--band) + 18px + var(--lanes, 0) * 26px);
}
.sb-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 108px; max-width: 250px; }
.sb-join { align-self: flex-start; margin-top: 30px; padding: 0 6px; }
.sb-arrow { width: 46px; height: 20px; fill: none; stroke: var(--j-ink-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sb-card {
  --w: var(--w-other);
  --wash: color-mix(in srgb, var(--w) var(--sb-mix), var(--j-page));
  position: relative;
  isolation: isolate;
  display: grid; place-items: center;
  min-width: 112px; min-height: 88px;
  padding: 18px 26px 16px;
  border: 0; background: none; cursor: pointer;
  color: var(--j-ink);
  filter: drop-shadow(0 1px 1px rgb(var(--j-shadow) / .16)) drop-shadow(0 5px 7px rgb(var(--j-shadow) / .1));
  transition: transform .18s ease;
}
.sb-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--wash);
  background-image:
    radial-gradient(120% 90% at 20% 15%, rgb(255 255 255 / .28), transparent 55%),
    radial-gradient(80% 70% at 85% 90%, rgb(0 0 0 / .07), transparent 60%),
    var(--j-mottle), var(--j-grain);
  background-size: 100% 100%, 100% 100%, 480px 480px, 220px 220px;
  -webkit-mask: var(--j-torn); mask: var(--j-torn);
}
.sb-item:nth-child(4n+1) .sb-card { transform: rotate(-.7deg); }
.sb-item:nth-child(4n+3) .sb-card { transform: rotate(.6deg); }
.sb-card[data-role="time"] { --w: var(--w-time); }
.sb-card[data-role="place"] { --w: var(--w-place); }
.sb-card[data-role="subject"] { --w: var(--w-subject); }
.sb-card[data-role="object"] { --w: var(--w-object); }
.sb-card[data-role="verb"] { --w: var(--w-verb); }
.sb-card[data-role="describe"] { --w: var(--w-describe); }
.sb-card[data-role="neg"] { --w: var(--w-neg); }
.sb-card[data-role="question"] { --w: var(--w-question); }
.sb-card[data-role="greeting"] { --w: var(--w-greeting); }
.sb-card[data-role="link"] { --w: var(--w-link); }
.sb-card[data-kind="describe"] { --wash: color-mix(in srgb, color-mix(in srgb, var(--w) 55%, var(--w-describe)) calc(var(--sb-mix) * .8), var(--j-page)); }
.sb-card[data-state="missing"]::before, .sb-card[data-added]::before { opacity: .55; }
.sb-card[data-state="missing"]::after, .sb-card[data-added]::after {
  content: ""; position: absolute; inset: 7px; border: 1.6px dashed var(--sb-pencil-line); border-radius: 4px 6px 4px 7px; pointer-events: none;
}
.sb-card:hover, .sb-card.is-linked { transform: translateY(-3px) rotate(0deg); }
.sb-card.is-now { transform: translateY(-6px) scale(1.04); }
.sb-card.is-now::after {
  content: ""; position: absolute; inset: -7px; border: 2.4px solid var(--j-clay); border-radius: 10px 14px 9px 13px; pointer-events: none;
}

.sb-gloss { font: 600 38px/1 var(--j-font-display); font-variation-settings: "opsz" 72; letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; }
.sb-gloss--long { font-size: 28px; white-space: normal; max-width: 9em; }
.sb-badge {
  display: block; margin-top: 7px;
  font: 700 10px/1 var(--j-font-type); letter-spacing: .14em; text-transform: uppercase; color: var(--j-ink-soft);
}
.sb-role { margin-top: 12px; font: 600 18px/1.2 var(--j-font-body); }
.sb-ask { font-size: 15px; color: var(--j-ink-soft); }
.sb-sub { margin-top: 4px; max-width: 15em; font: italic 14px/1.3 var(--j-font-body); color: var(--j-pencil); }

/* the pencilled note over one card */
.sb-note {
  position: absolute; bottom: calc(100% + 2px); left: 58%;
  width: max-content; max-width: 150px;
  font: italic 500 18px/1.05 var(--j-font-display);
  color: var(--j-ink-soft);
  transform: rotate(-7deg);
  text-align: left;
  pointer-events: none;
}
.sb-note svg { display: block; width: 44px; height: 30px; margin: 2px 0 0 -12px; fill: none; stroke: var(--j-ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }

/* eyebrows / head shake over the signs they cover */
.sb-marks { position: absolute; inset: 0; pointer-events: none; }
.sb-mark {
  position: absolute; height: 12px;
  border-top: 1.8px solid currentColor;
  color: var(--j-forest);
}
.sb-mark::before, .sb-mark::after { content: ""; position: absolute; top: -1px; width: 1.8px; height: 11px; background: currentColor; border-radius: 2px; }
.sb-mark::before { left: -1px; transform: rotate(-8deg); }
.sb-mark::after { right: -1px; transform: rotate(8deg); }
.sb-mark[data-kind="neg"] { color: var(--j-clay); }
.sb-mark[data-kind="wh"] { color: #7d5a86; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-mark[data-kind="wh"] { color: #c9a7d2; } :root:not([data-theme="light"]) .sb-mark { color: var(--j-sage); } :root:not([data-theme="light"]) .sb-mark[data-kind="neg"] { color: var(--j-clay); } }
:root[data-theme="dark"] .sb-mark { color: var(--j-sage); }
:root[data-theme="dark"] .sb-mark[data-kind="wh"] { color: #c9a7d2; }
:root[data-theme="dark"] .sb-mark[data-kind="neg"] { color: var(--j-clay); }
.sb-mark-label {
  position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  padding: 0 8px; white-space: nowrap;
  font: 700 12px/1.6 var(--j-font-type); letter-spacing: .1em; text-transform: uppercase;
  background: var(--j-page);
}

.sb-alt { margin: 26px 0 0; text-align: center; font-size: 17px; color: var(--j-ink-soft); }
.sb-alt .j-caps { margin-right: 10px; color: var(--j-pencil); }
.sb-alt-why { display: inline-block; margin-left: 10px; font: italic 14px var(--j-font-body); color: var(--j-pencil); }

.sb-english-row {
  margin-top: 26px; padding-top: 18px;
  background: var(--j-rule-img) 0 0 / 600px 6px repeat-x;
}
.sb-english-label { margin: 0 0 6px; color: var(--j-pencil); }
.sb-english { margin: 0; font-size: 21px; line-height: 1.9; }
.sb-word { position: relative; }
.sb-word[data-sign] {
  --w: var(--w-other);
  text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--w) 85%, transparent);
  border-radius: 3px;
}
.sb-word[data-role="time"] { --w: var(--w-time); }
.sb-word[data-role="place"] { --w: var(--w-place); }
.sb-word[data-role="subject"] { --w: var(--w-subject); }
.sb-word[data-role="object"] { --w: var(--w-object); }
.sb-word[data-role="verb"] { --w: var(--w-verb); }
.sb-word[data-role="describe"] { --w: var(--w-describe); }
.sb-word[data-role="neg"] { --w: var(--w-neg); }
.sb-word[data-role="question"] { --w: var(--w-question); }
.sb-word.is-linked { background: color-mix(in srgb, var(--w) 40%, transparent); }
.sb-word sup { font: 700 11px/1 var(--j-font-type); color: var(--j-pencil); margin-left: 1px; }
.sb-word--dropped { color: var(--j-pencil); text-decoration: line-through; text-decoration-color: var(--j-pencil); text-decoration-thickness: 1.2px; opacity: .75; }
.sb-dropped { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; padding: 0; font-size: 15px; color: var(--j-ink-soft); }
.sb-dropped s { font-family: var(--j-font-type); color: var(--j-pencil); margin-right: 4px; }
.sb-foot { margin: 18px 0 0; font-size: 14px; }

/* ------------------------------------------------------- practise */

.sb-practise-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.sb-figure { margin: 4px 0 0; }
.sb-canvas { display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--j-page); }
.sb-now { display: block; padding: 8px 30px 2px; text-align: center; font-size: 13px; line-height: 1.3; color: var(--j-ink-soft); min-height: 1.3em; }
.sb-spell-show {
  position: absolute; inset: 10px 10px 34px;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  background: var(--j-page);
}
.sb-spell-show[hidden], .sb-attempt[hidden], .sb-alt[hidden], .sb-rough[hidden] { display: none; }
.sb-spell-show img { width: 150px; height: 150px; object-fit: contain; }
.sb-spell-show b { font: 600 38px/1 var(--j-font-display); }
.sb-spell-show .sb-show-word { font-size: 42px; }
.sb-spell-show span { font: 13px var(--j-font-type); color: var(--j-pencil); }
.sb-sequence {
  margin: 0; padding: 18px 20px;
  font: 600 clamp(22px, 2.3vw, 31px)/1.45 var(--j-font-display); text-transform: uppercase;
  background: rgb(var(--j-shadow) / .055);
  border-radius: 4px;
  text-align: center;
}
.sb-seq { position: relative; display: inline-block; padding: 0 .1em; border-radius: 3px; transition: background .2s; }
.sb-seq[data-state="missing"] { color: var(--j-ink-soft); }
.sb-seq.is-now { background: linear-gradient(175deg, transparent 10%, rgb(214 176 74 / .55) 12% 88%, transparent 90%); }
.sb-seq[data-result="seen"]::after, .sb-seq[data-result="close"]::after, .sb-seq[data-result="missed"]::after {
  position: absolute; top: -.5em; right: -.4em; font: 700 .5em/1 var(--j-font-type);
}
.sb-seq[data-result="seen"]::after { content: "✓"; color: var(--j-stamp-match); }
.sb-seq[data-result="close"]::after { content: "≈"; color: var(--j-stamp-close); }
.sb-seq[data-result="missed"]::after { content: "×"; color: var(--j-stamp-not); }
.sb-seq-arrow { margin: 0 .35em; color: var(--j-pencil); font-weight: 400; }
.sb-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 22px 10px 16px;
  font: 17px/1.2 var(--j-font-display); color: var(--j-ink);
  background: transparent; cursor: pointer;
  border: 1.6px solid var(--sb-pencil-line); border-radius: 999px;
}
.sb-btn .j-icon { width: 20px; height: 20px; }
.sb-watch { border-color: var(--j-clay); color: var(--j-clay); }
.sb-watch:hover { background: color-mix(in srgb, var(--j-clay) 10%, transparent); }
.sb-slow[aria-pressed="true"] { background: rgb(var(--j-shadow) / .1); border-color: var(--j-ink-soft); }
.sb-mine { background: var(--j-forest); border-color: var(--j-forest); color: #f4efe3; }
.sb-mine:hover { background: var(--j-forest-deep); }
.sb-btn:disabled { opacity: .45; cursor: not-allowed; }
.sb-practise-note { margin: 16px 0 0; font-size: 15px; }
.sb-attempt { margin-top: 18px; padding: 16px 18px; border: 1.5px dashed var(--sb-pencil-line); border-radius: 6px; }
.sb-attempt h4 { margin: 0 0 12px; color: var(--j-pencil); }
.sb-att { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; }
.sb-att li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sb-att-gloss { font: 600 20px/1 var(--j-font-display); }
.sb-att .j-stamp { font-size: 13px; }
.sb-att-skip { font: 12px var(--j-font-type); color: var(--j-pencil); }
.sb-att-heard { max-width: 10em; text-align: center; font: italic 13px/1.2 var(--j-font-body); color: var(--j-pencil); }
.sb-att-sum { margin: 14px 0 0; font-size: 15px; color: var(--j-ink-soft); }

/* ----------------------------------------------------------- notes */

.sb-notes { box-sizing: border-box; padding: 28px 30px 40px; color: #f1ead8; }
.sb-notes .sb-h { color: #f6f0df; }
.sb-rules-h { margin: 18px 0 8px; font: 700 11px/1.2 var(--j-font-type); letter-spacing: .2em; text-transform: uppercase; color: #d9c98f; }
.sb-rules-h:first-child { margin-top: 0; }
.sb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sb-rule { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; border-radius: 6px; transition: background .4s; }
.sb-rule.is-flash { animation: sb-flash 1.4s ease; }
@keyframes sb-flash { 0%, 40% { background: rgb(214 176 74 / .28); } 100% { background: transparent; } }
.sb-rule-n {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  font: 700 13px/1 var(--j-font-type); color: #2e4535; background: #d6b04a;
}
.sb-rule h4 { margin: 0; font: 600 17px/1.3 var(--j-font-body); color: #f8f2e2; }
.sb-rule p { margin: 3px 0 0; font-size: 15px; line-height: 1.45; color: #e3dcc8; }
.sb-rule .sb-source { font: 12px/1.35 var(--j-font-type); color: #c9bd92; }
.sb-strength {
  display: inline-block; margin-left: 6px; padding: 1px 7px 2px; vertical-align: 2px;
  font: 700 10px/1.4 var(--j-font-type); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; color: #d9c98f;
}
.sb-strength[data-s="strong"] { color: #b8d7a8; }
.sb-strength[data-s="flexible"] { color: #f0b89e; }
.sb-notes .sb-empty { color: #d9d0b8; }
.sb-sprig { position: absolute; right: 10px; bottom: 6px; width: 70px; opacity: .45; mix-blend-mode: screen; filter: invert(1); transform: rotate(12deg); }

/* ---------------------------------------------------------- footer */

.sb-next-row { display: flex; justify-content: space-between; margin: 20px 4px 0; }
.sb-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 18px/1.2 var(--j-font-display); color: var(--j-clay);
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
.sb-link .j-icon { width: 20px; height: 20px; }
.sb-link:disabled { color: var(--j-pencil); opacity: .5; cursor: default; text-decoration: none; }
.sb-credit { margin: 26px 0 0; padding-top: 14px; text-align: center; color: var(--j-pencil); background: var(--j-rule-img) 0 0 / 600px 6px repeat-x; }

/* ---------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .sb-top, .sb-bottom { grid-template-columns: minmax(0, 1fr); }
  .sb-practise-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-figure { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .sb-panel { padding: 20px 18px 22px; }
  .sb-h { font-size: 25px; }
  .sb-item { min-width: 86px; }
  .sb-card { min-width: 88px; min-height: 70px; padding: 14px 16px 12px; }
  .sb-gloss { font-size: 27px; }
  .sb-gloss--long { font-size: 21px; }
  .sb-join { margin-top: 24px; padding: 0 2px; }
  .sb-arrow { width: 26px; }
  .sb-role { font-size: 15px; }
  .sb-ask, .sb-sub { font-size: 13px; }
  .sb-note { font-size: 15px; max-width: 110px; }
  .sb-english { font-size: 18px; }
  .sb-btn { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-card, .sb-seq { transition: none; }
  .sb-rule.is-flash { animation: none; }
}

/* ------------------------------------------- on the camera page (app.js) */

.phrase-target {
  position: relative;
  margin: 0 0 16px;
  padding: 12px 16px 12px;
  line-height: 1.4;
  background: color-mix(in srgb, #e6c35f 22%, transparent);
  border-left: 3px solid var(--j-mustard);
  border-radius: 2px 6px 6px 2px;
}
.phrase-target[hidden] { display: none; }
.phrase-target .j-caps { margin: 0 0 4px; color: var(--j-pencil); }
.phrase-target-signs { margin: 0; font: 600 22px/1.35 var(--j-font-display); text-transform: uppercase; }
.phrase-target-signs .unchecked { color: var(--j-pencil); }
.phrase-target-signs > span:not(.arrow) { white-space: nowrap; }   /* A-L-E-X stays on one line */
.phrase-target-signs .arrow { margin: 0 .35em; font-weight: 400; color: var(--j-pencil); }
.phrase-target .pencil { margin: 6px 0 0; }
.phrase-target-actions { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 0; }
.phrase-target .link-btn {
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 15px/1.3 var(--j-font-body); color: var(--j-clay);
  text-decoration: underline; text-underline-offset: 4px;
}
.phrase-target .link-btn:focus-visible { outline: 3px solid var(--j-focus); outline-offset: 3px; }
.phrase-planned { align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.phrase-planned .j-stamp { font-size: 13px; }

/* ------------------------------------------------ Understand me (app.js) */

.u-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 10px 0 4px; }
.u-listen { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.u-listen input { width: 18px; height: 18px; accent-color: var(--j-forest); }
.u-scope { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.u-scope .j-caps { white-space: nowrap; }
.u-scope .j-caps { color: var(--j-pencil); }
.u-scope select, .u-chip select { font: 15px var(--j-font-body); color: var(--j-ink); background: transparent; border: 1.5px solid var(--sb-pencil-line, rgb(31 42 30 / .5)); border-radius: 6px; padding: 4px 8px; }
.u-transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.u-entry { padding: 12px 0 14px; border-bottom: 1px solid var(--j-rule-line); }
.u-entry.is-new { animation: u-in .5s ease both; }
@keyframes u-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.u-signs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.u-arrow { color: var(--j-pencil); }
.u-chip select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 6px 12px; border-radius: 4px 7px 5px 8px;
  font: 600 18px/1.1 var(--j-font-display); text-transform: uppercase;
  background: color-mix(in srgb, #aebf94 55%, transparent);
  border-color: transparent;
}
.u-chip[data-sure="mid"] select { background: color-mix(in srgb, #e6c35f 45%, transparent); }
.u-chip[data-sure="low"] select { background: transparent; border: 1.6px dashed var(--j-pencil); }
.u-chip select:focus-visible { outline: 3px solid var(--j-focus); outline-offset: 2px; }
.u-english { margin: 10px 0 2px; font: italic 500 24px/1.3 var(--j-font-display); }
.u-meta { margin: 4px 0 0; }
.u-meta .link-btn, .u-entry .link-btn {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--j-clay);
  text-decoration: underline; text-underline-offset: 3px;
}
.u-empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .u-entry.is-new { animation: none; } }