html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
  margin-bottom: 60px;
}

/* The font of the menus (the dropdowns beside the view switcher, and the right-click menus): Inter, self-hosted in
   wwwroot/lib/fonts/inter (SIL Open Font Licence, see OFL.txt there). It is a variable font, so one file covers every
   weight. The file holds the Latin characters only; anything else (other scripts) falls through to the system UI font. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../lib/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --menu-font: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Inter is a little larger and heavier-looking than the system fonts at the same size: a notch under Bootstrap's 1rem,
     and between its light (300) and regular (400) weights. */
  --menu-font-size: 0.875rem;
  --menu-font-weight: 360;

  /* What the four planner views share, so a day looks the same wherever it is drawn: the tint of a weekend day, and today's
     marker (a blue ring — with a filled number in the month, a "Today" badge in the week and day views). */
  --weekend-tint: #dbe4ea;
  --today-accent: #0d6efd;
  --today-tint: #e7f0ff;
}

.dropdown-menu,
.day-context-menu {
  font-family: var(--menu-font);
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
}

/* Bootstrap and the context menu buttons set their own weight, so the items need it too. */
.dropdown-item,
.day-context-menu .context-menu-item {
  font-weight: var(--menu-font-weight);
}

/* Login page */

/* The blurred, empty planner drawn behind the dialog. */
.login-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  filter: blur(6px);
  transform: scale(1.02); /* hides the soft edge the blur leaves at the viewport border */
  pointer-events: none;
  user-select: none;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.35);
}

.login-card {
  position: relative;
  overflow: hidden; /* clips the countdown bar to the rounded corners */
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
  padding: 2rem;
}

/* The line along the bottom of the choose-a-new-password dialog that counts its time down (login.js sets the scale). */
.countdown-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(13, 110, 253, 0.15);
}

.countdown-bar {
  width: 100%;
  height: 100%;
  background: var(--bs-primary, #0d6efd);
  transform-origin: left center;
}

.countdown-bar.is-low {
  background: var(--bs-danger, #dc3545);
}

.login-title {
  font-size: 1.4rem;
  margin: 0 0 1.5rem;
  text-align: center;
}

/* Footer */

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}

.footer-copyright {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Year planner */

.planner-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.planner-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

.planner-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.planner-subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

/* With more than one planner the name under the title is a dropdown that switches between them (_PlannerSubtitle). It keeps the
   look of the plain subtitle — the button only drops its own chrome — and the caret and a darker hover say it can be used. */
.planner-subtitle-switch {
  display: inline-block;
}

.planner-subtitle-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.planner-subtitle-btn:hover,
.planner-subtitle-btn:focus-visible,
.planner-subtitle-btn.show {
  color: rgba(0, 0, 0, 0.85);
}

/* A planner's name can be long (up to 80 characters); the item keeps to a sensible width. */
.planner-switch-item {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A submenu inside the person menu ("Switch planner", opened by menus.js). Bootstrap has no nested dropdowns: the item holds a
   second .dropdown-menu, shown by menus.js and placed beside its parent — to the left, because the person menu is at the page's
   right edge (menus.js flips it to the right when there is no room). The caret points the way it opens. */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu-toggle {
  position: relative;
}

.dropdown-submenu-toggle::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.55);
}

.dropdown-submenu > .dropdown-submenu-list {
  top: -0.5rem;
  right: 100%;
  left: auto;
  margin: 0 0.125rem 0 0;
}

.dropdown-submenu.show > .dropdown-submenu-list {
  display: block;
}

.dropdown-submenu.flip-right > .dropdown-submenu-list {
  right: auto;
  left: 100%;
  margin: 0 0 0 0.125rem;
}

.dropdown-submenu.flip-right > .dropdown-submenu-toggle::before {
  left: auto;
  right: 0.25rem;
  border-right-color: transparent;
  border-left-color: rgba(0, 0, 0, 0.55);
}

.multiselect-day-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0;
}

