/* Look of the Japanese homepage: 帳場 (chōba) — the ryokan front desk ledger.
   Washi paper and sumi ink; indigo is the record (台帳), yamabuki is the AI's draft (付箋),
   vermilion is a person's approval (印). Mincho for display type only.
   Loads after styles.css and plus.css; sets tokens first, then the components that hard-code colour. */

/* display type: a mincho subset per page language, so each page downloads only its own (rebuild: docs/redesign-notes.md) */
@font-face { font-family: "Noto Serif JP Headings"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("/assets/fonts/NotoSerifJP-headings.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif SC Headings"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("/assets/fonts/NotoSerifSC-headings.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif Latin Headings"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("/assets/fonts/NotoSerifLatin-headings.woff2") format("woff2"); }
:root[data-theme="chouba"]{
  --ink: #1e1a15; --ink-soft: #3d362c; --muted: #6a6152; --line: rgba(30, 26, 21, 0.13);
  --canvas: #f3eee3; --card: #fbf8f1;
  --lime: #f0cf5c; --lime-deep: #d9b23a;               /* yamabuki highlighter */
  --celadon: #7d9e78; --celadon-deep: #4a6d43;          /* wakatake green, 5.1:1 on paper */
  --lavender: #ece5d6; --peach: #f1e3d3; --sky: #e6e7e1; --mint: #e5eadb; --pink: #f1e1da;
  --radius-lg: 14px; --radius-md: 10px; --radius-sm: 8px;
  --shadow-soft: 0 22px 44px -30px rgba(60, 40, 10, 0.45); --shadow-card: 0 1px 0 rgba(30, 26, 21, 0.05);
  --vermilion: #b8371f; --indigo: #233a5e; --indigo-deep: #18283f;
  --serif: "Noto Serif JP Headings", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* the dark panels are the record (台帳): indigo, with paper-white type */
  --bezel: #1e1a15; --bezel-hi: #3a342b;   /* the terminal is lacquered like the front desk */
  --panel-dark: var(--indigo); --on-dark: #f3eee3; --on-dark-soft: #e6dfd0; --on-dark-muted: #c2b9a7; /* muted 5.9:1 on indigo */
  --tile: #fffdf8;
  --marker: #f0d470;
}
:root[data-theme="chouba"]:lang(zh){ --serif: "Noto Serif SC Headings", "Songti SC", "STSong", "SimSun", serif; }
:root[data-theme="chouba"]:lang(en){ --serif: "Noto Serif Latin Headings", "Georgia", serif; }
/* in English the seal reads a whole word: shrink the words, not the ring (the ring is sized in em) */
:root[data-theme="chouba"]:lang(en) .seal::before{ font-size: .6em; letter-spacing: .02em; }
:root[data-theme="chouba"]:lang(en) .seal::after{ font-size: .48em; }
:root[data-theme="chouba"]:lang(en) .case-stamp{ font-size: 11.5px; }
[data-theme="chouba"] .aurora{ background: var(--canvas); }
[data-theme="chouba"] .aurora::after{ content: ""; position: absolute; inset: 0; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .27  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[data-theme="chouba"] .aurora-blob{ display: none; }
/* mincho is display type: headings and large figures only; card titles stay gothic */
[data-theme="chouba"] :is(h1, h2, .hero-metrics dt, .price-line b, .rate-ai-to, .kx-room b, .footer-watermark){ font-family: var(--serif); }
[data-theme="chouba"] .hero-title{ font-weight: 700; letter-spacing: 0; }
[data-theme="chouba"] .section-title{ font-weight: 700; letter-spacing: 0; }
[data-theme="chouba"] :is(.floating-header, .floating-header.is-scrolled){ background: rgba(251, 248, 241, 0.88); border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(60, 40, 10, .5); }
[data-theme="chouba"] :is(.kicker-chip, .eyebrow-chip){ background: transparent; border: 1px solid var(--ink); border-radius: 4px; box-shadow: none; color: var(--ink); }
[data-theme="chouba"] .eyebrow-dot{ background: var(--indigo); box-shadow: none; }
[data-theme="chouba"] .kicker-chip.on-dark{ border-color: rgba(243, 238, 227, .5); color: #f3eee3; }
[data-theme="chouba"] .cta-pill, [data-theme="chouba"] .chip-dark{ background: var(--vermilion); color: #fff; }
[data-theme="chouba"] .ghost-pill, [data-theme="chouba"] .audience-link{ background: transparent; border-color: var(--ink); }
[data-theme="chouba"] :is(.pain-card, .capability-card, .service-card, .security-card, .price-card, .faq-item, .rates-stage, .kiosk, .workflow-panel, .marquee-chip, .hub-node, .workflow-tabs){ background: var(--card); box-shadow: none; border-color: var(--line); }
[data-theme="chouba"] :is(.pain-card, .capability-card, .service-card, .price-card, .bento-card):hover{ box-shadow: 0 18px 36px -26px rgba(60, 40, 10, .5); }
/* vermilion is kept for a person's approval and the one main call to action */
[data-theme="chouba"] .pain-chip.after, [data-theme="chouba"] .price-badge{ background: var(--indigo); color: var(--on-dark); }
[data-theme="chouba"] .bento-card{ border-color: var(--line); box-shadow: none; }
[data-theme="chouba"] .bento-tag{ background: rgba(251, 248, 241, .8); }
[data-theme="chouba"] .workflow-tab.is-active, [data-theme="chouba"] .mock-tab.is-on{ background: var(--ink); }
[data-theme="chouba"] .stage-glow{ background: radial-gradient(60% 50% at 50% 8%, rgba(255, 246, 220, .75), transparent 70%); }   /* a lamp over the desk, not coloured haze */
[data-theme="chouba"] .device-frame{ background: rgba(251, 248, 241, .9); border-color: var(--line); }
[data-theme="chouba"] .mock-console{ background: #fdfbf6; }
/* room states in the ledger's own inks: occupied indigo, cleaning kraft, ready plain paper */
[data-theme="chouba"] .mock-room.occupied{ background: linear-gradient(135deg, #c3cbdb, #d9dfea); }
[data-theme="chouba"] .mock-room.cleaning{ background: linear-gradient(135deg, #e6d3ad, #f0e3c6); }
[data-theme="chouba"] .mock-room.ready{ background: #fdfbf6; box-shadow: inset 0 0 0 1px rgba(30, 26, 21, .14); }
/* the AI's draft is a yamabuki sticky note (付箋) laid on the ledger; once approved it is recorded in indigo */
[data-theme="chouba"] .mock-assistant{ background: linear-gradient(165deg, #f8e7ab 0%, var(--lime) 58%, #e9c552 100%); border-radius: 6px; transform: rotate(-.6deg);
  box-shadow: 0 1px 0 rgba(60, 40, 10, .08), 0 18px 26px -18px rgba(60, 40, 10, .6); }
[data-theme="chouba"] .assistant-orb{ background: radial-gradient(circle at 35% 30%, #8ea3c4, var(--indigo) 72%); box-shadow: none; }
[data-theme="chouba"] .assistant-actions .chip-dark.op-approved{ background: var(--indigo); color: var(--on-dark); }
/* the record panels carry ledger rules (台帳罫) on a layer of their own: the panel colour stays a plain fill */
[data-theme="chouba"] .terminal-card{ background: var(--panel-dark); }
[data-theme="chouba"] .terminal-card, [data-theme="chouba"] .rate-ai{ isolation: isolate; }
[data-theme="chouba"] .terminal-card::after, [data-theme="chouba"] .rate-ai::after{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(243, 238, 227, .055) 27px 28px); }
@media (max-width: 980px) { [data-theme="chouba"] .terminal-card{ position: relative; } }
[data-theme="chouba"] .rate-tile.own, [data-theme="chouba"] .kx-room{ background: var(--ink); }
[data-theme="chouba"] .op-face{ background: linear-gradient(135deg, #b8371f, #d9583d); color: #fff; }
[data-theme="chouba"] .mock-room.op-fixing::after{ border-color: rgba(184, 55, 31, .9); }
/* approval band: indigo night, a manila case file, the approval lands as a vermilion seal */
[data-theme="chouba"] .trail-section{ background: radial-gradient(rgba(243, 238, 227, .07) 1px, transparent 1.6px) 0 0 / 24px 24px, linear-gradient(180deg, #1c2d49, var(--indigo-deep)); }
[data-theme="chouba"] .trail-streak{ display: none; }
[data-theme="chouba"] .trail-panel{ background: rgba(243, 238, 227, .05); border-color: rgba(243, 238, 227, .14); }
[data-theme="chouba"] .case-back, [data-theme="chouba"] .case-tab{ background: linear-gradient(180deg, #cdb88f, #bca679); border-color: rgba(30, 26, 21, .25); color: #3d362c; }
[data-theme="chouba"] .case-flap{ background: linear-gradient(180deg, rgba(222, 205, 168, .97), rgba(205, 186, 145, .98)); border-color: rgba(30, 26, 21, .2); }
[data-theme="chouba"] .case-flap-label b{ color: #1e1a15; }
[data-theme="chouba"] .case-flap-label small{ color: #5a5040; }
[data-theme="chouba"] .case[data-phase="3"] .case-flap-label b{ color: var(--vermilion); }
[data-theme="chouba"] .case-card{ background: #fdfbf6; }
[data-theme="chouba"] .c-draft{ background: linear-gradient(160deg, #fbe7a0, #f0cf5c); animation-name: draft-breath-ink; }
@keyframes draft-breath-ink { 0%, 100% { box-shadow: 0 0 40px -12px rgba(240, 207, 92, .45), 0 18px 30px -18px rgba(0, 0, 0, .6); } 50% { box-shadow: 0 0 70px -8px rgba(240, 207, 92, .7), 0 18px 30px -18px rgba(0, 0, 0, .6); } }
[data-theme="chouba"] .case-stamp{ width: 72px; height: 72px; padding: 0; border-radius: 50%; display: grid; place-content: center; border: 2.5px solid var(--vermilion); color: var(--vermilion);
  background: rgba(253, 251, 246, .7); font-family: var(--serif); font-size: 17px; line-height: 1.05; right: 4px; bottom: 6px; }
[data-theme="chouba"] .case-stamp small{ color: var(--vermilion); font-size: 9px; }
[data-theme="chouba"] .trail-here, [data-theme="chouba"] .trail-badge{ background: var(--lime); color: #1e1a15; box-shadow: 0 10px 30px -8px rgba(240, 207, 92, .55); }
[data-theme="chouba"] .trail-section[data-phase] .trail-step .num{ --pop: rgba(240, 207, 92, .8); }
[data-theme="chouba"] .trail-section[data-phase] .trail-step:nth-child(1) .num,
[data-theme="chouba"] .trail-section[data-phase="1"] .trail-step:nth-child(2) .num, [data-theme="chouba"] .trail-section[data-phase="2"] .trail-step:nth-child(2) .num, [data-theme="chouba"] .trail-section[data-phase="3"] .trail-step:nth-child(2) .num,
[data-theme="chouba"] .trail-section[data-phase="3"] .trail-step:nth-child(4) .num{ background: var(--lime); border-color: var(--lime); color: #1e1a15; box-shadow: 0 0 22px -4px rgba(240, 207, 92, .7); }
[data-theme="chouba"] .trail-section[data-phase="2"] .trail-step:nth-child(3) .num, [data-theme="chouba"] .trail-section[data-phase="3"] .trail-step:nth-child(3) .num{ background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
[data-theme="chouba"] .trail-section .trail-steps::after, [data-theme="chouba"] .trail-section .trail-valid .bar::before, [data-theme="chouba"] .trail-tl .row.go .dot{ background: var(--lime); box-shadow: none; }
[data-theme="chouba"] .trail-valid .bar::after{ border-left-color: var(--lime); }
[data-theme="chouba"] .trail-section[data-phase="3"] .trail-valid .fin, [data-theme="chouba"] .rec-amt{ color: var(--lime); }
[data-theme="chouba"] .step-player.on-dark .sp-dot.past{ background-color: var(--lime); }
[data-theme="chouba"] .step-player.on-dark .sp-dot i{ background: var(--lime); }
[data-theme="chouba"] .cta-band{ background: var(--ink); }
/* one vertical line of type: the approval band is labelled like the spine of a ledger (縦書き) */
[data-theme="chouba"] .seal{ display: grid; }   /* the approval seal is this look's signature */
@media (max-width: 640px){ [data-theme="chouba"] .title-seal{ display: none; } }   /* the phone title fills the line: no margin to stamp in */
@media (min-width: 1180px) {
  [data-theme="chouba"] .band-spine{ display: block; position: absolute; left: max(28px, calc(50vw - 640px)); top: 120px; z-index: 1; writing-mode: vertical-rl; text-orientation: mixed;
    font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .32em; color: var(--on-dark-muted); padding-top: 22px;
    border-top: 0; background: linear-gradient(var(--vermilion), var(--vermilion)) no-repeat 50% 0 / 1.5px 14px; }
}
[data-theme="chouba"] .contact-card{ background: rgba(251, 248, 241, .92); border-color: var(--line); }
[data-theme="chouba"] .sp-surface{ background: rgba(251, 248, 241, .9); }

/* only the recommended plan carries the accent; the other two step back to an outline */
/* the back half carries the front's materials: ledger rules on records, indigo for what is kept, serif numerals */
[data-theme="chouba"] :is(.security-card, .price-card.featured){ background-color: var(--card); background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(30, 26, 21, .045) 27px 28px); }
[data-theme="chouba"] .security-card .sec-ico{ background: transparent; border: 1px solid var(--line); }
[data-theme="chouba"] .security-card .sec-ico svg{ stroke: var(--indigo); }
[data-theme="chouba"] .service-card::before{ display: none; }
[data-theme="chouba"] .service-num{ font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1; color: var(--indigo); }
[data-theme="chouba"] .price-card.featured{ border-color: var(--indigo); box-shadow: inset 0 3px 0 var(--indigo), 0 24px 50px -30px rgba(24, 40, 63, .45); }
[data-theme="chouba"] .faq-item[open]{ box-shadow: inset 3px 0 0 var(--indigo); }
[data-theme="chouba"] .faq-chevron{ border-color: var(--indigo); }
[data-theme="chouba"] .swipe-dots i.on{ background: var(--indigo); }
[data-theme="chouba"] .price-card:not(.featured) .price-cta{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }