/* sumairha.com design system, part 3: the case-study page (8 Oct 2026). Built only from tokens.css and components.css.
 * A case study is a top screen (problem, role and outcome before the first scroll), a frosted section nav, and numbered
 * sections whose title stays beside the text. Pictures follow the theme: dark artwork inverts in light mode (.shot--ink),
 * and a picture with two versions shows the one for the theme (img.v-light / img.v-dark). Press a .shot to open it at full
 * size (lib/lightbox.js); a [data-switch] pill shows one view of several (lib/view-switch.js).
 * Every gap follows the spacing rule in tokens.css: distance follows meaning. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
.cs{gap:var(--space-xl)}   /* section to section */
.cs p,.cs .surface,.cs dl,.cs blockquote{pointer-events:auto}   /* text can be selected; the gaps still let the cursor through to the fluid */

/* the top screen: problem, role and outcome before the first scroll */
.cs-hero{width:min(var(--column),100%);margin:0 auto;display:grid;gap:var(--space-md);padding-top:var(--space-sm)}
.cs-hero__title{display:grid;gap:var(--space-xs)}   /* the eyebrow labels the title */
.cs-hero .cs-figure{margin-top:var(--space-md)}   /* the text to the picture is a new group: 24 + 24 = 48 */
.cs-hero .type-case{max-width:17ch}
.cs-eyebrow{margin:0;font:var(--type-meta);color:var(--text)}
.cs-lede{max-width:62ch;color:var(--text-strong)}
.cs-facts{display:grid;grid-template-columns:repeat(4,max-content);gap:var(--space-sm) var(--space-lg);margin:0}
.cs-facts dt{font:var(--type-small);color:var(--text)}
.cs-facts dd{margin:var(--space-2xs) 0 0;font:var(--type-meta);color:var(--text-strong)}
@media (max-width:620px){ .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin:0;padding:var(--space-md) 0 0;list-style:none;border-top:1px solid var(--surface-line)}
.cs-stats li{display:grid;gap:4px;align-content:start}
@media (max-width:520px){ .cs-stats{gap:var(--space-sm)} .cs-hero .cs-stats{order:4} .cs-hero .cs-facts{order:5} .cs-hero .cs-figure,.cs-hero .frame{order:6} }   /* on a phone the outcomes come before the facts, so they stay on the first screen */   /* three across even on a phone, so all three outcomes land on the first screen */
/* pictures follow the theme: the dark wireframes and blueprints turn light in light mode, the way her dark boards would
   look printed, and the ground behind every picture matches */
:root{--shot-bg:#f2f2f2;--ink:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"]{--shot-bg:#0d0d0d;--ink:none}
.frame{margin:0;border-radius:var(--radius-s);overflow:hidden;background:var(--shot-bg);box-shadow:var(--shadow-card)}
.frame img{display:block;width:100%;height:auto}

/* a section: its number and title stay beside the text; wide pictures take the whole column */
.cs-sec{width:min(var(--column),100%);margin:0 auto;display:grid;gap:var(--space-lg);scroll-margin-top:84px}
.cs-sec__main{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:var(--space-lg)}   /* the sticky title stops where the text ends, before any wide picture */
.cs-sec__head{position:sticky;top:84px;align-self:start;display:grid;gap:var(--space-xs)}
.cs-sec__body{display:grid;gap:var(--space-md);min-width:0;max-width:720px}
.cs-sec__wide{display:grid;gap:var(--space-sm);min-width:0}
@media (max-width:860px){ .cs-sec,.cs-sec__main{grid-template-columns:minmax(0,1fr);gap:var(--space-md)} .cs-sec__head{position:static} }
.cs-num{margin:0;font:var(--type-meta);color:var(--text)}
.caption{margin:0;max-width:72ch;font:var(--type-small);color:var(--text)}

/* a picture that opens at full size (lib/lightbox.js) */
.shot{display:block;width:100%;padding:0;border:0;border-radius:var(--radius-s);overflow:hidden;background:var(--shot-bg);box-shadow:var(--shadow-card);cursor:zoom-in}
.shot--ink img{filter:var(--ink)}
img.v-dark{display:none !important}
:root[data-theme="dark"] img.v-dark{display:block !important}
:root[data-theme="dark"] img.v-light{display:none !important}
.shot img{display:block;width:100%;height:100%;object-fit:contain}
.shot:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.shot--matrix{max-width:440px}

/* research */
.personas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);margin:0;padding:0;list-style:none}
@media (max-width:620px){ .personas{grid-template-columns:1fr} }
.persona{padding:var(--space-md);display:grid;gap:4px;align-content:start}
.persona blockquote{margin:var(--space-2xs) 0 0;font:var(--type-small);color:var(--text-strong)}
.cs-insight{max-width:24ch}

