/* ============================================================
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: rgb(244, 244, 244); */
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;
}

.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;
}


.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: 680px;
margin: 0 auto;
font-family: "DM Sans", sans-serif;
color: rgb(34, 34, 34);
padding: 0 16px;
}

.can-hover:hover{
background-color: #f1fdf7;
}

@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: 420px;
padding-top: 48px;
}

/* SHARED APP-PAGE SHELL (used by all index + show pages) */
.ol-app-container {
max-width: 680px;
margin: 0 auto;
padding: 55px 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-app-header-actions {
display: flex;
align-items: center;
gap: 8px;
}

.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;
}

.ol-load-older {
text-align: center;
margin: 24px 16px;
}

/* 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: 600;
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;
}

.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; */
}

.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;
/* margin: 4px 0 0 32px; */
}

.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;
}

.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: 600;
cursor: not-allowed;
opacity: 0.5;
}

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

.ol-custom-scrollbar-track {
position: absolute;
top: 0;
bottom: 0;
right: 2px;
width: 4px;
background: transparent;
pointer-events: none;
}

.ol-custom-scrollbar-thumb {
position: absolute;
top: 0;
right: 0;
width: 4px;
background: rgb(34, 34, 34);
border-radius: 999px;
}

.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;
}

/* No hover/press animation shift — flat, just the border + icon change */
.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;
}  


/* ===================================================================
TODO/JOURNAL REVAMP — everything here is scoped under
.ol-date-group-list (only used in todos.html.erb / journal.html.erb)
so none of it touches notes, guides, or the task show page, even
though several of these class names (.ol-plain-row, .ol-plain-checkbox,
.ol-plain-people, .ol-attachment-badge) are shared globally.
=================================================================== */

.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; }

/* ---- 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)); }
body[class*="ol-font-"] .ol-plain-date { font-size: calc(12px * var(--ol-content-scale)); }
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)); }
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)); }


/* ---- 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: 680px;
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;
}

.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;
}


.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;
}

/* ---- Bell: desktop placement — last item in the nav-links row,
separated by a vertical divider, with its own circular badge ---- */

.ol-nav-bell {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgb(0, 0, 0);
border: 2px solid rgb(0, 0, 0);
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: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
border-radius: 4px;
}


@media (min-width: 768px) {
.ol-nav-dot-panel {
width: 480px;
}
}

.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: 64px;
left: auto;
bottom: auto;
right: max(15px, calc(50vw - 340px + 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;
}
}


/* ---- "More" button + popover (mobile only — see media query) ---- */
.ol-nav-more-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.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;
}

.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;
}

.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 {
position: fixed;
bottom: 0;
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,
.ol-nav-admin {
display: none;
}

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

.ol-nav-letter,
.ol-nav-person {
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;
}

.ol-nav-label {
display: block; /* shown on mobile, under each destination icon */
}

@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;
}

.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(0, 0, 0);
cursor: pointer;
border: 2px solid rgb(0, 0, 0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

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

/* Popover panel — bordered box (acceptable boxed exception for a
popover, same as .ol-nav-more-panel elsewhere in the app). */
.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; }

/* Wider now to fit a 3-column icon grid -- was min-width: 110px for the
old single-column text-link list. Old .ol-nav-more-item rule left
untouched/unused below in case anything else still references it. */
.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: 600;
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;
}

.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;
}
/* ============================================================
LINE-STYLE FORM SYSTEM (notes/todos/journal forms, file inputs)
============================================================ */

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

/* Scoped to :has(input ...)/:has(textarea ...) so a .ol-field-line wrapping
a <select> (e.g. the recurrence dropdown) keeps its label in normal
static flow, completely unaffected — <select> doesn't support
:placeholder-shown at all, so an unconditional rule here would leave a
select's label stuck absolutely-positioned with nothing to ever float it. */
.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;
}

/* Float the label up and shrink it once the field is focused OR has real
content. Requires placeholder=" " (a literal single space) on the
input/textarea — :placeholder-shown only activates when a non-empty
placeholder attribute is present, so this is what lets :has() detect
"is this field empty" at all. */
.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);
}

.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: 600;
padding: 0;
display: inline-flex;
align-items: center;
line-height: 1;
}

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

.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;
}

/* Matches the actual class toggled by category_chips_controller.js */
.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;
}

/* ---- Stat cards: bordered boxes are a deliberate exception here,
same as .ol-auth-card / .ol-family-card / .ol-danger-zone elsewhere —
a stats dashboard reads naturally as cards, unlike list rows. ---- */
.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: 20px;
}

/* Title/description sit directly in the card, no extra wrapper needed —
.ol-field-line (floating label) already handles their styling. */
.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;
}


/* ===================================================================
CONFIRM MODAL SYSTEM — shared overlay/card used by the calendar day
modal (and any future custom-modal, non-destructive-action UI).
Deliberate bordered-card exception to the flat design system, same
category as .ol-auth-card / .ol-nav-dot-panel / .ol-image-overlay.
=================================================================== */

.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)); }
body[class*="ol-font-"] .ol-line-pill { font-size: calc(13px * var(--ol-content-scale)); }
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;
}
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);
}

/* SEARCH SUGGESTIONS */
/* ===================================================================
SEARCH SUGGESTIONS — live typeahead dropdown under the search bar
=================================================================== */

