/* ═══════════════════════════════════════════════════════════════════
   TERMINA — LAYOUT

   What this file carries: layout, sizing, touch targets, focus rings
   and mobile breakpoints. Colour is settled by podoba.css, which loads
   after it and overrides everything chromatic here.

   Why the colours remain even though most are overridden: removing them
   was attempted — 41 tokens and 215 declarations — and screenshots of
   twelve pages compared before and after. Sign-in and the provider
   dashboard shifted by 74 %, the landing page by 15 %, the legal pages
   by 2–4 %. Some of these rules are therefore still load-bearing.
   Cleaning them is a per-rule job with a measurement, not a single
   sweep through the file.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* casing and dials */
  --ohisje:    #0E1220;   /* the instrument's outer casing */
  --noc:       #141829;   /* dial */
  --plosca:    #1A1F33;   /* raised panel */
  --plosca-hi: #212741;   /* panel under emphasis */

  /* medenina in slonovina */
  --medenina:  #E8A05C;   /* svit — medenina, Signal */
  --medenina-d:#C07F42;   /* patinirana medenina */
  --slonovina: #F7DFBE;   /* glow — ivory dial */
  --mrak:      #5B4C92;   /* the system's violet shadow */
  --mrak-d:    #493B7C;

  /* gravura */
  --gravura:   rgba(247,223,190,.16);
  --gravura-2: rgba(247,223,190,.09);
  --meja:      rgba(247,223,190,.14);
  --meja2:     rgba(247,223,190,.09);
  /* recess: the ground of input fields. The name existed in DESIGN.md
     while the token did not, so each field carried its own literal. */
  --vdolbina:  var(--papir-2);
  --vdolbina-2:var(--papir-2);
  --medenina-nisa:var(--tan-mehki);

  /* pisave */
  --telo:      #B9B5CC;
  /* Measured on rendered pixels, not read from CSS. On a phone the
     brightest patch of the blurred background lifts the ground to
     rgb(49,44,53); this value holds 4.83:1 there and 6.61:1 on a calm
     ground. A review that reads only the stylesheet cannot see this,
     because a colour in CSS knows nothing of the layer beneath it. */
  --telo-2:    #9B97B0;
  --mleko:     #141829;   /* legacy name: now the dial */
  --sij:       #F7DFBE;
  --kamen:     #9B97B0;   /* isto merjenje kot --telo-2: opombe, oznake polj, »← Najdi« */
  --kamen-d:   #B9B5CC;
  --noc-telo:  #B9B5CC;
  --napaka:    #E0937A;
  --svit:      #E8A05C;
  --shadow:    none;

  /* ── one typeface ─────────────────────────────────────────────────
     One family, with hierarchy coming from weight and size. Archivo is
     chosen because it is variable (400–700 from a single file), carries
     tabular figures for hours and prices, and stays legible at 12 px on
     a phone in the evening.

     The alternative was two families and 39 distinct size steps,
     including 9.5 / 10 / 10.5 / 11 / 11.5 px — differences the eye
     cannot separate but the system still has to maintain. */
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"Archivo",system-ui,-apple-system,sans-serif;
  --num:"Archivo",ui-monospace,monospace;

  /* ── the scale: nine steps ───────────────────────────────────────
     Each step has a job. When new text finds no step to sit on, the
     first question is whether the role is genuinely new. */
  --t-micro:  11px;    /* verzalne mikro oznake s sledjo */
  --t-xs:     12.5px;  /* meta podatki, datumi, ure */
  --t-sm:     13.5px;  /* opombe, drugotno besedilo */
  --t-md:     15px;    /* kontrole, vnosna polja, navigacija */
  --t-base:   17px;    /* branje */
  --t-lg:     20px;    /* naslovi kartic in postavk */
  --t-xl:     24px;    /* naslovi razdelkov */
  --t-2xl:    clamp(27px,4vw,34px);  /* page and panel headings */
  --t-3xl:    clamp(34px,5vw,46px);  /* h1 podstrani */
  --t-display:clamp(40px,6vw,64px);  /* junak */


  /* ── tokens inherited from earlier identities ────────────────────
     The rules that read them survived because they were layout fixes
     rather than colour: the page shell, the provider profile, the
     country picker, the sign-in card. They are given values in this
     identity's language so they do not dangle.

     Radii: the 12 px ceiling is the instrument's signature. Oval is the
     exception for chips, which are labels rather than panels. */
  --r-drobno:  6px;
  --r-polje:   6px;
  --r-kartica: 12px;
  --r-velika:  12px;
  --r-oval:    999px;

  /* Surfaces and borders under names from later identities. */
  --kartica:   var(--plosca);
  --papir-2:   #12172A;   /* recess: an input field, darker than the panel */
  --rob:       var(--gravura);
  --rob-2:     var(--gravura-2);
  /* A control's border must reach 3:1. At .34 ivory over the casing
     composes to rgb(93,88,86) and measures 2.66:1, below threshold; at
     .42 it measures 3.41 on the casing and 3.36 on a panel. Opacity is
     never estimated: compose it with the ground, then measure. */
  --rob-k:     rgba(247,223,190,.42);
  --na-tanu:   var(--noc);             /* besedilo na medenini */

  /* The header is sticky with a blur behind it; the colour is the casing
     at 92 %, not paper. A paper-coloured fallback drew a light band
     above the dark hero. */
  --nav-bg:    rgba(14,18,32,.92);

  /* Brass tints: niche, glow and trace. */
  --tan-mehki: rgba(232,160,92,.14);
  --tan-sij:   rgba(232,160,92,.20);
  --tan-sled:  rgba(91,76,146,.12);

  /* gravirana stopinjska skala — podpis sveta */
  --skala: repeating-linear-gradient(90deg,
            var(--gravura) 0 1px, transparent 1px 12px);
  --skala-gosta: repeating-linear-gradient(90deg,
            var(--gravura-2) 0 1px, transparent 1px 6px);

  /* Particles of the sphere around the wordmark, and the dust around it.
     Values are written as "r,g,b" because canvas composes them with its own
     opacity. Light in the dark world, blue in the light one: ivory is
     invisible on paper and grey would look dirty. */
  --pika:          247,223,190;
  --pika-poudarek: 232,160,92;
  --prah:          rgba(247,223,190,.55);
  --prah-topli:    rgba(232,160,92,.6);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE

   The same instrument in a different room. Surfaces do not merely
   brighten — they exchange roles.

   What holds and why:
   • One saturated colour. Brass stays brass but takes a patina
     (#8A4E14). The light #E8A05C measures 1.9:1 on an ivory ground and
     cannot carry text; the patinated value measures 5.62:1 on the
     casing and 6.23:1 on a panel, and as a surface it carries light
     text at 6.23. The button therefore inverts here: a dark brass tile
     with an ivory label rather than a light tile with a dark one.
   • A card is still not separated by lightness (1.11:1 against the
     casing; 1.14 in the dark). The engraving separates it. That is the
     instrument's signature, and a soft shadow would destroy it faster
     than anything else.
   • No shadows here either.

   What had to be reconsidered rather than carried across:
   • Control borders. Ivory holds at .42 in the dark; ink at the same
     value measures 2.50–2.63:1 here and falls below the 3:1 threshold.
     Only .52 holds 3.27–3.53. Opacity is not carried between worlds.
   • #5B4C92 reaches 5.6:1 on light and would be permitted as text. It
     stays forbidden: one saturated colour is a rule of the brand, not a
     consequence of contrast.

   The mode follows the device setting. `data-theme` on <html> overrides
   it if a switch is ever added. */
/* Dark mode is gone: the world is paper only. The dark tokens remain in
   this file as a base, but [data-theme="light"] on every page's <html>
   always overrides them. */
:root{color-scheme:light}

@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ohisje:    #F3ECE0;   /* the paper the instrument rests on */
    --noc:       #EADFCC;   /* dial */
    --plosca:    #FCF8F0;   /* raised panel */
    --plosca-hi: #FFFDF9;
    --papir-2:   #EFE6D6;   /* recess: an input field, darker than the panel */

    --medenina:  #8A4E14;
    --medenina-d:#6B3A0C;
    --svit:      #8A4E14;
    --slonovina: #171B2E;   /* the role stays "heading"; the substance is ink */
    --sij:       #171B2E;   /* likewise: --sij was always ivory */
    --mleko:     #FCF8F0;
    --na-tanu:   #FCF8F0;   /* besedilo na patinirani medenini — 6,23:1 */

    --telo:      #3D3A52;   /* 9.29:1 on the casing */
    --telo-2:    #5A5670;   /* 5.96:1 on the casing, 5.31 on the dial */
    --kamen:     #5A5670;
    --kamen-d:   #3D3A52;
    --noc-telo:  #3D3A52;
    --napaka:    #A8391A;   /* 5,48:1 */

    --gravura:   rgba(23,27,46,.18);
    --gravura-2: rgba(23,27,46,.10);
    --meja:      rgba(23,27,46,.16);
    --meja2:     rgba(23,27,46,.10);
    --rob-k:     rgba(23,27,46,.52);

    --nav-bg:    rgba(243,236,224,.92);
    --tan-mehki: rgba(138,78,20,.12);
    --tan-sij:   rgba(138,78,20,.18);
    --tan-sled:  rgba(91,76,146,.10);
    --pika:92,107,153; --pika-poudarek:138,78,20;
    --prah:rgba(23,27,46,.30); --prah-topli:rgba(138,78,20,.40);
  }
}

