/* QuickCal Web - same look as the Windows app (white, dark blue headers, red holidays). */
:root {
  --blue: #143275;
  --week-blue: #677de1;
  --holiday: rgba(245, 39, 63, 0.59);
  --hover: #32dcf2;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: #fff; color: #000; font-family: var(--font); overflow: hidden; overscroll-behavior: none; }
/* Swipes are handled by the app (see app.js), not by the browser */
#scaler { touch-action: none; }
button { font-family: inherit; color: inherit; }
.hidden { display: none !important; }

/* The app is designed at a fixed size and scaled to the window, like WPF's Viewbox */
#stage { position: fixed; inset: 0; background: #fff; }
#scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; }
.page { position: relative; width: 100%; height: 100%; }

/* ---------- Month blocks (8 x 8 grid: bar, day labels, 6 date rows) ---------- */
.months3 { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 8px; height: 200px; }
.month { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); min-width: 0; min-height: 0; }
.bar { grid-row: 1; grid-column: 1 / span 8; background: var(--blue); }
.barText { grid-row: 1; color: #fff; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; line-height: 1; z-index: 1; }
.barText.clickable { cursor: pointer; border: 1px solid transparent; }
.barText.clickable:hover { border-color: var(--hover); }
.nav { grid-row: 1; z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
       background: transparent; border: 2px solid transparent; padding: 1px; }
.nav:hover { border-color: var(--hover); }
.nav svg { width: 100%; height: 100%; }
.dayLabel { grid-row: 2; border: 2px solid #000; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; line-height: 1; }

.cell { border: 1px solid #000; display: flex; align-items: center; justify-content: center; line-height: 1; position: relative; min-width: 0; min-height: 0; }
.cell.day { cursor: default; }
.cell.day:hover { box-shadow: inset 0 0 0 1px var(--hover); border-color: var(--hover); }
.cell.week { background: var(--week-blue); color: #fff; }
.cell.today { background: var(--blue); color: #fff; border: 2px solid red; }
.cell.today:hover { box-shadow: none; border-color: red; }
.cell.holiday { background: var(--holiday); color: #fff; }
.cell.gold { background: url("assets/gold_texture.jpg") center / 100% 100%; font-weight: bold; opacity: 0.8; }
/* Today on 5 September: same faded gold, but drawn without opacity so the red border stays crisp */
.cell.today.gold { color: #000; opacity: 1; background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url("assets/gold_texture.jpg") center / 100% 100%; }

/* ---------- Year view ---------- */
#yearView { display: grid; grid-template-rows: 34px 1fr 20px; }
.yearBar { margin: 4px 4px 2px; background: var(--blue); color: #fff; display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: minmax(0, 1fr); align-items: stretch; min-height: 0; }   /* row = the bar's own height, so the year is centered in it */
.yearBar .navBtn { background: transparent; border: 2px solid transparent; color: #fff; cursor: pointer; padding: 0 6px; }
.yearBar .navBtn:hover { border-color: var(--hover); }
.yearBar .navBtn svg { width: 100%; height: 100%; }
#yearTitle { display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 20px; line-height: 1; }
.yearGrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); min-height: 0; }
.yearGrid .month { margin: 4px; }

/* ---------- Bottom row ---------- */
.bottomRow.three { display: grid; grid-template-columns: 1fr 8px 1fr 8px 1fr; height: 20px; align-items: center; }
.bottomRow > :nth-child(1) { grid-column: 1; }
.bottomRow > :nth-child(2) { grid-column: 3; }
.bottomRow > :nth-child(3) { grid-column: 5; }
.smallInfo { font-size: 10.5px; padding-left: 6px; white-space: nowrap; display: inline-block; }
.fitLeft { overflow: hidden; }
.bottomRow > .fitLeft.wide { grid-column: 1 / 4; }   /* the hint may use the free part of the middle column */
.spaceKey { display: inline-block; width: 2.6em; height: 1.05em; margin-right: 0.15em; vertical-align: middle; border: 1px solid #555; border-bottom-width: 2px; border-radius: 0.25em; background: #f4f4f4; }
.arrowKey { display: inline-block; box-sizing: content-box; width: 1.35em; height: 1.31em; line-height: 1.31em; font-size: 0.8em; text-align: center; margin-right: 0.15em; vertical-align: middle; border: 1px solid #555; border-bottom-width: 2px; border-radius: 0.3em; background: #f4f4f4; }
.right { display: flex; justify-content: flex-end; }
.linkBox { border: 1px solid #000; background: #fff; font-size: 12px; line-height: 15px; padding: 0 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.linkBox:hover { background: #eee; }
.gear { width: 14px; height: 14px; }
.tagline { text-align: center; font-size: 12.5px; white-space: nowrap; overflow: hidden; }

/* ---------- Text pages (settings, install, autostart, getting started) ---------- */
.textPage { padding: 0 10px; font-size: 13px; }
.textPage h1 { font-size: 16px; margin: 4px 0 6px; }
.textPage p { margin: 0 0 4px; font-size: 11.5px; line-height: 1.35; }
.textPage ol { margin: 0 0 4px; padding-left: 26px; font-size: 11.5px; line-height: 1.35; }
.textPage .tip { color: #444; font-size: 10.5px; }
/* A screenshot beside the steps (Chrome's autostart menu), sized to the room right of the text */
.textPage .helpPic { display: none; }
.textPage.withPic .helpPic { display: block; float: right; height: 110px; width: auto; margin: 8px 0 4px 10px; border-radius: 4px; }
.btn { background: rgba(8, 8, 8, 0.2); border: 0; font-size: 11px; padding: 0 10px; height: 28px; cursor: pointer; }
.btn:hover { background: rgba(8, 8, 8, 0.3); }
.btn:active { background: rgba(8, 8, 8, 0.4); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.topRight { position: absolute; top: 4px; right: 15px; }
.btn.back { position: absolute; left: 13px; bottom: 3px; width: 40px; height: 32px; padding: 4px 8px; }
.btn.back svg { width: 100%; height: 100%; }
.btn.inline { margin: 2px 0 6px 26px; }
.stackBottomRight { position: absolute; right: 15px; bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.setRow { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px 5px; min-height: 30px; }
.setRow select { font-size: 11px; height: 22px; min-width: 120px; }
.check { background: transparent; border: 0; font-family: "Segoe UI Symbol", var(--font); font-size: 26px; line-height: 26px; padding: 0; cursor: pointer; color: #000; }
.check.on { color: blue; }
/* Touch-only devices: a switch instead of the ☐/🗹 glyphs, which phones draw as odd emoji */
.touch .check { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; width: 34px; height: 20px; border-radius: 10px; background: #c8c8c8; position: relative; transition: background .15s; }
.touch .check::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.touch .check.on { background: blue; }
.touch .check.on::after { left: 16px; }
#weeksInput { width: 25px; height: 19px; text-align: center; font-size: 12px; padding: 0; }

.wRow { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; min-height: 28px; margin: 2px 0; column-gap: 0; }
.wIcon { width: 16px; height: 16px; }
.wText { font-size: 12px; font-weight: 600; }
.wText small { font-weight: 400; font-size: 11px; }
.wBtn { min-width: 150px; height: 24px; }
.tipRow { align-items: start; }
.tipRow .wIcon { margin-top: 1px; }
.wTip { grid-column: 2 / span 2; font-size: 10.5px; color: #333; line-height: 1.35; }
.miniWeek { width: 16px; height: 16px; background: var(--blue); border: 1px solid var(--week-blue); color: #fff; font-size: 9px; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.okBtn { position: absolute; right: 15px; bottom: 6px; min-width: 90px; height: 30px; font-size: 12px; font-weight: 600; }

/* ---------- Popups (month/year picker, holiday tooltip) ---------- */
.menu { position: fixed; z-index: 10; background: #fff; border: 1px solid #999; box-shadow: 0 4px 14px rgba(0,0,0,.2); padding: 2px 0; font-size: 12px; min-width: 110px; max-height: calc(100vh - 4px); overflow-y: auto; }
.menu div { padding: 1px 14px 1px 24px; line-height: 15px; cursor: pointer; position: relative; white-space: nowrap; }
.menu div:hover { background: #e5f1fb; }
.menu div.current::before { content: "✓"; position: absolute; left: 7px; }
.tooltip { position: fixed; z-index: 11; background: #fff; border: 1px solid #888; padding: 3px 7px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.15); pointer-events: none; white-space: nowrap; }

/* ---------- Notes ---------- */
.cell.pick { cursor: pointer; }
html.touch #scaler .cell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.phone .neHint { display: none; }
/* A day with a note: light hatch and a small notepad in the top right corner */
.cell.note::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 1.5px, transparent 1.5px 5px); }
.cell.note:not(.noteColored):not(.today):not(.holiday):not(.gold)::before {
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.13) 0 1px, transparent 1px 5px); }
.cell.note::after { content: ""; position: absolute; top: 1px; right: 1px; width: 32%; height: 36%; max-width: 9px; max-height: 10px; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1.5h6l2 2V11H1z' fill='%23fff8c4' stroke='%23333' stroke-width='.9'/%3E%3Cpath d='M2.8 5h4.4M2.8 7h4.4M2.8 9h3' stroke='%23333' stroke-width='.8'/%3E%3C/svg%3E"); }
.cell.noteColored { color: #fff; }
/* Two notes on a day: one colored and one plain half */
.cell.noteMixed { color: #111; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
/* Holiday, today or birthday with a colored note: the color shows as a corner mark, the day keeps its look */
.cell.noteCorner { background-image: linear-gradient(225deg, var(--note-color, transparent) 0 28%, transparent 28%), linear-gradient(315deg, var(--note-color2, transparent) 0 28%, transparent 28%); }
.cell.today.gold.noteCorner { background-image: linear-gradient(225deg, var(--note-color, transparent) 0 28%, transparent 28%), linear-gradient(315deg, var(--note-color2, transparent) 0 28%, transparent 28%), linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url("assets/gold_texture.jpg"); background-size: auto, auto, auto, 100% 100%; }
.cell.gold.noteCorner:not(.today) { background-image: linear-gradient(225deg, var(--note-color, transparent) 0 28%, transparent 28%), linear-gradient(315deg, var(--note-color2, transparent) 0 28%, transparent 28%), url("assets/gold_texture.jpg"); background-size: auto, auto, 100% 100%; }

.tooltip.noteTip { white-space: pre-wrap; max-width: 280px; line-height: 1.35; }
.tipHoliday { font-weight: 600; margin-bottom: 2px; }
.tipNote.tipMarked { border-left: 3px solid #bbb; padding-left: 5px; }
.tipNote.tipSecond { margin-top: 5px; padding-top: 4px; border-top: 1px solid #ddd; }
.tipImages img { display: block; max-width: 260px; max-height: 140px; margin-top: 4px; }

.noteEditor { position: fixed; z-index: 20; width: min(340px, calc(100vw - 16px)); background: #fff; border: 1px solid #888; border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0,0,0,.25); padding: 6px 8px 6px; font-size: 13px; font-family: var(--font); }
.neHead { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.neTitle { font-weight: 600; }
.neHoliday { color: #b0102a; font-size: 12px; }
.neClose { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 14px; padding: 0 2px; color: #555; }
.neText { width: 100%; resize: vertical; min-height: 54px; max-height: 40vh; font: inherit; font-size: 13px; padding: 4px 5px; border: 1px solid #aaa; border-radius: 3px; }
.touch .neText { font-size: 16px; }   /* iPhone zooms in on smaller text fields */
.neImages { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.neThumb { position: relative; }
.neThumb img { display: block; height: 52px; max-width: 90px; object-fit: cover; border: 1px solid #ccc; cursor: zoom-in; }
.neThumbX { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: #444; color: #fff; font-size: 9px; line-height: 16px; padding: 0; cursor: pointer; }
.neRow { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.neColors { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.neSwatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px #999; cursor: pointer; padding: 0;
  color: #fff; font: 700 10px/16px var(--font); text-align: center; }
.neSwatch.none { background: #fff; color: #555; }
.neSwatch.on { border-color: #fff; box-shadow: 0 0 0 2px #000; }
/* A color the other note on the day has: greyed out and crossed */
.neSwatch.taken { opacity: .3; cursor: not-allowed; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.neBtn { background: rgba(8,8,8,.12); border: 0; border-radius: 3px; height: 26px; min-width: 32px; font-size: 15px; cursor: pointer; }
.neBtn:hover { background: rgba(8,8,8,.22); }
.neHint, .neInfo { color: #666; font-size: 10.5px; margin-top: 4px; }
.noteImageView { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.noteImageView img { max-width: 95vw; max-height: 95vh; }

.notesList { height: 134px; overflow-y: auto; border-top: 1px solid #ddd; margin-right: 0; }
.noteRow { display: grid; grid-template-columns: 14px 158px 1fr auto auto; align-items: center; gap: 6px; padding: 2px 4px; border-bottom: 1px solid #eee; font-size: 11.5px; cursor: pointer; }
.noteRow:hover { background: #e5f1fb; }
.noteDot { width: 14px; height: 14px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; flex: none; box-sizing: border-box; }
.noteDot.plain { border: 1px solid #888; background: #fff; color: #555; line-height: 12px; }
.noteDate { white-space: nowrap; }
.noteFirst { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; color: #333; }
.noteRow { align-items: start; }
.noteRemove { background: transparent; border: 0; border-radius: 3px; cursor: pointer; padding: 1px; width: 18px; height: 18px; color: #111; justify-self: end; }
.noteRemove:hover { background: rgba(8,8,8,.12); }
.noteRemove svg { display: block; width: 100%; height: 100%; }
.noteMeta { display: flex; justify-content: flex-end; gap: 10px; white-space: nowrap; color: #555; }
/* Some air between the search row (and Delete all) and the first note */
.notesList { margin-top: 20px; height: 122px; }
.notePeek { position: fixed; z-index: 19; display: flex; align-items: center; gap: 5px; max-width: min(260px, calc(100vw - 16px)); background: #fff;
  border: 1px solid #888; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.2); padding: 2px; font-size: 11.5px; font-family: var(--font); }
.npOpen { background: rgba(8,8,8,.1); border: 0; border-radius: 3px; width: 24px; height: 22px; padding: 0; font-size: 14px; line-height: 22px; cursor: pointer; }
.npOpen:hover { background: rgba(8,8,8,.22); }
.touch .npOpen { width: 34px; height: 30px; font-size: 18px; }
.npHoliday { padding-right: 5px; white-space: nowrap; }
.cell.picked { box-shadow: inset 0 0 0 2px #000; }

/* Bottom row: hint text, Settings and tagline sit on the same line at the bottom, clear of a 6-week month */
.bottomRow.three { align-items: end; grid-template-rows: 20px; }
.bottomRow.three > * { grid-row: 1; }
.bottomRow .fitLeft { display: flex; align-items: flex-end; align-self: stretch; }
.bottomRow .smallInfo { line-height: 1.25; vertical-align: bottom; padding-bottom: 2px; }
.bottomRow .tagline { line-height: 1.25; padding-bottom: 2px; }
.bottomRow .right { gap: 4px; padding-bottom: 2px; }
/* The notes and "Always on top" buttons: wide on every device, easy to hit */
.linkBox.notesBtn { padding: 0 14px; }
/* Phones and tablets: a touch area that reaches a little above and below the notes button */
html.touch .linkBox.notesBtn { position: relative; }
html.touch .linkBox.notesBtn::after { content: ''; position: absolute; inset: -10px -2px; }
.wText small.wNote { font-size: 10px; color: #555; font-weight: 400; }
.wText small.wNote.wHint { color: #143275; font-weight: 600; }
.notesInstallInfo { font-weight: 600; }
#notesPage .btn.inline { margin-left: 0; }
/* "Always on top" (pip.js) */
.linkBox.pipBtn { padding: 0 14px; }
.linkBox.iconOnly { padding: 0 14px; }
.linkBox.iconOnly .t-settings { display: none; }
html.pip .notesBtn, html.pip #settingsBtn1 { display: none; }
.linkBox.pipBtn.pipOn { background: #90ee90; }   /* LightGreen, as in the Windows app when "Always on top" is on */
.linkBox.pipBtn.pipOn:hover { background: #7ddc7d; }
html.pipActive #stage { visibility: hidden; }
#pipCover { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-family: var(--font); text-align: center; padding: 16px; }
#pipCover p { margin: 0; }
#pipCover .linkBox { font-size: 14px; line-height: 20px; padding: 2px 10px; }
/* one more row (Notes on/off) on the settings page */
#settingsPage .setRow { min-height: 26px; margin: 1px 0 1px 5px; }
/* notes page tools (search, color filter, Excel export) */
.notesTools { position: absolute; top: 4px; left: 110px; display: flex; gap: 4px; align-items: center; }
.notesSearch { display: flex; align-items: center; gap: 4px; width: 250px; height: 26px; padding: 0 6px; border: 1px solid #999; border-radius: 13px; background: #fff; box-sizing: border-box; cursor: text; }
.notesSearch:focus-within { border-color: #143275; box-shadow: 0 0 0 1px #143275; }
.notesSearch svg { width: 14px; height: 14px; flex: none; color: #666; }
.notesSearch input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 12px; background: transparent; padding: 0; }
.notesFilterBtn { position: relative; width: 30px; height: 26px; border: 1px solid #999; border-radius: 4px; background: #fff; cursor: pointer; padding: 3px; }
.notesFilterBtn:hover { background: #eee; }
.notesFilterBtn svg { width: 100%; height: 100%; }
.notesFilterBtn.active { background: #dbe8ff; border-color: #143275; color: #143275; }
.notesFilterBtn.active svg path { fill: #143275; }
.nfCount { position: absolute; top: -5px; right: -5px; min-width: 13px; height: 13px; border-radius: 7px; background: #143275; color: #fff; font-size: 9px; line-height: 13px; text-align: center; }
.nfCount:empty { display: none; }
.notesFilterMenu { position: absolute; top: 30px; left: 254px; z-index: 5; background: #fff; border: 1px solid #888; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.2); padding: 2px; display: flex; flex-direction: column; }
.nfRow { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; font: inherit; font-size: 11.5px; padding: 2px 8px 2px 4px; cursor: pointer; text-align: left; white-space: nowrap; }
.nfRow:hover { background: #e5f1fb; }
.nfRow:first-child { border-bottom: 1px solid #ddd; margin-bottom: 2px; }
.nfCheck { width: 12px; font-weight: 700; }
.noteNoMatch { padding: 6px 4px; color: #666; font-size: 11.5px; }
.btn.exportBtn { position: absolute; right: 15px; bottom: 3px; width: 40px; height: 32px; padding: 4px 8px; }
.btn.exportBtn svg { width: 100%; height: 100%; }
.btn.exportBtn:disabled { opacity: .4; cursor: default; }
/* a note over several days looks like one piece */
/* a light grey line between the days of one note (no black line, but still a visible day boundary) */
.cell.note.noteJoinR:not(.today):not(.holiday):not(.gold) { border-right-color: #c8c8c8; }
.cell.note.noteJoinL:not(.today):not(.holiday):not(.gold) { border-left-color: #c8c8c8; }
.cell.note.noteNoIcon::after { display: none; }
.neHead { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.neDash { font-weight: 600; }
.neEnd { font: inherit; font-size: 11.5px; padding: 0 2px; height: 20px; border: 1px solid #999; border-radius: 3px; }
.tipSpan { font-size: 11px; color: #555; margin-bottom: 2px; }
.noteEnd { color: #555; }
/* checklists and color names */
.neCheck { font-size: 14px; }
.noteTasks { color: #555; white-space: nowrap; }
.noteRow { grid-template-columns: 14px 158px 1fr 72px 18px; }
.notesColorsMenu { left: 288px; padding: 2px 6px 4px; gap: 1px; }
.ncTitle { font-size: 11px; font-weight: 600; }
.ncRow { display: flex; align-items: center; gap: 6px; }
.ncRow input { width: 150px; font: inherit; font-size: 11.5px; height: 18px; padding: 0 4px; border: 1px solid #999; border-radius: 3px; box-sizing: border-box; }
.btn.exportBtn.backupBtn { right: 60px; }
/* picture filter, three steps: all (grey), with pictures (in color), without (struck through) */
.notesPicsBtn { color: #777; }
.notesPicsBtn .npHill, .notesPicsBtn .npSun { fill: #aaa; }
.notesPicsBtn .npSlash { stroke: none; }
.notesPicsBtn.pics-with .npHill { fill: #2e9e5b; }
.notesPicsBtn.pics-with .npSun { fill: #e8a11e; }
.notesPicsBtn.pics-without .npSlash { stroke: #c0392b; }
/* the calendar shows the search and filter too: grey days when off, a green and an empty day when on */
.notesCalBtn { color: #555; }
.notesCalBtn .ncDay, .notesCalBtn .ncDay2 { fill: #bbb; }
.notesCalBtn.active .ncDay { fill: #2e9e5b; }
.notesCalBtn.active .ncDay2 { fill: none; }
/* The calendar is filtered: the notes button gets a blue ring, so it is easy to see why notes are missing */
html.notesFiltered .linkBox.notesBtn { box-shadow: 0 0 0 2px #143275; }
/* repeating notes */
.neBtn.on { background: #dbe8ff; box-shadow: inset 0 0 0 1px #143275; }
.neRepeat { margin-top: 5px; padding: 4px 5px; border: 1px solid #ccc; border-radius: 3px; background: #f7f7f7; font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; }
.nrLine { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nrLine select, .nrNum { font: inherit; font-size: 11.5px; height: 20px; border: 1px solid #999; border-radius: 3px; background: #fff; padding: 0 2px; }
.nrNum { width: 42px; }
.nrDay { width: 26px; height: 20px; border: 1px solid #999; border-radius: 3px; background: #fff; font: inherit; font-size: 11px; padding: 0; cursor: pointer; }
.nrDay.on { background: #143275; border-color: #143275; color: #fff; }
.nrMuted { color: #777; }
.nrNext { color: #333; font-size: 11px; display: block; }
.noteEditor { max-height: calc(100vh - 8px); overflow-y: auto; box-sizing: border-box; }
.backupHint { position: absolute; left: 64px; right: 197px; bottom: 6px; margin: 0; font-size: 10px; color: #666; line-height: 1.25; }
.nrHelp { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #143275; background: #fff; color: #143275; font: 700 12px/18px var(--font); padding: 0; cursor: pointer; }
.nrHelp:hover { background: #dbe8ff; }
.noteHelp { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 6px; font-family: var(--font); }
.nhBox { position: relative; width: min(520px, 100%); max-height: calc(100vh - 12px); overflow-y: auto; box-sizing: border-box; background: #fff; border: 1px solid #888; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.3); padding: 8px 12px; font-size: 12px; line-height: 1.35; }
.nhBox .neClose { position: absolute; top: 6px; right: 8px; }
.nhBox h2 { font-size: 14px; margin: 0 0 4px; }
.nhBox h3 { font-size: 12.5px; margin: 8px 0 2px; }
.nhBox p { margin: 3px 0; }
.nhBox ul { margin: 2px 0; padding-left: 18px; }
.nhBox li { margin: 2px 0; }
.nhSmall { color: #555; font-size: 11px; }
.neDelete { color: #000; display: inline-flex; align-items: center; justify-content: center; }
.neDelete svg { width: 17px; height: 17px; }
/* notes list in a maximized window fills the window */
#notesPage.full .notesList { height: calc(100% - 104px); }
#notesPage.full .noteRow { font-size: 12.5px; padding: 3px 4px; }
.noteThumbs { display: none; }
#notesPage.full .noteThumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
#notesPage.full .noteThumbs img { width: 64px; height: 48px; object-fit: cover; border: 1px solid #ccc; border-radius: 3px; background: #f4f4f4; }
.bhIcon svg { width: 13px; height: 13px; vertical-align: -2px; color: #333; }
/* drag notes to move them or change their length */
html.noteDragging, html.noteDragging * { cursor: grabbing !important; }
html.noteResizing, html.noteResizing * { cursor: ew-resize !important; }
html.noteDropBad, html.noteDropBad * { cursor: not-allowed !important; }
html.noteDragging #tooltip, html.noteResizing #tooltip { display: none; }
.cell.dropOk { outline: 2px dashed #143275; outline-offset: -3px; }
.cell.dropBad { outline: 2px dashed #c00; outline-offset: -3px; }
.noteUndo { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px;
  background: #333; color: #fff; border-radius: 4px; padding: 4px 6px 4px 10px; font: 12px var(--font); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.noteUndo button { background: transparent; border: 1px solid #aaa; color: #fff; border-radius: 3px; font: inherit; padding: 1px 8px; cursor: pointer; }
.noteUndo button:hover { background: #555; }
.noteUndo.small { left: auto; right: 3px; bottom: auto; top: 3px; transform: none; padding: 2px; gap: 0; font-size: 11px; }
.noteUndo.small button { padding: 0 6px; border-color: #888; }
/* one day of a repeating note, or the whole series */
.neSeries { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 4px; padding: 3px 5px; background: #eef3ff; border: 1px solid #c5d3f0; border-radius: 3px; font-size: 11px; }
.nsText { flex: 1 1 100%; color: #143275; }
.nsBtn { font: inherit; font-size: 11px; height: 20px; padding: 0 6px; border: 1px solid #8fa5d6; border-radius: 3px; background: #fff; cursor: pointer; }
.nsBtn:hover { background: #dbe8ff; }
/* Dropbox sync, and one button for the backup file with a small menu */
.btn.exportBtn.dropboxBtn { right: 105px; }
.dropboxBtn::after { content: ''; position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; display: none; box-shadow: 0 0 0 1.5px #fff; }
.dropboxBtn.dbOn::after { display: block; background: #2e9e5b; }
.dropboxBtn.dbBusy::after { display: block; background: #0061fe; animation: dbPulse 1s ease-in-out infinite alternate; }
.dropboxBtn.dbErr::after { display: block; background: #c0392b; }
.dropboxBtn.dbOffline::after { display: block; background: #e8a11e; }
@keyframes dbPulse { from { opacity: 1; } to { opacity: .25; } }
.notesFilterMenu.backupMenu { top: auto; left: auto; right: 15px; bottom: 38px; }
.bmRow { font-size: 12px; padding: 4px 10px 4px 6px; }
.nfRow.bmRow:first-child { border-bottom: 0; margin-bottom: 0; }
.bmRow:disabled { opacity: .4; cursor: default; background: transparent; }
.bmIcon svg { width: 18px; height: 18px; display: block; color: #333; }
.bmSub { color: #666; font-size: 11px; }
#dropboxPage h1 { display: flex; align-items: center; gap: 7px; }
.dbLogo { width: 20px; height: 20px; flex: none; }
.dbPoints { margin: 0 0 6px; padding-left: 18px; font-size: 11.5px; line-height: 1.35; }
.dbPoints li { margin: 0 0 1px; }
.dbActions { display: flex; align-items: center; gap: 8px; margin-left: 18px; }
.rotateIcon { display: inline-block; vertical-align: middle; }
.rotateIcon svg { width: 1.35em; height: 1.35em; display: block; color: #333; }
/* The notes list by month: a heading for each month, and a repeating note's days in that month */
.noteMonth { font-size: 11.5px; font-weight: 600; color: #143275; padding: 8px 4px 2px; border-bottom: 1px solid #bbb; }
.noteMonth:first-child { padding-top: 2px; }
.noteDays { display: block; color: #555; font-size: 11px; margin-top: 1px; }
/* The gear in the notes list: how many weeks back notes are kept */
.btn.exportBtn.keepBtn { right: 150px; padding: 5px 10px; }
.notesFilterMenu.keepMenu { top: -22px; left: auto; right: 15px; bottom: auto; width: 450px; max-width: calc(100% - 30px); box-sizing: border-box; padding: 8px 10px; }
.kmLine { display: flex; align-items: center; gap: 4px; font-size: 12px; margin: 0 0 4px; }
.kmTitle { font-weight: 600; margin-right: 6px; }
.kmWeeks { width: 52px; font: inherit; padding: 2px 4px; }
#notesPage .kmLine .kmSave { margin: 0 0 0 auto; }
.kmInfo { font-size: 10.5px; color: #555; line-height: 1.3; }
.kmInfo p { margin: 3px 0 0; }
.kmInfo .kmMain { color: #111; font-weight: 600; }