/* ============================================================
   Content layer — shared design system for the article pages.

   The colour tokens are a deliberate copy of those in site/he/app/index.html: the app
   is a single self-contained file on purpose, so it cannot import this sheet.
   Two copies of a value need a mechanical check, so tools/sync-content.mjs
   compares them and reports drift. Change a token here and change it there.

   Fonts: Rubik and IBM Plex Sans Hebrew both cover Hebrew. IBM Plex Mono does
   NOT — it is used only for Latin digits inside tables, never for Hebrew text.
   No letter-spacing anywhere on Hebrew.
   ============================================================ */

:root{
  --bg:#14171a;
  --surface:#1c2126;
  --surface2:#242a30;
  --surface3:#262c32;
  --border:#39424a;
  --border-strong:#6f7a85;
  --text:#eceef0;
  --text-strong:#ffffff;
  --text-soft:#c9d2da;
  --muted:#a3abb5;
  --red:#c1443d;
  --red-text:#f28b82;
  --teal:#5bb8c4;
  --gold:#d9a441;
  --green:#7ecd98;
  --on-green:#0d1a10;
  --tint-teal:rgba(91,184,196,.12);
  --tint-teal-soft:rgba(91,184,196,.09);
  --tint-gold:rgba(217,164,65,.10);
  --tint-gold-soft:rgba(217,164,65,.07);
  --tint-green:rgba(126,205,152,.10);
  --gold-border:rgba(217,164,65,.35);
  --card-shadow:0 8px 20px rgba(0,0,0,.35);

  --font-head:"Rubik",sans-serif;
  --font-body:"IBM Plex Sans Hebrew","IBM Plex Sans",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
  /* Article and hub headings. Hebrew keeps its heading face; English reads as a publication (below). */
  --font-article:var(--font-head);
  /* The wordmark is Rubik in both languages, from a subset holding the brand name's letters alone. */
  --font-brand:"Rubik Brand","Rubik",sans-serif;

  --measure:34rem;        /* reading width for Hebrew prose */
  --wide:72rem;           /* page frame */
}

:root[data-theme="light"]{
  --bg:#eef1f5;
  --surface:#ffffff;
  --surface2:#e7ecf1;
  --surface3:#dde4ea;
  --border:#ccd5dd;
  --border-strong:#6e7c8a;
  --text:#141a20;
  --text-strong:#000000;
  --text-soft:#3d4852;
  --muted:#56626e;
  --red:#c1443d;
  --red-text:#b3352e;
  --teal:#0e6b76;
  --gold:#785809;
  --green:#16693f;
  --on-green:#ffffff;
  --tint-teal:rgba(14,107,118,.10);
  --tint-teal-soft:rgba(14,107,118,.07);
  --tint-gold:rgba(138,101,16,.10);
  --tint-gold-soft:rgba(138,101,16,.07);
  --tint-green:rgba(28,122,74,.10);
  --gold-border:rgba(138,101,16,.35);
  --card-shadow:0 6px 18px rgba(20,30,45,.16);
}

/* English pages have their own stack (ADR 0015): Inter for interface and text, Newsreader for article
   headings, JetBrains Mono for numbers. Hebrew keeps Rubik and IBM Plex, whose Hebrew is the point of them.
   The two never meet: a page is one language, and the wordmark is Rubik in both. */
html[lang="en"]{
  --font-head:"Inter",sans-serif;
  --font-body:"Inter",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --font-article:"Newsreader",Georgia,serif;
  /* Inter fits more characters in the same width than IBM Plex, so the column is set from the rendered
     line, not by eye: tests/browser/typography.spec.mjs holds English inside 45–75 characters. */
  --measure:35rem;
}
/* Newsreader ships in one weight here (600). Asking for 700 or 800 would make the browser smear a fake
   bold over it, which is what a serif headline looks worst doing. */
html[lang="en"] h1,
html[lang="en"] .article h2,
html[lang="en"] .article h3{font-weight:600;}
/* A serif reads smaller than a sans at the same size, so the English headline gets a little back. */
html[lang="en"] h1{font-size:clamp(29px, 5.4vw, 43px); line-height:1.15;}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17.5px;      /* long-form reading, not UI */
  line-height:1.75;
}
img{max-width:100%;height:auto;}

/* ---------- frame ---------- */
.wrap{max-width:var(--wide); margin:0 auto; padding:0 20px;}

/* Keyboard users reach the article without tabbing through the whole header on every page. Off screen
   until focused, then shown at the top. */