.day-detail-preview {
  height: 32px;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.day-detail-preview .day-num {
  font-size: 0.85rem;
}

.day-detail-preview .dow {
  font-size: 0.8rem;
}

.day-detail-preview .week-num {
  font-size: 0.8rem;
}

.day-detail-preview-label {
  font-weight: 600;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.day-detail-preview-more {
  margin: -0.5rem 0 1rem;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
}

/* The entry editor (_EntryEditorDialog) sets the day's title and categories above its entries: the same fields as the day
   dialog, set off from the entries text below by a rule, each part under a small heading. */
.entry-editor-category {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.entry-editor-heading {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.55);
}

/* The day-detail dialog's "Day Entries" panel — the same DayEntryItem blocks/rows/pills
   the week view uses (.week-entry-* classes), just wrapped for a modal's fixed width
   instead of a grid cell's flexible one. See Pages/Shared/_DayEntriesPanel.cshtml.
   min-height is sized to roughly 6 empty rows so the panel doesn't look cramped before
   anything's been added to it. */
.day-entries-panel {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 6px 8px;
}

/* Only shown in multi-day mode, naming the one date (e.g. "Friday 19th") the panel above
   actually applies to — hidden entirely in single-day mode, where that's already implied. */
.day-detail-entries-heading {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
}

.day-detail-categories {
  display: flex;
  gap: 1rem;
}

.day-detail-half {
  flex: 1 1 0;
}

.year-nav-link {
  margin-left: 1rem;
  text-decoration: none;
  font-weight: 600;
}

/* A link that can't be followed right now (the "Today" link while today is already in view): greyed, same size, so the
   links don't move. */
.year-nav-link-disabled {
  color: #adb5bd;
  cursor: default;
  user-select: none;
}

.planner-month-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: -0.25rem 0 0.75rem;
}

.planner-month-nav.show {
  display: flex;
}

.month-nav-btn {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  line-height: 1;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
}

.month-nav-btn:hover {
  background: #f0f0f0;
}

.month-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.months-range-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  min-width: 8em;
  text-align: center;
}

.planner-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  background: #ccc;
  border: 1px solid #999;
  font-family: "Segoe UI", Arial, sans-serif;
}

.month-column.month-hidden {
  display: none;
}

.month-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}

.month-header {
  background: #888;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 0;
}

.days {
  display: flex;
  flex-direction: column;
}

.day-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 4px;
  font-size: 0.65rem;
  line-height: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  overflow: hidden;
}

.day-cell.empty {
  background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 4px, #e9e9e9 4px, #e9e9e9 8px);
}

.day-cell:not(.empty) {
  cursor: pointer;
  user-select: none;
}

/* Today's cell on the year planner: a thick ring in today's colour (border box, so the row height is unchanged). */
.day-cell.today {
  border: 2px solid var(--today-accent);
}

.day-cell.selected {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1000px rgba(13, 110, 253, 0.18);
}

.day-context-menu {
  display: none;
  position: fixed;
  z-index: 2000;
  min-width: 160px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  font-size: var(--menu-font-size);
}

.day-context-menu.show {
  display: block;
}

.day-context-menu li {
  padding: 0;
}

.day-context-menu .context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: none;
  padding: 6px 12px;
  text-align: left;
  cursor: pointer;
}

.day-context-menu .context-menu-item:hover {
  background: #f0f0f0;
}

.day-context-menu .context-menu-divider {
  height: 0;
  margin: 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.context-submenu {
  position: relative;
}

.context-submenu-toggle::after {
  content: "";
  margin-left: auto;
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.55);
}

