/* LLMON landing overrides — loaded AFTER design-template.css.
   Adapts the designer template (granite-vision-document-intelligence) to this
   demo. Every rule here is an intentional deviation from the template. */

/* The template's IBM logo SVG paints via fill="var(--fill-0, white)" — but a
   CSS variable cannot cross an <img> document boundary, so the app swaps logo
   files per theme instead (ibm-logo.svg in dark, ibm-logo-black.svg in light).
   No rule needed here; kept as a note. */

/* The template's dropzone is an upload target; ours is a static explainer
   (this demo has no upload). Remove pointer affordances, keep the look. */
.file-panel-dropzone { cursor: default; }
.file-panel-dropzone:hover,
.file-panel-dropzone:active {
  border-color: var(--v2-card-border);
  background: var(--v2-card-bg);
}

/* Primary pill is a link here (the template's is a button): no underline. */
a.app-card__upload-btn { text-decoration: none; }
a.app-card__upload-btn:hover { background: var(--v2-accent); }

/* Menu icons that come from imgs instead of inline SVG. */
.app-menu-row__icon-img { width: 18px; height: 18px; object-fit: contain; }

/* Each example row links into Generation Flow (the template's rows are
   upload buttons); keep rows keyboard-focusable like the template's. */
.examples-panel-row { text-decoration: none; }
.examples-panel-row:hover .examples-panel-name { text-decoration: underline; }

/* View cards inside the info panel are links, as "Parsing types" are not. */
a.info-panel__feature-card { text-decoration: none; }
a.info-panel__feature-card:hover .info-panel__feature-title { text-decoration: underline; }

/* The template's blue tile holds the Granite Vision eye (a white shape with a
   dark part that moves, 8s loop, only while the panel is open, off for reduced
   motion). LLMON's equivalent: a soft-yellow lemon silhouette (the owner's artwork,
   traced to a vector) seen through a magnifying glass that is LARGER than the
   lemon. The lens slides in, shows the lemon enlarged, then zooms in further.
   Geometry: the lemon reaches 21.6 units from its centre and the lens window
   is 49 units, so it could grow to 2.27x before touching the rim; the peak is
   capped at 1.6x (34.5 units) so the lemon is never bigger than the glass.
   Placeholder motion/art, to be replaced by designer artwork. */
