/* natural-language.css: what natural-language-search.html needs beyond the shared case-study classes:
   the section eyebrow, the scaled prototype frame, the "things to try" list and the user-workflow diagram.
   Tokens only: every colour and face comes from tokens.css. The prototype itself (prototypes/natural-language/)
   is a locked artifact in WorldCat's own colours and Inter; nothing here reaches into it.

   Contrast, measured on --ground (#FDF2E8) unless noted:
     step text and branch titles, --shade on --panel ...... 19.9:1   (body-text bar is 7:1)
     step labels and loop tags, --inkblue-800 on --panel ... 9.5:1
     branch letters, --inkblue-800 at 24px+ ................ 9.0:1   (large-text bar is 4.5:1)
     connectors, --inkblue-600 on --ground .................. 4.5:1   (non-text bar is 3:1) */

/* This page's rail labels are short ("Concept", "The flow:"), so the rail and the gap beside it are
   narrower than on the other case studies, which keeps the label and its content reading as a pair. */
body.sfp.sfp--tight{
  --sfp-rail:clamp(150px,13vw,200px);
  --sfp-gap:clamp(28px,3.4vw,52px);
}

/* eyebrow: sits where the other pages' rail heading sits, but is not a heading. The real <h2> is
   in the content column. Same size, face and tracking as .sfp-rail h2 in scifinder-layout.css. */
.sfp-eyebrow{
  font-family:var(--sfp-rail-font);font-weight:500;
  font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;
  color:var(--ink);margin:0;max-width:none;
}
@media (max-width:63.99rem){
  .sfp-eyebrow{font-size:.9375rem;}
}
.sfp .sfp-content > h2{margin-bottom:clamp(.9rem,1.6vw,1.25rem);}
.sfp .sfp-content > h2 + .case-editorial{margin-top:0;}
/* decisions: each heading sits close to its own paragraph, with clear air between one decision and the next */
.nl-decisions{gap:clamp(1.75rem,3vw,2.25rem);}
.nl-decision{display:flex;flex-direction:column;gap:.45rem;}
.sfp .nl-decision .case-subheading{margin:0;}

/* ---------------------------------------------------------------------------------------------
   The embedded prototype. The iframe always lays out at 1440 x 900, so its three-column desktop
   view shows at every page width; js/natural-language.js scales it to the box (Scroll.add measure).
   --------------------------------------------------------------------------------------------- */
.nl-embed-wrap{
  padding-left:var(--step);padding-right:var(--step);
  padding-top:0;padding-bottom:0;
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
.nl-embed{display:flex;flex-direction:column;gap:1rem;}
/* a laptop drawn in CSS, as the phone frame on the other OCLC pages is: a black lid around the screen
   and a slim base with a thumb notch. --shade, --card-ground and --ground only; the base overhangs the
   lid by 4% each side, so js/natural-language.js fits the lid to 1/1.08 of the column. */
.nl-laptop{
  --nl-bezel:clamp(6px,1.1vw,16px);
  width:fit-content;margin-inline:auto;margin-bottom:.75rem;
  visibility:hidden;
}
.nl-embed.is-ready .nl-laptop{visibility:visible;}
.nl-laptop-lid{
  position:relative;
  padding:calc(var(--nl-bezel) * 1.4) var(--nl-bezel) var(--nl-bezel);
  background:var(--shade);
  border-radius:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) 0 0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ground) 22%,transparent);
}
.nl-laptop-lid::before{                          /* the camera */
  content:"";position:absolute;left:50%;top:calc(var(--nl-bezel) * .55);
  width:max(3px,calc(var(--nl-bezel) * .3));aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--ground) 30%,var(--shade));
}
.nl-laptop-base{
  position:relative;
  height:clamp(8px,1.3vw,18px);
  margin-inline:-4%;
  background:linear-gradient(color-mix(in srgb,var(--shade) 8%,var(--card-ground)),color-mix(in srgb,var(--shade) 28%,var(--card-ground)));
  border-radius:0 0 clamp(10px,1.8vw,24px) clamp(10px,1.8vw,24px) / 0 0 100% 100%;
  box-shadow:var(--shadow-card-lift);
}
.nl-laptop-base::before{                         /* the thumb notch */
  content:"";position:absolute;left:50%;top:0;
  width:16%;height:50%;
  transform:translateX(-50%);
  background:color-mix(in srgb,var(--shade) 20%,var(--card-ground));
  border-radius:0 0 999px 999px;
}
.nl-embed-box{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:1440 / 900;           /* until the script sets the exact scaled size */
  border-radius:2px;
  background:var(--panel);
}
.nl-embed-box iframe{
  position:absolute;left:0;top:0;
  width:1440px;height:900px;border:0;
  transform-origin:0 0;
}
/* The frame scrolls on its own, so under the pointer it would swallow the wheel and stall the page.
   This pane sits over the screen until it is clicked, which lets the page scroll straight past;
   it returns when the pointer leaves. Keyboard users can tab to the frame directly. */
