/* Shared character-learning UI: header IDS constructor, IDS games, and the
   dictionary's compact IDS readout. */

.character-ids-deconstructions code {
  font-family: var(--han-font-stack);
  font-size: 1.35rem;
  line-height: 1.5;
}

.site-search-with-compose {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  position: relative;
  min-width: 0;
}

.site-search-with-compose > .site-search {
  flex: 1 1 auto;
  min-width: 0;
}

.site-ids-quick-compose {
  position: relative;
  flex: 0 0 auto;
}

.site-ids-quick-compose__toggle {
  box-sizing: border-box;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid buttonborder;
  padding: 0.28rem 0.48rem;
  cursor: pointer;
  background: buttonface;
  color: buttontext;
  list-style: none;
  white-space: nowrap;
}

.site-ids-quick-compose__toggle::-webkit-details-marker { display: none; }
.site-ids-quick-compose__han { font-family: var(--han-font-stack); font-size: 1.05rem; }
.site-ids-quick-compose__english { font-size: 0.78rem; opacity: 0.72; }

.site-ids-quick-compose__panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(36rem, 88vw);
  max-height: min(38rem, 75vh);
  overflow: auto;
  padding: 0.8rem;
  border: 1px solid rgba(127, 127, 127, 0.45);
  border-radius: 0.55rem;
  background: Canvas;
  color: CanvasText;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);
}

.site-ids-quick-compose__more { margin: 0.6rem 0 0; }

.ids-shared-builder .ids-constructor-toolbar,
.ids-shared-builder .ids-component-entry,
.ids-shared-builder .ids-constructor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.ids-shared-builder .ids-constructor-toolbar { margin: 0 0 0.65rem; }
.ids-shared-builder .ids-component-entry { margin-bottom: 0.65rem; }
.ids-shared-builder .ids-tree { margin: 0.8rem 0; overflow-x: auto; }

.ids-shared-builder .ids-tree-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  vertical-align: top;
}

.ids-shared-builder .ids-tree-children {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(127, 127, 127, 0.45);
}

.ids-shared-builder .ids-operator,
.ids-shared-builder .ids-tree-token,
.ids-shared-builder .ids-difficult-glyph {
  font-family: var(--han-font-stack);
}

.ids-shared-builder .ids-operator,
.ids-shared-builder .ids-tree-token {
  min-width: 2.1rem;
  min-height: 2.1rem;
  font-size: 1.2rem;
}

.ids-shared-builder .ids-tree-token.is-selected {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.ids-shared-builder .ids-expression-row code {
  font-family: var(--han-font-stack);
  font-size: 1.25rem;
}

.ids-shared-builder--compact .ids-tree-token,
.ids-shared-builder--compact .ids-operator {
  min-width: 1.9rem;
  min-height: 1.9rem;
  font-size: 1.05rem;
}

.ids-shared-builder .ids-difficult-components {
  margin: 0.8rem 0;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 0.45rem;
  padding: 0.55rem 0.7rem;
}

.ids-shared-builder .ids-difficult-stroke-counts,
.ids-shared-builder .ids-difficult-glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.ids-shared-builder .ids-difficult-stroke-counts {
  margin: 0.65rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.ids-shared-builder .ids-difficult-count.is-active { outline: 2px solid currentColor; }
.ids-shared-builder .ids-difficult-group[hidden] { display: none; }

.ids-shared-builder .ids-difficult-row {
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) 1fr;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.ids-shared-builder .ids-difficult-label { display: flex; flex-direction: column; }
.ids-shared-builder .ids-difficult-glyph { min-width: 2rem; min-height: 2rem; font-size: 1.25rem; }

.character-learning-game { max-width: 70rem; margin: 0 auto; }

.character-learning-game__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.character-learning-game__score { white-space: nowrap; font-weight: 600; }

.character-learning-prompt {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 0.7rem;
  text-align: center;
}

.character-learning-prompt__glyph {
  font-family: var(--han-font-stack);
  font-size: clamp(4rem, 13vw, 8rem);
  line-height: 1.15;
}

.character-learning-prompt__components {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.character-learning-component-pill {
  border: 1px solid rgba(127, 127, 127, 0.4);
  border-radius: 0.4rem;
  padding: 0.25rem 0.5rem;
  font-family: var(--han-font-stack);
  font-size: 1.7rem;
}

.character-learning-game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.9rem 0;
}

.component-game-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}

.component-game-choice button.is-selected {
  outline: 3px solid currentColor;
  outline-offset: 1px;
}

.character-learning-help { margin-top: 1rem; }

.corpus-transcription-launch { margin-left: 0.35rem; }

@media (max-width: 700px) {
  .site-ids-quick-compose__english { display: none; }
  .site-ids-quick-compose__panel { right: -0.5rem; width: min(30rem, 92vw); }
  .ids-shared-builder .ids-difficult-row { grid-template-columns: 1fr; }
  .character-learning-game__header { flex-direction: column; }
}

/* Keep the deconstruction game's judgement controls visible before the long
   component palette. The user can check/skip without scrolling to the bottom. */
.character-learning-game__actions--primary {
  margin: 0.65rem 0 0.8rem;
  padding: 0.45rem 0;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}

/* The global Compose popover must contain the real hard-to-input lookup grid,
   not a cut-down constructor. It has its own scroll area so the site header
   does not grow with the palette. */
.site-ids-quick-compose__panel .ids-difficult-components {
  max-height: 24rem;
  overflow: auto;
}

.site-ids-quick-compose__panel .ids-difficult-row {
  grid-template-columns: minmax(6.5rem, 8rem) 1fr;
}

.character-maker {
  max-width: 70rem;
  margin: 0 auto;
}

.character-maker__results {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(127, 127, 127, 0.3);
}

.character-maker__matches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.65rem;
}