/* An explicit choice overrides the device. The values are identical and
   repeated because CSS has no inheritance between selectors. */
:root[data-theme="light"]{
  --ohisje:#F3ECE0; --noc:#EADFCC; --plosca:#FCF8F0; --plosca-hi:#FFFDF9;
  --papir-2:#EFE6D6;
  --medenina:#8A4E14; --medenina-d:#6B3A0C; --svit:#8A4E14;
  --slonovina:#171B2E; --sij:#171B2E; --mleko:#FCF8F0; --na-tanu:#FCF8F0;
  --telo:#3D3A52; --telo-2:#5A5670; --kamen:#5A5670; --kamen-d:#3D3A52;
  --noc-telo:#3D3A52; --napaka:#A8391A;
  --gravura:rgba(23,27,46,.18); --gravura-2:rgba(23,27,46,.10);
  --meja:rgba(23,27,46,.16); --meja2:rgba(23,27,46,.10);
  --rob-k:rgba(23,27,46,.52);
  --nav-bg:rgba(243,236,224,.92);
  --tan-mehki:rgba(138,78,20,.12); --tan-sij:rgba(138,78,20,.18);
  --tan-sled:rgba(91,76,146,.10);
    --pika:92,107,153; --pika-poudarek:138,78,20;
    --prah:rgba(23,27,46,.30); --prah-topli:rgba(138,78,20,.40);
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}

