/* Inter is self-hosted (SIL OFL 1.1, see /fonts/Inter-LICENSE.txt). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Note typography follows telegra.ph, which uses Charter ITC Pro and Kievit Pro.
   Those are commercial fonts, so Takeaway self-hosts close, openly licensed
   substitutes (SIL OFL 1.1, see /fonts/*-LICENSE.txt): Charis SIL, derived
   from Bitstream Charter, and Source Sans 3, a humanist sans like Kievit. */
@font-face {
  font-family: "Charis SIL";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/charis-sil-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Charis SIL";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/charis-sil-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Charis SIL";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/charis-sil-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Charis SIL";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/charis-sil-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Charis SIL";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/charis-sil-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Charis SIL";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/charis-sil-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Charis SIL";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/charis-sil-latin-ext-700-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Charis SIL";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/charis-sil-latin-700-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-sans-3-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-sans-3-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-sans-3-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-sans-3-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --text: #1d1d1f;
  --muted: #86868b;
  --faint: #f4f4f5;
  --line: #ececee;
  --accent: #2f6fde;
  --public: #1f7a4d;
  --public-bg: #e8f5ee;
  --danger: #b42318;
  --bg: #ffffff;
  /* Note text (reading page and visual editor) follows telegra.ph's
     core.css; Inter stays for the interface (dashboard, bars, buttons). */
  --font-body: "Charis SIL", Georgia, Cambria, "Times New Roman", serif;
  --font-heading: "Source Sans 3", "Lucida Grande", Arial, sans-serif;
  --font-code: Menlo, "Courier New", Courier, monospace;
  --ink: rgba(0, 0, 0, .8);
  --byline: #79828b;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
/* Reserve the scrollbar's space so the centred column doesn't shift sideways
   between a short page (no scrollbar) and a long one. */
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); padding-bottom: var(--footer-h); }
/* The footer covers the bottom of the window, so scrolling (to a focused
   field, a link target, or the caret while typing) stops short of it. */
html { scroll-padding-bottom: var(--footer-h); }
:root { --footer-h: 40px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.25rem 6rem; }
/* The dashboard shares the note pages' 732px column and 21px margins, so the
   logo in the top bar sits in the same place on every page. */
.page.wide { max-width: 732px; padding: 21px 21px 6rem; }
.page.center { text-align: center; padding-top: 22vh; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* The note page and the editor share this bar: fixed height, same column,
   so the text below never moves when switching between them. */
.topbar {
  /* Sticky, so Edit and Save stay in reach anywhere in a long note (like
     telegra.ph's fixed buttons) while keeping their place in the layout. */
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  max-width: 732px; height: 56px; margin: 0 auto; padding: 0 21px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem;
}
/* Visitors' bar holds only the logo; it keeps the height (so the note sits
   where it does for the owner) but scrolls away with the page. */
.topbar.static { position: static; justify-content: flex-start; }
.topbar a { color: var(--muted); }
.topbar a:hover { color: var(--text); text-decoration: none; }
.bar-right { display: flex; align-items: center; gap: 1rem; }
/* Centre the logo the same way whether or not it sits in a wrapper. */
.topbar > span { display: flex; align-items: center; }
.link-button {
  font: inherit; font-size: .9rem; font-weight: 400; color: var(--muted); background: none;
  border: 0; border-radius: 0; padding: 0; cursor: pointer;
}
.link-button:hover { color: var(--text); opacity: 1; }
/* Save progress and errors while editing in place. It lives in the fixed
   height top bar, so showing a message never moves the text. */
.status { color: var(--muted); font-size: .85rem; }
.status.error { color: var(--danger); }
/* A passing message from the editor, just below the bar and over the text,
   so showing it never moves anything. */
.bar-notice {
  position: absolute; top: calc(100% - 4px); right: 21px; max-width: min(24rem, calc(100% - 42px)); margin: 0;
  padding: .45rem .75rem; border-radius: 8px; background: #fdecea; color: var(--danger);
  font-size: .85rem; line-height: 1.35; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.badge {
  display: inline-block; font-size: .75rem; font-weight: 500; line-height: 1;
  padding: .3rem .5rem; border-radius: 999px; background: var(--faint); color: var(--muted);
}
.badge-public { background: var(--public-bg); color: var(--public); }

/* Fixed to the bottom of the window; the page scrolls underneath it. Under
   the top bar and Quill's link tooltip (z-index 20 and 10). */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: var(--footer-h); background: var(--bg);
}
.site-footer p {
  max-width: 732px; margin: 0 auto; padding: 0 21px;
  line-height: var(--footer-h); color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center;
}

/* Logo: the mark plus the wordmark, left aligned. */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand:hover { text-decoration: none; opacity: .85; }
.brand img { display: block; width: auto; }
.brand { gap: 9px; }
.brand-mark { height: 40px; }
/* The script wordmark looks smaller than its box; at 32px its T and the
   tail of its y roughly span the mark's height. */
.brand-word { height: 32px; }

h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 0 0 .5rem; }

