/* Chinni: the site's only dark hero, with a working chat beside the headline; a phrasebook table; the three
   "asks first" cards as real artifacts; the chat's four shortcuts as tiles; a charcoal "won't do" band. */

.cn-hero { background: radial-gradient(60% 80% at 80% 30%, #1E3A4C, rgba(30,58,76,0) 70%), linear-gradient(140deg, #16191D, #2B3138); color: #fff }
.cn-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 5vw; align-items: center; padding-top: 124px; padding-bottom: clamp(60px, 9vh, 100px); min-height: min(100vh, 940px) }
.cn-hero .h-xl { font-size: clamp(38px, 4.4vw, 66px); color: #fff } .cn-hero .lead { color: #D0D6DD }
.cn-hero .kick { color: #7DD3FC } .cn-hero .kick::before { background: #7DD3FC }
.cn-hero .crumbs ol { color: #A3ACB7 } .cn-hero .crumbs a { color: #7DD3FC } .cn-hero .crumbs li + li::before { color: #6B7480 }
.cn-hero .btn.line { color: #fff; border-color: rgba(255,255,255,.35); background: transparent } .cn-hero .btn.line:hover { border-color: #fff }

/* the site header is transparent at the top of other pages; over this dark hero it needs its light bar from the start */
.nav { background: rgba(248,250,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--border) }

/* the chat */
.cn-chat { background: #fff; color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 60px 120px -50px rgba(0,0,0,.6) }
.cc-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border) }
.cc-top b { display: block; font-size: 16px } .cc-top small { color: var(--faint); font-size: 12.5px }
.cc-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #38BDF8, #0369A1); color: #fff; font-weight: 800 }
.cc-reply { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 9px; border-radius: 6px; background: #F1F5FA }
.cc-body { height: 330px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F6F9FD; overscroll-behavior: contain }
.msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45 }
.msg p { margin: 0 } .msg p + p { margin-top: 3px }
.msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px }
.msg.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px }
.msg.wide { max-width: 92%; padding: 0; background: none; border: 0 }
.msg.typing { display: flex; gap: 4px; padding: 13px 14px } .msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #A3ACB7; animation: cn-dot 1s infinite }
.msg.typing i:nth-child(2) { animation-delay: .15s } .msg.typing i:nth-child(3) { animation-delay: .3s }
@keyframes cn-dot { 0%, 60%, 100% { transform: none; opacity: .5 } 30% { transform: translateY(-4px); opacity: 1 } }
.ambig { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px } .ambig .kb { padding: 9px 12px; font-size: 14px }

/* cards (the app's) */
.card { width: 270px; max-width: 100%; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1.5px solid var(--border); box-shadow: 0 16px 30px -22px rgba(0,49,91,.5) }
.card-h { font-weight: 800; font-size: 15px; margin-bottom: 8px }
.card-tx .card-h { color: var(--link) } .card-new .card-h { color: #0B6B50 } .card-amb .card-h { color: #9A5B00 }
.card-l { font-size: 14px; color: #2F3640; padding: 1px 0 } .card-amt { font: 800 22px/1.3 var(--font); color: var(--ink); margin-top: 4px }
.card-b { display: flex; gap: 8px; margin-top: 12px } .card-b .kb, .card-b span { flex: 1; padding: 10px 8px; font-size: 14px; text-align: center }
.card-b span { border-radius: 10px; border: 1.5px solid var(--border); font-weight: 700 } .card-b span.go { background: var(--teal); border-color: var(--teal); color: #00281D }
.card-done { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #E6F7F1; color: #0B6B50; font-weight: 700; font-size: 14px }
.card-done.no { background: #F1F5FA; color: var(--muted) }

.cc-pick { padding: 14px 18px 4px; border-top: 1px solid var(--border) }
.cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px }
.cc-l { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px } .cc-row .cc-l { margin: 0 }
.cc-prompts { display: flex; flex-wrap: wrap; gap: 8px }
.chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 9px 13px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: border-color .15s, background .15s }
.chip:hover { border-color: #7DB9EA; background: #F2F8FF } .chip:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }
.busy .chip { opacity: .55; cursor: default }
.cc-eg { padding: 8px 18px 14px; margin: 0 }

/* phrasebook */
.ph-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: end; margin-bottom: 30px } .ph-head .lead { margin: 0 }
.ph-table { width: 100%; border-collapse: collapse }
.ph-table th { text-align: left; padding: 10px 24px 10px 0; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); border-bottom: 2px solid var(--ink) }
.ph-table td { padding: 18px 24px 18px 0; vertical-align: top; border-bottom: 1px solid var(--border) } .ph-table td:first-child { width: 42% }
.ph-say { display: inline-block; padding: 9px 14px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; font-weight: 600; font-size: 16px }
.ph-table td b { display: block; font-size: 18px } .ph-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 15.5px }

/* asks first */
.cn-asks { background: linear-gradient(180deg, var(--bg), #EAF4FD 25%, #EAF4FD 75%, var(--bg)) }
.as-cards { list-style: none; margin: 40px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start }
.as-cards li:nth-child(2) { margin-top: 34px } .as-cards li:nth-child(3) { margin-top: 68px }
.as-cards .card { width: 100%; padding: 18px 20px }
.as-when { margin: 16px 0 0; color: var(--muted) } .as-when b { color: var(--ink) }

/* shortcuts */
.cn-short { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; align-items: center }
.sh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.sh-grid li { padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--border); display: grid; gap: 4px; align-content: start; border-top: 4px solid var(--c, var(--sky)) }
.sh-profit { --c: #00B894 } .sh-overdue { --c: #E5484D } .sh-scan { --c: #0284C7 } .sh-stock { --c: #F59E0B }
.sh-grid b { font-size: 17px } .sh-grid span { color: var(--muted); font-size: 15px }
.sh-grid a { margin-top: 6px; color: var(--link); font-weight: 700; font-size: 14.5px; text-decoration: none } .sh-grid a:hover { text-decoration: underline }

/* won't do */
.cn-wont { margin: 0 var(--gl) clamp(60px, 9vh, 100px); border-radius: 28px; background: linear-gradient(120deg, #1F2328, #2B3138); color: #fff }
.wo-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; align-items: center; padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(48px, 7vh, 80px) }
.cn-wont ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.cn-wont li { position: relative; padding-left: 30px; color: #DCE7F3; font-size: 17.5px }
.cn-wont li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 14px; height: 2.5px; background: #FDA4AF; transform: rotate(45deg) } .cn-wont li::after { content: ""; position: absolute; left: 2px; top: .55em; width: 14px; height: 2.5px; background: #FDA4AF; transform: rotate(-45deg) }
.wo-priv { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #D0D6DD; font-size: 15.5px } .wo-priv a { color: #7DD3FC; font-weight: 700 }

@media (max-width: 980px) {
  .cn-in { grid-template-columns: minmax(0, 1fr); padding-top: 104px; min-height: 0; gap: 30px }
  .cc-body { height: 290px } .cc-top { padding: 12px 14px } .cc-pick { padding: 12px 14px 2px }
  .cc-prompts { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 10px; scroll-snap-type: x proximity; scrollbar-width: thin } .chip { flex: none; scroll-snap-align: start; white-space: nowrap }
  .ph-head { grid-template-columns: minmax(0, 1fr); gap: 12px } .ph-table thead { display: none } .ph-table tr, .ph-table td { display: block; width: auto !important; padding: 0 } .ph-table tr { padding: 16px 0; border-bottom: 1px solid var(--border) } .ph-table td { border: 0 } .ph-table td + td { margin-top: 10px }
  .as-cards { grid-template-columns: minmax(0, 1fr); gap: 26px } .as-cards li:nth-child(n) { margin-top: 0 }
  .cn-short, .wo-in { grid-template-columns: minmax(0, 1fr); gap: 24px } .sh-grid { grid-template-columns: minmax(0, 1fr) }
  .cn-wont { margin-left: 12px; margin-right: 12px }
}
@media (prefers-reduced-motion: reduce) { .msg.typing i { animation: none } .chip { transition: none } }