/* ========================================================================== 
   claudia-katakana-porcelain-signal.css
   Pages 19 + 24 · Katakana entry and konbini culture study

   Porcelain outside: calm pearl/celadon reading surfaces and authored art.
   Signal inside: one visible route from noticing to independent response.
   Scoped to .katakana-entry-signal and .konbini-signal so the remaining
   Katakana chapter stays intact.
   ========================================================================== */

/* ---- Page 19 · first katakana signal ------------------------------------ */

.katakana-entry-signal {
  --ks-pearl: #f7f4ed;
  --ks-paper: #fffdf8;
  --ks-celadon: #bcd9d1;
  --ks-celadon-soft: #e7f1ed;
  --ks-sky: #72b9ca;
  --ks-teal: #28535b;
  --ks-teal-dark: #183d43;
  --ks-muted: #536c70;
  --ks-coral: #a94751;
  --ks-line: rgba(40, 83, 91, .24);
  color: var(--ks-teal-dark);
  background:
    radial-gradient(circle at 91% 8%, rgba(114, 185, 202, .12) 0 42px, transparent 43px),
    radial-gradient(circle at 91% 8%, transparent 0 54px, rgba(114, 185, 202, .32) 55px 57px, transparent 58px),
    linear-gradient(145deg, var(--ks-paper) 0%, var(--ks-pearl) 48%, #edf6f3 100%);
}

.katakana-entry-signal .page__header,
.katakana-entry-signal .page__footer { border-color: var(--ks-line); color: var(--ks-muted); }
.katakana-entry-signal .page__header .chap-glyph,
.katakana-entry-signal .page__footer .brand { color: var(--ks-teal); }
.katakana-entry-signal .page__num { background: var(--ks-teal); }
.katakana-entry-signal .eyebrow { color: var(--ks-coral); }

.katakana-entry-signal h1 {
  margin: .08em 0 .12em;
  color: var(--ks-teal);
  font-size: 2.28rem;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.katakana-entry-signal .katakana-entry-lead {
  max-width: 70ch;
  margin: 0 0 8px;
  color: #415f64;
  font-size: .91rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.katakana-route {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 10px;
  padding: 0;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
  list-style: none;
}

.katakana-route li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  color: var(--ks-muted);
  font-size: .67rem;
}

.katakana-route li + li { border-left: 1px solid var(--ks-line); }
.katakana-route li + li::before {
  content: "→";
  position: absolute;
  left: -6px;
  padding: 0 2px;
  background: var(--ks-pearl);
  color: var(--ks-coral);
  font-weight: 800;
}
.katakana-route b { color: var(--ks-teal-dark); font-size: .72rem; }

.katakana-entry-signal .katakana-sound-field {
  margin: 0 0 9px;
  overflow: hidden;
  border: 1px solid var(--ks-line);
  border-radius: 14px 4px 14px 4px;
  background: rgba(255, 253, 248, .78);
}

.katakana-entry-signal .katakana-sound-field h2 {
  margin: 0;
  padding: 7px 11px 4px;
  color: var(--ks-teal);
  font-size: .96rem;
}

.katakana-entry-signal .kana-cols {
  gap: 0;
  margin: 0;
  padding: 2px 0 3px;
  border-bottom: 1px solid var(--ks-line);
  background: rgba(188, 217, 209, .25);
}

.katakana-entry-signal .kana-cols span {
  color: var(--ks-teal);
  font-size: 8px;
}

.katakana-entry-signal .kana-grid {
  gap: 0;
  margin: 0;
}

.katakana-entry-signal .kana-cell,
.katakana-entry-signal .kana-cell.vowel {
  min-width: 0;
  padding: 6px 4px 5px;
  border: 0;
  border-right: 1px solid rgba(40, 83, 91, .14);
  border-bottom: 1px solid rgba(40, 83, 91, .14);
  border-radius: 0;
  background: rgba(255, 255, 255, .32);
}

.katakana-entry-signal .kana-cell.vowel { background: rgba(231, 241, 237, .62); }
.katakana-entry-signal .kana-cell:nth-child(5n) { border-right: 0; }
.katakana-entry-signal .kana-cell:nth-child(n+6) { border-bottom: 0; }
.katakana-entry-signal .kana-cell .k { color: var(--ks-teal-dark); font-size: 1.86rem; }
.katakana-entry-signal .kana-cell .r { color: var(--ks-coral); font-size: .7rem; }
.katakana-entry-signal .kana-cell .m { color: var(--ks-muted); font-size: .59rem; line-height: 1.25; }

.katakana-bridge {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 9px;
  padding: 8px 10px;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
}

.katakana-entry-signal .katakana-bridge h2,
.katakana-entry-signal .katakana-name-study h2 {
  margin: 0 0 2px;
  color: var(--ks-teal-dark);
  font-size: 1rem;
}

.katakana-entry-signal .katakana-bridge p,
.katakana-entry-signal .katakana-name-study p {
  margin: 0;
  color: var(--ks-muted);
  font-size: .68rem;
  line-height: 1.4;
}

.katakana-bridge__pairs { display: flex; gap: 6px; }
.katakana-bridge__pairs > div {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 4px;
  min-width: 76px;
  padding: 5px 7px 4px;
  border: 1px solid var(--ks-line);
  border-radius: 10px 3px 10px 3px;
  background: rgba(255, 255, 255, .54);
  font-family: var(--f-sans-jp);
  font-size: 1.05rem;
}

.katakana-bridge__pairs span { color: #3d796f; }
.katakana-bridge__pairs i { color: var(--ks-coral); font-family: var(--f-body); font-size: .72rem; font-style: normal; }
.katakana-bridge__pairs b { color: var(--ks-teal-dark); }
.katakana-bridge__pairs small {
  grid-column: 1 / -1;
  color: var(--ks-muted);
  font-family: var(--f-mono);
  font-size: .52rem;
  text-align: center;
}

.katakana-name-study {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--ks-sky);
  border-radius: 5px 15px 5px 15px;
  background:
    radial-gradient(circle at 93% 16%, rgba(114, 185, 202, .15) 0 28px, transparent 29px),
    rgba(255, 255, 255, .62);
}

.katakana-name-flow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.katakana-name-flow > div {
  display: grid;
  min-width: 35px;
  text-align: center;
}

.katakana-name-flow small {
  color: var(--ks-muted);
  font-family: var(--f-mono);
  font-size: .5rem;
}

.katakana-name-flow b {
  color: var(--ks-teal-dark);
  font-family: var(--f-sans-jp);
  font-size: 1.4rem;
  line-height: 1.05;
}

.katakana-name-flow > i {
  color: var(--ks-coral);
  font-size: .85rem;
  font-style: normal;
  font-weight: 800;
}

.katakana-name-flow .katakana-name-flow__result {
  min-width: 64px;
  padding: 5px 7px;
  border-radius: 50%;
  background: var(--ks-teal);
}

.katakana-name-flow__result b { color: #fff; }
.katakana-name-flow__result span { color: #e8f4f1; font-family: var(--f-body); font-size: .58rem; }

.katakana-recall {
  display: grid;
  grid-template-columns: 1.2fr auto;
  align-items: center;
  gap: 5px 12px;
  padding: 7px 10px;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
}

.katakana-recall__copy { display: grid; gap: 1px; }
.katakana-recall__copy b { color: var(--ks-coral); font-size: .7rem; }
.katakana-recall__copy span { color: var(--ks-muted); font-size: .62rem; }
.katakana-recall__prompt { display: flex; gap: 12px; }
.katakana-recall__prompt b { color: var(--ks-teal-dark); font-family: var(--f-sans-jp); font-size: 1.08rem; }
.katakana-entry-signal .katakana-recall > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ks-muted);
  font-size: .56rem;
  line-height: 1.3;
  text-align: right;
}

.katakana-entry-signal .katakana-forward {
  margin: 5px 0 0;
  color: var(--ks-muted);
  font-size: .65rem;
  line-height: 1.4;
  text-align: center;
}

@media screen and (max-width: 760px) {
  .katakana-entry-signal {
    box-sizing: border-box;
    width: calc(100% - 24px);
    min-height: auto;
    padding: 22px 18px;
  }
  .katakana-entry-signal .page__header { gap: 12px; }
  .katakana-entry-signal .page__header span:first-child { letter-spacing: .07em; }
  .katakana-entry-signal h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .katakana-route { grid-template-columns: 1fr; }
  .katakana-route li + li { border-top: 1px solid var(--ks-line); border-left: 0; }
  .katakana-route li + li::before { top: -7px; left: 16px; transform: rotate(90deg); }
  .katakana-entry-signal .kana-cell .m { font-size: .72rem; overflow-wrap: anywhere; }
  .katakana-bridge,
  .katakana-name-study,
  .katakana-recall { grid-template-columns: 1fr; }
  .katakana-bridge__pairs,
  .katakana-name-flow { justify-content: center; }
  .katakana-recall__prompt { justify-content: space-around; }
  .katakana-entry-signal .katakana-entry-lead,
  .katakana-entry-signal .katakana-bridge p,
  .katakana-entry-signal .katakana-name-study p,
  .katakana-recall__copy b,
  .katakana-recall__copy span,
  .katakana-entry-signal .katakana-recall > p,
  .katakana-entry-signal .katakana-forward { font-size: .86rem; }
}

@media print {
  .katakana-route,
  .katakana-sound-field,
  .katakana-bridge,
  .katakana-name-study,
  .katakana-recall { break-inside: avoid; page-break-inside: avoid; }

  .katakana-entry-signal .kana-grid { gap: 0; }
  .katakana-entry-signal .kana-cell { padding: 4px 3px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .katakana-entry-signal *,
  .katakana-entry-signal *::before,
  .katakana-entry-signal *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.konbini-signal {
  --kb-pearl: #f7f4ed;
  --kb-paper: #fffdf8;
  --kb-celadon: #bcd9d1;
  --kb-celadon-soft: #e7f1ed;
  --kb-sky: #72b9ca;
  --kb-teal: #28535b;
  --kb-teal-dark: #183d43;
  --kb-muted: #5f7375;
  --kb-coral: #c14f59;
  --kb-line: rgba(40, 83, 91, .22);
  color: var(--kb-teal-dark);
  background:
    radial-gradient(circle at 94% 9%, transparent 0 62px, rgba(114, 185, 202, .2) 63px 65px, transparent 66px),
    radial-gradient(circle at 7% 91%, rgba(184, 190, 224, .15), transparent 24%),
    linear-gradient(145deg, var(--kb-paper) 0%, var(--kb-pearl) 48%, #edf6f3 100%);
}

.konbini-signal .page__header {
  border-color: var(--kb-line);
  color: var(--kb-teal);
}

.konbini-signal .chap-glyph { color: var(--kb-sky); }

.konbini-signal .eyebrow { color: #386f78; }

.konbini-signal h1 {
  margin-bottom: .18em;
  color: var(--kb-teal);
  font-size: 2.2rem;
  line-height: 1.05;
  text-wrap: balance;
}

.konbini-lead {
  max-width: 92%;
  margin-bottom: 9px !important;
  color: #436368;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

.konbini-objective {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid rgba(40, 83, 91, .3);
  border-radius: 11px;
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .54);
}

.konbini-objective__tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--kb-teal);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.konbini-objective strong {
  color: var(--kb-teal-dark);
  font-size: .76rem;
  line-height: 1.35;
}

.konbini-objective__route {
  color: #4f7c83;
  font-family: var(--f-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .035em;
  white-space: nowrap;
}

.konbini-world {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 278px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-radius: 14px 4px 14px 4px;
  background: rgba(255, 253, 248, .86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.konbini-art {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #163d50;
}

.konbini-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 68%, rgba(247, 244, 237, .18)),
    linear-gradient(0deg, rgba(18, 53, 65, .38), transparent 25%);
}

.konbini-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 278px;
  object-fit: cover;
  object-position: 57% center;
}

.konbini-art figcaption {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 8px 8px 3px 8px;
  background: rgba(24, 61, 67, .74);
  color: #f7f4ed;
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
}

.konbini-world__copy {
  position: relative;
  padding: 13px 14px 12px;
}

.konbini-world__copy::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(114, 185, 202, .42);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(188, 217, 209, .11);
}

.konbini-kicker {
  display: block;
  color: #386f78;
  font-family: var(--f-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .055em;
}

.konbini-world__copy h2 {
  max-width: 82%;
  margin: 4px 0 6px;
  color: var(--kb-teal-dark);
  font-size: 1.18rem;
  line-height: 1.14;
  text-wrap: balance;
}

.konbini-world__copy > p {
  margin: 0 0 8px;
  color: #476267;
  font-size: .72rem;
  line-height: 1.46;
}

.konbini-vocab {
  border-top: 1px solid var(--kb-line);
  border-bottom: 1px solid var(--kb-line);
}

.konbini-vocab__head {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  padding: 4px 7px;
  color: var(--kb-teal);
  background: rgba(188, 217, 209, .28);
  font-family: var(--f-mono);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.konbini-vocab__head span:last-child { text-align: right; }
.konbini-vocab dl { margin: 0; }

.konbini-vocab dl > div {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  min-height: 29px;
  padding: 3px 7px;
  border-bottom: 1px solid rgba(40, 83, 91, .12);
}

.konbini-vocab dl > div:last-child { border-bottom: 0; }

.konbini-vocab dt {
  color: var(--kb-muted);
  font-size: .65rem;
}

.konbini-vocab dd {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
}

.konbini-vocab dd b {
  color: var(--kb-teal-dark);
  font-family: var(--f-sans-jp);
  font-size: .82rem;
}

.konbini-vocab dd span {
  color: var(--kb-muted);
  font-family: var(--f-mono);
  font-size: .55rem;
}

.konbini-checkout {
  margin-top: 10px;
  padding: 10px 12px 9px;
  border: 1px solid var(--kb-line);
  border-radius: 5px 16px 5px 16px;
  background:
    radial-gradient(circle at 94% 10%, rgba(114, 185, 202, .17), transparent 28%),
    rgba(255, 255, 255, .68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .58);
}

.konbini-checkout__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.konbini-checkout .signal-index {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--kb-sky);
  border-radius: 50%;
  background: var(--kb-pearl);
  color: var(--kb-teal-dark);
  font-family: var(--f-serif-jp);
  font-size: .92rem;
  font-weight: 700;
}

.konbini-checkout h2 {
  margin: 1px 0 0;
  color: var(--kb-teal-dark);
  font-size: 1.22rem;
}

.konbini-checkout__gloss {
  color: var(--kb-muted);
  font-size: .68rem;
  font-style: italic;
}

.konbini-replies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
}

.konbini-replies > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 7px;
  padding: 6px 8px;
  border: 1px solid rgba(40, 83, 91, .2);
  border-radius: 9px 9px 3px 9px;
  background: rgba(247, 244, 237, .72);
}

.konbini-replies > div:last-child { background: rgba(231, 241, 237, .78); }

.konbini-replies small {
  grid-column: 1 / -1;
  color: #386f78;
  font-family: var(--f-mono);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .1em;
}

.konbini-replies b {
  color: var(--kb-teal-dark);
  font-family: var(--f-sans-jp);
  font-size: .83rem;
}

.konbini-replies span {
  color: var(--kb-muted);
  font-family: var(--f-mono);
  font-size: .55rem;
  text-align: right;
}

.konbini-recall {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(40, 83, 91, .14);
}

.konbini-recall > span {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--kb-coral);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .1em;
}

.konbini-recall p {
  margin: 0;
  color: #51696d;
  font-size: .64rem;
  line-height: 1.35;
}

.konbini-signal .konbini-quest {
  margin-top: 15px;
  padding: 12px 14px 9px;
  border: 1.5px solid var(--kb-sky);
  border-radius: 15px 5px 15px 5px;
  background: rgba(255, 253, 248, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.konbini-signal .konbini-quest::before {
  content: var(--gengo-quest-03-label, "QUEST 03");
  top: -10px;
  border-radius: 999px;
  background: var(--kb-teal);
  font-size: 8px;
}

.konbini-signal .konbini-quest h3 {
  margin: 2px 0 4px;
  color: var(--kb-teal);
  font-size: 1rem;
}

.konbini-signal .konbini-quest .cando {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 13px;
  margin-top: 3px;
}

.konbini-signal .konbini-quest .cando li {
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  border-color: rgba(40, 83, 91, .12);
  color: #435f64;
  font-size: .68rem;
  line-height: 1.35;
}

.konbini-signal .konbini-quest .cando li:last-child { grid-column: 1 / -1; }

.konbini-signal .konbini-quest .box {
  width: 13px;
  height: 13px;
  margin-top: 1px;
  border: 1.5px solid var(--kb-sky);
  border-radius: 3px;
}

.konbini-quest__proof {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--kb-line);
  color: var(--kb-muted);
  font-size: .63rem;
}

.konbini-quest__proof b { color: var(--kb-teal); }

.konbini-signal .next-signal {
  margin: 8px 0 0;
  color: var(--kb-muted);
  font-size: .68rem;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
}

.konbini-signal .page__footer {
  border-color: rgba(40, 83, 91, .18);
  color: var(--kb-muted);
}

@media screen and (max-width: 760px) {
  .konbini-objective { grid-template-columns: auto 1fr; }
  .konbini-objective__route { grid-column: 1 / -1; white-space: normal; }
  .konbini-world { grid-template-columns: 1fr; }
  .konbini-art img { min-height: 230px; }
  .konbini-checkout__head { grid-template-columns: auto 1fr; }
  .konbini-checkout__gloss { grid-column: 2; }
  .konbini-replies { grid-template-columns: 1fr; }
  .konbini-signal .konbini-quest .cando { grid-template-columns: 1fr; }
  .konbini-signal .konbini-quest .cando li:last-child { grid-column: auto; }
  .konbini-lead,
  .konbini-world__copy > p,
  .konbini-vocab dt,
  .konbini-checkout__gloss,
  .konbini-recall p,
  .konbini-signal .konbini-quest .cando li,
  .konbini-signal .next-signal { font-size: .88rem; }
}

@media print {
  .konbini-objective,
  .konbini-world,
  .konbini-checkout,
  .konbini-quest { break-inside: avoid; page-break-inside: avoid; }

  .konbini-art figcaption { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .konbini-signal *,
  .konbini-signal *::before,
  .konbini-signal *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}