html{background:var(--ohisje)}
body{
  background:var(--ohisje);
  color:var(--telo);
  font-family:var(--body);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* ── typography: one typeface, hierarchy from weight ───────────────
   A serif carried character on its own; a sans at 400 in the same place
   reads flat. Headings therefore run at 600, and tracking closes as
   size grows — the larger the letter, the less air it needs. */
h1,h2,h3,.card h2,.stat .v,.fpost .nm,.post .nm,.flist .nm,.list .t,
.ty .serif,.avatar,.pav,.fav,.appt .svc{
  font-family:var(--display);
  font-weight:600;
  color:var(--slonovina);
  letter-spacing:-.012em;
}
h1{letter-spacing:-.028em}
h2{letter-spacing:-.02em}
h3,.card h2,.fpost .nm,.post .nm,.flist .nm,.list .t,.appt .svc{
  letter-spacing:-.014em;
}
/* A heading is one colour. An emphasised word stays italic and does not
   change colour: a two-colour heading reads as two voices in one
   sentence. */
h1 em,h2 em{font-style:italic;color:inherit}
p,.lead,.lede,.sub,.auth-lead{color:var(--telo)}
a{color:inherit}
strong,b{color:var(--slonovina);font-weight:600}

/* data: tabular figures in brass — hours, prices, distances */
.mono,.crow .mono,.time,.cpick .v,.appt .dm,.appt .hm,.list .m,
.fpost .dt,.post .pd,.publine a.link,.stat .l,.subhead,.pr{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.cpick .v,.pr,.appt .hm{color:var(--medenina)}

/* overlines and section numbers */
.eyebrow,.kick,.cm-kick,.auth-kick,.pk .num,.plan-num{display:none}

/* ── casing: header and footer ─────────────────────────────────────── */
nav{
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gravura);
  position:relative;
}
nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--skala);opacity:.7;
}
nav a,nav .r,.lnk,nav a.back{color:var(--telo-2)}
.lnk:hover,nav a:hover,nav a.back:hover,nav .r a:hover{color:var(--slonovina)}
/* The back control is a standalone control rather than a link inside a
   sentence, so it needs a touch target. Measured, it was 47×22 px. */
nav a.back{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px}
footer{background:var(--ohisje);border-top:1px solid var(--gravura)}
footer::before{content:"";display:block;height:3px;background:var(--skala);opacity:.6;
  margin-bottom:38px}

/* Izbirnik jezika je odslej pilula s kratico iz i18n.js (.jezik-pilula);
   fokusno obrobo in mere nosi njen vgrajeni slog. */

/* ── panels (cards) ────────────────────────────────────────────────── */
.card,.izpostavek,.izbira,.stat,.pplan,.fpost,.lc,.ty,.s,.onboard,.publine,.auth-card,.cm-c{
  background:var(--plosca);
  border:1px solid var(--gravura);
  border-radius:var(--r-drobno);
  color:var(--telo);
}
/* panels carry the engraving in their border, not in an applied band */
.card,.pplan,.fpost,.onboard{position:relative}
.card h2 .ic,.onboard h2 .ic{
  background:var(--tan-mehki);color:var(--medenina);
  border:1px solid var(--gravura);border-radius:50%;
}
.publine{background:var(--plosca-hi);color:var(--telo)}
.publine a.view{color:var(--slonovina)}
.publine a.link{color:var(--medenina)}

/* emphasised panel */
.card.hi,.onboard{background:var(--plosca-hi)}

/* ── controls: brass tiles ──────────────────────────────────────────
   The oval button belongs to a consumer-app register. This register is
   an instrument, and an instrument has no pills — it has tiles with a
   6 px radius. */
.btn{border-radius:var(--r-drobno);transition:transform .18s cubic-bezier(.2,.6,.3,1),
  background .18s,border-color .18s,color .18s}
.btn-p{
  background:var(--medenina);color:var(--na-tanu);font-weight:600;
  border:1px solid var(--medenina);
}
.btn-p:hover{background:var(--slonovina);border-color:var(--slonovina);color:var(--na-tanu)}
.btn-p:disabled{background:var(--medenina-d);border-color:var(--medenina-d);opacity:.6}
.btn-s{border-color:var(--gravura);color:var(--slonovina);background:transparent}
.btn-s:hover{border-color:var(--medenina);color:var(--medenina)}
.btn-link,.steps .go{color:var(--medenina)}
.btn-link:hover,.steps .go:hover{color:var(--slonovina)}
.hero-c .btn-s{border-color:var(--gravura);color:var(--slonovina)}

/* vnosna polja: gravirani vdolbini */
input,select,textarea{
  background:var(--papir-2);
  border:1px solid var(--gravura);
  color:var(--slonovina);
  border-radius:var(--r-drobno);
}
input::placeholder,textarea::placeholder{color:var(--telo-2)}
/* Focus: the border takes colour and the ring stays. An outline:none
   here would win on specificity (0,1,1) over the :focus-visible rule
   below it (0,1,0) and leave the control with no focus indicator at
   all. */
input:focus,textarea:focus,select:focus{border-color:var(--medenina)}
:focus-visible{outline:2px solid var(--medenina);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--medenina);outline-offset:3px}
label.fld,label.fld span,.fld{color:var(--telo-2)}

/* tabs and chips */
.tab,.chip{background:transparent;border:1px solid var(--gravura);color:var(--telo);
  border-radius:var(--r-drobno)}
