:root { color-scheme: light; --ink: #202720; --muted: #7b827b; --line: #e8ebe6; --canvas: #f6f7f5; --paper: #fff; --green: #277451; --green-dark: #175d40; --green-pale: #eaf4ed; --blue: #4968df; --blue-pale: #edf0ff; --coral: #e5755a; --yellow: #e8b447; --shadow: 0 16px 48px rgba(27,38,30,.11); font-family: 'DM Sans', sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); } button,input,select,textarea { font: inherit; } button { color: inherit; cursor: pointer; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid rgba(73,104,223,.28); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0,1fr); } .sidebar { background: #fff; border-right: 1px solid var(--line); padding: 27px 17px 16px; display: flex; flex-direction: column; min-height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; margin-bottom: 30px; color: #27332b; text-decoration: none; font: 800 22px 'Manrope',sans-serif; } .brand-mark { width: 25px; height: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-7deg); } .brand-mark span { border-radius: 2px 5px 2px 5px; background: var(--green); } .brand-mark span:nth-child(2) { background: #8cbd73; } .brand-mark span:nth-child(3) { background: #e8b447; } .brand-mark span:nth-child(4) { background: #e5755a; }
.primary-button { border: 0; border-radius: 7px; padding: 10px 15px; color: #fff; background: var(--green); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; transition: background .18s,transform .18s; } .primary-button:hover { background: var(--green-dark); transform: translateY(-1px); } .create-button { width: 100%; margin-bottom: 23px; min-height: 41px; box-shadow: 0 5px 12px rgba(39,116,81,.13); } .create-button>span,.add-event-button>span { font-size: 19px; line-height: 12px; font-weight: 400; }
.primary-nav { display: grid; gap: 4px; margin-bottom: 30px; } .nav-link { border: 0; height: 39px; padding: 0 11px; border-radius: 6px; color: #667069; background: transparent; display: flex; align-items: center; gap: 11px; text-align: left; font-size: 13px; font-weight: 500; } .nav-link:hover { color: var(--ink); background: #f6f8f5; } .nav-link.active { color: var(--green-dark); background: var(--green-pale); font-weight: 700; } .nav-icon { width: 18px; font-size: 17px; text-align: center; line-height: 1; } .nav-count { margin-left: auto; padding: 2px 7px; color: #758078; background: #f0f2ef; border-radius: 10px; font-size: 10px; }
.sidebar-section { min-height: 0; } .section-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 9px; margin-bottom: 10px; color: #929991; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px; display: inline-grid; place-items: center; background: #fff; color: #626a63; font-size: 21px; line-height: 1; transition: background .15s,border .15s; } .icon-button:hover { background: #f4f6f3; border-color: #d5dbd4; } .icon-button.small { width: 22px; height: 22px; border: 0; background: transparent; font-size: 18px; } .calendar-list { display: grid; gap: 2px; } .calendar-item { width: 100%; min-height: 36px; padding: 0 9px; border: 0; border-radius: 5px; display: flex; gap: 10px; align-items: center; text-align: left; background: transparent; color: #626b63; font-size: 12px; } .calendar-item:hover,.calendar-item.selected { background: #f4f6f3; color: var(--ink); } .calendar-color { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 3px; } .calendar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .calendar-visibility { margin-left: auto; color: #a4aaa3; font-size: 10px; }
.sidebar-bottom { margin-top: auto; } .sync-note { padding: 11px 9px 14px; display: flex; align-items: flex-start; gap: 9px; border-bottom: 1px solid var(--line); } .sync-dot { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #59ad76; box-shadow: 0 0 0 3px #e6f4e9; } .sync-note strong,.sync-note small,.profile-copy strong,.profile-copy small { display: block; } .sync-note strong { font-size: 11px; } .sync-note small { margin-top: 3px; color: #9aa19a; font-size: 10px; } .profile-button { width: 100%; padding: 14px 7px 2px; border: 0; background: transparent; display: flex; align-items: center; gap: 9px; text-align: left; } .avatar,.top-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #e18a6f; font-weight: 700; font-size: 12px; } .profile-copy { min-width: 0; flex: 1; } .profile-copy strong { font-size: 11px; } .profile-copy small { margin-top: 3px; color: #939a93; font-size: 10px; } .profile-more { color: #868d86; font-size: 20px; letter-spacing: 1px; }
.main-content { min-width: 0; padding: 0 38px 48px; position: relative; } .topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .breadcrumbs { display: flex; gap: 9px; align-items: center; color: #919891; font-size: 11px; } .breadcrumbs strong { color: #404940; font-weight: 600; } .crumb-slash { color: #c0c6bf; } .topbar-actions { display: flex; align-items: center; gap: 13px; } .search-button { width: 31px; height: 31px; border: 0; font-size: 22px; } .help-button { border: 1px solid #dde2dc; background: white; color: #777f77; width: 21px; height: 21px; border-radius: 50%; font-size: 11px; } .top-avatar { width: 29px; height: 29px; background: #d9e7d8; color: #386747; }
.page-heading { display: flex; justify-content: space-between; align-items: end; padding: 29px 0 23px; gap: 20px; } .eyebrow,.dialog-eyebrow { margin: 0 0 8px; color: #7d9482; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; } .live-pulse { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #62ad75; vertical-align: 1px; box-shadow: 0 0 0 3px #e4f2e7; } h1 { margin: 0; color: #252d27; font: 700 30px 'Manrope',sans-serif; line-height: 1.2; } h1 span { color: #9aa29a; font-weight: 500; } .heading-subtitle { margin: 8px 0 0; color: #858d85; font-size: 12px; } .add-event-button { min-height: 38px; margin-bottom: 2px; }
.calendar-toolbar { height: 53px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); } .month-controls,.toolbar-right { display: flex; align-items: center; gap: 8px; } .month-controls .icon-button { width: 29px; height: 29px; font-size: 24px; } .today-button,.filter-button { height: 30px; border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 0 10px; color: #626a63; font-size: 11px; font-weight: 600; } .today-button { margin-left: 2px; } .today-button:hover,.filter-button:hover { background: #f5f7f4; } .view-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #fff; } .view-option { border: 0; border-radius: 4px; padding: 5px 9px; color: #8a928a; background: transparent; font-size: 10px; } .view-option.active { color: #314b38; background: #edf2ed; font-weight: 700; } .filter-button { display: flex; align-items: center; gap: 7px; } .filter-button>span:first-child { font-size: 14px; } .filter-chevron { color: #9ca49c; }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 19px; align-items: stretch; } .calendar-board { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; } .weekday-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); height: 37px; border-bottom: 1px solid var(--line); } .weekday { display: grid; place-items: center; color: #939a93; font-size: 9px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; } .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); } .day-cell { min-width: 0; min-height: 105px; padding: 7px 6px 5px; border-right: 1px solid #edf0ec; border-bottom: 1px solid #edf0ec; background: #fff; cursor: pointer; transition: background .14s; } .day-cell:nth-child(7n) { border-right: 0; } .day-cell:hover { background: #fbfcfa; } .day-cell.outside-month { background: #fafbf9; } .day-cell.outside-month .day-number { color: #c1c7c0; } .day-cell.selected { background: #f4f8f4; box-shadow: inset 0 0 0 1px #91b59b; } .day-cell.today .day-number { color: white; background: var(--green); } .day-number { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; color: #586159; font-size: 10px; } .day-events { display: grid; gap: 3px; margin-top: 4px; } .event-chip { min-width: 0; min-height: 18px; padding: 3px 4px; overflow: hidden; border: 0; border-radius: 3px; display: block; text-align: left; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; line-height: 12px; } .event-chip:hover { filter: brightness(.97); } .event-chip.more-events { color: #858c85; background: transparent; }
.agenda-panel { min-width: 0; min-height: 100%; padding: 17px 15px 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; display: flex; flex-direction: column; } .agenda-topline { display: flex; align-items: center; justify-content: space-between; } .agenda-kicker,.section-overline { color: #9aa19a; font-size: 9px; font-weight: 700; letter-spacing: .8px; } .agenda-date-chip { padding: 4px 7px; color: #52765a; background: #edf5ed; border-radius: 3px; font-size: 8px; font-weight: 700; letter-spacing: .6px; } .agenda-panel h2 { margin: 14px 0 4px; font: 700 16px 'Manrope',sans-serif; } .agenda-count { margin: 0; color: #939a93; font-size: 10px; } .agenda-list { display: grid; gap: 11px; margin-top: 17px; } .agenda-event { display: grid; grid-template-columns: 37px 3px minmax(0,1fr); gap: 9px; align-items: stretch; } .agenda-time { padding-top: 1px; color: #929992; font-size: 9px; } .agenda-accent { border-radius: 3px; } .agenda-event-copy { min-width: 0; } .agenda-event-copy strong { display: block; overflow: hidden; color: #303832; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; } .agenda-event-copy small { display: block; margin-top: 4px; color: #999f99; font-size: 9px; } .agenda-empty { padding: 11px 10px; border-radius: 5px; background: #f7f9f6; color: #858d85; font-size: 10px; line-height: 1.6; } .agenda-add { margin-top: 15px; padding: 9px 0; border: 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 7px; background: transparent; color: #66746a; font-size: 10px; font-weight: 600; } .agenda-add span { font-size: 16px; font-weight: 400; } .agenda-image-wrap { position: relative; min-height: 130px; flex: 1; overflow: hidden; margin-top: auto; border-radius: 5px; background: #293729; } .agenda-image-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; } .agenda-image-wrap::after { position: absolute; inset: 30% 0 0; content: ''; background: linear-gradient(transparent,rgba(18,27,20,.77)); } .image-caption { position: absolute; z-index: 1; right: 11px; bottom: 11px; left: 11px; display: grid; gap: 4px; color: white; } .image-caption strong { font: 600 15px 'Manrope',sans-serif; } .image-caption>span:last-child { color: rgba(255,255,255,.78); font-size: 9px; } .image-label { font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.hidden { display: none !important; } .explore-heading { padding-top: 43px; } .explore-heading h1 span { color: var(--green); } .explore-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); } .explore-search { width: min(330px,100%); height: 37px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #e3e7e2; border-radius: 5px; background: #fff; color: #929992; } .explore-search>span { font-size: 19px; } .explore-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; } .explore-search input::placeholder { color: #a1a7a1; } .category-tabs { display: flex; flex-wrap: wrap; gap: 4px; } .category-tab { border: 0; border-radius: 4px; padding: 7px 10px; background: transparent; color: #7d857e; font-size: 10px; } .category-tab.active { color: var(--green-dark); background: #eaf3eb; font-weight: 700; } .featured-row { display: flex; align-items: end; justify-content: space-between; margin: 17px 0 13px; } .featured-row h2 { margin: 5px 0 0; font: 700 19px 'Manrope',sans-serif; } .updated-label { color: #8a928a; font-size: 10px; } .updated-label .sync-dot { display: inline-block; margin-right: 5px; vertical-align: -1px; } .explore-grid,.collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; } .calendar-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: white; transition: transform .17s,box-shadow .17s; } .calendar-card:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(26,43,31,.08); } .card-cover { position: relative; height: 118px; overflow: hidden; background: #dce9df; } .card-cover img { width: 100%; height: 100%; object-fit: cover; } .cover-tag { position: absolute; top: 10px; left: 10px; padding: 5px 7px; border-radius: 3px; color: #314a37; background: rgba(255,255,255,.9); font-size: 8px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .card-body { padding: 12px 13px 13px; } .card-owner { display: flex; align-items: center; gap: 6px; color: #9aa19a; font-size: 9px; } .owner-avatar { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 700; } .card-body h3 { margin: 10px 0 5px; font: 700 14px 'Manrope',sans-serif; } .card-description { min-height: 33px; margin: 0; color: #858d85; font-size: 10px; line-height: 1.55; } .card-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 11px; border-top: 1px solid #eff1ee; color: #929a92; font-size: 9px; } .copy-button { border: 1px solid #dae5db; border-radius: 4px; padding: 6px 9px; color: var(--green-dark); background: #f8fbf8; font-size: 9px; font-weight: 700; } .copy-button:hover { background: #eaf3eb; } .copy-button.following { color: #727c73; background: #f2f4f1; } .empty-results { grid-column: 1/-1; padding: 38px 16px; color: #858d85; text-align: center; font-size: 12px; } .collection-grid { padding-top: 18px; border-top: 1px solid var(--line); } .collection-card { padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: white; } .collection-card-top { display: flex; align-items: flex-start; justify-content: space-between; } .collection-color { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 6px; color: white; font-size: 15px; } .collection-privacy { color: #909790; font-size: 9px; } .collection-card h3 { margin: 14px 0 5px; font: 700 14px 'Manrope',sans-serif; } .collection-card p { margin: 0; color: #858d85; font-size: 10px; } .collection-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; padding-top: 11px; border-top: 1px solid #eff1ee; color: #8b938b; font-size: 9px; } .collection-open { border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 700; }
.search-overlay { position: absolute; z-index: 5; top: 54px; right: 38px; width: min(430px,calc(100% - 76px)); padding: 9px; border: 1px solid #e1e5df; border-radius: 7px; background: white; box-shadow: var(--shadow); } .search-box { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-bottom: 1px solid var(--line); color: #8c948c; } .search-box>span { font-size: 20px; } .search-box input { flex: 1; min-width: 0; height: 29px; border: 0; outline: 0; color: var(--ink); font-size: 12px; } .search-box button { border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; color: #969d96; background: #fafbfa; font-size: 9px; } .search-results { max-height: 300px; overflow: auto; padding: 8px 4px; } .search-results>p { margin: 9px 5px; color: #929992; font-size: 10px; } .search-result { width: 100%; padding: 9px 8px; border: 0; border-radius: 4px; display: flex; align-items: center; gap: 9px; text-align: left; background: white; } .search-result:hover { background: #f5f7f4; } .search-result strong { display: block; font-size: 11px; } .search-result small { display: block; margin-top: 3px; color: #939a93; font-size: 9px; }
.app-dialog { width: min(440px,calc(100% - 28px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid #e4e8e2; border-radius: 9px; color: var(--ink); background: #fff; box-shadow: var(--shadow); } .app-dialog::backdrop { background: rgba(27,37,29,.38); backdrop-filter: blur(2px); } .app-dialog form { padding: 23px; } .dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 21px; } .dialog-heading h2 { margin: 0; font: 700 21px 'Manrope',sans-serif; } .dialog-close { width: 28px; height: 28px; border: 0; border-radius: 5px; color: #7f877f; background: #f4f6f3; font-size: 20px; line-height: 1; } .field-label { display: grid; gap: 7px; margin-bottom: 15px; color: #565f57; font-size: 10px; font-weight: 700; } .field-label input,.field-label select,.field-label textarea { width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid #e0e5df; border-radius: 5px; color: #303830; background: #fff; font-size: 11px; font-weight: 400; } .field-label textarea { resize: vertical; } .field-label input::placeholder,.field-label textarea::placeholder { color: #aab0aa; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .optional-label { margin-left: 5px; color: #a2a9a2; font-size: 8px; letter-spacing: .6px; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; margin-top: 10px; border-top: 1px solid var(--line); } .secondary-button { min-height: 36px; padding: 0 13px; border: 1px solid #e1e5e0; border-radius: 5px; color: #657066; background: white; font-size: 11px; font-weight: 600; } .visibility-field { display: grid; gap: 8px; padding: 0; border: 0; margin: 5px 0 17px; } .visibility-field legend { margin-bottom: 9px; color: #565f57; font-size: 10px; font-weight: 700; } .visibility-choice { position: relative; min-height: 58px; padding: 10px 12px; border: 1px solid #e4e8e3; border-radius: 5px; display: flex; align-items: center; gap: 10px; cursor: pointer; } .visibility-choice:has(input:checked) { border-color: #80ae8c; background: #f7fbf7; } .visibility-choice input { position: absolute; opacity: 0; } .visibility-choice strong,.visibility-choice small { display: block; } .visibility-choice strong { color: #39443b; font-size: 10px; } .visibility-choice small { margin-top: 4px; color: #909890; font-size: 9px; } .radio-mark { width: 14px; height: 14px; margin-left: auto; border: 1px solid #c9d0c8; border-radius: 50%; } .visibility-choice:has(input:checked) .radio-mark { border: 4px solid var(--green); } .detail-dialog { width: min(480px,calc(100% - 28px)); } .detail-content { padding: 25px; } .detail-kicker { color: #8a958a; font-size: 9px; font-weight: 700; letter-spacing: .8px; } .detail-content h2 { margin: 7px 0; font: 700 22px 'Manrope',sans-serif; } .detail-content p { color: #818a81; font-size: 11px; line-height: 1.6; } .detail-line { padding: 11px 0; border-top: 1px solid var(--line); color: #59635a; font-size: 11px; } .detail-line strong { display: block; margin-bottom: 4px; color: #333c34; } .detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .toast-region { position: fixed; z-index: 10; right: 20px; bottom: 20px; display: grid; gap: 7px; } .toast { padding: 11px 14px; border-radius: 5px; color: #fff; background: #283b2e; box-shadow: var(--shadow); font-size: 11px; animation: toast-in .22s ease both; } .toast.out { animation: toast-out .2s ease both; } @keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(5px); } }
@media (max-width:1120px) { .app-shell { grid-template-columns: 220px minmax(0,1fr); } .main-content { padding-right: 24px; padding-left: 24px; } .calendar-layout { grid-template-columns: minmax(0,1fr) 225px; gap: 12px; } .agenda-panel { padding: 14px 12px; } .day-cell { min-height: 92px; padding: 6px 4px; } .event-chip { font-size: 8px; } .explore-grid,.collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:850px) { .app-shell { grid-template-columns: 68px minmax(0,1fr); } .sidebar { align-items: center; padding: 20px 9px 13px; } .brand { margin: 0 0 27px; padding: 0; font-size: 0; } .create-button { width: 40px; min-width: 40px; padding: 0; font-size: 0; } .create-button>span { font-size: 24px; } .primary-nav { width: 100%; } .nav-link { justify-content: center; padding: 0; font-size: 0; } .nav-icon { font-size: 18px; } .nav-count,.sidebar-section,.sync-note,.profile-copy,.profile-more { display: none; } .sidebar-bottom { width: 100%; } .profile-button { justify-content: center; padding: 12px 0 0; } .main-content { padding: 0 20px 35px; } .calendar-layout { grid-template-columns: minmax(0,1fr); } .agenda-panel { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; } .agenda-topline,.agenda-panel h2,.agenda-count,.agenda-list,.agenda-add { grid-column: 1; } .agenda-image-wrap { grid-column: 2; grid-row: 1/span 5; width: 190px; min-height: 133px; margin-top: 0; } .agenda-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .agenda-add { margin-top: 9px; } .search-overlay { right: 20px; width: min(430px,calc(100% - 40px)); } }
@media (max-width:600px) { .app-shell { display: block; padding-bottom: 58px; } .sidebar { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; width: 100%; min-height: 56px; height: 56px; padding: 4px 9px; border-top: 1px solid var(--line); border-right: 0; display: block; background: rgba(255,255,255,.97); } .brand,.create-button,.sidebar-section,.sidebar-bottom { display: none; } .primary-nav { height: 100%; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; } .nav-link { height: 45px; display: flex; flex-direction: column; justify-content: center; gap: 1px; font-size: 8px; } .nav-icon { font-size: 16px; } .main-content { padding: 0 14px 28px; } .topbar { height: 55px; } .topbar-actions { gap: 9px; } .page-heading { padding: 22px 0 18px; align-items: center; } .eyebrow { font-size: 8px; } .page-heading h1 { font-size: 25px; } .heading-subtitle { max-width: 240px; font-size: 10px; line-height: 1.5; } .add-event-button { padding: 9px 10px; font-size: 10px; white-space: nowrap; } .calendar-toolbar { height: 48px; } .month-controls { gap: 5px; } .month-controls .icon-button { width: 27px; height: 27px; } .today-button { padding: 0 7px; font-size: 10px; } .toolbar-right { gap: 5px; } .view-switch { padding: 2px; } .view-option { padding: 5px 6px; font-size: 9px; } .filter-button { width: 31px; justify-content: center; padding: 0; font-size: 0; } .filter-button>span:first-child { font-size: 14px; } .filter-chevron { display: none; } .weekday-row { height: 32px; } .weekday { font-size: 8px; } .day-cell { min-height: 67px; padding: 4px 2px; } .day-number { width: 19px; height: 19px; font-size: 9px; } .day-events { gap: 2px; margin-top: 3px; } .event-chip { height: 5px; min-height: 5px; padding: 0; border-radius: 4px; font-size: 0; } .event-chip.more-events { display: none; } .agenda-panel { padding: 12px; } .agenda-panel h2 { margin-top: 10px; font-size: 14px; } .agenda-list { grid-template-columns: 1fr; gap: 9px; } .agenda-image-wrap { width: 115px; min-height: 110px; grid-row: 1/span 4; } .image-caption strong { font-size: 12px; } .image-caption>span:last-child { font-size: 8px; } .explore-heading { padding-top: 28px; } .explore-tools { align-items: flex-start; flex-direction: column; } .explore-search { width: 100%; } .category-tabs { width: 100%; } .category-tab { padding: 7px 8px; font-size: 9px; } .explore-grid,.collection-grid { grid-template-columns: 1fr; } .card-cover { height: 150px; } .featured-row h2 { font-size: 17px; } .updated-label { font-size: 9px; } .search-overlay { top: 46px; right: 10px; width: calc(100% - 20px); } .app-dialog form { padding: 19px; } .explore-heading .primary-button { padding: 9px; font-size: 10px; } }
.account-trigger { cursor: pointer; }
.top-avatar.account-trigger { padding: 0; border: 0; font-family: inherit; }
.account-dialog { width: min(410px,calc(100% - 28px)); }
.account-content { padding: 24px; }
.account-intro { margin: -7px 0 20px; color: #7e887e; font-size: 11px; line-height: 1.6; }
.provider-actions { display: grid; gap: 9px; }
.provider-button { min-height: 43px; padding: 0 13px; border: 1px solid #e0e5df; border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #333c34; background: white; font-size: 11px; font-weight: 700; }
.provider-button:hover { background: #f7f9f6; border-color: #cbd5ca; }
.provider-mark { width: 20px; height: 20px; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.google-mark { color: #4285f4; }
.apple-mark { color: #222; }
.account-hint { margin: 4px 0 0; color: #939a93; text-align: center; font-size: 9px; line-height: 1.5; }
.account-status { min-height: 16px; margin: 12px 0 0; color: #5b7560; font-size: 10px; line-height: 1.5; }
.account-status.error { color: #b94e40; }
.signed-in-panel { display: grid; gap: 17px; }
.account-identity { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: #fafbf9; }
.account-identity strong,.account-identity small { display: block; }
.account-identity strong { color: #303830; font-size: 11px; }
.account-identity small { margin-top: 4px; color: #8b938b; font-size: 10px; }
.sign-out-button { justify-self: end; }
.card-meta { align-items: flex-start; gap: 10px; }
.card-meta > span { padding-top: 6px; }
.card-actions { display: grid; justify-items: stretch; gap: 5px; }
.card-actions .copy-button { white-space: nowrap; }
.copy-button:disabled { color: #788078; background: #f2f4f1; cursor: default; }
.collection-footer { gap: 9px; align-items: flex-start; }
.collection-footer > span { line-height: 1.5; }
.collection-open { white-space: nowrap; }
.collection-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.collection-actions .secondary-button { min-height: 30px; padding: 0 9px; font-size: 9px; }
.contributor-manager { padding-top: 13px; border-top: 1px solid var(--line); margin: 2px 0 15px; }
.contributor-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.contributor-heading strong,.contributor-heading small { display: block; }
.contributor-heading strong { color: #515b52; font-size: 10px; }
.contributor-heading small { margin-top: 4px; color: #969d96; font-size: 9px; }
.owner-badge { padding: 4px 6px; border-radius: 3px; color: #53725a; background: #edf5ed; font-size: 8px; font-weight: 700; white-space: nowrap; }
.contributor-entry { display: flex; gap: 7px; }
.contributor-entry input { min-width: 0; min-height: 34px; flex: 1; padding: 7px 9px; border: 1px solid #e0e5df; border-radius: 5px; font-size: 10px; }
.contributor-entry .secondary-button { min-height: 34px; }
.contributor-list { display: grid; gap: 5px; margin-top: 8px; }
.contributor-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid #edf0ec; border-radius: 4px; }
.contributor-email { min-width: 0; flex: 1; overflow: hidden; color: #576158; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.contributor-status { color: #a08445; font-size: 8px; font-weight: 700; }
.remove-contributor { width: 22px; height: 22px; border: 0; border-radius: 4px; color: #899189; background: transparent; font-size: 17px; }
.remove-contributor:hover { color: #a7473b; background: #fff0ed; }
.contributors-empty,.field-note { margin: 7px 0 0; color: #9aa19a; font-size: 9px; line-height: 1.5; }
.danger-button { min-height: 36px; padding: 0 11px; border: 1px solid #efd5d1; border-radius: 5px; margin-right: auto; color: #a7473b; background: #fff9f8; font-size: 10px; font-weight: 600; }
.danger-button:hover { background: #fff0ed; }
.dashboard-heading { padding-top: 35px; }
.dashboard-heading h1 span { color: var(--green); }
.dashboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.board-tabs { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.board-tab { min-height: 31px; padding: 0 11px; border: 0; border-radius: 4px; color: #737d74; background: transparent; font-size: 10px; white-space: nowrap; }
.board-tab:hover { background: #f0f3ef; }
.board-tab.active { color: #1c6746; background: #e8f2e9; font-weight: 700; }
.board-search { width: min(250px,100%); min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e3e7e2; border-radius: 5px; background: #fff; color: #929992; }
.board-search span { font-size: 18px; }
.board-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.board-search input::placeholder { color: #a1a7a1; }
.dashboard-context { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 8px 0 14px; }
.dashboard-context h2 { margin: 5px 0 0; font: 700 19px 'Manrope',sans-serif; }
.metrics-disclaimer { color: #929992; font-size: 9px; text-align: right; }
.dashboard-grid { columns: 3 230px; column-gap: 15px; }
.event-board-card { width: 100%; display: inline-block; overflow: hidden; margin: 0 0 15px; border: 1px solid var(--line); border-radius: 6px; background: #fff; break-inside: avoid; vertical-align: top; animation: board-rise .35s ease both; }
.event-board-card-1 { animation-delay: .04s; }.event-board-card-2 { animation-delay: .08s; }.event-board-card-3 { animation-delay: .12s; }
.event-board-image { position: relative; height: 220px; overflow: hidden; background: #e5ebe5; }
.event-board-card-0 .event-board-image { height: 235px; }.event-board-card-1 .event-board-image { height: 285px; }.event-board-card-2 .event-board-image { height: 205px; }.event-board-card-3 .event-board-image { height: 250px; }
.event-board-image::after { position: absolute; inset: 45% 0 0; content: ''; background: linear-gradient(transparent,rgba(19,28,21,.55)); pointer-events: none; }
.event-board-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s; }
.event-board-card:hover .event-board-image img { transform: scale(1.035); }
.event-board-date { position: absolute; z-index: 1; left: 10px; bottom: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.52); border-radius: 4px; color: #fff; background: rgba(24,35,27,.42); backdrop-filter: blur(5px); font-size: 9px; font-weight: 600; }
.event-board-date span { margin: 0 3px; color: rgba(255,255,255,.7); }
.favorite-button { position: absolute; z-index: 2; top: 9px; right: 9px; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: white; background: rgba(24,35,27,.34); backdrop-filter: blur(5px); font-size: 17px; line-height: 1; }
.favorite-button.is-favorite { color: #ffd26c; background: rgba(24,35,27,.65); }
.event-metrics { position: absolute; z-index: 1; left: 10px; bottom: 45px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: white; font-size: 9px; font-weight: 600; text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.event-metrics small { padding: 3px 5px; border-radius: 3px; color: #26342a; background: rgba(255,255,255,.88); font-size: 7px; letter-spacing: .4px; text-shadow: none; }
.event-board-info { padding: 12px 13px 13px; }
.event-board-calendar { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: #818a81; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.event-board-calendar .calendar-color { width: 7px; height: 7px; flex-basis: 7px; }
.event-board-info h3 { margin: 8px 0 0; font: 700 14px 'Manrope',sans-serif; line-height: 1.4; }
.event-board-title { padding: 0; border: 0; background: transparent; color: #283129; text-align: left; font: inherit; }
.event-board-title:hover { color: var(--green-dark); }
.event-board-note { margin: 6px 0 0; color: #858e85; font-size: 10px; line-height: 1.5; }
.event-board-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #eff1ee; }
.status-picker-label { color: #969d96; font-size: 9px; }
.status-picker { max-width: 132px; min-height: 29px; padding: 4px 22px 4px 8px; border: 1px solid #e3e7e2; border-radius: 4px; color: #526154; background: #fbfcfa; font-size: 9px; }
.dashboard-empty { grid-column: 1/-1; padding: 60px 18px; color: #788278; text-align: center; }
.dashboard-empty .empty-spark { color: var(--coral); font-size: 24px; }
.dashboard-empty h3 { margin: 9px 0 4px; color: #384238; font: 700 16px 'Manrope',sans-serif; }
.dashboard-empty p { margin: 0; font-size: 10px; }
.public-metrics-fields { padding: 12px; border: 1px solid #e5eae4; border-radius: 5px; margin: 2px 0 15px; background: #fafcf9; }
.public-metrics-fields > strong { color: #506451; font-size: 10px; }
.public-metrics-fields > p { margin: 5px 0 12px; color: #929a92; font-size: 9px; line-height: 1.45; }
.public-metrics-fields .field-row { gap: 8px; }
.public-metrics-fields .field-label { margin-bottom: 11px; }
.public-metrics-fields .field-label:last-child { margin-bottom: 0; }
.event-metrics a { color: white; font-size: 8px; font-weight: 700; text-decoration: underline; }
.public-calendar-dialog { width: min(680px,calc(100% - 28px)); max-height: calc(100% - 32px); overflow-y: auto; }
.public-calendar-content { padding: 23px; }
.public-calendar-content .dialog-heading { margin-bottom: 10px; }
.public-calendar-description { margin: 0; color: #798379; font-size: 11px; line-height: 1.6; }
.public-calendar-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 11px 0 14px; border-bottom: 1px solid var(--line); color: #8d958d; font-size: 9px; }
.public-event-list { display: grid; gap: 0; }
.public-event-row { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0ec; }
.public-event-date { width: 40px; height: 44px; display: grid; align-content: center; justify-items: center; border-radius: 4px; color: #517456; background: #edf5ed; }
.public-event-date span { font-size: 8px; font-weight: 700; text-transform: uppercase; }
.public-event-date strong { margin-top: 2px; font: 700 15px 'Manrope',sans-serif; }
.public-event-details { min-width: 0; }
.public-event-details h3 { margin: 0; color: #303930; font: 700 12px 'Manrope',sans-serif; }
.public-event-details p { margin: 4px 0 0; color: #879087; font-size: 9px; line-height: 1.45; }
.preview-event-metrics { display: inline-block; margin-top: 5px; color: #52765a; font-size: 9px; font-weight: 600; }
.public-event-row .secondary-button { min-height: 31px; padding: 0 9px; white-space: nowrap; font-size: 9px; }
.add-public-event-dialog { width: min(420px,calc(100% - 28px)); }
.add-public-event-dialog form { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 23px; }
.add-event-source { margin: -8px 0 17px; color: #818b81; font-size: 10px; }
.new-calendar-option { display: flex; align-items: center; gap: 8px; padding: 10px 0; color: #566156; font-size: 10px; font-weight: 600; }
.new-calendar-option input { accent-color: var(--green); }
.destination-new-fields { padding: 11px 12px 1px; border: 1px solid #e5eae4; border-radius: 5px; background: #fafcf9; }
@media (max-width:600px) { .public-calendar-content { padding: 18px; } .public-event-row { grid-template-columns: 38px minmax(0,1fr); gap: 9px; } .public-event-row .secondary-button { grid-column: 2; justify-self: start; } .public-calendar-meta { gap: 6px 10px; } .add-public-event-dialog form { padding: 19px; } }
.calendar-card .card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.calendar-card .card-actions .copy-button { min-height: 30px; padding: 0 9px; }
.calendar-card .card-actions [data-view-public-calendar] { margin-right: auto; }
.calendar-card .card-actions [data-follow-calendar] { margin-left: auto; }
.public-calendar-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0 13px; border-bottom: 1px solid var(--line); }
.public-calendar-actions > span { color: #899289; font-size: 9px; }
.public-calendar-actions .secondary-button { min-height: 31px; padding: 0 10px; color: var(--green-dark); border-color: #dae5db; background: #f8fbf8; font-size: 9px; font-weight: 700; white-space: nowrap; }
.public-calendar-actions .secondary-button:hover { background: #eaf3eb; }
.event-board-meta { position: absolute; z-index: 2; right: 44px; bottom: 10px; left: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.event-board-date { position: static; }
.event-board-status { padding: 6px 8px; border: 1px solid rgba(255,255,255,.52); border-radius: 4px; color: #fff; background: rgba(39,116,81,.76); backdrop-filter: blur(5px); font-size: 9px; font-weight: 700; }
.detail-status-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); color: #737d73; font-size: 10px; }
.detail-status-picker { min-height: 32px; padding: 4px 25px 4px 9px; border: 1px solid #e3e7e2; border-radius: 4px; color: #526154; background: #fbfcfa; font-size: 10px; }
.share-event-dialog { width: min(460px,calc(100% - 28px)); }
.share-event-content { padding: 23px; }
.share-event-content .dialog-heading { margin-bottom: 12px; }
.share-event-notice { padding: 10px 11px; border-radius: 4px; margin: 0 0 15px; color: #6d796d; background: #f3f7f2; font-size: 10px; line-height: 1.5; }
.share-event-content .field-label { margin-bottom: 12px; }
.share-event-content #share-event-url { color: #6e786e; background: #fafbf9; }
.share-event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.share-event-actions .primary-button,.share-link-button { min-height: 34px; padding: 0 11px; font-size: 10px; }
.share-link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.share-recipient-label { margin-top: 8px; }
.shared-event-view { padding: 36px 0; }
.shared-event-shell { max-width: 920px; min-height: 420px; overflow: hidden; margin: 0 auto; border: 1px solid var(--line); border-radius: 7px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); background: #fff; }
.shared-event-image { width: 100%; height: 100%; min-height: 420px; object-fit: cover; background: #e8eee8; }
.shared-event-copy { align-self: center; padding: 28px; }
.shared-event-copy h1 { margin: 4px 0 12px; font-size: 27px; }
.shared-event-date { margin: 0; color: #3a5d43; font-size: 12px; font-weight: 700; }
.shared-event-calendar { margin: 9px 0 0; color: #818a81; font-size: 10px; }
.shared-event-note { margin: 19px 0 0; color: #707a70; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.shared-event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (max-width:600px) { .share-event-content { padding: 19px; } .shared-event-view { padding: 18px 0; } .shared-event-shell { min-height: 0; grid-template-columns: 1fr; } .shared-event-image { height: 230px; min-height: 230px; } .shared-event-copy { padding: 21px; } .shared-event-copy h1 { font-size: 23px; } }
html[data-theme="dark"] { color-scheme: dark; --ink: #e6ece6; --muted: #a0ada1; --line: #37443a; --canvas: #141c17; --paper: #202b24; --green: #33784d; --green-dark: #a0d2ac; --green-pale: #283d2e; --blue: #aebfff; --blue-pale: #303a52; --coral: #f09a7f; --yellow: #edc46f; --shadow: 0 18px 48px rgba(0,0,0,.34); }
html[data-theme="dark"] body { color: var(--ink); background: var(--canvas); }
html[data-theme="dark"] .sidebar { background: #18221b; border-color: var(--line); }
html[data-theme="dark"] .brand { color: #e3ebe3; }
html[data-theme="dark"] .topbar { border-color: var(--line); }
html[data-theme="dark"] .breadcrumbs { color: #a0ada1; }
html[data-theme="dark"] .breadcrumbs strong { color: #e0e8e0; }
html[data-theme="dark"] .crumb-slash { color: #59675c; }
html[data-theme="dark"] .nav-link { color: #b1bcb2; }
html[data-theme="dark"] .nav-link:hover,html[data-theme="dark"] .calendar-item:hover,html[data-theme="dark"] .calendar-item.selected { color: #eef3ee; background: #29362c; }
html[data-theme="dark"] .nav-link.active { color: #c1e6c8; background: #294031; }
html[data-theme="dark"] .nav-count { color: #b8c4b9; background: #2e3b31; }
html[data-theme="dark"] .section-heading,html[data-theme="dark"] .agenda-kicker,html[data-theme="dark"] .section-overline { color: #9eaa9f; }
html[data-theme="dark"] .calendar-item { color: #bbc5bc; }
html[data-theme="dark"] .calendar-visibility { color: #a1ada2; }
html[data-theme="dark"] .sync-note strong,html[data-theme="dark"] .profile-copy strong { color: #e2e9e2; }
html[data-theme="dark"] .sync-note small,html[data-theme="dark"] .profile-copy small { color: #a0aba1; }
html[data-theme="dark"] .profile-more { color: #b5c0b6; }
html[data-theme="dark"] .icon-button,html[data-theme="dark"] .help-button,html[data-theme="dark"] .today-button,html[data-theme="dark"] .filter-button,html[data-theme="dark"] .view-switch,html[data-theme="dark"] .explore-search,html[data-theme="dark"] .board-search { color: #d4ddd5; background: #202b24; border-color: #3a473d; }
html[data-theme="dark"] .icon-button:hover,html[data-theme="dark"] .today-button:hover,html[data-theme="dark"] .filter-button:hover { background: #2b382e; border-color: #536456; }
html[data-theme="dark"] .help-button { color: #c1ccc2; }
html[data-theme="dark"] .top-avatar { color: #d8eadb; background: #365542; }
html[data-theme="dark"] h1,html[data-theme="dark"] .page-heading h1 { color: #e8eee8; }
html[data-theme="dark"] h1 span { color: #a5b1a6; }
html[data-theme="dark"] .heading-subtitle { color: #a7b1a8; }
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .dialog-eyebrow { color: #9ec6a4; }
html[data-theme="dark"] .view-option { color: #acb7ad; }
html[data-theme="dark"] .view-option.active { color: #d0ead3; background: #2d4031; }
html[data-theme="dark"] .calendar-board,html[data-theme="dark"] .agenda-panel,html[data-theme="dark"] .calendar-card,html[data-theme="dark"] .collection-card,html[data-theme="dark"] .shared-event-shell { color: var(--ink); background: #202a23; border-color: var(--line); }
html[data-theme="dark"] .weekday { color: #a2ada3; }
html[data-theme="dark"] .day-cell { background: #202a23; border-color: #303c33; }
html[data-theme="dark"] .day-cell:hover { background: #26342a; }
html[data-theme="dark"] .day-cell.outside-month { background: #1a231c; }
html[data-theme="dark"] .day-cell.outside-month .day-number { color: #667368; }
html[data-theme="dark"] .day-cell.selected { background: #2a3d2e; box-shadow: inset 0 0 0 1px #678f6e; }
html[data-theme="dark"] .day-number { color: #d0d8d0; }
html[data-theme="dark"] .event-chip:not(.more-events) { filter: brightness(.78) saturate(.9); }
html[data-theme="dark"] .event-chip.more-events { color: #bac4bb; }
html[data-theme="dark"] .agenda-panel h2,html[data-theme="dark"] .event-board-title,html[data-theme="dark"] .event-board-info h3,html[data-theme="dark"] .collection-card h3,html[data-theme="dark"] .featured-row h2 { color: #e5ece5; }
html[data-theme="dark"] .agenda-count,html[data-theme="dark"] .agenda-time,html[data-theme="dark"] .agenda-event-copy small,html[data-theme="dark"] .agenda-event-copy strong,html[data-theme="dark"] .card-owner,html[data-theme="dark"] .card-description,html[data-theme="dark"] .card-meta,html[data-theme="dark"] .collection-card p,html[data-theme="dark"] .collection-footer,html[data-theme="dark"] .event-board-calendar,html[data-theme="dark"] .event-board-note { color: #a8b3a9; }
html[data-theme="dark"] .agenda-empty,html[data-theme="dark"] .dashboard-empty { color: #adb8ae; background: #29352c; }
html[data-theme="dark"] .agenda-empty { background: #29352c; }
html[data-theme="dark"] .agenda-add { color: #bfd1c1; border-color: var(--line); }
html[data-theme="dark"] .agenda-date-chip,html[data-theme="dark"] .category-tab.active { color: #c1e4c8; background: #2c4432; }
html[data-theme="dark"] .category-tab { color: #b1bcb2; }
html[data-theme="dark"] .copy-button { color: #c5dfc9; background: #26382b; border-color: #405543; }
html[data-theme="dark"] .copy-button:hover { background: #304635; }
html[data-theme="dark"] .copy-button.following { color: #b8c2b9; background: #2b352d; }
html[data-theme="dark"] .cover-tag { color: #26332a; }
html[data-theme="dark"] .card-meta,html[data-theme="dark"] .collection-footer,html[data-theme="dark"] .collection-grid { border-color: #354137; }
html[data-theme="dark"] .card-owner .owner-avatar { filter: brightness(.85); }
html[data-theme="dark"] .board-tab { color: #b5c0b6; }
html[data-theme="dark"] .board-tab:hover { background: #27342a; }
html[data-theme="dark"] .board-tab.active { color: #c2e5c8; background: #2d4332; }
html[data-theme="dark"] .board-search input,html[data-theme="dark"] .explore-search input { color: #e3eae3; }
html[data-theme="dark"] .board-search input::placeholder,html[data-theme="dark"] .explore-search input::placeholder { color: #879489; }
html[data-theme="dark"] .dashboard-context h2 { color: #e2eae2; }
html[data-theme="dark"] .metrics-disclaimer,html[data-theme="dark"] .updated-label { color: #a1ada2; }
html[data-theme="dark"] .event-board-card { background: #202a23; border-color: #38443a; }
html[data-theme="dark"] .event-board-info { background: #202a23; }
html[data-theme="dark"] .event-board-footer { border-color: #39453b; }
html[data-theme="dark"] .status-picker,html[data-theme="dark"] .detail-status-picker { color: #d2ddd3; background: #253129; border-color: #435145; }
html[data-theme="dark"] .status-picker-label,html[data-theme="dark"] .detail-status-label { color: #aab6ab; }
html[data-theme="dark"] .collection-open { color: #a8d5b0; }
html[data-theme="dark"] .collection-privacy { color: #aeb9af; }
html[data-theme="dark"] .search-overlay,html[data-theme="dark"] .search-result { color: #e2eae2; background: #202a23; border-color: var(--line); }
html[data-theme="dark"] .search-result:hover { background: #2a372d; }
html[data-theme="dark"] .search-result small,html[data-theme="dark"] .search-results>p,html[data-theme="dark"] .search-box { color: #a5b0a6; }
html[data-theme="dark"] .search-box { border-color: var(--line); }
html[data-theme="dark"] .search-box input { color: #e3ebe3; background: transparent; }
html[data-theme="dark"] .search-box button { color: #bdc8be; background: #28342b; border-color: #3c493e; }
html[data-theme="dark"] .app-dialog { color: #e5ece5; background: #202a23; border-color: #3a473d; }
html[data-theme="dark"] .app-dialog::backdrop { background: rgba(3,8,5,.68); }
html[data-theme="dark"] .dialog-heading h2,html[data-theme="dark"] .detail-content h2 { color: #e8eee8; }
html[data-theme="dark"] .dialog-close { color: #cad4cb; background: #303b32; }
html[data-theme="dark"] .field-label,html[data-theme="dark"] .visibility-field legend { color: #c1cbc2; }
html[data-theme="dark"] .field-label input,html[data-theme="dark"] .field-label select,html[data-theme="dark"] .field-label textarea,html[data-theme="dark"] .contributor-entry input { color: #e3eae3; background: #19221c; border-color: #3b483d; }
html[data-theme="dark"] .field-label input::placeholder,html[data-theme="dark"] .field-label textarea::placeholder,html[data-theme="dark"] .contributor-entry input::placeholder { color: #839084; }
html[data-theme="dark"] .secondary-button { color: #c7d2c8; background: #27332a; border-color: #3d4a3f; }
html[data-theme="dark"] .secondary-button:hover { background: #314034; }
html[data-theme="dark"] .visibility-choice { border-color: #3c493e; }
html[data-theme="dark"] .visibility-choice:has(input:checked) { background: #293b2d; border-color: #62876a; }
html[data-theme="dark"] .visibility-choice strong,html[data-theme="dark"] .detail-line strong { color: #e0e8e0; }
html[data-theme="dark"] .visibility-choice small,html[data-theme="dark"] .detail-content p { color: #a7b2a8; }
html[data-theme="dark"] .dialog-actions,html[data-theme="dark"] .detail-line { border-color: #3a463c; }
html[data-theme="dark"] .contributor-manager,html[data-theme="dark"] .contributor-row { border-color: #39463b; }
html[data-theme="dark"] .contributor-heading strong,html[data-theme="dark"] .contributor-email { color: #d1dcd2; }
html[data-theme="dark"] .contributor-heading small,html[data-theme="dark"] .contributors-empty,html[data-theme="dark"] .field-note { color: #9aa69b; }
html[data-theme="dark"] .contributor-status { color: #e2c478; }
html[data-theme="dark"] .owner-badge { color: #c3e0c7; background: #2b4030; }
html[data-theme="dark"] .public-metrics-fields,html[data-theme="dark"] .destination-new-fields,html[data-theme="dark"] .account-identity { color: #dce5dd; background: #1a241d; border-color: #3a473c; }
html[data-theme="dark"] .public-metrics-fields>strong { color: #c4dec8; }
html[data-theme="dark"] .public-metrics-fields>p { color: #a3aea4; }
html[data-theme="dark"] .public-calendar-description,html[data-theme="dark"] .public-calendar-meta,html[data-theme="dark"] .public-event-details p,html[data-theme="dark"] .add-event-source { color: #a7b2a8; }
html[data-theme="dark"] .public-calendar-meta,html[data-theme="dark"] .public-event-row { border-color: #39463b; }
html[data-theme="dark"] .public-event-details h3 { color: #e3eae3; }
html[data-theme="dark"] .public-event-date { color: #c3e1c7; background: #2a4030; }
html[data-theme="dark"] .preview-event-metrics { color: #acd5b2; }
html[data-theme="dark"] .public-calendar-actions { border-color: #39463b; }
html[data-theme="dark"] .public-calendar-actions>span { color: #a5b0a6; }
html[data-theme="dark"] .public-calendar-actions .secondary-button { color: #c6e2cb; background: #263a2b; border-color: #3e5742; }
html[data-theme="dark"] .account-intro,html[data-theme="dark"] .account-identity small,html[data-theme="dark"] .account-hint { color: #a6b1a7; }
html[data-theme="dark"] .account-identity strong { color: #e2eae2; }
html[data-theme="dark"] .provider-button { color: #e0e8e0; background: #263129; border-color: #3d4a40; }
html[data-theme="dark"] .provider-button:hover { background: #303d33; }
html[data-theme="dark"] .apple-mark { color: #f1f4f1; }
html[data-theme="dark"] .account-status { color: #acd4b2; }
html[data-theme="dark"] .account-status.error { color: #ff9d8c; }
html[data-theme="dark"] .share-event-notice { color: #c0d4c2; background: #29392d; }
html[data-theme="dark"] .share-event-content #share-event-url { color: #c8d3c9; background: #1a241d; }
html[data-theme="dark"] .shared-event-copy h1 { color: #e9efe9; }
html[data-theme="dark"] .shared-event-date { color: #b7dfbd; }
html[data-theme="dark"] .shared-event-calendar,html[data-theme="dark"] .shared-event-note { color: #acb7ad; }
html[data-theme="dark"] .shared-event-image { background: #243128; }
html[data-theme="dark"] .danger-button { color: #ffb0a3; background: #392824; border-color: #65413a; }
html[data-theme="dark"] .danger-button:hover { background: #49302a; }
html[data-theme="dark"] .new-calendar-option { color: #c2cdc3; }
html[data-theme="dark"] .remove-contributor { color: #b1bcb2; }
html[data-theme="dark"] .remove-contributor:hover { color: #ffb0a3; background: #3a2925; }
html[data-theme="dark"] .share-link-button { text-decoration: none; }
html[data-theme="dark"] .visibility-choice:has(input:checked) .radio-mark { border-color: var(--green-dark); }
html[data-theme="dark"] .agenda-image-wrap { background: #202a23; }
.dashboard-tag-filters { display: flex; align-items: flex-start; gap: 10px; padding: 0 0 13px; }
.dashboard-tag-filters > span,.calendar-tag-filter label { padding-top: 6px; color: #8c958c; font-size: 9px; font-weight: 700; }
#dashboard-tag-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.tag-filter,.event-tag-chip { min-height: 25px; padding: 0 9px; border: 1px solid #e3e8e2; border-radius: 14px; color: #6f7a70; background: #fff; font-size: 9px; white-space: nowrap; }
.tag-filter:hover,.event-tag-chip:hover { color: var(--green-dark); border-color: #aec7b2; background: #f4f8f4; }
.tag-filter.active { color: var(--green-dark); border-color: #bfd4c1; background: #eaf3eb; font-weight: 700; }
.calendar-tag-filter { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 0 10px; }
.calendar-tag-filter select { min-height: 29px; padding: 4px 25px 4px 8px; border: 1px solid #e1e6e0; border-radius: 4px; color: #626e63; background: #fff; font-size: 9px; }
.event-tags-field { padding: 12px; border: 1px solid #e5eae4; border-radius: 5px; margin: 2px 0 15px; background: #fafcf9; }
.event-tags-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.event-tags-heading strong { color: #566257; font-size: 10px; }
.event-tags-heading span { color: #989f98; font-size: 8px; }
.event-tag-entry { display: flex; gap: 7px; }
.event-tag-entry input { min-width: 0; min-height: 34px; flex: 1; padding: 7px 9px; border: 1px solid #e0e5df; border-radius: 5px; color: #303830; background: #fff; font-size: 10px; }
.event-tag-entry input::placeholder { color: #aab0aa; }
.event-tag-entry .secondary-button { min-height: 34px; }
.event-tags-list,.event-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.event-tag-chip { min-height: 23px; padding: 0 8px; color: #58705a; background: #f6faf6; }
.event-tag-chip.removable { display: inline-flex; align-items: center; gap: 6px; }
.event-tag-chip.removable span { color: #9aa59b; font-size: 13px; }
.tag-editor-empty { color: #9aa19a; font-size: 9px; }
.agenda-tag-text { display: block; margin-top: 4px; color: #75877a; font-size: 8px; line-height: 1.4; }
html[data-theme="dark"] .dashboard-tag-filters > span,html[data-theme="dark"] .calendar-tag-filter label { color: #a9b4aa; }
html[data-theme="dark"] .tag-filter,html[data-theme="dark"] .event-tag-chip { color: #c3d1c5; border-color: #405044; background: #263229; }
html[data-theme="dark"] .tag-filter:hover,html[data-theme="dark"] .event-tag-chip:hover { color: #d2ecd5; border-color: #65826a; background: #304333; }
html[data-theme="dark"] .tag-filter.active { color: #d1ead4; border-color: #64846a; background: #314534; }
html[data-theme="dark"] .calendar-tag-filter select { color: #d0dbd1; border-color: #3b493e; background: #202b24; }
html[data-theme="dark"] .event-tags-field { border-color: #3a473c; background: #1a241d; }
html[data-theme="dark"] .event-tags-heading strong { color: #d1ddd2; }
html[data-theme="dark"] .event-tags-heading span,html[data-theme="dark"] .tag-editor-empty { color: #a0aca1; }
html[data-theme="dark"] .event-tag-entry input { color: #e1e9e2; border-color: #3b483d; background: #19221c; }
html[data-theme="dark"] .event-tag-entry input::placeholder { color: #839084; }
html[data-theme="dark"] .event-tag-chip.removable span { color: #a6b2a7; }
html[data-theme="dark"] .agenda-tag-text { color: #a9c4ad; }
@media (max-width:600px) { .dashboard-tag-filters { align-items: flex-start; flex-direction: column; gap: 6px; } #dashboard-tag-list { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding-bottom: 3px; } .calendar-tag-filter { justify-content: flex-start; } .event-tags-heading { align-items: flex-start; flex-direction: column; gap: 4px; } }
@keyframes board-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:850px) { .dashboard-grid { columns: 2 210px; } }
@media (max-width:600px) { .primary-nav { grid-template-columns: repeat(4,minmax(0,1fr)); } .dashboard-heading { padding-top: 22px; } .dashboard-heading .heading-subtitle { max-width: 260px; } .dashboard-controls { align-items: stretch; flex-direction: column; } .board-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; } .board-tab { padding: 0 9px; } .board-search { width: 100%; } .dashboard-context h2 { font-size: 16px; } .metrics-disclaimer { max-width: 110px; line-height: 1.4; } .dashboard-grid { columns: 1; } .event-board-image,.event-board-card-0 .event-board-image,.event-board-card-1 .event-board-image,.event-board-card-2 .event-board-image,.event-board-card-3 .event-board-image { height: 235px; } }
/* In-dialog dropdowns: the option list opens inside the popup instead of the browser's floating menu. */
.dm-select-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.dm-select { position: relative; min-width: 0; line-height: 1.3; }
.dm-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid #e0e5df; border-radius: 5px; color: #303830; background: #fff; font-size: 11px; font-weight: 400; text-align: left; }
.dm-select-trigger::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease, margin .15s ease; }
.dm-select.open .dm-select-trigger { border-color: var(--green); }
.dm-select.open .dm-select-trigger::after { margin-top: 3px; transform: rotate(-135deg); }
.dm-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.dm-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-select-list { display: grid; gap: 1px; max-height: 188px; margin-top: 5px; padding: 4px; overflow-y: auto; border: 1px solid #e0e5df; border-radius: 6px; background: #fff; }
.dm-select-list[hidden] { display: none; }
.dm-select-option { padding: 8px 9px; border: 0; border-radius: 4px; color: #303830; background: transparent; font-size: 11px; font-weight: 500; text-align: left; }
.dm-select-option:hover,.dm-select-option:focus-visible { background: #f2f5f1; }
.dm-select-option.selected { color: var(--green-dark); background: var(--green-pale); font-weight: 700; }
.dm-select-option.selected::after { content: "✓"; float: right; }
.detail-status-label { align-items: flex-start; line-height: 32px; }
.detail-status-label .dm-select { width: 150px; line-height: 1.3; }
.detail-status-label .dm-select-trigger { min-height: 32px; padding: 4px 9px; border-color: #e3e7e2; border-radius: 4px; color: #526154; background: #fbfcfa; font-size: 10px; }
html[data-theme="dark"] .dm-select-trigger,html[data-theme="dark"] .dm-select-list { color: #e3eae3; background: #19221c; border-color: #3b483d; }
html[data-theme="dark"] .dm-select-option { color: #dbe4dc; }
html[data-theme="dark"] .dm-select-option:hover,html[data-theme="dark"] .dm-select-option:focus-visible { background: #263229; }
html[data-theme="dark"] .dm-select-option.selected { color: #bfe3c9; background: #2a3d2e; }
html[data-theme="dark"] .detail-status-label .dm-select-trigger { color: #d2ddd3; background: #253129; border-color: #435145; }

/* Calendar visibility toggles */
.calendar-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 12px; }
.toggle-label { margin-right: 4px; color: #8c958c; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.calendar-toggle { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 7px; border: 1px solid var(--line); border-radius: 999px; color: #8a928a; background: #fff; font-size: 10.5px; font-weight: 600; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.calendar-toggle:hover { border-color: #cdd5cc; }
.calendar-toggle .toggle-check { display: grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid var(--cal-color,#b9c1b8); border-radius: 50%; color: #fff; font-size: 8px; line-height: 1; }
.calendar-toggle.on { color: var(--ink); border-color: var(--cal-color,var(--green)); background: var(--cal-bg,var(--green-pale)); }
.calendar-toggle.on .toggle-check { background: var(--cal-color,var(--green)); }
.calendar-toggle.all-toggle { --cal-color: var(--green); --cal-bg: var(--green-pale); }
.toggle-summary { margin-left: auto; color: #8c958c; font-size: 10px; }
html[data-theme="dark"] .toggle-label,html[data-theme="dark"] .toggle-summary { color: #a9b4aa; }
html[data-theme="dark"] .calendar-toggle { color: #9aa79b; background: #202b24; border-color: #3a473d; }
html[data-theme="dark"] .calendar-toggle.on { color: #eef3ee; background: #29362c; border-color: var(--cal-color,#678f6e); }
html[data-theme="dark"] .calendar-toggle.all-toggle.on { border-color: #678f6e; }
@media (max-width:600px) { .calendar-toggles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; } .calendar-toggle { flex: none; } .toggle-summary { display: none; } }

/* Category and tag grouping for the calendar toggles */
.group-toggle-button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px dashed #cdd5cc; border-radius: 999px; color: #737d73; background: transparent; font-size: 10.5px; font-weight: 600; }
.group-toggle-button:hover,.group-toggle-button[aria-expanded="true"] { color: var(--ink); border-style: solid; background: #fff; }
.group-toggle-button.active { color: var(--green-dark); border-color: var(--green); border-style: solid; background: var(--green-pale); }
.group-count { display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; color: #fff; background: var(--green); font-size: 9px; }
.group-chevron { font-size: 12px; line-height: 1; transition: transform .15s ease; }
.group-toggle-button[aria-expanded="true"] .group-chevron { transform: rotate(180deg); }
.calendar-toggle.filtered-out { opacity: .5; }
.calendar-group-panel { display: grid; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfa; }
.calendar-group-panel.hidden { display: none; }
.group-row { display: flex; align-items: flex-start; gap: 12px; }
.group-label { flex: none; width: 58px; padding-top: 6px; color: #8c958c; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.group-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.group-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: #626e63; background: #fff; font-size: 10.5px; font-weight: 600; }
.group-chip small { color: #9aa29a; font-size: 9px; }
.group-chip:hover { border-color: #cdd5cc; }
.group-chip.on { color: var(--green-dark); border-color: var(--green); background: var(--green-pale); }
.group-chip.on small { color: var(--green-dark); }
.group-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.group-footer small { color: #8c958c; font-size: 10px; }
.group-clear { padding: 4px 8px; border: 0; border-radius: 4px; color: var(--green-dark); background: transparent; font-size: 10.5px; font-weight: 700; }
.group-clear:disabled { color: #aab0aa; cursor: default; }
html[data-theme="dark"] .group-toggle-button { color: #a9b4aa; border-color: #435145; }
html[data-theme="dark"] .group-toggle-button:hover,html[data-theme="dark"] .group-toggle-button[aria-expanded="true"] { color: #eef3ee; background: #202b24; }
html[data-theme="dark"] .group-toggle-button.active { color: #bfe3c9; background: #2a3d2e; border-color: #678f6e; }
html[data-theme="dark"] .calendar-group-panel { background: #19221c; border-color: #3a473d; }
html[data-theme="dark"] .group-chip { color: #b9c5ba; background: #202b24; border-color: #3a473d; }
html[data-theme="dark"] .group-chip.on { color: #bfe3c9; background: #2a3d2e; border-color: #678f6e; }
html[data-theme="dark"] .group-chip small,html[data-theme="dark"] .group-label,html[data-theme="dark"] .group-footer small { color: #8f9b90; }
html[data-theme="dark"] .group-footer { border-color: #3a473d; }
html[data-theme="dark"] .group-clear { color: #bfe3c9; }
@media (max-width:600px) { .group-row { flex-direction: column; gap: 4px; } .group-label { width: auto; padding-top: 0; } .group-toggle-button { flex: none; } }

/* Start/end times in the agenda */
.agenda-event { grid-template-columns: 50px 3px minmax(0,1fr); }
.agenda-time { display: grid; align-content: start; gap: 2px; }
.agenda-time b { color: #5d675e; font-weight: 700; }
.agenda-time i { font-style: normal; font-size: 8.5px; opacity: .8; }
html[data-theme="dark"] .agenda-time b { color: #c4cfc5; }

/* Up Next expand button */
.agenda-top-actions { display: flex; align-items: center; gap: 4px; }
.agenda-expand { color: #7d857e; font-size: 15px; }
.agenda-expand:hover { color: var(--green-dark); background: var(--green-pale); }
html[data-theme="dark"] .agenda-expand { color: #a9b4aa; }
html[data-theme="dark"] .agenda-expand:hover { color: #eef3ee; background: #2b382e; }

/* Week view: tall cells that fill the board */
.calendar-grid.week-mode .day-cell { min-height: clamp(360px, 60vh, 620px); padding: 9px 7px; }
.calendar-grid.week-mode .day-events { gap: 4px; margin-top: 8px; }
.calendar-grid.week-mode .event-chip { height: auto; min-height: 18px; padding: 5px 6px; white-space: normal; overflow-wrap: anywhere; font-size: 10px; line-height: 13px; }
.calendar-grid.week-mode .chip-time { display: block; margin-bottom: 1px; font-size: 8.5px; font-weight: 700; opacity: .8; }
.day-cell { user-select: none; }
button.event-chip.more-events { border: 0; cursor: pointer; }
button.event-chip.more-events:hover { color: var(--green-dark); text-decoration: underline; }

/* Day planner dialog */
.day-dialog { width: min(720px, calc(100% - 28px)); }
.day-dialog-content { padding: 23px; }
.day-dialog-content .dialog-heading { align-items: center; gap: 12px; }
.day-dialog-title h2 { margin-top: 3px; }
.day-dialog-summary { margin: 5px 0 0; color: #7b827b; font-size: 11px; }
.day-dialog-controls { display: flex; align-items: center; gap: 6px; flex: none; }
.day-allday { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.day-allday:empty { display: none; }
.day-allday-label { flex: none; width: 52px; padding-top: 6px; color: #8c958c; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.day-allday-list { display: flex; flex-wrap: wrap; gap: 6px; }
.day-allday-event { display: grid; gap: 1px; padding: 6px 10px; border: 0; border-radius: 5px; text-align: left; font-size: 11px; font-weight: 700; }
.day-allday-event small { font-size: 9px; font-weight: 500; opacity: .8; }
.day-timeline { max-height: min(56vh, 520px); margin-bottom: 18px; overflow-y: auto; }
.day-grid { position: relative; }
.day-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.day-hour span { position: absolute; top: -7px; left: 0; width: 48px; padding-right: 6px; background: #fff; color: #929992; font-size: 9px; text-align: right; }
.day-lanes { position: absolute; top: 0; bottom: 0; left: 56px; right: 0; }
.day-event { position: absolute; display: grid; align-content: start; gap: 1px; min-width: 0; padding: 4px 7px; overflow: hidden; border: 0; border-left: 3px solid; border-radius: 4px; text-align: left; box-shadow: 0 0 0 1px #fff; }
.day-event strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.day-event small { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.day-event:hover,.day-allday-event:hover { filter: brightness(.96); }
.day-now { position: absolute; left: -8px; right: 0; height: 0; border-top: 2px solid var(--coral); pointer-events: none; }
.day-now::before { content: ""; position: absolute; left: -2px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
html[data-theme="dark"] .day-dialog-summary,html[data-theme="dark"] .day-hour span,html[data-theme="dark"] .day-allday-label { color: #a9b4aa; }
html[data-theme="dark"] .day-hour { border-color: #303c33; }
html[data-theme="dark"] .day-hour span { background: #202a23; }
html[data-theme="dark"] .day-allday { border-color: #303c33; }
html[data-theme="dark"] .day-event,html[data-theme="dark"] .day-allday-event { filter: brightness(.78) saturate(.9); box-shadow: 0 0 0 1px #202a23; }
/* Day feed */
.day-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.day-feed-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.day-feed { display: grid; gap: 0; max-height: min(58vh, 560px); margin-bottom: 18px; padding: 2px 2px 0; overflow-y: auto; scroll-padding-top: 4px; }
.feed-card { max-width: 440px; width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); scroll-margin-top: 4px; }
.feed-card.is-past { opacity: .6; }
.feed-card.is-now { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.feed-card.is-next { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.feed-card-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.feed-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; }
.feed-source { display: grid; min-width: 0; margin-right: auto; }
.feed-source strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.feed-source small { color: var(--muted); font-size: 10px; }
.feed-badge { flex: none; padding: 4px 8px; border-radius: 99px; color: var(--muted); background: var(--canvas); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.feed-badge.now { color: #fff; background: var(--coral); }
.feed-badge.next { color: #fff; background: var(--green); }
.feed-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; background: var(--green-pale); cursor: pointer; }
.feed-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed-media::after { position: absolute; inset: 55% 0 0; content: ''; background: linear-gradient(transparent, rgba(19,28,21,.6)); pointer-events: none; }
.feed-time { position: absolute; z-index: 1; left: 12px; bottom: 10px; display: flex; align-items: baseline; gap: 5px; color: #fff; font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.feed-time b { font-size: 17px; font-weight: 700; }
.feed-time i { font-style: normal; }
.feed-time em { padding: 2px 6px; border-radius: 99px; background: rgba(255,255,255,.22); font-style: normal; font-size: 10px; }
.feed-body { padding: 11px 13px 4px; }
.feed-body h3 { margin: 0; font-size: 15px; }
.feed-title { padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.feed-title:hover { text-decoration: underline; }
.feed-body p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.feed-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; }
.feed-action { min-height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
.feed-action:hover { background: var(--canvas); }
.feed-action.on { color: var(--green-dark); border-color: var(--green); background: var(--green-pale); }
.feed-action.star.on { color: #9a6a00; border-color: var(--yellow); background: #fff6dc; }
.feed-action.more { margin-left: auto; border-color: transparent; color: var(--muted); }
.feed-gap { position: relative; display: flex; justify-content: center; margin: 0 auto; padding: 8px 0; max-width: 440px; width: 100%; color: var(--muted); font-size: 11px; font-weight: 600; }
.feed-gap::before { position: absolute; top: 0; bottom: 0; left: 50%; content: ''; border-left: 2px dashed var(--line); }
.feed-gap span { position: relative; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); }
.feed-gap.tight span { color: var(--green-dark); }
.feed-gap.conflict { color: #b4452c; }
.feed-gap.conflict span { border-color: var(--coral); background: #fff0ea; }
.feed-badge.alert { color: #fff; background: #b4452c; }
.feed-card.is-cancelled { opacity: .65; }
.feed-card.is-cancelled .feed-title { text-decoration: line-through; }
.feed-body .feed-location { margin-top: 3px; color: var(--green-dark); font-size: 11px; font-weight: 600; }
html[data-theme="dark"] .day-tabs { border-color: #303c33; }
html[data-theme="dark"] .feed-action.on { color: #c1e6c8; background: #294031; }
html[data-theme="dark"] .feed-action.star.on { color: #ffd26c; background: #3d3520; }
html[data-theme="dark"] .feed-gap.conflict { color: #f09a7f; }
html[data-theme="dark"] .feed-gap.conflict span { background: #43271f; }
@media (max-width:600px) {
  .feed-actions { gap: 5px; }
}
@media (max-width:600px) {
  .calendar-grid.week-mode .day-cell { min-height: 240px; padding: 5px 2px; }
  .calendar-grid.week-mode .event-chip { height: auto; min-height: 14px; padding: 2px 2px; font-size: 8px; line-height: 10px; }
  .calendar-grid.week-mode .chip-time { display: none; }
  .day-dialog-content { padding: 16px; }
  .day-allday { flex-direction: column; gap: 6px; }
}

/* Phone polish: no iOS focus-zoom, safe areas, bigger tap targets */
.app-dialog { overflow-x: hidden; }
@media (max-width:600px) {
  input, select, textarea, .field-label input, .field-label select, .field-label textarea, .board-search input, .explore-search input, .dm-select-trigger { font-size: 16px; }
  .sidebar { height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .app-shell { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .toast-region { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .feed-action { min-height: 38px; padding: 0 13px; font-size: 12px; }
  .feed-body h3 { font-size: 16px; }
  .feed-body p, .feed-location { font-size: 12.5px; }
  .feed-source strong { font-size: 13px; }
  .board-tab, .group-chip { min-height: 36px; }
  .day-dialog { max-height: calc(100% - 16px); }
  .day-feed { max-height: 52vh; }
}
@media (max-width:600px) {
  .day-dialog { overflow-y: auto; }
  .day-feed, .day-timeline { max-height: none; overflow: visible; }
}