/* The Quill editor wrapper (assets/js/editor.js), its image resize frame, and rich text output. */

.rich {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rich p {
    margin: 0 0 6px;
}

.rich ul,
.rich ol {
    margin: 2px 0 8px;
    padding-left: 22px;
}

.rich img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 6px 0;
    cursor: zoom-in;
}

.rich a,
.pat-file-link {
    color: var(--primary);
}

.pat-file-link {
    font-weight: 600;
    text-decoration: none;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}

.pat-file-link:hover {
    background: var(--line);
    text-decoration: underline;
}

.pat-file-link::before {
    content: "📎 ";
}

.pat-editor .ql-toolbar.ql-snow {
    border: 1px solid var(--border, var(--line));
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    background: #fff;
    padding: 4px 6px;
    font-family: inherit;
}

.pat-editor .ql-container.ql-snow {
    border: 1px solid var(--border, var(--line));
    border-radius: 0 0 7px 7px;
    background: var(--surface-2);
    font-family: inherit;
    font-size: var(--fs-sm);
}

/* Capped against the window as well as in pixels: on a short screen a long
   description would otherwise take the whole modal and push the rest of the
   form out of reach. */
.pat-editor .ql-editor {
    min-height: 110px;
    max-height: min(320px, 34vh);
    overflow-y: auto;
    line-height: 1.55;
}

.pat-editor .ql-editor.ql-blank::before {
    font-style: normal;
    color: var(--faint-ink);
}

.pat-editor:focus-within .ql-container.ql-snow {
    background: #fff;
    border-color: var(--accent, var(--primary));
}

.pat-editor:focus-within .ql-toolbar.ql-snow {
    border-color: var(--accent, var(--primary));
}

/* An image carries its size in the width attribute, so it must not be
   stretched by CSS; height stays automatic and the ratio holds. */
.pat-editor .ql-editor img {
    max-width: 100%;
    border-radius: 6px;
}

/* keyed off the class patEditor adds, so the worksheet editor behaves the same */
.pat-editor--res .ql-editor img {
    height: auto;
    cursor: pointer;
}

.pat-editor--res .ql-editor img.pat-img-on {
    outline: 2px solid var(--accent, var(--primary));
    outline-offset: 1px;
}

/* resize frame over the selected image */
.pat-editor--res {
    position: relative;
}

.pat-imglayer {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.pat-imgframe {
    position: absolute;
    display: none;
    pointer-events: none;
    border: 1px solid var(--accent, var(--primary));
    border-radius: 6px;
}

.pat-imgframe.on {
    display: block;
}

.pat-imgh {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    pointer-events: auto;
    border: 2px solid var(--accent, var(--primary));
    border-radius: 3px;
    touch-action: none;
}

.pat-imgh--nw {
    top: -7px;
    left: -7px;
    cursor: nwse-resize;
}

.pat-imgh--ne {
    top: -7px;
    right: -7px;
    cursor: nesw-resize;
}

.pat-imgh--sw {
    bottom: -7px;
    left: -7px;
    cursor: nesw-resize;
}

.pat-imgh--se {
    bottom: -7px;
    right: -7px;
    cursor: nwse-resize;
}

.pat-imgbar {
    position: absolute;
    top: -30px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    background: var(--ink);
    border-radius: 5px;
    padding: 3px 6px;
    font-size: var(--fs-2xs);
    color: #fff;
    white-space: nowrap;
}

.pat-imgbar button {
    border: none;
    background: #ffffff26;
    color: #fff;
    font: inherit;
    font-weight: 600;
    border-radius: 3px;
    padding: 2px 7px;
    cursor: pointer;
}

.pat-imgbar button:hover {
    background: #ffffff40;
}

.pat-imgsize {
    opacity: .7;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}

/* the readout is enough while dragging — the buttons only get in the way */
.pat-imgframe.dragging .pat-imgbar button {
    visibility: hidden;
}

.pat-editor-fallback {
    min-height: 90px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
    background: #fff;
}

/* The toolbar's file icon (editor.js registers it with Quill). */
.ql-snow .ql-stroke.pat-ql-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Rich text outside the editor ───────────────────────────────
   What the editor (Quill 2) wrote, drawn the way the editor drew it — work-log notes on
   Manager Review and the worksheet, the issue's Activity feed and description. Quill keeps
   its look in rules scoped to .ql-editor, so the same rules are repeated here for .rich:
     lists      every list is an <ol>; each <li data-list="bullet|ordered|checked|unchecked">
                says what it is, and .ql-indent-N how deep (numbers go 1. → a. → i.)
     code       a block is div.ql-code-block-container of div.ql-code-block lines; inline is <code>
     headings   h1–h3 at the editor's sizes; indents and alignment by .ql-indent-N / .ql-align-*
   ───────────────────────────────────────────────────────────── */
.rich > :last-child {
    margin-bottom: 0;
}

.rich h1, .rich h2, .rich h3, .rich h4 {
    margin: 10px 0 4px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ink);
}

.rich > h1:first-child, .rich > h2:first-child, .rich > h3:first-child {
    margin-top: 0;
}