.tab:hover,.chip:hover{border-color:var(--medenina-d);color:var(--slonovina)}
.tab.on,.chip.on{background:var(--medenina);border-color:var(--medenina);
  color:var(--na-tanu);font-weight:600}

/* time chips = positions on the dial */
.time,.times .time{background:var(--papir-2);border:1px solid var(--gravura);
  color:var(--telo);border-radius:var(--r-drobno)}
.time:hover{border-color:var(--medenina-d);color:var(--slonovina)}
.time.sel{background:var(--medenina);border-color:var(--medenina);color:var(--na-tanu);font-weight:600}
.time.gone{color:var(--telo-2);opacity:.45}

/* rules = engravings */
hr,.crule,.rule{background:var(--gravura);border-color:var(--gravura)}
.list li,.appt,.flist li,.post,.avday,.steps li{border-color:var(--gravura-2)}

/* ── hero: the centre of the system ────────────────────────────────── */
header{background:var(--ohisje);color:var(--telo)}
.hero-c h1{color:var(--slonovina);max-width:19ch}
.hero-c .lede{color:var(--telo)}

/* The degree scale on the hero rings is gone: the icons move freely rather
   than along a dial. The scale remains where it is a signature rather than a
   track — below the header and above the footer. */
/* provider bubbles = bodies on the arm */
.bub .ic{
  background:var(--plosca);
  border:1px solid var(--gravura);
  box-shadow:inset 0 0 0 3px rgba(28,19,13,.85);
}
.bub .ic svg{stroke:var(--medenina)}

/* The core carries no glow. Two gradients used to stand here — a dark scrim
   under the wordmark and a warm ring around it — and both were shadow drawn
   as a gradient. On paper the scrim became a black smear across the logo.
   Depth is carried by the particles and by nothing else.

   Note the cascade: postavitev.css loads after styles.css and overrides it,
   so a fix applied there alone has no effect. */

/* ── plans: three dials ────────────────────────────────────────────── */
.pplan{background:var(--plosca)}
.pplan.hi{background:var(--plosca-hi);
  border-color:var(--medenina-d)}
.pplan h3{color:var(--slonovina)}
.pplan .pdesc,.pplan li{color:var(--telo)}
.pplan li::before,.pplan ul li::marker{color:var(--medenina)}
.bill-toggle{border:1px solid var(--gravura);background:var(--plosca)}
.bill-toggle button{color:var(--telo)}
.bill-toggle button.on{background:var(--medenina);color:var(--na-tanu);font-weight:600}
.bill-note,.plan-foot,.plan-dodatki{color:var(--telo-2)}

/* ── skupnost in seznami ──────────────────────────────────────────── */
.pav,.fav,.avatar{background:var(--plosca-hi);border:1px solid var(--gravura);
  color:var(--medenina)}
.fpost .body,.post .pb{color:var(--telo)}
.fpost .cat,.post .cat,.dt,.pd{color:var(--telo-2)}
.empty,.note{color:var(--telo-2)}
.note.err{color:var(--napaka)}
.note.ok{color:var(--medenina)}
.pimg img,.fpost .pimg img{border-color:var(--gravura)}

/* ── country picker: a grid of dials ───────────────────────────────── */
/* The ground is a plain surface for the grid to stand on. Two glowing
   gradients stood here and, once the particle sphere was removed, read
   as light coming from nowhere. */
#country-modal{background:var(--ohisje)}
.cm-c{background:var(--plosca)}
.cm-c .cc{color:var(--medenina)}
.cm-c.hint{border-color:var(--medenina);background:var(--tan-mehki)}

/* ── prijava ──────────────────────────────────────────────────────── */
/* Oder prijave je od zdaj v prijava.css in ima tam ENEGA lastnika. Kar
   ostaja tu, govori sceni izbirnika države na naslovnici (.cm-scene
   .auth-scene), ki isti razred deli zaradi krogle iz delcev. */
/* The particle canvas must take no part in layout. In the document flow
   every frame grew it by the height of the scene (~683 px per frame,
   measured at 22,005 px after six seconds), and the country picker
   became a blank page for a first-time visitor, with its heading and
   buttons some twenty screens below the fold. */
.auth-scene{position:relative}
.auth-scene .auth-orbs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.auth-card{background:var(--plosca);border-color:var(--gravura)}
.auth-card input{background:var(--papir-2)}
.st .dot{background:var(--noc);border-color:var(--gravura)}
.st.cur .dot,.st.done .dot{border-color:var(--medenina)}

/* ── sections: an engraved scale as the divider ────────────────────── */
section+section{border-top:1px solid var(--gravura-2)}
main>section:first-of-type{border-top:none}
/* Črta ločuje dva razdelka. Kadar je prejšnji skrit (prijava in profil sta
   na moj.html en za drugim, viden je vedno le eden), ni česa ločevati in
   črta obvisi nad prvo stvarjo na zaslonu. */
section[hidden]+section{border-top:none}

/* ── the arcs become dial niches ───────────────────────────────────── */
.arch .cap{
  background:var(--plosca-hi);
  border:1px solid var(--gravura);
  position:relative;overflow:hidden;
}
.arch:hover .cap{background:var(--plosca-hi);
  border-color:var(--medenina-d)}
.arch .cap svg{stroke:var(--medenina)}
.arch h3{color:var(--slonovina)}
.arch p{color:var(--telo)}

/* ── uvodni zaslon ────────────────────────────────────────────────── */
#intro{background:var(--ohisje)}