.skip-link{
  position:absolute; inset-inline-start:12px; top:-100px; z-index:100;
  padding:10px 16px; border-radius:8px; background:var(--surface); color:var(--text-strong);
  border:2px solid var(--teal); font-weight:600; text-decoration:none;
}
.skip-link:focus{top:12px;}

.site-head{
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky; top:0; z-index:50;
}
/* Anchor jumps stop below the sticky header, with room to breathe. Without this every contents link put
   its heading at the top of the window, underneath the 61px bar (the 60px row plus its border), and the
   reader saw only the section's first paragraphs. tests/browser/anchors.spec.mjs holds the gap in range,
   so a taller header fails it rather than hiding headings again. */
html{scroll-padding-top:calc(61px + 16px);}
/* The system's reduced-motion setting is honoured: the theme switch and hover lifts stop moving. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
.site-head .wrap{display:flex; align-items:center; gap:16px; min-height:60px;}
.brand{display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--text);}
.brand-mark{
  width:32px;height:32px;border-radius:8px;background:var(--red);
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-mono);font-weight:700;font-size:13px;
}
.brand strong{font-family:var(--font-brand); font-size:15.5px; font-weight:700; white-space:nowrap;}
.site-nav{display:flex; gap:4px; margin-inline-start:auto; align-items:center;}
.site-nav a{
  color:var(--text-soft); text-decoration:none; font-size:14.5px;
  padding:10px 12px; border-radius:8px; min-height:44px; display:inline-flex; align-items:center;
  white-space:nowrap;   /* a label that breaks in two turns the bar into a squeezed mess; the row wraps instead */
}
.site-nav a:hover{background:var(--surface2); color:var(--text);}
.site-nav a.cta{
  background:var(--green); color:var(--on-green); font-weight:600;
  border:1px solid var(--green);
}
.site-nav a.cta:hover{opacity:.9; color:var(--on-green);}
/* Which section you are in, marked two ways — a tint and a rule — so it does not
   rely on colour alone. The labels never change; only this marker moves. */
.site-nav a.is-current{
  color:var(--text-strong); font-weight:600;
  background:var(--tint-teal); box-shadow:inset 0 -2px 0 var(--teal);
}

/* Second level, shown only for a section that holds more than one article. */
.section-nav{border-bottom:1px solid var(--border); background:var(--surface2);}
.section-nav .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:48px;}
.sn-label{font-size:13.5px; color:var(--muted); font-weight:600; margin-inline-end:4px;}
.sn-item{
  display:inline-flex; align-items:center; min-height:36px; padding:0 12px;
  border-radius:8px; font-size:14.5px; color:var(--text-soft); text-decoration:none;
  border:1px solid transparent;
}
.sn-item:hover{background:var(--surface); color:var(--text);}
.sn-item.is-current{background:var(--surface); color:var(--text-strong); font-weight:600; border-color:var(--teal);}

/* The same switch as the trainer, down to the sizes and the easing. It is one
   control on two surfaces, so it has to look like one control — a reader moving
   between an article and a drill should not meet a different widget. Kept in
   step with the copy in site/he/app/index.html; sync-content.mjs compares them.
   `direction:ltr` because the knob slides from a fixed left origin: in an RTL
   context the sun/moon pair would otherwise swap and the knob would travel the
   wrong way. */
.theme-toggle{
  position:relative; display:inline-flex; align-items:center;
  direction:ltr; flex-shrink:0; margin-inline-start:auto;
  width:62px; height:30px; padding:3px;
  border-radius:999px; background:var(--surface2); border:1px solid var(--border);
  color:var(--text);   /* buttons do not inherit colour; without this it is UA black */
  cursor:pointer; transition:border-color .15s ease, transform .12s ease;
}
.theme-toggle:hover{border-color:var(--gold);}
.theme-toggle:active{transform:scale(.96);}
/* Answers taps on at least 44px without drawing any bigger. inset counts from inside the 1px
   border, so -8px reaches 7px beyond it: 30px drawn + 14px = 44px. */
.theme-toggle::before{content:""; position:absolute; inset:-8px -4px;}
.tt-knob{
  position:absolute; top:3px; left:3px; width:28px; height:24px;
  border-radius:999px; background:var(--surface); border:1px solid var(--border-strong);
  transform:translateX(28px);
  transition:transform .24s cubic-bezier(.3,.85,.35,1.15);
}
:root[data-theme="light"] .tt-knob{transform:translateX(0);}
.theme-toggle span:not(.tt-knob){
  position:relative; z-index:1; width:28px; text-align:center;
  font-size:14px; line-height:24px; opacity:.4; transition:opacity .2s ease;
}
/* `span.tt-*` matches the specificity of the rule above and wins on source order.
   A bare `.tt-moon` loses to `span:not(.tt-knob)`, because :not() counts its argument. */