.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
============================================================ */


/* ===================================================================
CATEGORY PICKER — collapsed behind a single trigger button instead
of always showing every category inline (gets messy with 30+
categories). Click opens a popover with categories listed one below
another, plus a field to add a custom one. Pairs with the updated
category_chips_toggle_controller.js (adds toggle/close/outside-click).
=================================================================== */

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

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

/* Vertical list — one category per row, not pills/chips, exactly as
requested ("one below another"). Scrolls internally past a max
height so 30 categories don't blow out the page layout. */
.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;
}

/* literal "category-chip-active" — toggled by category_chips_toggle_controller.js,
reused here on the row instead of a pill-shaped chip */
.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: 13px;
font-family: "DM Sans", sans-serif;
padding: 4px 0;
}

/* Category tag -- single neutral color, matching the app's black/white
palette rather than introducing standalone accent colors. */
.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)); }
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)); }
body[class*="ol-font-"] .ol-category-custom input { 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-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;
}

.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;
}

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

.ol-task-image {
margin-top: 8px;
/* padding: 0 16px; */
}

/* 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;
}

.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: 8px;
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;
}

.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);
}

/* ===================================================================
CALENDAR DAY MODAL — shown when tapping a populated day cell.
=================================================================== */

/* .ol-calendar-cell-link is now a <button> instead of an <a> for
populated days — reset default button styles so it looks identical
to how the link version rendered. */
.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-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;
}


.ol-date-group-heading-today {
color: #178272;
font-weight: 600;
}


/*  */


/* 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-date-group-heading-urgent {
color: #cd3e3e;
}

.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)); }
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(11px * 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)); }


.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: 15px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}

.ol-sticky-date-badge-weekday {
font-size: 9px;
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;
}

.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: 600;
letter-spacing: 0.04em;
margin-bottom: 8px;
color: #282828;
}

.ol-note-heading {
font-size: 16px;
font-weight: 500;
color: #888;
padding: 8px 0;
/* margin-left: 4px; */
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;
}

.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; }
body[class*="ol-font-"] .ol-note-category-heading { font-size: calc(18px * var(--ol-content-scale)); }
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 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-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;
}

/* GUIDE SHOW page */
.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-guided-mode-bar {
/* display: flex; */
/* align-items: center; */
/* justify-content: space-between; */
/* flex-wrap: wrap; */
/* gap: 10px; */
margin-bottom: 16px;
}

.ol-guided-mode-controls {
display: flex;
align-items: center;
gap: 10px;
}

.ol-guided-mode-counter {
white-space: nowrap;
}

.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(34, 34, 34);
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;
}

.ol-guided-mode-done {
text-align: center;
padding: 24px 0;
border: 1px solid rgb(34, 34, 34);
border-radius: 4px;
margin-top: 12px;
}
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: 600;
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-media-section {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}

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

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

.ol-media-preview-name {
font-size: 13px;
font-weight: 600;
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;
border: 1px solid rgb(34, 34, 34);
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;
}

/* ---- Media upload groups (line-style, hairline-separated — no boxes) ---- */
.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);
}

.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;
}

.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;
}

.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;
}

/* ---- File upload zone (label wraps a hidden input) ---- */
.ol-file-zone {
display: block;
border: 1px dashed #ccc;
border-radius: 4px;
padding: 14px;
text-align: center;
cursor: pointer;
}

/* literal "has-file" — toggled by file_upload_controller.js */
.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 ---- */
.ol-voice-unsupported {
font-size: 12px;
color: #666;
line-height: 1.5;
margin: 0 0 12px;
}

.ol-voice-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 8px;
}

.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;
}

/* literal "recording-active" — toggled by voice_recorder_controller.js */
.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;
}

.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 #000;
border-radius: 999px;
padding: 7px 14px;
font-size: 13px;
font-family: "DM Sans", sans-serif;
background: none;
cursor: pointer;
color: #000;
}

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

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

/* ===================================================================
Attachment indicator badges — small icon badges on todo/journal rows
showing whether a pdf, voice recording, or video is attached, without
needing to open the row or the task show page to find out.
=================================================================== */

.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)); }
body[class*="ol-font-"] .ol-media-title { font-size: calc(14px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-media-subtitle { font-size: calc(12px * var(--ol-content-scale)); }
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)); }
body[class*="ol-font-"] .ol-file-zone-btn { font-size: calc(13px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-file-zone-selected { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-voice-unsupported { font-size: calc(12px * var(--ol-content-scale)); }
body[class*="ol-font-"] .ol-voice-btn { font-size: calc(13px * var(--ol-content-scale)); }
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;
}

.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: 600;
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; /* safety net on narrower screens — page itself stays at ol-page-wide's max-width */
}

.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: 600;
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)); }
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;
font-weight: 700;
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: 600;
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-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;
}

.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-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;
}

.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.6;
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);
}

.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: 600;
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: 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;
}

.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);
}

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

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

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

.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);
}

.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: 18px;
}

.ol-section-month-label {
font-size: 20px;
font-weight: 600;
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: 12px;
}

@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)); }
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)); }



/* ---- 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;
}



/*  */

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


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

.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: 680px;
}

.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: 600;
}

.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;
}
}



.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); }
}

.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;
  }