/* ============================================================
BASE, RESET & SHARED UTILITY COMPONENTS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=DM+Sans:wght@400;500&display=swap');
@import "https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css";

@font-face {
font-family: 'SaintGeorge';
src: url("/assets/SaintGeorge-LowercaseStencil-a22dafdb.otf") format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'DM Sans', sans-serif;
font-size: 1.0625rem;
line-height: 1.6;
background-color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
}

a {
text-decoration: none;
}

hr {
border: none;               /* Strip the default 3D inset border */
height: 1px;                /* Define an explicit thickness */
background-color: #e0e0e0;  /* Apply a clean, modern flat color */
margin: 2rem 0;             /* Give it some breathing room */
}

.main-content {
flex: 1;
}

/* UNUSED FONT UTILITIES
.dm-serif-display-regular {
font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: normal;
}

.dm-serif-display-regular-italic {
font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: italic;
}

.elms-sans {
font-family: "Elms Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
}

.inter-font {
  font-family: 'Inter', sans-serif;
}

.saint-george-font {
font-family: 'SaintGeorge', serif;
}

.roboto {
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-variation-settings:
"wdth" 100;
}

.montserrat {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
}

.playfair-display {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
}
*/

/* LANDING PAGE */
.ol-page {
max-width: 800px;
margin: 0 auto;
font-family: "DM Sans", sans-serif;
color: rgb(34, 34, 34);
padding: 0 16px;
}

@keyframes ol-toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* SIGN IN & SIGN UP PAGES */
.ol-page-narrow {
max-width: 600px;
padding-top: 48px;
}

/* SHARED APP-PAGE SHELL (used by all index + show pages) */
.ol-app-container {
max-width: 800px;
margin: 0 auto;
padding: 25px 15px;
font-family: "DM Sans", sans-serif;
color: rgb(34, 34, 34);
}

.ol-app-header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0px
}

.ol-app-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 22px;
font-weight: 700;
margin: 0;
font-family: "DM Sans", sans-serif;
}

.ol-btn-icon {
background: none;
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgb(34, 34, 34);
/* margin-left: 6px; */
}

.ol-btn-icon-text {
display: inline-flex;
align-items: center;
gap: 6px;
color: #666;
text-decoration: none;
font-size: 13px;
padding: 6px 10px;
border-radius: 6px;
/* This class started out only used on <a> links (QR code, rename/
invite/leave), which have almost no default browser styling. Once
also used on a real <button> (via button_to, e.g. "disconnect"),
the browser's native button chrome -- grey background, border,
inset shadow -- showed through underneath, since nothing here was
explicitly resetting it. These resets make it render identically
regardless of which element it's applied to. */
background: none;
border: none;
cursor: pointer;
font-family: inherit;
appearance: none;
-webkit-appearance: none;
}

.ol-btn-icon-text:hover {
color: rgb(34, 34, 34);
background: #f5f5f5;
}

/* .ol-btn-icon-danger {
color: #c0392b;
} */

.ol-empty-state {
text-align: center;
padding: 60px 0;
color: #666;
font-size: 14px;
}

/* SORTABLE JS */
.sortable-ghost {
opacity: 0.4;
border: 1px dashed rgb(34, 34, 34);
}

.sortable-drag {
opacity: 0.9;
}

.sortable-chosen {
border-color: rgb(34, 34, 34);
}

/* .ol-plain-row-title-line {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px

} */

/* .ol-plain-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
} */

.ol-plain-title {
font-size: 20px;
font-weight: 400;
margin: 25px 0 10px 0;
font-family: "DM Sans", sans-serif;
}

/* 
.ol-plain-title-letter {
font-weight: 700;
text-decoration: underline;
} */

/* .ol-plain-add {
font-size: 22px;
color: rgb(34, 34, 34);
text-decoration: none;
} */

.ol-plain-list {
display: flex;
flex-direction: column;
}

.ol-plain-row {
border-bottom: 1px solid #ddd;
margin-bottom: 12px;
}

/* UNUSED
.ol-plain-row-main {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 12px;
gap: 8px;
}

.ol-plain-row-notes-main {
}
*/

.ol-plain-row-title {
font-size: 14px;
font-weight: 300;
color: rgb(34, 34, 34);
text-decoration: none;
overflow-wrap: break-word;
word-break: break-word;
/* max-width: 190px; */
}

/* UNUSED
.ol-plain-row-checkbox-title {
display: flex;
align-items: center;
gap: 5px;
flex: 1;
min-width: 0;
}

.ol-plain-date {
font-size: 12px;
color: #888;
max-width: 105px;
min-width: 104px;
}
*/

/* .ol-plain-row-actions {
display: flex;
align-items: center;
gap: 10px;
} */

/* .ol-plain-icon-btn {
background: none;
border: none;
cursor: pointer;
color: rgb(34, 34, 34);
padding: 0;
font-size: 14px;
}
 */
/* .ol-plain-chevron {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
color: #444;
}

.ol-plain-expandable {
display: none;
margin-top: 8px;
margin-left: 50px;
}

.ol-plain-note-expandable {
display: none;
margin-top: 8px;
margin-left: 50px;
} */

/* UNUSED .ol-plain-expandable.task-card-expanded { display: block; } */

/* .ol-plain-row-footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 7px;
gap: 30px;
}
 */

/* .ol-plain-row-footer-notes {
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0;
} */

.ol-plain-people {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #a4a0a0;
}
/* 
.ol-plain-edit {
color: rgb(34, 34, 34);
font-size: 14px;
} */

.ol-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 0.04em;
font-family: "DM Sans", sans-serif;
color: #888;
}

.ol-badge-draft,
.ol-badge-public {
color: rgb(34, 34, 34);
}

.ol-unstyled-link {
color: inherit;
text-decoration: none;
}

.voice-recorder-filename {
font-size: 12px;
color: #444;
margin: 4px 0 0;
overflow-wrap: break-word;
word-break: break-word;
}

/* ---- Direct-upload progress UI (injected verbatim by file_upload_controller.js) ---- */
.direct-upload-progress {
position: relative;
height: 4px;
background: #eee;
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}

.direct-upload-progress-bar {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: rgb(34, 34, 34);
transition: width 0.2s ease;
}

.direct-upload-progress-label {
display: block;
font-size: 11px;
color: #666;
margin-top: 6px;
}

.direct-upload-progress-error .direct-upload-progress-bar {
background: #c0392b;
}

.direct-upload-progress-error .direct-upload-progress-label {
color: #c0392b;
}

.direct-upload-progress-complete .direct-upload-progress-bar {
background: rgb(34, 34, 34);
width: 100%;
}

.btn-uploading {
opacity: 0.6;
cursor: progress;
}
.guided-mode-active [data-guided-mode-target="step"] {
display: none;
}

.guided-mode-active [data-guided-mode-target="step"] .guided-step-active,
[data-guided-mode-target="step"].guided-step-active {
display: block;
}

[data-guided-mode-target="step"].guided-step-hidden {
display: none;
}

.ol-btn-danger {
width: 100%;
border: 1px solid #c0392b;
background: #fff;
color: #c0392b;
border-radius: 4px;
padding: 10px;
font-size: 13px;
font-weight: 400;
cursor: not-allowed;
opacity: 0.5;
}

.ol-btn-danger.btn-danger-active {
cursor: pointer;
opacity: 1;
background: #c0392b;
color: #fff;
}

.ol-plain-recurrence {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
font-size: 12px;
color: #5eae32;
margin-top: 4px;
}

.ol-plain-checkbox,
.ol-plain-undo {
background: #fff;
border: 1.5px solid #ddd;
border-radius: 50%;
width: 24px;
height: 24px;
min-width: 24px;
padding: 0;
cursor: pointer;
color: rgb(34, 34, 34);
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s ease;
/* explicitly remove the old 3D treatment */
box-shadow: none;
transform: none;
}

/* Icon hidden at rest, fades in on hover */
.ol-plain-checkbox svg,
.ol-plain-undo svg {
opacity: 0;
transition: opacity 0.15s ease;
}

.ol-plain-checkbox:hover,
.ol-plain-undo:hover {
border-color: rgb(34, 34, 34);
}

.ol-plain-checkbox:hover svg,
.ol-plain-undo:hover svg {
opacity: 1;
}

.ol-plain-checkbox:active,
.ol-plain-undo:active {
background: #f5f5f5;
}

.ol-plain-checkbox[disabled] {
border-color: #eee;
cursor: default;
opacity: 0.5;
}

.ol-plain-checkbox[disabled]:hover {
border-color: #eee;
}

.ol-page-wide {
max-width: 1100px;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

trix-toolbar .trix-button--icon-attach {
display: none;
}

trix-editor:empty:not(:focus)::before {
content: attr(placeholder);
color: #999;
pointer-events: none;
}

/* ---- Calendar anchor scroll offset ---- */
span[id^="day-"],
#today-todo {
scroll-margin-top: 80px;
}

@media (max-width: 768px) {
span[id^="day-"],
#today-todo {
scroll-margin-top: 0;
}
}


/* .ol-plain-row-grid {
display: flex;
gap: 10px;
} */

/* .ol-plain-row-checkbox-col {
flex-shrink: 0;
width: 24px;
padding-top: 2px;
}

.ol-plain-row-content-col {
flex: 1;
min-width: 0;
} */


/* 404 */

.error-container {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
}

.error-inner {
max-width: 420px;
text-align: center;
}

.error-code {
font-family: "DM Serif Display", serif;
font-size: 72px;
font-weight: 400;
color: #ddd;
margin: 0 0 8px;
line-height: 1;
}

.error-title {
font-family: "DM Serif Display", serif;
font-size: 26px;
font-weight: 400;
color: rgb(34, 34, 34);
margin: 0 0 12px;
}

.error-message {
font-family: "DM Sans", sans-serif;
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0 0 28px;
}  

.ol-date-group-list .ol-plain-row {
border-bottom: 0.5px solid #eee;
margin-bottom: 0;
padding: 14px;
}

.ol-row-icon-btn {
background: none;
border: none;
color: #999;
cursor: pointer;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}

.ol-row-icon-btn:hover {
color: rgb(34, 34, 34);
background: #f5f5f5;
}

