/* ============================================================
   7calendar — design system (production)
   Ported from the redesign handoff. Geist + JetBrains Mono.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary:#393185; --primary-700:#2f297097; --primary-ink:#2b2566;
  --primary-soft:#efeef7; --primary-soft-2:#e3e1f1;
  --accent:#ff003c; --accent-ink:#d60033; --accent-soft:#ffe6ec;

  --ink:#434242; --gray-900:#2c2b2b; --gray-700:#525151; --gray-600:#6b6a6a;
  --gray-500:#757575; --gray-400:#9b9a9b; --gray-300:#d9d8da; --gray-200:#e9e8eb;
  --gray-100:#f3f2f5; --gray-50:#f8f7fa; --white:#fff;
  --bg:#fbfbfc; --surface:#fff; --line:#e9e8eb;

  --font-sans:'Geist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --h-weight:700; --h-track:-0.02em;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --sh-xs:0 1px 2px rgba(40,38,60,.05);
  --sh-sm:0 2px 6px rgba(40,38,60,.06), 0 1px 2px rgba(40,38,60,.04);
  --sh-md:0 8px 24px rgba(40,38,60,.08), 0 2px 6px rgba(40,38,60,.05);
  --sh-lg:0 20px 48px rgba(40,38,60,.13), 0 6px 16px rgba(40,38,60,.06);
  --sh-primary:0 8px 22px rgba(57,49,133,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4 { font-weight:var(--h-weight); letter-spacing:var(--h-track); color:var(--gray-900); line-height:1.08; margin:0; text-wrap:balance; }
a { color:inherit; text-decoration:none; }
img, svg { display:block; }
button { font-family:inherit; cursor:pointer; }

.wrap { max-width:1200px; margin-inline:auto; padding-inline:24px; }
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); font-weight:500; }
.muted { color:var(--gray-600); }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; z-index:200; background:#fff; padding:10px 16px; border-radius:var(--r-sm); box-shadow:var(--sh-md); }

.step-motif { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(-27deg, transparent 0 22px, rgba(57,49,133,.045) 22px 23px, transparent 23px 46px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); }

/* ============================ HEADER ============================ */
.hd { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.hd__inner { display:flex; align-items:center; gap:20px; height:68px; }
@media (max-width:1320px) { .hd__inner { gap:12px; } }
/* The year shortcuts are secondary (also on the yearly tab/drawer); drop them before the
   primary period tabs (.seg) would get squeezed, so "Daily" never clips off the right. */
@media (max-width:1200px) { .hd .hd__yearnav { display:none; } } /* .hd ancestor beats the later .hd__nav{display:flex} */
.hd__logo { height:30px; flex:none; }
.hd__logo img { height:100%; width:auto; }
.hd__nav { display:flex; align-items:center; gap:4px; margin-left:6px; }
.hd__yr { font-size:14px; font-weight:600; color:var(--gray-600); padding:7px 12px; border-radius:var(--r-pill); transition:.15s var(--ease); }
.hd__yr:hover { color:var(--gray-900); background:var(--gray-100); }
.hd__yr.is-active { color:var(--primary); background:var(--primary-soft); }
.hd__spacer { flex:1; }
.hd__right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.seg { display:inline-flex; background:var(--gray-100); padding:4px; border-radius:var(--r-pill); border:1px solid var(--line); }
/* In the header, the period tabs yield space first so the language switcher + account
   button are never pushed off-screen (long localized tabs would otherwise clip them);
   the tab strip scrolls horizontally only when it genuinely runs out of room. */
.hd .seg { flex-shrink:0; min-width:0; overflow-x:auto; scrollbar-width:none; }
.hd .seg::-webkit-scrollbar { display:none; }
.hd .seg a { padding:7px 11px; } /* tighter than the 16px default so all 5 (long ru) period tabs fit */
.seg button, .seg a { border:0; background:transparent; color:var(--gray-600); font-size:14px; font-weight:600; padding:7px 16px; border-radius:var(--r-pill); transition:.18s var(--ease); white-space:nowrap; }
.seg button:hover, .seg a:hover { color:var(--gray-900); }
.seg button.is-active, .seg a.is-active { background:var(--white); color:var(--primary); box-shadow:var(--sh-sm); }

/* In-page period tabs */
.tabs { display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--gray-100); padding:4px; border-radius:var(--r-pill); border:1px solid var(--line); }
.tabs a { font-size:14px; font-weight:600; color:var(--gray-600); padding:7px 16px; border-radius:var(--r-pill); transition:.16s var(--ease); }
.tabs a:hover { color:var(--gray-900); }
.tabs a.is-active { background:#fff; color:var(--primary); box-shadow:var(--sh-sm); }

/* Language / country selector */
.lang { position:relative; }
.lang__btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--white); padding:8px 12px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--gray-700); transition:.15s var(--ease); }
.lang__btn:hover { border-color:var(--gray-300); box-shadow:var(--sh-sm); }
.lang__flag { font-size:16px; line-height:1; }
.lang__code { font-weight:700; letter-spacing:.04em; line-height:1; } /* interface-language button = ISO code only (RU/EN/…) */
.lang__chev { width:14px; height:14px; color:var(--gray-400); transition:transform .2s var(--ease); }
.lang.open .lang__chev { transform:rotate(180deg); }
.lang__pop { position:absolute; right:0; top:calc(100% + 10px); width:268px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:10px; z-index:80; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s var(--ease); }
.lang.open .lang__pop { opacity:1; visibility:visible; transform:translateY(0); }
.lang__search { width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px 9px 34px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8989' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
.lang__search:focus { outline:none; border-color:var(--primary); background-color:var(--white); }
.lang__list { margin-top:8px; max-height:260px; overflow-y:auto; }
.lang__opt { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent; padding:9px 10px; border-radius:var(--r-sm); font-size:14px; color:var(--gray-700); font-weight:500; }
.lang__opt:hover { background:var(--gray-100); }
.lang__opt.is-active { color:var(--primary); font-weight:600; }
.lang__opt.is-active::after { content:"✓"; margin-left:auto; color:var(--primary); }

/* account menu (person icon + dropdown), right of the language switcher */
.acct { position:relative; flex-shrink:0; }
.acct__btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; width:42px; height:42px; padding:0; border:1px solid var(--line); background:var(--white); border-radius:var(--r-pill); color:var(--gray-700); font:inherit; font-size:14px; font-weight:600; transition:.15s var(--ease); cursor:pointer; }
.acct__btn:hover { border-color:var(--gray-300); box-shadow:var(--sh-sm); }
.acct__btn.is-auth { border-color:var(--primary); color:var(--primary); }
.acct__icowrap { position:relative; display:inline-flex; flex:none; }
.acct__icon { width:21px; height:21px; flex:none; }
/* Header icon buttons (calendar shortcut → "My calendars", + the account person icon):
   round, icon-only at every width. */