.nl-guard{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 clamp(.75rem,2vw,1.5rem);
  background:transparent;border:0;border-radius:inherit;cursor:pointer;
}
.nl-guard span{
  font-family:var(--sfp-rail-font);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  font-size:.9375rem;line-height:1;
  padding:.65rem 1rem;border-radius:999px;
  background:var(--shade);color:var(--ground);
  box-shadow:var(--shadow-card-lift);
}
.nl-guard span{transition:opacity .2s ease;}
@media (hover:hover){                           /* with a mouse the pill appears on hover, so it never sits over the design */
  .nl-guard span{opacity:0;}
  .nl-guard:hover span,.nl-guard:focus-visible span{opacity:1;}
}
@media (prefers-reduced-motion:reduce){.nl-guard span{transition:none;}}
.nl-guard:hover span,.nl-guard:focus-visible span{background:var(--inkblue-800);}
.nl-embed.is-live .nl-guard{display:none;}

/* no script: the stills below stand in for the frame */
.nl-stills{display:flex;flex-direction:column;gap:1rem;}
.nl-stills img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:clamp(8px,1.2vw,14px);box-shadow:var(--shadow-card);}
.nl-open{
  font-family:var(--sfp-rail-font);font-weight:500;letter-spacing:.03em;font-size:1.0625rem;
  align-self:center;                            /* it belongs to the laptop above it, so it sits under its centre */
}
@media (max-width:43.75rem){
  .nl-open{order:-1;}                           /* first thing a phone reader can act on */
}

.sfp .case-section > .nl-try{padding-top:clamp(2rem,4vw,3rem);}
.sfp .nl-try .case-editorial{margin-top:0;}

/* ---------------------------------------------------------------------------------------------
   The user workflow, drawn like a whiteboard in Miro: a dotted canvas, coloured sticky notes for the
   steps, solid shapes for the entry points and the six paths, plain connectors with arrowheads, and one
   dashed return line that carries every "back to results" loop to the Results shape. It is inline SVG
   (sticky notes sit a hair off square, as hand-placed ones do); the same content is in a visually hidden
   ordered list beside it so a screen reader gets the steps in order. Colours are the site's tokens:
   pastel 100/200 stops for the notes, 800 stops for the shapes. Contrast: black on every note is 15:1 or
   better; cream on orange 800 / inkblue 800 / forest 800 is 10 / 9 / 10:1 (small text needs 7:1); the
   connectors (inkblue 900) and the orange 700 return line are 3:1 or better on the canvas.
   --------------------------------------------------------------------------------------------- */