.theme-toggle span.tt-moon{opacity:1;}
:root[data-theme="light"] .theme-toggle span.tt-sun{opacity:1;}
:root[data-theme="light"] .theme-toggle span.tt-moon{opacity:.4;}

/* ---------- breadcrumbs ---------- */
/* The breadcrumb element also carries .wrap, and .crumbs is declared after it
   at equal specificity — a `padding` shorthand here silently zeroes the 20px
   side padding .wrap provides, and the text then touches the screen edge on a
   phone. Set only the block axis, so the inline padding survives. */
.crumbs{font-size:13.5px; color:var(--muted); padding-block-start:18px; padding-block-end:0;}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--teal);}
.crumbs li+li::before{content:"\2039"; margin-inline-end:6px; color:var(--border-strong);}
html[dir="ltr"] .crumbs li+li::before{content:"\203A";}

/* ---------- article ---------- */
.article{max-width:var(--measure); margin:0 auto; padding:8px 0 64px;}
.article-head{padding:14px 0 26px; border-bottom:1px solid var(--border); margin-bottom:30px;}
.kicker{
  display:inline-block; font-size:13px; font-weight:600; color:var(--teal);
  background:var(--tint-teal-soft); border:1px solid var(--teal);
  border-radius:999px; padding:5px 13px; margin-bottom:16px;
}
h1{
  font-family:var(--font-article); font-weight:800;
  font-size:clamp(27px, 5.2vw, 40px); line-height:1.2;
  margin:0 0 14px; color:var(--text-strong);
}
.standfirst{font-size:19px; color:var(--text-soft); margin:0 0 20px; line-height:1.65;}
.byline{
  font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 16px;
  align-items:center;
}
.byline .sep{color:var(--muted);}   /* border-strong measured 4.11:1 dark, 3.77:1 light */

.article h2{
  font-family:var(--font-article); font-weight:700;
  font-size:clamp(21px, 3.4vw, 26px); line-height:1.3;
  margin:48px 0 14px; color:var(--text-strong);
}
.article h3{
  font-family:var(--font-article); font-weight:700; font-size:18.5px;
  margin:32px 0 10px; color:var(--text);
}
.article p{margin:0 0 18px;}
.article ul,.article ol{margin:0 0 20px; padding-inline-start:24px;}
.article li{margin-bottom:9px;}
/* Buttons are excluded on purpose. `.article a` is (0,2,0) and `.btn-primary` is
   (0,1,0), so without the :not() every call to action inside an article was
   painted teal-on-green — about 1.3:1 — and underlined, in both themes. */
.article a:not(.btn){color:var(--teal); text-decoration:underline; text-underline-offset:3px;}
.article strong{color:var(--text-strong); font-weight:600;}

/* ---------- table of contents ---------- */
.toc{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px 20px; margin:0 0 34px;
}
.toc h2{font-family:var(--font-head); font-size:14px; margin:0 0 10px; color:var(--muted); font-weight:600;}
.toc ol{margin:0; padding-inline-start:20px; font-size:15.5px;}
.toc li{margin-bottom:6px;}
.toc a{color:var(--text-soft); text-decoration:none;}
.toc a:hover{color:var(--teal); text-decoration:underline;}

/* ---------- callouts ---------- */
.note, .warn{
  border-radius:10px; padding:16px 18px; margin:0 0 24px;
  font-size:16.5px; line-height:1.7;
}
.note{background:var(--tint-teal-soft); border:1px solid var(--teal);}
.warn{background:var(--tint-gold-soft); border:1px solid var(--gold);}
.note > :last-child, .warn > :last-child{margin-bottom:0;}
.note-label, .warn-label{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:13px; margin-bottom:7px;
}
.note-label{color:var(--teal);}
.warn-label{color:var(--gold);}

/* ---------- tables: wide content scrolls inside its own box ---------- */
.table-scroll{
  overflow-x:auto; margin:0 0 26px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  container-type:inline-size;   /* lets the caption text below size itself to this box, not to the table */
}
table{border-collapse:collapse; width:100%; font-size:15.5px;}
/* A caption belongs to its table, so when the table is wider than its box the sentence was cut
   mid-word at the box edge and scrolled away sideways. Its text is box-wide and sticky, so it stays
   put and wraps. Safari ignores sticky on <caption> itself, so the span inside sticks instead,
   sliding along a caption as wide as the table. */
caption{caption-side:top; text-align:start; font-size:13.5px; color:var(--muted);}
caption > span{
  display:block; padding:14px 16px 0; box-sizing:border-box;
  position:sticky; inset-inline-start:0; width:100cqi;
}
th,td{padding:11px 13px; text-align:center; border-bottom:1px solid var(--border);}
th{
  font-family:var(--font-head); font-weight:700; font-size:13.5px;
  color:var(--muted); background:var(--surface2); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none;}
td.label, th.label{text-align:start; white-space:nowrap;}
/* Latin digits only — this font has no Hebrew glyphs.
   `direction:ltr` is load-bearing, not cosmetic: a cell holding "10 · J · Q · K · A"
   inherits the page's RTL direction, the dots between the ranks are neutral, and
   the whole list renders as "J · Q · K · A · 10" — reordered, with the 10 thrown
   to the far end. A list of values reads left to right; say so explicitly. */
td.num{font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; direction:ltr;}
td.pos{color:var(--green);}
td.neg{color:var(--red-text);}
td.zero{color:var(--muted);}

/* ---------- strategy chart ---------- */
/* Each action is a letter as well as a tint, never a tint alone: the chart has
   to be usable in greyscale, on a printout, and by a colour-blind reader. */
table.strategy th.grp{text-align:center; border-bottom:1px solid var(--border);}
table.strategy td.act{
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  padding:9px 10px; border-inline-start:1px solid var(--border);
}
table.strategy td.label{background:var(--surface2); font-size:14px;}
td.act-h{background:var(--tint-gold-soft);  color:var(--text);}
td.act-s{background:var(--tint-teal-soft);  color:var(--text);}
td.act-d{background:var(--tint-green);      color:var(--text-strong);}
td.act-p{background:var(--tint-gold);       color:var(--text-strong);}
.legend{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; padding:0; list-style:none;}
.legend li{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:9px; padding:7px 12px; font-size:14.5px;
}
.legend b{
  font-family:var(--font-mono); min-width:22px; text-align:center;
  border-radius:5px; padding:2px 5px;
}

/* ---------- CTA ---------- */
.cta-box{
  background:var(--tint-green); border:1px solid var(--green);
  border-radius:14px; padding:24px; margin:40px 0;
}
.cta-box h2{margin:0 0 10px; font-size:21px;}
.cta-box p{margin:0 0 18px; color:var(--text-soft); font-size:16.5px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:10px;
  font-family:var(--font-head); font-weight:700; font-size:16px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--green); color:var(--on-green); border-color:var(--green);}
.btn-primary:hover{opacity:.9;}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface2);}
/* Two exits from every call to action: straight into the drill, or to the
   syllabus first. Wraps so the pair never overflows a phone. */
.cta-actions{display:flex; flex-wrap:wrap; gap:10px;}

/* ---------- cards / hub ---------- */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:0 0 40px;}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:22px; display:flex; flex-direction:column;
  /* A cluster with a single card would otherwise stretch across the whole page
     and its paragraph would run far past a comfortable line length. The cap
     makes a lone card look like a card, not like a banner. */
  max-width:560px;
}
.card h2{font-family:var(--font-head); font-size:18px; margin:0 0 8px;}
.card h2 a{color:var(--text-strong); text-decoration:none;}
.card h2 a:hover{color:var(--teal);}
.card p{margin:0 0 14px; color:var(--text-soft); font-size:16px; flex:1;}
.card .more{display:inline-flex; align-items:center; min-height:44px; font-size:14.5px; color:var(--teal); text-decoration:none; font-weight:600;}
.card .more:hover{text-decoration:underline;}

.hub-head{max-width:var(--measure); padding:34px 0 10px;}
.cluster-label{
  font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--muted);
  border-top:1px solid var(--border); padding-top:22px; margin:12px 0 16px;
}