.context-submenu-list {
  display: none;
  position: absolute;
  top: -5px;
  left: 100%;
  margin: 0;
  padding: 4px 0;
  min-width: 160px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.context-submenu.show > .context-submenu-list {
  display: block;
}

.context-submenu.flip-left > .context-submenu-list {
  left: auto;
  right: 100%;
}

.day-num {
  font-weight: 700;
  min-width: 1.4em;
}

.dow {
  color: rgba(0, 0, 0, 0.55);
  display: inline-block;
  min-width: 0.9em;
  text-align: center;
}

.week-num {
  margin-left: auto;
  font-size: 0.55rem;
  color: rgba(0, 0, 0, 0.5);
  /* A long truncated title can still visually run into this space before its own
     overflow clips it; stack the week indicator above it with an opaque backing
     (matching whatever the row's own background is) so it always stays legible. */
  position: relative;
  z-index: 2;
  background-color: inherit;
}

.cell-label {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
}

.label {
  font-weight: 600;
  font-size: 0.55rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-weekday { background: #ffffff; }
.cat-weekend { background: var(--weekend-tint); }

.month-footer {
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 0;
  background: #f0f0f0;
  border-top: 1px solid #999;
}

.category-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex: 0 0 auto;
}

/* Page per Week — scaffold only, no entry data wired up yet. Modelled on a paper
   week-per-page diary spread: a left "page" stacking Mon-Wed and a right "page"
   stacking Thu-Sun, each day a plain blank block (no hour lines, no mini calendars).
   Sat/Sun are each half the height of a normal day, matching the diary photo. */
.week-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 1rem;
  min-height: 800px;
}

.week-column {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  min-height: 480px;
}

.week-column-right {
  grid-template-rows: 2fr 2fr 1fr 1fr;
}

.week-day-row {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.week-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Same weekend tint as .cat-weekend on the year planner. */
.week-day-header-weekend {
  background: var(--weekend-tint);
}

.week-day-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.week-day-date {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
}

/* Below the "md" breakpoint there's no room for two side-by-side pages, so flatten
   the two .week-column wrappers with display:contents — their day rows then become
   direct children of .week-grid and stack in one column, still in Mon-Sun order
   since that's already their DOM order. */
@media (max-width: 767.98px) {
  .week-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .week-column {
    display: contents;
  }

  .week-day-row {
    min-height: 90px;
  }
}

.week-day-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  min-height: 0;
}

/* An empty day: the whole area is one big click target for typing a first entry. */
.week-entry-empty {
  flex: 1 1 auto;
  min-height: 32px;
  border-radius: 4px;
  cursor: pointer;
}

.week-entry-empty:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* A day with nothing in it says how to add something — when the pointer is on its row, and always where there is no pointer to
   hover with (a phone). Takes no room: the click target keeps its height. */
.week-entry-empty::before {
  content: "Click to add an entry";
  display: block;
  padding: 6px 8px;
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.week-day-row:hover .week-entry-empty::before,
.week-entry-empty:hover::before {
  opacity: 1;
}

@media (hover: none) {
  .week-entry-empty::before {
    content: "Tap to add an entry";
    opacity: 1;
  }
}

/* A single entry wraps normally, as tall as its text; the blank space below it (.week-entry-add) starts a new entry.
   Untimed entries get a plain blue left border; timed entries show a time pill instead (see .week-entry-time-pill)
   and no border — there's no per-category colour any more (day entries don't carry one). */
.week-entry-block-wrap {
  flex: 0 1 auto;
  display: flex;
  min-height: 0;
}

.week-entry-block {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 2px 0 2px 8px;
  border-left: 3px solid transparent;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  font-size: 0.85rem;
}

.week-entry-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
}

/* More than one entry in a day: each becomes a single truncated line. */
.week-entry-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0 1px 8px;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 0.8rem;
  min-width: 0;
}

.week-entry-row .week-entry-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.week-entry-block.week-entry-untimed,
.week-entry-row.week-entry-untimed {
  border-left-color: #0d6efd;
}