.nl-chart{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:clamp(8px,1.2vw,14px);
  border:1px solid var(--rule);
  background-color:var(--panel);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--shade) 28%,transparent) 1.1px,transparent 1.4px);
  background-size:22px 22px;
}
.nl-chart-svg{
  display:block;
  width:100%;min-width:1100px;                  /* narrower than this the labels stop reading, so it scrolls instead */
  height:auto;
  padding:clamp(.5rem,1.5vw,1rem);
}
.nl-chart-svg text{font-family:var(--ui);}
.nl-chart-svg .mb-sticky{font-size:15px;font-weight:500;fill:var(--shade);}
.nl-chart-svg .mb-shape{fill:var(--panel);stroke:var(--inkblue-900);stroke-width:3;}
.nl-chart-svg .mb-shape-label{font-size:13px;font-weight:700;letter-spacing:.12em;fill:var(--orange-800);}
.nl-chart-svg .mb-shape-text{font-size:15px;font-weight:500;fill:var(--shade);}
.nl-chart-svg .mb-letter{font-size:34px;font-weight:700;fill:var(--apricot-50);}
.nl-chart-svg .mb-head{font-size:16px;font-weight:700;fill:var(--apricot-50);}
.nl-chart-svg .mb-or{fill:var(--panel);stroke:var(--inkblue-900);stroke-width:2;}
.nl-chart-svg .mb-or-text{font-size:14px;font-weight:600;fill:var(--inkblue-900);}
.nl-chart-svg .mb-edge{fill:none;stroke:var(--inkblue-900);stroke-width:2;}
.nl-chart-svg .mb-edge-soft{stroke-dasharray:3 5;}
.nl-chart-svg .mb-loop{stroke:var(--orange-700);stroke-dasharray:7 5;}
.nl-chart-svg .mb-dot{fill:var(--orange-700);}
.nl-chart-svg .mb-arrowhead{fill:var(--inkblue-900);}
.nl-chart-svg .mb-arrowhead-loop{fill:var(--orange-700);}
.nl-chart-svg .mb-label-bg{fill:var(--panel);}
.nl-chart-svg .mb-loop-label{font-size:14px;font-weight:600;fill:var(--orange-800);}

/* the lead-in words of a list item, in the page's heading face (Knockout has one weight, so no faux bold) */
.nl-list strong{font-family:var(--display-alt);font-weight:400;color:var(--accent);}


/* one reading measure for paragraphs and lists alike, so a list doesn't run wider than the text above it */
.sfp--tight .case-editorial-content p,
.sfp--tight .case-editorial-content ul{max-width:42rem;}

/* the link at the foot of the linked data case study that leads here */
.nl-end{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;max-width:none;
  font-family:var(--sfp-rail-font);font-weight:500;letter-spacing:.03em;font-size:1.0625rem;line-height:1.4;
}

/* two back pills in the header: the work, and the case study this concept grew out of */
.ph-back--pair{display:flex;flex-wrap:wrap;gap:.6rem;}

/* The closing card on the linked data case study: a native link, as the home page's cards are, in the
   page's blue with the concept's results page bleeding off its corner. Cream on inkblue 800 is 9.04:1.
   The focus ring is overridden because the site's black ring would be invisible on this ground. */
.nl-teaser{
  --focus-ring:var(--apricot-50);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  align-items:stretch;
  min-height:clamp(260px,26vw,380px);
  background:var(--inkblue-800);
  border-radius:clamp(12px,1.6vw,20px);
  color:var(--apricot-50);
  text-decoration:none;
  box-shadow:var(--shadow-card-lift);
  transition:background-color .2s ease;
}
.nl-teaser:hover,.nl-teaser:focus-visible{background:color-mix(in srgb,var(--inkblue-800) 78%,var(--shade));}
.nl-teaser-text{
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  padding:clamp(1.5rem,3.2vw,3rem);
  position:relative;z-index:1;
}
.sfp .nl-teaser h2{
  margin:0;color:var(--apricot-50);
  font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:.95;
}
.nl-teaser p{
  margin:0;max-width:30rem;color:var(--apricot-50);
  font-family:var(--body-text);letter-spacing:.022em;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;
}
.nl-teaser-cta{
  align-self:flex-start;margin-top:.4rem;
  font-family:var(--sfp-rail-font);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  font-size:.85rem;line-height:1.25;
  border:1px solid currentColor;border-radius:999px;padding:.7rem 1.05rem;
  transition:background-color .2s ease,color .2s ease;
}
.nl-teaser:hover .nl-teaser-cta,.nl-teaser:focus-visible .nl-teaser-cta{background:var(--apricot-50);color:var(--inkblue-800);}
.nl-teaser-shot{
  align-self:end;justify-self:end;
  width:150%;max-width:none;height:auto;
  margin:0 -50% -22% 0;                          /* bleeds off the right and the bottom */
  border-radius:clamp(8px,1.2vw,14px) 0 0 0;
  box-shadow:var(--shadow-card-lift);
}
@media (max-width:47.99rem){
  .nl-teaser{grid-template-columns:minmax(0,1fr);}
  .nl-teaser-shot{width:112%;margin:0 -12% -12% 6%;justify-self:start;}
}
@media (prefers-reduced-motion:reduce){.nl-teaser,.nl-teaser-cta{transition:none;}}