/* the design: each screen is the pain it answers, the decision, and the screen, with a switch between wireframe and final */
.screens{display:grid;gap:var(--space-lg);margin:0;padding:0;list-style:none}
.screen{display:grid;gap:var(--space-sm)}
.screen__head{display:grid;gap:var(--space-xs);justify-items:start}
.screen__head .pill{margin-top:var(--space-xs)}   /* the text to its own switch: 8 + 8 = 16 */
[data-views] .shot{aspect-ratio:4/3}
[data-views="routing"] .shot,[data-views="dashboard"] .shot{aspect-ratio:16/10}   /* the shape of their Final cards */
.phases [data-views] .shot{aspect-ratio:2.24/1}
.switch-row{display:flex;justify-content:flex-start}

/* impact and lessons */
.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);margin:0;padding:0;list-style:none}
@media (max-width:620px){ .lessons{grid-template-columns:1fr} }
.lesson{padding:var(--space-md);display:grid;gap:var(--space-xs);align-content:start}
.cs-foot{width:min(var(--column),100%);margin:0 auto;display:flex;justify-content:center;padding-bottom:var(--space-lg)}

/* the picture at full size. A modal dialog sits above the custom cursor, so the system cursor comes back while it is open */
.zoom{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.88)}
.zoom::backdrop{background:transparent}
.zoom__bar{position:fixed;top:16px;right:16px;z-index:1}
.zoom__scroll{width:100%;height:100%;overflow:auto;display:flex;padding:var(--space-xl) var(--space-sm) var(--space-sm)}
.zoom__scroll img{display:block;margin:auto;max-width:none;height:auto}
html.zoom-open.has-cursor,html.zoom-open.has-cursor *{cursor:auto !important}
html.zoom-open .cursor-small,html.zoom-open .cursor-glass{display:none !important}

/* small cards in a row that wraps: role groups, workstreams, quotes */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-sm);margin:0;padding:0;list-style:none}
.cs-grid--wide{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cs-card{padding:var(--space-md);display:grid;gap:var(--space-xs);align-content:start}
.cs-card .type-title{line-height:1}
.cs-quote{margin:0;padding:var(--space-md);display:grid;gap:var(--space-xs);align-content:start}
.cs-quote p{margin:0;font:var(--type-body);color:var(--text-strong)}
.cs-quote footer{font:var(--type-meta);color:var(--text)}
.cs-figure{display:grid;gap:var(--space-xs);margin:0}   /* a picture with a caption under it */

/* ---- the contents rail (9 Oct 2026, lib/contents-rail.js): where you are in the case study. Progress is a line that fills,
        never a chip: the chip means something you chose, and your place on the page is not a choice. On a wide screen it is a
        column beside the sections: the current section's number and title, then the list with the line filling down it.
        On a narrow screen it is a bar across the top that holds the current section's name, with the line filling along its
        bottom edge; a bar that holds information is a rounded rectangle, not a capsule. ---- */
.cs-body{width:min(var(--column),100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:var(--space-lg);align-items:start}
.cs-flow{display:grid;gap:var(--space-xl);min-width:0}
.cs-body .cs-sec{width:auto;margin:0;scroll-margin-top:var(--space-lg)}
.cs-body .cs-sec__main{grid-template-columns:minmax(0,1fr)}
.cs-body .cs-sec__head{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* the rail shows it; screen readers still get the heading */
.cs-rail{position:sticky;top:var(--space-lg);display:grid;gap:var(--space-lg)}
.cs-rail__now{display:grid;gap:var(--space-xs)}
.cs-rail__now p{margin:0}
.cs-rail__name{display:none}
.cs-rail__list{position:relative;padding-left:var(--space-sm)}
.cs-rail__list ol{list-style:none;margin:0;padding:0 0 var(--space-sm);display:grid;gap:var(--space-sm)}   /* five equal slots, so the line meets each name as you reach its section */
.cs-rail__list a{display:flex;gap:var(--space-xs);align-items:baseline;font:var(--type-meta);color:var(--text);text-decoration:none;transition:color var(--dur-fast)}
.cs-rail__list a .cs-num{color:inherit}
.cs-rail__list a:hover,.cs-rail__list li.is-current a{color:var(--text-strong)}
.cs-rail__list a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.cs-rail__track{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--surface-line)}
.cs-rail__fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p, 0) * 100%);border-radius:2px;background:var(--text-strong)}
@media (max-width:860px){
  .cs-body{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
  .cs-body .cs-sec{scroll-margin-top:88px}
  .cs-body .cs-sec__head{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  .cs-rail{top:12px;z-index:5;margin-right:96px;gap:0;overflow:hidden;padding:12px var(--space-sm) 14px;   /* clear of the theme switch in the corner */
    border-radius:var(--radius-s);background:var(--surface-3);border:1px solid var(--surface-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .cs-rail__now{grid-auto-flow:column;justify-content:start;align-items:baseline}
  .cs-rail__title,.cs-rail__list ol{display:none}
  .cs-rail__name{display:block;font:var(--type-meta);color:var(--text-strong)}
  .cs-rail__list{position:absolute;left:0;right:0;bottom:0;height:2px;padding:0}
  .cs-rail__track{top:auto;width:100%;height:2px;border-radius:0}
  .cs-rail__fill{width:calc(var(--p, 0) * 100%);height:100%;border-radius:0}
}
@media (prefers-reduced-motion: reduce){ .cs-rail__list a{transition:none} }