.ol-icon-submit-btn {
background: rgb(34, 34, 34);
color: #fff;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}

.ol-icon-submit-btn:hover {
background: #000;
}

.ol-icon-submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.ol-icon-submit-btn.btn-uploading,
.ol-icon-cancel-btn.btn-uploading {
opacity: 0.5;
pointer-events: none;
}

.ol-icon-cancel-btn {
background: none;
border: 1px solid rgb(241, 64, 64);
color: rgb(241, 64, 64);
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

.ol-icon-cancel-btn:hover {
background: #fff5f5;
}

.ol-btn-icon-text-danger {
color: #a40000;
}

.ol-btn-icon-text-danger:hover {
color: #a40000;
background: #ffd0d0;
}

.ol-row-overdue-notice {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: #995b5b;
margin: 0 0 6px;
}

body.ol-font-normal { --ol-content-scale: 1; }
body.ol-font-large { --ol-content-scale: 1.25; }

/* ---- Root-level text scaling ----
   Sets body's own base font-size from the same --ol-content-scale
   variable used everywhere below. Going forward, NEW classes should
   use em for font-size (e.g. 0.9375em instead of 15px) rather than a
   fixed px value plus a separate, manually-registered
   body[class*="ol-font-"] .class { ... } rule below -- em is relative
   to this scaled base, so new classes participate in scaling
   automatically, with no separate registration step needed. All
   EXISTING body[class*="ol-font-"] rules below are untouched and
   still work exactly as before -- this is additive, not a
   replacement. */
body[class*="ol-font-"] {
  font-size: calc(16px * var(--ol-content-scale));
}

/* ---- App shell ---- */
body[class*="ol-font-"] .ol-app-title { font-size: calc(22px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-btn-icon { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-btn-icon-text { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-empty-state { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-plain-title { font-size: calc(20px * var(--ol-content-scale)); }
/* body[class*="ol-font-"] .ol-plain-add { font-size: calc(22px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-plain-row-title { font-size: calc(14px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-plain-date { font-size: calc(12px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-plain-icon-btn { font-size: calc(14px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-plain-people { font-size: calc(14px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-plain-edit { font-size: calc(14px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-plain-recurrence { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-row-overdue-notice { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .voice-recorder-filename { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .direct-upload-progress-label { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-badge { font-size: calc(10px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-btn-danger { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-time-select { font-size: calc(13px * var(--ol-content-scale)); }

body[class*="ol-font-"] .ol-more-row-label { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-more-fontsize-label { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-fontsize-segment { font-size: calc(14px * var(--ol-content-scale)); }

body[class*="ol-font-"] .ol-text-btn { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-account-summary-title { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-account-summary-meta { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-field-hint { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-account-section-hint { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-family-card-name { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-code { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-tag { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-btn-icon-text { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-account-subsummary { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-zone-title { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-zone-body { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-instruction { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-landing-page-btn { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-step-title { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-filter-tab { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-subscription-note { font-size: calc(12px * var(--ol-content-scale)); }

/* ---- Hero pill anchor links -- smooth scroll to the matching section,
with scroll-margin-top so a fixed/sticky nav (if present) doesn't
cover the section title when it lands. Same offset pattern already
used for the calendar day anchors elsewhere in the app
(span[id^="day-"] { scroll-margin-top: 80px; }) -- reused here for
consistency. 80px is a guess carried over from that existing value,
not measured against this specific page's actual nav height -- worth
a visual check once deployed. ---- */
html {
scroll-behavior: smooth;
}

#notes,
#todo,
#journal,
#guides,
#no-app-needed {
scroll-margin-top: 80px;
}

@keyframes ol-giveaway-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* ============================================================
NAVIGATION
============================================================ */


.ol-nav-bar {
position: sticky;
top: 0;
z-index: 200;
background: #fff;
/* margin-bottom: 15px; */
border-bottom: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
width: 100%;
}

.ol-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 800px;
margin: 0 auto;
padding: 15px 15px 0
}

.ol-nav-logo {
font-family: "DM Serif Display", serif;
font-weight: 700;
color: rgb(34, 34, 34);
text-decoration: none;
flex-shrink: 0;
}


.ol-nav-logo-signed-in {
display: inline-flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}

/* UNUSED
.ol-nav-admin {
font-size: 12px;
color: #ffffff;
padding: 8px 16px;
border-radius: 15px;
background-color: rgb(247, 209, 217);
}
*/

/* ---- Right-hand row: nav links + divider + bell, all one flex row ---- */
.ol-nav-links {
display: flex;
align-items: center;
gap: 28px;
font-family: "DM Sans", sans-serif;
position: relative;
align-self: stretch;
}

.ol-nav-letter {
display: inline-flex;
align-items: center;
color: rgb(135, 132, 132);
text-decoration: none;
position: relative;
align-self: stretch; /* fill .ol-nav-inner's full height regardless of logo */
padding-bottom: 10px;
}

.ol-nav-letter-active::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 3px;
background-color: currentColor;
border-radius: 2px 2px 0 0;
}

@media (max-width: 768px) {
.ol-nav-letter-active::before {
bottom: auto;
top: 0;
left: 0;
transform: none;
width: 100%;
height: 3px;
border-radius: 0 0 2px 2px;
}
}

.ol-nav-letter-active {
font-weight: 500;
color: black;
}


/* UNUSED NAV TEXT STYLES
.ol-nav-word {
font-size: 15px;
color: #656464;
text-decoration: none;
}

.ol-nav-word-active {
font-weight: 700;
color: rgb(34, 34, 34);
text-decoration: underline;
}

.ol-nav-person {
display: inline-flex;
align-items: center;
color: rgb(34, 34, 34);
}

.ol-nav-label {
display: none;
font-size: 10px;
font-family: "DM Sans", sans-serif;
text-align: center;
margin-top: 3px;
text-decoration: none;
color: #000;
line-height: 1;
}
*/

.ol-nav-bell {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgb(171, 35, 35);
border: 2px solid rgb(171, 35, 35);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ol-nav-dot-panel {
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(48, 48, 48);
  z-index: 300;
  position: fixed;
  top: 60px;
  right: 15px;
  max-width: 90vw;
  border-radius: 4px;
}


@media (min-width: 768px) {
  .ol-nav-dot-panel {
    width: 480px;
  }
}
  
  @media (max-width: 768px) {
  .ol-nav-dot-panel {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
  }
  }

.ol-nav-dot-panel-header {
background: rgb(255, 255, 255);
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid rgb(0, 0, 0);
flex-shrink: 0;
}

.ol-nav-dot-panel-title {
font-weight: 700;
font-size: 13px;
}

.ol-nav-dot-panel-close {
background: none;
border: none;
cursor: pointer;
font-size: 13px;
color: rgb(31, 31, 31);
}

.ol-nav-dot-panel turbo-frame {
position: relative;
padding-right: 10px;
flex: 1;
overflow-y: auto;
min-height: 0;
}

.ol-nav-dot-panel turbo-frame::-webkit-scrollbar {
width: 6px;
}

.ol-nav-dot-panel turbo-frame::-webkit-scrollbar-track {
background: transparent;
}

.ol-nav-dot-panel turbo-frame::-webkit-scrollbar-thumb {
background: rgb(34, 34, 34);
border-radius: 999px;
}

.ol-nav-dot-loading {
padding: 16px;
font-size: 12px;
color: #888;
text-align: center;
}


.ol-nav-dot-wrapper {
position: fixed;
top: 15px;
left: auto;
bottom: auto;
right: 15px;
z-index: 250;
margin-left: 0;
padding-left: 0;
border-left: none;
}

@media (max-width: 768px) {
.ol-nav-dot-wrapper {
top: calc(env(safe-area-inset-top, 0px) + 15px);
left: auto;
bottom: auto;
right: 15px;
}
}

/* UNUSED
.ol-nav-more-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
*/

.ol-nav-add-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgb(135, 132, 132);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  line-height: 1;
  border-radius: 50%;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}
  

.ol-nav-add-btn:hover {
background: #f5f4f0;
color: rgb(34, 34, 34);
}

.ol-nav-add-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
padding-bottom: 10px;
}

.ol-nav-add-menu {
position: absolute;
top: calc(100% + 2px);
right: 0;
flex-direction: column;
gap: 2px;
background: #fff;
border: 1px solid #ece9e2;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
padding: 6px;
min-width: 200px;
z-index: 210;
}

/* Shared by both the mobile bottom-nav popup and this desktop dropdown
   -- kept in this always-applied section rather than the mobile-only
   media query, since it's genuinely used in both contexts now. */
.ol-add-menu-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
color: #222;
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}

.ol-add-menu-option:hover {
background: #f5f4f0;
}

.ol-nav-more-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #000;
display: flex;
flex-direction: column;
align-items: center;
min-width: 44px;
min-height: 44px;
justify-content: center;
appearance: none;
-webkit-appearance: none;
}

/* UNUSED NAV MORE PANEL (old single-column style)
.ol-nav-more-panel {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #000;
border-radius: 8px;
overflow: hidden;
min-width: 110px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
z-index: 400;
}

@media (min-width: 769px) {
.ol-nav-more-panel {
bottom: auto;
top: calc(100% + 8px);
}
}

.ol-nav-more-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 16px;
text-decoration: none;
color: #000;
font-size: 14px;
font-family: "DM Sans", sans-serif;
border-bottom: 1px solid #eee;
}

.ol-nav-more-item:last-child {
border-bottom: none;
}

.ol-nav-more-item:active {
background: #f5f5f5;
}
*/

/* ---- Desktop-only / mobile-only visibility helpers ---- */
.ol-nav-desktop-only {
display: inline-flex;
}

/* UNUSED
.ol-nav-mobile-only {
display: none;
}
*/

/* ---- Logo: mobile vs desktop image swap ---- */
@media (min-width: 769px) {
.ol-nav-logo img:first-child {
display: none; /* hide website-logo-mobile.svg on desktop */
}
}

@media (max-width: 768px) {
.main-content {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

.ol-nav-bar {
left: 0;
right: 0;
top: auto;
min-height: auto;
height: auto;
padding-bottom: env(safe-area-inset-bottom, 0px);
background: #fff; /* Ensure background color covers the safe area */
margin-bottom: 0;
border-top: none;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08), 0 -4px 12px rgba(0, 0, 0, 0.06);
border-bottom: none;
}

.ol-nav-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
max-width: none;  /* full-bleed on mobile, NOT capped at 680px */
margin: 0;
/* height: 60px; */
padding: 0;
}

.ol-nav-logo {
display: none;
}

.ol-nav-links {
display: flex;
flex: 1;
justify-content: space-around;
align-items: center;
gap: 0;
margin-top: 0;
}

.ol-nav-letter {
flex-direction: column;
min-width: 44px;
height: 60px;
min-height: 60px;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
}

/* UNUSED
.ol-nav-label {
display: block;
}

@media (max-width: 768px) {
.ol-nav-word {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
font-size: 13px;
}
}
*/

.ol-nav-desktop-only {
display: none;
}

/* UNUSED
.ol-nav-mobile-only {
display: flex;
align-items: center;
justify-content: center;
}
*/

/* Mobile */
.ol-nav-bell {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgb(171, 35, 35);
cursor: pointer;
border: 2px solid rgb(171, 35, 35);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ol-nav-logo img {
display: none;
}
}



.ol-category-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 220px;
max-width: 80vw;
background: #fff;
border: 1px solid #000;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 50;
overflow: hidden;
}



/* ===================================================================
FONT SIZE PREFERENCE OVERRIDES
Pure font-size changes, added as new rules -- nothing above this
point is modified. Deliberately NOT using zoom or transform: scale,
since those can desync from what JavaScript measures (flatpickr,
the calendar-day modal, drag-and-drop reordering, etc.) -- a plain
font-size change causes normal, standard text reflow that every JS
widget already handles correctly, the same way any responsive site
already works.
EXCLUDED (stay fixed regardless of this setting): nav bar text
(.ol-nav-word/.ol-nav-letter/.ol-nav-label/.ol-nav-logo/.ol-nav-admin/
.ol-nav-person), the floating add button, the activity bell, the
"..." mobile menu, the install panel, and the activity feed panel.
=================================================================== */

body.ol-font-small { --ol-content-scale: 0.875; }

/* UNUSED NAV MORE PANEL (new grid/tile style, superseded by ol-add-menu)
.ol-nav-more-panel {
min-width: 240px;
padding: 12px;
}

.ol-nav-more-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}

.ol-nav-more-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 4px;
border-radius: 8px;
text-decoration: none;
color: rgb(34, 34, 34);
font-size: 11px;
font-family: "DM Sans", sans-serif;
text-align: center;
}

.ol-nav-more-tile-select {
border: none;
background: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

.ol-nav-more-tile-select-label {
font-size: 10px;
color: #000000;
}

.ol-nav-more-tile-select select {
appearance: none;
-webkit-appearance: none;
border: none;
background: none;
color: rgb(34, 34, 34);
font-size: 11px;
font-family: "DM Sans", sans-serif;
text-align: center;
cursor: pointer;
padding: 0 14px 0 0;
outline: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 12px;
}

.ol-nav-more-tile:active {
background: #f5f5f5;
}

.ol-nav-more-tile svg {
color: rgb(34, 34, 34);
}

.ol-nav-more-divider {
border-top: 1px solid #eee;
margin: 10px 0;
}

.ol-nav-more-fontsize-label {
font-size: 11px;
color: #888;
text-align: center;
margin: 0 0 8px;
font-family: "DM Sans", sans-serif;
}

.ol-nav-more-fontsize-row {
display: flex;
justify-content: center;
gap: 6px;
}

.ol-nav-more-fontsize-btn {
flex: 1;
border: 1px solid rgb(34, 34, 34);
border-radius: 999px;
background: none;
color: rgb(34, 34, 34);
font-family: "DM Sans", sans-serif;
font-size: 12px;
padding: 2px 12px;
cursor: pointer;
}

.ol-nav-more-fontsize-btn-active {
background: rgb(34, 34, 34);
color: #fff;
}

.ol-nav-fontsize-inline {
align-items: center;
gap: 3px;
}

.ol-nav-fontsize-inline-btn {
width: 24px;
height: 24px;
border: 1px solid #ccc;
border-radius: 50%;
background: none;
color: rgb(34, 34, 34);
font-family: "DM Sans", sans-serif;
font-size: 11px;
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}

.ol-nav-fontsize-inline-btn:hover {
border-color: rgb(34, 34, 34);
}

.ol-nav-fontsize-inline-btn-active {
background: rgb(34, 34, 34);
color: #fff;
border-color: rgb(34, 34, 34);
}
*/

/* ============================================================
FORMS & AUTHENTICATION
============================================================ */


.ol-already-premium {
font-size: 14px;
font-weight: 500;
padding: 14px 0;
}

.ol-auth-card {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 28px 24px;
}

.ol-auth-title {
font-size: 24px;
margin-bottom: 30px;
}

.ol-auth-subtitle {
font-size: 13px;
color: #666;
line-height: 1.5;
margin: 0 0 20px;
}

.ol-field {
margin-bottom: 16px;
}

.ol-field label {
display: block;
font-size: 11px;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 0.04em;
font-family: "DM Sans", sans-serif;
color: #444;
margin-bottom: 6px;
}

.ol-field input[type="text"],
.ol-field input[type="email"],
.ol-field input[type="password"],
.ol-field select {
width: 100%;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 10px 12px;
font-size: 16px;
font-family: "DM Sans", sans-serif;
background: #fff;
}

.ol-field-hint {
display: block;
font-size: 11px;
color: #888;
margin-bottom: 6px;
margin-top: 4px;
}

.ol-field-remember {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: 13px;
}

.ol-form-actions {
margin: 20px 0 14px;
}

.ol-auth-links {
text-align: center;
margin-top: 18px;
font-size: 12px;
}

/* DEVISE ERROR MESSAGE (line style, shared with note/task forms) */
.ol-form-errors {
padding-bottom: 14px;
margin-bottom: 18px;
}

.ol-form-errors-title {
font-size: 13px;
font-weight: 700;
margin: 0 0 6px;
color: #c0392b;
}

.ol-form-errors-list {
margin: 0;
padding-left: 18px;
font-size: 12px;
color: #444;
}

.ol-form-errors-list li {
margin-bottom: 2px;
}

/* _links.html.erb */
.ol-auth-links-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.ol-omniauth-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
}

.ol-form-guide-context {
font-size: 13px;
margin: 0 0 4px;
}

.ol-form-guide-context-link {
color: #666;
text-decoration: none;
}

.ol-form-guide-context-link:hover {
color: rgb(34, 34, 34);
text-decoration: underline;
}

/* UNUSED
.ol-form-topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-bottom: 1px solid #ddd;
margin-bottom: 24px;
padding-bottom: 12px;
}

.ol-form-actions-row {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
margin-top: 28px;
padding-top: 16px;
}
*/

/* .ol-form-title {
font-size: 28px;
font-weight: 400;
margin: 0 0 20px;
} */

.ol-field-line {
position: relative;
margin-bottom: 24px;
}



.ol-field-line:has(input) label,
.ol-field-line:has(textarea) label {
position: absolute;
left: 0;
top: 6px;
font-size: 16px;
font-weight: 400;
color: #888;
margin-bottom: 0;
pointer-events: none; /* clicks pass through to the input underneath */
transform-origin: left top;
transition: transform 0.15s ease, color 0.15s ease;
}



.ol-field-line:has(input:focus) label,
.ol-field-line:has(input:not(:placeholder-shown)) label,
.ol-field-line:has(textarea:focus) label,
.ol-field-line:has(textarea:not(:placeholder-shown)) label {
transform: translateY(-20px) scale(0.75);
color: #000;
}

.ol-field-line input[type="text"],
.ol-field-line input[type="email"],
.ol-field-line input[type="password"],
.ol-field-line input[type="number"],
.ol-field-line textarea {
width: 100%;
border: none;
border-bottom: 1px solid rgb(34, 34, 34);
border-radius: 0;
padding: 6px 0;
font-size: 16px;
font-family: "DM Sans", sans-serif;
background: transparent;
outline: none;
position: relative; /* sits visually above the absolutely-positioned label */
z-index: 1;
}

.ol-field-line input:focus,
.ol-field-line textarea:focus {
border-bottom: 2px solid rgb(34, 34, 34);
}

.ol-field-line textarea {
resize: vertical;
/* min-height: 80px; */
}

.ol-field-line select {
width: 100%;
border: none;
border-bottom: 1px solid rgb(34, 34, 34);
border-radius: 0;
padding: 6px 24px 6px 0;
font-size: 15px;
font-family: "DM Sans", sans-serif;
background: transparent;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 14px;
}

.ol-field-line select:focus {
border-bottom: 2px solid rgb(34, 34, 34);
}

/* UNUSED
.ol-form-header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}

.ol-form-header-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
border-bottom: 1px solid #ddd;
margin-bottom: 24px;
padding-bottom: 12px;
}

.ol-form-footer-actions {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 28px;
}
*/