/* The parsed "@2pm" etc. token, shown as a pill instead of inline text or a border. */
.week-entry-time-pill {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e7f1ff;
  color: #0d6efd;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.week-entry-block:hover,
.week-entry-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Per-entry delete — a small "x" that only appears on hover, at the far right of its
   block/row (pushed there by margin-left:auto in the flex row), so it never gets in
   the way of reading or clicking to edit. */
.week-entry-delete-btn {
  flex: 0 0 auto;
  margin-left: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: rgba(0, 0, 0, 0.35);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.week-entry-block:hover .week-entry-delete-btn,
.week-entry-row:hover .week-entry-delete-btn {
  opacity: 1;
}

.week-entry-delete-btn:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* Below a day's entries (one, or several shown as rows) any blank space left in the day body is itself a click target
   straight into edit mode, for a new entry. */
.week-entry-add {
  flex: 1 1 auto;
  min-height: 10px;
  cursor: pointer;
}

.week-entry-add:hover {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

/* Clicking a block/row/empty area replaces the day body's content with this textarea,
   filling the same space a single wrapped entry would ("full day panel size"). */
.week-entry-editor {
  flex: 1 1 auto;
  width: 100%;
  min-height: 32px;
  border: 1px solid #0d6efd;
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.85rem;
  resize: none;
}

.week-entry-editor:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

/* Page per Day — chips and hour slots are click-to-edit (see the day-view editing in entries.js).
   The hour range is dynamic: Rendering/DayPlannerBuilder.cs widens the default 9am-6pm
   window to fit any items outside it, and simply doesn't render the now-empty hours
   before/after that window — there's no "collapsed row" marker, they're just absent. */
.day-grid {
  margin-top: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.day-hour-row {
  display: flex;
  min-height: 48px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.day-hour-row:last-child {
  border-bottom: none;
}

/* First pass at compressing the dead space outside 9am-6pm: an empty hour out there
   gets half the normal row height. Applied per-row in Day.cshtml (hour.Hour < 9 or > 18
   AND no entries) rather than in DayPlannerBuilder, since it's purely a display concern. */
.day-hour-row-compressed {
  min-height: 24px;
}

.day-hour-row-compressed .day-hour-label {
  padding: 2px 8px;
}

.day-hour-row-compressed .day-hour-slot {
  padding: 2px 8px;
}

.day-hour-label {
  flex: 0 0 64px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
  background: #f8f9fa;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.day-hour-slot {
  flex: 1 1 auto;
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 6px 8px;
}

/* Several entries sharing an hour land in the same slot (the same row) but each stays its own
   chip, individually clickable to edit (see the day view in entries.js). */
.day-entry-chip {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(13, 110, 253, 0.25);
  border-radius: 4px;
  background: #eaf2ff;
  font-size: 0.8rem;
  line-height: 1.3;
  max-width: 100%;
}

.day-entry-time {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 0.7rem;
  color: #0d6efd;
  white-space: nowrap;
}

.day-entry-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-entry-editor {
  flex: 1 1 100%;
}

.day-untimed-section {
  margin-top: 1.25rem;
}

.day-untimed-heading {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.5rem;
}

.day-untimed-list {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: text;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Nothing in the list yet: it says what it is for. (:has is in every current browser; without it the list is just empty, as before.) */
.day-untimed-list:not(:has(.day-entry-chip, textarea))::before {
  content: "Click to add an entry without a time";
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
}

@media (hover: none) {
  .day-untimed-list:not(:has(.day-entry-chip, textarea))::before {
    content: "Tap to add an entry without a time";
  }
}

.day-entry-chip-untimed {
  align-self: flex-start;
  background: #f8f9fa;
  border-color: rgba(0, 0, 0, 0.15);
}
/* Category display filter */

.planner-filter-description {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
}

.planner-filter-clear {
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

.category-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

/* "Today" indicators on the week and day views */

.today-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--today-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.today-badge-lg {
  font-size: 0.8rem;
  padding: 2px 10px;
}

.week-day-row-today {
  border: 2px solid var(--today-accent);
}

.week-day-row-today .week-day-header {
  background: var(--today-tint);
}

/* Import wizard */

.import-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  font-size: 0.9rem;
}

.import-summary dt {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.import-summary dd {
  margin: 0;
}

/* Month view: Monday-first week rows, like a phone calendar's month grid */

.month-grid {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.month-weekday-row,
.month-week-row {
  display: grid;
  grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr));
}

.month-weekday-row {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.month-weekday {
  padding: 6px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.month-weekno {
  padding: 6px 4px;
  font-size: 0.6rem;
  color: rgba(0, 0, 0, 0.45);
  background: #f8f9fa;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.month-week-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.month-week-row:last-child {
  border-bottom: none;
}

.month-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 96px;
  min-width: 0;
  padding: 4px 6px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.month-day:last-child {
  border-right: none;
}

.month-day:hover {
  box-shadow: inset 0 0 0 1000px rgba(13, 110, 253, 0.06);
  color: inherit;
}

.month-day-weekend {
  background: var(--weekend-tint);
}

.month-day-outside {
  opacity: 0.45;
}

.month-day-num {
  align-self: flex-start;
  min-width: 1.5rem;
  padding: 1px 4px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.month-day-today .month-day-num {
  background: var(--today-accent);
  color: #fff;
}

.month-day-today {
  box-shadow: inset 0 0 0 2px var(--today-accent);
}

.month-day-label {
  font-size: 0.7rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-chip {
  display: flex;
  gap: 4px;
  padding: 0 4px;
  border-radius: 3px;
  /* Its own text colour: a chip sits on a day that may be painted a dark category colour, whose white text it must not inherit. */
  color: #212529;
  background: #eaf2ff;
  border: 1px solid rgba(13, 110, 253, 0.25);
  font-size: 0.65rem;
  line-height: 1.35;
  min-width: 0;
}

.month-chip-time {
  flex: 0 0 auto;
  font-weight: 600;
  color: #0d6efd;
}

.month-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-more {
  font-size: 0.65rem;
  color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 576px) {
  .month-day {
    min-height: 64px;
    padding: 2px 3px;
  }

  .month-chip-time,
  .month-day-label {
    display: none;
  }

  .month-chip {
    height: 6px;
    padding: 0;
    overflow: hidden;
  }

  .month-chip-text {
    visibility: hidden;
  }
}

/* Account page */

.account-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
}

.account-section h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.account-section-wide {
  grid-column: 1 / -1;
}

/* A day's whole-day category as a coloured strip: at the top of a week-view day box and of the day page.
   The background (a left/right split for a two-half day) is set inline from Rendering/CategoryPaint.cs. */
.category-strip {
  margin: 0 0 6px;
  padding: 2px 8px;
  min-height: 1.4rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4rem;
  color: rgba(0, 0, 0, 0.75);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.category-strip-day {
  margin: 1rem 0 0;
  padding: 4px 12px;
  font-size: 0.9rem;
}

/* The day and week views' strips are buttons: they open the day dialog to change or remove the category (day-detail.js). */
.category-strip[role="button"] {
  cursor: pointer;
}

.category-strip[role="button"]:hover {
  filter: brightness(0.96);
}

.category-strip[role="button"]:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* View switcher: little squares [Y] [M] [W] [D] under the previous/next links. */
.year-nav {
  text-align: right;
}

.view-switcher {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.view-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
}

.view-switch-btn:hover {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  border-color: #0d6efd;
}

.view-switch-btn.active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

/* The tool buttons (user menu, planner properties, category filter, multiselect) sit to the left of the view switcher, in the
   same row. They look like the switcher's buttons, with an icon in place of the letter. */
.view-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.view-controls .view-switcher {
  margin-top: 0;
}

.view-tools {
  display: flex;
  gap: 0.3rem;
}

.view-tool-btn {
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* Outside the year planner the tool buttons other than the user menu are shown but unusable. pointer-events is off so the
   wrapper's tooltip shows. */
.view-tool-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* The small line icons (wwwroot/img/icons.svg, drawn with no paint of their own): the colour and size of the text around them. */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

.view-tool-btn svg {
  width: 14px;
  height: 14px;
}

/* The multiselect button while only some weekdays are ticked (day-selection.js): a light tint, so it reads as "something is in
   force" without looking like the solid blue of the current view's Y/M/W/D button. */
.view-tool-btn.multiselect-active {
  background: rgba(13, 110, 253, 0.18);
  border-color: #0d6efd;
  color: #0d6efd;
}

/* The week view's "Set category" button on a day with no category. It floats at the top right of the day's box, just under the
   date, over whatever is there, so it takes no room and a day's text is not pushed about. Faint until the day is hovered or the
   button has focus. Once the day has entries it sits left of their delete "×" (which shows at the far right of each on hover)
   instead of covering it. Declared after .view-tool-btn so it can override that button's size and background. */
.week-day-body {
  position: relative;
}

.week-day-category-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 1;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0.55;
  transition: opacity 0.1s ease-in-out;
}

.week-day-category-btn-over-entries {
  right: 30px;
}

.week-day-row:hover .week-day-category-btn,
.week-day-category-btn:hover,
.week-day-category-btn:focus-visible {
  opacity: 1;
}

/* Checkbox items ("@x ..." / "@2pmx ..."): a real checkbox before the text; a ticked item stays visible, struck through. */
.entry-check {
  flex: 0 0 auto;
  margin: 0 0.4rem 0 0;
  cursor: pointer;
}

.entry-done .week-entry-text,
.entry-done .day-entry-text,
.month-chip-done .month-chip-text {
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.45);
}

.month-chip-check {
  margin-right: 0.2rem;
}

/* Week view: the "Weekly Unscheduled" section under the seven days, full width. */
.weekly-unscheduled {
  margin-top: 8px;
}

.weekly-unscheduled .week-day-row {
  min-height: 90px;
}

.weekly-unscheduled .week-day-header {
  background: #eef3fb;
}

/* Administration area */

.admin-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.admin-card {
  max-width: 960px;
}

/* A long value (an email address) may wrap anywhere, so a row still fits a phone and its action buttons stay in view. */
.admin-wrap {
  overflow-wrap: anywhere;
}

/* A narrow, untitled column of badges (the user list's Active and Admin columns): as wide as its badges and no wider. */
.admin-badge-col {
  width: 1%;
  white-space: nowrap;
  padding-right: 0.75rem;
}

/* A square icon-only button in a table row (Bootstrap's btn-outline-secondary btn-sm with an inline SVG), and the "Add" button
   with a leading icon. */
.admin-icon-col {
  width: 1%;
}

.admin-icon-btn,
.admin-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.admin-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
}

.admin-icon-btn svg,
.admin-add-btn svg {
  width: 14px;
  height: 14px;
}

.admin-nav .nav-link {
  font-weight: 500;
}

.change-password-form {
  max-width: 420px;
}

/* Forgot / reset password and email confirmation pages: the sign-in card on a plain background. */
.auth-page {
  background: #f1f3f5;
}

/* Toasts and the confirmation dialog (planner.core.js): above any open dialog. */
.planner-toasts {
  z-index: 1100;
}

.planner-confirm {
  z-index: 1070;
}

/* First-run setup: instructions, so a little wider than sign-in; the overlay scrolls rather than clipping on a short screen. */
.setup-overlay {
  overflow-y: auto;
  align-items: flex-start; /* with margin: auto on the card, it is centred when it fits and starts at the top when it doesn't */
}

.setup-card {
  max-width: 600px;
  margin: auto;
}

.setup-steps {
  padding-left: 1.25rem;
}

.setup-steps li + li {
  margin-top: 0.5rem;
}

/* The command to run: wraps rather than scrolling sideways (copying still gives one line), and a click selects all of it. */
.setup-command {
  margin: 0.4rem 0;
  padding: 0.5rem 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f1f3f5;
  border-radius: 4px;
  user-select: all;
}

/* Printing (the page's print look is wwwroot/css/print.css): what exists only on paper stays off the screen, and the
   Print button is for desktop screens. */
.print-only {
  display: none;
}

/* A month cell shows its first few entries on screen; the rest are in the page too (a printed month has room for them). */
.month-chip-extra {
  display: none;
}

@media (max-width: 575.98px) {
  .print-tool {
    display: none;
  }
}

/* Text over a dark category colour is white (decided in Core: CategoryColors.PrefersLightText); the greys the planner uses
   for small print would vanish on it. */
.ink-light {
  color: #fff;
}

.ink-light .dow,
.ink-light .week-num,
.ink-light .month-day-num,
.ink-light .month-day-label {
  color: rgba(255, 255, 255, 0.88);
}

.category-strip.ink-light {
  color: #fff;
}

/* The Delete item of the entry right-click menu is red, as the delete buttons are. */
.day-context-menu .context-menu-item-danger {
  color: #dc3545;
}

.day-context-menu .context-menu-item-danger:hover {
  background: rgba(220, 53, 69, 0.1);
}

/* The × beside a week-view entry appears on hover; where there is no hover (a touch screen) it is always there, quietly, and
   the keyboard brings it up when anything in its entry has focus. */
.week-entry-block:focus-within .week-entry-delete-btn,
.week-entry-row:focus-within .week-entry-delete-btn,
.week-entry-delete-btn:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .week-entry-delete-btn {
    opacity: 0.55;
  }
}

/* On a touch screen a long press opens the day and entry menus (touch-menus.js), so it must not also raise the browser's own
   callout or select the text under the finger. (The containers that hold an editor only lose the callout: Safari won't type
   into a text box inside a no-select element.) */
@media (hover: none) {
  .day-cell,
  .month-day,
  .week-entry-block,
  .week-entry-row,
  .day-entry-chip {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .week-day-body,
  .week-entry-empty,
  .week-entry-add,
  .day-hour-slot,
  .day-untimed-list {
    -webkit-touch-callout: none;
  }
}

/* A phone: the header's two halves (the title; the previous/next links and the tool and view buttons) don't fit side by side, so
   the title takes a row and the links and buttons the rows under it, each spread across the full width. The links keep to one
   line ("November »" must not break in two). */
@media (max-width: 575.98px) {
  .planner-header {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  .planner-title,
  .year-nav {
    flex: 1 1 100%;
    min-width: 0;
  }

  .year-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 0.5rem;
    row-gap: 0.4rem;
    text-align: left;
  }

  .year-nav-link {
    white-space: nowrap;
  }

  .year-nav .view-controls {
    flex: 1 1 100%;
    justify-content: space-between;
    margin-top: 0;
  }
}