@charset "utf-8";
/* KARASAWA — narrow-screen behaviour. Loaded LAST on every page, after the
   page's own <style>, base.css, chrome.css and technical.css, so it can
   correct all of them without touching the approved page sources.

   Desktop layout is deliberately left alone: almost everything here lives
   inside a media query. The three rules outside one (anchor landing offsets
   and the table shadow) are safe at any width. */

/* ================================================================
   1. Anchor landing — a target must not hide under the sticky header
   ================================================================ */

/* Sticky header is 74px; pages that also carry a sticky anchor bar
   (.ks-anchors on product pages, .anchors in the technical section)
   need another 48px. :has() gives the exact value; the plain rule is
   the fallback and errs on the safe side for pages without the bar. */
[id]{scroll-margin-top:92px}
body:has(.ks-anchors) [id],
body:has(.anchors) [id]{scroll-margin-top:142px}

/* ================================================================
   2. Wide tables — show that they scroll sideways
   ================================================================ */

/* Shadows at the left and right edge, drawn with two white "cover"
   gradients that scroll with the content (background-attachment:local)
   and two grey shadows that stay put. When the table is scrolled fully
   to one side the cover hides that shadow — so the shadow is visible
   exactly while there is more table in that direction. */
.tbl-wrap,.tw{
  background-color:#fff;
  background-image:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,rgba(16,19,24,.17),rgba(16,19,24,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(16,19,24,.17),rgba(16,19,24,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}

/* ================================================================
   3. Narrow screens
   ================================================================ */
@media(max-width:760px){

  /* ---- 3.1 compact header: wins back ~90px of the first screen ---- */
  .ks-header .ks-wrap{height:58px}
  .ks-logo img{height:30px}
  .ks-burger{width:40px;height:40px}
  .ks-topbar .ks-wrap{height:32px}
  .ks-draft .ks-wrap{padding:7px 20px;line-height:1.45}
  .ks-crumbs .ks-wrap{padding-top:9px;padding-bottom:9px}
  .ks-wrap{padding:0 20px}

  /* sticky panels follow the shorter header */
  .ks-anchors,.anchors{top:58px}
  [id]{scroll-margin-top:76px}
  body:has(.ks-anchors) [id],
  body:has(.anchors) [id]{scroll-margin-top:120px}

  /* ---- 3.1a figure strips: a column must be allowed to be narrower
       than its content, otherwise one wide item (the six ISO badges on
       the turning-inserts page) blows the grid past the screen ---- */
  .stats .wrap,.facts .w{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---- 3.2 anchor strip: show that it scrolls ---- */
  .ks-anchors .ks-wrap,.anchors .w,.anchors .ks-wrap{
    scroll-snap-type:x proximity;scrollbar-width:none}
  .ks-anchors .ks-wrap::-webkit-scrollbar,
  .anchors .w::-webkit-scrollbar{display:none}
  .ks-anchors a,.anchors a{scroll-snap-align:start;flex:none}
  .ks-anchors,.anchors{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .ks-anchors .ks-wrap{gap:18px;height:44px}

  /* ---- 3.3 table hint. The class is set by site.js only on wrappers
       that really do overflow, so a table that fits gets no hint. ---- */
  .tbl-wrap.ks-scrolls::before,.tw.ks-scrolls::before{
    content:"Swipe the table sideways →";
    display:block;position:sticky;left:0;
    width:calc(100vw - 40px);max-width:100%;
    padding:7px 12px;
    font-size:12px;font-weight:600;letter-spacing:.01em;
    color:#79828e;background:#f7f8fa;
    border-bottom:1px solid #e2e6ea}
  :root[lang="uk"] .tbl-wrap.ks-scrolls::before,
  :root[lang="uk"] .tw.ks-scrolls::before{
    content:"Гортайте таблицю вбік →"}

  /* first column stays put while the rest of the row scrolls */
  .tbl-wrap table th:first-child,
  .tbl-wrap table td:first-child{
    position:sticky;left:0;z-index:2;background:#fff;
    box-shadow:1px 0 0 #e2e6ea,3px 0 7px rgba(16,19,24,.10)}
  .tbl-wrap table thead th:first-child{background:#14181e}

  /* ---- 3.4 rotated table headings stay rotated, but get shorter.
       Unrotating them was tried and is worse: horizontal headings force
       every column to ~92px, so a 20-column matrix shows barely one
       column of data next to the label. Rotation is what makes the
       matrix readable at all — the problem is only that 190px of
       vertical text eats a quarter of a phone screen. 120px is enough
       for every heading in the six diagnostics tables. ---- */
  thead tr.rot th,thead th.rot1{padding:7px 4px}
  thead tr.rot th>span,thead th.rot1>span{height:140px;font-size:12px}

  /* the pinned label column: 240px is a desktop width and leaves almost
     nothing for the data next to it */
  th.s,td.s{min-width:150px}

  /* ---- 3.5 nothing below 12px on a phone.
       Exactly the selectors that declare a smaller size somewhere
       in the site; everything else keeps its own size. ---- */
  .ks-lang em,.ks-col h4,.ks-mobile h4,.ks-footer h4,
  .chip,.iso-legend i,.isokey .lg i,.iso-badge i,.edges,.cbcell .z,
  .tag,.pill,
  thead th,thead th small,tr.grp td,table.passes thead tr+tr th,
  .opener .pic figcaption,.case .shot figcaption,
  .app .pic figcaption,.app .pic figcaption code,
  .expcard ol li::before{font-size:12px}

  /* ---- 3.6 tap targets ---- */
  .ks-mobile a{padding:12px 0}
  .ks-footer ul{gap:2px}
  .ks-footer ul a{display:inline-block;padding:7px 0}
  .ks-footer .ks-bottom .ks-legal{gap:14px}
  .ks-footer .ks-bottom .ks-legal a{display:inline-block;padding:6px 0}
  .ks-crumbs a{display:inline-block;padding:3px 0}

  /* ---- 3.7 mobile menu panel: its own scroll, never taller
       than the screen below the header ---- */
  .ks-mobile.open{max-height:calc(100vh - 58px);overflow-y:auto;
    -webkit-overflow-scrolling:touch}
}

/* ---- 3.8 hero picture on a single-column screen.
     The page's own style hides .tool-visual below 940px. Instead the
     picture goes between the heading and the description: the text
     column is dissolved with display:contents so its children become
     grid items of .wrap, and `order` slots the figure right after h1.
     Only heroes that actually carry a picture are touched. ---- */
@media(max-width:940px){
  .hero .wrap:has(>.tool-visual){gap:0}
  .hero .wrap:has(>.tool-visual)>div{display:contents}
  .hero .wrap:has(>.tool-visual)>div>*{order:3}
  .hero .wrap:has(>.tool-visual)>div>.eyebrow{order:1}
  .hero .wrap:has(>.tool-visual)>div>h1{order:2}
  .hero .wrap>.tool-visual{display:flex;order:2;margin:0 0 26px;
    width:100%;max-width:520px;justify-self:center}
}

/* one figure per row once two no longer fit */
@media(max-width:560px){
  .stats .wrap,.facts .w{grid-template-columns:minmax(0,1fr)}
  .stat .isorow{flex-wrap:wrap}
}

/* ================================================================
   4. Enquiry form
   ================================================================ */

/* honeypot: hidden from people, still filled in by bots. Kept out of the
   layout without display:none, which some bots watch for. */
.ks-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the small "required" marker inside a field label */
.form label em{font-style:normal;font-weight:600;letter-spacing:0;
  text-transform:none;color:#b3221d;margin-left:6px;font-size:11.5px}
/* the same marker saying a field is optional — grey, so that red keeps
   meaning "this one we do need" */
.form label em.opt{color:var(--ink-3);font-weight:600}

/* the country-code list is long; a long option must not widen the column */
.form select{max-width:100%;text-overflow:ellipsis}

/* shown only when send.php redirects back with ?error= */
.form .ks-err{margin:0 0 18px;padding:11px 14px;border-radius:3px;
  background:#fdf1f0;border:1px solid #f0cdcb;color:#8d1a16;
  font-size:13.5px;line-height:1.5}

.form button[disabled]{opacity:.6;cursor:progress}

@media(max-width:760px){
  /* 16px stops iOS Safari zooming in when a field takes focus */
  .form input,.form textarea,.form select{font-size:16px;padding:12px 13px}
  .form label em{font-size:12px}
}

/* very narrow phones (320–360px) */
@media(max-width:380px){
  .ks-wrap{padding:0 16px}
  .tbl-wrap.ks-scrolls::before,.tw.ks-scrolls::before{width:calc(100vw - 32px)}
}