/* ---- Note page, matching telegra.ph ------------------------------------
   A 732px column where each block carries its own 21px side margins (so
   code blocks run full width and quote bars sit in the margin), giving a
   690px text measure. Sizes and spacing are telegra.ph's own values. */
.page.note, .page.editor { max-width: 732px; padding: 0 0 6rem; }
.note-head h1 {
  font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 34px;
  letter-spacing: 0; color: var(--ink); margin: 21px 21px 12px; overflow-wrap: break-word;
}
.note-head .meta { font-family: var(--font-heading); font-size: 15px; line-height: 18px; color: var(--byline); margin: 12px 21px; }
.note-head .meta a { color: var(--byline); }

.prose {
  font-family: var(--font-body); font-size: 18px; line-height: 1.58; color: var(--ink); overflow-wrap: break-word;
  /* Charis SIL runs ~2% wider than Charter; this brings line breaks in line
     with telegra.ph's (18 of 20 in the reference sample, up from 12). */
  letter-spacing: -.01em;
}
.prose p { margin: 0 21px 12px; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-heading); font-weight: 700; font-style: normal; letter-spacing: 0; color: var(--ink);
}
/* telegra.ph has two heading levels: h3 (28px) and h4 (24px). Pasted h1/h2
   become its h3 and h3–h6 its h4, so map Markdown #/## and ###+ the same way. */