/* ── drobno ───────────────────────────────────────────────────────── */
::selection{background:var(--tan-mehki);color:var(--slonovina)}
code{background:var(--plosca-hi);color:var(--medenina);border-radius:var(--r-drobno)}
.rule-no{color:var(--napaka)}
.skip{background:var(--medenina);color:var(--na-tanu)}

@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
}

/* popravki po pregledu ─────────────────────────────────────────────── */
.cpick{border-top-color:var(--medenina-d)}
.cpick .k{color:var(--slonovina)}
.card .cap,.crow span:first-child,.crow{color:var(--telo)}
.card .ttl{color:var(--telo-2)}
/* section divider: an engraved scale rather than a bare rule */
section+section{border-top:1px solid var(--gravura-2)}
.kako-grid{align-items:start}
.kako-grid>div:first-child{padding-top:6px}
/* category filters and avatar initials in brass */
.cats button,.cat{background:transparent;border:1px solid var(--gravura);color:var(--telo);border-radius:var(--r-drobno)}
.cats button:hover,.cat:hover{border-color:var(--medenina-d);color:var(--slonovina)}
.cats button.on,.cat.on{background:var(--medenina);border-color:var(--medenina);color:var(--na-tanu);font-weight:600}
.pcard .pav,.post .pav,.fpost .pav,.flist .fav,.avatar{color:var(--medenina);background:var(--plosca-hi)}
/* page-level id rules that outranked the theme */
#auth h1,#acc h1,#dash h1,#auth-title{color:var(--slonovina)}
.price,.price small{color:var(--medenina)}
.price small{color:var(--telo-2)}
.pplan .price,.pplan.hi .price{color:var(--medenina)}
.pplan .price small{color:var(--telo-2)}

/* step numbers carry the booking sequence — brass, not violet */
.step h2 .n{color:var(--medenina)}
/* koledarska ikona v temnem polju */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.4) opacity(.65);cursor:pointer}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}

/* icons in panel headings: drawn, not glyphs */
.card h2 .ic svg,.onboard h2 .ic svg{width:15px;height:15px;stroke:var(--medenina);
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.card h2 .ic,.onboard h2 .ic{display:grid;place-items:center}

/* ═══ TYPOGRAPHY: roles, not one uniform ratio ══════════════════════
   Leading follows the typeface, the size and the role. Hairlines thin
   optically on a dark ground, so small steps take a touch more weight. */

/* headings — Archivo is variable, so weight is a continuous axis rather
   than a jump between loaded files. Large steps carry 600 and small item
   headings 550: at 15–20 px, 600 is already too heavy and blurs into a
   blot, while 500 does not separate from body text. */
h1,h2,h3,.card h2,.onboard h2,.stat .v,.ty .serif,#auth h1,#cm-title,
.pplan h3,.fpost .nm,.post .nm,.flist .nm,.list .t,.appt .svc,.avatar,.pav,.fav{
  font-optical-sizing:auto;
  font-weight:600;
}
h1{line-height:1.06}
h2{line-height:1.16}
h3,.pplan h3,.card h2,.onboard h2,.fpost .nm,.post .nm,.flist .nm,.list .t,
.appt .svc,#auth h1,#cm-title{line-height:1.25}
.card h2,.onboard h2,.fpost .nm,.post .nm,.flist .nm,.list .t,.appt .svc{
  font-weight:550;
}
.avatar,.pav,.fav{font-weight:600}

/* data — without the leading of prose */
.pplan .price,.stat .v,.cpick .v{line-height:1}
.time,.appt .dm,.appt .hm,.list .m,.fpost .dt,.post .pd,.stat .l,.subhead,
.card .ttl,.publine a.link{line-height:1.25}

/* reading — slightly more tracking on dark, leading sized to the line */
body,p,.lead,.lede,.sub,.pdesc,.auth-lead,.cm-sub{
  letter-spacing:.004em;
}
.lede{line-height:1.6}
p,.lead,.sub,.pdesc,.plan-foot,.plan-dodatki,.pplan li,.fpost .body,.post .pb{line-height:1.6}
.note,.empty,.switch{line-height:1.5}

/* tabular figures only where columns align — never in prose */
body{font-variant-numeric:normal}
.time,.pr,.price,.cpick .v,.appt .dm,.appt .hm,.list .m,.stat .v,
.fpost .dt,.post .pd,.publine a.link,.cm-c .cc,input[type=time],input[type=date]{
  font-variant-numeric:tabular-nums;
}
/* controls are single-line — no prose leading */
.btn,.lnk,.tab,.chip,.cats button,nav .r,.jezik-pilula,.cm-c,.btn-link{line-height:1.2}

/* ocene — risana zvezda namesto znaka iz pisave; medenina, ne mrak */
.ic-star{width:1em;height:1em;display:inline-block;vertical-align:-.13em;
  fill:var(--medenina);stroke:none}
.ic-star.prazna{fill:none;stroke:var(--telo-2);stroke-width:1.7;stroke-linejoin:round}
.rate .star,.stat .v .star,.pcard .rate .star{color:inherit}
.stat .v .ic-star{width:.72em;height:.72em}
/* rating touch target — at least 44 px */
.form .starpick{gap:2px}
.form .starpick button{width:44px;height:44px;display:grid;place-items:center;
  color:var(--telo-2);border-radius:var(--r-drobno)}
.form .starpick button .ic-star{width:26px;height:26px;fill:none;
  stroke:var(--telo-2);stroke-width:1.7;stroke-linejoin:round}
.form .starpick button.on .ic-star{fill:var(--medenina);stroke:none}
.form .starpick button:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}