.ol-text-btn {
background: none;
border: none;
font-size: 15px;
color: rgb(34, 34, 34);
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-weight: 400;
padding: 0;
display: inline-flex;
align-items: center;
line-height: 1;
}

.ol-form-label {
font-size: 13px;
font-weight: 700;
margin: 0 0 8px;
}

/* UNUSED
.ol-line-pill {
background: none;
border: 1px solid #ccc;
border-radius: 999px;
padding: 4px 14px;
font-size: 13px;
color: rgb(34, 34, 34);
cursor: pointer;
font-family: inherit;
}

.ol-line-pill.category-chip-active {
background: rgb(34, 34, 34);
color: #fff;
border-color: rgb(34, 34, 34);
}

.ol-line-pill-input {
border: none;
border-bottom: 1px solid #ccc;
background: transparent;
font-size: 16px;
padding: 9px 0;
outline: none;
flex: 1;
min-width: 120px;
max-width: 200px;
}
*/

.ol-line-date-input {
border: none;
border-bottom: 1px solid #3586d2;
background: transparent;
color: #3586d2;
font-size: 16px;
padding: 4px 0;
}


.ol-admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
margin-bottom: 28px;
}


/* NEW JOURNAL FORM */
.ol-form-card {
/* border: 1px solid #000;
border-radius: 12px; */
padding: 4px;
}



.ol-form-card .ol-field-line {
margin-bottom: 18px;
}

.ol-form-card .ol-field-line:last-of-type {
margin-bottom: 16px;
}

.ol-form-card-section {
margin-bottom: 18px;
}

.ol-form-card-section:last-of-type {
margin-bottom: 0;
}

/* ---- Footer: divider + Cancel/Save pills, bottom-right of the card,
matching the screenshot's footer position (not top, as some similar
patterns place it). ---- */
.ol-form-card-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #eee;
}

.ol-form-card-section trix-editor {
min-height: 180px;
}


.ol-confirm-overlay {
position: fixed;
inset: 0;
z-index: 600;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.15s ease;
}

/*  */
/* .ol-form-icon-actions {
display: flex;
align-items: center;
gap: 8px;
} */

/* body[class*="ol-font-"] .ol-form-title { font-size: calc(28px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-form-guide-context { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-already-premium { font-size: calc(14px * var(--ol-content-scale)); }

/* ---- Forms (notes/todos/journal/guides forms, search, filters) ---- */
body[class*="ol-font-"] .ol-field-line:has(input) label,
body[class*="ol-font-"] .ol-field-line:has(textarea) label { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-form-label { font-size: calc(13px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-line-pill { font-size: calc(13px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-line-pill-input { font-size: calc(16px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-line-date-input { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-text-btn { font-size: calc(15px * var(--ol-content-scale)); }

.ol-field-line select:focus {
border-bottom: 2px solid rgb(34, 34, 34);
}


/* ---- Sign-in page: two distinct bordered blocks for password vs code,
instead of one continuous stacked form with a floating text divider.
The border + eyebrow label do the separation work, so the page reads
as "two choices" at a glance rather than "one long form." ---- */
.ol-auth-method {
border: 1.5px solid #e5e3dd;
border-radius: 12px;
padding: 20px 18px;
background: #fafaf8;
}

.ol-auth-method-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #888;
margin: 0 0 14px;
}

.ol-auth-divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
color: #aaa;
font-size: 12px;
}

.ol-auth-divider::before,
.ol-auth-divider::after {
content: "";
flex: 1;
border-bottom: 1px solid #e5e3dd;
}

.ol-auth-divider span {
padding: 0 12px;
}
/* ============================================================
NOTIFICATIONS, TOASTS & MODALS
============================================================ */


/* Toast - "notice" */
.ol-toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 1000;
display: flex;
align-items: center;
gap: 14px;
width: max-content;
max-width: calc(100% - 32px);
background: #fff;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 12px 16px;
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.4;
color: rgb(34, 34, 34);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
animation: ol-toast-in 0.25s ease;
}

.ol-toast p {
margin: 0;
}

.ol-toast-success {
border-left: 4px solid rgb(34, 34, 34);
}

.ol-toast-alert {
border-left: 4px solid #c0392b;
}

.ol-toast-close {
background: none;
border: none;
font-family: inherit;
font-size: 14px;
line-height: 1;
color: #666;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}

.ol-toast-close:hover {
color: rgb(34, 34, 34);
}

.ol-toast.toast-hide {
opacity: 0;
transform: translateX(-50%) translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.ol-notice {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 12px 14px;
font-size: 13px;
margin-bottom: 16px;
}

.ol-notice-muted {
border-color: #ccc;
color: #444;
}

.ol-notice-title {
font-weight: 700;
font-size: 13px;
margin: 0 0 4px;
}

.ol-notice-body {
font-size: 12px;
margin: 0;
color: #555;
}

.ol-confirm-overlay.ol-confirm-overlay-visible {
opacity: 1;
}

.ol-confirm-card {
background: #fff;
border: 1px solid rgb(34, 34, 34);
border-radius: 8px;
padding: 20px;
width: 100%;
max-width: 320px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
transform: translateY(8px);
transition: transform 0.15s ease;
}

.ol-confirm-overlay.ol-confirm-overlay-visible .ol-confirm-card {
transform: translateY(0);
}

/* .ol-confirm-message {
font-size: 13px;
color: #666;
text-align: center;
padding: 20px 0;
margin: 0;
} */

.ol-confirm-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* UNUSED body[class*="ol-font-"] .ol-confirm-message { font-size: calc(13px * var(--ol-content-scale)); } */

/* ---- Modal ---- */
.ol-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.6);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}

.ol-modal-card {
position: relative;
background: #FAFAF8;
border-radius: 16px;
padding: 32px 28px;
max-width: 420px;
width: 100%;
box-shadow: 8px 8px 0 0 #DAD8D2;
}

.ol-modal-close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
font-size: 16px;
color: #888;
cursor: pointer;
line-height: 1;
}
/* ============================================================
SEARCH
============================================================ */


.ol-search-bar {
margin-bottom: 16px;
}

.ol-search-input {
width: 100%;
border: none;
border-bottom: 1px solid rgb(34, 34, 34);
padding: 8px 0;
font-size: 16px;
font-family: "DM Sans", sans-serif;
background: transparent;
outline: none;
}

.ol-search-input:focus {
border-bottom: 2px solid rgb(34, 34, 34);
}

.ol-search-results-info {
font-size: 12px;
color: #666;
margin-bottom: 16px;
}

/* .ol-quick-add-form {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgb(34, 34, 34);
} */

/* Category filter view */
.ol-filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}

.ol-filter-tab {
font-size: 13px;
color: #666;
text-decoration: none;
border: 1px solid #ccc;
border-radius: 8px;
padding: 4px 14px;
}

.ol-filter-tab-active {
background: rgb(34, 34, 34);
color: #fff;
border-color: rgb(34, 34, 34);
}


.ol-suggestion-hint {
font-size: 11px;
color: #888;
margin-left: 4px;
white-space: nowrap;
}

.ol-suggestions-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #000;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 100;
overflow: hidden;
}

.ol-suggestions-heading {
font-size: 11px;
font-weight: 700;
color: #888;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 10px 14px 4px;
margin: 0;
}

.ol-suggestions-list {
max-height: 240px;
overflow-y: auto;
}

.ol-suggestion-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.ol-suggestion-row:hover {
background: #f5f5f5;
}

.ol-suggestion-main {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
text-align: left;
background: none;
border: none;
padding: 10px 14px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
color: rgb(34, 34, 34);
cursor: pointer;
}

.ol-suggestion-main svg {
flex-shrink: 0;
color: #999;
}

.ol-suggestion-main span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.ol-suggestion-delete {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
background: none;
border: none;
border-radius: 50%;
color: #999;
cursor: pointer;
}

.ol-suggestion-delete:hover {
background: #eee;
color: rgb(34, 34, 34);
}
/* body[class*="ol-font-"] .ol-search-input { font-size: calc(16px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-search-results-info { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-filter-tab { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-suggestion-hint { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-suggestions-heading { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-suggestion-main { font-size: calc(13px * var(--ol-content-scale)); }

/* ← add the trix-editor block here */

.ol-search-bar {
margin-bottom: 16px;
}
/* ============================================================
CATEGORIES / TAGGING
============================================================ */





.ol-category-picker {
position: relative;
display: inline-flex;
}

.ol-category-trigger:hover {
background: #f5f5f5;
}



.ol-category-list {
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.ol-category-row {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid #eee;
padding: 10px 14px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
color: #000;
cursor: pointer;
}

.ol-category-row:last-child {
border-bottom: none;
}

.ol-category-row:hover {
background: #f5f5f5;
}

.ol-category-row.category-chip-active {
font-weight: 700;
background: #f5f5f5;
}

.ol-category-custom {
border-top: 1px solid #000;
padding: 10px 14px;
}

.ol-category-custom input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 16px;
font-family: "DM Sans", sans-serif;
padding: 4px 0;
}

/* UNUSED
.ol-cat-tag {
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 8px;
display: inline-block;
background: #f0f0f0;
color: rgb(34, 34, 34);
}
*/

.ol-category-group-list {
border: 0.5px solid #cccccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}

.ol-category-group-list .ol-plain-row {
border-bottom: 0.5px solid #eee;
margin-bottom: 0;
padding: 14px;
}

.ol-category-group-list .ol-plain-row:last-child {
border-bottom: none;
}

.ol-category-group-list .ol-row-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.ol-category-group-list .ol-attachment-badges {
display: inline-flex;
gap: 4px;
}

.ol-category-group-list .ol-plain-people {
font-size: 12px;
color: #999;
gap: 3px;
}
body[class*="ol-font-"] .ol-category-group-list .ol-plain-people { font-size: calc(12px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-cat-tag { font-size: calc(11px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-category-trigger { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-category-row { font-size: calc(13px * var(--ol-content-scale)); }
/* ============================================================
TASKS, TO-DOS, JOURNAL & CALENDAR
============================================================ */


.ol-task-desc {
font-size: 12px;
color: #444;
overflow-wrap: break-word;
word-break: break-word;
}

.ol-task-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.ol-task-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #f0efe9;
  color: #666;
  font-size: 11px;
  white-space: nowrap;
}

/* UNUSED
.ol-task-show-media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-top: 8px;
}
*/

.ol-task-actions-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}

.ol-task-actions-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
}

.ol-task-visibility-inline {
display: inline-flex;
}

.ol-task-pdf {
margin-bottom: 10px;
}

.ol-task-pdf-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgb(34, 34, 34);
text-decoration: underline;
}

/* UNUSED
.ol-task-expandable {
display: none;
}

.ol-task-expandable.task-card-expanded {
display: block;
margin-top: 8px;
}
*/

.ol-task-date-form {
display: none;
}

.ol-task-date-form-label {
font-size: 12px;
font-weight: 700;
margin: 0 0 6px;
}

.ol-task-date-form.task-date-form-visible {
display: block;
margin-top: 8px;
padding: 10px;
/* border: 1px solid rgb(34, 34, 34); */
border-radius: 4px;
}

.ol-task-inline-date-input {
width: 100%;
border: none;
border-bottom: 1px solid rgb(34, 34, 34);
border-radius: 0;
padding: 6px 0;
font-size: 16px;
font-family: "DM Sans", sans-serif;
background: transparent;
outline: none;
}

.ol-task-inline-date-input:focus {
border-bottom: 2px solid rgb(34, 34, 34);
}

.ol-task-audio audio {
width: 100%;
}

.ol-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #999;
cursor: grab;
touch-action: none;
}

.ol-drag-handle:active {
cursor: grabbing;
color: rgb(34, 34, 34);
}

/* NOTES page */
.ol-reorder-tip {
font-size: 11px;
color: #888;
text-align: right;
margin-bottom: 12px;
font-family: "DM Sans", sans-serif;
letter-spacing: 0.04em;
}

/* UNUSED
.ol-reorder-hint {
font-size: 12px;
color: #999;
margin-bottom: 8px;
}
*/

/* UNUSED
.ol-task-image {
margin-top: 8px;
}
*/

/* GUIDE page */
.ol-stale-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 16px;
}

.ol-stale-text {
font-size: 13px;
margin: 0;
}

/* TASK SHOW page */
.ol-task-show-card {
/* border: 1px solid rgb(34, 34, 34); */
border-radius: 4px;
padding: 12px 0;
}

/* UNUSED
.ol-task-show-media {
margin-top: 10px;
margin-bottom: 4px;
}
*/

.ol-task-video {
margin-top: 4px;
}

.ol-task-show-header {
margin-bottom: 16px;
}

.ol-task-show-date {
margin: 8px 0 16px;
font-size: 16px;
color: black;
}

.ol-task-show-title {
font-size: 16px;
font-weight: 700;
margin: 4px 0 0;
font-family: "DM Sans", sans-serif;
overflow-wrap: break-word;
word-break: break-word;
}

.ol-task-show-description {
font-size: 14px;
color: #444;
line-height: 1.6;
margin: 0 0 12px;
overflow-wrap: break-word;
}

.ol-task-show-author {
font-size: 12px;
color: #888;
margin: 0 0 16px;
font-family: "DM Sans", sans-serif;
}

.ol-task-show-sharing {
margin-top: 16px;
padding-top: 5px;
border-top: 1px solid rgb(214, 214, 214);
}

/* ---- Date pill: wraps the existing datepicker-controlled text input,
restyled from full-width line input to a compact pill. The input
itself keeps its existing data-controller="datepicker" untouched. ---- */
.ol-date-pill {
display: inline-flex;
/* align-items: center; */
gap: 6px;
border: 1px solid #000;
border-radius: 999px;
padding: 7px 14px;
/* margin-bottom: 6px; */
}

.ol-date-pill svg {
flex-shrink: 0;
color: #000;
}

.ol-date-pill input {
border: none;
outline: none;
background: transparent;
font-size: 13px;
font-family: "DM Sans", sans-serif;
width: 13ch;
padding: 0;
cursor: pointer;
}

.ol-category-trigger {
/* display: inline-flex; */
align-items: center;
gap: 6px;
border: 1px solid #000;
border-radius: 50px;
padding: 7px 14px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
background: none;
cursor: pointer;
color: #000;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}




/* ===================================================================
CALENDAR VIEW (shared by todos.html.erb and journal.html.erb)
=================================================================== */

.ol-calendar {
margin-bottom: 24px;
}

.ol-calendar-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}

/* UNUSED
.ol-calendar-month-label {
font-size: 16px;
font-weight: 700;
color: rgb(38 119 142);
}
*/

.ol-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 6px;
}

.ol-calendar-weekdays span {
text-align: center;
font-size: 11px;
color: #888;
text-transform: uppercase;
}

.ol-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}

