/* Styles for the My day screen and the reminder pop-up (P5-18). Every class here starts with "md-" or
   belongs to the pop-up, so nothing collides with the queue screens in views.css. They use the colours
   and sizes of /styles.css and add no inline styles anywhere (the strict CSP). */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.md-view { max-width: 64rem; }
.md-view textarea,
.md-view select,
.reminder-popup select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: .25rem;
  padding: .55rem .65rem;
  border: 1px solid #aeb8c3;
  border-radius: .4rem;
  background: #fff;
  color: inherit;
  font: inherit;
}
.md-view textarea { min-height: 5.5rem; resize: vertical; }
.md-view select:focus-visible,
.md-view textarea:focus-visible,
.reminder-popup select:focus-visible,
.md-view [tabindex]:focus-visible { outline: 3px solid #e0a62b; outline-offset: 3px; }
.md-view h1:focus,
.md-view h2:focus { outline: none; }

/* A button that is waiting for the server stays focusable (see busyGuard in ui-kit.js). */
button[aria-disabled="true"] { opacity: .6; cursor: default; }

.md-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .25rem 1rem;
  margin-bottom: .75rem;
}
.md-heading > .heading-with-info,
.md-heading > p { grid-column: 1; margin: 0; }
.md-heading > button { grid-column: 2; grid-row: 1 / span 2; }

.md-section { margin: 1.5rem 0; }
.md-section > .heading-with-info h2 { margin: 0; }
.md-section > p { margin: .35rem 0 0; }