/* booking steps — a meridian with a brass notch instead of numbering */
.step h2{display:flex;align-items:center;gap:14px}
.step h2 .n{width:11px;height:11px;flex:none;border-radius:50%;
  background:var(--medenina);font-size:0}

/* ── panels ───────────────────────────────────────────────────────────
   .panel and .who-band are ordinary containers. Given an ivory ground
   they would carry ivory headings on ivory — measured at 1.00:1, which
   is to say invisible. A surface token is never a text token. */
.panel,.who-band{
  background:var(--plosca);
  border:1px solid var(--gravura);
  border-radius:var(--r-kartica);
}
.panel h2,.who-band h2{color:var(--slonovina)}
.panel p,.who-band p,.limit p{color:var(--telo)}
.limit{border-bottom-color:var(--gravura)}
.limit b{color:var(--slonovina)}
.who-band b{color:var(--slonovina)}
.who-band .sig{color:var(--slonovina);border-bottom-color:var(--gravura)}
.who-band .role{color:var(--telo-2)}
/* links inside panels: brass on dark holds both contrast and the focus ring */
.panel a,.who-band a{color:var(--medenina)}

/* The focus ring must be brass. Violet measures 2.57:1 on the casing —
   effectively invisible — and DESIGN.md forbids it as a stroke colour. */
.form input:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}

/* ── review form ─────────────────────────────────────────────────────
   Two rules that a theme change can break, and did:

   A token that names a text colour must never become a background. Used
   as a panel ground it put ivory labels on ivory at 2.54:1.

   A field that sets background and colour from two tokens will merge
   them when one token changes meaning: an input whose ground and text
   both resolved dark rendered typed email invisibly. Page-level <style>
   blocks outrank the general input rule, so the fix belongs here. */
.form{background:var(--plosca);border:1px solid var(--gravura)}
.form label{color:var(--telo)}
.form .note{color:var(--telo)}
.form input,.form textarea{
  background:var(--vdolbina);
  border:1px solid var(--gravura);
  color:var(--slonovina);
}
.form input::placeholder,.form textarea::placeholder{color:var(--telo-2)}

/* ── the same fault on other pages ───────────────────────────────────
   Measured across all nine pages. The rules live in page-level <style>
   blocks, where the general rules cannot reach them on specificity.

   Text and ground resolving to the same token left typed text invisible
   in the search field (1.00:1) and in the sign-in card's email and
   password fields (1.08:1). */
.search input,.auth-card input,.auth-card textarea{color:var(--slonovina)}

/*   Violet as a text colour. DESIGN.md permits it only as the system's
     shadow; as text it measures 2.25–2.57:1 wherever it appeared.

     One use is not a fault and stays: the step number, which is hidden
     with font-size:0 and replaced by a brass dot.                    */
/*   Empty states need measuring too. The link inside one measured
     2.11–2.51:1 and only surfaced against an empty database — which is
     exactly what a visitor meets at launch, and what test data hides. */
.demo-note,.fpost .go,.steps .go,.tmpl,.follow-hint a,.ty .mono,
.empty a{color:var(--medenina)}
/* 404: the primary button is brass with dark text, as DESIGN.md
   requires. A violet tile with a white label measures 2.43:1. */
a.btn:not(.btn-p):not(.btn-s):not(.btn-link){
  background:var(--medenina);border:1px solid var(--medenina);color:var(--na-tanu);font-weight:600;
}
a.btn:not(.btn-p):not(.btn-s):not(.btn-link):hover{
  background:var(--slonovina);border-color:var(--slonovina);color:var(--na-tanu);
}
/* ── surfaces that must not read a text token as a ground ────────────
   --sij is ivory, which is to say ink. On dark it happens to look like a
   cream tile; in light mode it would be almost black. A surface is a
   dial. */
.bk .date,.appt .date,.form,.summary{background:var(--noc)}

/* The note needs its own class rather than being embedded in a
   translated paragraph, which leaves it without styling. */
.follow-hint{font-size:var(--t-sm);color:var(--telo-2);margin-top:6px}
.follow-hint a{text-decoration:underline}
.tmpl{background:var(--medenina-nisa);border-color:var(--gravura)}
/* In light mode brass is already patinated (#8A4E14), and the niche
   darkens it further: measured on rendered pixels the note fell to
   4.48:1. A darker brass applies here; the niche stays, because the note
   genuinely is one. */
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .tmpl{color:var(--medenina-d)}
}
:root[data-theme="light"] .tmpl{color:var(--medenina-d)}

/*   Placeholders for data still to be filled in must be legible, or
     they are overlooked at launch. Given a text token as a ground, this
     one measured 1.54:1 on the legal pages.                        */
.ph{background:var(--vdolbina);color:var(--medenina);
    border:1px solid var(--gravura)}

/* ── violet is not a text colour (DESIGN.md) ─────────────────────────
   #5B4C92 measures 2.57:1 on the casing. */
.lnk{color:var(--telo-2)}
/* Header links are a row with a real gap that wraps under pressure.
   Inline with a 3–4 px gap they read as one continuous string and
   overlapped between 761 and 1000 px, measured at −284 px. */