.lemon-anim__wrap { z-index: 1; width: 220px; height: 220px; position: relative; }
.lemon-anim { width: 100%; height: 100%; display: block; overflow: visible; }
/* Soft pale yellow, a lighter tint of the palette's yellow (Carbon yellow 20, #fddc69). */
.lemon-anim__lemon { fill: #fbe7a1; }
.lemon-anim__glass, .lemon-anim__zoomed { transform-box: view-box; transform-origin: 52px 52px; }
/* Opaque lens so only the enlarged copy shows inside it, never a double image. */
.lemon-anim__lens { fill: #4589ff; }
.lemon-anim__rim { fill: none; stroke: #121619; stroke-width: 5.5; }
/* Square-ended handle (flat butt cap, no rounding). */
.lemon-anim__handle { stroke: #121619; stroke-width: 9; stroke-linecap: butt; }
.lemon-anim__shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .85; }
/* Resting state (also the reduced-motion state): lens over the lemon, 1.3x. */
.lemon-anim__zoomed { transform: scale(1.3); }
/* Same animation style as the template's eye: one 8s ease-in-out infinite loop
   per moving part, only while the info panel is open, with the SAME keyframe
   beats as the eye's pupil (rest 0-20%, move 20-30%, hold 30-45%, move 45-60%,
   hold 60-72%, move 72-80%, return 80-90%, rest 90-100%).
   - glass:  waits off to the left, slides over the lemon, stays, slides back.
   - zoomed: the lemon seen through the lens. It is counter-translated by the
     glass offset so the lemon itself never moves, and it GROWS while the lens
     slides over it (1x at the edge -> 1.3x once covered), then zooms further to
     1.6x, eases back to 1.3x and shrinks again as the glass leaves.
   Both use identical percentages and easing so the counter-translation stays
   exact. The lemon peaks at 0.8 of the glass height: never bigger than it. */
.info-panel.is-expanded .lemon-anim__glass  { animation: 8s ease-in-out infinite lemon-glass; }
.info-panel.is-expanded .lemon-anim__zoomed { animation: 8s ease-in-out infinite lemon-zoom; }
/* Narrow layouts shrink the info-panel tile to 200px tall (template rule), so
   scale the artwork down with it; otherwise the larger glass would be cut off. */
@media (max-width: 1100px) {
  .lemon-anim__wrap { width: 184px; height: 184px; }
}
@keyframes lemon-glass {
  0%, 20%  { transform: translate(-84px, 0); }
  30%, 45% { transform: translate(0, 0); }
  60%, 72% { transform: translate(0, 0); }
  80%      { transform: translate(0, 0); }
  90%, to  { transform: translate(-84px, 0); }
}
@keyframes lemon-zoom {
  0%, 20%  { transform: translate(84px, 0) scale(1); }
  30%, 45% { transform: translate(0, 0) scale(1.3); }
  60%, 72% { transform: translate(0, 0) scale(1.6); }
  80%      { transform: translate(0, 0) scale(1.3); }
  90%, to  { transform: translate(84px, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .info-panel.is-expanded .lemon-anim__glass,
  .info-panel.is-expanded .lemon-anim__zoomed { animation: none; }
}

/* Owner request: one typeface everywhere — the same IBM Plex Sans used by the
   view-card text ("One guided example: …"). The template sets the model tag in
   IBM Plex Mono; override it so no second family appears. */
.vision-shell, .vision-shell *, .info-panel, .info-panel * {
  font-family: 'IBM Plex Sans', sans-serif;
}

/* Owner request: bold headers (template uses 400/300). */
.info-panel__hero-title,
.app-card__brand-title,
.app-card__brand-subtitle { font-weight: 700; }

/* The template hides each view card's description on windows shorter than
   800px, which leaves two bare titles and no explanation of what the views
   are (laptop browsers with toolbars are often under 800px tall). Keep the
   descriptions at every height; the info panel's text column scrolls. */
@media (max-height: 800px) {
  .info-panel__feature-description { display: block; }
}

/* Landing is just the header and the about card (owner request): no
   workspace behind it, so the card is the page. It is always shown, cannot
   be closed, and keeps the shell's 8px inset at every width (the template's
   narrow-screen rule would otherwise run it edge to edge). The empty app
   card behind it collapses to the header. */
.vision-shell:has(.landing-card) .app-card { flex: 0 0 auto; overflow: visible; z-index: 20; }
/* ^ The header's ⋮ dropdown (model cards, paper, theme) lives inside the app
   card; the card is its own stacking context, so it must sit above the about
   card (z-index 10) or the dropdown opens hidden behind it. overflow is
   visible so the dropdown is not clipped to the 56px header. */
.info-panel.landing-card,
.info-panel.landing-card.is-expanded { right: calc(var(--shell-pad) + 8px); transition: none; }
@media (max-width: 1100px) {
  .info-panel.landing-card,
  .info-panel.landing-card.is-expanded { left: calc(var(--shell-pad) + 8px); right: calc(var(--shell-pad) + 8px); width: auto; }
}

/* Menu popover must sit above the info-panel scrim (z-index 10). */
.app-card__menu-popover { z-index: 30; }

/* ==========================================================================
   Redesigned inner pages (Generation Flow first). They were built on the
   old --cds-* Carbon dark tokens; bridge those names onto the template's
   --v2-* tokens per theme instead of editing every style. html[data-theme]
   outranks @carbon/styles' :root defaults, and the build drops the forced
   cds--g100 class on themed pages. */
html[data-theme='dark'], html[data-theme='light'] {
  --motion-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --motion-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --motion-duration: 200ms;
}
html[data-theme='dark'] {
  --cds-background: var(--v2-shell-bg);
  --cds-layer-01: var(--v2-panel-bg);
  --cds-layer-02: var(--v2-card-bg);
  --cds-layer-hover-01: var(--v2-card-bg);
  --cds-layer-hover-02: var(--v2-panel-border);
  --cds-border-subtle-00: var(--v2-panel-border);
  --cds-border-subtle-01: var(--v2-panel-border-strong);
  --cds-border-strong-01: var(--v2-panel-border-strong);
  --cds-text-primary: var(--v2-text-primary);
  --cds-text-secondary: var(--v2-text-secondary);
  --cds-text-helper: var(--v2-text-helper);
  --cds-text-placeholder: var(--v2-text-placeholder);
  --cds-link-primary: var(--v2-accent);
  --cds-interactive: var(--v2-accent);
  --cds-focus: var(--v2-text-primary);
  --cds-support-error: var(--v2-danger);
  --cds-support-success: #24a148;
  --cds-support-warning: var(--support-warning);
  --cds-support-info: var(--v2-accent);
  --cds-field-01: var(--v2-card-bg);
  --cds-field-02: var(--v2-card-bg);
  --v2-accent: #4589ff;
  --v2-panel-border: #393939;
  --v2-panel-border-strong: #525252;
  --v2-danger: #fa4d56;
  --support-warning: #f1c21b;
}
html[data-theme='light'] {
  --cds-background: var(--v2-shell-bg);
  --cds-layer-01: var(--v2-panel-bg);
  --cds-layer-02: var(--v2-card-bg);
  --cds-layer-hover-01: var(--v2-card-bg);
  --cds-layer-hover-02: var(--v2-panel-border-strong);
  --cds-border-subtle-00: var(--v2-panel-border);
  --cds-border-subtle-01: var(--v2-panel-border-strong);
  --cds-border-strong-01: var(--v2-panel-border-strong);
  --cds-text-primary: var(--v2-text-primary);
  --cds-text-secondary: var(--v2-text-secondary);
  --cds-text-helper: var(--v2-text-helper);
  --cds-text-placeholder: var(--v2-text-placeholder);
  --cds-link-primary: var(--v2-accent);
  --cds-interactive: var(--v2-accent);
  --cds-focus: var(--v2-accent);
  --cds-support-error: var(--v2-danger);
  --cds-support-success: #198038;
  --cds-support-warning: #b28600;
  --cds-support-info: var(--v2-accent);
  --cds-field-01: var(--v2-card-bg);
  --cds-field-02: var(--v2-card-bg);
  --v2-accent: #0f62fe;
  --v2-panel-border: #dde1e6;
  --v2-panel-border-strong: #c1c7cd;
  --v2-danger: #da1e28;
  --support-warning: #b28600;
}

/* Inner pages render inside the shell (not the landing's locked
   full-height card), so give the shell a scrolling variant. */
.vision-shell--scroll { height: auto; min-height: 100vh; overflow: auto; }

/* Template-style header row for inner pages: brand, nav tabs, actions. */
.app-header-row { flex-shrink: 0; width: 100%; min-width: 0; }
.app-header-row .app-card__header { height: auto; min-height: 56px; padding: 8px 16px; }
@media (max-width: 480px) {
  .app-header-row .app-card__header { padding: 8px 12px; gap: 8px; }
  .app-header-row .app-card__brand-subtitle { display: none; }
}
.app-header-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.app-header-nav .app-tab { border-bottom-width: 2px; font-size: 13px; padding: 10px 14px; }
.app-header-nav .app-tab[aria-current='page'] { color: var(--v2-text-primary); border-bottom-color: var(--v2-accent); font-weight: 600; }
.app-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-header-cb { font-size: 11px; font-weight: 600; letter-spacing: 1px; }

/* Live model status as the template's toast, not the old Carbon banner. */
/* Status toast: informational only, so it must never block the page. Keep it
   compact in the corner and let clicks pass through to links beneath it. */
.app-status-toast { position: fixed; bottom: 16px; right: 16px; left: auto; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }

/* Owner request: one typeface everywhere (Plex Sans) on themed pages too. */
.vision-shell--scroll, .vision-shell--scroll button, .vision-shell--scroll input,
.vision-shell--scroll select, .vision-shell--scroll textarea {
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ==========================================================================
   Generation Flow page chrome (moved out of the page's inline stylesheet so
   it inherits the template bridge). Colours are the --cds-* tokens above. */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.7); }
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 0;
  background: var(--cds-border-subtle-01); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cds-interactive); cursor: pointer;
  border: 2px solid var(--cds-background);
  box-shadow: none;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cds-border-subtle-01); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cds-border-strong-01); }