.hd__icobtn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid var(--line); background:var(--white); border-radius:var(--r-pill); color:var(--gray-700); transition:.15s var(--ease); cursor:pointer; }
.hd__icobtn:hover { border-color:var(--gray-300); box-shadow:var(--sh-sm); color:var(--primary); }
.hd__icobtn svg { width:21px; height:21px; flex:none; }
.acct__dot { position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:#1f8a4c; border:2px solid var(--white); }
.acct__pop { position:absolute; right:0; top:calc(100% + 10px); width:260px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:8px; z-index:80; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s var(--ease); }
.acct.open .acct__pop { opacity:1; visibility:visible; transform:translateY(0); }
.acct__hd { padding:8px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.acct__name { font-weight:600; font-size:14px; color:var(--gray-700); word-break:break-all; line-height:1.25; }
.acct__sub { font-size:12px; color:var(--gray-400); margin-top:3px; }
.acct__sec { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); padding:8px 10px 4px; }
.acct__item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent; padding:9px 10px; border-radius:var(--r-sm); font-size:14px; color:var(--gray-700); font-weight:500; cursor:pointer; text-decoration:none; }
.acct__item:hover { background:var(--gray-100); }
.acct__item--strong { font-weight:600; color:var(--primary); }
.acct__cal { font-weight:500; }
.acct__cdot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.acct__divider { height:1px; background:var(--line); margin:6px 4px; }
.acct__logout { color:#c7344e; }

.burger { display:none; border:1px solid var(--line); background:var(--white); width:42px; height:42px; border-radius:var(--r-sm); align-items:center; justify-content:center; }
.burger svg { width:20px; height:20px; color:var(--gray-700); }

/* ============================ BUTTONS ============================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:var(--r-sm); font-size:14px; font-weight:600; padding:11px 18px; transition:.16s var(--ease); white-space:nowrap; }
.btn svg { width:16px; height:16px; }
.btn--primary { background:var(--primary); color:#fff; box-shadow:var(--sh-primary); }
.btn--primary:hover { background:var(--primary-ink); transform:translateY(-1px); }
.btn--ghost { background:var(--white); border-color:var(--line); color:var(--gray-700); }
.btn--ghost:hover { border-color:var(--gray-300); color:var(--gray-900); box-shadow:var(--sh-sm); }
.btn--accent { background:var(--accent); color:#fff; }
.btn--accent:hover { background:var(--accent-ink); transform:translateY(-1px); }
.btn--lg { padding:14px 26px; font-size:15px; }

/* ============================ SECTIONS / CARDS ============================ */
.section { padding-block:84px; position:relative; }
.section--tight { padding-block:48px; }
.section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.section__head h2 { font-size:clamp(26px,3vw,34px); }
.section__head p { margin:8px 0 0; color:var(--gray-600); max-width:56ch; }
.section__link { color:var(--primary); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; flex:none; }
.section__link:hover { gap:9px; }

.grid { display:grid; gap:22px; }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); display:flex; flex-direction:column; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--primary-soft-2); }
.card__thumb { position:relative; aspect-ratio:4/3; background:var(--gray-50); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:18px; overflow:hidden; }
.card__thumb svg { width:100%; height:100%; }
.card__thumb img { width:100%; height:100%; object-fit:contain; object-position:center; }
.card__thumb .pc-stage { width:100%; height:100%; }
.card__thumb .pc-page { box-shadow:0 1px 4px rgba(40,38,60,.14); }
.paperwrap .pc-stage { width:100%; }
.paperwrap .pc-page { box-shadow:var(--sh-lg); }
/* Facade hero image (shown until the live preview is mounted). Same shadow as the
   live sheet so the swap is seamless; aspect-ratio (set inline) reserves space → no CLS. */
