/* ──────────────────────────────────────────────────────────────────────────
   Account — sign in, sign up, and the cabinet shell.

   Every colour, radius and font here is a token from tippytaps.css. Nothing in
   this file redefines a token or touches a shared class: the cabinet is a new
   surface on the existing design, not a second design. All rules are scoped
   under .acc- so a change here can never reach the catalog.

   Loaded only on the account pages — see inc/enqueue.php.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Shared bits ────────────────────────────────────────────────────────── */

/* ⚠️ ONE RULE FOR EVERY FIELD, and `select` and `textarea` are named because
   a browser will not style them like a text input on its own: Chrome paints a
   select with its own background and a textarea with its own border, so a rule
   that only said `.acc-inp` left three controls looking like three different
   widgets stacked on top of each other (sQuem, 2026-09-21). */
/* ⚠️ AND `.tt-site` IN FRONT OF ALL OF THEM, WHICH IS THE WHOLE FIX.
   Astra's Customizer prints `input[type="text"],…,select,textarea{…}` inline in
   the <head> — specificity 0,1,1, because a type selector plus an attribute
   beats a lone class. So `.acc-inp` (0,1,0) lost on every text input no matter
   how late account.css loaded, while `select` and `textarea` (0,0,1) lost to
   the class and were styled correctly. THAT is why the three controls looked
   like three widgets: not a missing rule, a rule that only won two times out of
   three (sQuem, twice: "на инпутах стили не поменял, везде все разное").
   `.tt-site .acc-inp` is 0,2,0 and wins outright.

   Astra's inline block also brings `box-shadow`, its own padding and radius,
   and a #046BD2 focus ring — the blue that exists nowhere in our palette. Each
   is overridden below by name; leaving any unset means it keeps showing. */