/* ---------- syllabus (course page) ---------- */
.track{margin:0 0 28px;}
.track-name{
  font-family:var(--font-head); font-weight:700; font-size:17px;
  color:var(--text-strong); margin:0 0 12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.track-count{font-family:var(--font-body); font-size:13.5px; color:var(--muted); font-weight:400;}
/* Pushed to the far end of the heading row, so every track in the syllabus is
   its own entrance into the training rather than one button at the bottom. */
.track-go{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; min-height:32px; padding:0 12px;
  border:1px solid var(--border); border-radius:8px;
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  color:var(--teal); text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease;
}
.track-go:hover{border-color:var(--teal); background:var(--tint-teal-soft);}
.levels{list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.levels li{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border);
}
.levels li:last-child{border-bottom:none;}
.lv-num{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--text-soft);
}
.lv-body{min-width:0;}
.lv-title{font-weight:600; font-size:16.5px; display:block;}
.lv-sub{font-size:14.5px; color:var(--muted); line-height:1.6; display:block; margin-top:3px;}

.access{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:0 0 34px;}
.access > div{border-radius:12px; padding:18px 20px; font-size:16px;}
.access .free{background:var(--tint-green); border:1px solid var(--green);}
.access .later{background:var(--tint-gold-soft); border:1px solid var(--gold);}
.access h2{font-family:var(--font-head); font-size:15.5px; margin:0 0 10px;}
.access ul{margin:0; padding-inline-start:20px;}
.access li{margin-bottom:6px;}

/* ---------- related + footer ---------- */
.related{border-top:1px solid var(--border); padding-top:26px; margin-top:46px;}
.related h2{font-size:18px; margin:0 0 14px;}
.related ul{list-style:none; margin:0; padding:0;}
.related li{margin-bottom:10px;}
.related a{color:var(--teal);}

.site-foot{
  border-top:1px solid var(--border); background:var(--surface);
  padding:30px 0; margin-top:50px; font-size:14.5px; color:var(--muted);
}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;}
.site-foot a{color:var(--text-soft);}
.disclaimer{
  max-width:var(--measure); margin:0 auto 24px; font-size:14px; color:var(--muted);
  border-top:1px solid var(--border); padding-top:18px; line-height:1.7;
}

/* The header has its own breakpoint. Brand, six labels, the theme switch and the account control fit on
   one row down to 875px, measured on course.html, whose longer call-to-action decides it (the account
   control added 105px; it was 775px before). Below that the row squeezed: the brand and the button each
   broke onto two lines and the button ran the full height of the bar. From 900px, with room to spare, the
   links move onto their own row instead of hiding, which once left a phone reader no way to reach the
   other articles. An English header will need its own measurement. */
@media (max-width:900px){
  /* Two or three rows, so it also stops being sticky: a persistent bar that size eats a sixth of a
     phone screen for the whole length of a long article. */
  .site-head{position:static;}
  html{scroll-padding-top:16px;}   /* the header scrolls away here, so only the breathing room is left */
  /* padding-block, never the shorthand: .wrap's 20px inline padding must survive. Without it the
     first row sat on the top edge of the screen. */
  .site-head .wrap{min-height:56px; gap:8px 10px; flex-wrap:wrap; padding-block:8px;}
  .site-nav{flex-wrap:wrap; gap:6px; order:1; flex-basis:100%;}   /* the links always get a row of their own */
  /* The first row is the brand, then the switch and the account control together in the far corner. The
     free space goes after the brand: an auto margin on the switch itself lands on the wrong side, because
     the switch is direction:ltr (its inline start is its left), and it opened a gap between the two. */
  .site-head .brand{margin-inline-end:auto;}
}
/* In the header the switch never takes the free space (see above); the links do on a wide screen, the brand
   on a narrow one. Scoped here: the switch's base rule is shared with the trainer and checked for drift. */
.site-head .theme-toggle{margin-inline-start:0;}

@media (max-width:700px){
  body{font-size:17px;}
  .site-nav a{padding:10px; font-size:14px;}     /* 44px min-height comes from the base rule */
  /* Bigger switch on touch screens, same sizes the trainer uses. Must sit after
     the rules above, or it loses on source order at equal specificity. */
  .theme-toggle{width:72px; height:36px;}
  .theme-toggle span:not(.tt-knob){width:33px; line-height:28px;}
  .tt-knob{width:33px; height:28px; transform:translateX(33px);}
  :root[data-theme="light"] .tt-knob{transform:translateX(0);}
  .section-nav .wrap{gap:6px; padding-block:8px;}
  .sn-item{min-height:44px;}
  .sn-label{flex:1 1 100%;}
  .article{padding-top:4px;}
  .standfirst{font-size:17.5px;}
  .cta-box{padding:20px;}
  .cta-actions .btn{flex:1 1 100%;}
  .track-go{min-height:44px;}
}