.ol-calendar-cell {
aspect-ratio: unset;
height: 60px; /* adjust to whatever height you landed on */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
border-radius: 4px;
text-decoration: none;
color: rgb(34, 34, 34);
}

.ol-calendar-dot-row {
display: flex;
align-items: center;
gap: 3px;
min-height: 14px; /* reserves space even when this row is empty */
}


.ol-calendar-cell-blank {
visibility: hidden;
}

.ol-calendar-cell-link {
cursor: pointer;
}

.ol-calendar-cell-link:hover {
background: #f5f5f5;
}


.ol-calendar-daynum {
font-size: 13px;
}

.ol-calendar-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgb(34, 34, 34);
}

.ol-calendar-dot-overdue {
background: #c0392b;
}

.ol-calendar-count {
font-size: 10px;
color: #666;
}

/* ---- List/calendar toggle ---- */
.ol-view-toggle {
display: flex;
gap: 8px;
margin-bottom: 16px;
}


/* ---- Calendar month/year picker selects ---- */
.ol-calendar-picker {
display: flex;
align-items: center;
gap: 6px;
}

.ol-calendar-picker-select {
border: none;
background: transparent;
font-size: 15px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
color: rgb(34, 34, 34);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
padding: 4px 2px;
text-align: center;
}

.ol-calendar-picker-select:focus {
outline: none;
border-bottom: 1px solid rgb(34, 34, 34);
}



.ol-calendar-cell-link {
background: none;
border: none;
font-family: inherit;
padding: 0;
cursor: pointer;
}

.ol-day-modal-card {
max-width: 360px;
}

.ol-day-modal-date {
font-size: 15px;
font-weight: 700;
color: rgb(34, 34, 34);
margin: 0 0 12px;
text-align: center;
}

.ol-day-modal-list {
display: flex;
flex-direction: column;
max-height: 280px;
overflow-y: auto;
}

.ol-day-modal-item {
display: block;
padding: 10px 4px;
font-size: 14px;
color: rgb(34, 34, 34);
text-decoration: none;
border-bottom: 1px solid #eee;
}

.ol-day-modal-item:last-child {
border-bottom: none;
}

.ol-day-modal-item:hover {
color: #666;
}

.ol-day-modal-empty {
font-size: 13px;
color: #888;
text-align: center;
padding: 12px 0;
}

/* ---- Note reminder pills ---- */
.ol-reminder-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #000;
border-radius: 999px;
padding: 7px 14px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
background: none;
margin-bottom: 6px;
cursor: pointer;
color: #000;
}

.ol-reminder-pill:hover {
background: #f5f5f5;
}

.ol-reminder-pill.ol-reminder-pill-active {
background: rgb(34, 34, 34);
color: #fff;
border-color: rgb(34, 34, 34);
}

.ol-reminder-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #f0efe9;
  color: #888;
  font-size: 11px;
  white-space: nowrap;
}
 

.ol-date-group-list .ol-plain-row:last-child {
border-bottom: none;
}

.ol-date-group-list .ol-plain-checkbox {
width: 20px;
height: 20px;
min-width: 20px;
margin-top: 2px;
}

.ol-date-group-list .ol-plain-row-title {
font-size: 15px;
font-weight: 500;
margin-bottom: 2px;
}

.ol-date-group-list .ol-task-desc {
font-size: 13px;
color: var(--ol-text-secondary, #666);
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.ol-date-group-list .ol-plain-recurrence {
justify-content: flex-start;
margin-top: 0;
margin-bottom: 6px;
}

.ol-date-group-list .ol-row-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}

.ol-date-group-list .ol-attachment-badges {
display: inline-flex;
gap: 4px;
}

.ol-date-group-list .ol-plain-people {
font-size: 12px;
color: #999;
gap: 3px;
}

.ol-date-group-list .ol-row-actions {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}


/* UNUSED
.ol-date-group-heading-today {
color: #178272;
font-weight: 400;
}
*/

/*  */


/* Reset default fieldset chrome -- browsers add their own border, padding,
and min-width based on content, all of which we want to fully replace. */
fieldset.ol-date-group-list {
border: 1px solid #cccccc;
border-radius: 10px;
padding: 0;
margin-bottom: 16px;
min-width: 0;
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); */
}

.ol-date-group-list .ol-plain-row {
border-bottom: 0.5px solid #eee;
margin-bottom: 0;
padding: 14px;
}

.ol-date-group-list .ol-plain-row:last-child {
border-bottom: none;
}

.ol-date-group-heading {
font-size: 16px;
font-weight: 500;
color: #888;
padding: 0 8px;
margin-left: 4px;
background: #fff;
}

.ol-notes-group-heading {
font-size: 14px;
font-weight: 500;
color: #888;
padding: 0 8px;
margin-left: 4px;
background: #fff;
}

.ol-date-group-heading-urgent {
color: #cd3e3e;
}

/* UNUSED
.ol-date-group-heading-today {
color: black;
}
*/


/*  */
/* Sticky month header: stays pinned while scrolling through that month's
cards, then naturally releases once the whole .ol-month-section (this
month's heading + all its date-group cards) scrolls past -- this is
why the heading and its cards need to share a common wrapper, rather
than being loose siblings. No JS needed, pure CSS position: sticky. */
.ol-month-section {
position: relative;
}



.ol-calendar-cell-today {
color:rgb(48 126 196);
font-weight: 700;
border: 1px solid rgb(48 126 196);
}

.ol-calendar-cell-today .ol-calendar-daynum {
font-weight: 700;
}