.tt-site .acc-inp,
.tt-site select.acc-inp,
.tt-site textarea.acc-inp{
  width:100%; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:10px; padding:10px 12px; font-family:var(--sans); font-size:15px;
  line-height:1.5;
  color:var(--ink); font-weight:500; transition:border-color .14s, background .14s;
  box-shadow:none;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.tt-site .acc-inp::placeholder,
.tt-site textarea.acc-inp::placeholder{ color:var(--ink-3, #8a938c); opacity:1; }
.tt-site .acc-inp:hover,
.tt-site select.acc-inp:hover,
.tt-site textarea.acc-inp:hover{ border-color:var(--ink-2); }
/* ⚠️ `border-color` repeated for focus because Astra sets #046BD2 there too,
   in a rule of its own — overriding the resting border does not cover it. */
.tt-site .acc-inp:focus,
.tt-site .acc-inp:focus-visible,
.tt-site select.acc-inp:focus,
.tt-site textarea.acc-inp:focus{
  outline:2px solid var(--accent); outline-offset:1px;
  border-color:var(--accent); box-shadow:none; color:var(--ink);
}
.tt-site textarea.acc-inp{ min-height:96px; line-height:1.55; resize:vertical; }

/* ⚠️ The native arrow is replaced, not hidden, because `appearance:none` above
   removes it and leaves the select looking like a text field. Drawn as a
   background image with 14px of clearance from the right edge — the stock one
   sat flush against the border (sQuem's screenshot). Padding on the right keeps
   a long option from running underneath it. */
.tt-site select.acc-inp{
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a564e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}

/* ⚠️ ASTRA PAINTS EVERY <button> ON THE PAGE. Its Customizer prints
   `.menu-toggle,button,.ast-button,…,input[type="submit"]{...}@media (hover:hover){ ` inline with
   background #046bd2, and `button:hover` with #045cb4 — a colour that exists
   nowhere in our palette. It is a bare type selector, so it loses to any
   class; the reason it kept surfacing is that `.acc-btn` never set a
   background at all, only its variants did. A variant that styles hover alone,
   like `--del`, was Astra's blue at rest. That is the dialog sQuem screenshot.

   So the base class states EVERY property Astra sets — background, border,
   colour, padding, radius — at rest AND on hover. A variant then overrides
   what it wants. `.tt-site` in front puts it at 0,2,0 so nothing inherited can
   win on specificity either.

   The same trap as the form fields, one element type over. If a new control
   is added here and it renders blue, this is why. */
/* ⚠️ BORDER IS NOT IN THE HOVER GROUP, and leaving it there was a real bug:
   `.tt-site .acc-btn:hover` is 0,3,0 and beats `.acc-btn--line:hover` at
   0,2,0, so my own rule stripped the outline variants' border the moment the
   cursor touched them. The button lost 3px of height and the dialog jumped
   (sQuem).

   Shape stays here; only the things Astra actually repaints on hover —
   background, colour, shadow — are restated for the hover states. A variant
   owns its own border. */
.tt-site .acc-btn{
  border:0; border-radius:999px; padding:11px 22px; font-family:var(--sans);
  font-size:15px; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; cursor:pointer; text-decoration:none;
  background:transparent; color:var(--ink); box-shadow:none;
  transition:background .14s, border-color .14s, color .14s;
} }
@media (hover:hover){ .tt-site .acc-btn:hover,
.tt-site .acc-btn:focus,
.tt-site .acc-btn:active{
  background:transparent; color:var(--ink); box-shadow:none; text-decoration:none;
} }

/* ⚠️ Each variant's hover is written `.acc-btn.acc-btn--x:hover` — 0,3,0, the
   same as the base hover group above it. At 0,2,0 the base would have won and
   every filled button would have gone transparent under the cursor. */
.tt-site .acc-btn--pop{ background:var(--pop); color:#fff; }
.tt-site .acc-btn.acc-btn--pop:hover{ background:var(--pop-ink); color:#fff; }
.tt-site .acc-btn--grn{ background:var(--accent); color:#fff; }
.tt-site .acc-btn.acc-btn--grn:hover{ background:var(--accent-ink); color:#fff; }
.tt-site .acc-btn--ink{ background:var(--ink); color:var(--bg); }
.tt-site .acc-btn.acc-btn--ink:hover{ background:var(--forest); color:var(--bg); }
.tt-site .acc-btn--line{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
@media (hover:hover){ .tt-site .acc-btn.acc-btn--line:hover{ background:rgba(24,39,31,.05); border-color:var(--ink); color:var(--ink); } }
/* A destructive action earns red only on hover — red at rest turns every list
   into a wall of warnings. It keeps the outline shape, so it needs the border
   at rest too: without one it was a bare <button> and Astra filled it in. */
.tt-site .acc-btn--del{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.tt-site .acc-btn.acc-btn--del:hover{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.tt-site .acc-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ⚠️ Every <a> here states its colour on hover too: Astra's
   `a:hover{color:#045cb4}` is 0,1,1 and beats a lone class. */
.tt-site .acc-link{ font-size:14px; color:var(--ink-2); }
.tt-site .acc-link:hover{ color:var(--ink); }
.acc-hint{ font-size:13px; color:var(--muted); line-height:1.45; display:block; }
/* ⚠️ A link INSIDE a hint needs its own colour. `.acc-hint` colours the
   paragraph, but an <a> takes Astra's `a{color:#046bd2}` (0,1,1) regardless —
   so "Odhlásiť sa" rendered link-blue against muted grey text (sQuem). Fifth
   time this exact rule has bitten: .acc-fav__lnk, .acc-review__at, .acc-pet__lnk,
   .acc-doc, now this. If it is an <a> inside the cabinet, it needs a colour. */
.tt-site .acc-hint a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.tt-site .acc-hint a:hover{ color:var(--ink); }
/* ⚠️ A hint that is its OWN PARAGRAPH needs its own spacing; one that sits
   inside a field or an empty state does not, because the parent's gap already
   places it. The class was written for the second case and carries no margin at
   all, so a standalone <p> collapsed against whatever was above and below it —
   on /ucet-pristupy/ that put it hard against the header rule and the dashed
   box in one go (sQuem, 2026-09-28).

   ⚠️ Selected by TAG, not by adding a modifier class to ten templates: <p> vs
   <span> is already exactly the distinction being made, and `p.acc-hint` is
   0,1,1 — which it needs to be anyway, since tippytaps.css resets `.tt-site p`
   to margin:0 at that same weight. A lone class would have lost, the way
   .acc-h2 did. */
.tt-site p.acc-hint{ margin:2px 0 28px; }
/* ⚠️ 2px on top, not 14: .acc-head already ends with margin-bottom:26px, and
   the two do NOT collapse — the header is a flex container, so its margin and
   this one add up. 14 measured 40px against the rule, which is further than the
   heading sits from its own text.

   ⚠️ 28 below, not 20. These hints are a sentence or two and WRAP, and at 20 the
   second line sat about as far from the box below it as it did from the first
   line above it — so the gap between two different things read the same as the
   gap inside one thing (sQuem, second report). The line-height is 1.45 on 13px,
   about 19px, and the separation has to beat that clearly to be a separation. */
/* Last thing in a block: the block's own padding ends it. */
.tt-site p.acc-hint:last-child{ margin-bottom:0; }
.acc-sub{ font-size:15px; color:var(--ink-2); margin:8px 0 22px; }
.acc-lbl{ font-size:13px; font-weight:700; display:block; margin-bottom:6px; }

/* Notices. Colour carries meaning, so each one also says what it is in words —
   a green box means nothing to a person who cannot see the green. */
.acc-note{
  display:flex; gap:12px; align-items:flex-start;
  border-radius:var(--radius-sm); padding:13px 16px; margin:18px 0 22px;
  font-size:14.5px; line-height:1.5;
}
/* ⚠️ No top margin when it opens a block. The notice had margin-bottom only,
   which is right where it is the first thing on a page and wrong everywhere
   else — on the pet card it sat flush against the photo row (sQuem). Giving it
   a top margin and removing it for the first child covers both without each
   template having to know. */
.acc-main > .acc-note:first-child,
.acc-head + .acc-note{ margin-top:0; }
.acc-note .ic{ width:18px; height:18px; flex:none; margin-top:2px; }
.acc-note--ok{ background:var(--accent-soft); color:var(--accent-ink); }
.acc-note--err{ background:var(--danger-soft); color:var(--danger); }

/* ── Sign in / sign up ──────────────────────────────────────────────────── */

/* ⚠️ The auth page caps its own width instead of using --wrap-text (1320px).
   That token is sized for PROSE — a heading capped in `ch` with a column of
   text under it. A login form has neither: stretched to 1320 the inputs become
   a metre wide, the submit button turns into a banner, and the eye has to
   travel the whole screen between a label and the field it belongs to.
   440px is about 45 characters — the width a form is comfortable to fill in,
   and close to what the browser's own autofill dropdown expects. */
.acc-auth{ padding:48px 0 72px; }
/* ⚠️ `.tt-site` in the selector deliberately. The theme's own rule is
   `.tt-site .wrap`, the same specificity as `.acc-auth .wrap` — a tie that only
   resolves because account.css happens to load after site.css. One reordered
   enqueue and the form silently goes back to 1320px. Matching the theme's own
   prefix makes this win on its own terms. Padding stays the theme's. */
/* ⚠️ Both selectors, and both matter.
   `.acc-auth` alone catches the section even if the inner wrapper ever loses a
   class; `.tt-site .acc-auth .wrap` beats the theme's own `.tt-site .wrap`,
   which is the same specificity as a bare `.acc-auth .wrap` and would win on
   load order alone — one reordered enqueue and the form silently goes back to
   1320px. */
.tt-site .acc-auth .wrap,
.tt-site .acc-auth .wrap-text{ max-width:500px; }

/* ⚠️ `.tt-site` — see the note on .acc-h2: without it the margin is zero. */
.tt-site .acc-auth__h{
  font-family:var(--disp); font-size:30px; font-weight:700;
  letter-spacing:-.02em; margin:0 0 18px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────
   Two radios drive everything: the bar highlights the checked one, the
   panels show and hide off :checked. No script, so it works on a cached
   page and before anything loads.

   The radios are visually hidden but not display:none — a removed input is
   out of the accessibility tree and out of keyboard reach, which would make
   the tabs unusable without a mouse. Off-screen with focus restored on the
   label is what keeps Tab and arrow keys working. */
.acc-tabs{ position:relative; }
.acc-tabs__r{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.acc-tabs__bar{
  display:flex; gap:4px; padding:4px; margin-bottom:20px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px;
}
.acc-tabs__t{
  flex:1; text-align:center; padding:11px 18px; border-radius:999px;
  font-size:15px; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:.14s; user-select:none;
}
.acc-tabs__t:hover{ color:var(--ink); }
/* The checked radio colours its own label. `~` rather than `+` because the
   bar sits after both inputs, not immediately after one. */
#acc-tab-in:checked  ~ .acc-tabs__bar .acc-tabs__t[for="acc-tab-in"],
#acc-tab-reg:checked ~ .acc-tabs__bar .acc-tabs__t[for="acc-tab-reg"]{
  background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(24,39,31,.10);
}
/* Keyboard focus has to be visible on the LABEL, since the input it belongs
   to is off-screen. */
.acc-tabs__r:focus-visible ~ .acc-tabs__bar .acc-tabs__t{ outline:2px solid var(--accent); outline-offset:2px; }

.acc-tabs__p{ display:none; }
#acc-tab-in:checked  ~ .acc-tabs__p--in,
#acc-tab-reg:checked ~ .acc-tabs__p--reg{ display:block; }

/* The two-column grid that used to hold both forms is gone — see the tabs
   above. Its rules went with it rather than being left to rot: an unused
   selector is a question the next person has to answer. */
.acc-tabs__p{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px 30px;
}
@media (max-width:560px){
  .acc-tabs__p{ padding:24px 18px 28px; }
  .acc-tabs__t{ padding:10px 12px; font-size:14.5px; }
}

.acc-form{ display:flex; flex-direction:column; gap:6px; }
.acc-form label{ font-size:13px; font-weight:700; margin-top:10px; }
.acc-form .acc-btn{ margin-top:18px; }
.acc-form .acc-link{ margin-top:12px; }

/* Role picker. A radio the browser draws cannot be sized or coloured
   consistently across engines, so the native input stays in the accessibility
   tree and the visible box is the label's own body. */
.acc-roles{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.acc-role{ display:block; cursor:pointer; }
.acc-role input{ position:absolute; opacity:0; pointer-events:none; }
.acc-role__body{
  display:block; border:1.5px solid var(--line-strong); border-radius:12px;
  padding:11px 14px; background:var(--surface);
}
.acc-role__body b{ font-size:14.5px; display:block; }
.acc-role__body .m{ font-size:13px; color:var(--muted); display:block; margin-top:2px; line-height:1.4; }
.acc-role input:checked + .acc-role__body{ border-color:var(--accent); background:var(--accent-soft); }
.acc-role input:focus-visible + .acc-role__body{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── Cabinet ────────────────────────────────────────────────────────────── */

.acc-page{ padding:44px 0 72px; }

.acc-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.tt-site .acc-head h1{
  font-family:var(--disp); font-size:clamp(26px,3.4vw,34px); font-weight:700;
  letter-spacing:-.02em; margin:0;
}
.acc-head .acc-link{ margin-left:auto; }

/* ⚠️ 18px below, not 14, and an explicit line-height. A heading's own line
   box already eats a few pixels under the glyphs, so 14 measured on paper
   read as about 8 against a bordered block — sQuem reported the gap twice,
   and the first fix went to the padding INSIDE the box, which was a different
   gap. This is the one between the heading and the block's top edge. */
/* ⚠️ `.tt-site` OR THIS MARGIN DOES NOTHING AT ALL. tippytaps.css carries
   a reset — `.tt-site h1, .tt-site h2, … { margin:0 }` — which is 0,1,1, and a
   lone `.acc-h2` is 0,1,0. So every heading in the cabinet had a zero margin
   whatever this rule said: the gap under a section heading was reported three
   times, the value here was changed twice, and neither change could ever have
   shown. Our own reset, not Astra's.

   Every heading rule in this file needs the prefix for the same reason. */
.tt-site .acc-h2{
  font-family:var(--disp); font-size:20px; font-weight:700; letter-spacing:-.02em;
  line-height:1.25; margin:38px 0 18px;
}
/* ⚠️ `:first-of-type` was killing the gap on EVERY h2 that happened to be the
   first of its kind in its parent — which, after the rail split the page into
   sections, meant "Moje recenzie" lost its top margin and sat welded to the
   block above it (sQuem, 2026-09-21). Scoped to a first child instead, which
   is the case it was actually meant for. */
.tt-site .acc-main > .acc-h2:first-child{ margin-top:0; }

.acc-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:12px; }
.acc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; display:flex; flex-direction:column; gap:7px;
}
.tt-site .acc-card h3{ font-family:var(--disp); font-size:17px; font-weight:700; margin:0; line-height:1.25; }
.acc-card__meta{ font-size:13px; color:var(--muted); margin:0; }
.acc-card__row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }

.acc-btn--sm{ padding:7px 15px; font-size:13.5px; }

.acc-list{ display:flex; flex-direction:column; gap:12px; }
/* ⚠️ 10px, up from 6, and the padding grows with it. At 6 the venue name, the
   stars and the review text read as one block of lines rather than three
   things (sQuem). A card whose parts are different KINDS of content needs more
   air between them than a list of similar lines does. */
.acc-review{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px;
}

/* ⚠️ The delete icon sits at the top right, level with the venue name, the way
   it does on a pet card. It was a full-width text button UNDER the review with
   a paragraph of explanation beneath that — three lines of chrome under two
   lines of content. */
.acc-review__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.acc-review__who{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.acc-review__meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.acc-review__date{ font-size:12.5px; color:var(--muted); }
/* Slightly smaller than on a venue page: here they annotate a line, not head a card. */
.acc-review__meta .tt-stars svg{ width:15px; height:15px; }
/* ⚠️ This one had no colour at all, so it was Astra's link blue at rest as
   well as on hover — the venue's name inside a review card. */
.tt-site .acc-review__at{ font-weight:700; font-size:15px; text-decoration:none; color:var(--ink); }
.tt-site .acc-review__at:hover{ color:var(--accent-ink); }
.acc-review__body{ font-size:14.5px; color:var(--ink-2); line-height:1.55; margin:0; }

/* Empty states carry the same weight as filled ones: a blank area reads as a
   broken page, a sentence reads as "nothing here yet, and that is fine". */
.acc-empty{
  display:flex; gap:14px; align-items:center;
  background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm); padding:20px 22px; color:var(--ink-2);
}
/* ⚠️ The gap goes on the inner column, not on the <b> or the hint. Both are
   already `display:block` and sat flush against each other — the caption read
   as part of the heading (sQuem). Putting it here means any empty state gets
   it, whatever it chooses to put inside.

   ⚠️ 8, not the 5 this started at: the caption's own line-height is about 19px,
   so at 5 the space between the heading and the caption was a quarter of the
   space between two lines OF the caption, and the pair read as one block.
   Reported twice, which is what a number chosen by eye and never measured
   against the line-height gets. */
.acc-empty > div{ display:flex; flex-direction:column; gap:8px; }
.acc-empty__ic{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center;
}
.acc-empty__ic svg{ width:20px; height:20px; }
.acc-empty b{ display:block; font-size:15px; color:var(--ink); }

.acc-note--wait{ background:var(--pop-soft); color:var(--pop-ink); }
.acc-note--wait b{ display:block; margin-bottom:2px; }

/* ── Venue profile ──────────────────────────────────────────────────────── */

/* The edit-boundary pills. Each mode has a colour AND a word: the colour is
   the fast read, the word is what makes it legible to someone who cannot
   separate green from terracotta. */
.acc-pill{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  font-size:11.5px; font-weight:800; padding:3px 10px; white-space:nowrap;
}
.acc-pill--free{ background:var(--accent-soft); color:var(--accent-ink); }
.acc-pill--review{ background:var(--pop-soft); color:var(--pop-ink); }
.acc-pill--lock{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line-strong); }

.acc-legend{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px 14px; margin-bottom:20px;
  font-size:13px; color:var(--ink-2);
}

.acc-form--profile{ gap:0; }
.acc-fld{
  display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line-2);
}
.acc-fld:first-child{ border-top:1px solid var(--line-2); }
.acc-fld__k{ font-size:13px; font-weight:700; grid-column:1; }
.acc-fld .acc-pill{ grid-column:2; grid-row:1; }
.acc-fld__v{ grid-column:1 / -1; }
.acc-fld__k .acc-hint{ font-weight:500; margin-top:2px; }

/* ⚠️ `.tt-site` again: this sits on an `input[type="text"][disabled]`, so it
   is competing with the same Astra rule as every other field. */
.tt-site .acc-inp--ro{
  background:var(--surface-2); color:var(--muted); border-style:dashed;
  font-family:var(--mono); font-size:13px; display:block; cursor:not-allowed;
}

.acc-queued{
  display:block; margin-top:6px; font-size:12.5px; color:var(--pop-ink);
  background:var(--pop-soft); border-radius:9px; padding:7px 10px;
}
.acc-queued b{ font-weight:700; }

.acc-formbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
}

/* More than one venue: a plain row of links, not a select — two or three
   chains is the realistic maximum and a dropdown hides what there is. */
.acc-switch{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }

/* ── The venue overview's tiles ───────────────────────────────────────────
   Three numbers with a link each: today's appointments, reviews waiting for a
   reply, reminders coming up. They exist because moving the profile and the
   reviews onto their own pages left this page with a title and nothing else.

   ⚠️ Site tokens only — --surface, --line, --ink, --pop. An earlier round of
   this cabinet shipped colours that were not the site's and sQuem caught it
   (2026-09-28: "что за странніе цвета?"). */
/* ── The schedule grid ────────────────────────────────────────────────────
   Staff across the top, hours down the side — the shape the mockup draws and
   the one anybody who has used a calendar expects.

   ⚠️ The horizontal scroll lives on THIS box, not on the page. A venue with
   four vets on a phone has to scroll something; scrolling the whole document
   sideways breaks every other element on it. */
.acc-grid{
  display:grid;
  grid-template-columns:58px repeat(var(--tt-cols,1), minmax(150px,1fr));
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); overflow-x:auto; margin-bottom:26px;
}
.acc-grid__hd{
  position:sticky; top:0; z-index:1;
  padding:10px 12px; background:var(--surface-2);
  border-bottom:1px solid var(--line); border-right:1px solid var(--line-2);
  font-size:13px; font-weight:700; white-space:nowrap;
}
.acc-grid__hd--time{ background:var(--surface-2); }
.acc-grid__t{
  padding:7px 8px; text-align:right;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.acc-grid__c{
  min-height:48px; padding:4px;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:3px;
}

/* ⚠️ The time column sticks while the grid scrolls sideways. Without it a
   narrow screen scrolls the hours out of view and every card loses its anchor
   (reported 2026-10-01). */
.acc-grid__t{ position:sticky; left:0; z-index:1; background:var(--surface); }
.acc-grid__hd--time{ position:sticky; left:0; z-index:2; }

/* The week: columns are days, and a day heading is a link into that day. */
.tt-site .acc-grid--week .acc-grid__hd a{ color:inherit; text-decoration:none; }
.tt-site .acc-grid--week .acc-grid__hd a:hover{ color:var(--accent-ink); }
.acc-grid__hd.is-today{ background:var(--accent-soft); color:var(--accent-ink); }
/* A closed day keeps its column so the week keeps its shape. */
.acc-grid__hd.is-shut{ color:var(--muted); }
/* ⚠️ The cells too, not just the heading. A closed Sunday used to look like an
   ordinary empty day for the whole height of the grid, and an empty cell invites
   a click the server then refuses. Striped rather than greyed: grey is what an
   empty-but-open hour already looks like. */
.acc-grid__c.is-shut{
  background:repeating-linear-gradient(135deg,
    rgba(24,39,31,.03), rgba(24,39,31,.03) 5px,
    transparent 5px, transparent 10px);
  cursor:default;
}
.acc-grid__c.is-shut:hover{ background:repeating-linear-gradient(135deg,
    rgba(24,39,31,.03), rgba(24,39,31,.03) 5px,
    transparent 5px, transparent 10px); }
/* 96px a day: at 116 the week needed 864px and scrolled even on a laptop, with
   Sunday cut off inside a 778px column (browser review, 2026-10-07). */
.acc-grid--week{ grid-template-columns:52px repeat(7, minmax(96px,1fr)); }

/* Day / week switch. */
/* ⚠️ A SEGMENTED CONTROL, not two pills in a ring. The first version put a
   999px border around the pair and filled the active half with near-black — a
   lot of weight for a choice between two words, and it fought the stepper
   beside it (sQuem: "визуально, нужно чуть изменить"). Now a soft tray with
   the active segment raised out of it, which is the shape people already know
   from iOS and from Google's own calendar. */
.acc-viewsw{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--surface-2); border-radius:10px; flex:none;
}
.tt-site .acc-viewsw__o{
  padding:5px 14px; border-radius:7px;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-2);
  transition:background .12s ease, color .12s ease;
}
.tt-site .acc-viewsw__o:hover{ color:var(--ink); }
.tt-site .acc-viewsw__o:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
/* The raised segment: a surface above the tray, not a slab of ink. */
.tt-site .acc-viewsw__o.is-on{
  background:var(--surface); color:var(--ink); font-weight:700;
  box-shadow:0 1px 2px rgba(24,39,31,.1);
}

/* One booking. Colour says where it came from, not how urgent it is. */
.acc-slot{
  border-radius:9px; padding:6px 9px; font-size:12.5px; line-height:1.35;
  background:var(--accent-soft); color:var(--accent-ink);
  border-left:3px solid var(--accent);
  display:flex; flex-direction:column; gap:1px;
}
.acc-slot b{ font-size:12px; font-variant-numeric:tabular-nums; }
.acc-slot__who{ font-weight:700; color:var(--ink); font-size:13px; }
.acc-slot__s{ color:var(--ink-2); }
/* ⚠️ A booking that came through the catalog is the one a venue is paying for,
   so it is the one that looks different — the mockup makes the same choice. */
.acc-slot.is-catalog{
  background:var(--pop-soft); color:var(--pop-ink); border-left-color:var(--pop);
}
.acc-slot__src{ font-size:11px; font-weight:700; text-transform:lowercase; }
/* Moved today: hatched, so a glance finds what changed. */
.acc-slot.is-moved{
  background:repeating-linear-gradient(135deg,var(--pop-soft),var(--pop-soft) 6px,transparent 6px,transparent 12px);
}
.acc-slot.is-asked{ border-left-style:dashed; }

/* ── Clicking and dragging a booking ──────────────────────────────────────
   ⚠️ The pointer is the only thing that says a card is clickable. Everything
   else about it — colour, border — already carries meaning (where the booking
   came from, whether it moved), and adding a fourth signal would collide. */
.acc-slot{ cursor:pointer; }
.acc-slot:hover{ filter:brightness(.97); }
.acc-slot.is-dragging{ opacity:.4; }
/* The cell being dragged over. A dashed outline rather than a fill, so the
   bookings already in that hour stay readable underneath. */
.acc-grid__c.is-over{ outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft); }
/* An empty cell invites a booking, but quietly — a grid of hover states is
   noise on a day that is mostly empty. */
.acc-grid__c:hover{ background:rgba(24,39,31,.02); }

.acc-tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px; margin:0 0 26px;
}
/* ⚠️ `.tt-site` on every rule that sets a link property. Astra's Customizer CSS
   carries `a{color:#046bd2}` and `a:hover{color:#045cb4}` at 0,1,1, which beats
   a lone class at 0,1,0 — this is the same trap that made the fields and the
   headings look wrong twice. */
.tt-site .acc-tile{
  display:flex; flex-direction:column; gap:2px; padding:14px 16px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--ink);
}
.tt-site .acc-tile:hover{ border-color:var(--line-strong); color:var(--ink); }
.tt-site .acc-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acc-tile__n{ font-size:26px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.acc-tile__l{ font-size:13px; font-weight:600; color:var(--ink-2); }
/* Something is actually waiting. Only the number turns, not the whole tile: a
   coloured card reads as an error, and an unanswered review is not one. */
.tt-site .acc-tile--warn .acc-tile__n{ color:var(--pop); }
.tt-site .acc-tile--warn{ border-color:var(--pop-soft); }
.tt-site .acc-switch__it{
  padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:700;
  text-decoration:none; border:1.5px solid var(--line-strong); color:var(--ink);
}
@media (hover:hover){ .tt-site .acc-switch__it:hover{ color:var(--ink); border-color:var(--ink); } }
@media (hover:hover){ .tt-site .acc-switch__it.is-on,
.tt-site .acc-switch__it.is-on:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); } }

