/* Styles of the calendar pages (monthly / yearly, weekly, daily). Served versioned by the server. */
  :root{
    --row:42px;
    --ink:#2b2b2b;
    --muted:#706f6f;        /* brand gray */
    --line:#e2e2e2;
    --accent:#e94e1b;       /* brand orange */
    --accent-dark:#c23d10;
    --accent-soft:#fdf0eb;
    --accent-line:#f6c9b8;
    --bg-soft:#f7f7f7;
    --weekend-bg:#fafafa;
    --today-bg:#fdf0eb;
    --today-border:#e94e1b;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{overflow-y:scroll;}
  body{
    font-family:'Inter', Arial, sans-serif;
    color:var(--ink);
    background:#f4f4f4;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
  }

  /* ===== Header ===== */
  header.site-header{
    position:relative;
    width:100%;
    max-width:1040px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:14px 16px 0;
  }
  header.site-header .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-decoration:none;
  }
  header.site-header img.logo{ height:38px; width:38px; display:block; }
  header.site-header .brand-link{ display:block; border-radius:8px; }
  .brand-caption{ font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
  .header-views{ display:flex; gap:4px; justify-self:start; }
  .header-actions{ display:flex; gap:8px; justify-self:end; }
  .settings-pop{
    position:absolute;
    top:calc(100% + 6px);
    inset-inline-end:16px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 8px 8px 14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
  }
  .settings-pop[hidden]{ display:none; }
  header .header-btn[hidden]{ display:none; }
  .settings-row{ display:flex; align-items:center; gap:8px; font-size:13px; }
  .settings-label{ font-weight:600; color:var(--muted); }
  .settings-row select{
    font:inherit;
    font-weight:700;
    color:var(--accent-dark);
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    max-width:220px;
  }
  .settings-pop .panel-close{ margin:0; }
  header .view-link.active, header .view-link.active:hover{ background:#fff; border-color:var(--accent-line); color:var(--accent); }
  header .header-btn{
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
  }
  header .header-btn:hover{ background:#fff; border-color:var(--line); color:var(--ink); }
  .icon-btn{
    width:28px;height:28px;
    border-radius:7px;
    border:1px solid var(--line);
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    font-size:13px;
    color:var(--ink);
    flex:0 0 auto;
  }
  .icon-btn:hover{ background:var(--bg-soft); }
  .btn.today-btn{ height:32px; padding:0 12px; border-radius:8px; gap:6px; }
  .btn.today-btn svg{ color:var(--accent); }
  /* Options: label + icon on desktop */
  .icon-btn.panel-toggle, .icon-btn.sheet-btn{ width:auto; height:32px; padding:0 10px; gap:6px; border-radius:8px; font:inherit; font-size:12px; font-weight:600; }
  .icon-btn.panel-toggle.active .btn-label{ color:#fff; }
  .icon-btn:disabled{ opacity:.5; cursor:default; }
  .wa-btn{ color:#25D366; border-color:#bfe9d1; }
  .wa-btn:hover{ background:#e9faf1; border-color:#25D366; }

  /* ===== Page shell ===== */
  main{
    width:100%;
    max-width:1040px;
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  #monthApp, #dayApp, #weekApp{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
  }

  /* Title row: [Today · Holidays · « · ‹]  Title  [› · » · Options · Print] (the yearly page: no « », and Rows / Months before Options). Both groups sit right next to the title;
     the two outer columns share the rest equally, so the title stays in the middle whatever the groups' widths.
     The title keeps a fixed width (wide enough for "September 2026"), so the buttons don't move between months. */
  .sheet-title-row{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin-bottom:16px;
  }
  .title-side{ display:flex; align-items:center; gap:6px; min-width:0; }
  .title-side.start{ justify-content:flex-end; }
  .title-side.end{ justify-content:flex-start; }
  .sheet-title-center{ text-align:center; }
  #sheet:not(.year-view) .sheet-title-center{ min-width:300px; }
  #weekSheet .sheet-title-center{ min-width:400px; }   /* "Dec 27, 2026 – Jan 2, 2027" */
  #daySheet .sheet-title-center{ min-width:220px; }
  .sheet-title-actions, .sheet-title-actions-start{ display:flex; align-items:center; gap:6px; }
  /* Current and Options: icon buttons in the style of the year buttons (their names are in title / aria-label) */
  .title-side .btn.today-btn, .title-side .icon-btn.panel-toggle, .title-side .icon-btn.sheet-btn, .title-side .holidays-btn{
    width:42px; height:42px; padding:0; gap:0; justify-content:center; flex:0 0 auto;
    border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--muted);
  }
  .title-side .btn.today-btn svg{ color:var(--muted); }
  .title-side .btn.today-btn:hover, .title-side .icon-btn.panel-toggle:hover, .title-side .icon-btn.sheet-btn:hover, .title-side .holidays-btn:hover{ background:var(--bg-soft); color:var(--ink); }
  .title-side .btn.today-btn:hover svg{ color:var(--ink); }
  .title-side .icon-btn.panel-toggle.active{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
  .title-side .btn-label{ display:none; }
  /* the word under each button (outside its square, so it never changes the button's size) */
  .title-side .btn, .title-side .icon-btn, .title-side .sheet-nav-btn{ position:relative; }
  .btn-cap{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px; font-size:11px; font-weight:600;
    line-height:1; color:var(--muted); white-space:nowrap; pointer-events:none; }
  .holidays-btn.has-country .btn-cap{ color:var(--accent-dark); }
  .sheet-title-row{ padding-bottom:16px; }
  .calendar-sheet.exporting .btn-cap{ display:none; }
  /* small tablets: the title gives up its fixed width */
  @media (min-width:641px) and (max-width:760px){
    #sheet:not(.year-view) .sheet-title-center, #weekSheet .sheet-title-center, #daySheet .sheet-title-center{ min-width:0; }
    /* each side is as wide as its group (three buttons), so the title stays centred;
       a title too long for the rest (a week across two years) wraps instead of pushing the buttons out */
    .sheet-title-row{ grid-template-columns:minmax(192px,1fr) minmax(0,auto) minmax(192px,1fr); }
    #daySheet .sheet-title-row, #weekSheet .sheet-title-row{ grid-template-columns:minmax(144px,1fr) minmax(0,auto) minmax(144px,1fr); }
    .sheet-title-row .sheet-title{ font-size:24px; }
  }
  .sheet-nav-btn{
    border:1px solid var(--line);
    background:#fff;
    border-radius:9px;
    width:48px;height:42px;
    display:inline-flex; align-items:center; justify-content:center; padding:0;
    flex:0 0 auto;
    cursor:pointer;
    font-size:20px;
  }
  .sheet-nav-btn:hover{ background:var(--bg-soft); }
  .sheet-nav-btn.year-nav{ width:42px; color:var(--muted); }
  a.sheet-nav-btn, a.today-btn, a.rows-btn{ display:inline-flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none; }
  [dir="rtl"] .sheet-nav-btn svg{ transform:scaleX(-1); }
  .calendar-sheet.exporting .sheet-nav-btn{ visibility:hidden; }
  .calendar-sheet.exporting .day-image-actions{ visibility:hidden; }
  .calendar-sheet.exporting .sheet-title-actions{ visibility:hidden; }
  .calendar-sheet.exporting .sheet-title-actions-start{ visibility:hidden; }
  /* options / share panels open inside the sheet, under its title row */
  .sheet-panel{
    display:none;
    align-items:flex-start;
    margin:-4px 0 16px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
  }
  .calendar-sheet[data-open="options"] .sheet-panel[data-panel="options"]{ display:flex; }
  .calendar-sheet.exporting .sheet-panel{ display:none !important; }
  .sheet-panel .opt-rowa{ flex:1; min-width:0;}

  .panel-close{
    flex:0 0 auto;
    width:32px;height:32px;
    margin:5px 5px 5px 0;
    border:none;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .panel-close:hover{ background:var(--bg-soft); color:var(--ink); }
  .opt-row{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding:5px;
    background:#fff;
  }
  .btn{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    border-radius:7px;
    padding:6px 10px;
    font-family:inherit;
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
    flex:0 0 auto;
  }
  .btn:hover{ background:var(--bg-soft); }
  .btn svg, .icon-btn svg, .sheet-nav-btn svg, .day-print-btn svg{ flex:0 0 auto; display:block; }
  .btn:disabled{ opacity:.6; cursor:default; }

  /* ===== Calendar sheet (month view) ===== */
  /* the calendar area has no frame of its own: only the calendars (tables, mini months, planner pages) are white */
  .calendar-sheet{ width:100%; }
  .calendar-sheet.exporting{ background:#fff; padding:24px; }   /* PNG / PDF keep a white margin */
  table.cal-grid, .mini-month, .week-grid{ background:#fff; }
  @media screen{
    .calendar-sheet:not(.exporting) .day-page{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; }
  }
  .calendar-sheet.landscape{ aspect-ratio:1.414/1; }
  #daySheet{ display:flex; flex-direction:column; }
  #daySheet:not(.landscape){ aspect-ratio:0.7072/1; }
  #weekSheet{ display:flex; flex-direction:column; aspect-ratio:0.7072/1; }
  #weekSheet #weekViewContainer{ flex:1; display:flex; min-height:0; }
  .week-grid{
    flex:1;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  .week-row{
    position:relative;
    flex:1;
    display:flex;
    min-height:64px;
    border-bottom:1px solid var(--line);
  }
  .week-row:last-child{ border-bottom:none; }
  /* one fixed width for every row, wide enough for "Wednesday", so no row sticks out */
  .week-row-head{
    flex:0 0 132px;
    width:132px;
    min-width:0;
    overflow:hidden;
    padding:6px 8px;
    border-inline-end:1px solid var(--line);
    background:var(--bg-soft);
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
  }
  .week-row-dow{ font-size:21px; font-weight:800; }
  .week-row-date{ font-size:14px; color:var(--muted); }
  .week-row.weekend .week-row-dow{ color:var(--accent-dark); }
  .week-row.today{ background:var(--today-bg); }
  .week-row.today .week-row-head{ background:#fbe3d9; }
  .week-row-body{ flex:1; display:flex; min-width:0; }
  .week-sec{
    flex:0 0 190px;
    display:flex;
    flex-direction:column;
    padding:4px 8px;
    border-inline-end:1px solid var(--line);
  }
  .week-sec-title{ font-size:10px; font-weight:700; color:var(--muted); line-height:1.2; }
  .week-sec-line{
    flex:1;
    display:flex;
    align-items:center;
    gap:6px;
    min-height:14px;
    border-bottom:1px solid var(--line);
  }
  .week-sec-line:last-child{ border-bottom:none; }
  .week-prio-num{
    flex:0 0 auto;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:9px;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .week-task-box{
    flex:0 0 auto;
    width:11px;height:11px;
    border:1.5px solid var(--ink);
    border-radius:3px;
  }
  .week-write{ flex:1; min-width:0; }
  .week-write.lines{
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--line) 27px, var(--line) 28px);
  }
  .week-write.grid{
    background-image: radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .week-write.blank{ background-image:none; }
  .week-row:hover .day-print-btn{ opacity:1; }
  .calendar-sheet.exporting .day-print-btn{ visibility:hidden; }
  #daySheet #dayViewContainer{ flex:1; display:flex; min-height:0; }
  #daySheet .day-page{ flex:1; min-height:0; }
  #daySheet .day-two-up{ flex:1; min-height:0; }
  .sheet-title{
    text-align:center;
    font-family:'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.02em;
    margin:0 0 2px;
  }
  /* the title opens a month / year picker (a date picker on the planners) */
  .sheet-title-center{ position:relative; }
  .title-line{ position:relative; display:flex; align-items:center; justify-content:center; gap:2px; }
  .title-line .sheet-title, .title-line .sheet-heading{ cursor:pointer; }
  .title-pick{ flex:0 0 auto; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .title-pick:hover, .title-pick[aria-expanded="true"]{ background:var(--bg-soft); color:var(--ink); }
  .title-date{ position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0; }
  .title-pop{ position:absolute; z-index:25; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:280px; padding:10px; background:#fff;
    border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); text-align:center; }
  .title-pop[hidden]{ display:none; }
  .tp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-weight:700; }
  .tp-head button{ width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-size:18px; line-height:1; color:var(--ink); }
  .tp-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
  .tp-grid a{ padding:10px 0; border-radius:8px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; background:var(--bg-soft); }
  .tp-grid a:hover{ background:var(--accent-soft); color:var(--accent-dark); }
  .tp-grid a.current{ background:var(--accent-dark); color:#fff; }
  .tp-grid a.now{ box-shadow:inset 0 0 0 2px var(--accent-line); }
  .calendar-sheet.exporting .title-pick{ display:none; }
  /* "Today is … · Week 43 · …" above the current month / year on the home pages */
  .today-line{ margin:0; text-align:center; font-size:13px; line-height:1.7; color:var(--muted); }
  .today-line a{ color:var(--accent-dark); font-weight:600; text-decoration:none; }
  .today-line a:hover{ text-decoration:underline; }
  .today-line .sep{ margin:0 4px; color:var(--line); }
  .today-line .tl-part{ white-space:nowrap; }
  .year-progress{ display:inline-block; vertical-align:middle; width:90px; height:6px; margin-inline-end:8px; border-radius:3px; background:var(--line); overflow:hidden; }
  .year-progress i{ display:block; height:100%; background:var(--accent); }
  .holiday-local{ color:var(--muted); font-weight:400; }
  .holiday-regions{ color:var(--muted); font-weight:400; font-size:.92em; }
  .cell-holidays .regional-mark{ font-weight:500; font-size:.9em; color:var(--muted); }
  /* the country picker under the month / year title: the native select lies invisibly over the chip */
  /* the holidays icon: the native country select lies invisibly over it; orange while a country is on */
  .holidays-btn{ position:relative; cursor:pointer; }
  .holidays-btn select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px; }
  .holidays-btn:focus-within{ outline:2px solid var(--accent-line); }
  .title-side .holidays-btn.has-country{ color:var(--accent-dark); border-color:var(--accent-line); background:var(--accent-soft); }
  /* the chosen country's name, small under the title (nothing when no country is on) */
  .sheet-country:empty{ display:none; }
  /* "show the holidays of <country>?" – a box at the bottom of the screen, so nothing on the page moves */
  .country-suggest{ position:fixed; z-index:30; inset-inline:16px; bottom:16px; margin:0 auto; max-width:520px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
    padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); font-size:14px; }
  .country-suggest p{ margin:0; flex:1 1 220px; }
  .country-suggest .suggest-show{ background:var(--accent-dark); color:#fff; border-radius:8px; padding:8px 14px; text-decoration:none; font-weight:600; }
  .country-suggest .suggest-dismiss{ background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; padding:8px 4px; }
  /* the planners' H1: the day (week) on one line, its date (week number) below */
  .sheet-heading{ margin:0; font:inherit; }
  .sheet-heading > span{ display:block; }
  .sheet-subtitle{
    text-align:center;
    font-size:14px;
    color:var(--muted);
    margin:0;
  }
  table.cal-grid{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
  }
  /* day names on the brand orange, in white, like the old site (#d34418 – dark enough for white text) */
  table.cal-grid th{
    font-size:15px;
    font-weight:700;
    color:#fff;
    background:#d34418;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:8px 0;
    border-inline-start:1px solid rgba(255,255,255,.3);
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  table.cal-grid th:first-child{ border-inline-start:0; }
  table.cal-grid td{
    border:1px solid #d4d4d4;
    height:108px;
    vertical-align:top;
    padding:8px;
    position:relative;
    transition:background .12s;
  }
  table.cal-grid td:not(.week-num-col):hover{ background:#fff7f3; }
  .two-months table.cal-grid td{ height:60px; padding:4px; }
  .month-cut-line{
    position:relative;
    border-top:2px dashed var(--line);
    margin:14px 0;
  }
  .month-cut-line::before{
    content:"✂";
    position:absolute;
    top:-11px;
    inset-inline-start:8px;
    padding:0 4px;
    font-size:14px;
    color:var(--muted);
    background:#fff;
  }
  .month-block-title{ margin-bottom:16px; }
  .month-write-area{ margin-top:18px; }
  .year-tasks{ margin-top:18px; }
  .year-tasks-title{ font-weight:700; font-size:13px; color:var(--muted); margin-bottom:10px; }
  .year-tasks-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; }
  .next-minis{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:18px;
  }
  table.cal-grid td.weekend:not(.adjacent):not(.today){ background:var(--weekend-bg); }
  table.mini-grid th.weekend-th{ color:var(--accent-dark); font-weight:700; }
  table.cal-grid th.weekend-th{ color:#fff; }
  table.cal-grid td.adjacent{
    background:var(--bg-soft);
    color:#949494;
  }
  table.cal-grid td.today{
    background:var(--today-bg);
  }
  table.cal-grid td.weekend:not(.adjacent) .daynum{
    color:var(--accent-dark);
  }
  .cell-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:4px;
  }
  .daynum{
    font-weight:700;
    font-size:27px;
    line-height:40px;
    min-width:40px;
    flex:0 0 auto;
  }
  table.cal-grid td.today .daynum,
  table.cal-grid td.today.weekend:not(.adjacent) .daynum,
  table.cal-grid td.today.holiday:not(.adjacent) .daynum{
    background:var(--accent-dark);
    color:#fff;
    border-radius:50%;
    text-align:center;
  }
  /* week numbers: "WEEK" small and upright (read bottom to top) at the top of the column, white cells */
  table.cal-grid th.week-num-th{ width:30px; padding-block:6px; padding-inline:0; vertical-align:middle; }
  table.cal-grid th.week-num-th span{ display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg); font-size:9px; line-height:1; letter-spacing:.06em; }
  table.cal-grid td.week-num-col{ padding:2px !important; }
  .week-num-col{
    width:30px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    text-align:center;
    vertical-align:middle !important;
    background:#fff;
  }
  .day-print-btn{
    position:absolute;
    bottom:4px;
    inset-inline-end:4px;
    width:20px;height:20px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:5px;
    font-size:10px;
    line-height:1;
    cursor:pointer;
    opacity:0;
    transition:opacity .12s;
    display:flex;align-items:center;justify-content:center;
    padding:0;
  }
  table.cal-grid td:hover .day-print-btn{ opacity:1; }
  .day-print-btn:hover{ background:var(--bg-soft); }
  .notes-line{
    width:100%;
    border-top:1px dashed var(--line);
    height:20px;
    margin-top:20px;
  }
  .bottom-notes{
    margin-top:18px;
  }
  .bottom-notes .notes-title{
    font-weight:700;
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
  }

  /* ===== Year view ===== */
  .year-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .mini-month{
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px;
  }
  .mini-month h3{
    text-align:center;
    font-size:16px;
    margin:0 0 8px;
  }
  table.mini-grid{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
  }
  table.mini-grid th{
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    padding:2px 0;
  }
  table.mini-grid td{
    font-size:14px;
    text-align:center;
    padding:4px 0;
    color:var(--ink);
  }
  /* the mini months of the yearly view: room for a holiday's name under its number, so the rows stay even */
  .mini-month table.mini-grid td{ height:34px; vertical-align:top; }
  /* a holiday in a small calendar: the number in orange, the name small under it (one line, cut to fit) */
  table.mini-grid td .mini-day{ display:block; }
  table.mini-grid td .mini-hol{ display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font-size:8px; font-weight:600; line-height:1; margin-top:1px; padding:0 1px; }   /* line-height 1: a holiday's row stays as tall as the others */
  table.mini-grid td.adjacent{ color:#9e9e9e; }
  /* the yearly calendar: each day and month name links to its own page – same look, a soft highlight on hover */
  .mini-month h3 .month-link, .rows-month .month-link{ color:inherit; text-decoration:none; }
  .mini-month h3 .month-link:hover, .rows-month .month-link:hover{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
  table.mini-grid a.day-link{ display:block; margin:-4px 1px; padding:4px 0; border-radius:5px; color:inherit; text-decoration:none; }
  table.mini-grid a.day-link:hover{ background:#fff3ec; color:var(--accent-dark); }
  table.mini-grid td.today a.day-link:hover{ background:transparent; }
  .skip-calendar{ position:absolute; left:-9999px; }
  .skip-calendar:focus{ position:static; display:inline-block; margin:0 0 8px; padding:6px 12px; border-radius:8px; background:#fff;
    font-weight:600; color:var(--accent-dark); box-shadow:0 2px 10px rgba(0,0,0,.12); }
  table.cal-grid td.holiday:not(.adjacent) .daynum{ color:var(--accent-dark); }
  .cell-holidays{ margin-top:4px; display:flex; flex-direction:column; gap:2px; }
  .cell-holidays span{
    font-size:13px;
    line-height:1.25;
    font-weight:600;
    color:var(--accent-dark);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  table.mini-grid td.holiday:not(.adjacent), table.mini-grid td.holiday.weekend:not(.adjacent){ background:var(--accent-soft); color:var(--accent-dark); border-radius:4px; font-weight:700; }
  .holiday-panel{ width:100%; }
  /* monthly / yearly pages: the holiday list and the page's text share one white card */
  .info-card{ width:100%; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 24px; }
  .info-card .holiday-list, .info-card .page-info{ background:none; border:0; border-radius:0; padding:0; }
  .info-card .holiday-panel:not(:empty) + .page-info:not(:empty){ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
  .holiday-panel:empty, .page-info:empty{ display:none; }
  .page-info{
    width:100%;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px 24px;
    font-size:14px;
    line-height:1.6;
  }
  .page-info h2{ font-size:16px; margin:18px 0 6px; }
  .page-info h2:first-child{ margin-top:0; }
  .page-info p{ margin:0; color:#444; }
  .info-facts{ margin:0; padding-inline-start:20px; color:#444; }
  .info-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 8px; }
  .info-links a{
    display:inline-block;
    padding:4px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--ink);
    text-decoration:none;
    font-size:13px;
  }
  .info-links a:hover{ border-color:var(--accent-line); color:var(--accent-dark); }
  .holiday-list{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px 24px;
  }
  .holiday-list h2{ font-size:16px; margin:0 0 10px; }
  .subscribe{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .subscribe h3{ font-size:14px; margin:0 0 4px; }
  .subscribe p{ margin:0 0 10px; font-size:13px; color:var(--muted); }
  .sub-links{ display:flex; flex-wrap:wrap; gap:8px; }
  .sub-link{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#fff;
    color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
  .sub-link:hover{ border-color:var(--accent-line); color:var(--accent-dark); }
  .sub-link.sub-file{ color:var(--muted); }
  .long-weekends li{ margin-bottom:4px; }
  .holiday-items{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:6px 24px;
  }
  .holiday-items li{ font-size:14px; display:flex; gap:10px; }
  .holiday-items time{ flex:0 0 60px; color:var(--accent-dark); font-weight:700; }
  .holiday-note{ margin:0; color:var(--muted); font-size:14px; }
  .day-page-holiday{ font-size:14px; font-weight:700; color:var(--accent-dark); margin-top:4px; }
  .week-row-holiday{ font-size:10px; font-weight:700; color:var(--accent-dark); line-height:1.2; }
  table.mini-grid td.today{
    background:var(--today-bg);
    border-radius:4px;
    font-weight:700;
  }
  table.mini-grid td.weekend:not(.adjacent){ color:var(--accent-dark); }

  /* ===== Daily print page ===== */
  .icon-btn.active, .btn.active{ background:var(--accent-dark); color:#fff; border-color:var(--accent-dark); }
  .btn.opt-tile{
    flex:1 1 auto;
    height:calc(var(--row) - 10px);
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    padding:0 10px;
    justify-content:center;
    white-space:nowrap;
  }
  .btn.opt-tile .tile-sub{ font-weight:500; color:var(--muted); }
  .btn.opt-tile .tile-sub::after{ content:":"; margin-inline-end:4px; }
  .btn.opt-tile .tile-val{ font-weight:800; color:var(--accent-dark); }
  .btn.opt-tile.active{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-dark); }
  .btn.opt-tile.active:hover{ background:#fbe3d9; }
  .day-two-up{
    display:flex;
    align-items:stretch;
    gap:0;
  }
  .day-two-up .day-page{ flex:1; min-width:0; }
  .day-two-up .cut-line{
    flex:0 0 auto;
    width:0;
    border-inline-start:2px dashed var(--line);
    margin:0 14px;
    position:relative;
  }
  .day-two-up .cut-line::before{
    content:"✂";
    position:absolute;
    top:-10px;
    left:-9px;
    font-size:14px;
    color:var(--muted);
    background:#fff;
  }
  .day-page{
    display:flex;
    flex-direction:column;
  }
  .day-page-head{
    text-align:center;
    padding-bottom:10px;
    border-bottom:2px solid var(--ink);
    margin-bottom:14px;
  }
  .day-page-dow{
    font-size:44px;
    font-weight:800;
    color:var(--accent);
    letter-spacing:0.5px;
  }
  .day-page-date{
    font-size:18px;
    color:var(--muted);
    margin-top:2px;
  }
  .day-two-up .day-page-dow{ font-size:30px; }
  .day-two-up .day-page-date{ font-size:12px; }
  .day-two-up .priority-num{ width:16px;height:16px;font-size:9px; }
  .day-two-up .hour-label{ width:34px;font-size:9px; }
  .day-two-up .day-mini-cal{ max-width:160px; }
  .day-tasklist{ margin-bottom:12px; }
  .day-tasklist .tasklist-title{
    font-weight:700;
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
  }
  .task-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  .task-box{
    flex:0 0 auto;
    width:14px;height:14px;
    border:1.5px solid var(--ink);
    border-radius:3px;
  }
  .task-rule{
    flex:1;
    border-bottom:1px solid var(--line);
    height:1px;
  }

  .day-mini-cal{
    max-width:230px;
    margin:0 auto 14px;
  }
  .day-mini-cal table.mini-grid td{ padding:4px 0; }
  .day-mini-cal.bottom{ margin:14px auto 0; }

  .day-image{
    margin:0 auto 14px;
    text-align:center;
    position:relative;
  }
  .day-image img{
    max-width:100%;
    max-height:170px;
    border-radius:8px;
    object-fit:cover;
  }
  .day-image-placeholder{
    border:2px dashed var(--line);
    border-radius:8px;
    padding:18px;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
  }
  .day-image-placeholder:hover{ background:var(--bg-soft); }
  .day-image-actions{
    position:absolute;
    top:6px;
    inset-inline-end:6px;
    display:flex;
    gap:4px;
  }
  .day-image-actions button{
    width:24px;height:24px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:6px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .day-image-actions button:hover{ background:var(--bg-soft); }
  .day-two-up .day-image img{ max-height:100px; }

  .day-priorities{ margin-bottom:12px; }
  .day-priorities .priorities-title{
    font-weight:700;
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
  }
  .priority-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  .priority-num{
    flex:0 0 auto;
    width:20px;height:20px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .priority-rule{
    flex:1;
    border-bottom:1px solid var(--line);
    height:1px;
  }


  .day-hours{
    flex:1;
    display:flex;
    flex-direction:column;
  }
  .hour-row{
    flex:1;
    display:flex;
    align-items:flex-start;
    gap:8px;
    border-top:1px solid var(--line);
    padding-top:3px;
  }
  .hour-row:last-child{ border-bottom:1px solid var(--line); }
  .hour-label{
    flex:0 0 auto;
    width:42px;
    font-size:11px;
    color:var(--muted);
  }

  .day-write-area{
    flex:1;
    min-height:220px;
  }
  .day-write-area.lines{
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--line) 27px, var(--line) 28px);
  }
  .day-write-area.grid{
    background-image: radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  .day-write-area.blank{ background-image:none; }

  /* ===== The year in rows (calendar/grid.js rowsGrid) ===== */
  /* the yearly page's switch shows the layout it leads to: rows from the twelve months, the months from rows */
  .rows-btn .grid-icon, .rows-view .rows-btn .rows-icon{ display:none; }
  .rows-view .rows-btn .grid-icon{ display:block; }
  /* wide screens: the sheet takes more than the page's 1040px, so each day's column has room for a holiday's word */
  @media screen and (min-width:641px){
    .calendar-sheet.rows-view{ --rows-w:min(1360px, calc(100vw - 48px)); width:var(--rows-w); margin-inline:calc((100% - var(--rows-w)) / 2); }
  }
  /* the table is wider than a phone: it scrolls sideways, the month names stay at the edge */
  .rows-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* at least ~32px a day, so a holiday's word fits (narrower screens scroll) */
  table.rows-grid{ width:100%; min-width:1270px; border-collapse:separate; border-spacing:0; table-layout:fixed; background:#fff; }
  /* a card like the small months: one frame around the table, light lines inside, a stronger one between weeks */
  .rows-scroll{ border:1px solid var(--line); border-radius:10px; background:#fff; }
  table.rows-grid th, table.rows-grid td{ border:0; border-bottom:1px solid #ececec; border-inline-start:1px solid #f1f1f1; }
  table.rows-grid tr:last-child > *{ border-bottom:0; }
  table.rows-grid .wk{ border-inline-start-color:#d6d6d6; }
  table.rows-grid thead th{ height:22px; padding:0; background:#d34418; color:#fff; font-size:11px; font-weight:700; text-transform:lowercase;
    border-bottom:0; border-inline-start-color:rgba(255,255,255,.18); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  table.rows-grid thead th.wk{ border-inline-start-color:rgba(255,255,255,.55); }
  table.rows-grid thead th.weekend{ background:#a9330f; }
  table.rows-grid th.rows-corner{ width:88px; background:#fff; border-inline-start:0; }
  /* the month names: a column of their own, lined up with the numbers; this month's in orange */
  table.rows-grid th.rows-month{ position:sticky; inset-inline-start:0; z-index:1; background:#fafafa; padding:8px 10px 0; text-align:start;
    vertical-align:top; line-height:22px; font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
    border-inline-start:0; box-shadow:inset -1px 0 0 #d6d6d6; }
  [dir="rtl"] table.rows-grid th.rows-month{ box-shadow:inset 1px 0 0 #d6d6d6; }
  table.rows-grid thead th.rows-corner{ position:sticky; inset-inline-start:0; z-index:1; }
  table.rows-grid tr.current th.rows-month{ color:var(--accent-dark); box-shadow:inset 3px 0 0 var(--accent-dark), inset -1px 0 0 #d6d6d6; }
  .rows-month .rm-short{ display:none; }
  table.rows-grid td{ height:50px; padding:8px 0 0; text-align:center; vertical-align:top; font-size:13px; font-weight:600; color:var(--ink); }
  /* days outside the month: an even soft grey, so each month's shape shows */
  table.rows-grid td.empty{ background:#f8f8f8; }
  /* the weekend: one shaded column down the whole year */
  table.rows-grid td.weekend{ background:#f1f2f4; color:var(--accent-dark); }
  table.rows-grid td.weekend.empty{ background:#f4f5f6; }
  table.rows-grid td.holiday, table.rows-grid td.holiday.weekend{ background:var(--accent-soft); color:var(--accent-dark); font-weight:700; }
  table.rows-grid tbody td:not(.empty):hover{ background:#fff3ec; }
  table.rows-grid tbody tr:hover th.rows-month{ color:var(--accent-dark); }
  table.rows-grid a.day-link{ display:block; height:100%; color:inherit; text-decoration:none; }
  table.rows-grid td .rows-day{ display:inline-block; min-width:22px; height:22px; line-height:22px; border-radius:50%; }
  table.rows-grid td.today .rows-day{ background:var(--accent-dark); color:#fff; box-shadow:0 1px 3px rgba(194,61,16,.35); }
  /* the name: up to two short lines, a long word broken with a hyphen */
  table.rows-grid td .rows-hol{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; padding:0 1px; margin-top:1px;
    font-size:8px; font-weight:600; line-height:1.1; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }
  @media (max-width:640px){
    table.rows-grid{ min-width:1310px; }
    /* the yearly page has a fourth button at the end (Rows / Months): a little more room between the words */
    #sheet.year-view .title-side.end, #sheet.year-view .title-side.end .sheet-title-actions{ gap:5px !important; }
    table.rows-grid th.rows-corner{ width:52px; }
    table.rows-grid th.rows-month{ padding:8px 6px 0; font-size:13px; }
    .rows-month .rm-long{ display:none; }
    .rows-month .rm-short{ display:inline; }
  }
  /* Share › PNG / PDF: the whole table at full width, also from a phone */
  .calendar-sheet.rows-view.exporting{ width:1360px; margin-inline:0; }
  .calendar-sheet.rows-view.exporting .rows-scroll{ overflow:visible; }
  .calendar-sheet.rows-view.exporting table.rows-grid{ min-width:0; }
  .calendar-sheet.rows-view.exporting table.rows-grid th.rows-month{ position:static; }
  .calendar-sheet.rows-view.exporting .rm-long{ display:inline; }
  .calendar-sheet.rows-view.exporting .rm-short{ display:none; }
  /* printed on a landscape page, the whole width */
  @page rows-landscape{ size:landscape; margin:8mm; }
  @media print{
    .calendar-sheet.rows-view{ page:rows-landscape; }
    .rows-scroll{ overflow:visible; }
    table.rows-grid{ min-width:0; }
    table.rows-grid th.rows-month, table.rows-grid thead th.rows-corner{ position:static; }
    table.rows-grid td{ height:34px; }
    table.rows-grid td.weekend, table.rows-grid td.holiday{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    /* a printed year is kept for months: no "this month" and no "today" on it */
    table.rows-grid tr.current th.rows-month{ color:var(--ink); box-shadow:inset -1px 0 0 #d6d6d6; }
    [dir="rtl"] table.rows-grid tr.current th.rows-month{ box-shadow:inset 1px 0 0 #d6d6d6; }
    table.rows-grid td.today .rows-day{ background:none; color:inherit; box-shadow:none; }
    .rows-month .rm-long{ display:inline !important; }
    .rows-month .rm-short{ display:none !important; }
  }

  /* ===== Footer ===== */
  footer.site-footer{
    width:100%;
    max-width:900px;
    padding:16px;
    text-align:center;
    font-size:12px;
    color:var(--muted);
  }
  footer.site-footer ul{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:8px;
    padding:0;
    margin:8px 0 0;
    flex-wrap:wrap;
  }
  footer.site-footer a{
    color:var(--muted);
    text-decoration:none;
  }
  footer.site-footer a:hover{ text-decoration:underline; }
  /* a short thin line between the links, as tall as the small letters */
  footer.site-footer li.sep{ align-self:center; width:1px; height:12px; background:var(--line); }

  /* ===== Ad under the calendar (templates/partials/ad.html) ===== */
  .ad-slot{ width:100%; }
  /* a unit Google leaves empty ("unfilled", "unfill-optimized" …) takes no room */
  .ad-slot:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="filled"])){ display:none; }

  /* ===== Print ===== */
  @media print{
    body{ background:#fff; }
    header.site-header, .sheet-panel, footer.site-footer{ display:none !important; }
    main{ padding:0; max-width:none; }
    .calendar-sheet{
      border:none;
      border-radius:0;
      padding:0;
    }
    .sheet-nav-btn{ display:none !important; }
    .sheet-title-row{ justify-content:center; }
    .day-print-btn{ display:none !important; }
    table.cal-grid td.weekend, table.cal-grid td.today, table.cal-grid td.today .daynum, table.mini-grid td.today,
    .day-write-area, .week-write, .week-prio-num, .priority-num{
      -webkit-print-color-adjust:exact;
      print-color-adjust:exact;
    }
    .day-image-actions{ display:none !important; }
    .holiday-panel, .page-info, .info-card{ display:none !important; }
    table.mini-grid td.holiday{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .sheet-title-actions{ display:none !important; }
    .country-suggest, .today-line, .title-pick, .title-pop, .ad-slot{ display:none !important; }
    .sheet-title-actions-start{ display:none !important; }
    #dayApp .sheet-title-row{ display:none !important; }
    html, body{ height:100%; }
    #dayApp, #weekApp{ height:100%; }
    #daySheet, #weekSheet{ min-height:100vh; aspect-ratio:auto !important; }
    @page{ margin:12mm; }
  }

  @media (max-width:640px){
    table.cal-grid td{ height:68px; padding:4px; font-size:12px; }
    table.cal-grid th{ font-size:13px; letter-spacing:0; }
    .daynum{ font-size:20px; line-height:26px; min-width:26px; }
    table.cal-grid th.week-num-th, .week-num-col{ width:24px; }
    table.cal-grid th.week-num-th span{ font-size:8px; }
    .week-num-col{ font-size:11px; }
    /* holiday names in the narrow cells: break long words with a hyphen rather than cut them */
    .cell-holidays span{ font-size:10px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; -webkit-line-clamp:3; }
    .holiday-list, .page-info, .info-card{ padding:16px; }
    .info-card .holiday-list, .info-card .page-info{ padding:0; }
    /* compact options: each tile only as wide as its text */
    .sheet-panel .opt-row{ gap:4px; padding:4px; }
    .sheet-panel .btn.opt-tile{ flex:0 0 auto; height:28px; padding:0 8px; font-size:11px; }
    .sheet-panel .panel-close{ width:28px; height:28px; margin:4px 4px 4px 0; }
    .settings-pop{ inset-inline-end:8px; left:8px; right:8px; justify-content:space-between; }
    .settings-row select{ max-width:170px; }
    header.site-header{ padding:10px 8px 0; gap:4px; }
    .header-views{ gap:0; }
    .header-actions{ gap:0; }
    .brand-caption{ font-size:12px; }
    /* one row: current · prev · title · next · options */
    main{ padding:10px 0; gap:10px; }
    .calendar-sheet, .holiday-list, .page-info, .info-card{ border-radius:0; border-left:none; border-right:none; box-shadow:none; }
    .calendar-sheet{ padding:0 6px; }
    .sheet-title-row{ gap:4px; margin-bottom:12px; grid-template-columns:minmax(118px,1fr) minmax(0,auto) minmax(118px,1fr); }
    #daySheet .sheet-title-row, #weekSheet .sheet-title-row{ grid-template-columns:minmax(88px,1fr) minmax(0,auto) minmax(88px,1fr); }
    .title-side, .sheet-title-actions, .sheet-title-actions-start{ gap:2px !important; }
    /* phones: each group sits at its edge of the screen; the title stays in the middle */
    .title-side.start{ justify-content:flex-start; }
    .title-side.end{ justify-content:flex-end; }
    .btn-cap{ font-size:8.5px; margin-top:3px; letter-spacing:-.01em; }
    /* "Holidays" is the longest word: it leans a little to the right, away from "Today" */
    .holidays-btn .btn-cap{ transform:translateX(calc(-50% + 1px)); }
    .sheet-title-row{ padding-bottom:12px; }
    .title-pick{ display:none; }
    table.cal-grid th{ padding:6px 0; }
    #sheet:not(.year-view) .sheet-title-center, #weekSheet .sheet-title-center, #daySheet .sheet-title-center{ min-width:0; }
    .today-line{ font-size:12px; padding:0 8px; }
    .today-line .tl-part:has(> .tl-day), .today-line .tl-part:has(> .tl-day) + .sep{ display:none; }
    .sheet-title{ font-size:14px; }
    .sheet-subtitle{ font-size:12px; }
    .sheet-title-actions, .sheet-title-actions-start{ gap:4px; }
    .sheet-nav-btn{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0; }
    .sheet-nav-btn svg{ width:16px; height:16px; }
    .btn.today-btn, .icon-btn.panel-toggle, .icon-btn.sheet-btn,
    .title-side .btn.today-btn, .title-side .icon-btn.panel-toggle, .title-side .icon-btn.sheet-btn, .title-side .holidays-btn{ width:28px; height:28px; padding:0; justify-content:center; border-radius:8px; }
    .title-side .btn svg, .title-side .icon-btn svg{ width:16px; height:16px; }
    .sheet-nav-btn, .sheet-nav-btn.year-nav{ width:28px; height:28px; }
    .btn.today-btn .btn-label, .icon-btn.panel-toggle .btn-label, .icon-btn.sheet-btn .btn-label{ display:none; }
    .year-grid{ grid-template-columns:1fr; }
    table.cal-grid .day-print-btn{ display:none; }
    .year-tasks-grid{ grid-template-columns:1fr; }
    .week-row-head{ flex-basis:96px; width:96px; padding:4px; }
    .week-row-dow{ font-size:15px; }
    .week-sec{ flex-basis:84px; padding:4px 6px; }
    .day-two-up{ flex-direction:column; }
    .day-two-up .cut-line{ border-inline-start:none; border-top:2px dashed var(--line); width:auto; height:0; margin:14px 0; }
    .day-two-up .cut-line::before{ top:-10px; left:calc(50% - 8px); }
  }
  @media (max-width:360px){
    .sheet-title{ font-size:14px; }
  }