/* Create By Asking: "AI at work" section. Before/after panels, mini spreadsheets, the demo dashboard and the section landing page.
   Loaded after style.css and tools.css. */

.ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: center; }
.ba-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ba-label { font: 600 0.7rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #A597CC; }
.ba-arrow { font: 800 1.6rem/1 var(--display); color: #FFC93C; }
.ba-ask { background: rgba(255, 255, 255, 0.08); border-radius: 12px 12px 12px 4px; padding: 12px 14px; font: 400 0.88rem/1.55 var(--mono); color: #F2ECFF; }
.ba-code { font-variant-ligatures: none; background: #0F0827; border: 1px solid rgba(255, 201, 60, 0.35); border-radius: 10px; padding: 12px 14px; font: 600 0.82rem/1.5 var(--mono); color: #FFC93C; overflow-wrap: anywhere; }
.ba-note { font-size: 0.78rem; color: #A597CC; }
@media (max-width: 860px) { .ba { grid-template-columns: 1fr; } .ba-arrow { transform: rotate(90deg); justify-self: center; } }

/* a spreadsheet look-alike, light like the real thing */
.sheet-wrap { overflow-x: auto; border-radius: 8px; }
.sheet { border-collapse: collapse; background: #fff; color: #1E2433; font: 400 0.76rem/1.3 var(--body); width: 100%; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { border: 1px solid #D5DAE3; padding: 5px 8px; white-space: nowrap; text-align: left; }
.sheet thead th { background: #EEF1F6; color: #586379; font: 600 0.68rem/1 var(--mono); text-align: center; }
.sheet tbody th { background: #EEF1F6; color: #586379; font: 600 0.68rem/1 var(--mono); width: 28px; text-align: center; }
.sheet .hdr td { font-weight: 700; background: #F7F8FB; }
.sheet .num { text-align: right; }
.sheet .bad { background: #FFE1DA; color: #A02A14; }
.sheet .good { background: #DDF5E8; color: #0E6B45; }
.sheet .hl { background: #FFF3B8; font-weight: 700; }
.sheet .total td { font-weight: 700; border-top: 2px solid #1E2433; }
.sheet .more td { color: #8F96A6; font-style: italic; text-align: center; }

/* demo dashboard */
.dash { display: grid; gap: 14px; }
.dash-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-top h3 { font-size: var(--step-1); }
.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-tiles .score strong { font-size: clamp(1.15rem, 3vw, 1.7rem); }
.dash-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.dash-card { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 12px; display: grid; gap: 10px; align-content: start; }
.cols { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.cols div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.cols i { display: block; width: 100%; max-height: calc(100% - 16px); background: #6FA8FF; border-radius: 4px 4px 0 0; min-height: 2px; }
.cols span { font: 500 0.62rem/1 var(--mono); color: #A597CC; }
.hbars { display: grid; gap: 8px; }
.hbars div { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; font-size: 0.78rem; color: #CBBFE8; }
.hbars i { display: block; height: 12px; border-radius: 4px; }
.hbars b { color: #fff; font-variant-numeric: tabular-nums; }
.lights { display: grid; gap: 6px; font-size: 0.78rem; }
.lights div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; color: #1C0F3F; font-weight: 600; }
.lights .g { background: #5BD48F; } .lights .a { background: #FFB04D; } .lights .r { background: #FF7A62; }
@media (max-width: 760px) { .dash-tiles { grid-template-columns: 1fr 1fr; } .dash-charts { grid-template-columns: 1fr; } }

/* mock AI chat for the analysis guide */
.chat { display: grid; gap: 12px; max-width: 760px; }
.chat-you { justify-self: end; max-width: 85%; background: #FFC93C; color: #1C0F3F; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-weight: 600; }
.chat-ai { background: rgba(255, 255, 255, 0.06); border-radius: 14px 14px 14px 4px; padding: 14px; display: grid; gap: 12px; color: #F2ECFF; font-size: var(--step--1); }
.file-chip { display: inline-flex; gap: 8px; align-items: center; justify-self: start; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 8px 12px; font: 600 0.78rem/1 var(--mono); color: #fff; }
.file-chip::before { content: ""; width: 14px; height: 16px; border-radius: 3px; background: #5BD48F; }

/* section landing page */
.work-hero { padding-block: 40px 28px; display: grid; gap: 16px; }
.work-hero .lede { font-size: var(--step-1); color: var(--muted); max-width: 62ch; }
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.route { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.route .num { font: 700 0.85rem/1 var(--mono); width: 34px; height: 34px; border-radius: 50%; background: var(--marker); color: var(--on-marker); display: grid; place-items: center; }
.route p { color: var(--muted); }
.route .tagline { font-size: var(--step--1); color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .routes { grid-template-columns: 1fr; } }
.files { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.file { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.file:hover { border-color: var(--ink); }
.file span { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 640px) { .files { grid-template-columns: 1fr; } }
.safety { background: var(--accent-soft); border-radius: 14px; padding: 22px; display: grid; gap: 10px; }
.safety ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }