/* A.M. Optyka — one stylesheet for the public site and the panel.
   No build step, no CDN, no JavaScript: a strict `default-src 'self'` CSP is
   set in fly.toml and an external font or inline script would break it.

   Light only, on purpose. The brand is beige and paper-white with black type;
   a dark theme would fight it rather than serve it.

   The neutrals below are the identity's own swatches - biel, beż, piaskowy,
   ciepły beż, czarny - and gold is the line-art in the logo. There is
   deliberately no sixth colour: the brand this replaced had a red accent, and
   the two places that genuinely need emphasis (required-field marks, the "new
   salon" tag) now use --accent, a darkened gold, so nothing on the page falls
   outside the palette. */

:root{
  --cream:#FAF7F1;   /* biel */
  --paper:#FFFFFF;
  --sand:#EBE1D2;    /* beż */
  --warm:#DCC9AE;    /* piaskowy */
  --deep:#C6A882;    /* ciepły beż */
  --ink:#1A1815;     /* czarny */
  --muted:#6E655A;
  --accent:#8A6A3D;  /* the gold, darkened until it is legible at text size */
  --gold:#B08D57;

  --ok-bg:#E9F1E9;   --ok-text:#2C5F3C;
  --err-bg:#F9E9E7;  --err-text:#9C3B30;
  --danger:#A32E22;

  --serif:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Futura","Avenir Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --radius:2px;
  --shadow:0 1px 2px rgba(20,18,16,.04);
}

*{box-sizing:border-box}

/* The header is sticky, so an anchor would otherwise scroll its target under
   it and cut off the heading. The offset has to match the header's actual
   height, which grows at the two breakpoints below where .nav wraps to
   extra rows (brand+button / nav-links split onto their own line) - a
   single fixed value only matched the desktop height and left #uslugi etc.
   still hidden 35-60px under the header at tablet and phone widths. */
#top,#uslugi,#salony,#oprawy,#filozofia,#wizyta,#kontakt{scroll-margin-top:6rem}
@media (max-width:900px){
  #top,#uslugi,#salony,#oprawy,#filozofia,#wizyta,#kontakt{scroll-margin-top:8.5rem}
}
@media (max-width:640px){
  #top,#uslugi,#salony,#oprawy,#filozofia,#wizyta,#kontakt{scroll-margin-top:10rem}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.2;font-weight:400}
p{margin:0 0 1rem}
a{color:inherit}
img,svg{max-width:100%}

.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.prewrap{white-space:pre-wrap}
.num{text-align:right;font-variant-numeric:tabular-nums}
.eyebrow{display:block;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* --- brand ------------------------------------------------------------- */
/* Two rules carry the whole logo: "A.M." is the serif at full size, OPTYKA is
   the sans at ~60% of it in wide caps. Letter-spacing adds its gap after the
   last letter too, so every tracked line is pulled back by the same amount -
   otherwise each one sits visibly off-centre against the lines above it. */

.mark{display:block;flex:none}

/* The short header mark - the same stack as the lockup below, three lines
   instead of six. Scaled by `font-size` on .logo-word alone, like the lockup. */
.logo-word{display:inline-flex;flex-direction:column;align-items:center;
           font-size:1.1rem;line-height:1;white-space:nowrap}
.lw-i{font-family:var(--serif);font-size:1.5em;letter-spacing:.005em}
.lw-n{font-family:var(--serif);font-size:.72em;font-weight:400;letter-spacing:.3em;
      text-transform:uppercase;margin:.14em 0 0 .3em}
.lw-rule{display:flex;align-items:center;justify-content:center;gap:.3em;width:100%;margin-top:.3em}
.lw-rule::before,.lw-rule::after{content:"";flex:1 1 auto;height:1px;background:var(--gold)}

/* The stacked lockup, transcribed from the reception sign. `font-size` on .logo
   is the only dial: every line below is in `em`, so one number scales the whole
   sign and the proportions between the lines never drift. */
.logo{display:inline-flex;flex-direction:column;align-items:center;font-size:1rem;line-height:1;text-align:center}
.logo-i{font-family:var(--serif);font-size:2.9em;letter-spacing:.005em}
.logo-n{font-family:var(--serif);font-size:1.36em;letter-spacing:.3em;text-transform:uppercase;
        margin:.12em 0 0 .3em}
/* Glasses centred on a hairline: the rule is drawn by the pseudo-elements so it
   grows to fill whatever the lockup is sitting in, exactly as it runs to the
   edges of the sign. */
.logo-rule{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin:.5em 0}
.logo .mark{width:5.2em;height:auto}
.logo-rule::before,.logo-rule::after{content:"";flex:1 1 auto;max-width:3.2em;height:1px;background:var(--gold)}
.logo-role{font-size:.62em;letter-spacing:.24em;text-transform:uppercase;margin:0 0 .85em .24em}
.logo-name{font-size:.82em;letter-spacing:.24em;text-transform:uppercase;margin-left:.24em}
.logo-sub{font-size:.62em;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
          margin:.55em 0 0 .24em}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}


/* --- buttons ----------------------------------------------------------- */

.btn{display:inline-block;font:inherit;font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;
     padding:.85rem 1.8rem;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
     text-decoration:none;text-align:center;cursor:pointer;border-radius:var(--radius);transition:background .18s,color .18s}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--warm)}
.btn-line:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn-ghost:hover{color:var(--ink);border-color:var(--warm)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:transparent;color:var(--danger)}
.btn-sm{padding:.5rem 1rem;font-size:.66rem}
.btn-block{width:100%}
.inline{display:inline}

/* --- forms (shared) ---------------------------------------------------- */

.f{margin-bottom:1.1rem}
.f label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.f label em{color:var(--accent);font-style:normal}
input,select,textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--warm);background:var(--paper);
      color:var(--ink);font:inherit;font-size:.95rem;border-radius:var(--radius)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
textarea{resize:vertical}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 1.1rem}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 1.1rem}
.stack{margin-top:1.2rem}
.slot-taken{border-style:dashed;border-color:var(--gold);display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.slot-block{margin-bottom:1rem}
.search.search-with-salon{display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto;gap:.8rem;align-items:end}
.search-with-salon .f{margin-bottom:0}
.salon-picker{display:flex;align-items:flex-end;gap:.8rem;padding:1rem 1.4rem}
.salon-picker .f{margin-bottom:0;flex:0 1 280px}
@media (max-width:640px){.search.search-with-salon{grid-template-columns:1fr}}
.slot-block .slot-grid{margin-bottom:0}
.slot-block-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;font-weight:400}
.slot-taken-note{display:block;font-size:.55rem;letter-spacing:.04em;text-transform:none;color:var(--accent);margin-top:.2rem}
.visit-patient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem;align-items:start}
.visit-patient-grid .card{margin-bottom:0}
.grafik-table{margin-bottom:1.2rem}
.slot-cell{display:flex;flex-direction:column;gap:.4rem}
.slot-hours{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.slot-hours select{width:auto;padding:.3rem .4rem;font-size:.85rem}
.slot-hours.is-custom select{border-color:var(--ink)}
.plain-list{list-style:none;margin:0 0 .8rem;padding:0}
.plain-list li{padding:.3rem 0}
.checkbox-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;text-transform:none;
  letter-spacing:normal;color:var(--ink);margin-bottom:1.1rem}
.checkbox-item input{width:auto;padding:0}
fieldset{border:0;margin:0;padding:0}

/* --- public: header ---------------------------------------------------- */

.site-header{position:sticky;top:0;z-index:20;background:rgba(251,247,241,.93);
             backdrop-filter:blur(10px);border-bottom:1px solid var(--sand)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.8rem 0}
.nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:var(--muted);padding-bottom:3px;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-color:var(--gold)}

/* --- public: hero ------------------------------------------------------ */

.hero{padding:5rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.hero h1{font-family:var(--serif);font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.08;letter-spacing:-.015em;margin:1.3rem 0 1.5rem}
.hero h1 em{font-style:italic;color:var(--accent)}
.lead{color:var(--muted);max-width:46ch;font-size:1.05rem}
.hero-actions{display:flex;gap:1rem;margin-top:2.3rem;flex-wrap:wrap}
/* The photograph of the reception wall. The aspect ratio is the picture's own,
   reserved before it loads so the hero never jumps as it arrives; the gold
   frame and the backlight are in the photo, so nothing is drawn on top of it. */
.hero-art{aspect-ratio:1206/786;background:var(--sand);overflow:hidden}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover}

/* --- public: services strip ------------------------------------------- */

.strip{border-block:1px solid var(--sand);background:var(--paper)}
.strip-list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.strip-list li{padding:2.1rem 1.5rem;text-align:center;border-left:1px solid var(--sand)}
.strip-list li:first-child{border-left:0}
.strip .ico{display:block;color:var(--gold);margin-bottom:.7rem}
.strip .ico svg{width:26px;height:26px;margin-inline:auto}
.strip b{display:block;font-weight:500;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;line-height:1.7}

/* --- public: sections -------------------------------------------------- */

.section{padding:6rem 0}
.head{text-align:center;max-width:58ch;margin:0 auto 3.4rem}
.head h2{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.8rem);margin:.8rem 0 1rem}
.head p{color:var(--muted)}

.salony{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.salon{background:var(--paper);border:1px solid var(--sand);padding:2.2rem 1.9rem;position:relative}
.salon .tag{position:absolute;top:1.2rem;right:1.2rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
            color:var(--accent);border:1px solid var(--accent);padding:.2rem .6rem;border-radius:99px}
.salon h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:.15rem}
.salon .where{color:var(--gold);font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.3rem}
.salon address{font-style:normal;color:var(--muted);font-size:.95rem;line-height:1.9}
.salon address span{display:block}
.salon hr{border:0;border-top:1px solid var(--sand);margin:1.3rem 0}
.salon .hours{display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted);padding:.15rem 0}
.salon .hours span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)}

/* --- public: frame brands ---------------------------------------------- */
/* Each brand is set as a typographic wordmark that echoes its own identity -
   weight, case and tracking - rather than reproducing its logo artwork. Drop an
   official SVG into static/img/brands/ and set `logo` in public.py to use the
   real mark instead; the tile swaps automatically. */

.section-alt{background:var(--paper);border-block:1px solid var(--sand)}
/* Grid lines are drawn by a 1px ring on each tile rather than by a coloured
   container showing through the gaps - otherwise a part-filled last row leaves
   a block of stray background where the missing tiles would be. */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
        list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--sand)}
.brand-tile{background:var(--paper);box-shadow:0 0 0 1px var(--sand);
            display:grid;place-items:center;min-height:110px;padding:1.5rem 1rem;
            text-align:center;transition:background .18s}
.brand-tile:hover{background:var(--cream)}
.brand-tile img{max-height:44px;width:auto;object-fit:contain}
.brand-name{color:var(--ink);line-height:1.2;display:block}
.brands-note{text-align:center;color:var(--muted);font-size:.88rem;margin:2rem 0 0}

.b-rayban{font-weight:700;font-size:1.25rem;letter-spacing:-.01em;text-transform:uppercase}
.b-versace{font-family:var(--serif);font-size:1.15rem;letter-spacing:.34em;text-transform:uppercase;text-indent:.34em}
.b-dg{font-family:var(--serif);font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase}
.b-armani{font-weight:300;font-size:1.05rem;letter-spacing:.42em;text-transform:uppercase;text-indent:.42em}
.b-miumiu{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em}
.b-vogue{font-family:var(--serif);font-size:1.3rem;letter-spacing:.18em;text-transform:uppercase;text-indent:.18em}
.b-furla{font-weight:500;font-size:1.15rem;letter-spacing:.3em;text-transform:uppercase;text-indent:.3em}
.b-police{font-weight:700;font-style:italic;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase}
.b-sting{font-weight:300;font-size:1.2rem;letter-spacing:.4em;text-transform:uppercase;text-indent:.4em}
.b-yalea{font-family:var(--serif);font-style:italic;font-size:1.35rem;letter-spacing:.04em}
.b-tous{font-weight:700;font-size:1.25rem;letter-spacing:.16em;text-transform:uppercase;text-indent:.16em}
.b-idtokyo{font-weight:400;font-size:1.2rem;letter-spacing:.1em}
.b-hickmann{font-family:var(--serif);font-size:1.3rem;letter-spacing:.06em}
.b-plein{font-family:var(--serif);font-weight:700;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase}
.b-boss{font-weight:700;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase}
.b-kors{font-weight:400;font-size:1.05rem;letter-spacing:.28em;text-transform:uppercase;text-indent:.28em}
.b-maxmara{font-weight:600;font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase}
.b-prada{font-family:var(--serif);font-size:1.25rem;letter-spacing:.22em;text-transform:uppercase;text-indent:.22em}

.quote{background:var(--ink);color:var(--cream);text-align:center;padding:6rem 0}
.quote .eyebrow{color:var(--warm);margin-bottom:1.5rem}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.35;max-width:22ch;margin:0 auto}

/* --- public: booking ---------------------------------------------------- */

.cta{max-width:44rem;margin:0 auto;border:1px solid var(--sand);background:var(--paper)}
.cta-copy{padding:3.2rem 3.2rem 0}
.cta-copy h2{font-family:var(--serif);font-size:2.2rem;margin:.9rem 0 1rem}
.cta-copy p{color:var(--muted);margin-bottom:0}
.cta-form{padding:2rem 3.2rem 3.2rem}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.badge{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
       border:1px dashed var(--gold);border-radius:99px;padding:.25rem .7rem}

/* The three-step slot picker (salon -> day -> time) and its final contact
   form - all plain links and a form, no JS, so every step is just a page
   load with a different query string. */
.slot-grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.link-back{display:inline-block;font-size:.8rem;color:var(--muted);text-decoration:none;
           border-bottom:1px solid var(--warm)}
.link-back:hover{color:var(--ink)}
.hint{font-size:.78rem;color:var(--muted);margin:-.5rem 0 1.1rem}

.salon-choice{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.2rem}
.salon-choice-item{display:block;padding:1rem 1.2rem;border:1px solid var(--warm);
                    border-radius:var(--radius);background:var(--paper);color:var(--ink);
                    text-decoration:none;transition:border-color .15s,background .15s}
.salon-choice-item:hover{border-color:var(--gold);background:var(--cream)}
.salon-choice-item strong{display:block;font-size:.95rem;margin-bottom:.25rem}
.salon-choice-item .muted{display:block;font-size:.78rem}

.cal{margin-bottom:.6rem}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.cal-nav strong{text-transform:capitalize;font-size:.85rem}
.cal-nav a{color:var(--ink);text-decoration:none;font-size:1.1rem;line-height:1;padding:.3rem .6rem;
           border-radius:var(--radius)}
.cal-nav a:hover{background:var(--paper)}
.cal-nav-disabled{color:var(--warm);font-size:1.1rem;line-height:1;padding:.3rem .6rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-head{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
          text-align:center;padding:.3rem 0}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.82rem;
          border-radius:var(--radius)}
.cal-blank{background:transparent}
.cal-closed{color:var(--warm)}
.cal-open{background:var(--paper);border:1px solid var(--gold);color:var(--ink);
          text-decoration:none;font-weight:600;transition:background .15s,color .15s}
.cal-open:hover{background:var(--ink);color:var(--cream)}
.consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:var(--muted);
         margin-bottom:1.2rem}
.consent input{width:auto;margin-top:.2rem}

/* --- public: footer ---------------------------------------------------- */

.site-footer{background:var(--paper);border-top:1px solid var(--sand);padding:3rem 0;text-align:center;color:var(--muted);font-size:.85rem}
.site-footer .logo{margin-bottom:1.4rem;color:var(--ink);font-size:1.05rem}
.site-tagline{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink);margin:0 0 1.5rem}
.fnav{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;list-style:none;margin:0 0 1.5rem;padding:0;
      font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.fnav a{text-decoration:none}
.fnav a:hover{color:var(--ink)}
.site-footer p{margin:0}

/* --- public: legal pages (polityka prywatności) -------------------------- */

.legal{padding:4rem 0 5rem}
.legal .wrap{max-width:72ch}
.legal h1{font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);margin-bottom:2rem}
.legal h2{font-family:var(--serif);font-size:1.4rem;margin:2.2rem 0 .8rem}
.legal p,.legal li{color:var(--muted)}
.legal ul{margin:0 0 1rem;padding-left:1.3rem}
.legal .legal-meta{color:var(--muted);font-size:.8rem;margin-bottom:2.5rem}

/* --- public: cookie consent banner --------------------------------------- */

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:var(--cream);
  box-shadow:0 -1px 8px rgba(20,18,16,.12)}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding:1.1rem 0}
.cookie-banner-inner p{margin:0;font-size:.82rem;line-height:1.5;max-width:60ch}
.cookie-banner-inner a{color:var(--cream);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:.75rem;flex-shrink:0}
.cookie-banner .btn-line{border-color:var(--cream);color:var(--cream)}
.cookie-banner .btn-line:hover{background:var(--cream);color:var(--ink)}

@media (max-width:640px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:center}
  .cookie-banner-actions{justify-content:center}
}

/* --- panel ------------------------------------------------------------- */

.panel{background:var(--cream)}
.panel-header{background:var(--paper);border-bottom:1px solid var(--sand);position:sticky;top:0;z-index:20}
.brand-tag{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
           border-left:1px solid var(--warm);padding-left:.7rem;margin-left:.2rem}
.panel-user{display:flex;align-items:center;gap:1rem}
.who{color:var(--muted);font-size:.9rem}

/* The panel's own nav - two destinations, same treatment as the card's tabs: a
   gold rule under the current one rather than a filled block, because nothing
   here should shout louder than the data. */
.panel-nav{display:flex;gap:1.6rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.pnav{text-decoration:none;color:var(--muted);padding-bottom:3px;
      border-bottom:1px solid transparent;white-space:nowrap}
.pnav:hover{color:var(--ink)}
.pnav.is-current{color:var(--ink);border-bottom-color:var(--gold)}
.panel-main{padding:2.4rem 0 4rem}
.panel-footer{border-top:1px solid var(--sand);padding:1.6rem 0;font-size:.8rem;color:var(--muted)}
.panel-footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.panel-footer a{text-decoration:none;border-bottom:1px solid var(--warm)}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.page-head h1{font-family:var(--serif);font-size:2.1rem;margin:.35rem 0 0}
.card>.page-head{align-items:center;margin-bottom:1.1rem}
.card>.page-head h2{margin:0}
.page-head .muted{margin:.5rem 0 0;font-size:.95rem;max-width:64ch}

/* --- panel: the patient card's tabs ------------------------------------ */
/* Links, not buttons, because they go somewhere. The current one is marked by
   a rule under it in the brand's gold rather than by a filled tab: the page is
   paper-white and beige, and a solid block here would be the loudest thing on
   a screen full of medical data. */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.6rem;
      border-bottom:1px solid var(--sand)}
.tab{text-decoration:none;color:var(--muted);font-size:.72rem;letter-spacing:.16em;
     text-transform:uppercase;padding:.85rem 1.1rem;margin-bottom:-1px;
     border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.is-current{color:var(--ink);border-bottom-color:var(--gold)}

.card{background:var(--paper);border:1px solid var(--sand);padding:1.8rem;margin-bottom:1.4rem;box-shadow:var(--shadow)}
.card h2{font-family:var(--serif);font-size:1.35rem;margin-bottom:1.1rem}
.card-flush{padding:0;overflow:hidden}
.card.danger{border-color:var(--warm)}
.card.danger h2{color:var(--danger)}
.form-card{max-width:640px}
.empty{text-align:center;padding:3.5rem 1.5rem}
.empty p{color:var(--muted)}

.search{display:flex;gap:.6rem;margin-bottom:1.6rem;flex-wrap:wrap}
.search input{flex:1 1 260px;width:auto}
.search select{flex:0 1 190px;width:auto}

.data{width:100%;border-collapse:collapse}
.data th,.data td{padding:.85rem 1rem;border-bottom:1px solid var(--sand);text-align:left}
.data thead th{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);background:var(--cream)}
.data tbody tr:last-child td{border-bottom:0}
.data tfoot th,.data tfoot td{font-weight:500;border-bottom:0;background:var(--cream)}
.data th.num,.data td.num{text-align:right}
.strong-link{font-family:var(--serif);font-size:1.08rem;text-decoration:none;border-bottom:1px solid var(--warm);padding-bottom:1px}
.strong-link:hover{border-color:var(--gold)}

.stats{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.stat{flex:1 1 150px;background:var(--paper);border:1px solid var(--sand);padding:1.2rem 1.4rem}
.stat-accent{background:var(--sand);border-color:var(--warm)}
.stat-value{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-label{color:var(--muted);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}

.intake{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:.5rem 1.4rem;margin:0 0 1rem}
.intake dt{color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding-top:.2rem}
.intake dd{margin:0}

/* --- panel: karta badania refrakcji ------------------------------------ */

.karta{max-width:820px}
.karta-part{border-top:1px solid var(--sand);margin-top:2rem;padding-top:1.6rem}
.karta-part:first-of-type{border-top:0;margin-top:0;padding-top:0}
.karta-part>legend,.karta-part>h3{font-family:var(--serif);font-size:1.1rem;margin-bottom:1.2rem;padding:0}
.karta-part>legend small,.karta-part>h3 small{display:block;font-family:var(--sans);font-size:.68rem;
      letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}

.karta-sub{font-family:var(--serif);font-size:.98rem;margin:1.8rem 0 .7rem}

/* A question's own label, where the control underneath is a group of radios
   rather than one input a <label for> could point at. */
.flabel{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
        color:var(--muted);margin-bottom:.4rem}
.flabel em,.flabel .req{color:var(--accent);font-style:normal}
.choice{display:flex;flex-wrap:wrap;gap:.6rem}
.choice label{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-height:44px;
              padding:.45rem .9rem;border:1px solid var(--warm);border-radius:var(--radius);
              background:var(--paper);cursor:pointer;font-size:.95rem}
.choice input[type=radio]{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--gold);flex:none}
/* The chosen answer is the one thing on this form worth a colour. */
.choice label:has(input:checked){border-color:var(--gold);background:var(--cream)}

/* --- conditional questions --------------------------------------------- */
/* A question that only makes sense after a particular answer is not shown until
   that answer is given. No JavaScript: `:has()` reads the state of the control
   above and the rule below un-hides its follow-up.
 
   The whole block is inside @supports on purpose. Without :has() the reveal
   rules would never fire, and hiding these fields unconditionally would make
   them impossible to fill in - so on a browser that cannot do this, every
   question simply stays visible, exactly as it was before.
 
   None of these fields carries `required` in the HTML. A required control that
   CSS is hiding blocks the submit while the browser points at something the
   user cannot see; the pairing is validated server-side instead, in
   IntakeCreate.check_conditional_answers. */
@supports selector(:has(*)) {
  .karta .cond{display:none}
  /* "Kto wykonał badanie" - only once there is a year to attribute it to.
     :placeholder-shown is how an empty text input is detected in CSS, which is
     why that input keeps a placeholder even though it reads as a hint. */
  .karta:has(#last_exam_year:not(:placeholder-shown)) .cond-examiner{display:block}
  .karta:has(input[name="takes_medication"][value="yes"]:checked) .cond-meds{display:block}
  .karta:has(input[name="add_visit"][value="yes"]:checked) .cond-visit{display:block}
  .karta:has(input[name="add_visit"][value="no"]:checked) .cond-novisit{display:block}
}

/* Visually hidden, still read aloud: the refraction grid labels each input by
   its column heading, which a screen reader cannot infer from the layout. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* POPRZEDNIE / AKTUALNE: a grid of eyes against measurements, because that is
   the shape of the sheet it is transcribed from - one row per eye, read across. */
.rx{width:100%;border-collapse:collapse;margin-bottom:.6rem}
.rx th,.rx td{padding:.3rem .4rem;text-align:left;font-weight:400;vertical-align:middle}
.rx thead th{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding-bottom:.2rem}
.rx thead th .req,.rx tbody th .req{color:var(--accent);font-style:normal}
.rx tbody th{width:3.4rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rx td.rx-both{vertical-align:middle;background:var(--cream)}
.rx tr.rx-sub th{width:auto;color:var(--muted);font-size:.62rem;letter-spacing:.16em;
      padding-top:.9rem;border-top:1px solid var(--sand)}
.rx input{padding:.55rem .7rem}

.rx-read{margin:0 0 .6rem}
.rx-read th,.rx-read td{border-bottom:1px solid var(--sand);padding:.35rem .4rem}
.rx-read tr:last-child th,.rx-read tr:last-child td{border-bottom:0}
.rx-title{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:.6rem 0 .2rem}

/* The T/N block: the paper card is a list of questions with two tick columns,
   and it is filled in fastest when it stays that shape. */
.tn{width:100%;border-collapse:collapse;margin-bottom:.4rem}
.tn th,.tn td{border-bottom:1px solid var(--sand);padding:.55rem .4rem;text-align:left;font-weight:400}
.tn tr:last-child th,.tn tr:last-child td{border-bottom:0}
.tn thead th{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.tn thead th .req{color:var(--accent);font-style:normal}
.tn thead th.tn-col,.tn td.tn-col{text-align:center;width:3.2rem}
.tn tbody th{font-size:.94rem;line-height:1.35}
.tn input[type=radio]{width:1.05rem;height:1.05rem;margin:0;padding:0;accent-color:var(--gold);cursor:pointer}
.tn td.tn-col label{display:block;cursor:pointer;padding:.2rem 0}

.timeline{list-style:none;margin:0 0 1rem;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(96px,110px) 1fr;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--sand)}
.timeline li:last-child{border-bottom:0}
.timeline-date{font-family:var(--serif);color:var(--gold);font-variant-numeric:tabular-nums;font-size:1rem}
.timeline-body p{margin:0 0 .35rem}
.visit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.9rem 0 .2rem}
.visit-where{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
/* The folded wywiad sits inside a timeline entry, so it needs less room around
   it than the page-level <details> the .adder class was written for. */
.wywiad-fold{margin:0 0 .8rem;border-top:0;padding-top:0}
.wywiad-fold[open]{margin-bottom:1.2rem}

.adder{margin-top:1.4rem;border-top:1px solid var(--sand);padding-top:1rem}
.adder summary{cursor:pointer;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.adder summary:hover{color:var(--ink)}

.flash{padding:.85rem 1.2rem;margin-bottom:1.5rem;border-radius:var(--radius);font-size:.94rem}
.flash-ok{background:var(--ok-bg);color:var(--ok-text)}
.flash-error{background:var(--err-bg);color:var(--err-text)}

/* --- panel: umówione wizyty --------------------------------------------- */
/* Three states, in the palette already here: open is the brand's sand,
   because it is the thing to act on; done is the same green a saved form
   uses; cancelled is muted - it is not a failure, it just stopped. There is
   deliberately no new colour, and `.badge` is already spoken for (the public
   site's disabled-booking pill), hence `.state-*` rather than reusing it. */
.state{display:inline-block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
       padding:.22rem .65rem;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.state-open{background:var(--sand);color:var(--ink);border-color:var(--warm)}
.state-done{background:var(--ok-bg);color:var(--ok-text)}
.state-cancelled{background:transparent;color:var(--muted);border-color:var(--sand)}
.due-line{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
.due-late{color:var(--danger)}

/* The status-change control sits inside a table cell, so its inputs stop
   being full-width - the same override the search bar makes. */
.row-form{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0}
.row-form select,.row-form input{flex:0 1 auto;width:auto;padding:.5rem .6rem;font-size:.85rem}
.row-form input{flex:1 1 9rem}
.adder-tight{display:inline-block;margin:.4rem 0 0;border-top:0;padding-top:0}

/* --- panel: kalendarz ---------------------------------------------------- */
/* An agenda, not a slot grid: one card per day that actually has a booking,
   listing only the booked times - a receptionist thinks "what does Monday
   look like", not "which of these mostly-empty rows are taken". */

.salon-tabs{display:flex;gap:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--sand);padding-bottom:.8rem}
.cal-feed-box{padding:1.2rem 1.6rem}
.cal-feed-box p{margin:0 0 .8rem}
.cal-feed-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.cal-feed-url{flex:1 1 260px;min-width:0;padding:.5rem .7rem;border:1px solid var(--sand);border-radius:var(--radius);
  background:var(--cream);color:var(--muted);font-size:.78rem;font-family:monospace}
.cal-week-head{margin-bottom:1.2rem;align-items:center}
.week-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.week-nav strong{font-size:.9rem;text-transform:capitalize}
.cal-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.cal-day h2{font-family:var(--serif);font-size:1.3rem;margin:0 0 1rem;text-transform:capitalize}
.cal-day-today{border-color:var(--gold)}
.cal-day-table td{padding:.6rem .3rem}
.cal-time{width:4rem;color:var(--muted);font-size:.8rem;white-space:nowrap}
.cal-slot{display:inline-block;font-size:.9rem;text-decoration:none}
.cal-slot-taken{color:var(--ink);font-weight:500;border-bottom:1px solid var(--gold)}
.cal-slot-taken:hover{color:var(--gold)}

/* The same .cal/.cal-grid/.cal-cell widget as the public booking picker
   (style.css, public: booking section), reused here for one field's "Termin"
   instead of a whole page - every day is open, so no .cal-closed. */
.due-calendar-toggle{display:block;margin-top:.6rem}
.due-calendar{margin-top:.8rem;padding:1rem;max-width:320px;
              border:1px solid var(--sand);background:var(--cream)}
.cal-cell-today{background:var(--sand);font-weight:600}

/* --- panel: login ------------------------------------------------------ */

.login-page{display:grid;place-items:center;min-height:100vh;padding:2rem 1.5rem;background:var(--cream)}
.login-box{width:min(420px,100%);background:var(--paper);border:1px solid var(--sand);padding:2.6rem;text-align:center;box-shadow:var(--shadow)}
.login-brand{margin-bottom:2rem;display:flex;justify-content:center}
.login-brand .logo{font-size:14px}
.login-box h1{font-family:var(--serif);font-size:1.5rem}
.login-box form{margin-top:1.8rem;text-align:left}
.login-back{margin:1.4rem 0 0}
.login-back a{text-decoration:none;border-bottom:1px solid var(--warm)}

/* --- responsive -------------------------------------------------------- */
/* The panel is used standing at a counter with a patient waiting, so phone
   layout is not a courtesy here - it is the common case. Two rules run through
   everything below: nothing scrolls sideways, and anything you have to hit with
   a thumb is at least ~44px tall. */

.salon-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.salon-actions .btn{flex:1 1 auto}

/* One phone number per row - a wrapped two-then-one row read as a mistake,
   not three equal choices. */
.phone-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1.4rem}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-art{order:-1}
  .strip-list{grid-template-columns:repeat(2,1fr)}
  .strip-list li:nth-child(3){border-left:0}
  .salony{grid-template-columns:1fr}

  /* Brand + four links + a button stop fitting on one line well before the
     phone breakpoint - on a tablet they used to push the "Umów wizytę" button
     off the right edge. The links drop to their own centred line instead. */
  .nav{flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding:.9rem 0}
  .nav-links{order:3;width:100%;justify-content:center;row-gap:.5rem;flex-wrap:wrap}
  /* The panel header used to stay nowrap here - fine for brand + logout, not
     for a third item once the panel nav joined them. */
  .panel-header .nav{flex-wrap:wrap}
  .panel-nav{order:3;width:100%;justify-content:center;gap:1.4rem}
}

@media (max-width:640px){
  .wrap{width:min(1180px,100% - 2rem)}

  /* --- public site --- */
  /* The nav used to vanish entirely below 640px, which left a phone with no
     way to reach the salons or the booking form at all. It stays, wrapped and
     centred: no burger, because opening one needs JavaScript and the CSP on
     this site forbids it. */
  .nav{justify-content:center}
  .nav-links{gap:1.1rem;font-size:.7rem}
  .nav-links a{padding:.35rem 0}
  .nav .btn{padding:.7rem 1.2rem}

  .hero{padding:2.6rem 0 2.4rem}
  .hero-actions{gap:.7rem}
  .hero-actions .btn{flex:1 1 100%}
  .section{padding:3.4rem 0}
  .head{margin-bottom:2.2rem}
  .quote{padding:3.4rem 0}
  .strip-list{grid-template-columns:1fr}
  .strip-list li{border-left:0;border-top:1px solid var(--sand);padding:1.5rem 1rem}
  .strip-list li:first-child{border-top:0}
  .salon{padding:1.8rem 1.4rem}
  .addr-spacer{display:none}
  .brands{grid-template-columns:repeat(2,1fr)}
  .brand-tile{min-height:88px;padding:1.1rem .6rem}
  .cta-copy{padding:2.2rem 1.5rem 0}
  .cta-form{padding:1.6rem 1.5rem 2.2rem}
  .site-footer{padding:2.4rem 0}

  /* --- panel chrome --- */
  .panel-header .nav{flex-wrap:wrap;justify-content:space-between;gap:.6rem}
  .panel-nav{order:3;width:100%;justify-content:center;gap:1.1rem;
             border-top:1px solid var(--sand);margin-top:.4rem;padding-top:.5rem}
  .brand-tag{display:none}          /* "Panel administracyjny" is not worth a line here */
  .who{display:none}                /* whose session it is matters on a shared desktop, not on a phone */
  .panel-main{padding:1.4rem 0 2.6rem}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:.8rem .8rem;font-size:.68rem;letter-spacing:.12em}
  .page-head{gap:.8rem;margin-bottom:1.4rem}
  .page-head h1{font-size:1.6rem}
  .page-head .btn{width:100%}
  .card{padding:1.2rem;margin-bottom:1rem}
  .login-box{padding:1.8rem 1.4rem}
  .search{gap:.5rem}
  .search input,.search select{flex:1 1 100%}
  .search .btn{width:100%}
  .stats{gap:.6rem}
  .stat{flex:1 1 calc(50% - .3rem);padding:.9rem 1rem}
  .stat-value{font-size:1.5rem}

  /* --- panel: patient list --- */
  /* A four-column table at 390px either scrolls sideways or shrinks to
     unreadable. Each row becomes a block instead, with the header text carried
     down by data-label so no value is left without its meaning. */
  .card-flush{overflow:visible}
  .data thead{display:none}
  .data,.data tbody,.data tr,.data td{display:block;width:auto}
  .data tr{border-bottom:1px solid var(--sand);padding:.9rem 1rem}
  .data tr:last-child{border-bottom:0}
  .data td{border:0;padding:.15rem 0}
  .data td[data-label="Pacjent"]{padding-bottom:.4rem}
  .data td:not([data-label="Pacjent"])::before{content:attr(data-label) " · ";
        color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
  .data td:not([data-label="Pacjent"]){font-size:.9rem}

  /* --- panel: the refraction card --- */
  .intake{grid-template-columns:1fr;gap:.2rem 0}
  .intake dd{margin-bottom:.8rem}
  .timeline li{grid-template-columns:1fr;gap:.3rem}

  /* The OP/OL grid of *inputs* cannot survive four columns on a phone, so it
     unfolds into stacked fields, and the labels that are visually hidden on
     desktop - where the column heading does the work - become visible here,
     where it doesn't.
     The read-only version is excluded on purpose: it is three short columns
     that fit easily, and stacking it would throw away the side-by-side reading
     that makes POPRZEDNIE and AKTUALNE comparable at a glance. */
  .rx:not(.rx-read),
  .rx:not(.rx-read) tbody,
  .rx:not(.rx-read) tr,
  .rx:not(.rx-read) th,
  .rx:not(.rx-read) td{display:block;width:auto}
  .rx:not(.rx-read) thead{display:none}
  .rx:not(.rx-read) tr{margin-bottom:.2rem}
  .rx:not(.rx-read) tbody th{width:auto;padding:.7rem 0 .1rem;font-size:.68rem}
  .rx:not(.rx-read) tr.rx-sub th{padding-top:1rem}
  .rx:not(.rx-read) td{padding:.2rem 0}
  /* Stacked, the binocular field would sit inside the OP group and read as a
     right-eye value. Its label says otherwise, but a rule is cheaper than
     trusting anyone to read carefully with a patient waiting. */
  .rx:not(.rx-read) td.rx-both{background:transparent;margin-top:.6rem;padding-top:.6rem;
        border-top:1px dashed var(--warm)}
  .rx:not(.rx-read) .sr{position:static;width:auto;height:auto;margin:0 0 .3rem;overflow:visible;
          clip:auto;white-space:normal;display:block;
          font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

  .rx-read th,.rx-read td{padding:.3rem .25rem;font-size:.88rem}
  .rx-read tbody th{width:2.6rem}

  /* T/N: the tick columns are the one thing a thumb has to hit precisely. */
  .tn th,.tn td{padding:.35rem .3rem}
  .tn tbody th{font-size:.88rem}
  .tn thead th.tn-col,.tn td.tn-col{width:3rem}
  .tn td.tn-col label{padding:.7rem 0}
  .tn input[type=radio]{width:1.3rem;height:1.3rem}

  /* Finger-sized targets. Keyed to viewport width rather than to
     `@media (hover:none)` alone: a 390px viewport is a phone in practice, and
     width is something a desktop browser can actually be made to reproduce -
     a pointer-type query cannot, so it would ship untested. */
  .btn,.adder summary,.brand,.nav-links a,.fnav a,
  .panel-footer a,.login-back a,.strong-link,.data a{
        min-height:44px;display:inline-flex;align-items:center}
  .btn{justify-content:center;padding:.9rem 1.5rem}
  .btn-sm{padding:.6rem 1rem}
  .adder summary{padding:.5rem 0}
  .data td[data-label="Pacjent"]{padding-bottom:.2rem}
}

/* iOS Safari zooms the whole page in whenever a focused input's text is under
   16px, and then leaves it zoomed. That single pixel is the difference between
   a form that behaves and one that fights the user on every field. */
@media (max-width:900px){
  input,select,textarea{font-size:16px}
}

/* A pointer that cannot hover is a finger: give it room, and stop relying on
   :hover to reveal anything. */
/* The smallest phones still in use (iPhone SE, 320px). The brand wordmarks are
   set with wide letter-spacing and will not shrink, so two columns push past
   the edge here - one column is the only honest fit. */
@media (max-width:380px){
  .brands{grid-template-columns:1fr}
  .brand-tile{min-width:0}
  .stat{flex:1 1 100%}
  .page-head h1{font-size:1.45rem}
  /* The panel header is a wordmark and a logout button on one line; at 320px
     they are 9px too wide together, and the header is the one row that must
     not wrap. */
  .panel-header .logo-word{font-size:.82rem}
  .panel-header .btn-sm{padding:.6rem .75rem;font-size:.6rem}
}

/* Touch sizing lives in the width query above. This one only undoes effects
   that need a hover to be discoverable, and would otherwise stick on first tap. */
@media (hover:none){
  .brand-tile:hover{background:var(--paper)}
  .adder summary:hover{color:var(--gold)}
}

/* --- panel: booking picker and a single visit --------------------------- */
.cal-compact{max-width:340px}
.cal-compact .cal-cell{font-size:.78rem}
.cal-manage{text-align:right;width:1%;white-space:nowrap}
.visit-facts{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.4rem;margin:0}
.visit-facts dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
.visit-facts dd{margin:0}
.visit-manage h2{margin-bottom:1rem}
.visit-action-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem}
.visit-manage .row-form{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.visit-manage .row-form label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.visit-manage .row-form select{width:auto;flex:0 1 320px}
.booking-call-hint{font-size:.85rem;color:var(--muted);margin:.4rem 0 1rem}
.booking-call-hint a{color:var(--ink);font-weight:500;white-space:nowrap}