.character-maker-match {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.65rem;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 0.55rem;
}

.character-maker-match__glyph {
  font-family: var(--han-font-stack);
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.character-maker-match__definition {
  margin: 0.35rem 0 0;
  line-height: 1.35;
}

/* -------------------------------------------------------------------------
   WYSIWYG IDS composition
   -------------------------------------------------------------------------
   IDS operators are layout instructions.  The live editor therefore gives
   each operator stable spatial geometry and lets nested operators expand their
   operand box rather than squeezing the entire structure into one narrow cell. */

.ids-shared-builder .ids-constructor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.ids-shared-builder .ids-operator {
  position: relative;
  width: 2.7rem;
  height: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.7rem;
  padding: 0.22rem;
  background: Canvas;
  color: CanvasText;
}

.ids-shared-builder--compact .ids-operator {
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
}

.ids-operator-diagram {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px dashed color-mix(in srgb, currentColor 48%, transparent);
}

.ids-operator-diagram::before,
.ids-operator-diagram::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-color: color-mix(in srgb, currentColor 48%, transparent);
  border-style: dashed;
}

.ids-operator-diagram--left-right::before {
  inset: 0 auto 0 50%;
  border-width: 0 0 0 2px;
}

.ids-operator-diagram--left-middle-right::before,
.ids-operator-diagram--left-middle-right::after {
  inset: 0 auto 0 33.333%;
  border-width: 0 0 0 2px;
}
.ids-operator-diagram--left-middle-right::after { left: 66.666%; }

.ids-operator-diagram--top-bottom::before {
  inset: 50% 0 auto 0;
  border-width: 2px 0 0;
}

.ids-operator-diagram--top-middle-bottom::before,
.ids-operator-diagram--top-middle-bottom::after {
  inset: 33.333% 0 auto 0;
  border-width: 2px 0 0;
}
.ids-operator-diagram--top-middle-bottom::after { top: 66.666%; }

.ids-operator-diagram--surround::before { inset: 27%; border-width: 2px; }
.ids-operator-diagram--surround-above::before { inset: 28% 25% 0; border-width: 2px 2px 0; }
.ids-operator-diagram--surround-below::before { inset: 0 25% 28%; border-width: 0 2px 2px; }
.ids-operator-diagram--surround-left::before { inset: 25% 0 25% 28%; border-width: 2px 0 2px 2px; }
.ids-operator-diagram--surround-right::before { inset: 25% 28% 25% 0; border-width: 2px 2px 2px 0; }
.ids-operator-diagram--surround-upper-left::before { inset: 28% 0 0 28%; border-width: 2px 0 0 2px; }
.ids-operator-diagram--surround-upper-right::before { inset: 28% 28% 0 0; border-width: 2px 2px 0 0; }
.ids-operator-diagram--surround-lower-left::before { inset: 0 0 28% 28%; border-width: 0 0 2px 2px; }
.ids-operator-diagram--surround-lower-right::before { inset: 0 28% 28% 0; border-width: 0 2px 2px 0; }

