/* BGW Diary — reader side.
   Uses the site's own tokens so the journal belongs to the site rather than looking
   like a bolted-on app. Buttons follow the house rule: rectangular, radius 8, never
   pills, and fields get a 1px border on focus with no glow ring. */

/* Bricks hands a plain page a 1100px content column with auto margins. Every other page
   on the site runs at 1180, so the journal was sitting 40px inside them on each edge.
   This lines it up with Articles rather than leaving it looking narrower than the site. */
body.bgwd-page #brx-content {
	width: 100% !important;
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.bgwd-wrap { max-width: 1180px; margin: 0 auto; }
.bgwd-root { min-height: 60vh; }
.bgwd-boot { padding: 40px 0; color: var(--text2, #4a443d); font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; }

.bgwd-note {
	font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; line-height: 1.6;
	padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line2, rgba(26,23,20,.12));
	background: var(--surface, rgba(26,23,20,.04)); color: var(--text, #1a1714);
}
.bgwd-note.bad { border-color: rgba(155,47,44,.3); background: rgba(155,47,44,.06); }

/* ---------- gate + setup cards ---------- */
.bgwd-gate, .bgwd-card {
	background: var(--surface, rgba(26,23,20,.04));
	border: 1px solid var(--line2, rgba(26,23,20,.12));
	border-radius: 14px; padding: 30px;
	font-family: 'Inter', -apple-system, sans-serif;
}
.bgwd-setup { max-width: 620px; margin: 30px auto; }
.bgwd-card h2 {
	font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 600;
	margin: 0 0 10px; color: var(--text, #1a1714);
}
.bgwd-lead { font-size: 15px; line-height: 1.65; color: var(--text2, #4a443d); margin: 0 0 20px; }

.bgwd-fields { display: grid; gap: 14px; margin-bottom: 18px; }
.bgwd-fields label {
	display: block; font-size: 13px; font-weight: 600; color: var(--text, #1a1714);
}
.bgwd-fields input {
	display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font-size: 15px;
	border: 1px solid var(--line2, rgba(26,23,20,.18)); border-radius: 8px;
	background: var(--bg, #faf7f2); color: var(--text, #1a1714); font-family: inherit;
}
.bgwd-fields input:focus { outline: 0; border-color: var(--accent, #9b2f2c); box-shadow: none; }

.bgwd-warn {
	font-size: 13.5px; line-height: 1.6; padding: 15px 17px; border-radius: 10px;
	background: rgba(155,47,44,.06); border: 1px solid rgba(155,47,44,.22);
	color: var(--text, #1a1714); margin-bottom: 20px;
}
.bgwd-warn b { display: block; margin-bottom: 5px; }

.bgwd-code {
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 19px; letter-spacing: .06em;
	text-align: center; padding: 20px; border-radius: 10px; word-break: break-all;
	background: var(--bg, #faf7f2); border: 1px dashed var(--line2, rgba(26,23,20,.3));
	color: var(--text, #1a1714); margin-bottom: 16px;
}
.bgwd-ack { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; margin: 16px 0 20px; color: var(--text2, #4a443d); }
.bgwd-ack input { margin-top: 3px; }
.bgwd-msg { font-size: 13.5px; color: var(--accent, #9b2f2c); margin-top: 12px; min-height: 18px; }
.bgwd-row { display: flex; gap: 10px; }

/* ---------- buttons ---------- */
.bgwd-btn {
	display: inline-block; font-family: 'Inter', -apple-system, sans-serif; font-size: 14px;
	font-weight: 600; padding: 11px 20px; border-radius: 8px; cursor: pointer;
	border: 1px solid var(--line2, rgba(26,23,20,.18)); background: var(--bg, #faf7f2);
	color: var(--text, #1a1714);
}
.bgwd-btn-primary { background: var(--accent, #9b2f2c); border-color: var(--accent, #9b2f2c); color: #fff; }
.bgwd-btn:disabled { opacity: .5; cursor: default; }
.bgwd-link {
	background: none; border: 0; padding: 8px 0; cursor: pointer; display: block;
	font-family: 'Inter', -apple-system, sans-serif; font-size: 13.5px; font-weight: 600;
	color: var(--accent, #9b2f2c);
}
.bgwd-icon {
	background: none; border: 1px solid var(--line2, rgba(26,23,20,.18)); border-radius: 8px;
	width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: 16px;
	color: var(--text2, #4a443d);
}

/* ---------- the three column app ---------- */
.bgwd-app {
	display: grid; grid-template-columns: 190px minmax(0, 1fr) 320px; gap: 20px;
	font-family: 'Inter', -apple-system, sans-serif;
	/* The three columns match each other, and the row grows with whatever is in it up
	   to a ceiling. A fixed height made a short screen like Today as tall as the tallest
	   one; no ceiling at all let a calendar running to next September drag the whole
	   page down. This does both: size to the contents, stop at the window. */
	align-items: stretch;
	min-height: 460px;
}
/* Match the breathing room every other page leaves above the newsletter band. */
.bgwd-wrap { margin-bottom: 60px; }
.bgwd-side, .bgwd-list, .bgwd-editor {
	background: var(--surface, rgba(26,23,20,.04));
	border: 1px solid var(--line2, rgba(26,23,20,.12));
	border-radius: 14px; padding: 18px;
}
.bgwd-editor { padding: 22px 24px; display: flex; flex-direction: column; }
/* All three are columns, and none of them may grow past the frame. What scrolls is
   the panel inside, never the page. */
.bgwd-side, .bgwd-list { display: flex; flex-direction: column; }
.bgwd-side, .bgwd-list, .bgwd-editor { min-height: 0; overflow: hidden; }
.bgwd-side { overflow-y: auto; }

/* The ceiling lives on the panels that scroll, not on the frame around them. A cap on
   the frame does not hold a grid row back; the row sizes to its contents and the frame
   simply overflows, which is how a calendar out to next September ended up making all
   three columns four thousand pixels tall. Cap what scrolls and the row behaves. */
.bgwd-items, .bgwd-calscroll, .bgwd-scroll, .bgwd-wide, .bgwdp, .bgwd-mw-grid, .bgwd-tplnav, .bgwd-tplpane {
	max-height: calc(100vh - 330px);
}

.bgwd-side-h, .bgwd-list-h {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent, #9b2f2c); margin-bottom: 14px;
}
.bgwd-jlist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.bgwd-j {
	text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px;
	font-size: 14px; color: var(--text, #1a1714); cursor: pointer; font-family: inherit;
}
.bgwd-j.on { background: var(--bg, #faf7f2); font-weight: 600; }
.bgwd-lock { margin-top: 6px; }

.bgwd-items { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.bgwd-item {
	display: block; width: 100%; text-align: left; background: none; border: 0;
	border-radius: 8px; padding: 10px; cursor: pointer; font-family: inherit;
}
.bgwd-item.on { background: var(--bg, #faf7f2); }
.bgwd-item .d { display: block; font-size: 11.5px; color: var(--text2, #4a443d); margin-bottom: 2px; }
.bgwd-item .t { display: block; font-size: 14px; color: var(--text, #1a1714); line-height: 1.35; }
.bgwd-empty { font-size: 14px; color: var(--text2, #4a443d); line-height: 1.6; }

.bgwd-ed-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bgwd-date { font-size: 12.5px; color: var(--text2, #4a443d); }
.bgwd-status { font-size: 12px; color: var(--text2, #4a443d); margin-left: auto; }
.bgwd-del { color: var(--accent, #9b2f2c); padding: 0; }

.bgwd-title {
	width: 100%; border: 0; background: none; font-family: 'Fraunces', Georgia, serif;
	font-size: 24px; font-weight: 600; color: var(--text, #1a1714); padding: 0 0 10px;
}
.bgwd-title:focus { outline: 0; }
.bgwd-body {
	width: 100%; flex: 1; min-height: 46vh; border: 0; background: none; resize: vertical;
	font-family: Georgia, 'Fraunces', serif; font-size: 17px; line-height: 1.75;
	color: var(--text, #1a1714); padding: 0;
}
.bgwd-body:focus { outline: 0; }

@media (max-width: 940px) {
	/* Stacked, the page scrolls and each panel is as tall as it needs to be. */
	.bgwd-app { grid-template-columns: 1fr; height: auto; min-height: 0; }
	.bgwd-side, .bgwd-list, .bgwd-editor { overflow: visible; }
	.bgwd-items, .bgwd-calscroll, .bgwd-scroll, .bgwd-wide, .bgwdp, .bgwd-mw-grid, .bgwd-tplnav, .bgwd-tplpane {
		flex: 0 0 auto; max-height: none; overflow: visible;
	}
	.bgwd-body { min-height: 40vh; }
}

/* ============================================================================
   Phase 2 and 3: safety, search, tags, calendar, media, export.
   ============================================================================ */

/* Quick exit. Always reachable, never dramatic. */
.bgwd-exit { position: fixed; right: 18px; bottom: 18px; z-index: 40; }
.bgwd-exit-btn {
	font-family: 'Inter', -apple-system, sans-serif; font-size: 13px; font-weight: 600;
	padding: 10px 16px; border-radius: 8px; cursor: pointer; color: #fff;
	background: #2a1f1c; border: 1px solid #2a1f1c; box-shadow: 0 3px 14px rgba(0,0,0,.22);
}
.bgwd-exit-btn:hover { background: var(--accent, #9b2f2c); border-color: var(--accent, #9b2f2c); }

.bgwd-jrow { display: flex; align-items: center; gap: 4px; }
.bgwd-jrow .bgwd-j { flex: 1; }
.bgwd-jmenu {
	background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px;
	color: var(--text2, #4a443d); font-size: 15px; line-height: 1;
}
.bgwd-jmenu:hover { background: var(--bg, #faf7f2); }

.bgwd-streak {
	margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
	background: var(--bg, #faf7f2); border: 1px solid var(--line2, rgba(26,23,20,.12));
}
.bgwd-streak b { display: block; font-size: 17px; color: var(--text, #1a1714); }
.bgwd-streak span { display: block; font-size: 12px; color: var(--text2, #4a443d); margin-top: 2px; }

.bgwd-tools { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line2, rgba(26,23,20,.12)); }
.bgwd-danger { color: #b3252a; }

/* Search and tags. Both run entirely in this tab. */
.bgwd-search {
	width: 100%; margin-bottom: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit;
	border: 1px solid var(--line2, rgba(26,23,20,.18)); border-radius: 8px;
	background: var(--bg, #faf7f2); color: var(--text, #1a1714);
}
.bgwd-search:focus { outline: 0; border-color: var(--accent, #9b2f2c); box-shadow: none; }
.bgwd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.bgwd-tag {
	font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; cursor: pointer;
	border-radius: 8px; border: 1px solid var(--line2, rgba(26,23,20,.16));
	background: none; color: var(--text2, #4a443d);
}
.bgwd-tag.on { background: var(--accent, #9b2f2c); border-color: var(--accent, #9b2f2c); color: #fff; }

.bgwd-star { font-style: normal; color: var(--accent, #9b2f2c); margin-left: 6px; font-size: 11px; }
.bgwd-favbtn { color: var(--text2, #4a443d); }
.bgwd-favbtn.on { color: var(--accent, #9b2f2c); border-color: var(--accent, #9b2f2c); }

/* Calendar */
.bgwd-cal-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text, #1a1714); }
.bgwd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bgwd-cal-dow { font-size: 10.5px; text-align: center; color: var(--text2, #4a443d); padding-bottom: 4px; }
.bgwd-cal-pad { display: block; }
/* Centre the date in its cell. As a plain button it picked up the theme's button
   padding, which shoved the number to one side of the highlighted square. */
.bgwd-cal-day {
	aspect-ratio: 1; border: 0; border-radius: 7px; cursor: default; font-family: inherit;
	font-size: 12px; background: none; color: var(--text2, #4a443d);
	display: flex; align-items: center; justify-content: center;
	padding: 0 !important; margin: 0; line-height: 1; text-align: center;
	box-sizing: border-box; min-width: 0; width: 100%;
}
.bgwd-cal-dow, .bgwd-cal-pad { display: flex; align-items: center; justify-content: center; }
.bgwd-cal-day.has {
	background: var(--accent, #9b2f2c); color: #fff; font-weight: 600; cursor: pointer;
}

/* The daily prompt, shown only when nothing is open. */
.bgwd-prompt {
	display: flex; flex-direction: column;
	margin-top: 22px; padding: 18px 20px; border-radius: 12px;
	background: var(--bg, #faf7f2); border: 1px solid var(--line2, rgba(26,23,20,.12));
}
.bgwd-prompt .l {
	display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--accent, #9b2f2c); margin-bottom: 8px;
}
/* The question keeps two lines of room whether it needs them or not, so a short one
   does not pull the card up and drag the three links with it. Every question in the
   packs fits two lines at this width; the space is reserved, not filled. */
.bgwd-prompt p {
	flex: 1 1 auto; min-height: 3em;
	margin: 0 0 14px; font-family: 'Fraunces', Georgia, serif; font-size: 18px;
	line-height: 1.5; color: var(--text, #1a1714);
}
.bgwd-prompt .bgwdj-prow { margin-top: auto; }

/* Editor footer and attachments */
.bgwd-ed-foot {
	display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 14px;
	border-top: 1px solid var(--line2, rgba(26,23,20,.12)); flex-wrap: wrap;
}
.bgwd-count { font-size: 12px; color: var(--text2, #4a443d); margin-right: auto; }
.bgwd-ed-foot .bgwd-btn { padding: 8px 14px; font-size: 13px; }
.bgwd-ed-foot .bgwd-btn.rec { background: var(--accent, #9b2f2c); border-color: var(--accent, #9b2f2c); color: #fff; }

.bgwd-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bgwd-m { position: relative; }
.bgwd-m img {
	width: 120px; height: 120px; object-fit: cover; border-radius: 10px; display: block;
	border: 1px solid var(--line2, rgba(26,23,20,.12));
}
.bgwd-m audio { width: 260px; }
.bgwd-mx {
	position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
	border: 1px solid var(--line2, rgba(26,23,20,.2)); background: var(--bg, #faf7f2);
	color: var(--text, #1a1714); cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}

/* Modals */
.bgwd-modal {
	position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
	justify-content: center; padding: 20px; background: rgba(26,23,20,.55);
}
.bgwd-modal .bgwd-card { max-width: 520px; width: 100%; max-height: 86vh; overflow-y: auto; }
.bgwd-danger-btn { background: #b3252a; border-color: #b3252a; color: #fff; }

@media (max-width: 940px) {
	.bgwd-exit { right: 12px; bottom: 12px; }
	.bgwd-m img { width: 96px; height: 96px; }
	.bgwd-m audio { width: 100%; }
}

/* ============================================================================
   Scrollbars. One look everywhere something scrolls: a faint lane that is always
   reserved, so nothing shifts sideways the moment the content grows, and a thumb
   light enough that it never competes with what is being read.
   ============================================================================ */
.bgwd-scroll,
.bgwds-body, .bgwds-nav,
.bgwdg-pane, .bgwdg-nav,
.bgwd-calscroll, .bgwd-items, .bgwd-mw-grid, .bgwdp, .bgwd-wide,
.bgwd-modal .bgwd-card {
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(26,23,20,.16) transparent;
}
.bgwd-scroll::-webkit-scrollbar,
.bgwds-body::-webkit-scrollbar, .bgwds-nav::-webkit-scrollbar,
.bgwdg-pane::-webkit-scrollbar, .bgwdg-nav::-webkit-scrollbar,
.bgwd-calscroll::-webkit-scrollbar, .bgwd-items::-webkit-scrollbar, .bgwd-mw-grid::-webkit-scrollbar, .bgwdp::-webkit-scrollbar, .bgwd-wide::-webkit-scrollbar,
.bgwd-modal .bgwd-card::-webkit-scrollbar { width: 11px; }

.bgwd-scroll::-webkit-scrollbar-track,
.bgwds-body::-webkit-scrollbar-track, .bgwds-nav::-webkit-scrollbar-track,
.bgwdg-pane::-webkit-scrollbar-track, .bgwdg-nav::-webkit-scrollbar-track,
.bgwd-calscroll::-webkit-scrollbar-track, .bgwd-items::-webkit-scrollbar-track, .bgwd-mw-grid::-webkit-scrollbar-track, .bgwdp::-webkit-scrollbar-track, .bgwd-wide::-webkit-scrollbar-track,
.bgwd-modal .bgwd-card::-webkit-scrollbar-track {
	background: rgba(26,23,20,.045);
	background: color-mix(in srgb, currentColor 5%, transparent);
	border-radius: 8px; margin: 6px 0;
}
.bgwd-scroll::-webkit-scrollbar-thumb,
.bgwds-body::-webkit-scrollbar-thumb, .bgwds-nav::-webkit-scrollbar-thumb,
.bgwdg-pane::-webkit-scrollbar-thumb, .bgwdg-nav::-webkit-scrollbar-thumb,
.bgwd-calscroll::-webkit-scrollbar-thumb, .bgwd-items::-webkit-scrollbar-thumb, .bgwd-mw-grid::-webkit-scrollbar-thumb, .bgwdp::-webkit-scrollbar-thumb, .bgwd-wide::-webkit-scrollbar-thumb,
.bgwd-modal .bgwd-card::-webkit-scrollbar-thumb {
	background: rgba(26,23,20,.18);
	background: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 8px; border: 3px solid transparent; background-clip: padding-box;
}
.bgwd-scroll::-webkit-scrollbar-thumb:hover,
.bgwds-body::-webkit-scrollbar-thumb:hover, .bgwds-nav::-webkit-scrollbar-thumb:hover,
.bgwdg-pane::-webkit-scrollbar-thumb:hover, .bgwdg-nav::-webkit-scrollbar-thumb:hover,
.bgwd-calscroll::-webkit-scrollbar-thumb:hover, .bgwd-items::-webkit-scrollbar-thumb:hover,
.bgwd-mw-grid::-webkit-scrollbar-thumb:hover, .bgwdp::-webkit-scrollbar-thumb:hover, .bgwd-wide::-webkit-scrollbar-thumb:hover,
.bgwd-modal .bgwd-card::-webkit-scrollbar-thumb:hover {
	background: rgba(26,23,20,.3);
	background: color-mix(in srgb, currentColor 30%, transparent);
	background-clip: padding-box;
}

/* ---- narrowing the list by date and by what an entry holds ---- */
.bgwd-filters { padding: 0 12px 8px; }
.bgwd-filt-toggle {
	font-size: 12px; color: var(--text2, #4a443d); cursor: pointer;
}
.bgwd-filt-toggle:hover, .bgwd-filt-toggle.on { color: var(--accent, #9b2f2c); }
.bgwd-filt-toggle.on { font-weight: 600; }
.bgwd-filt-body { display: flex; flex-direction: column; gap: 8px; padding-top: 9px; }
.bgwd-filt-row {
	display: flex; align-items: center; gap: 8px; font-size: 12px;
	color: var(--text2, #4a443d);
}
.bgwd-filt-row > span:first-child { flex: 0 0 52px; }
.bgwd-filt-date {
	flex: 1; width: auto !important; font-family: inherit; font-size: 12px;
	padding: 5px 7px; border-radius: 7px; margin: 0; height: auto;
	border: 1px solid var(--line2, rgba(26,23,20,.18));
	background: var(--bg, #faf7f2); color: var(--text, #1a1714);
}
.bgwd-filt-date:focus { outline: 0; border-color: var(--accent, #9b2f2c); box-shadow: none; }
.bgwd-filt-kinds { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bgwd-filt-kind { cursor: pointer; font-size: 12px; color: var(--text2, #4a443d); }
.bgwd-filt-kind:hover { color: var(--text, #1a1714); }
.bgwd-filt-kind.on { color: var(--accent, #9b2f2c); font-weight: 600; }
.bgwd-filt-clear { align-self: flex-start; font-size: 12px; color: var(--accent, #9b2f2c); cursor: pointer; }