nav .navlinks{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ochip.hl{border-color:var(--medenina-d);color:var(--medenina)}
/* .plan.hi belongs on this list; without it the border falls back to a
   forbidden violet from styles.css — on the community card, which is the
   product's differentiator. */
.card.hi,.pplan.hi,.plan.hi{border-color:var(--medenina-d)}

/* Content stands above ornament. Without its own stacking context,
   .hero-c let the particle sphere draw over the hero buttons on a phone.
   A contrast meter reported 2.60:1 and the number was real, but the
   cause was layer order rather than colour — so the fix is the stacking
   context, not a darker text colour.

   The button keeps its own ground: the sphere is semi-transparent and
   other hero heights (24 languages, different breakpoints) can bring it
   back into contact. */
.hero-c{position:relative;z-index:4}
.hero-c .btn-s{background-color:var(--nav-bg)}

/* ── touch targets ≥ 44 px (a hard brand requirement) ────────────────
   All eighteen failures were too short, not too narrow. */
.btn,.form input,.form button,.bill-toggle button{
  min-height:44px;
}
/* A second measurement pass found five more, again all too short rather
   than too narrow — a pattern that repeats because a control's height is
   inherited from its text. */
#q,.cat,.cats button{min-height:44px}
.cat,.cats button{display:inline-flex;align-items:center}
.bk .btn-link,.appt .btn-link{display:inline-flex;align-items:center;min-height:44px}
.btn{padding-top:12px;padding-bottom:12px}
.time{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
a.skip{min-height:44px;display:inline-flex;align-items:center}
/* Noga notranjih strani: osnovni .wrap živi v styles.css (naslovnica),
   notranje strani je ne nalagajo — noga je stala od roba do roba,
   brez zraka (fotografija lastnice, 29. 8.). Mere zato nosi noga sama;
   :where drži težo pri nič, da naslovnica obdrži svojih 56/72. */
:where(footer){padding:36px 0 48px}
footer .wrap{max-width:1020px;margin:0 auto;padding:0 28px}
footer .fgroup+.fgroup{margin-top:14px}
/* footer: links get a real target and separate into groups */
footer .fgroup{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:6px}
footer .fgroup a{display:inline-flex;align-items:center;min-height:44px;color:var(--telo)}
footer .fgroup a:hover{color:var(--slonovina)}
footer .fhead{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--telo-2);margin-top:22px}
/* the footer logo must not outgrow the page's headings */
footer .brand img{width:150px;height:auto}

/* ── mobile navigation ───────────────────────────────────────────────
   At ≤760 px the links fold into a second header row. Hiding them
   outright removed all five with nothing in their place. */
@media(max-width:760px){
  nav .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;row-gap:4px}
  /* the logo carries .brand only on index.html; elsewhere it is a bare
     <a>, so this targets the header's first child rather than the class */
  nav .brand,nav .wrap>a:first-child{display:inline-flex;align-items:center;min-height:44px}
  /* Pilula s kratico ne potrebuje prostora za celo ime jezika; neviden
     <select> čez njo se razteza sam (inset:0) in ga tu ne širimo. */
  /* short words do not reach 44 px in width without padding */
  .lnk{display:inline-flex !important;align-items:center;justify-content:center;
       min-height:44px;min-width:44px;padding:0 6px;font-size:var(--t-sm)}
  nav .navlinks{order:3;width:100%;display:flex;flex-wrap:wrap;gap:0 18px;
    border-top:1px solid var(--gravura-2);margin-top:4px}
  /* Noga na telefonu: vsaka povezava v svoji vrstici (zahteva lastnice,
     29. 8.) — dve ali tri v isti vrstici so brale kot razmetano. Pisava
     drobnejša od telesa: noga je kazalo, ne vsebina. */
  footer .fgroup{flex-direction:column;align-items:flex-start;gap:0}
  footer .fgroup a{font-size:var(--t-sm)} /* tarča ostane 44 px iz splošnega pravila */
  footer{font-size:var(--t-sm)}
}

/* ── data stays in the same typeface ──────────────────────────────────
   Column alignment comes from font-variant-numeric:tabular-nums, which
   Archivo implements properly. A system monospace would be a second
   family and a different letterform on every operating system — the
   least controlled thing on the page. */
:root{--num:"Archivo",system-ui,-apple-system,sans-serif}

/* ── form state ──────────────────────────────────────────────────────
   .note.err and --napaka exist and are used by the scripts. */
.note.err{color:var(--napaka)}
.note.ok{color:var(--medenina)}
#formStatus:empty{display:none}

/* ── arcs: an engraved sequence rather than a grid of identical cards ─
   DESIGN.md forbids a grid of identical icon-heading-text cards as a
   page's load-bearing structure. These are niches on a shared engraved
   axis. */