.ids-operator-diagram--overlay::before,
.ids-operator-diagram--subtraction::before {
  inset: 25%;
  border-width: 2px;
}

.ids-operator-diagram--horizontal-reflection,
.ids-operator-diagram--rotation,
.ids-operator-diagram--subtraction {
  display: grid;
  place-items: center;
}

.ids-operator-diagram__mark {
  position: relative;
  z-index: 1;
  font-family: sans-serif;
  font-size: 1.2rem;
  line-height: 1;
}

.ids-tree {
  --ids-slot-size: clamp(3.4rem, 6vw, 5rem);
  --ids-enclosure-size: calc(var(--ids-slot-size) * 2.25);
  display: flex;
  align-items: flex-start;
  min-height: calc(var(--ids-slot-size) + 2rem);
  padding: 0.4rem 0.25rem 0.55rem;
  overflow: auto;
}

.ids-tree > .ids-tree-node {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}

.ids-tree-node--operator {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: max-content;
  vertical-align: top;
}

/* A frame is selected as a frame.  This mirrors zi.tools: another operator
   click now changes this frame.  Operand boxes have their own orange focus. */
.ids-tree-node--operator.is-selected > .ids-layout-frame {
  outline: 3px solid #d58a00;
  outline-offset: 2px;
}

.ids-layout-selector {
  min-width: 1.75rem;
  min-height: 1.35rem;
  padding: 0.03rem 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: Canvas;
  color: CanvasText;
  font-family: var(--han-font-stack);
  font-size: 0.82rem;
  line-height: 1.1;
  opacity: 0.5;
}

.ids-tree-node--operator.is-selected > .ids-layout-selector,
.ids-layout-selector:hover,
.ids-layout-selector:focus-visible {
  opacity: 1;
}

.ids-layout-frame {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: max-content;
  min-width: var(--ids-slot-size);
  min-height: var(--ids-slot-size);
  border: 2px dashed color-mix(in srgb, currentColor 42%, transparent);
  background: color-mix(in srgb, Canvas 97%, CanvasText 3%);
  overflow: visible;
  cursor: pointer;
}

.ids-layout-child {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: var(--ids-slot-size);
  min-height: var(--ids-slot-size);
  padding: 0.32rem;
  overflow: visible;
  cursor: pointer;
}

.ids-layout-child + .ids-layout-child {
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  border-style: dashed;
}

.ids-tree-node--leaf {
  display: grid;
  place-items: center;
  width: max-content;
}

.ids-tree-slot {
  min-width: calc(var(--ids-slot-size) * 0.58);
  min-height: calc(var(--ids-slot-size) * 0.58);
  padding: 0.2rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: Canvas;
  color: CanvasText;
  font-family: var(--han-font-stack);
  font-size: clamp(1.55rem, 3.6vw, 2.55rem);
  line-height: 1;
}

.ids-tree-slot.is-selected {
  outline: 3px solid #d58a00;
  outline-offset: 2px;
}

/* Linear compositions use max-content as the upper bound.  That is the key to
   nesting: a child frame can enlarge its parent cell instead of being crushed
   into the parent's original slot width. */
.ids-layout-frame--left-right {
  grid-template-columns: repeat(2, minmax(var(--ids-slot-size), max-content));
  grid-template-rows: minmax(var(--ids-slot-size), max-content);
}
.ids-layout-frame--left-right > .ids-layout-child--2 { border-left-width: 2px; }

