/* Article pages: the timer's colours and type, a readable column, tables that scroll on phones. */ :root{color-scheme:light;--paper:#f5f5f7;--ink:#1d1d1f;--muted:#65656d;--accent:#0066cc;--accent-soft:#e8f1ff;--on-accent:#fff;--line:#dedee3;--card:#fff;--soft:#eaeaef;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif} :root[data-theme="dark"]{color-scheme:dark;--paper:#111113;--ink:#f5f5f7;--muted:#a1a1aa;--accent:#70b5ff;--accent-soft:#182d47;--on-accent:#07121f;--line:#323238;--card:#1c1c1f;--soft:#2c2c31} *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word} a{color:var(--accent);text-underline-offset:3px} [hidden]{display:none!important} .site-footer,.article{width:min(100% - 32px,720px);margin:0 auto} /* The header of every page, the timer's too: the logo, the switch between timer, calendar and guide in the middle, the theme. Its content has one width on every page, so switching sections leaves the logo and the switch in place. It spans the window and stays at the top; once the page scrolls, it turns to frosted glass over the text (.scrolled on ). */ :root{--glass:#f5f5f7b8;scroll-padding-top:80px} :root[data-theme="dark"]{--glass:#111113b8} .site-header{position:sticky;top:0;z-index:30;width:100%;margin:2px 0 6px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;column-gap:10px;padding:12px max(16px,calc((100% - 1080px)/2));transition:background-color .2s,box-shadow .2s} .scrolled .site-header{background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);box-shadow:0 1px 0 var(--line)} /* The brand: the square icon on phones, the wide logo from 720 px, and its name beside it from 960 px. */ .brand{grid-column:1;justify-self:start;display:flex;align-items:center;gap:10px;min-width:0;line-height:0;color:var(--ink);text-decoration:none} .brand-icon{display:block;width:32px;height:32px;flex-shrink:0} .brand-logo,.brand-name{display:none} .brand-name{font-size:18px;font-weight:700;letter-spacing:-.3px;line-height:1;white-space:nowrap} .brand-name span{color:var(--muted);font-weight:600} @media(min-width:720px){.brand-icon{display:none}.brand-logo{display:block;width:94px;height:26px;flex-shrink:0}} @media(min-width:960px){.brand-name{display:block}} .site-header .section-tabs{grid-column:2} .header-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:6px} .theme-toggle{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer} .theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .theme-toggle:hover,.theme-toggle:focus-visible{background:var(--soft);color:var(--ink)} .sun-icon,[data-theme="dark"] .moon-icon{display:none} [data-theme="dark"] .sun-icon{display:block} .header-cta,.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap} .header-cta:hover,.button:hover{filter:brightness(1.08)} .site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:48px;padding:20px 0 32px;border-top:1px solid var(--line);font-size:14px} .site-footer a{color:var(--muted)} /* Contact: the private report and partnership forms (public/assets/feedback.js) and the privacy page. */ .feedback-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px} .feedback-links button,.feedback-links a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:none;cursor:pointer} .feedback-links .link-icon{width:14px;height:14px;opacity:.85} .feedback-links button:hover,.feedback-links button:focus-visible,.feedback-links a:hover,.feedback-links a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px} button.button{gap:8px;border:0;font-family:inherit;cursor:pointer} .button .link-icon{width:17px;height:17px} .text-button{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .text-button .link-icon{width:15px;height:15px} .guide-report{margin:10px 0 0;color:var(--muted);font-size:14px} .article{padding-bottom:8px} .breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px;font-size:14px;color:var(--muted)} .breadcrumbs a{color:var(--muted)} /* Long words (Konfidencialnost, Arbeitstage, munkaszüneti) break with a hyphen in the page's language rather than overflow a phone. */ h1{margin:0 0 8px;font-size:clamp(28px,6vw,38px);line-height:1.15;letter-spacing:-.6px;-webkit-hyphens:auto;hyphens:auto} h2{margin:40px 0 12px;font-size:24px;line-height:1.25;letter-spacing:-.3px} h3{margin:28px 0 8px;font-size:19px;line-height:1.3} p,ul,ol{margin:0 0 16px} li+li{margin-top:4px} .lead{font-size:19px;color:var(--muted)} blockquote{margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--accent);background:var(--card);border-radius:0 12px 12px 0} blockquote p:last-child{margin-bottom:0} .table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)} table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45} th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;-webkit-hyphens:auto;hyphens:auto} tbody tr:last-child>*{border-bottom:0} thead th{font-size:13px;font-weight:600;color:var(--muted)} caption{padding:10px 12px 0;text-align:left;font-size:13px;color:var(--muted);caption-side:top} .numbers td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .numbers thead th:not(:first-child){text-align:right} .numbers tbody th{font-weight:500} .total>*{font-weight:650} .days .date{white-space:nowrap;font-variant-numeric:tabular-nums} .days .weekday{color:var(--muted);text-transform:uppercase;font-size:13px;white-space:nowrap} .days .weekday-inline{display:none} /* Phones: the weekday goes under the date, so date tables keep their width for the holiday names. */ @media(max-width:480px){.days thead th:nth-child(2),.days td.weekday{display:none}.days .weekday-inline{display:block;color:var(--muted);text-transform:uppercase;font-size:12px}} .days .off .date{color:var(--accent);font-weight:650} article>table{display:block;overflow-x:auto} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 20px} .facts div{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)} .facts dt{font-size:13px;color:var(--muted);line-height:1.35} .facts dd{margin:4px 0 0;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.4px} .rest-periods{list-style:none;padding:0} .rest-periods li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line)} .rest-periods li+li{margin-top:0} .rest-periods .range{font-weight:650} .rest-periods .length{padding:1px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:650} .rest-periods .reason{flex-basis:100%;color:var(--muted);font-size:15px} .next-off,.cta{margin:24px 0;padding:20px 22px;border-radius:18px;background:var(--accent-soft)} .next-off p,.cta p{margin:0} .next-off-label{font-size:13px;font-weight:650;letter-spacing:.8px;text-transform:uppercase;color:var(--accent)} .next-off-date{margin-top:6px!important;font-size:19px;font-weight:650;line-height:1.35} .next-off-name{margin-top:2px!important;font-size:16px;line-height:1.4} .next-off-in{margin-top:2px!important;font-size:30px;font-weight:750;letter-spacing:-.5px;color:var(--accent)} .next-off-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px!important;font-size:15px} .cta-title{font-size:19px;font-weight:650;margin-bottom:6px!important} .cta p+p{margin-bottom:14px} @media(max-width:480px){.numbers .optional{display:none}.numbers th,.numbers td{padding:8px 7px}body{font-size:16px}h2{font-size:21px}.site-header{column-gap:8px;margin:0 0 4px}.header-actions{gap:2px}.theme-toggle{width:36px;height:36px}.header-cta{padding:7px 12px;font-size:14px}th,td{padding:8px 9px}} /* The narrowest phones: tables of numbers and dates get tighter cells, so their columns fit without scrolling. */ @media(max-width:380px){.numbers,.days{font-size:14px}.numbers th,.numbers td{padding:7px 5px}.days th,.days td{padding:7px 6px}.numbers thead th,.days thead th{font-size:12px}} /* 320-pixel phones: tables reach half into the page margins, which keeps them clear of the screen edge. */ @media(max-width:340px){.table-wrap{margin-left:-8px;margin-right:-8px}.numbers th,.numbers td{padding:7px 4px}} /* The logo already links to the timer: on the narrowest phones the header keeps only it and the theme toggle. */ @media(max-width:359px){.header-cta{display:none}} /* Link icons: a calendar, an article or the whole guide, small and in the link's colour. */ .link-icon{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* 404: the three sections as cards, a way to report a broken link, and the other countries. */ .not-found{padding-bottom:24px} .not-found-code{margin:0;color:var(--accent);font-size:13px;font-weight:650;letter-spacing:.8px} .not-found h1{margin-top:4px} .section-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:24px 0 0} .section-card{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .15s,background-color .15s} .section-card:hover,.section-card:focus-visible{border-color:var(--accent);background:var(--accent-soft)} .section-card .link-icon{width:22px;height:22px;margin-top:2px;color:var(--accent)} .section-card strong{display:block;color:var(--accent);font-size:17px} .section-card span span{display:block;margin-top:2px;color:var(--muted);font-size:15px;line-height:1.5} .not-found .guide-report{margin-top:18px} .not-found-countries{display:flex;flex-wrap:wrap;gap:6px 18px;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:15px} .not-found-countries a{display:inline-flex;align-items:center;gap:6px} .not-found-countries .flag{display:block;width:13px;height:13px;flex-shrink:0;border-radius:50%;box-shadow:0 0 0 1px #0000001a} .not-found-countries a[aria-current]{color:var(--ink);font-weight:650;text-decoration:none} /* The switch between the country's timer, year calendar and guide, as in the timer's header (src/style.css). Phones keep only the icons, labelled for screen readers, as the timer does. */ .section-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--soft)} .section-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;min-height:34px;padding:0 12px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap} .section-tabs a:hover,.section-tabs a:focus-visible{color:var(--ink)} .section-tabs a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0000001f} [data-theme="dark"] .section-tabs a[aria-current]{background:#3a3a40} .section-tabs .link-icon{width:16px;height:16px;flex-shrink:0} @media(max-width:599px){.section-tabs a{padding:0}.section-tabs a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} /* The country menu and language switch, as in the timer's header (src/style.css): the flag opens the countries, EN / RU switches the page's language. */ /* The menu opens under the right group, aligned to its right edge, so it stays on screen on the narrowest phones. */ .header-actions{gap:2px;position:relative} .country-menu{position:static} .country-menu summary{list-style:none;cursor:pointer} .country-menu summary::-webkit-details-marker{display:none} .edition{display:inline-flex;align-items:center;gap:3px;min-height:40px;padding:4px 6px;border-radius:999px;color:var(--ink)} .edition:hover,.edition:focus-visible,.country-menu[open] .edition{background:var(--soft)} .edition svg{width:13px;height:13px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .country-flag{display:inline-flex;width:19px;height:19px;flex-shrink:0} .country-flag .flag{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px #0000001a} [data-theme="dark"] .country-flag .flag{box-shadow:0 0 0 1px #ffffff26} .country-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:50;display:flex;flex-direction:column;gap:2px;width:max-content;min-width:220px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 36px #1010181c} [data-theme="dark"] .country-menu-panel{box-shadow:0 12px 36px #0005} .country-option{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:15px;line-height:1.4;text-decoration:none} .country-option:hover,.country-option:focus-visible{background:var(--soft)} .country-option[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600} .country-option-name{display:inline-flex;align-items:center;gap:10px} .country-option .country-flag{width:20px;height:20px} .country-code{font-size:13px;color:var(--muted)} .country-option[aria-current] .country-code{color:var(--accent)} .language-switch{display:flex;align-items:center;color:var(--muted);font-size:12px;letter-spacing:.5px;line-height:1} .language-switch a{display:inline-flex;align-items:center;min-height:40px;padding:5px;color:var(--muted);font-weight:500;text-decoration:none} .language-switch a[aria-current]{color:var(--ink);font-weight:750} .language-switch a:hover,.language-switch a:focus-visible{color:var(--ink)} .language-switch>span{opacity:.45} @media(max-width:400px){.site-header{column-gap:6px}.header-actions{gap:0}.language-switch a{padding:5px 4px}.section-tabs a{min-width:34px}} @media(max-width:340px){.brand-icon{width:28px;height:28px}.section-tabs a{min-width:32px;min-height:32px}} /* Guide: a short answer opens every section; contents, footnotes, calculators and links to single sections. */ .guide-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 22px;font-size:14px;color:var(--muted)} .guide-meta a{font-weight:600} .guide-share{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer} .guide h2{display:flex;align-items:center;gap:8px;scroll-margin-top:16px} .copy-link{display:inline-grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;color:var(--muted);opacity:.55} .copy-link:hover,.copy-link:focus-visible{background:var(--soft);color:var(--accent);opacity:1} @media(hover:hover){.copy-link{opacity:0}.guide h2:hover .copy-link,.copy-link:focus-visible{opacity:1}} .tldr{margin:0 0 18px;padding:14px 18px;border-left:4px solid var(--accent);border-radius:14px;background:var(--accent-soft)} .tldr p{margin:0} .tldr p+p{margin-top:8px} .tldr .tldr-label{margin:0 0 4px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .guide-toc{margin:22px 0 8px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card)} .guide-toc-title{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .guide-toc ol{margin:0;padding-left:22px;columns:2 260px;column-gap:28px} .guide-toc li{break-inside:avoid} sup.fn{line-height:0} sup.fn a{padding:0 2px;font-size:12px;font-weight:700;text-decoration:none} .guide-sources{margin-top:36px;padding-top:6px;border-top:1px solid var(--line);font-size:15px} .guide-sources h2{font-size:20px} .guide-sources li{margin:6px 0} .fn-back{text-decoration:none} .guide-note{margin:14px 0 0;color:var(--muted);font-size:14px} .calc{margin:18px 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card)} .calc-title{display:flex;align-items:center;gap:8px;margin:0 0 12px!important;font-weight:650} .calc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px} .calc-fields label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:13px} .calc-fields .wide{grid-column:1/-1} .calc-fields input,.calc-fields select{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px} .calc-fields .calc-check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:15px} .calc-fields .calc-check input{min-height:0;width:18px;height:18px;accent-color:var(--accent)} .calc-result{display:block;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);font-size:15px;line-height:1.6} .calc-result:empty{display:none} .calc-note{margin:10px 0 0!important;color:var(--muted);font-size:13px} .toast{position:fixed;left:50%;bottom:24px;z-index:10;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s} .toast.shown{opacity:1;transform:translate(-50%,0)} .next-off-links a{display:inline-flex;align-items:center;gap:6px} /* The year calendar's way to the guide of its year. */ .guide-card{display:flex;align-items:flex-start;gap:12px;margin:22px 0;padding:16px 18px;border-radius:16px;background:var(--accent-soft);color:var(--ink);text-decoration:none} .guide-card .link-icon{width:22px;height:22px;margin-top:2px;color:var(--accent)} .guide-card strong{display:block;color:var(--accent);font-size:17px} .guide-card span span{display:block;margin-top:2px;color:var(--muted);font-size:15px} /* Year calendar: twelve months in a grid, each day coloured by its kind, and the whole year printed on one A4 landscape sheet. */ :root{--holiday:#d0312d;--on-holiday:#fff;--holiday-soft:#fcd9d7;--saturday:#0066cc;--saturday-soft:#e8f1ff;--short:#c77700} :root[data-theme="dark"]{--holiday:#e5534b;--on-holiday:#fff;--holiday-soft:#4a2426;--saturday:#70b5ff;--saturday-soft:#182d47;--short:#f0a93b} .wide .site-footer,.year-calendar{width:min(100% - 32px,1080px);margin:0 auto} .year-calendar .lead{max-width:760px;margin:0 0 20px} .calendar-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px} .calendar-years{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--soft)} .calendar-years a{min-width:64px;padding:6px 14px;border-radius:999px;color:var(--muted);font-size:15px;font-weight:600;text-align:center;text-decoration:none} .calendar-years a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0000001f} .calendar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px} .print-button{gap:8px;border:0;font-family:inherit;cursor:pointer} .print-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round} .calendar-provisional{margin:0 0 18px;padding:11px 15px;border-radius:12px;background:var(--soft);font-size:15px;line-height:1.5} .calendar-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;padding:0;list-style:none;font-size:14px;color:var(--muted)} .calendar-legend li{display:flex;align-items:center;gap:8px} .calendar-legend i{width:18px;height:18px;border-radius:5px;flex-shrink:0} .year-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:14px} .month{padding:14px 14px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card);break-inside:avoid} .month-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 6px} .month h2{margin:0;font-size:18px;letter-spacing:-.2px} .month-count{font-size:12.5px;color:var(--muted);white-space:nowrap} .month table{width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed;font-variant-numeric:tabular-nums} .month th{padding:2px 0;border:0;vertical-align:middle;font-size:11.5px;font-weight:600;color:var(--muted);text-align:center} .month .week{width:24px;font-size:10.5px;font-weight:500;opacity:.7} .month abbr{text-decoration:none} /* Phones read the weekday letters and week numbers at arm's length. */ @media(max-width:480px){.month th{font-size:12.5px}.month .week{font-size:11.5px}} .month td{height:32px;padding:0;border:0;vertical-align:middle;border-radius:8px;font-size:14px;text-align:center} .month td.weekend,.calendar-legend i.weekend{color:var(--holiday)} .calendar-legend i.weekend{box-shadow:inset 0 0 0 1.5px var(--holiday)} .month td.holiday,.calendar-legend i.holiday{background:var(--holiday);color:var(--on-holiday);font-weight:700} .month td.bridge,.calendar-legend i.bridge{background:var(--holiday-soft);color:var(--holiday);font-weight:650} /* A holiday of some German states only: hatched, with its states named in the notes. */ .month td.regional,.calendar-legend i.regional{background:repeating-linear-gradient(135deg,var(--holiday-soft) 0 3px,transparent 3px 6px);color:var(--holiday);font-weight:650;box-shadow:inset 0 0 0 1px var(--holiday-soft)} .month-notes .regional .note-date{color:var(--holiday);opacity:.75} .calendar-states{margin:28px 0 0} .calendar-states h2{margin:0 0 8px} .state-code{color:var(--muted);font-size:12px;font-weight:500;margin-left:4px} .states .state-holidays{text-align:left;font-variant-numeric:normal;color:var(--muted);font-size:14px;white-space:normal} /* Phones: each state's extra holidays go under its name, so the table keeps two columns, the state and its working days. */ .states .state-holidays-inline{display:none} @media(max-width:600px){.states th:nth-child(3),.states td.state-holidays{display:none}.states .state-holidays-inline{display:block;margin-top:3px;font-weight:400;color:var(--muted);font-size:14px;line-height:1.45}} .month td.saturday,.calendar-legend i.saturday{background:var(--saturday-soft);color:var(--saturday);font-weight:650;box-shadow:inset 0 0 0 1.5px var(--saturday)} .month td.today,.calendar-legend i.today{box-shadow:inset 0 0 0 2px var(--ink)} .month td[title]{cursor:help} /* A shortened pre-holiday day keeps its colour and gets a dot under the number. */ .month td.short{position:relative} .month td.short::after,.calendar-legend i.short{content:"";background:var(--short);border-radius:50%} .month td.short::after{position:absolute;left:50%;bottom:3px;width:5px;height:5px;transform:translateX(-50%)} .calendar-legend i.short{width:8px;height:8px;margin:0 5px} .month-notes{margin:8px 2px 0;padding:8px 0 0;border-top:1px solid var(--line);list-style:none;font-size:13px;line-height:1.45} .month-notes li{display:flex;gap:8px;padding:2px 0} .note-date{flex:0 0 auto;min-width:2.1em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--holiday)} .month-notes .saturday .note-date{color:var(--saturday)} .month-notes .short .note-date{color:var(--short)} .note-extra{color:var(--muted)} .calendar-source{margin:18px 0;font-size:14px;color:var(--muted)} /* Phones keep the year switch and the print button in one row, the button on the right. */ @media(max-width:480px){.calendar-tools{flex-wrap:nowrap;gap:8px}.calendar-years a{min-width:56px;padding:6px 12px}.print-button{padding:8px 14px}.month td{height:36px;font-size:15px}} @media print{ /* Landscape on the reader's own paper: A4 in Europe, Russia and India, Letter in the US. */ @page{size:landscape;margin:8mm} :root,:root[data-theme="dark"]{color-scheme:light;--paper:#fff;--ink:#000;--muted:#555;--line:#c8c8cc;--card:#fff;--soft:#eee;--holiday:#c62828;--on-holiday:#fff;--holiday-soft:#f9d6d6;--saturday:#0b57b0;--saturday-soft:#dde9fb} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} body{background:#fff;font-size:9pt;line-height:1.3} .site-header,.site-footer,.guide-report,.section-tabs,.year-calendar .lead,.calendar-tools,.facts,.cta,.guide-card,.legend-today,.calendar-states{display:none!important} .year-calendar{width:auto} .year-calendar h1{margin:0 0 1.5mm;font-size:16pt;letter-spacing:0} .calendar-provisional{margin:0 0 2mm;padding:0;background:none;font-size:8.5pt} .calendar-legend{margin:0 0 2.5mm;gap:1mm 6mm;font-size:8.5pt;color:#000} .calendar-legend i{width:3.6mm;height:3.6mm;border-radius:.9mm} .year-grid{grid-template-columns:repeat(4,1fr);gap:2mm 6mm} .month{padding:0;border:0;border-radius:0} .month-head{margin:0 0 .8mm} .month h2{font-size:11.5pt} .month-count{font-size:7.5pt} .month table{border-spacing:.5mm} .month th{padding:0;font-size:7.5pt} .month .week{width:5mm;font-size:6.5pt} .month td{height:4.6mm;border-radius:1mm;font-size:9pt} .month td.today{box-shadow:none} .month td.saturday{box-shadow:inset 0 0 0 .3mm var(--saturday)} .month-notes{margin:1mm 0 0;padding:1mm 0 0;font-size:7pt;line-height:1.3} .month-notes li{gap:1.5mm;padding:0} .note-date{min-width:5mm} .month td.short::after{bottom:.3mm;width:1.1mm;height:1.1mm} .note-extra{display:none} .calendar-source{margin:2mm 0 0;font-size:7.5pt} }