.paperwrap .pc-hero { width:100%; height:auto; display:block; box-shadow:var(--sh-lg); background:#fff; }
.paperwrap [hidden] { display:none !important; }
.card__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.card__title { font-size:16px; font-weight:600; color:var(--gray-900); }
.card__meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--gray-600); background:var(--gray-100); border-radius:var(--r-pill); padding:3px 9px; }
.card__actions { display:flex; gap:8px; margin-top:auto; }
.card__actions .btn { flex:1; padding:9px 10px; font-size:13px; }

/* Month chip rail */
.railwrap { margin-top:28px; }
.rail { display:flex; gap:8px; overflow-x:auto; padding:6px 2px 14px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.rail::-webkit-scrollbar { height:8px; }
.rail::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:99px; }
.chip { flex:none; border:1px solid var(--line); background:var(--white); padding:9px 16px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--gray-700); transition:.15s var(--ease); scroll-snap-align:start; }
.chip:hover { border-color:var(--gray-300); color:var(--gray-900); }
.chip.is-active { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--sh-primary); }
.chip small { opacity:.7; font-weight:500; margin-left:4px; }

/* Mini month widget */
.cal { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); padding:22px; width:100%; }
.cal__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal__month { font-size:18px; font-weight:700; color:var(--gray-900); }
.cal__nav { display:flex; gap:6px; }
.cal__nav button { width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--white); color:var(--gray-600); display:flex; align-items:center; justify-content:center; }
.cal__nav button:hover { background:var(--gray-100); color:var(--gray-900); }
.cal__nav svg { width:15px; height:15px; }
.cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal__dow { text-align:center; font-size:11px; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; padding-bottom:6px; }
/* Georgian (<html lang="ka">) is unicameral — uppercasing localized chrome text yields
   Mtavruli, inconsistent with the calendar sheet (which is already guarded). */
html[lang="ka"] .cal__dow, html[lang="ka"] .eyebrow { text-transform: none; }
.cal__day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; color:var(--gray-700); border-radius:var(--r-sm); position:relative; transition:.12s var(--ease); }
.cal__day:hover { background:var(--gray-100); }
.cal__day.is-muted { color:var(--gray-300); }
.cal__day.is-weekend { color:var(--gray-500); }
.cal__day.is-today { background:var(--accent); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(255,0,60,.35); }
.cal__day.is-holiday::after { content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--accent); }
.cal__day.is-today.is-holiday::after { background:#fff; }

/* Feature cards */
.feat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:.2s var(--ease); }
.feat:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.feat__ico { width:46px; height:46px; border-radius:var(--r-md); background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat__ico svg { width:23px; height:23px; }
.feat h3 { font-size:17px; margin-bottom:7px; }
.feat p { margin:0; font-size:14.5px; color:var(--gray-600); }

.compat { display:flex; flex-wrap:wrap; gap:10px; }
.compat span { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--gray-700); border:1px solid var(--line); background:var(--white); border-radius:var(--r-pill); padding:8px 16px; }
.compat span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); }
.band { background:var(--gray-50); border-block:1px solid var(--line); }
.compat-wrap { margin-top:46px; padding-top:36px; border-top:1px solid var(--line); }
.compat-wrap .eyebrow { margin-bottom:14px; }

/* Ads + SEO prose */
/* Ad slot. min-height RESERVES space so the page does not jump when the unit fills
   (CLS): the reserve steps up with the viewport, because AdSense serves taller creatives
   on wider screens. It is a floor only — there is deliberately NO max-height, so a taller
   unit is free to grow instead of being clipped. */