.ol-calendar-cell-today.ol-calendar-cell-link:hover {
background: #000;
}
body[class*="ol-font-"] .ol-task-date-form-label { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-task-inline-date-input { font-size: calc(16px * var(--ol-content-scale)); }

/* ---- Todos/journal/notes rows and content ---- */
body[class*="ol-font-"] .ol-task-desc { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-task-pdf-link { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-reorder-tip { font-size: calc(11px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-reorder-hint { font-size: calc(12px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-date-group-list .ol-plain-row-title { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-date-group-list .ol-task-desc { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-date-group-list .ol-plain-people { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-date-group-heading { font-size: calc(16px * var(--ol-content-scale)); }

/* ---- Guides ---- */
body[class*="ol-font-"] .ol-stale-text { font-size: calc(13px * var(--ol-content-scale)); }

/* ---- Task show page ---- */
body[class*="ol-font-"] .ol-task-show-date { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-task-show-title { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-task-show-description { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-task-show-author { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-date-pill input { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-reminder-pill { font-size: calc(13px * var(--ol-content-scale)); }

/* ---- Calendar / day modal ---- */
body[class*="ol-font-"] .ol-calendar-daynum { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-calendar-count { font-size: calc(10px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-calendar-picker-select { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-day-modal-date { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-day-modal-item { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-day-modal-empty { font-size: calc(13px * var(--ol-content-scale)); }


/* UNUSED
.ol-task-synced-tag {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: #5b7fa6;
margin: 0 0 6px;
}

.ol-task-synced-tag svg {
flex-shrink: 0;
}
*/

.ol-task-show-synced-tag {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #5b7fa6;
margin: 0 0 12px;
}

.ol-sticky-date-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 0;
opacity: 0;
overflow: hidden;
margin-right: 0;
flex-shrink: 0;
transition: width 0.25s ease, opacity 0.2s ease, margin-right 0.25s ease;
}

.ol-sticky-date-badge-day {
font-size: 24px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}

.ol-sticky-date-badge-weekday {
font-size: 16px;
text-transform: uppercase;
color: #888;
white-space: nowrap;
}

.ol-month-label-text {
white-space: nowrap;
}
/* ============================================================
NOTES
============================================================ */


.ol-note-content .trix-content {
line-height: 1.6;
}

.ol-note-content .trix-content p {
margin: 0 0 20px;
}

.ol-note-content .trix-content p:last-child {
margin-bottom: 0;
}

.ol-note-content h1 {
font-size: 18px;
font-weight: 700;
margin: 10px 0 4px;
}

.ol-note-content h2 {
font-size: 16px;
font-weight: 700;
margin: 10px 0 4px;
}

.ol-note-content h3 {
font-size: 14px;
font-weight: 700;
margin: 10px 0 4px;
}

.ol-note-content ul {
margin: 4px 0;
padding-left: 18px;
}

/* UNUSED
.ol-notes-actions-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
gap: 8px;
padding: 0 14px 14px;
}

.ol-note-category-heading {
font-size: 18px;
font-weight: 400;
letter-spacing: 0.04em;
margin-bottom: 8px;
color: #282828;
}

.ol-note-heading {
font-size: 16px;
font-weight: 500;
color: #888;
padding: 8px 0;
background: #fff;
}
*/

.ol-note-reminder-tag {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #b8860b;
margin: 0 0 6px;
}

.ol-note-reminder-tag svg {
flex-shrink: 0;
}

/* Note print view */
@media print {
/* Generic escape hatch -- anything marked .ol-no-print disappears when
printing, regardless of which page it's on. */
.ol-no-print {
display: none !important;
}

/* App-wide chrome that exists outside this specific view (nav bar,
activity bell, floating add button) -- targeted directly by their
existing class names rather than needing to edit the layout/shared
partials that render them. */
.ol-nav-bar,
.ol-nav-dot-wrapper,
.ol-floating-add-btn {
display: none !important;
}

/* The app container's normal padding/max-width is fine for print too,
but drop the box-shadow/border treatment the show card uses on
screen -- shadows don't render meaningfully on paper and just waste
toner drawing a grey box around the edge. */
.ol-task-show-card {
box-shadow: none;
border: none;
padding: 0;
}

/* Print the actual PDF URL after each filename, since a link can't be
clicked on paper -- a standard print-CSS convention. */
.ol-pdf-card-name::after {
content: " (" attr(data-print-url) ")";
font-size: 11px;
color: #666;
font-weight: 400;
}

/* Larger type for print specifically -- printed text for an older
audience should be noticeably bigger than screen body text, not a
small bump. pt units used deliberately here (the natural unit for
print), rather than the px/rem values used on-screen elsewhere. */
.ol-task-show-title {
font-size: 26pt;
}

.ol-task-show-author {
font-size: 12pt;
}

.ol-media-hint {
font-size: 12pt;
}

/* UNUSED
.ol-media-preview-audio-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: #f0efe9;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
*/

.ol-note-content {
font-size: 14pt;
line-height: 1.6;
}

.ol-note-content h1 {
font-size: 20pt;
}

.ol-note-content h2 {
font-size: 18pt;
}

.ol-note-content h3 {
font-size: 16pt;
}

.ol-note-content p,
.ol-note-content li {
font-size: 14pt;
}

.ol-pdf-card-name {
font-size: 13pt;
}

.ol-pdf-card-size {
font-size: 11pt;
}

/* Avoid a note title or image awkwardly splitting across a page break. */
.ol-task-show-title,
.ol-media-gallery-tile {
page-break-inside: avoid;
}
}
body[class*="ol-font-"] .ol-note-content { font-size: calc(13px * var(--ol-content-scale)); }
/* !important here is deliberate, not a shortcut -- this specifically
overrides Trix's own bundled default CSS, which we can't see or edit
directly. Normal specificity math says this rule should already win
(it has one more ancestor selector than the base rule), but it's been
confirmed NOT winning in real testing despite that -- meaning
something outside this stylesheet (Trix's own vendor CSS) is either
tying on specificity and winning on source order, or matching more
specifically in a way not visible from this file alone. !important
settles that fight decisively rather than guessing at more
specificity tuning. */
body[class*="ol-font-"] .ol-note-content h1 { font-size: calc(18px * var(--ol-content-scale)) !important; }
body[class*="ol-font-"] .ol-note-content h2 { font-size: calc(16px * var(--ol-content-scale)) !important; }
body[class*="ol-font-"] .ol-note-content h3 { font-size: calc(14px * var(--ol-content-scale)) !important; }
/* UNUSED body[class*="ol-font-"] .ol-note-category-heading { font-size: calc(18px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-note-heading { font-size: calc(16px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-note-reminder-tag { font-size: calc(12px * var(--ol-content-scale)); }
/* ============================================================
GUIDES
============================================================ */


.ol-step-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #999;
cursor: grab;
touch-action: none;
}

.ol-step-drag-handle:active {
cursor: grabbing;
color: rgb(34, 34, 34);
}

.ol-step-media {
margin-top: 12px;
}

.ol-step-media-img {
width: 100%;
border-radius: 0;
display: block;
}

.ol-step-media-clickable {
cursor: pointer;
}

.ol-guides-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.ol-guide-card {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 16px;
}

.ol-grocery-card {
border: 1px solid rgb(15 136 106);
background-color: rgb(15 136 106);
border-radius: 4px;
padding: 16px;
}

.ol-guide-card-draft {
border-style: dashed;
}

.ol-guide-badges {
margin-bottom: 8px;
}

.ol-guide-top {
display: flex;
gap: 10px;
}

.ol-guide-top h2 {
margin: 0 0 4px;
}

.ol-guide-title-link {
font-size: 16px;
font-weight: 700;
color: rgb(34, 34, 34);
text-decoration: none;
overflow-wrap: break-word;
word-break: break-word;
}

.ol-grocery-title-link {
font-size: 16px;
font-weight: 700;
color: white;
text-decoration: none;
overflow-wrap: break-word;
word-break: break-word;
}

.ol-guide-description {
font-size: 13px;
color: #444;
margin: 0 0 10px;
}

.ol-guide-meta-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
}

.ol-guide-meta-row .ol-code {
display: inline;
margin-left: 0;
white-space: normal;
}

.ol-guide-meta-dot {
color: #ccc;
}

.ol-guide-actions {
display: flex;
align-items: center;
justify-content: space-between;
}

.ol-guide-actions-menu {
  position: relative;
  display: inline-block;
}

.ol-guide-actions-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 13px;
  background: #f5f4f0;
  color: #333;
  border: 1px solid #e5e3dd;
  border-radius: 4px;
  cursor: pointer;
}

.ol-guide-actions-trigger:hover {
  background: #ebe9e3;
}

.ol-guide-actions-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: white;
  border: 1px solid #e5e3dd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 200px;
  overflow: hidden;
  padding: 4px;
}

/* button_to renders a <form> wrapping the button -- reset its default
   block spacing so it doesn't add unwanted gaps between menu items. */
.ol-guide-actions-panel form {
  margin: 0;
}

.ol-guide-actions-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
}

.ol-guide-actions-item-neutral { color: #333; }
.ol-guide-actions-item-neutral:hover { background: #f0efe9; }

.ol-guide-actions-item-purple { color: #6b4a80; }
.ol-guide-actions-item-purple:hover { background: #f1eaf5; }

.ol-guide-actions-item-green { color: #2d5a32; }
.ol-guide-actions-item-green:hover { background: #e8f2e9; }

.ol-guide-actions-item-red { color: #8a3535; }
.ol-guide-actions-item-red:hover { background: #f7e9e9; }

/* .ol-guide-category {
margin-bottom: 24px;
} */

.ol-guide-share-tip {
font-size: 13px;
line-height: 1.6;
color: #444;
border-left: 2px solid rgb(34, 34, 34);
padding-left: 12px;
margin: 0 0 24px;
}


.ol-guide-hero {
margin-bottom: 16px;
}

/* .ol-guide-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 12px;
}
 */
.ol-guide-share-status {
margin-bottom: 12px;
}

.ol-divider {
border: none;
border-top: 1px solid rgb(34, 34, 34);
margin: 20px 0;
}

.ol-steps-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}

.ol-steps-list {
display: flex;
flex-direction: column;
gap: 12px;
}

/* ---- Writing tips accordion ---- */
.ol-writing-tips {
/* border: 1px solid #ddd; */
border-radius: 4px;
margin-bottom: 24px;
}

.ol-writing-tips-summary {
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 12px 14px; */
font-size: 13px;
font-weight: 700;
cursor: pointer;
list-style: none;
}

.ol-writing-tips-summary::-webkit-details-marker {
display: none;
}

.ol-writing-tips-chevron {
transition: transform 0.2s ease;
font-size: 12px;
}

.ol-writing-tips[open] .ol-writing-tips-chevron {
transform: rotate(180deg);
}

.ol-writing-tips-body {
/* padding: 0 14px 14px; */
border-top: 1px solid #eee;
}

.ol-writing-tips-intro {
font-size: 13px;
color: #444;
line-height: 1.6;
margin: 12px 0 14px;
}

.ol-writing-tips-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.ol-writing-tip {
border-left: 2px solid #ddd;
padding-left: 12px;
}

.ol-writing-tip-avoid {
font-size: 13px;
color: #999;
margin: 0 0 2px;
}

.ol-writing-tip-better {
font-size: 13px;
color: rgb(34, 34, 34);
margin: 0;
}

.ol-step-card {
border: 1px solid rgb(205 205 205);
border-radius: 4px;
padding: 16px;
}

.ol-step-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}

.ol-step-number {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgb(34, 34, 34);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.ol-step-title {
font-size: 15px;
font-weight: 700;
margin: 0 0 6px;
}

.ol-step-body {
font-size: 13px;
color: #444;
line-height: 1.6;
margin: 0;
}

.ol-step-placeholder {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
padding: 10px;
border: 1px dashed #ccc;
border-radius: 4px;
}

.ol-step-hint {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #999;
}

.ol-step-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 10px;
}


body[class*="ol-font-"] .ol-guide-title-link { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-guide-description { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-guide-share-tip { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-step-title { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-step-body { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-step-hint { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-writing-tips-summary { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-writing-tips-intro { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-writing-tip-avoid { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-writing-tip-better { font-size: calc(13px * var(--ol-content-scale)); }
/* ============================================================
GROCERY LISTS
============================================================ */


.ol-grocery-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
border-bottom: 1px solid #eee;
}

.ol-grocery-checkbox {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid #888;
background: none;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
cursor: pointer;
}

.ol-grocery-item-checked .ol-grocery-checkbox {
background: rgb(34, 34, 34);
border-color: rgb(34, 34, 34);
}

.ol-grocery-item-name {
flex: 1;
font-size: 15px;
}

.ol-grocery-item-checked .ol-grocery-item-name {
text-decoration: line-through;
color: #999;
}

.ol-grocery-item-checked-by {
font-size: 11px;
color: #888;
}

.ol-grocery-remove {
background: none;
border: none;
color: #514d4d;
cursor: pointer;
font-size: 14px;
padding: 4px;
}
/* ============================================================
SHARING, INVITES & ACTIVITY FEED
============================================================ */


.ol-share-label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #666;
text-decoration: none;
/* border: 1px solid #ccc; */
/* border-radius: 999px; */
/* padding: 3px 10px; */
}

.ol-share-label-everyone {
/* border-color: rgb(34, 34, 34); */
color: #666;
}

.ol-share-label-some {
/* border-color: #ccc; */
color: #666;
}

.ol-share-label-private {
color: #666;
}

/* Share selector */
.ol-share-selector {
margin-bottom: 20px;
}

.ol-share-selector-members {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.ol-share-btn {
background: none;
border: 1px solid #ccc;
border-radius: 999px;
padding: 4px 14px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
color: rgb(34, 34, 34);
}

.ol-share-btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
}

.ol-share-btn.active {
background: rgb(34, 34, 34);
color: #fff;
border-color: rgb(34, 34, 34);
}


/* ACTIVITY FEED */
.ol-activity-feed-list {
display: flex;
flex-direction: column;
}

.ol-activity-feed-item {
display: flex;
align-items: flex-start;
gap: 5px;
padding: 12px;
border-bottom: 1px solid #eee;
text-decoration: none;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}

.ol-activity-feed-item:last-child {
border-bottom: none;
}

.ol-activity-feed-item:hover {
opacity: 0.65;
}

.ol-activity-feed-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgb(60, 60, 60);
}

.ol-activity-feed-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.ol-activity-feed-text-line {
font-size: 13px;
line-height: 1.45;
overflow-wrap: break-word;
}

.ol-activity-feed-time {
font-size: 11px;
color: #999;
}

.ol-activity-empty {
font-size: 13px;
color: #999;
padding: 16px 0;
text-align: center;
}

/* INVITE page */
.ol-invite-link-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 24px;
}

.ol-invite-link-input {
flex: 1;
min-width: 0;
border: none;
border-bottom: 1px solid rgb(34, 34, 34);
border-radius: 0;
padding: 6px 0;
font-size: 16px;
font-family: "DM Sans", sans-serif;
background: transparent;
outline: none;
color: #444;
overflow: hidden;
text-overflow: ellipsis;
}
body[class*="ol-font-"] .ol-share-label { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-share-btn { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-invite-link-input { font-size: calc(16px * var(--ol-content-scale)); }


.ol-invite-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: #f0f5ff;
border: 1px solid #c9dcff;
border-radius: 8px;
padding: 10px 16px;
margin: 36px 0px;
font-size: 13px;
color: rgb(34, 34, 34);
}

.ol-invite-banner-text {
display: flex;
align-items: center;
}

.ol-invite-banner-link {
font-size: 13px;
font-weight: 400;
color: #1a4fd6;
text-decoration: underline;
white-space: nowrap;
}
/* ============================================================
FILE ATTACHMENTS (VOICE, PDF, IMAGE, QR)
============================================================ */


.ol-image-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: none;
align-items: center;
justify-content: center;
z-index: 500;
}

.ol-image-overlay.open {
display: flex;
}

.ol-image-overlay-inner {
position: relative;
max-width: 90vw;
max-height: 90vh;
}

.ol-image-overlay-img {
max-width: 100%;
max-height: 90vh;
border-radius: 4px;
}

.ol-image-overlay-close {
position: absolute;
top: -36px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
}

.ol-image-overlay-hint {
text-align: center;
color: #fff;
font-size: 12px;
margin-top: 8px;
}

.ol-image-overlay-fallback {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ccc;
  font-size: 14px;
  padding: 60px 20px;
}

.ol-image-overlay-fallback button {
  border: 1px solid #ccc;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

.ol-media-preview-stacked {
margin-bottom: 24px;
}

.ol-media-preview-thumb {
width: 60px;
height: 60px;
object-fit: cover;
flex-shrink: 0;
}

.ol-media-preview-name {
font-size: 13px;
font-weight: 400;
margin: 0 0 4px;
overflow-wrap: break-word;
}

.ol-media-remove-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #c0392b;
cursor: pointer;
}

.ol-media-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
margin: 8px 0 16px;
}

.ol-media-gallery-tile {
aspect-ratio: 1;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}

.ol-media-gallery-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.ol-pdf-card-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 0 16px;
}

.ol-pdf-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
text-decoration: none;
color: rgb(34, 34, 34);
}

.ol-pdf-card-icon {
width: 36px;
height: 36px;
border-radius: 4px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #666;
}

.ol-pdf-card-info {
min-width: 0;
flex: 1;
}

.ol-pdf-card-name {
font-size: 14px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.ol-pdf-card-size {
font-size: 12px;
color: #888;
margin: 2px 0 0;
}

.ol-pdf-card-arrow {
flex-shrink: 0;
color: #999;
}

/* UNUSED MEDIA GROUP HEADER
.ol-media-group {
border-top: 1px solid #ddd;
padding-top: 20px;
margin-top: 20px;
}

.ol-media-group-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}

.ol-media-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border: 1px solid rgb(34, 34, 34);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgb(34, 34, 34);
}

.ol-media-title {
font-size: 14px;
font-weight: 700;
margin: 0 0 2px;
}

.ol-media-subtitle {
font-size: 12px;
color: #666;
margin: 0;
line-height: 1.5;
}
*/

/* ---- Existing-attachment previews ---- */
.ol-media-preview {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.ol-media-thumb {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 4px;
border: 1px solid rgb(34, 34, 34);
}

/* UNUSED
.ol-media-pdf-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
color: rgb(34, 34, 34);
}
*/

.ol-media-preview-info {
min-width: 0;
}

/* UNUSED
.ol-media-name {
font-size: 13px;
margin: 0 0 4px;
overflow-wrap: break-word;
word-break: break-word;
}

.ol-media-audio-preview,
.ol-media-video-preview {
margin-bottom: 12px;
}
*/

.ol-media-remove {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
cursor: pointer;
}

/* UNUSED
.ol-media-remove-checkbox {
width: 14px;
height: 14px;
accent-color: rgb(34, 34, 34);
}
*/

.ol-media-hint {
font-size: 12px;
color: #888;
line-height: 1.5;
margin: 8px 0 0;
}

/* UNUSED FILE UPLOAD ZONE
.ol-file-zone {
display: block;
border: 1px dashed #ccc;
border-radius: 4px;
padding: 14px;
text-align: center;
cursor: pointer;
}

.ol-file-zone.has-file {
border-style: solid;
border-color: rgb(34, 34, 34);
}

.ol-file-zone-inner {
display: flex;
justify-content: center;
}

.ol-file-zone-btn {
display: inline-block;
font-size: 13px;
font-weight: 500;
border: 1px solid rgb(34, 34, 34);
border-radius: 999px;
padding: 6px 16px;
}

.ol-file-zone-selected {
font-size: 12px;
color: #444;
margin: 8px 0 0;
overflow-wrap: break-word;
word-break: break-word;
}
*/

.ol-file-input {
display: none;
}

/* ---- In-app voice recorder ---- */
/* UNUSED
.ol-voice-unsupported {
font-size: 12px;
color: #666;
line-height: 1.5;
margin: 0 0 12px;
}
*/

.ol-voice-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

/* UNUSED VOICE RECORDER CONTROLS
.ol-voice-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
font-family: inherit;
border: 1px solid rgb(34, 34, 34);
border-radius: 999px;
padding: 6px 16px;
background: none;
color: rgb(34, 34, 34);
cursor: pointer;
}

.ol-voice-btn-record svg {
color: #c0392b;
}

.ol-voice-btn-stop {
background: rgb(34, 34, 34);
color: #fff;
}

.ol-voice-status {
font-size: 12px;
color: #666;
}

.ol-voice-status.recording-active {
color: #c0392b;
font-weight: 700;
}

.ol-voice-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0;
font-size: 12px;
color: #999;
}

.ol-voice-divider::before,
.ol-voice-divider::after {
content: "";
flex: 1;
border-top: 1px solid #eee;
}
*/

/* QR CODE page */
.ol-qr-card {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 28px 24px;
margin-top: 16px;
text-align: center;
}

.ol-qr-header {
margin-bottom: 20px;
}

.ol-qr-title {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 8px;
font-family: "DM Sans", sans-serif;
}

.ol-qr-hint {
font-size: 13px;
color: #444;
margin: 0;
}

.ol-qr-code-wrapper {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.ol-qr-code-wrapper svg {
max-width: 220px;
width: 100%;
height: auto;
}

.ol-qr-actions {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.ol-qr-url {
border-top: 1px solid #ddd;
padding-top: 14px;
}

.ol-qr-url-value {
font-size: 12px;
color: #444;
font-family: "DM Sans", sans-serif;
word-break: break-all;
margin: 4px 0 0;
}

.ol-file-input-hidden {
display: none;
}

/* UNUSED
.ol-file-selected {
font-size: 12px;
color: #666;
margin-top: 4px;
}
*/

/* Matches the existing .ol-media-icon circle treatment (36px, bordered,
centered) used elsewhere in the system, just with a letter instead of an svg. */
.ol-avatar-circle {
flex-shrink: 0;
width: 36px;
height: 36px;
border: 1px solid rgb(34, 34, 34);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}

.ol-media-pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.ol-media-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #97541e;
border-radius: 999px;
padding: 7px 14px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
background: #97541e;
cursor: pointer;
color: white;
}

.ol-record-and-transcribe-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid teal;
border-radius: 999px;
padding: 12px 24px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
background: teal;
cursor: pointer;
color: white;
}

.ol-record-only-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid teal;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 13px;
  font-family: "DM Sans", sans-serif;
  background: none;
  cursor: pointer;
  color: teal;
}

.ol-media-pill-status {
font-size: 11px;
color: #666;
margin: 6px 0 0;
}

.ol-attachment-badges {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}

.ol-attachment-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 3px;
color: #666;
}
body[class*="ol-font-"] .ol-image-overlay-close { font-size: calc(20px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-image-overlay-hint { font-size: calc(12px * var(--ol-content-scale)); }

/* ---- Media / attachments ---- */
body[class*="ol-font-"] .ol-media-hint { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-media-preview-name { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-media-remove-label { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-pdf-card-name { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-pdf-card-size { font-size: calc(12px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-media-title { font-size: calc(14px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-media-subtitle { font-size: calc(12px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-media-name { font-size: calc(13px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-media-remove { font-size: calc(12px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-file-zone-btn { font-size: calc(13px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-file-zone-selected { font-size: calc(12px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-voice-unsupported { font-size: calc(12px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-voice-btn { font-size: calc(13px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-voice-status { font-size: calc(12px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-qr-title { font-size: calc(18px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-qr-hint { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-qr-url-value { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-media-pill { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-media-pill-status { font-size: calc(11px * var(--ol-content-scale)); }
/* ============================================================
ACCOUNT SETTINGS, FAMILY GROUP, BILLING & ADMIN
============================================================ */


/* JOURNAL page */
.ol-plan-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 16px;
}

.ol-plan-banner-title {
font-size: 13px;
font-weight: 700;
margin: 0 0 2px;
}

.ol-plan-banner-body {
font-size: 12px;
color: #666;
margin: 0;
}

/* UNUSED
.ol-plan-banner-partial p {
font-size: 12px;
color: #444;
margin: 0;
}
*/

/* ACCOUNT EDIT PAGE */
.ol-account-wrapper {
display: flex;
flex-direction: column;
/* gap: 28px; */
}

.ol-account-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
}

.ol-account-section {
/* padding-top: 16px; */
}

.ol-family-card {
/* padding: 16px; */
}

.ol-family-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
padding: 0 12px; 
}

.ol-family-card-name {
font-size: 16px;
font-weight: 700;
margin: 0 0 2px;
}

.ol-family-empty {
text-align: center;
padding: 24px;
border: 1px dashed rgb(34, 34, 34);
border-radius: 4px;
}

.ol-family-empty-text {
font-size: 13px;
color: #666;
margin: 0 0 12px;
}

.ol-account-form-grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 12px;
}

.ol-subscription-card {
display: flex;
align-items: center;
justify-content: space-between;
/* border-bottom: 1px solid lightgrey; */
padding: 12px 0 24px 0;
}


.ol-subscription-note {
font-size: 12px;
color: #666;
margin: 0;
text-align: right;
}

.ol-danger-zone {
/* border: 1px solid #c0392b;
border-radius: 4px;
padding: 16px; */
margin-top: 12px;
}

.ol-danger-zone-title {
font-size: 14px;
font-weight: 700;
color: #c0392b;
margin: 0 0 4px;
}

.ol-danger-zone-body {
font-size: 12px;
color: #666;
margin: 0 0 12px;
}

.ol-danger-instruction {
font-size: 12px;
margin: 0 0 6px;
}

.ol-danger-input {
width: 100%;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 8px 12px;
font-size: 16px;
margin-bottom: 10px;
}

/* INSTALL PROMPT */
.ol-install-wrapper {
position: relative;
display: inline-flex;
}

.ol-install-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
width: 320px;
max-height: 70vh;
overflow-y: auto;
padding: 16px;
z-index: 300;
}

.ol-install-panel-heading {
font-size: 14px;
font-weight: 700;
margin: 0 0 12px;
}

.ol-install-steps {
margin: 14px 0px
}

.ol-install-step {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}

.ol-install-step-number {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(34, 34, 34);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

.ol-install-step-text {
font-size: 12px;
color: #444;
line-height: 1.5;
margin: 0;
}

.ol-install-link-list {
list-style: none;
margin: 25px 0px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}

.ol-install-link {
display: flex;
align-items: center;
gap: 30px;
padding: 8px 10px;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
text-decoration: none;
color: rgb(34, 34, 34);
}

.ol-install-link-platform {
flex-shrink: 0;
width: 100px;
font-size: 14px;
}

.ol-install-link-title {
flex: 1;
font-size: 12px;
}

.ol-install-link-arrow {
flex-shrink: 0;
}

.ol-install-confirmed {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 400;
margin: 8px 0;
}

.ol-install-tips {
display: flex;
flex-direction: column;
gap: 8px;
}

.ol-install-tip {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #666;
}

/* Demo page related */
.ol-demo-ribbon {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
background: #ffe7dd;
color: #fff;
border: 2px solid black;
border-radius: 15px;
padding: 4px 8px;
font-size: 13px;
z-index: 400;
}

.ol-demo-ribbon-btn {
background: #ffe7dd;
border: none;
color: black;
padding: 4px 12px;
font-size: 12px;
cursor: pointer;
border-radius: 5px;
}

.ol-members-section {
margin-top: 24px;
}

.ol-member-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.ol-member-row-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.ol-member-row-main .ol-member-left {
min-width: 0;
}

.ol-member-info {
min-width: 0;
}

.ol-member-name {
font-size: 14px;
font-weight: 700;
margin: 0 0 2px;
}

.ol-member-email {
font-size: 12px;
color: #666;
margin: 0 0 2px;
overflow-wrap: break-word;
word-break: break-word;
}

.ol-member-joined {
font-size: 11px;
color: #888;
font-family: "DM Sans", sans-serif;
white-space: nowrap;
}

.ol-admin-summary {
font-size: 13px;
color: #666;
margin: 4px 0 24px;
}

.ol-admin-stat-card {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
padding: 14px 16px;
}

.ol-admin-stat-number {
font-size: 26px;
font-weight: 700;
margin: 0 0 2px;
font-family: "DM Serif Display", serif;
}

.ol-admin-stat-label {
font-size: 11px;
color: #888;
margin: 0;
}

/* ---- Table ---- */
.ol-admin-table-wrapper {
overflow-x: auto; }

.ol-admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}

.ol-admin-table thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
color: #888;
letter-spacing: 0.04em;
padding: 0 12px 10px 0;
border-bottom: 1px solid rgb(34, 34, 34);
white-space: nowrap;
}

.ol-admin-table td {
padding: 12px 12px 12px 0;
white-space: nowrap;
}

.ol-admin-table-row {
border-bottom: 1px solid #eee;
}

.ol-admin-table-row:last-child {
border-bottom: none;
}

.ol-admin-table-link {
color: rgb(34, 34, 34);
text-decoration: none;
font-weight: 500;
}

.ol-admin-table-link:hover {
text-decoration: underline;
}

.ol-admin-table-muted {
color: #666;
}

.ol-admin-confirmed-yes {
color: #2d7a4f;
}

.ol-admin-confirmed-no {
color: #c0392b;
}


.ol-trial-badge {
font-size: 15px;
font-weight: 400;
color: rgb(34, 34, 34);
margin-bottom: 8px;
}

.ol-family-card-actions {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
body[class*="ol-font-"] .ol-plan-banner-title { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-plan-banner-body { font-size: calc(12px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-plan-banner-partial p { font-size: calc(12px * var(--ol-content-scale)); } */

/* ---- Account page ---- */
body[class*="ol-font-"] .ol-family-card-name { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-family-empty-text { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-subscription-note { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-zone-title { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-zone-body { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-instruction { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-danger-input { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-trial-badge { font-size: calc(15px * var(--ol-content-scale)); }

/* ---- Family/invite/member pages ---- */
body[class*="ol-font-"] .ol-member-name { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-member-email { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-member-joined { font-size: calc(11px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-avatar-circle { font-size: calc(14px * var(--ol-content-scale)); }


.ol-account-details {
border-bottom: 1px solid #eee;
}

.ol-account-details:last-of-type {
border-bottom: none;
}

.ol-account-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 4px;
cursor: pointer;
list-style: none;
font-family: "DM Sans", sans-serif;
}

.ol-account-summary:hover {
background: #fafafa;
}

.ol-account-summary::-webkit-details-marker {
display: none;
}

.ol-account-summary-left {
display: flex;
align-items: center;
gap: 10px;
}

.ol-account-summary-chevron {
flex-shrink: 0;
color: #999;
transition: transform 0.2s ease;
}

.ol-account-details[open] > .ol-account-summary .ol-account-summary-chevron {
transform: rotate(180deg);
}

.ol-account-summary-title {
font-size: 15px;
color: rgb(34, 34, 34);
}

.ol-account-summary-danger {
color: #c0392b;
}

.ol-account-summary-meta {
font-size: 12px;
color: #888;
}

.ol-account-details section.ol-account-section {
padding-bottom: 20px;
}

/* Smaller, muted sub-toggles nested inside a section (change password,
delete group) -- same native <details> mechanism, lighter visual
weight than the page-level sections above. */
.ol-account-subdetails {
border-top: 1px solid #eee;
padding-top: 12px;
margin-top: 12px;
}

.ol-account-subsummary {
font-size: 12px;
color: #666;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}

.ol-account-subsummary::-webkit-details-marker {
display: none;
}

.ol-account-subsummary-chevron {
flex-shrink: 0;
transition: transform 0.2s ease;
}

.ol-account-subdetails[open] > .ol-account-subsummary .ol-account-subsummary-chevron {
transform: rotate(180deg);
}

.ol-account-subsummary-danger {
color: #c0392b;
padding-left: 12px;
}
/* ============================================================
ONBOARDING TOUR
============================================================ */


/* ONBOARDING TOUR */
.ol-tour-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 900;
pointer-events: none;
}

/* The "spotlight": a transparent box whose oversized box-shadow covers
the entire screen except for its own bounds -- this is what creates
the cutout/highlight illusion around the target element without
needing actual CSS clipping. */
.ol-tour-spotlight {
position: fixed;
border-radius: 8px;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
border: 2px solid #fff;
z-index: 901;
pointer-events: none;
transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.15s ease;
}

.ol-tour-bubble {
position: fixed;
width: 280px;
background: #fff;
border: 1px solid rgb(34, 34, 34);
border-radius: 8px;
padding: 16px;
z-index: 902;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: top 0.3s ease, left 0.3s ease, opacity 0.15s ease;
}

.ol-tour-bubble-text {
font-size: 14px;
line-height: 1.5;
color: rgb(34, 34, 34);
margin: 0 0 14px;
}

.ol-tour-bubble-actions {
display: flex;
justify-content: space-between;
align-items: center;
}

.ol-tour-skip {
background: none;
border: none;
color: #888;
font-size: 13px;
cursor: pointer;
padding: 0;
}

.ol-tour-next {
background: rgb(34, 34, 34);
color: #fff;
border: none;
border-radius: 999px;
padding: 8px 18px;
font-size: 13px;
font-weight: 400;
cursor: pointer;
}
/* ============================================================
MARKETING / LANDING PAGE
============================================================ */


.ol-section {
padding: 13px 0;
/* border-bottom: 1px solid rgb(34, 34, 34); */
}


.ol-section-eyebrow {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #999;
margin-bottom: 6px;
}

.ol-hero {
padding-top: 24px;
padding-bottom: 4px;
}

.ol-section-tag-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}

.ol-tag {
border: 1px solid rgb(34, 34, 34);
border-radius: 999px;
padding: 3px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
/* text-transform: uppercase; */
font-family: "DM Sans", sans-serif;
}

.ol-section-title {
font-weight: 700;
font-size: 24px;
}

.ol-code {
font-size: 11px;
color: #888;
font-family: "DM Sans", sans-serif;
margin-left: auto;
white-space: nowrap;
}

.ol-grocery-code {
font-size: 11px;
color: white;
font-family: "DM Sans", sans-serif;
margin-left: auto;
white-space: nowrap;
}

.ol-h1 {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 14px;
letter-spacing: -0.01em;
font-family: "DM Serif Display", serif;
}

.ol-h2 {
font-size: 24px;
font-weight: 400;
line-height: 1.4;
font-family: "DM Serif Display", serif;
margin-bottom: 20px;
}

.ol-h3 {
font-size: 24px;
font-weight: 400;
line-height: 1.6;
font-family: "DM Serif Display", serif;
margin-bottom: 20px;
}

.ol-lede {
font-size: 14px;
color: #444;
line-height: 1.6;
margin: 0 0 24px;
max-width: 480px;
}

.ol-hero-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 28px 0;
text-decoration: none;
color: black;
/* cursor: pointer; */
}

.ol-hero-pills a:visited, .ol-hero-pills a:link, .ol-hero-pills a:active {
color: black;
text-decoration: none;
}

.ol-hero-pills-secondary {
margin-top: 6px;
}

.ol-hero-pill-secondary {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border: 1px solid #d6ffed;
border-radius: 999px;
background-color: #c5ffe6;
font-size: 11px;
color: #0e402a;
text-decoration: none;
}

.ol-hero-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgb(34, 34, 34);
border-radius: 999px;
padding: 5px 14px;
font-size: 12px;
font-weight: 500;
}

/* UNUSED
.ol-cta-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
*/

.ol-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 9px 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
border: none;
appearance: none;
cursor: pointer;
font-family: inherit;
}

.ol-pill-outline {
border: 1px solid rgb(34, 34, 34);
color: rgb(34, 34, 34);
background: none;
}

.ol-pill-outline-list-calendar {
border: 1px solid rgb(48 126 196);
color: rgb(48 126 196);
background: none;
}

.ol-pill-outline-monthly-summary {
border: 1px solid rgb(1, 87, 1);
color: rgb(247, 247, 247);
background: rgb(1, 87, 1);
}

/* UNUSED
.ol-pill-outline-list-grocery {
border: 1px solid rgb(15 136 106);
color: white;
background: rgb(15 136 106);
}
*/

.ol-pill-filled {
background: rgb(34, 34, 34);
color: #fff;
}

.ol-pill-filled-list-calendar {
background: rgb(48 126 196);
color: #fff;
}

.ol-pill-button {
cursor: pointer;
font-family: inherit;
}

/* UNUSED
.ol-pill-today {
display: inline-block;
flex-shrink: 0;
width: 52px;
text-align: center;
color: red;
font-size: 10px;
font-weight: 700;
padding: 4px 0;
border-radius: 999px;
font-family: "DM Sans", sans-serif;
}
*/

.ol-section-body {
font-size: 15px;
color: #444;
line-height: 1.4;
margin: 0 0 20px;
}

.ol-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
font-size: 15px;
color: #444;
}

.ol-list li {
padding: 5px 0 5px 18px;
position: relative;
}

.ol-list li::before {
content: "-";
position: absolute;
left: 0;
color: rgb(34, 34, 34);
}

/* UNUSED PREVIEW CARD
.ol-preview-card {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
}

.ol-preview-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid #ddd;
}

.ol-preview-row-last {
border-bottom: none;
}

.ol-preview-row .ol-code {
flex-shrink: 0;
margin-left: 0;
padding-top: 2px;
}

.ol-preview-text {
flex: 1;
min-width: 0;
}

.ol-preview-title {
font-size: 13px;
font-weight: 400;
margin: 0 0 2px;
}

.ol-preview-body {
font-size: 12px;
color: #666;
margin: 0;
line-height: 1.4;
}
*/

.ol-closing {
border-bottom: none;
text-align: center;
padding: 60px 0 40px 0;
}

.ol-closing-title {
font-weight: 700;
font-size: 18px;
margin: 0 0 6px;
font-family: "DM Serif Display", serif;
}

.ol-closing-body {
font-size: 13px;
color: #444;
margin: 0 0 20px;
}

/* ABOUT PAGE */
.ol-prose {
font-size: 14px;
color: #222;
line-height: 1.7;
margin: 0 0 16px;
max-width: 560px;
}

.ol-prose:last-child {
margin-bottom: 0;
}

.ol-belief-list {
display: flex;
flex-direction: column;
}

.ol-belief-row {
display: flex;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid #ddd;
}

.ol-belief-row-last {
border-bottom: none;
padding-bottom: 0;
}

.ol-belief-row .ol-code {
flex-shrink: 0;
margin-left: 0;
padding-top: 2px;
font-size: 13px;
font-weight: 700;
color: rgb(34, 34, 34);
}

.ol-belief-text {
flex: 1;
}

.ol-belief-title {
font-weight: 700;
font-size: 14px;
margin: 0 0 6px;
}

.ol-belief-body {
font-size: 13px;
color: #444;
line-height: 1.6;
margin: 0;
}

.ol-inline-link {
color: rgb(34, 34, 34);
text-decoration: underline;
}

/* PRICING PAGE */
.ol-compare-table {
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
}

.ol-compare-row {
display: grid;
grid-template-columns: 1fr 90px 90px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #ddd;
font-size: 13px;
}

.ol-compare-row-last {
border-bottom: none;
}

.ol-compare-head {
font-family: "DM Sans", sans-serif;
font-size: 11px;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 0.04em;
color: #888;
border-bottom: 1px solid rgb(34, 34, 34);
}

.ol-compare-feature {
color: #222;
}

.ol-compare-value {
text-align: center;
color: #666;
}

.ol-compare-premium {
color: rgb(34, 34, 34);
font-weight: 700;
}

.ol-price-block {
text-align: center;
padding: 24px 0 28px;
border-bottom: 1px solid rgb(34, 34, 34);
margin-bottom: 28px;
}

.ol-price-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 4px;
}

.ol-price-original {
font-size: 13px;
color: #999;
text-decoration: line-through;
font-family: "DM Sans", sans-serif;
}

.ol-price-new {
font-size: 36px;
font-weight: 700;
margin: 8px 0 4px;
font-family: "DM Serif Display", serif;
}

.ol-price-period {
font-size: 16px;
font-weight: 400;
color: #666;
}

.ol-price-saving {
font-size: 12px;
color: #444;
font-family: "DM Sans", sans-serif;
margin: 0;
}

.ol-cta-block {
text-align: center;
}

.ol-cta-sub {
font-size: 12px;
color: #9b9999;
margin: 10px 0 4px;
}

/* UNUSED
.ol-cta-note {
font-size: 11px;
color: #999;
margin: 8px 0 0;
}
*/

.ol-pill-full {
display: block;
width: 100%;
text-align: center;
border: none;
cursor: pointer;
font-family: inherit;
}

.ol-pill-sm {
padding: 6px 16px;
font-size: 12px;
}

.ol-section-label {
font-size: 24px;
font-weight: 700;
margin: 35px 0 5px;
color: rgb(34, 34, 34);
}

/* UNUSED
.ol-section-sublabel {
font-size: 17px;
color: #3586d2;
margin-bottom: 6px;
}
*/

/* UNUSED
.ol-tag-overdue {
border-color: rgb(34, 34, 34);
}
*/

.ol-tag-muted {
color: #888;
}

/* UNUSED
.ol-tag-danger {
border-color: #c0392b;
color: #c0392b;
}
*/

.ol-pill-danger {
border-color: #c0392b;
color: #c0392b;
}

.ol-secondary-actions-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 10px 0;
margin-bottom: 12px;
border-bottom: 1px solid rgb(34, 34, 34);
}

/* UNUSED
.ol-pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
*/

/* ---- Pill action row: date + category chips share one row ---- */
.ol-pill-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 36px;
}

.ol-pill-action-row + .ol-pill-action-row {
  margin-top: -10px;
}

.ol-section-month-label {
font-size: 20px;
font-weight: 400;
color: rgb(38 119 142);
}

.ol-section-month-label {
position: sticky;
/* ESTIMATE, not measured -- your desktop nav bar's height isn't an
explicit CSS value (it's padding + text content driven), so this
needs a visual check once deployed. If the month label overlaps or
hides behind the nav bar, increase this number; if there's an odd
gap between them, decrease it. */
top: 45px;
z-index: 50;
background: white;
padding-top: 24px;
}

@media (max-width: 768px) {
.ol-section-month-label {
/* Mobile nav is bottom-anchored (a fixed tab bar), so nothing
obstructs the top of the viewport here -- sticks flush at 0. */
top: 0;
}
}
body[class*="ol-font-"] .ol-section-label { font-size: calc(24px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-section-sublabel { font-size: calc(17px * var(--ol-content-scale)); } */
body[class*="ol-font-"] .ol-section-month-label { font-size: calc(20px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-cta-sub { font-size: calc(12px * var(--ol-content-scale)); }



body[class*="ol-font-"] .ol-record-and-transcribe-pill { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-record-only-pill { font-size: calc(13px * var(--ol-content-scale)); }


/* ---- Sticky month-label date badge — shows day/weekday, sliding in
from the left as that day scrolls under the sticky month header.
.ol-section-month-label is now a flex row (day badge, then month
text) instead of plain text -- the badge animates from width:0 to
its full width, which pushes the month text right automatically via
flexbox, no manual transform needed on the month text itself. Only
the currently-stuck month label ever gets .date-badge-active (see
sticky_date_badge_controller.js), so this never shows more than one
badge at a time even though every month section has one in the DOM. ---- */
.ol-section-month-label {
display: flex;
align-items: center;
gap: 0;
}

.ol-section-month-label.date-badge-active .ol-sticky-date-badge {
width: 40px;
opacity: 1;
margin-right: 10px;
}



/*  */

/* UNUSED .ol-faq-list .ol-writing-tips { margin-bottom: 4px; } */

/* UNUSED
.ol-code-fixed-width {
display: inline-block;
width: 52px;
text-align: center;
}
*/

/* UNUSED
.ol-preview-attachment {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 11px;
color: #888;
}
*/

/* ---- Obvious, always-visible giveaway badge -- fixed position, subtle
pulse to draw the eye without being obnoxious. Deliberately NOT
hidden/subtle, since the point is maximizing people who notice and
act before the deadline. ---- */
.ol-giveaway-badge {
position: fixed;
bottom: 120px;
/* top: 100px; */
right: 20px;
z-index: 500;
background: #a9f1ff;
color: #2a7c74;
border: none;
border-radius: 999px;
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
cursor: pointer;
box-shadow: 4px 4px 0 0 #DAD8D2;
animation: ol-giveaway-pulse 2.5s ease-in-out infinite;
}

.ol-marketing-wide {
max-width: 800px;
}

.ol-phone-frame {
border: 3px solid #0A0A0A;
border-radius: 28px;
padding: 10px;
background: #0A0A0A;
box-shadow: 6px 6px 0 0 #DAD8D2;
display: inline-block;
}

.ol-screenshot-placeholder {
width: 260px;
aspect-ratio: 9 / 19.5;
background: #E5E3DD;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
/* padding: 20px; */
}

.ol-screenshot-placeholder span {
font-size: 12px;
color: #888;
text-align: center;
line-height: 1.5;
}

.ol-screenshot-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
}

/* ---- Hero graphic: the one signature moment. Larger frame, slight
rotation for graphic energy -- the single visual risk this page
takes, per "spend your boldness in one place." ---- */
.ol-hero-graphic {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}

.ol-phone-frame-hero {
transform: rotate(-3deg);
}

.ol-phone-frame-hero .ol-screenshot-placeholder {
width: 100px;
}

.ol-hero-graphic-image {
display: flex;
justify-content: center;
}

/* ---- Feature section two-column layout -- quiet, no rotation, smaller
frame, alternating sides for rhythm. Deliberately less bold than the
hero so attention isn't split across multiple "big moments." ---- */
.ol-feature-graphic {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 32px;
align-items: center;
}

.ol-feature-graphic-reverse {
direction: rtl;
}

.ol-feature-graphic-reverse > * {
direction: ltr;
}

.ol-feature-graphic-image {
display: flex;
justify-content: center;
}

/* ---- Mobile: collapse to single column, image below text, hero frame
loses its rotation (looks awkward at narrow widths) and shrinks. ---- */
@media (max-width: 900px) {
.ol-hero-graphic,
.ol-feature-graphic,
.ol-feature-graphic-reverse {
grid-template-columns: 1fr;
direction: ltr;
}

.ol-phone-frame-hero {
transform: none;
}

.ol-phone-frame-hero .ol-screenshot-placeholder,
.ol-screenshot-placeholder {
width: 220px;
}
}



/* ---- Chip treatment applied to hero pills and section tags -- same
black-bg/white-text/rotated language as the H1 highlight. Scoped
under .ol-marketing-page specifically: .ol-tag in particular is used
elsewhere in the real app (e.g. owner/member badges on the account
page) -- restyling it globally would leak this into unrelated UI.
.ol-hero-pill is unique to this page already, scoping it too just
for consistency/safety. ---- */
.ol-marketing-page .ol-hero-pill {
background: #0A0A0A;
color: #FAFAF8;
border: none;
padding: 6px 14px;
border-radius: 4px;
transform: rotate(-3deg);
display: inline-block;
font-weight: 400;
}

.ol-marketing-page .ol-hero-pill:nth-child(even) {
transform: rotate(1deg);
}

.ol-marketing-page .ol-tag {
background: #0A0A0A;
color: #FAFAF8;
border: none;
padding: 3px 12px;
border-radius: 4px;
transform: rotate(-3deg);
display: inline-block;
}

/* ---- Hide the hero phone-frame image on tablet/mobile -- using the
same 900px breakpoint the two-column grid already collapses at
(see .ol-hero-graphic in the earlier layout CSS), so this doesn't
leave an empty second grid column at in-between widths. Text column
takes the full width once this is hidden. ---- */
@media (max-width: 900px) {
.ol-hero-graphic-image {
display: none;
}
}
/* ============================================================
FOOTER
============================================================ */




/* Footer */
.ol-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 20px 24px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08), 0 -4px 12px rgba(0, 0, 0, 0.06);
margin-top: 40px;
}

@media (max-width: 768px) {
.ol-footer {
display: none;
}
}

.ol-footer-links {
display: flex;
flex-wrap: wrap;
gap: 18px;
}

.ol-footer-link {
font-size: 13px;
color: #444;
text-decoration: none;
}

.ol-footer-link:hover {
text-decoration: underline;
}

.ol-footer-copy {
font-size: 12px;
color: #888;
}
/* ============================================================
LEGAL PAGES (TERMS / PRIVACY)
============================================================ */


.ol-legal-note {
font-size: 11px;
color: #888;
text-align: center;
margin: 0;
}

.ol-legal-page {
max-width: 680px;
margin: 0 auto;
padding: 32px 16px 64px;
font-family: "DM Sans", sans-serif;
color: rgb(34, 34, 34);
}

.ol-legal-header {
border-bottom: 1px solid rgb(34, 34, 34);
padding-bottom: 16px;
margin-bottom: 24px;
}

.ol-legal-title {
font-size: 30px;
font-weight: 700;
font-family: "DM Serif Display", serif;
margin: 0 0 8px;
letter-spacing: -0.01em;
}

.ol-legal-date {
font-size: 13px;
color: #888;
margin: 0;
}

.ol-legal-content h2 {
font-size: 17px;
font-weight: 700;
margin: 32px 0 10px;
}

.ol-legal-content h2:first-of-type {
margin-top: 0;
}

.ol-legal-content p {
font-size: 14px;
color: #222;
line-height: 1.7;
margin: 0 0 14px;
}

.ol-legal-content ul {
margin: 0 0 14px;
padding-left: 20px;
}

.ol-legal-content li {
font-size: 14px;
color: #222;
line-height: 1.7;
margin-bottom: 6px;
}

.ol-legal-content li strong {
color: rgb(34, 34, 34);
}

.ol-legal-content .ol-notice {
margin-bottom: 28px;
}

.ol-legal-content .ol-notice p {
margin: 0;
color: rgb(34, 34, 34);
}
/* ============================================================
FLOATING ADD BUTTON
============================================================ */


.ol-floating-add-btn {
position: fixed;
top: 112px;
left: auto;
bottom: auto;
right: max(15px, calc(50vw - 340px + 15px));
z-index: 249;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgb(34, 34, 34);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
text-decoration: none;
}


.ol-floating-grocery-list-btn {
position: fixed;
top: 112px;
left: auto;
bottom: auto;
right: max(15px, calc(50vw - 340px + 15px));
z-index: 249;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgb(34, 34, 34);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
text-decoration: none;
}



.ol-floating-add-btn:hover {
background: #000;
}

@media (max-width: 768px) {
.ol-floating-add-btn {
left: auto;
bottom: auto;
/* Stacked below the bell: bell's own top offset (15px + safe-area)
+ bell's 36px height + a 12px gap. */
top: calc(env(safe-area-inset-top, 0px) + 15px + 36px + 12px);
right: 15px;
}
}


/* UNUSED
.ol-floating-camera-btn {
  position: fixed;
  right: 20px;
  bottom: 120px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: black;
  border: 1px solid #ece9e2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 99;
}
*/

/* UNUSED
.ol-grocery-item-photo-pending {
width: 56px;
height: 56px;
border-radius: 4px;
border: 1px dashed #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
opacity: 0.5;
flex-shrink: 0;
}
*/



.ol-grocery-item-name {
cursor: text;
}

.ol-grocery-item-edit-input {
font-size: 15px;
padding: 2px 6px;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
flex: 1;
}

.ol-grocery-item-edit-save {
background: rgb(34, 34, 34);
color: #fff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
margin-left: 6px;
cursor: pointer;
}


/* ---- Feedback textarea -- I don't have your exact .ol-field input CSS
to match precisely, so these are reasonable values consistent with
the rest of the app's look (DM Sans, rounded corners, light border),
not a confirmed exact match. Worth a visual check. ---- */
.ol-feedback-textarea {
width: 100%;
font-family: "DM Sans", sans-serif;
font-size: 14px;
padding: 10px 12px;
border: 1px solid #e5e3dd;
border-radius: 8px;
resize: vertical;
box-sizing: border-box;
}

.ol-feedback-textarea:focus {
outline: none;
border-color: rgb(34, 34, 34);
}

.ol-swipe-frame {
overflow: hidden;
position: relative;
aspect-ratio: 9 / 19.5;
display: block;
}

.ol-swipe-track {
display: flex;
width: 200%;
height: 100%;
animation: ol-swipe-cycle 6s ease-in-out infinite;
}

.ol-swipe-track img {
width: 50%;
height: 100%;
flex-shrink: 0;
/* Flex items default to min-width: auto, which refuses to let them
shrink below their own natural content size -- for a large-pixel
screenshot, that silently overrides width: 50% entirely, which is
exactly why both images were bleeding into view at once instead of
cleanly showing one at a time. This forces the intended sizing to
actually apply. */
min-width: 0;
display: block;
/* Crops to fill the phone-shaped window instead of stretching or
overflowing -- object-fit: cover keeps the image's own aspect
ratio intact and just crops whatever doesn't fit, rather than
distorting it or letting it spill past the frame's edges. */
object-fit: cover;
}

@keyframes ol-swipe-cycle {
0%, 40%   { transform: translateX(0%); }
50%, 90%  { transform: translateX(-50%); }
100%      { transform: translateX(0%); }
}

/* ---- Small carousel dots at the bottom, so this reads as an
intentional swipeable UI rather than an unexplained slide. ---- */
.ol-swipe-dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 6px;
}

.ol-swipe-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.ol-swipe-dot-1 {
animation-name: ol-swipe-dot-1-active;
}

.ol-swipe-dot-2 {
animation-name: ol-swipe-dot-2-active;
}

@keyframes ol-swipe-dot-1-active {
0%, 45%  { background: #fff; }
50%, 100% { background: rgba(255, 255, 255, 0.5); }
}

@keyframes ol-swipe-dot-2-active {
0%, 45%  { background: rgba(255, 255, 255, 0.5); }
50%, 95% { background: #fff; }
100%     { background: rgba(255, 255, 255, 0.5); }
}

/* UNUSED
.ol-shake-bell {
display: inline-block;
transform-origin: top center;
animation: ol-bell-shake 4s ease-in-out infinite;
}

@keyframes ol-bell-shake {
0%, 60%, 100% { transform: rotate(0deg); }
62%  { transform: rotate(-12deg); }
64%  { transform: rotate(10deg); }
66%  { transform: rotate(-8deg); }
68%  { transform: rotate(6deg); }
70%  { transform: rotate(-4deg); }
72%  { transform: rotate(0deg); }
}
*/


.ol-viewing-strip {
  width: 100%;
  background: #f7f6f2;
  border-bottom: 1px solid #e5e3dd;
  text-align: center;
  padding: 5px 0;
}

.ol-viewing-strip-link {
  font-size: 11px;
  color: #888;
  text-decoration: none;
}

.ol-viewing-strip-link:hover {
  color: #444;
  text-decoration: underline;
}

.ol-viewing-strip-link strong {
  color: #555;
}


  .ol-notification-status {
    font-size: 12px;
    margin: 4px 0 12px;
    padding: 0;
  }
  
  .ol-notification-status-on {
    color: #1a7a5e;
  }
  
  .ol-notification-status-off {
    color: #888;
  }


  .ol-account-section-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 12px;
  }
  
  .ol-landing-page-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .ol-landing-page-btn {
    font-size: 13px;
    padding: 6px 14px;
    border: 1px solid #e5e3dd;
    border-radius: 20px;
    background: #fff;
    color: #444;
    cursor: pointer;
  }
  
  .ol-landing-page-btn-active {
    background: rgb(34, 34, 34);
    color: #fff;
    border-color: rgb(34, 34, 34);
  }

  .ol-audio-play-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  
  .ol-audio-play-btn .ol-audio-icon-pause {
    display: none;
  }
  
  .ol-audio-play-btn.ol-audio-playing .ol-audio-icon-play {
    display: none;
  }
  
  .ol-audio-play-btn.ol-audio-playing .ol-audio-icon-pause {
    display: inline-block;
  }

  .ol-time-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: inherit;
    padding: 0 16px 0 0;
    cursor: pointer;
  
    /* Custom small dropdown arrow, replacing the browser's default one,
       which looked inconsistent next to the plain date text field. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
  }
  
  .ol-time-select:focus {
    outline: none;
  }

  .ol-type-toggle {
    display: flex;
    background: #f0efe9;
    border-radius: 20px;
    padding: 3px;
    margin-bottom: 24px;
    gap: 3px;
  }
  
  .ol-type-toggle button {
    flex: 1;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: 17px;
    cursor: pointer;
    color: #888;
  }
  
  .ol-type-toggle-active {
    background: black !important;
    color: white !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .ol-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    font-size: 13px;
  }
  
  .ol-breadcrumb-link {
    color: #888;
    text-decoration: none;
  }
  
  .ol-breadcrumb-link:hover {
    color: #444;
    text-decoration: underline;
  }
  
  .ol-breadcrumb-separator {
    color: #ccc;
  }
  
  .ol-breadcrumb-current {
    color: #222;
    font-weight: 500;
  }


  .ol-remind-in-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
  }
  
  .ol-remind-in-label {
    font-size: 14px;
    color: #444;
  }
  
  .ol-remind-in-amount {
    width: 60px;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    padding: 2px 4px;
  }
  
  .ol-remind-in-amount:focus {
    outline: none;
    border-bottom-color: #222;
  }

  .ol-guide-reminder-notice {
    font-size: 12px;
    color: #888;
    margin: 4px 0 8px;
  }

  /* UNUSED BUTTON VARIANTS
  .ol-btn-simple {
    padding: 6px 12px;
    font-size: 12px;
    background-color: #f5f4f0;
    color: #333;
    border: 1px solid #e5e3dd;
    border-radius: 4px;
  }

  .ol-btn-simple:hover {
    background-color: #ebe9e3;
  }

  .ol-text-btn.ol-btn-simple {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
  }

  .ol-text-btn.ol-btn-simple-neutral {
    background-color: #f0efe9;
    color: #333;
    border-color: #e5e3dd;
  }
  .ol-text-btn.ol-btn-simple-neutral:hover {
    background-color: #e5e3dd;
  }

  .ol-text-btn.ol-btn-simple-purple {
    background-color: #f1eaf5;
    color: #6b4a80;
    border-color: #e0d0eb;
  }
  .ol-text-btn.ol-btn-simple-purple:hover {
    background-color: #e6d9ee;
  }

  .ol-text-btn.ol-btn-simple-green {
    background-color: #e8f2e9;
    color: #2d5a32;
    border-color: #cde3cf;
  }
  .ol-text-btn.ol-btn-simple-green:hover {
    background-color: #dcebde;
  }

  .ol-text-btn.ol-btn-simple-red {
    background-color: #f7e9e9;
    color: #8a3535;
    border-color: #edd0d0;
  }
  .ol-text-btn.ol-btn-simple-red:hover {
    background-color: #f0dcdc;
  }
  */

  /* .ol-guide-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  } */
  
  
  
  .ol-monthly-summary-card {
    background: #f8f7f4;
    border: 1px solid #ece9e2;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
  }
  
  .ol-monthly-summary-text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
  }




  .ol-tab-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  
  .ol-tab {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 16px;
    border: 1px solid #e5e3dd;
    background: #fff;
    color: #666;
    cursor: pointer;
  }
  
  .ol-tab-active {
    background: #222;
    color: #fff;
    border-color: #222;
  }
  

  .ol-monthly-summary-recommendation {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ece9e2;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }



  .ol-bottom-nav {
    display: none;
  }
  
  @media (max-width: 767px) {
    /* The old top text-link row is replaced by the bottom nav on
       mobile -- hide it there, keep it for desktop. */
    .ol-nav-links {
      display: none;
    }
  
    .ol-bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background: white;
      border-top: 1px solid #ece9e2;
      padding: 6px 0 max(34px, env(safe-area-inset-bottom));
    }
  
    .ol-bottom-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 12px 0;
      color: #888;
      text-decoration: none;
      font-size: 11px;
    }

    body[class*="ol-font-"] .ol-bottom-nav-item { font-size: calc(11px * var(--ol-content-scale)); }
  
    .ol-bottom-nav-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 30px;
      border-radius: 14px;
    }
  
    .ol-bottom-nav-item-active {
      color: black;
      font-weight: 400;
    }
  
    .ol-bottom-nav-item-active .ol-bottom-nav-icon {
      background: #dedfe4;
    }

    /* Centered add button -- deliberately elevated and visually
       distinct from the 5 regular nav items on either side of it,
       same "raised circle" convention used by Instagram/Threads for
       a primary create action inside a bottom nav. */
    .ol-bottom-nav-add {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
    }

    .ol-bottom-nav-add-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgb(34, 34, 34);
      color: #fff;
      border: 3px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      cursor: pointer;
      margin-top: -24px;
      appearance: none;
      -webkit-appearance: none;
    }

    .ol-bottom-nav-add-menu {
      position: absolute;
      bottom: calc(100% + 24px);
      left: 50%;
      transform: translateX(-50%);
      flex-direction: column;
      gap: 4px;
      background: #fff;
      border: 1px solid #ece9e2;
      border-radius: 14px;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
      padding: 6px;
      min-width: 220px;
      z-index: 41;
    }

    /* Leave room at the bottom of the page so content isn't hidden
       behind the fixed nav. */
    body {
      padding-bottom: 64px;
    }
  }

  /* MORE  */
  .ol-more-list {
    border: 1px solid #ece9e2;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
  }
  
  .ol-more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: #222;
    text-decoration: none;
    border-bottom: 1px solid #ece9e2;
  }
  
  .ol-more-row:last-child {
    border-bottom: none;
  }
  
  .ol-more-row-label {
    flex: 1;
    font-size: 15px;
  }
  
  .ol-more-row-chevron {
    color: #aaa;
    flex-shrink: 0;
  }
  
  .ol-more-fontsize-section {
    border: 1px solid #ece9e2;
    border-radius: 12px;
    padding: 16px;
  }
  
  .ol-more-fontsize-label {
    font-size: 13px;
    color: #888;
    margin: 0 0 10px;
  }
  
  .ol-fontsize-segmented {
    display: flex;
    background: #f0efe9;
    border-radius: 10px;
    padding: 3px;
  }
  
  /* button_to wraps its button in a <form> -- that form, not the button
     itself, is the actual direct child of this flex container, so the
     sizing rule needs to target it directly. */
  .ol-fontsize-segmented form {
    flex: 1;
    margin: 0;
  }
  
  .ol-fontsize-segment {
    width: 100%;
    padding: 8px 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    color: #888;
  }
  
  .ol-fontsize-segment-active {
    background: #fff;
    color: #222;
    font-weight: 400;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  /* BUY LIST */

.ol-form-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ol-form-loading-overlay p {
  font-size: 14px;
  color: #444;
}

.ol-form-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #ece9e2;
  border-top-color: teal;
  border-radius: 50%;
  animation: ol-form-loading-spin 0.8s linear infinite;
}

@keyframes ol-form-loading-spin {
  to { transform: rotate(360deg); }
}

.ol-buy-list-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ol-buy-list-category-pill {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: #444;
  text-decoration: none;
}

.ol-buy-list-category-pill-active {
  background: #222;
  color: #fff;
  border-color: #222;
}

.ol-buy-list-camera-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 48px;
  border: 2px dashed teal;
  border-radius: 20px;
  cursor: pointer;
  color: teal;
  font-size: 16px;
  font-weight: 400;
  width: 100%;
}

.ol-buy-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.ol-buy-list-tile {
  border: 1px solid #ece9e2;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ol-buy-list-tile-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.ol-buy-list-tile-fallback {
  width: 100%;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f5f4f0;
  color: #999;
  font-size: 12px;
}

.ol-buy-list-tile-fallback button {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
}

.ol-buy-list-tile-note {
  font-size: 15px;
  padding: 10px 12px 0;
  margin: 0;
  color: #222;
  font-weight: 500;
}

.ol-buy-list-tile-date {
  font-size: 12px;
  color: #999;
  padding: 4px 12px 0;
  margin: 0;
}

.ol-buy-list-tile-shared-by {
  font-size: 12px;
  color: teal;
  padding: 6px 12px 0;
  margin: 0;
  font-weight: 500;
}

.ol-buy-list-tile-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px 12px;
}

.ol-buy-list-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: teal;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  margin-bottom: 24px;
  box-shadow: 0 3px 10px rgba(0, 128, 128, 0.25);
}

.ol-buy-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #999;
  text-align: center;
  padding: 60px 20px;
}

.ol-buy-list-empty p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 320px;
}

/* UNUSED
.ol-buy-list-divider {
  color: #aaa;
  font-size: 13px;
  margin: 28px 0 16px;
}
*/

.ol-buy-list-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid teal;
  color: teal;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  margin-bottom: 24px;
}

.ol-buy-list-tile-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f5f4f0;
  color: #555;
  border: none;
  cursor: pointer;
}

/* UNUSED
.ol-buy-list-group-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}

.ol-buy-list-btn-caption {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: inherit;
  opacity: 0.7;
  margin-top: 2px;
}
*/

.ol-buy-list-method-card {
  width: 100%;
  max-width: 360px;
  background: #fafaf8;
  border: 1px solid #ece9e2;
  border-radius: 18px;
  padding: 24px 20px;
  margin: 16px 0;
}

.ol-buy-list-quick-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 60vh;
  justify-content: center;
  padding: 20px;
}

.ol-buy-list-quick-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

.ol-buy-list-gallery-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 48px;
  border: 2px dashed #b25213;
  border-radius: 20px;
  cursor: pointer;
  color: teal;
  font-size: 16px;
  font-weight: 400;
  width: 100%;
}

.ol-buy-list-gallery-btn-text {
  display: flex;
  color: #b25213;
  flex-direction: column;
}

.ol-buy-list-link-form {
  width: 100%;
  max-width: 320px;
}

.ol-buy-list-link-form input[type="text"] {
  width: 100%;
}

.ol-buy-list-link-submit {
  border: 1.5px solid navy;
  color: white;
  background: navy;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.ol-buy-list-view-link {
  color: #888;
  margin-top: 8px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}

/* ---- buy list font-scaling ---- */
body[class*="ol-font-"] .ol-buy-list-add-btn { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-empty p { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-tile-note { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-tile-date { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-tile-shared-by { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-tile-actions { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-share-btn { font-size: calc(15px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-camera-btn { font-size: calc(16px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-gallery-btn { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-link-submit { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-buy-list-view-link { font-size: calc(14px * var(--ol-content-scale)); }
/* UNUSED body[class*="ol-font-"] .ol-buy-list-group-label { font-size: calc(12px * var(--ol-content-scale)); } */
/* UNUSED body[class*="ol-font-"] .ol-buy-list-btn-caption { font-size: calc(12px * var(--ol-content-scale)); } */

/* ---- task show page: add to calendar ---- */
.ol-add-to-calendar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid teal;
  color: teal;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  margin-top: 10px;
}

.ol-add-to-calendar-btn:hover {
  background: teal;
  color: #fff;
}

body[class*="ol-font-"] .ol-add-to-calendar-btn { font-size: calc(13px * var(--ol-content-scale)); }