.ids-layout-frame--left-middle-right {
  grid-template-columns: repeat(3, minmax(var(--ids-slot-size), max-content));
  grid-template-rows: minmax(var(--ids-slot-size), max-content);
}
.ids-layout-frame--left-middle-right > .ids-layout-child--2,
.ids-layout-frame--left-middle-right > .ids-layout-child--3 { border-left-width: 2px; }

.ids-layout-frame--top-bottom {
  grid-template-columns: minmax(var(--ids-slot-size), max-content);
  grid-template-rows: repeat(2, minmax(var(--ids-slot-size), max-content));
}
.ids-layout-frame--top-bottom > .ids-layout-child--2 { border-top-width: 2px; }

.ids-layout-frame--top-middle-bottom {
  grid-template-columns: minmax(var(--ids-slot-size), max-content);
  grid-template-rows: repeat(3, minmax(var(--ids-slot-size), max-content));
}
.ids-layout-frame--top-middle-bottom > .ids-layout-child--2,
.ids-layout-frame--top-middle-bottom > .ids-layout-child--3 { border-top-width: 2px; }

/* Enclosures get a stable square-ish minimum canvas.  They can still expand if
   a nested structure requires more room, but an empty enclosure no longer
   collapses into a thin strip. */
.ids-layout-frame--surround,
.ids-layout-frame--surround-above,
.ids-layout-frame--surround-below,
.ids-layout-frame--surround-left,
.ids-layout-frame--surround-right,
.ids-layout-frame--surround-upper-left,
.ids-layout-frame--surround-upper-right,
.ids-layout-frame--surround-lower-left,
.ids-layout-frame--surround-lower-right,
.ids-layout-frame--overlay,
.ids-layout-frame--subtraction {
  min-width: var(--ids-enclosure-size);
  min-height: var(--ids-enclosure-size);
  grid-template-columns: repeat(3, minmax(calc(var(--ids-slot-size) * 0.55), max-content));
  grid-template-rows: repeat(3, minmax(calc(var(--ids-slot-size) * 0.55), max-content));
}

.ids-layout-frame--surround > .ids-layout-child--1 { grid-area: 1 / 1 / 4 / 4; align-items: start; justify-items: start; padding: 0.2rem; }
.ids-layout-frame--surround > .ids-layout-child--2 { grid-area: 2 / 2 / 3 / 3; z-index: 2; border-width: 2px; }

.ids-layout-frame--surround-above > .ids-layout-child--1 { grid-area: 1 / 1 / 2 / 4; }
.ids-layout-frame--surround-above > .ids-layout-child--2 { grid-area: 2 / 2 / 4 / 3; border-width: 0 2px 2px; }

.ids-layout-frame--surround-below > .ids-layout-child--1 { grid-area: 3 / 1 / 4 / 4; }
.ids-layout-frame--surround-below > .ids-layout-child--2 { grid-area: 1 / 2 / 3 / 3; border-width: 2px 2px 0; }

.ids-layout-frame--surround-left > .ids-layout-child--1 { grid-area: 1 / 1 / 4 / 2; }
.ids-layout-frame--surround-left > .ids-layout-child--2 { grid-area: 2 / 2 / 3 / 4; border-width: 2px 2px 2px 0; }

.ids-layout-frame--surround-right > .ids-layout-child--1 { grid-area: 1 / 3 / 4 / 4; }
.ids-layout-frame--surround-right > .ids-layout-child--2 { grid-area: 2 / 1 / 3 / 3; border-width: 2px 0 2px 2px; }

.ids-layout-frame--surround-upper-left > .ids-layout-child--1,
.ids-layout-frame--surround-upper-right > .ids-layout-child--1 { grid-area: 1 / 1 / 2 / 4; }
.ids-layout-frame--surround-lower-left > .ids-layout-child--1,
.ids-layout-frame--surround-lower-right > .ids-layout-child--1 { grid-area: 3 / 1 / 4 / 4; }

.ids-layout-frame--surround-upper-left > .ids-layout-child--1::after,
.ids-layout-frame--surround-lower-left > .ids-layout-child--1::after,
.ids-layout-frame--surround-upper-right > .ids-layout-child--1::after,
.ids-layout-frame--surround-lower-right > .ids-layout-child--1::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  border-style: dashed;
}