.ad { margin:26px auto; display:flex; justify-content:center; align-items:center; min-height:100px; }
.ad .adsbygoogle { width:100%; }
@media (min-width:600px)  { .ad { min-height:180px; } }
@media (min-width:1000px) { .ad { min-height:250px; } }
/* ...but a reserve that is never filled is just a hole in the page. AdSense stamps the
   unit with data-ad-status="unfilled" when it had no ad to serve, so collapse the slot in
   that case: space is held while the request is in flight (no jump), and given back when
   the answer is "nothing". */
.ad:has(.adsbygoogle[data-ad-status="unfilled"]) { min-height:0; margin:0; }
.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }
.prose { max-width:74ch; color:var(--gray-700); font-size:15.5px; }
.prose h2 { font-size:22px; margin:26px 0 10px; color:var(--gray-900); }
.prose p { margin:0 0 12px; }
.prose ul { margin:0 0 14px; padding-left:20px; }
.prose li { margin:5px 0; }
.prose a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }

/* Listing / generic page head */
.page-head { padding-block:24px 8px; }
.page-head h1 { font-size:clamp(30px,4vw,46px); margin-top:10px; }
.page-head p { color:var(--gray-600); margin-top:12px; max-width:62ch; }
.page-head .tabs { margin-bottom:18px; }
/* Breadcrumb hierarchy on listing pages */
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--gray-600); margin-bottom:14px; }
.crumbs a { color:var(--gray-600); }
.crumbs a:hover { color:var(--primary); }
.crumbs__sep { color:var(--gray-400); }
.crumbs__cur { color:var(--gray-900); font-weight:600; min-width:0; max-width:min(60ch,100%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The period switcher lives in the header on desktop; the in-page copy is for mobile,
   where the header tabs collapse into the drawer. (`.hero .hero__seg` out-specifies the
   later base `.hero__seg { display:inline-flex }` so source order doesn't matter.) */
@media (min-width:921px) { .hero .hero__seg, .page-head .tabs { display:none; } }

/* ============================ FOOTER ============================ */
.ft { border-top:1px solid var(--line); background:var(--white); padding-block:56px 36px; margin-top:40px; }
.ft__grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; }
.ft__logo { height:26px; margin-bottom:14px; }
.ft__logo img { height:100%; }
.ft__about { font-size:14px; color:var(--gray-600); max-width:30ch; }
.ft h4 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); font-weight:600; margin-bottom:14px; }
.ft__col a { display:block; font-size:14px; color:var(--gray-700); padding:5px 0; transition:.14s var(--ease); }
.ft__col a:hover { color:var(--primary); }
.ft__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--gray-500); }
.ft__bar nav { display:flex; gap:22px; }
.ft__bar a:hover { color:var(--gray-900); }

/* ============================ HOME HERO / WIDGET ============================ */
.hero { position:relative; overflow:hidden; padding-block:48px 40px; background:linear-gradient(180deg,var(--white),var(--bg)); border-bottom:1px solid var(--line); }
.hero__inner { position:relative; z-index:1; text-align:center; max-width:780px; margin-inline:auto; }
.hero__h1 { font-size:clamp(32px,4.6vw,54px); letter-spacing:-0.03em; line-height:1.06; }
.hero__sub { font-size:clamp(16px,2vw,19px); color:var(--gray-600); max-width:60ch; margin:20px auto 0; text-wrap:pretty; }
.seg--lg { padding:5px; margin-top:30px; }
.seg--lg button, .seg--lg a { padding:10px 22px; font-size:15px; }
.hero__seg { display:inline-flex; }
.hero__stats { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:30px; color:var(--gray-600); font-size:14px; }
.hero__stats strong { color:var(--gray-900); font-weight:700; }
.hero__stats .dot { width:4px; height:4px; border-radius:50%; background:var(--gray-300); }

.widget__grid { display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; }
.widget__copy h2 { font-size:clamp(26px,3vw,34px); margin:10px 0 12px; }
.widget__legend { display:flex; flex-wrap:wrap; gap:18px; margin:22px 0 26px; font-size:14px; color:var(--gray-600); }
.widget__legend span { display:inline-flex; align-items:center; gap:8px; }
.lg { width:13px; height:13px; border-radius:4px; display:inline-block; }
.lg--today { background:var(--accent); }
.lg--holiday { background:var(--white); border:1px solid var(--line); position:relative; }
.lg--holiday::after { content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); }
.lg--weekend { background:var(--gray-100); border:1px solid var(--line); }

/* ============================ CALENDAR PAGE ============================ */
.cp__top { padding-block:30px 6px; }
.crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-500); flex-wrap:wrap; }
.crumb a:hover { color:var(--primary); }
.crumb__cur { color:var(--gray-700); font-weight:600; }
.cp__h1 { font-size:clamp(30px,4vw,46px); margin-top:12px; }
.cp__lead { color:var(--gray-600); margin-top:12px; max-width:62ch; font-size:16px; }
.cp__grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:start; padding-block:28px 36px; }

.monthbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.monthbar__nav { width:40px; height:40px; flex:none; border:1px solid var(--line); background:var(--white); border-radius:var(--r-sm); color:var(--gray-600); display:flex; align-items:center; justify-content:center; transition:.15s var(--ease); }
.monthbar__nav:hover { background:var(--gray-100); color:var(--gray-900); }
.monthbar__nav svg { width:16px; height:16px; }
.monthbar__label { font-size:18px; font-weight:700; color:var(--gray-900); min-width:130px; }
.monthbar__chips { display:flex; gap:6px; overflow-x:auto; flex:1; margin-left:6px; padding-bottom:4px; scrollbar-width:none; }
.monthbar__chips::-webkit-scrollbar { display:none; }
.mchip { flex:none; border:1px solid var(--line); background:var(--white); border-radius:var(--r-pill); padding:7px 13px; font-size:13px; font-weight:600; color:var(--gray-600); transition:.14s var(--ease); }
.mchip:hover { color:var(--gray-900); border-color:var(--gray-300); }
.mchip.is-active { background:var(--primary); border-color:var(--primary); color:#fff; }

.paperwrap { position:relative; background:var(--gray-100); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,3.4vw,44px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.paperwrap::before { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(-27deg, transparent 0 26px, rgba(57,49,133,.04) 26px 27px, transparent 27px 54px); pointer-events:none; }

.sheet { position:relative; width:100%; background:var(--white); border-radius:8px; box-shadow:var(--sh-lg); border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
.sheet__head { display:flex; align-items:baseline; justify-content:space-between; padding:clamp(14px,2.2vw,26px) clamp(16px,2.6vw,32px); border-bottom:2px solid var(--primary); }
.sheet__mo { font-size:clamp(22px,3.6vw,40px); font-weight:800; color:var(--primary); letter-spacing:-.025em; }
.sheet__yr { font-family:var(--font-mono); font-size:clamp(13px,1.6vw,20px); color:var(--gray-400); }
.sheet__grid { flex:1; display:grid; grid-template-columns:repeat(7,1fr); background:var(--line); gap:1px; padding:1px; }
.sheet__dow { background:var(--white); text-align:center; font-size:clamp(10px,1.1vw,13px); font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; padding:9px 4px; }
.sheet__dow.is-wend { color:var(--primary); }
.sheet__cell { background:var(--white); padding:6px clamp(6px,.8vw,10px); position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; }
.sheet__n { font-size:clamp(12px,1.5vw,18px); font-weight:600; color:var(--gray-700); line-height:1; }
.sheet__cell.is-out { background:#fcfbfd; }
.sheet__cell.is-out .sheet__n { color:var(--gray-300); }
.sheet__cell.is-wend { background:var(--gray-50); }
.sheet__cell.is-hol .sheet__n { color:var(--accent-ink); }
.sheet__cell.is-today { background:var(--accent); }
.sheet__cell.is-today .sheet__n, .sheet__cell.is-today .sheet__hn { color:#fff; }
.sheet__hn { margin-top:auto; font-size:clamp(8px,.86vw,11px); font-weight:600; color:var(--accent-ink); line-height:1.15; text-wrap:pretty; padding-top:4px; }
/* hourly (weekly/daily) preview rows */
.sheet__hours { flex:1; display:flex; flex-direction:column; padding:clamp(10px,1.6vw,20px); gap:0; }
.sheet__hour { display:flex; gap:12px; align-items:flex-start; border-top:1px solid var(--line); padding:8px 2px; }
.sheet__hour:first-child { border-top:0; }
.sheet__htime { font-family:var(--font-mono); font-size:clamp(10px,1.1vw,13px); color:var(--gray-500); min-width:48px; }
.sheet__hline { flex:1; border-bottom:1px dotted var(--gray-300); height:1.1em; }

/* Settings panel */
.cp__side { position:sticky; top:86px; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:24px; }
.panel__title { font-size:18px; margin-bottom:18px; }
.panel__rule { border:0; border-top:1px solid var(--line); margin:22px 0; }
/* settings grouped into labelled sections (Format / Holidays / Display) */
.panel__group { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.panel__group:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.panel__grouptitle { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); font-weight:700; margin:0 0 14px; }
.panel__group .field:last-child { margin-bottom:0; }
.field { margin-bottom:18px; }
.field:last-child { margin-bottom:0; }
.field__label { display:block; font-size:13px; font-weight:600; color:var(--gray-700); margin-bottom:10px; }
.field__row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.field__row .field__label { margin-bottom:0; }
/* family/planner count stepper (segmented −  value  +) + per-person name inputs */
.fam-stepper { display:inline-flex; align-items:stretch; width:fit-content; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--white); }
.fam-step { width:44px; border:0; background:none; color:var(--gray-500); font-size:20px; line-height:1; cursor:pointer; transition:.14s var(--ease); display:inline-flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none; }
.fam-step:hover:not(:disabled) { background:var(--gray-100); color:var(--primary); }
.fam-step:active:not(:disabled) { background:var(--gray-200); }
.fam-step:disabled { color:var(--gray-300); cursor:not-allowed; }
.fam-step:focus-visible { outline:none; background:var(--primary-soft, rgba(57,49,133,.12)); color:var(--primary); }
/* the value is a read-only display, not an editable field → no caret/focus ring */
.fam-stepper input { width:56px; padding:11px 4px; text-align:center; border:0; border-inline:1px solid var(--line); font:inherit; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--gray-900); background:none; pointer-events:none; }
.fam-stepper input:focus { outline:none; }
.fam-names { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fam-name { display:flex; align-items:center; gap:7px; min-width:0; } /* min-width:0 lets the 1fr track shrink the input → no overflow past the panel */
.fam-name__dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--c,#888); }
.fam-name input { flex:1; min-width:0; font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--gray-900); background:var(--white); }
.fam-name input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft, rgba(57,49,133,.12)); }
/* Family SHEET mode (logged-in): autocomplete name rows + calendar dropdown */
.fam-names:has(.fam-row) { grid-template-columns:1fr; }
.fam-row { position:relative; display:flex; align-items:center; gap:7px; min-width:0; }
.fam-row .fam-name__dot { flex:none; }
.fam-ac-input { flex:1; min-width:0; font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--gray-900); background:var(--white); }
.fam-ac-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft, rgba(57,49,133,.12)); }
.fam-lock { flex:none; font-size:12px; opacity:.6; }
.fam-del { flex:none; border:0; background:none; color:var(--gray-400); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; }
.fam-del:hover { color:#d9534f; }
.fam-ac { position:absolute; top:100%; left:16px; right:0; z-index:30; margin-top:3px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:0 10px 30px rgba(0,0,0,.14); overflow:hidden; }
.fam-ac-opt { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:none; padding:8px 11px; font:inherit; font-size:14px; color:var(--gray-900); cursor:pointer; }
.fam-ac-opt:hover { background:var(--gray-100); }
.fam-ac-new { color:var(--primary); border-top:1px solid var(--line); }
.fam-ac-src { margin-left:auto; font-size:11px; color:var(--gray-400); text-transform:uppercase; }
.seg--block { display:flex; width:100%; }
.seg--block button { flex:1; }
.lang--block { display:block; }
.lang--block .lang__pop { width:100%; }
.lang--block.is-disabled { opacity:.45; pointer-events:none; }
.lang__btn--block { display:flex; width:100%; }
.lang__btn--block .lang__chev { margin-left:auto; }

.switch { width:44px; height:25px; flex:none; border-radius:99px; background:var(--gray-300); border:0; position:relative; transition:.18s var(--ease); padding:0; }
.switch span { position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:.18s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.22); }
.switch.is-on { background:var(--primary); }
.switch.is-on span { left:22px; }