body { overflow: auto; }
.flow-controls { background: var(--cds-layer-01); border-bottom: 1px solid var(--cds-border-subtle-00); flex-shrink: 0; }
.flow-primary-controls, .flow-secondary-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 12px 20px; }
.flow-primary-controls > *, .flow-secondary-controls > * { min-width: 0; max-width: 100%; }
.flow-more-button { margin-left: auto; background: transparent; border: 1px solid var(--cds-border-subtle-01); padding: 8px 12px; color: var(--cds-link-primary); cursor: pointer; font: inherit; font-size: 13px; }
.flow-secondary-controls { border-top: 1px solid var(--cds-border-subtle-00); align-items: flex-start; }
.flow-secondary-controls .flow-small { max-width: 300px; }
.flow-summary { padding: 16px 20px 0; flex-shrink: 0; }
.flow-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.flow-task, .flow-answer { min-width: 0; background: var(--cds-layer-01); padding: 14px 16px; border-top: 2px solid var(--cds-support-success); overflow-wrap: anywhere; }
.flow-answer { border-color: var(--cds-interactive); }
.flow-summary h2, .flow-explore-heading h2 { font-size: 16px; font-weight: 500; color: var(--cds-text-primary); margin: 0 0 8px; }
.flow-summary p, .flow-explore-heading p { font-size: 14px; line-height: 1.5; margin: 6px 0; }
.flow-summary b { font-weight: 600; }
.flow-selected { color: var(--cds-text-primary); }
.flow-summary .flow-answer-text { font-size: 22px; line-height: 1.4; color: var(--cds-text-primary); white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.flow-summary .flow-small, .flow-small { font-size: 12px; line-height: 1.5; color: var(--cds-text-helper); }
.flow-answer-placeholder { color: var(--cds-text-secondary); }
.flow-explore-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; flex-shrink: 0; }
.flow-explore-heading > div:first-child { flex: 1; min-width: 200px; }
.flow-explore-heading p { font-size: 12px; }
button:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 3px; }
@media (max-width: 760px) {
  .flow-summary-grid { grid-template-columns: 1fr; }
  .flow-summary { padding: 12px 12px 0; }
  .flow-primary-controls, .flow-secondary-controls { padding: 12px; gap: 12px; }
}