.arches{border-top:1px solid var(--gravura);padding-top:0}
.arch{
  border-radius:0;
  border:none;
  border-bottom:1px solid var(--gravura-2);
  background:transparent;
  padding:26px 0 26px 0;
  min-height:0;
}
.arch:last-child{border-bottom:none}
@media(min-width:761px){
  .arches{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
  .arch{border-bottom:1px solid var(--gravura-2)}
  .arch:nth-last-child(-n+2){border-bottom:none}
}
/* A round niche from the same vocabulary as the hero's provider
   bubbles. The previous arc shape carried a retired identity and an
   aspect-ratio that cost roughly 1600 px of height on mobile. */
/* The grid has two columns while a step has three children, so the
   third fell into the first column's second row: the heading flew to the
   right edge and the paragraph squeezed under the icon to a twenty
   character measure. The icon now spans its rows (grid-row 1/-1) and
   heading and text share the second column. */
.arch{display:grid;grid-template-columns:auto minmax(0,1fr);
      column-gap:18px;row-gap:6px;align-items:start}
.arch .cap{
  grid-column:1;grid-row:1 / -1;
  width:52px;height:52px;aspect-ratio:auto;
  border-radius:50%;
  margin-bottom:0;
  box-shadow:inset 0 0 0 3px var(--ohisje);
}
.arch .cap svg{width:22px;height:22px}
.arch h3{grid-column:2;margin:0;align-self:center}
.arch p{grid-column:2;margin:0}
/* The icon is 52 px tall and the heading one line: while the heading
   stands alone it centres in the niche, and once it wraps to two lines it
   aligns to the top. */
@supports(selector(:has(*))){.arch:has(h3){align-items:start}}

/* ═══ PROVIDER PROFILE ═══════════════════════════════════════════════
   The opening scene is the provider's photograph with a plate carrying
   their name lying on it. The photograph is the room a customer walks
   into; the plate tells them where they have arrived. Without a
   photograph an engraved space remains — never an empty rectangle.
   ═══════════════════════════════════════════════════════════════════ */
.pglava{position:relative;margin:0 0 22px;padding-bottom:64px}
.pfoto{
  height:220px;border-radius:var(--r-kartica);overflow:hidden;
  background:var(--plosca);
  background-size:cover;background-position:center;
  border:1px solid var(--gravura);
  position:relative;
}
/* Without a photograph: an engraved scale rather than emptiness. */
.pfoto:not(.ima)::after{
  content:"";position:absolute;inset:0;
  background:var(--skala);opacity:.5;
}
/* With a photograph: a dark carpet toward the bottom so the plate
   stands on something calm. The ink is the casing colour, not a warm
   black from an earlier identity. */
.pfoto.ima::after{
  content:"";position:absolute;inset:0;
  background:rgba(23,15,10,.7);
}
.pkartica{
  position:absolute;left:20px;right:20px;bottom:0;
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:var(--plosca);
  border:1px solid var(--gravura);
  border-radius:var(--r-kartica);
  padding:16px 18px;
}
/* The box shrinks to 56 px and the initial has to shrink with it. Left
   at the size meant for an 84 px box it occupies 0.63 of the box instead
   of 0.42, and the letter touches the circle's edge. */
.pkartica .avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;
  font-size:calc(56px * .42)}
.pkartica .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pkartica h1{font-size:var(--t-2xl);margin:0;line-height:1.15}
.pkartica .meta{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--telo-2);margin-top:3px}
.pkartica .rate{margin:0;white-space:nowrap;color:var(--telo)}
@media(max-width:560px){
  .pglava{padding-bottom:96px}
  .pkartica{left:12px;right:12px;grid-template-columns:auto 1fr;row-gap:10px}
  .pkartica .rate{grid-column:1 / -1}
}

/* quick facts — what a customer checks before deciding */
.pdejstva{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.pdej{
  display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 12px;
  background:var(--kartica);
  border:1px solid var(--gravura-2);
  border-radius:999px;
  font-size:var(--t-sm);color:var(--telo);
}
.pdej svg{width:15px;height:15px;flex:none;
  stroke:var(--medenina);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* services: a horizontal scroller rather than a vertical list. A
   provider has a handful, not a hundred, and a row reads in one look. */
.pstoritve{
  display:flex;gap:10px;overflow-x:auto;
  padding-bottom:6px;margin:0 -4px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.pstoritve li{
  list-style:none;flex:0 0 auto;min-width:180px;max-width:240px;
  scroll-snap-align:start;
  background:var(--plosca);
  border:1px solid var(--gravura);
  border-radius:var(--r-kartica);
  padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.pstoritve li .t{font-family:var(--display);font-size:var(--t-base);color:var(--slonovina);line-height:1.25}
.pstoritve li .m{font-size:var(--t-sm);color:var(--medenina);font-variant-numeric:tabular-nums}
.pstoritve .empty{padding:14px 0}

/* [hidden] has to beat display:flex/grid on these containers, or hiding
   them on error does nothing at all. */
[hidden]{display:none !important}

/* A page that did not reach a profile: no slug, no provider, no link.
   One panel serves all three, because to the visitor they are the same
   thing — what they came for is not here. The buttons are exits, not
   decoration. */
.pstanje{
  background:var(--plosca);
  border:1px solid var(--gravura);
  border-radius:var(--r-kartica);
  padding:40px 32px;
  margin:0 0 28px;
}
/* the modal-title step from DESIGN.md: the panel interrupts the journey
   and explains, which is the same role a modal heading plays */
.pstanje h1{font-size:var(--t-2xl);margin:0 0 10px;line-height:1.2}
.pstanje p{color:var(--telo);margin:0 0 22px;max-width:52ch}
.pstanje .btn{margin-right:8px}

/* Risane ikone v krmilnih elementih. Prej sta »←« in »✓« prihajala iz
   pisave: druga debelina, druga poravnava in v nekaterih jezikih sta
   ostala v prevodu kot besedilo. Enotna poteza 1,7 kot pri .pdej. */
nav a.back,#follow{display:inline-flex;align-items:center;gap:7px}
nav a.back .ic,#follow .ic{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
#follow.on .ic{stroke:var(--medenina)}

/* The orrery background has been removed. The ground is carried by <html>. */

}