.check { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500; color:var(--gray-700); cursor:pointer; }
.check input { position:absolute; opacity:0; pointer-events:none; }
.check__box { width:20px; height:20px; flex:none; border:1.5px solid var(--gray-300); border-radius:6px; display:inline-flex; align-items:center; justify-content:center; transition:.15s var(--ease); }
.check input:checked + .check__box { background:var(--primary); border-color:var(--primary); }
.check input:checked + .check__box::after { content:""; width:5px; height:10px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(43deg) translateY(-1px); }

.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { border:1px solid var(--line); background:var(--white); border-radius:var(--r-pill); padding:8px 16px; font-size:14px; font-weight:600; color:var(--gray-700); transition:.14s var(--ease); text-transform:uppercase; letter-spacing:.02em; }
.pill:hover { border-color:var(--gray-300); color:var(--gray-900); }
.pill.is-active { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }

.dl { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
.dl__print { width:100%; margin-bottom:8px; }
.dl__hint { font-size:12px; color:var(--gray-600); line-height:1.4; text-align:center; margin:0 0 12px; }
.dl__row { display:flex; gap:10px; }
.dl__row + .dl__row { margin-top:10px; }
.dl__row .btn { flex:1; }
.dl__note { font-size:12px; color:var(--gray-500); text-align:center; margin:14px 0 0; }

/* Mobile: surface the primary print/download actions right under the preview, above the
   (still scrollable) settings groups — so the main CTA isn't buried below the panel. */
@media (max-width:920px) {
  .panel { display:flex; flex-direction:column; }
  .panel__title { order:0; }
  .dl { order:1; margin-top:14px; border-top:0; padding-top:0; }
  .panel__group { order:2; }
  .panel__group:first-of-type { border-top:1px solid var(--line); padding-top:18px; margin-top:6px; }
}

/* ============================ CALCULATOR ============================ */
.cinput, .cselect { width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; font:inherit; font-size:15px; color:var(--ink); background:var(--white); transition:.15s var(--ease); }
.cinput:focus, .cselect:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.cselect { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8989' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.wd-row { display:flex; gap:12px; align-items:flex-end; }
.wd-row .field { flex:1; }
.wd-row .field:first-child { flex:0 0 96px; }
.calc-form .btn { margin-top:18px; }
#duForm .btn, #wdForm .btn { margin-top:18px; }

.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.stat { background:var(--gray-50); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; }
.stat__label { font-size:12.5px; color:var(--gray-600); line-height:1.35; }
.stat__value { font-size:20px; font-weight:700; color:var(--gray-900); margin-top:8px; font-family:var(--font-mono); }

.ctable-wrap { max-height:560px; overflow-y:auto; margin:0 -6px; }
.ctable { width:100%; border-collapse:collapse; font-size:14px; }
.ctable th { position:sticky; top:0; background:var(--white); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); font-weight:700; padding:8px 8px; border-bottom:1px solid var(--line); }
.ctable td { padding:8px 8px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
.ctable tr:hover td { background:var(--gray-50); }
.ctable a { color:var(--primary); font-weight:600; }
.ctable a:hover { text-decoration:underline; }

@media (max-width:760px) {
  .stat-grid { grid-template-columns:1fr; }
  .wd-row { flex-wrap:wrap; }
  .wd-row .field { flex:1 1 100%; }
  .wd-row .field:first-child { flex:1 1 100%; }
}

/* ============================ PRINT ============================ */
@media print {
  .hd, .ft, .cp__side, .cp__top, .monthbar, #similarSec, .band, .drawer, .section, .ad, .tabs { display:none !important; }
  html, body { margin:0 !important; padding:0 !important; background:#fff; }
  /* Detail-page print: the .pc-page is real mm size and the on-screen scale()
     transform is reset (print-calendar.css), so zero out every ancestor offset and
     the UA body margin — otherwise even an 8px body margin pushes the full-paper-
     sized sheet past the printable area onto a blank 2nd page. Paired with the
     @page rule (size + margin:0) injected by calendar.js → exactly one 1:1 sheet. */
  .wrap.cp__grid { max-width:none !important; margin:0 !important; padding:0 !important; }
  .cp__grid { display:block; }
  .cp__main { margin:0 !important; padding:0 !important; min-width:0; }
  /* paperwrap is a screen-only frame: display:flex centring + a clamp() padding that
     the responsive @media (max-width:1080px/760px) rules re-assert (those still match
     under print emulation and sit later in source, so they override a non-!important
     reset). That residual ~30px padding pushed the full-height sheet down AND right,
     spilling it onto a blank 2nd page. Force it flat with !important. */
  .paperwrap { background:#fff !important; border:0 !important; padding:0 !important; margin:0 !important; display:block !important; position:static !important; }
  .paperwrap::before { display:none; }
  .sheet { box-shadow:none; border:1px solid #bbb; aspect-ratio:auto !important; height:96vh; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px) {
  .ft__grid { grid-template-columns:1fr 1fr; gap:32px; }
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .cp__grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .cp__main { min-width:0; }
  .cp__side { position:static; }
  .paperwrap { padding:clamp(16px,4vw,32px); }
}
@media (max-width:920px) {
  .hd__nav, .hd .seg, .hd__yearnav { display:none; }
  .burger { display:inline-flex; }
  .hd__inner { gap:12px; }
}
@media (max-width:880px) {
  .widget__grid { grid-template-columns:1fr; gap:30px; }
  .widget__cal { max-width:420px; }
}
@media (max-width:760px) {
  .wrap { padding-inline:18px; }
  .section { padding-block:56px; }
  .grid--3 { grid-template-columns:1fr; }
  .section__head { flex-direction:column; align-items:flex-start; gap:10px; }
  .ft__grid { grid-template-columns:1fr 1fr; gap:26px; }
  .ft__bar { flex-direction:column; align-items:flex-start; gap:14px; }
  .hero { padding-block:46px 42px; }
  .hero__sub { font-size:16px; }
  .hero__seg { width:100%; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .hero__seg::-webkit-scrollbar { display:none; }
  .seg--lg button, .seg--lg a { padding:9px 18px; }
  .cp__top { padding-block:22px 2px; }
  .cp__lead { margin-top:10px; }
  .monthbar { flex-wrap:wrap; gap:10px; }
  .monthbar__label { min-width:0; flex:1; font-size:17px; }
  .monthbar__chips { order:3; flex:1 1 100%; width:100%; margin-left:0; margin-top:4px; }
  .panel { padding:20px; }
  .compat-wrap { margin-top:34px; padding-top:28px; }
}
@media (max-width:520px) {
  .grid--4 { grid-template-columns:1fr; }
  .hd__logo { height:26px; }
  .hd .lang__cur { display:none; }
  .hd .lang__btn { padding:8px 10px; }
  .pills { gap:6px; }
  .pill { padding:8px 14px; }
}

/* Mobile drawer */
.drawer { position:fixed; inset:0; z-index:100; visibility:hidden; }
.drawer.open { visibility:visible; }
.drawer__scrim { position:absolute; inset:0; background:rgba(20,18,30,.4); opacity:0; transition:.25s var(--ease); }
.drawer.open .drawer__scrim { opacity:1; }
.drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(82vw,340px); background:var(--white); box-shadow:var(--sh-lg); transform:translateX(100%); transition:transform .28s var(--ease); padding:22px; overflow-y:auto; }
.drawer.open .drawer__panel { transform:translateX(0); }
.drawer__close { position:absolute; top:18px; right:18px; border:0; background:var(--gray-100); width:38px; height:38px; border-radius:var(--r-sm); color:var(--gray-700); font-size:18px; }
.drawer h4 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); margin:22px 0 10px; }
.drawer__seg { display:flex; flex-wrap:wrap; gap:8px; }
.drawer__seg a, .drawer__seg button { border:1px solid var(--line); background:var(--white); border-radius:var(--r-pill); padding:9px 15px; font-size:14px; font-weight:600; color:var(--gray-700); }
.drawer__seg a.is-active, .drawer__seg button.is-active { background:var(--primary); border-color:var(--primary); color:#fff; }
.drawer__panel > a { display:block; padding:7px 0; color:var(--gray-700); font-weight:500; }
.drawer__panel > a:hover { color:var(--primary); }

/* Weekly day-columns: the "hours from / to" pair. The country picker is a custom
   dropdown, so these plain <select>s carry the panel's field styling themselves. */
.wc-range { display:flex; align-items:center; gap:8px; }
.wc-range .select { flex:1 1 0; min-width:0; padding:10px 8px; font:inherit; font-size:15px;
  color:var(--gray-900); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); appearance:none; -webkit-appearance:none; cursor:pointer; }
.wc-range .select:focus { outline:2px solid var(--indigo, #393185); outline-offset:1px; }
.wc-range__dash { color:var(--gray-500, #777); }

/* ============================================================
   Contact form + legal pages (/{lang}/contact|terms|privacy/)
   Reuses the form primitives above (.field, .field__label, .cinput);
   only the pieces those don't cover are defined here.
   ============================================================ */

/* One column, capped at a comfortable reading/target width. A form wider than
   this makes the eye travel from the end of an input back to the next label. */
.contact-form { max-width:560px; margin:0; }
.contact-form .field:last-of-type { margin-bottom:0; }

/* The message box: tall enough to invite more than one line, resizable only
   vertically so a drag can't break the page layout. */
textarea.cinput { min-height:160px; resize:vertical; line-height:1.5; display:block; }

/* The captcha answer is 1-2 digits — a full-width input would misrepresent it. */
.field--narrow .cinput { max-width:140px; }

.contact-form .btn { margin-top:22px; }

/* Honeypot. Deliberately NOT display:none: some bots skip hidden inputs, and the
   whole trick depends on them filling it in. Pushed off-screen instead, with
   aria-hidden + tabindex=-1 on the markup so people and screen readers never
   reach it. */
.hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Status banner. Left rule instead of a full tint: it reads as a message about
   the form rather than a coloured box competing with the page. */
.form-msg {
  max-width:560px; margin:0 0 22px; padding:14px 16px;
  border:1px solid var(--line); border-left:4px solid var(--gray-400);
  border-radius:var(--r-sm); background:var(--gray-50);
  font-size:14.5px; line-height:1.5; color:var(--gray-700);
}
.form-msg--ok { border-left-color:#1e7b34; background:#f2f9f4; color:#1c5c2c; }
.form-msg--error { border-left-color:#c8102e; background:#fdf3f4; color:#8f1020; }

/* "This is a translation, English is binding" notice on non-English legal pages. */
.legal-note {
  max-width:760px; margin:0 0 24px; padding:12px 14px;
  background:var(--gray-50); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:13.5px; line-height:1.5; color:var(--gray-600);
}
.legal-note a { color:var(--primary); }

@media (max-width:600px) {
  .contact-form, .form-msg { max-width:none; }
  .field--narrow .cinput { max-width:120px; }
}