.rich h1 { font-size: 2em; }
.rich h2 { font-size: 1.5em; }
.rich h3 { font-size: 1.17em; }
.rich h4 { font-size: 1em; }

.rich blockquote {
    margin: 4px 0 8px;
    padding: 2px 0 2px 12px;
    border-left: 4px solid var(--line-strong);
    color: var(--ink-3);
}

/* lists, by data-list rather than by tag */
.rich ol,
.rich ul {
    margin: 2px 0 8px;
    padding-left: 1.5em;
    counter-reset: rich-l0 rich-l1 rich-l2;
}

.rich li[data-list] {
    position: relative;
    list-style: none;
    padding-left: 1.5em;
    margin-left: -1.5em;
}

.rich li[data-list] > .ql-ui {
    display: none;   /* the editor's own marker element, drawn by ::before below */
}

.rich li[data-list]::before {
    position: absolute;
    left: 0;
    width: 1.2em;
    text-align: right;
    white-space: nowrap;
}

.rich li[data-list="bullet"]::before    { content: '\2022'; }
.rich li[data-list="checked"]::before   { content: '\2611'; color: var(--muted-ink); }
.rich li[data-list="unchecked"]::before { content: '\2610'; color: var(--muted-ink); }

/* numbering per level, restarting under each item one level up, as the editor does */
.rich li[data-list]:not([class*="ql-indent-"])  { counter-reset: rich-l1 rich-l2; }
.rich li[data-list].ql-indent-1                 { counter-reset: rich-l2; }
.rich li[data-list="ordered"]:not([class*="ql-indent-"]) { counter-increment: rich-l0; }
.rich li[data-list="ordered"].ql-indent-1       { counter-increment: rich-l1; }
.rich li[data-list="ordered"].ql-indent-2       { counter-increment: rich-l2; }
.rich li[data-list="ordered"]:not([class*="ql-indent-"])::before { content: counter(rich-l0, decimal) '. '; }
.rich li[data-list="ordered"].ql-indent-1::before { content: counter(rich-l1, lower-alpha) '. '; }
.rich li[data-list="ordered"].ql-indent-2::before { content: counter(rich-l2, lower-roman) '. '; }

/* indents (paragraphs and list items) and alignment */
.rich .ql-indent-1 { padding-left: 3em; }
.rich .ql-indent-2 { padding-left: 6em; }
.rich .ql-indent-3 { padding-left: 9em; }
.rich li[data-list].ql-indent-1 { padding-left: 4.5em; }
.rich li[data-list].ql-indent-2 { padding-left: 7.5em; }
.rich li[data-list].ql-indent-3 { padding-left: 10.5em; }
.rich li[data-list].ql-indent-1::before { left: 3em; }
.rich li[data-list].ql-indent-2::before { left: 6em; }
.rich li[data-list].ql-indent-3::before { left: 9em; }
.rich .ql-align-center  { text-align: center; }
.rich .ql-align-right   { text-align: right; }
.rich .ql-align-justify { text-align: justify; }

/* ── code ────────────────────────────────────────────────────
   A code block (the worksheet editor's "Code block" button) reads as code in the editor
   and wherever the note is shown: a light panel in a monospace font, numbered lines in a
   gutter, its spacing kept, and a scrollbar for lines too long to fit. Inline <code> is a
   small chip. Quill's own dark style loads after this file, so inside the editor the rule
   is one class more specific than Quill's. */
.rich .ql-code-block-container,
.rich pre,
.ql-container.ql-snow .ql-editor .ql-code-block-container {
    counter-reset: pat-code-line;
    position: relative;
    margin: 8px 0 10px;
    padding: 10px 14px 10px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 8px);
    background:
        linear-gradient(to right, var(--surface-3) 0, var(--surface-3) 3em, transparent 3em),
        var(--surface-2);
    color: var(--ink);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    tab-size: 4;
}

/* In a saved note, a long block is a window onto the code rather than a page of it:
   about 22 lines tall, scrolling inside, the numbered gutter moving with the code. */
.rich .ql-code-block-container,
.rich pre {
    max-height: 380px;
    overflow: auto;
    background-attachment: local, local;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* each line: numbered in the gutter, spacing kept exactly */
.rich .ql-code-block,
.ql-container.ql-snow .ql-editor .ql-code-block {
    counter-increment: pat-code-line;
    position: relative;
    padding-left: 3.8em;
    white-space: pre;
}
.rich .ql-code-block::before,
.ql-container.ql-snow .ql-editor .ql-code-block::before {
    content: counter(pat-code-line);
    position: absolute;
    left: 0;
    width: 2.4em;
    text-align: right;
    color: var(--faint-ink);
    font-size: 12px;
    user-select: none;
}
/* Quill marks an empty line with a <br>; keep its height */
.rich .ql-code-block:empty::after {
    content: "\200b";
}

/* An older <pre> (pasted, or from before code blocks) has no lines to number. */
.rich pre {
    padding-left: 14px;
    background: var(--surface-2);
    white-space: pre;
}

.rich code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-3);
    color: var(--ink);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: .86em;
}

.rich pre code {
    padding: 0;
    background: none;
    color: inherit;
}