.md-list,
.reminder-list,
.review-list {
  display: grid;
  gap: .6rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.review-list { gap: .25rem; }
.review-summary { margin: .5rem 0; font-weight: 600; }

.md-row,
.reminder-card {
  padding: .85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.md-row.is-overdue { border-left: 6px solid var(--danger); }
.md-title,
.reminder-subject { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.md-title { font-weight: 700; }
.reminder-note { margin: .3rem 0 0; overflow-wrap: anywhere; }
.md-main p + p { margin-top: .3rem; }
.md-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; }
.md-badge {
  display: inline-block;
  padding: .1rem .6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.md-badge-overdue { color: var(--danger); background: var(--danger-bg); }
.md-badge-urgent { color: #7a4a00; background: #fff3d6; }
.md-badge-waiting { color: #274c77; background: #e6eef8; }
.md-badge-review { color: var(--accent); background: #e5f1f5; }

.md-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .6rem;
}
.md-view .button-link.secondary,
.reminder-popup .button-link.secondary { background: #fff; color: var(--accent); }
.snooze-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.snooze-group select { width: auto; margin: 0; }
.inline-label { display: inline; margin: 0; font-weight: 600; }

.md-form {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #f8fafb;
}
.md-form label { margin: .6rem 0; }
.md-form-title { margin: 0; font-weight: 700; }
.md-check { display: flex; align-items: center; gap: .6rem; }
.md-check input[type="checkbox"] {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  min-height: 1.4rem;
  margin: 0;
}

.md-empty {
  margin: 1.5rem 0;
  padding: 2rem 1rem;
  background: var(--panel);
  border: 1px dashed #aeb8c3;
  border-radius: .6rem;
  text-align: center;
}
.md-empty h2 { margin-top: 0; }

/* The pop-up for a due reminder: fixed at the top right, never covering the whole page. */
.reminder-popup {
  position: fixed;
  z-index: 50;
  top: 1rem;
  right: 1rem;
  width: min(27rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgb(20 35 47 / 28%);
}
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.popup-head h2 { margin: 0; font-size: 1.1rem; }
.popup-head button { min-height: 44px; }
.reminder-popup .reminder-list { margin-top: .75rem; }
.reminder-popup .msg { margin-bottom: 0; }

@media (max-width: 700px) {
  .md-heading { grid-template-columns: 1fr; }
  .md-heading > button { grid-column: 1; grid-row: auto; justify-self: start; }
  .reminder-popup { top: .5rem; right: .5rem; left: .5rem; width: auto; }
}

/* Supplied November My day reference. The underlying personal feed, required-note
   completion and reminder workflows remain the established P5-18 implementation. */
.md-view.md-design { max-width:none; min-width:0; margin:0; }
.md-design .directory-topbar { padding-right:24px; }
.md-mode-links { display:flex; flex:none; border:1px solid #0069c7; border-radius:26px; overflow:hidden; min-width:240px; }
.md-mode-links a { flex:1; padding:7px 20px; text-align:center; color:#08235b; text-decoration:none; font-weight:600; }
.md-mode-links a:first-child { color:#fff; background:linear-gradient(#147bca,#0056ae); border-radius:24px; }
.md-design-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; min-height:calc(100dvh - 72px); }
.md-design-main { min-width:0; padding:18px 22px 30px 26px; container-type:inline-size; container-name:myday-column; }
.md-design .md-heading { margin:0 0 26px; gap:3px 16px; align-items:center; }
.md-design h1,.md-design h2,.md-reserved h2,.md-design-summary { color:#064889; font-family:Georgia,"Times New Roman",serif; font-weight:700; letter-spacing:-.6px; }
.md-design h1 { font-size:40px; line-height:1.12; margin:0; }
.md-design .md-heading > p { color:#474567; font-size:19px; }
.md-design .md-heading > button { display:flex; align-items:center; gap:10px; border:1px solid #1267eb; border-radius:14px; color:#0055ce; background:#fffdfa; padding:7px 20px; min-height:44px; font-size:19px; }
.md-design .md-section { margin:0 0 14px; padding:10px 18px 6px; background:#fffdfa; border:1px solid #e1dbd3; border-radius:17px; box-shadow:0 2px 3px #25374b0d; }
.md-design .md-section > .heading-with-info { border-bottom:1px solid #e5dfd8; padding:0 0 12px; gap:12px; }
.md-design .md-section h2 { font-size:31px; line-height:1.25; }
.md-design .md-section[data-section="due-today"] > .heading-with-info::before,
.md-design .md-section[data-section="reminders"] > .heading-with-info::before,
.md-design .md-section[data-section="waiting"] > .heading-with-info::before { content:""; width:29px; height:29px; flex:none; background:center / contain no-repeat; }
.md-design .md-section[data-section="due-today"] > .heading-with-info::before { background-image:url('/assets/external-icons/calendar-blank.svg'); }
.md-design .md-section[data-section="reminders"] > .heading-with-info::before { background-image:url('/assets/external-icons/bell.svg'); }
.md-design .md-section[data-section="waiting"] > .heading-with-info::before { background-image:url('/assets/external-icons/clock.svg'); }
.md-design .md-list,.md-design .reminder-list { gap:0; margin:0; }
.md-design .md-row,.md-design .reminder-card { position:relative; border:0; border-bottom:1px solid #e6dfd8; border-radius:0; background:transparent; padding:13px 0; min-height:78px; }
.md-design .md-row:last-child,.md-design .reminder-card:last-child { border-bottom:0; }
.md-design .md-row:has(.md-task-toggle) { padding-left:48px; }
.md-design .md-row:has(.md-owner) { padding-right:58px; }
.md-design .md-row.is-overdue { box-shadow:inset 4px 0 #a33b24; padding-left:48px; }
.md-design .md-title,.md-design .reminder-subject { font-size:20px; line-height:1.25; color:#091529; }
.md-design .md-task-detail { color:#45415b; font-size:17px; line-height:1.3; margin:2px 0; overflow-wrap:anywhere; }
.md-design .md-main > .small { font-size:15px; }
.md-design .md-actions { gap:6px 14px; margin-top:5px; }
.md-design .md-task-meta { font-size:14px; }
.md-design .md-task-clock { color:#13182f; font-size:18px; white-space:nowrap; }
.md-design .md-row > .md-actions > a,.md-design .md-row > .md-actions > button:not(.md-task-toggle) { min-height:30px; padding:3px 0; font-size:14px; border:0; background:transparent; color:#0055bc; text-decoration:underline; }
.md-design .md-actions .md-task-toggle { position:absolute; left:6px; top:13px; width:36px; height:36px; min-height:36px; padding:6px; background:transparent; border:0; font-size:0; }
.md-design .md-task-toggle::before { content:""; display:block; width:23px; height:23px; box-sizing:border-box; border:2px solid #51495e; border-radius:4px; background:#fff; }
.md-design .md-task-toggle[aria-expanded="true"]::before { border-color:#005ccc; box-shadow:0 0 0 3px #cde6ff; }
.md-design .md-badges { display:inline-flex; margin:5px 0 0; }
.md-design .md-badge { border:0; padding:3px 14px; font-size:15px; border-radius:20px; }
.md-design .md-badge-progress { color:#063b8c; background:#deedfc; }
.md-design .md-badge-review { color:#604013; background:#ffe3b2; }
.md-design .md-badge-waiting { color:#174f34; background:#e3efdc; }
.md-owner { position:absolute; right:7px; top:15px; display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:#765015; background:#ffecd6; font-size:22px; font-weight:700; }
.md-design .md-form { grid-column:1 / -1; font-size:16px; }
.md-design .md-form .md-actions { margin-top:12px; }
.md-design .md-empty { background:#fffdfa; border:1px solid #e1dbd3; border-radius:16px; }
.md-design-summary { margin:22px 0 0; padding:20px 14px; text-align:center; font-size:25px; background:#eef5fc; border:1px solid #c6d9ed; border-radius:12px; }
.md-design-summary[hidden],.md-design .md-row[hidden],.md-design .reminder-card[hidden] { display:none; }
.md-reserved { padding:24px 24px 30px 30px; border-left:1px solid #929aa4; color:#4c425c; }
.md-reserved h2 { margin:0 0 24px; padding-bottom:10px; border-bottom:2px solid #982ac9; font-size:40px; }
.md-reserved p { font-size:18px; }
.md-search-status { margin:0 0 14px; color:#3c4663; }
@container myday-column (min-width:650px) {
  .md-design .md-main { display:grid; grid-template-columns:minmax(0,1fr) 110px 140px; gap:2px 12px; align-items:center; }
  .md-design .md-title { grid-column:1; grid-row:1; }
  .md-design .md-task-detail { grid-column:1; grid-row:2; }
  .md-design .md-main:not(:has(.md-task-clock)) .md-title,
  .md-design .md-main:not(:has(.md-task-clock)) .md-task-detail { grid-column:1 / 3; }
  .md-design .md-task-clock { grid-column:2; grid-row:1 / 3; justify-self:center; }
  .md-design .md-badges { grid-column:3; grid-row:1 / 3; justify-self:center; margin:0; }
}
@media(max-width:1200px) { .md-design-layout { grid-template-columns:minmax(0,1fr) 260px; } .md-design .md-section h2 { font-size:27px; } .md-mode-links { min-width:200px; } }
@media(max-width:1000px) { .md-design-layout { grid-template-columns:minmax(0,1fr); } .md-reserved { border-left:0; border-top:1px solid #c8cbd0; padding:20px 24px; } .md-reserved h2 { font-size:28px; } .md-design .directory-global-search { min-width:120px; } .md-mode-links { min-width:160px; } .md-mode-links a { padding:7px 10px; } }
@media(max-width:700px) { .md-design .directory-topbar { height:auto; min-height:64px; flex-wrap:wrap; padding:10px 12px; gap:8px; } .md-design .directory-global-search { flex-basis:calc(100% - 112px); } .md-mode-links { margin-left:auto; width:200px; min-height:40px; } .md-design-main { padding:18px 12px 24px; } .md-design h1 { font-size:34px; } .md-design .md-heading { grid-template-columns:minmax(0,1fr) auto; margin-bottom:20px; } .md-design .md-heading > button { grid-column:2; grid-row:1 / span 2; padding:7px 10px; font-size:0; } .md-design .md-heading > p { font-size:16px; } .md-design .md-section { padding:10px 12px 4px; } .md-design .md-section h2 { font-size:25px; } .md-design .md-title { font-size:18px; } .md-design-summary { font-size:22px; } .md-design .snooze-group { flex-wrap:wrap; } }