.prose h1, .prose h2 { font-size: 28px; line-height: 34px; margin: 18px 21px 9px; }
.prose h3, .prose h4, .prose h5, .prose h6 { font-size: 24px; line-height: 30px; margin: 18px 21px 7px; }
.prose a { color: inherit; text-decoration: none; border-bottom: .1em solid rgba(0, 0, 0, .7); }
.prose blockquote {
  font-style: italic; margin: 18px 21px 16px 0; padding-left: 15px; border-left: 3px solid #000;
}
.prose blockquote > p { margin: 0; }
.prose blockquote > p + p { margin-top: 12px; }
.prose ul, .prose ol { margin: 21px; padding: 0; }
.prose li { margin: 0 0 14px 30px; padding: 0; position: relative; }
.prose ul { list-style: none; }
.prose ul > li::before {
  content: "\2022"; position: absolute; box-sizing: border-box; width: 78px; margin-left: -78px;
  padding: 1px 15px 0 0; text-align: end;
}
/* Native numbering, so Markdown lists that start at 3 still do. */
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-variant-numeric: lining-nums; }
.prose ol > li { padding-left: 0; }
.prose li > ul, .prose li > ol { margin: 14px 0 0; }
.prose li > p { margin: 0; }
.prose li > p + p { margin-top: 12px; }
.prose code, .prose pre { font-family: var(--font-code); font-size: 16px; letter-spacing: 0; background: #f5f8fc; }
.prose code { padding: 1px 3px; }
.prose pre { margin: 14px 0; padding: 7px 21px; white-space: pre-wrap; overflow-wrap: break-word; }
.prose pre code { padding: 0; background: none; font-size: inherit; }
.prose hr { width: 50%; margin: 30px auto; border: 0; border-top: 1px solid #c9cdd1; }
.prose img { max-width: 100%; height: auto; vertical-align: top; }
.prose table { margin: 0 21px 12px; width: calc(100% - 42px); border-collapse: collapse; font-size: .95em; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: .45em .8em .45em 0; border-bottom: 1px solid var(--line); }

.dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.note-link { color: var(--text); font-weight: 500; font-size: 1.05rem; }
.note-meta { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.empty { padding: 2rem 0; }
.dash-head + .notice { margin: -.5rem 0 1rem; }
/* Muted until you aim at it, so a row doesn't shout "delete". */
.row-delete { color: var(--muted); }
.row-delete:hover, .row-delete:focus-visible { color: var(--danger); }

/* Delete confirmation page (used without script) */
.confirm h1 { overflow-wrap: break-word; }
.confirm-actions { display: flex; align-items: baseline; gap: 1rem; margin-top: 1.5rem; }

.button, button {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  background: var(--text); color: #fff; border: 0; border-radius: 8px; padding: .5rem .9rem;
}
.button:hover, button:hover { text-decoration: none; opacity: .88; }
button.danger { background: var(--danger); }

/* ---- Editor: same column and type as the note page ---------------------- */
.editor .error, .editor .notice { margin: 0 21px 12px; }
.visibility select {
  font: inherit; font-size: .9rem; color: var(--text); background: var(--faint);
  border: 0; border-radius: 8px; padding: .45rem .6rem;
}
.title-input, .body-input {
  display: block; border: 0; outline: none; background: transparent; color: var(--ink); padding: 0;
}
/* The title grows with its text without script: a hidden copy of the text
   (data-value, kept in sync by editor.js) sizes the grid cell. Its height is
   right from the first paint, so the body below doesn't jump. */
.title-wrap { display: grid; margin: 21px 21px 12px; }
.title-wrap::after { content: attr(data-value) " "; visibility: hidden; white-space: pre-wrap; }
.title-wrap > .title-input, .title-wrap::after {
  grid-area: 1 / 1; min-width: 0; margin: 0; overflow-wrap: break-word;
  font-family: var(--font-heading); font-size: 32px; font-weight: 700; line-height: 34px; letter-spacing: 0;
}
.title-input { width: 100%; resize: none; overflow: hidden; }
.body-input {
  width: calc(100% - 42px); margin: 0 21px; color: var(--text);
  font: 1rem/1.7 ui-monospace, "SF Mono", Consolas, monospace; min-height: 60vh; resize: vertical;
}
.body-input[hidden] { display: none; }
.title-input::placeholder, .body-input::placeholder { color: rgba(0, 0, 0, .44); }
.notice { color: var(--muted); background: var(--faint); border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; }

/* Visual editor (Quill, bubble theme). It carries the .prose class, so the
   rules above style its contents; these only undo Quill's own defaults
   (which otherwise win on specificity) and restyle its list and code markup. */
.visual-editor.ql-container { font-family: var(--font-body); font-size: 18px; height: auto; }
.visual-editor .ql-editor { padding: 0; min-height: 60vh; line-height: 1.58; overflow-y: visible; }
.visual-editor .ql-editor.ql-blank::before { left: 21px; right: 21px; font-style: normal; color: rgba(0, 0, 0, .44); }
.visual-editor .ql-editor blockquote {
  font-style: italic; margin: 18px 21px 16px 0; padding-left: 15px; border-left: 3px solid #000;
}
.visual-editor .ql-editor a { color: inherit; text-decoration: none; }
/* Quill's bubble theme makes links nowrap (for its URL tooltip), so a long
   link ran past the column while editing. Wrap them as on the note page. */
.visual-editor.ql-container:not(.ql-disabled) a:not(.ql-close) { white-space: inherit; }
.visual-editor .ql-editor h1, .visual-editor .ql-editor h2 { font-size: 28px; }
.visual-editor .ql-editor h3, .visual-editor .ql-editor h4,
.visual-editor .ql-editor h5, .visual-editor .ql-editor h6 { font-size: 24px; }
.visual-editor .ql-editor ol { margin: 21px; padding: 0; list-style: none; }
.visual-editor .ql-editor li { margin: 0 0 14px 30px; padding-left: 0; }
.visual-editor .ql-editor li > .ql-ui::before {
  box-sizing: border-box; width: 78px; margin: 0 0 0 -78px; text-align: end; padding-right: 15px;
}
.visual-editor .ql-editor li[data-list=ordered] > .ql-ui::before { padding-right: 12px; font-variant-numeric: lining-nums; }
/* Quill merges adjacent lists into one; where the list type changes, add the
   extra 7px that separates two lists on the note page (21px, not 14px). */
.visual-editor .ql-editor li[data-list=bullet]:not(.ql-indent-1, .ql-indent-2, .ql-indent-3, .ql-indent-4) + li[data-list=ordered]:not(.ql-indent-1, .ql-indent-2, .ql-indent-3, .ql-indent-4),
.visual-editor .ql-editor li[data-list=ordered]:not(.ql-indent-1, .ql-indent-2, .ql-indent-3, .ql-indent-4) + li[data-list=bullet]:not(.ql-indent-1, .ql-indent-2, .ql-indent-3, .ql-indent-4) { padding-top: 7px; }
.visual-editor .ql-editor li.ql-indent-1 { padding-left: 30px; }
.visual-editor .ql-editor li.ql-indent-2 { padding-left: 60px; }
.visual-editor .ql-editor li.ql-indent-3 { padding-left: 90px; }
.visual-editor .ql-editor li.ql-indent-4 { padding-left: 120px; }
.visual-editor .ql-editor .ql-code-block-container {
  background: #f5f8fc; color: var(--ink); margin: 14px 0; padding: 7px 21px; border-radius: 0;
  font-family: var(--font-code); font-size: 16px; letter-spacing: 0; overflow: visible;
}
.visual-editor .ql-editor code { background: #f5f8fc; color: inherit; font-size: 16px; padding: 1px 3px; border-radius: 0; }
.visual-editor .ql-tooltip { font-family: "Inter", system-ui, sans-serif; letter-spacing: 0; z-index: 10; }

.error { color: var(--danger); background: #fdecea; border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; }

/* Like telegra.ph, note text keeps its size and 21px margins on phones. */
@media (max-width: 600px) {
  .page:not(.note):not(.editor):not(.wide) { padding-top: 2rem; }
}