.ids-layout-frame--surround-upper-left > .ids-layout-child--1::after { left: 0; top: 100%; height: 200%; border-left-width: 2px; }
.ids-layout-frame--surround-upper-left > .ids-layout-child--2 { grid-area: 2 / 2 / 4 / 4; border-width: 0; }
.ids-layout-frame--surround-upper-right > .ids-layout-child--1::after { right: 0; top: 100%; height: 200%; border-right-width: 2px; }
.ids-layout-frame--surround-upper-right > .ids-layout-child--2 { grid-area: 2 / 1 / 4 / 3; border-width: 0; }
.ids-layout-frame--surround-lower-left > .ids-layout-child--1::after { left: 0; bottom: 100%; height: 200%; border-left-width: 2px; }
.ids-layout-frame--surround-lower-left > .ids-layout-child--2 { grid-area: 1 / 2 / 3 / 4; border-width: 0; }
.ids-layout-frame--surround-lower-right > .ids-layout-child--1::after { right: 0; bottom: 100%; height: 200%; border-right-width: 2px; }
.ids-layout-frame--surround-lower-right > .ids-layout-child--2 { grid-area: 1 / 1 / 3 / 3; border-width: 0; }

.ids-layout-frame--overlay > .ids-layout-child,
.ids-layout-frame--subtraction > .ids-layout-child {
  grid-area: 1 / 1 / 4 / 4;
}
.ids-layout-frame--overlay > .ids-layout-child--1 { transform: translate(-7%, -7%); }
.ids-layout-frame--overlay > .ids-layout-child--2 { transform: translate(7%, 7%); z-index: 2; border-width: 2px; }
.ids-layout-frame--subtraction > .ids-layout-child--1 { z-index: 1; }
.ids-layout-frame--subtraction > .ids-layout-child--2 { z-index: 2; transform: scale(0.62); border-width: 2px; }

.ids-layout-frame--horizontal-reflection,
.ids-layout-frame--rotation {
  grid-template-columns: minmax(var(--ids-slot-size), max-content);
  grid-template-rows: minmax(var(--ids-slot-size), max-content);
}
.ids-layout-frame--horizontal-reflection::after,
.ids-layout-frame--rotation::after {
  position: absolute;
  right: 0.2rem;
  bottom: 0.1rem;
  padding: 0.05rem 0.15rem;
  background: Canvas;
  font-family: sans-serif;
  font-size: 1rem;
  opacity: 0.72;
}
.ids-layout-frame--horizontal-reflection::after { content: "↔"; }
.ids-layout-frame--rotation::after { content: "↻"; }

.site-ids-quick-compose__panel .ids-tree {
  --ids-slot-size: 3.1rem;
  --ids-enclosure-size: 7.2rem;
}

@media (max-width: 700px) {
  .ids-tree {
    --ids-slot-size: 2.9rem;
    --ids-enclosure-size: 6.7rem;
  }
  .ids-shared-builder .ids-operator {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
  }
}

/* Component lookup feedback: selected answers are easy to distinguish from a
   confirmed lookup location.  The confirmation remains visible for a moment
   before the next round so the learner can connect the component to its shelf. */
.component-game-choice button.is-correct,
.component-game-choice button.is-answer {
  outline: 3px solid #1a7f37;
  outline-offset: 2px;
}

.component-game-choice button.is-correct {
  box-shadow: 0 0 0.7rem rgba(26, 127, 55, 0.5);
  animation: component-answer-glow 520ms ease-out 1;
}

.component-game-choice button.is-incorrect {
  outline: 2px solid #b4232c;
  outline-offset: 2px;
}

.component-game-choice button:disabled {
  opacity: 0.72;
}

.component-game-choice button.is-answer:disabled {
  opacity: 1;
}

.character-learning-game__actions [data-component-game-target="status"] {
  max-width: 46rem;
  line-height: 1.35;
}

@keyframes component-answer-glow {
  0% { box-shadow: 0 0 0 rgba(26, 127, 55, 0); }
  45% { box-shadow: 0 0 1.05rem rgba(26, 127, 55, 0.7); }
  100% { box-shadow: 0 0 0.7rem rgba(26, 127, 55, 0.5); }
}