/* ── Reviews in the cabinet ─────────────────────────────────────────────── */

.acc-review__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.acc-stars{ margin-left:auto; color:var(--star); letter-spacing:1px; font-size:14px; }

.acc-reply{
  background:var(--surface-2); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:11px 14px; font-size:14px; color:var(--ink-2);
}
.acc-reply b{ color:var(--ink); font-size:13px; display:block; margin-bottom:3px; }

/* ── Editing a published reply ────────────────────────────────────────────
   The editor lives behind a pencil, the way the pet card's does. Before this
   a textarea sat under the reply prefilled with it, so the same sentence
   showed twice — published above, in a box below (sQuem). */
/* ⚠️ A <summary> draws a disclosure triangle by default, and browsers disagree
   about how: `list-style` covers Firefox and Chrome, the ::-webkit- pseudo
   covers older Safari. Missing either leaves a stray marker beside the pencil,
   which reads as a rendering fault. */
.acc-replyedit > summary{ display:inline-flex; list-style:none; cursor:pointer; }
.acc-replyedit > summary::-webkit-details-marker{ display:none; }
.acc-replyedit > summary::marker{ content:""; }
.acc-reply__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.acc-reply__hd b{ margin-bottom:0; }
.acc-reply__body{ margin-top:3px; }
/* ⚠️ The form is only there when the details is open. Without this it renders
   under every reply and the old double-text problem comes straight back. */
/* ⚠️ The form is a SIBLING of the details now, not a child — the reply text has
   to stay readable while the editor is shut, and anything inside a <details>
   after its summary is hidden when closed. So the parent reacts to the details'
   state with :has(), and the form follows.

   ⚠️ A browser without :has() support shows the form permanently, which is the
   old behaviour rather than a broken one: still submittable, just not tidy. */
.acc-reply .acc-replyform{ display:none; }
.acc-reply:has(.acc-replyedit[open]) .acc-replyform{
  display:flex; flex-direction:column; gap:8px; margin-top:11px;
}
/* The pencil is quiet until the reply is hovered or the control focused. */
.acc-replyedit > summary .acc-ib{ opacity:.55; }
.acc-replyedit:hover > summary .acc-ib,
.acc-replyedit > summary:focus-visible .acc-ib{ opacity:1; }
.acc-edited{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin-left:7px;
}

.acc-replyform{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.acc-replyform .acc-btn{ margin-top:0; }

/* ── Pets ───────────────────────────────────────────────────────────────── */

.acc-card--pet{ flex-direction:row; align-items:center; gap:13px; padding:13px 15px; }
.acc-card--pet > div{ min-width:0; flex:1; }
.tt-site .acc-card--pet h3{ margin:0; }
.acc-card--pet .acc-card__meta{ margin:2px 0 0; }
/* ⚠️ `padding-top:0` and no auto margin: the row is a flex child of a row,
   not a footer. With the card's own column padding it was pushing the buttons
   a line lower than the name they belong to. */
.acc-card--pet .acc-card__row{ margin:0; padding:0; flex:none; gap:6px; }

/* The add-a-pet block, and the list above it, need the same rhythm as
   everything else in the main column. */
.acc-pet__ic{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center;
}
.acc-pet__ic svg{ width:22px; height:22px; }

/* ⚠️ margin-BOTTOM as well as top, and this is the gap sQuem kept reporting.
   The block had only a margin-top, so the section heading that follows it
   ("Moje recenzie") supplied the whole gap from its own margin-top — and an
   `h2` margin against a bordered box does not read as a section break, it
   reads as the two blocks touching. Both sides now state their own spacing. */
.acc-add{
  margin-top:14px; margin-bottom:26px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:4px 18px 4px;
}
.acc-add summary{
  cursor:pointer; font-weight:700; font-size:14.5px; padding:12px 0;
  list-style:none;
}
.acc-add summary::-webkit-details-marker{ display:none; }
.acc-add summary::before{ content:"+ "; color:var(--accent-ink); font-weight:800; }
.acc-add[open] summary::before{ content:"– "; }
.acc-add[open] summary{ border-bottom:1px solid var(--line-2); margin-bottom:8px; }
.acc-add .acc-form{ padding-bottom:18px; }

/* ── Claim box (venue page sidebar) ─────────────────────────────────────── */

/* Sits inside .block.aside-block, which single-tt_clinics.php already styles —
   this only adds what that class does not carry: the form's own rhythm. */
.acc-box .acc-hint{ margin:6px 0 10px; }
.acc-box .acc-btn{ width:100%; justify-content:center; }
.acc-form--claim{ gap:4px; }
.acc-form--claim label{ margin-top:8px; }
.acc-form--claim .acc-hint{ margin:2px 0 0; }
.acc-form--claim .acc-btn{ margin-top:14px; }

/* ── Platform (stage 2) ─────────────────────────────────────────────────── */

/* ── The calendar's header row ─────────────────────────────────────────────
   Stepper, date, today, view switch, count. It was a row of pill buttons —
   each arrow a 40px circle around one glyph — and sQuem asked for something
   calmer. Everything here is now sized to the text it sits beside. */
.acc-daybar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.acc-daybar__d{ font-family:var(--disp); font-size:19px; font-weight:700; letter-spacing:-.01em; }
.acc-daybar__n{ margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ⚠️ ONE control, not two buttons: a joined pair with a single border and a
   hairline between them, so it reads as a stepper rather than as two choices.
   34px square — big enough to hit, small enough not to outweigh the date. */
.acc-step{
  display:inline-flex; border:1px solid var(--line-strong);
  border-radius:10px; overflow:hidden; flex:none;
}
.tt-site .acc-step__a{
  display:grid; place-items:center; width:34px; height:32px;
  color:var(--ink-2); text-decoration:none;
}
.tt-site .acc-step__a:hover{ background:var(--surface-2); color:var(--ink); }
.tt-site .acc-step__a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.acc-step__a + .acc-step__a{ border-left:1px solid var(--line); }
.acc-step__a svg{ width:16px; height:16px; }

/* "Dnes" is a way back, not a destination — quieter than the stepper. */
.tt-site .acc-today{
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:4px 2px;
}
.tt-site .acc-today:hover{ color:var(--ink); }

/* An appointment reads left to right: when, who, what to do about it. */
.acc-appt{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px;
}
.acc-appt__t{ flex:none; width:58px; display:flex; flex-direction:column; line-height:1.3; }
.acc-appt__t b{ font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; }
.acc-appt__t span{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.acc-appt__b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acc-appt__b b{ font-size:15px; }
.acc-appt__a{ flex:none; margin-left:auto; }
@media (max-width:560px){
  .acc-appt{ flex-wrap:wrap; }
  .acc-appt__a{ margin-left:0; width:100%; padding-top:6px; }
}
/* A moved appointment is marked, because the client was told and the desk
   should see the same thing the client saw. */
.acc-appt.is-moved{ border-left:3px solid var(--pop); }

/* Blocks on the animal card. The dashed one is the boundary: it looks
   different because it IS different — the content is not ours to show. */
.acc-blk{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden; margin-top:12px;
}
.acc-blk__h{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line-2);
}
.acc-blk__h b{ font-size:15px; }
.acc-blk__h .acc-pill{ margin-left:auto; }
.acc-blk__b{ padding:14px 16px; font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.acc-blk--locked{ border-style:dashed; background:var(--surface-2); }
.acc-blk--locked .acc-blk__h{ border-bottom-style:dashed; }
@media (max-width:560px){ .acc-blk__h .acc-pill{ margin-left:0; } }

.acc-recs{ display:flex; flex-direction:column; gap:12px; }
.acc-rec{ display:flex; gap:12px; align-items:flex-start; }
.acc-rec__d{
  flex:none; width:74px; font-family:var(--mono); font-size:12px; color:var(--muted);
  padding-top:2px; font-variant-numeric:tabular-nums;
}
.acc-rec__b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.acc-rec__b b{ color:var(--ink); font-size:14px; }

/* ── A document in the history ────────────────────────────────────────────
   The owner's own upload, sitting in the same list as the clinics' notes. */
.acc-rec__file{ display:flex; align-items:center; gap:8px; margin-top:6px; }
/* ⚠️ `.tt-site` because Astra sets `a{color:#046bd2}` at 0,1,1 and would win
   against a lone class — the same trap as .acc-review__at. */
.tt-site .acc-doc{
  display:inline-flex; align-items:center; gap:7px; min-width:0;
  padding:7px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink);
  font-size:13.5px; font-weight:600; text-decoration:none;
}
.tt-site .acc-doc:hover{ border-color:var(--line-strong); color:var(--ink); }
.tt-site .acc-doc:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acc-doc svg{ width:15px; height:15px; flex:none; color:var(--muted); }
/* The filename is theirs and can be long; the row must not push the card wide. */
.tt-site .acc-doc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

.acc-search{ display:flex; gap:8px; margin-bottom:16px; }
.tt-site .acc-search .acc-inp{ flex:1; }

.acc-client{
  display:flex; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 16px;
}
.acc-client__b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acc-client__b b{ font-size:15px; }
.acc-client__s{ flex:none; }

.acc-grant{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px;
}
.acc-grant > span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acc-grant__a{ display:flex; gap:8px; flex-wrap:wrap; flex:none; }

/* ── Google sign-in ─────────────────────────────────────────────────────── */

/* White with a border, per Google's brand rules for the sign-in button: their
   logo may not sit on a coloured field. It also happens to be right here — the
   terracotta submit below stays the page's one loud control. */
.acc-g{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; border:1.5px solid var(--line-strong); border-radius:999px;
  padding:11px 18px; font-family:var(--sans); font-size:15px; font-weight:700;
  color:var(--ink); text-decoration:none; transition:.14s; margin-bottom:4px;
}
/* ⚠️ `color` repeated on hover. Astra sets `a:hover{color:#045cb4}@media (hover:hover){ ` at 0,1,1 —
   a pseudo-class counts — so a lone `.acc-g` at 0,1,0 lost and the label went
   blue under the cursor. The same applies to every <a> in here that is not
   meant to look like a link. */
.tt-site .acc-g:hover{ border-color:var(--ink); color:var(--ink); } }
.tt-site .acc-g:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acc-g__ic{ width:18px; height:18px; flex:none; }

/* The divider. A line with a word in it, rather than the word alone, because
   the two halves it separates are alternatives and not a sequence. */
.acc-or{
  display:flex; align-items:center; gap:12px; margin:14px 0 4px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.acc-or::before, .acc-or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ── Cabinet: rail + content ────────────────────────────────────────────
   Lifted from the mockup verbatim — every number below is the one that was
   drawn, not one I chose again. The rail is a COLUMN WITH A DIVIDER, not a
   floating card: no border, no radius, just a rule down its right edge, so
   it reads as part of the page rather than a widget on it. */
.acc-shell{
  display:grid; grid-template-columns:236px minmax(0,1fr);
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; min-height:520px;
}
.acc-rail{ border-right:1px solid var(--line); padding:22px 14px; background:var(--surface); }
.acc-main{ padding:26px 28px 34px; min-width:0; }

.acc-rail__who{ padding:0 10px 16px; border-bottom:1px solid var(--line-2); margin-bottom:14px; }
.acc-rail__role{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  padding:3px 8px; border-radius:999px; display:inline-block;
}
/* The mockup gave each kind of account its own colour. A salon is not a clinic
   and an owner is neither, and the badge is the only place that says so. */
.acc-rail__role--sal{ background:#f3e8f7; color:#8a4a9e; }
.acc-rail__role--usr{ background:#eef1fb; color:#4a5aa8; }
.acc-rail__name{
  font-family:var(--disp); font-size:17px; font-weight:700; margin-top:9px;
  line-height:1.2; display:block; word-break:break-word;
}
.acc-rail__sub{ font-size:12.5px; color:var(--muted); margin-top:3px; display:block; word-break:break-all; }
/* The venue switch holds names, not e-mails: break between words ("R užinov"). */
.tt-site .acc-rail__sub .acc-link{ word-break:normal; overflow-wrap:anywhere; }

.acc-rail nav{ display:flex; flex-direction:column; gap:2px; }
.acc-rail__i{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
}
/* ⚠️ Hover was NOT in the mockup — a static drawing has no hover state — so it
   is the lightest thing that still answers "is this clickable": the same ink
   at 5%, which is what the site header uses on its own links. Anything
   stronger would compete with the active item. */
.tt-site .acc-rail__i:hover{ background:rgba(24,39,31,.05); color:var(--ink); }
.tt-site .acc-rail__i:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* ⚠️ `.is-on` states its hover too, or the active item picks up the plain
   hover colour when the cursor crosses it. */
.tt-site .acc-rail__i.is-on,
.tt-site .acc-rail__i.is-on:hover{ background:var(--ink); color:var(--bg); }
/* ⚠️ While a rail click is fetching. Deliberately almost nothing: the swap is
   one request for one element and usually lands inside 200ms, so a spinner
   would flash more than it would inform. The cursor is the whole signal, and a
   second click is ignored by the script anyway.

   No `pointer-events:none` — that would also kill the hover and make the rail
   feel dead on a slow connection, which is the moment feedback matters most. */
.acc-rail.is-loading{ cursor:progress; }
.tt-site .acc-rail.is-loading .acc-rail__i{ cursor:progress; }

/* ── Switching between the two profiles ───────────────────────────────────
   The rail's first line, above the name. It changes which profile you are in,
   and the badge right below it says which one that currently is.

   ⚠️ QUIETER THAN ANYTHING ELSE IN THE RAIL, twice over. The first version was
   a dashed box under the name and read as an eighth nav item, competing with
   the seven real ones (sQuem: "не такую выделяющуюся"). No border, no padding,
   no background — a small grey line that is found when looked for. */
.tt-site .acc-rail__switch{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 14px;
  font-size:12px; font-weight:600; color:var(--muted); text-decoration:none;
  letter-spacing:.01em;
}
/* ⚠️ Astra paints `a` at 0,1,1, so the colour has to be stated here or the link
   comes out blue — the sixth time this file has hit that rule. */
.tt-site .acc-rail__switch:hover{ color:var(--ink); }
.tt-site .acc-rail__switch:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.acc-rail__switch svg{ width:13px; height:13px; flex:none; opacity:.8; }

.acc-rail__ic{ width:17px; height:17px; flex:none; opacity:.75; display:block; }
.acc-rail__ic svg{ width:100%; height:100%; display:block; }
.acc-rail__i.is-on .acc-rail__ic{ opacity:1; }

/* The count badge — unanswered reviews, pending requests. */
.acc-rail__n{
  margin-left:auto; font-size:11.5px; font-weight:800; background:var(--pop);
  color:#fff; border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums;
}
/* Upcoming visits on "Moje objednávky": waiting (coral) and confirmed (green). */
/* Compact — a number, not "1 čaká": the words pushed "Moje objednávky" onto two
   lines in the 236px rail (Roman, 2026-10-09). The full meaning is the title. */
.acc-rail__st{ margin-left:auto; display:inline-flex; gap:4px; flex:none; }
.tt-site .acc-rail__i:has(.acc-rail__st){ white-space:nowrap; }
.acc-rail__st .acc-rail__n{ margin-left:0; white-space:nowrap; }
.acc-rail__n.acc-rail__n--ok{ background:var(--accent); }
/* A group heading, for the settings half of the rail. */
.acc-rail__grp{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding:16px 11px 6px;
}
/* An item whose page is not built yet. Dimmed and not a link, so it says
   "coming" without pretending to be broken. */
.tt-site .acc-rail__i--soon{ opacity:.45; cursor:default; }
.tt-site .acc-rail__i--soon:hover{ background:transparent; color:var(--ink-2); }

/* ⚠️ Below 860px the rail stops being a column, exactly as the mockup's own
   media query did: a 236px sidebar on a phone leaves the content unusable,
   and hiding it would strand somebody with no way back. */
@media (max-width:860px){
  /* minmax(0,…): a bare 1fr floors at min-content, and the rail's one-row
     menu (nowrap) stretched the column past the phone — every cabinet page was
     cut off on the right (browser review, 2026-10-06). */
  .acc-shell{ grid-template-columns:minmax(0,1fr); }
  .acc-rail{ border-right:0; border-bottom:1px solid var(--line); padding:14px 0 0; }
  /* ⚠️ ONE SCROLLING ROW, not a wrapped block (browser review, 2026-10-06): the
     wrapped rail filled most of the first screen, "Recenzie" sat alone on a line
     and "Odhlásiť sa" landed among the settings. Group captions and not-yet-built
     items are left out on a phone — the dimmed ones read as "broken" there. The
     fading right edge says the row goes on. */
  .acc-rail__who{ padding:0 16px 12px; margin-bottom:0; border-bottom:0; }
  .acc-rail nav{ flex-direction:row; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:0 16px 12px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .acc-rail nav::-webkit-scrollbar{ display:none; }
  .acc-rail__grp,
  .tt-site .acc-rail__i--soon{ display:none; }
  .tt-site .acc-rail__i{ flex:none; white-space:nowrap; padding:8px 13px; border:1px solid var(--line); border-radius:999px; font-size:14px; }
  .tt-site .acc-rail__i.is-on{ border-color:var(--ink); }
}
@media (max-width:600px){ .acc-main{ padding:20px 16px 26px; } }

/* ── Reminders ──────────────────────────────────────────────────────────── */

.acc-rem{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 16px;
}
.acc-rem__d{
  flex:none; width:82px; font-family:var(--mono); font-size:12.5px;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.acc-rem__b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acc-rem__b b{ font-size:15px; }
.acc-rem__s{ flex:none; }
@media (max-width:560px){
  .acc-rem__d{ width:100%; }
  .acc-rem__s{ width:100%; }
}

/* A requested slot is not a booking. Dashed, so the desk can see at a glance
   which rows they have actually agreed to. */
.acc-appt.is-asked{ border-style:dashed; border-color:var(--pop); background:var(--pop-soft); }
.acc-appt.is-asked .acc-appt__a form{ margin:0; }


@media (hover:hover){ /* ── Icon-only actions ──────────────────────────────────────────────────
   A pet card had a full-width "Odstrániť" button next to a one-line name —
   the control was louder than the thing it acted on (sQuem, 2026-09-21).
   36px square, the icon carries the meaning, the title and aria-label carry
   it for anyone who cannot see it. */
/* ⚠️ `.tt-site` for the same reason as .acc-btn: Astra's bare `button` and
   `button:hover` rules are the same specificity as a lone class, so which one
   wins is decided by load order — which is not a thing to leave a colour
   resting on. */
.tt-site .acc-ib{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--line-strong); border-radius:999px;
  background:transparent; color:var(--ink-2); cursor:pointer; padding:0;
  box-shadow:none;
  transition:background .14s, border-color .14s, color .14s;
} }
.acc-ib svg{ width:16px; height:16px; display:block; }
@media (hover:hover){ .tt-site .acc-ib:hover{ background:rgba(24,39,31,.05); border-color:var(--ink); color:var(--ink); } }
.tt-site .acc-ib:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tt-site .acc-ib--del:hover{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }

/* ── "Which kind of account?" — a screen, not a notice ──────────────────
   ⚠️ It used to be a terracotta strip inside the finished cabinet. Wrong
   place: it landed next to unrelated notices ("Zviera bolo odstránené") and
   read as a setting somebody forgot to put away (sQuem). It is now the only
   thing on the page, so it needs no colour to be noticed and takes none —
   an alert box with nothing to be alerted about is just loud.

   Same width as the login form, for the same reason: this is the last step
   of signing up and should look like it. */
.acc-page--ask{ padding:56px 0 80px; }
.tt-site .acc-page--ask .wrap,
.tt-site .acc-page--ask .wrap-text{ max-width:500px; }

.tt-site .acc-ask__h{
  font-family:var(--disp); font-size:28px; font-weight:700;
  line-height:1.2; margin:0 0 8px; color:var(--ink);
}
.tt-site .acc-ask__p{ margin:0 0 22px; color:var(--ink-2); font-size:15px; }

/* ⚠️ A column, not a row of buttons. The three options carry a hint each and
   are not equally likely — side by side they compete and the hints wrap. */
.acc-ask__f{ display:flex; flex-direction:column; gap:10px; }
/* ⚠️ The venue prompt puts a single button here and two hint paragraphs under
   it, where the role question puts a grid of options and nothing after. Without
   this the button sat against the first hint: `p.acc-hint` carries 2px on top
   by design, because on every other screen something with its own bottom margin
   precedes it. Here nothing does.

   ⚠️ `.tt-site` AND the tag, or this loses. The first attempt was
   `.acc-ask__f + .acc-hint` at 0,2,0 — and `.tt-site p.acc-hint` further up is
   0,2,1, so the 2px top margin won and the button still sat on the text
   (sQuem, second report on the same screen). The adjacent-sibling combinator
   adds no weight of its own; only the tag does. */
.tt-site .acc-ask__f + p.acc-hint{ margin-top:24px; }
/* The log-out line is a footer to the screen, not part of the paragraph above. */
.tt-site .acc-ask p.acc-hint + p.acc-hint{ margin-top:26px; }

/* ⚠️ These are submit BUTTONS, so every inherited button style has to be
   undone by name — Astra paints a submit with its own background, radius and
   padding, and `text-align` on a button is `center` by default, which would
   centre the hints. */
.tt-site .acc-ask__o{
  display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--sans); font-size:15px;
  background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line-strong); border-radius:12px;
  padding:14px 16px; box-shadow:none;
  transition:border-color .14s, background .14s;
}
.tt-site .acc-ask__o:hover{ border-color:var(--accent); background:var(--accent-soft); }
.tt-site .acc-ask__o:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acc-ask__o b{ display:block; font-size:15.5px; font-weight:700; color:var(--ink); }
.acc-ask__o span{ display:block; margin-top:3px; font-size:13.5px; color:var(--ink-2); line-height:1.45; }

@media (max-width:600px){
  .acc-page--ask{ padding:36px 0 56px; }
  .acc-ask__h{ font-size:24px; }
}

/* A control that exists but cannot be used, with the reason in its title. */
/* ⚠️ Dimmed by COLOUR, not by opacity. Opacity is inherited by children, and
   this control now carries a tooltip — at .4 the bubble came out washed out
   and unreadable. Fading the icon itself dims exactly what should be dim. */
.tt-site .acc-ib--off{ color:var(--line-strong); cursor:help; }
.tt-site .acc-ib--off:hover{ background:transparent; border-color:var(--line-strong); color:var(--ink-2); }

/* A read-only field keeps the shape of the one beside it, so the form still
   reads as a form — it just cannot be typed into. */

/* ── Pet photo ──────────────────────────────────────────────────────────
   The avatar slot already existed for the paw icon; a photo fills the same
   42px circle so a list of pets with and without photos keeps one rhythm. */
.acc-pet__ic--photo{ overflow:hidden; background:var(--surface-2); padding:0; }
.acc-pet__img{ width:100%; height:100%; object-fit:cover; display:block; }
.acc-pet__ic--lg{ width:64px; height:64px; }

.acc-pet-hd{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.acc-pet-hd .acc-sub{ margin:0; }

/* ── The photo drop zone ────────────────────────────────────────────────
   ⚠️ A TILE, NOT A PANEL. It began as a full-width dashed box 150px tall
   holding a thumbnail — "огромный прям" (sQuem). One photo does not need the
   width of the form.

   ⚠️ 128px, up from 104. At 104 the caption overlapped the paw: both sat in
   the same grid cell, which is fine for things that alternate and wrong for
   things shown together. They are now rows in a flex column, so the tile
   cannot produce that overlap again whatever the text says.

   ⚠️ The input is moved off-screen, NOT display:none. A hidden input leaves
   the tab order and the accessibility tree, and the label would then open a
   picker keyboard users cannot reach. */
.acc-drop{
  display:flex; align-items:center; gap:12px;
  position:relative; margin-top:2px; flex-wrap:wrap;
}
.acc-drop__in{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Fixed square, so the row does not reflow when a photo arrives. */
.acc-drop__zone{
  position:relative; flex:none; width:128px; height:128px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center;
  cursor:pointer; overflow:hidden; padding:10px;
  border:2px dashed var(--line-strong); border-radius:14px;
  background:var(--surface);
  transition:border-color .14s, background .14s;
}
.acc-drop__zone:hover{ border-color:var(--accent); background:var(--accent-soft); }
.acc-drop__in:focus-visible + .acc-drop__zone{ outline:2px solid var(--accent); outline-offset:2px; }

.acc-drop.is-over .acc-drop__zone{ border-color:var(--accent); background:var(--accent-soft); }
.acc-drop.is-bad .acc-drop__zone{ border-color:var(--danger); background:var(--danger-soft); }

.acc-drop__paw{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink);
}
.acc-drop__paw svg{ width:20px; height:20px; }

.acc-drop__txt b{ display:block; font-size:12px; font-weight:700; color:var(--ink); line-height:1.25; }
.acc-drop__txt span{ display:block; margin-top:1px; font-size:11px; color:var(--ink-2); line-height:1.25; }

/* ⚠️ `.has-photo` on the ROOT decides what shows, never the `hidden`
   attribute: `display` in an author rule outranks the browser's own
   `[hidden]{display:none}`, so the paw once sat on top of the photo. */
.acc-drop__prev{ display:none; width:100%; height:100%; }
.acc-drop__prev img{ display:block; width:100%; height:100%; object-fit:cover; }

.acc-drop.has-photo .acc-drop__zone{ border-style:solid; border-color:var(--line); padding:0; gap:0; }
.acc-drop.has-photo .acc-drop__prev{ display:block; }
.acc-drop.has-photo .acc-drop__paw,
.acc-drop.has-photo .acc-drop__txt{ display:none; }

/* ⚠️ BESIDE THE PHOTO, NOT OVER IT. These were a hover scrim, and sQuem
   rejected that as not discoverable — a control found by waving a mouse over
   a picture does not exist on a phone at all. A column the height of the
   tile, and only once there is a photo: with nothing to act on they would be
   two dead buttons. */
.acc-drop__side{
  display:none; flex-direction:column; justify-content:space-between;
  align-self:stretch; height:128px; padding:2px 0;
}
.acc-drop.has-photo .acc-drop__side{ display:flex; }

.acc-drop__note{ font-size:12.5px; color:var(--ink-2); line-height:1.5; }

@media (max-width:480px){
  .acc-drop__zone{ width:112px; height:112px; }
  .acc-drop__side{ height:112px; }
}

/* ── The "why is this locked" tooltip ──────────────────────────────────
   ⚠️ CSS ONLY, and `tabindex="0"` is what makes it more than a hover: the
   tooltip opens on focus too, so it is reachable by keyboard and by tapping
   on a phone. A `title` attribute does neither — it never appears on touch,
   which is where most of these owners are.

   ⚠️ It says the way OUT, not just the rule. A locked field that only says
   "no" leaves the person stuck (sQuem): create a new animal with the right
   details, or write to us. */
.acc-i{ position:relative; display:inline-grid; place-items:center; }

.acc-i__d{
  width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--sans); font-size:10.5px; font-weight:800; font-style:normal;
  line-height:1; color:var(--surface); background:var(--ink-2);
  cursor:help; vertical-align:middle; margin-left:2px;
}
.acc-i:hover .acc-i__d{ background:var(--ink); }

.acc-i__t{
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  width:max-content; max-width:240px;
  padding:9px 11px; border-radius:9px;
  background:var(--ink); color:var(--bg);
  font-size:12.5px; font-weight:500; line-height:1.45; text-align:left;
  white-space:normal;
  opacity:0; visibility:hidden; transition:opacity .14s, visibility .14s;
  z-index:5; pointer-events:none;
  box-shadow:0 8px 20px rgba(24,39,31,.18);
}
.acc-i__t--wide{ max-width:260px; }

/* ⚠️ The arrow is drawn on the bubble, not on the trigger: it has to move
   with the bubble when the viewport pushes it around. */
.acc-i__t::after{
  content:""; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink);
}

.acc-i:hover .acc-i__t,
.acc-i:focus .acc-i__t,
.acc-i:focus-visible .acc-i__t{ opacity:1; visibility:visible; }
.acc-i:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:50%; }

/* ⚠️ Near the left edge the bubble would hang off the page. The rail is
   narrow on a phone and these sit in a form, so it is pinned rather than
   centred below 600px. */
@media (max-width:600px){
  .acc-i__t{ left:auto; right:-8px; transform:none; max-width:min(260px, calc(100vw - 48px)); }
  .acc-i__t::after{ left:auto; right:12px; transform:none; }
}

/* ── Confirming a delete ────────────────────────────────────────────────
   ⚠️ Only deletes ask, and only because a pet's card and photo go with it
   and nothing brings them back. A cabinet that confirms everything teaches
   people to click through the question, which is worse than not asking.

   A native <dialog>: focus trapping, Escape, the backdrop and the top layer
   all come from the browser. Every one of those is something a hand-built
   overlay gets subtly wrong. */
.acc-dlg{
  border:1px solid var(--line-strong); border-radius:14px;
  background:var(--surface); color:var(--ink);
  padding:22px 24px; max-width:420px; width:calc(100% - 32px);
  box-shadow:0 18px 40px rgba(24,39,31,.16);
}
.acc-dlg::backdrop{ background:rgba(24,39,31,.42); }
/* ⚠️ The claim dialog holds a six-field form, not a yes/no question, so it gets
   its own width AND a scroll cap. A <dialog> does not scroll on its own: at 420
   wide and no max-height the last fields and the submit button sat below the
   viewport on a phone, which is the failure mode that makes modals worse than
   pages for real forms. The page at /ucet-prevzatie/ remains the fallback. */
.acc-dlg--wide{ max-width:560px; max-height:calc(100vh - 48px); overflow:auto; }
/* The form's own bar ends the dialog; the close button is a second way out. */
.acc-dlg--wide .acc-dlg__f{ margin-top:6px; }
.tt-site .acc-dlg__h{
  font-family:var(--disp); font-size:19px; font-weight:700;
  letter-spacing:-.02em; margin:0 0 8px; color:var(--ink);
}
.tt-site .acc-dlg__p{ margin:0 0 20px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
/* ⚠️ "Nechať" sits first and is the quiet one: the dialog opens with the
   safe option under the cursor, and the destructive one has to be aimed at. */
.acc-dlg__f{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

@media (max-width:480px){
  .acc-dlg{ padding:18px; }
  .acc-dlg__f .acc-btn{ flex:1; justify-content:center; }
}

/* ── Saved venues ───────────────────────────────────────────────────────
   Reuses .acc-card, so a saved venue looks like a pet card and a client
   row: one card component, three lists. Only what differs is written here. */
.tt-site .acc-card--fav{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.tt-site .acc-fav__lnk{ color:var(--ink); }
.tt-site .acc-fav__lnk:hover{ color:var(--accent-ink); }

/* The pet's name opens its card — the health record and the documents.
   ⚠️ `.tt-site` and an explicit colour, or Astra's `a{color:#046bd2}` paints it
   link-blue at rest. Same trap as .acc-fav__lnk above and .acc-review__at. */
.tt-site .acc-pet__lnk{ color:var(--ink); text-decoration:none; }
.tt-site .acc-pet__lnk:hover{ color:var(--accent-ink); }

/* ── The heart on a venue page ──────────────────────────────────────────
   ⚠️ It borrows the page's own `.btn ghost`, not an .acc- class: it stands in
   a row of that venue's buttons and has to match them, not the cabinet.
   Only the saved state is ours. */
.tt-fav{ display:inline-flex; }
.tt-fav__b.is-on{ color:var(--accent-ink); border-color:var(--accent); }
.tt-fav__b svg{ width:17px; height:17px; }

.tt-site .acc-scrollhint{ display:none; }
@media (max-width:860px){
  .tt-site .acc-scrollhint{ display:block; margin:0 0 8px; font-size:13px; color:var(--muted); }
}

/* A booking's status always reads as a pill: the base class had no background,
   and `acc-pill--on` was used in the template but never defined, so every
   status looked like loose small text (browser review, 2026-10-06). */
.tt-site .acc-grant .acc-pill{ background:var(--surface-2); color:var(--ink-2); }
.tt-site .acc-pill.acc-pill--on{ background:var(--accent-soft); color:var(--accent-ink); }
/* An unanswered request: calm, not an error. */
.tt-site .acc-pill.acc-pill--wait{ background:var(--pop-soft); color:var(--pop-ink); border-color:transparent; }
@media (max-width:600px){
  .tt-site .acc-grant{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Hodiny a sloty: the week's hours, read-only (page-ucet-hodiny.php). */
.tt-site .acc-hours{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tt-site .acc-hours th,
.tt-site .acc-hours td{ padding:8px 4px; border:0; border-bottom:1px solid var(--line); text-align:left; font-weight:500; }
.tt-site .acc-hours tr:last-child th,
.tt-site .acc-hours tr:last-child td{ border-bottom:0; }
.tt-site .acc-hours th{ color:var(--muted); font-weight:600; }
.tt-site .acc-hours td{ text-align:right; font-variant-numeric:tabular-nums; }

/* Hotel schedule: who is staying, over every day of the stay (template-parts/acc-stays.php).
   The week grid uses the schedule's own columns so a stay sits over its days. */
.tt-site .acc-stays{ margin:0 0 16px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.tt-site .acc-stays__hd{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.tt-site .acc-stays--week{ overflow-x:auto; }
.tt-site .acc-stays__grid{ display:grid; grid-template-columns:52px repeat(var(--tt-cols,7), minmax(96px,1fr)); gap:6px 0;
  min-width:calc(52px + var(--tt-cols,7) * 96px); }
/* The same minimum as the week grid below, not max-content: one long name in a
   one-day bar widened every column to 210px and the days stopped lining up. */
.tt-site .acc-stays__t,
.tt-site .acc-stays__hd{ position:sticky; left:0; background:var(--surface); z-index:1; }
.tt-site .acc-stays__t{ font-size:12px; color:var(--muted); align-self:center; }
.tt-site .acc-stays__n{ font-size:12.5px; font-weight:700; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }
.tt-site .acc-stays__n.is-full{ color:var(--pop-ink, #b8461f); }
.tt-site .acc-stays__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.tt-site .acc-stay{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px; text-decoration:none; min-width:0; margin:0 3px; }
.tt-site .acc-stays__grid .acc-stay{ flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.tt-site .acc-stays__grid .acc-stay span{ overflow:hidden; text-overflow:ellipsis; }
.tt-site .acc-stay.is-asked{ background:#fdf2dc; color:#8a5a00; }
.tt-site .acc-stay.is-cont{ border-top-left-radius:0; border-bottom-left-radius:0; margin-left:0; }
.tt-site .acc-stay.is-more{ border-top-right-radius:0; border-bottom-right-radius:0; margin-right:0; }
.tt-site .acc-stay__tag{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.7); }

/* Hotel stays as rows of the week grid (acc-stays.php, inline): the bars share
   the grid's columns and its scroll, so they cannot drift off their days. */
.tt-site .acc-grid__sh{ padding:8px 12px 2px; background:var(--surface); font-size:13px; }
.tt-site .acc-grid__sh b{ position:sticky; left:12px; display:inline-block; }
.tt-site .acc-grid__st{ font-size:11px; padding:6px 8px; }
.tt-site .acc-grid__sn{ padding:6px 4px; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted);
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums; background:var(--surface); }
.tt-site .acc-grid__sn.is-full{ color:var(--pop-ink, #b8461f); }
.tt-site .acc-grid__sf{ min-width:0; padding:3px 0; border-bottom:1px solid var(--line-2); }
.tt-site .acc-grid__sf .acc-stay{ flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.tt-site .acc-grid__sf .acc-stay b{ flex:none; }
.tt-site .acc-grid__sf .acc-stay span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* The pet card's lock note sits at the card's right edge: anchored right, or the
   centred bubble ran off the card. On touch it closes when the page scrolls
   (account.js) — tapped open, it used to hang over the list (2026-10-07). */
.acc-card__row .acc-i__t{ left:auto; right:-8px; transform:none; }
.acc-card__row .acc-i__t::after{ left:auto; right:12px; transform:none; }

/* Document picker (page-ucet-zviera.php): our button over an off-screen real input. */
.tt-site .acc-file{ position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tt-site .acc-file__in{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; }
.tt-site .acc-file__name{ font-size:13.5px; color:var(--muted); min-width:0; overflow-wrap:anywhere; }
.tt-site .acc-file__in:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }

/* Moje objednávky: the service / stay on its own line under venue · pet. */
.tt-site .acc-svc{ display:block; }

/* Cenník (page-ucet-cennik.php): a group = heading + rows of item / price. */
.tt-site .acc-price__group{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin:0 0 14px; display:grid; gap:8px; background:var(--surface); }
.tt-site .acc-price__g{ font-weight:700; }
.tt-site .acc-price__row{ display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:8px; }
.tt-site .acc-price__group > .acc-btn{ justify-self:start; }
@media (max-width:560px){
  .tt-site .acc-price__row{ grid-template-columns:minmax(0,1fr) 104px; }
}

/* Fotografie (page-ucet-fotografie.php): the venue's photos with their state. */
.tt-site .acc-gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-top:18px; }
.tt-site .acc-gal__it{ margin:0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.tt-site .acc-gal__it img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.tt-site .acc-gal__it figcaption{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; flex-wrap:wrap; }
.tt-site .acc-gal__it form{ margin:0; }

/* Prehľady (page-ucet-prehlady.php): appointments per weekday as bars. */
.tt-site .acc-bars{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; height:180px; align-items:end; margin:8px 0 24px;
  padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.tt-site .acc-bars__c{ height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.tt-site .acc-bars__b{ width:70%; min-height:2px; border-radius:6px 6px 2px 2px; background:var(--accent); }
.tt-site .acc-bars__n{ font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.tt-site .acc-bars__l{ font-size:12px; color:var(--muted); }

/* ── Plan: the subscription's tabs for a free venue (inc/platform-plan.php) ──
   A lime "Predplatné" pill sitting on the item's top edge, and on hover or focus
   a dark card beside the rail: a drawing of the tool, its name, one line on it,
   and the price. Hung from the item's top, not centred on it — the shell clips
   (overflow:hidden) and Rozvrh sits near the top of the rail. On a phone (no hover) the pill stays and the tab opens the
   locked page, which says the same thing. */
.acc-plan-pill{
  display:inline-block; padding:2px 8px; border-radius:999px; background:var(--lime,#cfe05a); color:var(--forest,#153427);
  font-size:10.5px; font-weight:800; letter-spacing:.02em; line-height:1.45; white-space:nowrap;
}
.tt-site .acc-rail__i--paid{ position:relative; }
.acc-rail__plan{ position:absolute; top:-7px; right:8px; pointer-events:none; }
.acc-tip{
  position:absolute; left:calc(100% + 14px); top:-12px; z-index:30; width:300px;
  display:flex; flex-direction:column; overflow:hidden; border-radius:16px; background:var(--forest,#153427);
  color:var(--bg,#f2eee4); box-shadow:0 24px 50px -20px rgba(21,52,39,.55);
  opacity:0; visibility:hidden; transition:opacity .18s, visibility .18s, translate .18s; pointer-events:none;
  white-space:normal; font-weight:400;
}
.acc-tip::before{ content:""; position:absolute; left:-6px; top:26px; width:12px; height:12px; rotate:45deg; background:var(--forest,#153427); }
@media (hover:hover){
  .tt-site .acc-rail__i--paid:hover .acc-tip{ opacity:1; visibility:visible; }
}
.tt-site .acc-rail__i--paid:focus-visible .acc-tip{ opacity:1; visibility:visible; }
.acc-tip__pic{ display:block; padding:14px 14px 0; }

.acc-tip__body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
.acc-tip__h{ font-family:var(--disp); font-size:17px; font-weight:700; color:#fff; }
.acc-tip__t{ font-size:13.5px; line-height:1.5; color:rgba(242,238,228,.78); }
.acc-tip__more{ margin-top:4px; font-size:13px; font-weight:700; color:var(--lime,#cfe05a); }
@media (max-width:860px){
  .acc-tip{ display:none; }
  .acc-rail__plan{ top:-8px; right:6px; }
  .acc-rail nav{ padding-top:9px; }
}

/* The previews: a small working cabinet with real animal photos (tt_plan_preview()).
   Static until played — in the tooltip on hover/focus, on the locked page in a
   loop (.is-loop). Rozvrh: bookings slide in, the waiting one turns confirmed.
   Klienti: "Bella" is typed, the list narrows, her card opens. */
.acc-pv{ position:relative; display:grid; align-content:start; gap:8px; height:214px; padding:12px; overflow:hidden;
  border-radius:12px; background:rgba(242,238,228,.08); box-sizing:border-box; color:#fff; font-size:12px; line-height:1.25; }
.acc-pv img{ width:34px; height:34px; flex:none; border-radius:50%; object-fit:cover; border:2px solid rgba(242,238,228,.9); }
.acc-pv__top{ font-size:13px; }
.acc-pv__it{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(242,238,228,.1); }
.acc-pv__tx{ flex:1; min-width:0; display:grid; }
.acc-pv__tx b{ font-size:12.5px; color:#fff; }
.acc-pv__tx span{ font-size:11.5px; color:rgba(242,238,228,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-pv__it em{ flex:none; padding:3px 8px; border-radius:999px; font-style:normal; font-size:10.5px; font-weight:800; white-space:nowrap;
  background:rgba(242,238,228,.16); color:#fff; }
.acc-pv__it em.is-ok{ background:#2f9e70; }
.acc-pv__it em.is-wait{ position:relative; min-width:84px; height:20px; padding:0; overflow:hidden; background:#e0603a; }
.acc-pv__it em.is-wait i{ position:absolute; inset:0; display:grid; place-items:center; font-style:normal; }
.acc-pv__it em.is-wait i + i{ opacity:0; }
.acc-pv__cur{ position:absolute; right:40px; top:118px; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.25); opacity:0; pointer-events:none; }
.acc-pv__q{ position:relative; display:flex; align-items:center; height:32px; padding:0 12px; border-radius:10px; background:rgba(242,238,228,.95); font-size:12.5px; }
.acc-pv__ph{ color:#8a968e; }
.acc-pv__ty{ position:absolute; left:12px; width:0; overflow:hidden; white-space:nowrap; color:#18271f; font-weight:700; }
.acc-pv__card{ display:grid; gap:3px; padding:10px 12px; border-radius:10px; background:var(--lime,#cfe05a); color:var(--forest,#153427);
  font-size:11.5px; opacity:0; }
.acc-pv__card b{ font-size:13px; }

.acc-pv.is-loop .acc-pv__it,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__it,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__it{ animation:tt-pv-in 6s infinite both; }
.acc-pv.is-loop .acc-pv__a2,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__a2,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__a2{ animation-delay:.15s; }
.acc-pv.is-loop .acc-pv__a3,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__a3,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__a3{ animation-delay:.3s; }
.acc-pv.is-loop .acc-pv__it em.is-wait,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__it em.is-wait,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__it em.is-wait{ animation:tt-pv-conf 6s infinite; }
.acc-pv.is-loop .acc-pv__it em.is-wait i:first-child,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__it em.is-wait i:first-child,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__it em.is-wait i:first-child{ animation:tt-pv-out 6s infinite; }
.acc-pv.is-loop .acc-pv__it em.is-wait i + i,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__it em.is-wait i + i,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__it em.is-wait i + i{ animation:tt-pv-pop 6s infinite; }
.acc-pv.is-loop .acc-pv__cur,
.tt-site .acc-rail__i--paid:hover .acc-pv .acc-pv__cur,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv .acc-pv__cur{ animation:tt-pv-cur 6s infinite; }
.acc-pv--klienti.is-loop .acc-pv__it,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__it,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__it{ animation:none; }
.acc-pv--klienti.is-loop .acc-pv__ph,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__ph,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__ph{ animation:tt-pv-ph 7s infinite; }
.acc-pv--klienti.is-loop .acc-pv__ty,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__ty,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__ty{ animation:tt-pv-type 7s infinite steps(5,end); }
.acc-pv--klienti.is-loop .acc-pv__c1,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__c1,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__c1{ animation:tt-pv-hide 7s infinite; }
.acc-pv--klienti.is-loop .acc-pv__c3,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__c3,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__c3{ animation:tt-pv-hide 7s infinite; }
.acc-pv--klienti.is-loop .acc-pv__c2,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__c2,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__c2{ animation:tt-pv-hl 7s infinite; }
.acc-pv--klienti.is-loop .acc-pv__card,
.tt-site .acc-rail__i--paid:hover .acc-pv--klienti .acc-pv__card,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--klienti .acc-pv__card{ animation:tt-pv-card 7s infinite; }
/* Fotografie preview: a 3×2 gallery fills, the last photo is approved. */
.acc-pv__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.acc-pv.acc-pv--foto,
.acc-locked__pic .acc-pv.acc-pv--foto{ height:auto; }   /* the grid sets the height — a fixed one cut the second row off */
.acc-pv__grid > span{ aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:rgba(242,238,228,.1); }
.acc-pv__grid img{ width:100%; height:100%; border:0; border-radius:0; }
.acc-pv__st{ display:flex; justify-content:flex-end; }
.acc-pv__st em{ position:relative; min-width:130px; height:20px; border-radius:999px; overflow:hidden; background:#e0603a;
  font-style:normal; font-size:10.5px; font-weight:800; color:#fff; }
.acc-pv__st em i{ position:absolute; inset:0; display:grid; place-items:center; font-style:normal; }
.acc-pv__st em i + i{ opacity:0; }
.acc-pv--foto.is-loop .acc-pv__grid > span,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__grid > span,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__grid > span{ animation:tt-pv-tile 6s infinite both; }
.acc-pv--foto.is-loop .acc-pv__t2,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__t2,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__t2{ animation-delay:0.25s; }
.acc-pv--foto.is-loop .acc-pv__t3,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__t3,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__t3{ animation-delay:0.50s; }
.acc-pv--foto.is-loop .acc-pv__t4,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__t4,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__t4{ animation-delay:0.75s; }
.acc-pv--foto.is-loop .acc-pv__t5,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__t5,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__t5{ animation-delay:1.00s; }
.acc-pv--foto.is-loop .acc-pv__t6,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__t6,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__t6{ animation-delay:1.25s; }
.acc-pv--foto.is-loop .acc-pv__st em,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__st em,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__st em{ animation:tt-pv-conf 6s infinite; }
.acc-pv--foto.is-loop .acc-pv__st em i:first-child,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__st em i:first-child,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__st em i:first-child{ animation:tt-pv-out 6s infinite; }
.acc-pv--foto.is-loop .acc-pv__st em i + i,
.tt-site .acc-rail__i--paid:hover .acc-pv--foto .acc-pv__st em i + i,
.tt-site .acc-rail__i--paid:focus-visible .acc-pv--foto .acc-pv__st em i + i{ animation:tt-pv-pop 6s infinite; }
@keyframes tt-pv-tile{ 0%{ opacity:0; transform:scale(.6); } 10%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes tt-pv-in{ 0%{ opacity:0; transform:translateX(18px); } 8%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes tt-pv-conf{ 0%,42%{ background:#e0603a; } 48%,100%{ background:#2f9e70; } }
@keyframes tt-pv-out{ 0%,42%{ opacity:1; } 48%,100%{ opacity:0; } }
@keyframes tt-pv-pop{ 0%,42%{ opacity:0; transform:scale(.6); } 50%{ opacity:1; transform:scale(1.15); } 56%,100%{ opacity:1; transform:none; } }
@keyframes tt-pv-cur{ 0%,25%{ opacity:0; transform:translate(-60px,50px); } 35%{ opacity:1; transform:none; } 40%{ transform:scale(.7); } 44%{ transform:scale(1); } 55%{ opacity:1; } 62%,100%{ opacity:0; } }
@keyframes tt-pv-ph{ 0%,14%{ opacity:1; } 16%,94%{ opacity:0; } 100%{ opacity:1; } }
@keyframes tt-pv-type{ 0%,16%{ width:0; } 30%,94%{ width:5.2ch; } 100%{ width:0; } }
@keyframes tt-pv-hide{ 0%,30%{ opacity:1; max-height:60px; } 38%,92%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin:-4px 0; } 100%{ opacity:1; max-height:60px; } }
@keyframes tt-pv-hl{ 0%,38%{ box-shadow:none; } 44%,92%{ box-shadow:0 0 0 2px #cfe05a; background:rgba(207,224,90,.14); } }
@keyframes tt-pv-card{ 0%,46%{ opacity:0; transform:translateY(10px); } 54%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .acc-pv *{ animation:none !important; }
  .acc-pv__card{ opacity:1; }
}

/* The locked page itself: the drawing on a dark panel beside the explanation. */
.acc-locked{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:28px; align-items:center;
  padding:28px; border-radius:22px; background:var(--surface); border:1px solid var(--line); }
.acc-locked__pic{ padding:18px; border-radius:18px; background:var(--forest,#153427); }
.acc-locked__pic .acc-pv{ height:240px; }
.acc-locked__body{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.acc-locked__body h1{ margin:4px 0 0; font-family:var(--disp); font-size:30px; line-height:1.1; letter-spacing:-.02em; }
.acc-locked__lead{ margin:0; color:var(--ink-2); line-height:1.55; }
.acc-locked__k{ margin:8px 0 0; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.acc-locked__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.acc-locked__list li{ position:relative; padding-left:26px; line-height:1.45; }
.acc-locked__list li::before{ content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:var(--lime,#cfe05a); color:var(--forest,#153427); font-size:11px; font-weight:800; display:grid; place-items:center; }
.acc-locked__cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
.acc-locked__price{ font-weight:700; color:var(--ink); }
@media (max-width:760px){
  .acc-locked{ grid-template-columns:minmax(0,1fr); padding:18px; }
}

/* A paid action inside a free page — the review reply, a doctor's contacts. */
.acc-plan-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 12px;
  border:1px dashed var(--line); border-radius:12px; font-size:13.5px; color:var(--ink-2); }

/* Zamestnanci: a doctor's contacts and certificates (inc/platform-doctors.php). */
.acc-docedit{ margin-top:6px; }
.acc-docedit > summary{ list-style:none; cursor:pointer; align-self:flex-start; display:inline-flex; }
.acc-docedit > summary::-webkit-details-marker{ display:none; }
.acc-docedit[open] > summary{ margin-bottom:12px; }
.acc-docedit__f{ display:grid; gap:10px; margin-bottom:14px; }
.acc-certs{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.acc-certs li{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--line); border-radius:10px; }
.acc-certs li > a{ flex:1; min-width:0; font-weight:600; }
.acc-certs form{ margin:0; }

/* QA 2026-10-22: "Dnes" next to another day's date read like a caption of that date ("piatok,
   23. októbra Dnes"). A pill with a back arrow reads as what it is — a way back to today. */
.tt-site .acc-today{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:4px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface, #fff); }
.tt-site .acc-today::before{ content:"←"; font-weight:400; }
.tt-site .acc-today:hover{ border-color:var(--ink); }