/* Prompteur — onglets des prompts et des segments, zone de travail (modes, mise en forme, numéros de
   ligne, éditeur Markdown coloré), contenus de ses popups. La page tient dans l'écran (l-screen). */

@layer page {
    :root {
        --tabs-model: var(--syntax-marker);
        --tabs-fixed: var(--syntax-bold);
    }
    .editor {
        --editor-size: calc(var(--canon-size-control) * var(--editor-scale) * var(--editor-zoom));
    }

    .toolbar-icon {
        width: calc(var(--local-height-toolbar) / 2);
        height: calc(var(--local-height-toolbar) / 2);
        flex-shrink: 0;
    }
    .toolbar-home {
        margin-left: 8px;
    }
    .prompter-tabs {
        position: fixed;
        top: calc(var(--canon-height-header) + var(--local-height-toolbar));
        left: 0;
        right: 0;
        height: var(--local-height-tabs);
        z-index: calc(var(--canon-plane-header) - 1);
        display: flex;
        flex-direction: column;
    }
    .tab {
        position: relative;
    }
    .tab-mark {
        position: absolute;
        inset: 0;
    }
    .tab:is([data-tab-model], [data-tab-fixed]) > .tab-mark + * {
        margin-inline-start: var(--local-size-prompter-tab-mark);
    }
    .tab-icon {
        width: 14px;
        height: 14px;
        margin-right: 4px;
        flex-shrink: 0;
    }
    .tab-input {
        width: 100px;
    }
    .tab-prefix {
        margin-right: 2px;
    }
    .workspace {
        position: fixed;
        top: calc(var(--canon-height-header) + var(--local-height-toolbar) + var(--local-height-tabs));
        left: 0;
        right: 0;
        bottom: var(--local-height-statusbar);
        display: flex;
        overflow: hidden;
    }
    .modes {
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        z-index: 50;
        width: max-content;
        margin-inline: auto;
    }
    .format {
        position: absolute;
        top: 40px;
        right: 8px;
        z-index: 50;
        display: grid;
        grid-template-columns: 36px 36px;
        gap: 4px;
        align-content: start;
    }
    .format-handle {
        grid-column: 1 / -1;
    }
    .gutter {
        width: 40px;
        flex-shrink: 0;
        overflow-y: hidden;
        overflow-x: hidden;
        padding-top: 3px;
    }
    .gutter-number {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .editor {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
    }
    .headings {
        position: fixed;
        top: calc(var(--local-height-toolbar) + var(--canon-height-header) + var(--local-height-tabs));
        z-index: 40;
        height: 24px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 12px;
        overflow: hidden;
    }
    .editor-text {
        padding-top: 3px;
        min-height: 100%;
    }
    .editor-text > div {
        min-height: calc(var(--editor-size) * var(--canon-leading-reading));
        position: relative;
    }
    .syntax-code {
        padding: 1px 4px;
    }
    .syntax-block {
        padding: 2px 8px;
    }
    .editor-text > .syntax-quote {
        padding-left: 10px;
    }
    .syntax-table {
        margin: 6px 0;
    }
    .zoom {
        position: fixed;
        bottom: calc(var(--local-height-statusbar) + 12px);
        right: 16px;
        z-index: 100;
    }
    .narrow {
        display: none;
    }
    .narrow-body {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .narrow-close {
        margin-left: 12px;
    }
    .narrow-close > span {
        padding: 0 4px;
    }
    .choices {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .plans {
        max-height: 300px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .rename {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .assembly-text {
        margin: 0;
    }
    @media (max-width: 800px) {
        .narrow {
            display: flex;
        }
    }

    .toolbar-icon {
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }
    .button:hover > .toolbar-icon {
        opacity: 1;
    }
    .tab-mark {
        border-radius: inherit;
    }
    .tab[data-tab-model] > .tab-mark {
        border-inline-start: var(--local-size-prompter-tab-mark) solid var(--tabs-model);
    }
    .tab[data-tab-fixed] > .tab-mark {
        border-inline-start: var(--local-size-prompter-tab-mark) solid var(--tabs-fixed);
    }
    .tab[data-tab-over] > .tab-mark {
        box-shadow: var(--local-shadow-prompter-tab);
    }
    .tab[data-tab-dragging] > :is(.tab-mark, .tab-icon, .tab-label) {
        opacity: 0.4;
    }
    .tab-icon--model {
        filter: saturate(100%) invert(55%) sepia(60%) saturate(500%) hue-rotate(5deg) brightness(100%);
    }
    .tab-icon--fixed {
        filter: saturate(100%) invert(30%) sepia(50%) saturate(2000%) hue-rotate(345deg) brightness(90%);
    }
    .modes {
        opacity: 0.2;
    }
    .modes:hover {
        opacity: 1;
    }
    .format {
        opacity: 0.2;
    }
    .format:hover {
        opacity: 1;
    }
    .gutter {
        border-right: 1px solid var(--canon-theme-line);
        background-color: var(--canon-theme-surface);
    }
    .gutter-number {
        border-bottom: 1px solid var(--canon-theme-line);
    }
    .editor {
        background-color: var(--canon-theme-canvas);
    }
    .headings {
        background-color: var(--canon-theme-surface);
        border-bottom: 1px solid var(--canon-theme-line);
    }
    .headings-divider {
        opacity: 0.4;
    }
    .editor-text > [data-editor-wrap],
    .editor-text > [data-editor-current] {
        background-color: var(--canon-theme-highlight);
    }
    .editor-text > [data-editor-wrap]::after {
        opacity: 0.6;
    }
    .syntax-code {
        background-color: var(--canon-theme-tint);
        border-radius: var(--local-radius-prompter-syntax-code);
    }
    .syntax-block {
        background-color: var(--canon-theme-highlight);
    }
    .editor-text > .syntax-quote {
        border-left: 3px solid var(--syntax-quote);
    }
    .zoom {
        opacity: 0;
    }
    .zoom[data-zoom-visible] {
        opacity: 1;
    }

    .tab-icon {
        vertical-align: middle;
    }
    .tab-prefix {
        color: var(--canon-theme-faint);
    }
    .format {
        font-size: var(--canon-size-note);
        font-weight: var(--canon-weight-emphasis);
        line-height: 1;
    }
    .gutter {
        color: var(--canon-theme-faint);
        font-size: var(--canon-size-fine);
        text-align: center;
    }
    .headings {
        font-size: var(--canon-size-note);
        color: var(--canon-theme-faint);
        white-space: nowrap;
    }
    .headings-item:hover,
    .headings-divider:hover {
        color: var(--canon-theme-ink);
    }
    .editor-text {
        font-size: var(--editor-size);
        line-height: var(--canon-leading-reading);
        color: var(--canon-theme-ink);
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .editor-text > [data-editor-wrap]::after {
        content: " ↵";
        color: var(--canon-theme-faint);
        font-size: var(--canon-size-fine);
    }
    .syntax-heading {
        font-weight: var(--canon-weight-emphasis);
        color: var(--syntax-heading);
    }
    .syntax-heading--1 {
        font-size: var(--local-size-prompter-syntax-heading);
    }
    .syntax-heading--2 {
        font-size: var(--local-size-prompter-syntax-heading-2);
    }
    .syntax-heading--3 {
        font-size: var(--local-size-prompter-syntax-heading-3);
    }
    .syntax-heading--4 {
        font-size: var(--local-size-prompter-syntax-heading-4);
    }
    .syntax-heading--5 {
        font-size: var(--local-size-prompter-syntax-heading-5);
    }
    .syntax-heading--6 {
        font-size: var(--local-size-prompter-syntax-heading-6);
    }
    .syntax-hash {
        color: var(--canon-theme-faint);
    }
    .syntax-bold {
        font-weight: var(--canon-weight-emphasis);
        color: var(--syntax-bold);
    }
    .syntax-italic {
        font-style: italic;
    }
    .syntax-strike {
        text-decoration: line-through;
    }
    .syntax-code {
        color: var(--syntax-code);
        font-family: var(--canon-font-code);
    }
    .syntax-block {
        color: var(--syntax-block);
        font-family: var(--canon-font-code);
    }
    .editor-text > .syntax-quote {
        color: var(--syntax-quote);
        font-style: italic;
    }
    .syntax-marker {
        color: var(--syntax-marker);
        font-weight: var(--canon-weight-emphasis);
    }
    .syntax-link {
        color: var(--canon-theme-action);
        text-decoration: underline;
    }

    .narrow-body {
        text-align: center;
    }
    .narrow-close > span {
        font-size: var(--canon-size-body);
    }
    .assembly-text {
        font-size: var(--canon-size-note);
        line-height: var(--canon-leading-reading);
    }
    .choices-text {
        font-size: var(--canon-size-note);
        color: var(--canon-theme-muted);
    }
    .plans-date {
        font-size: var(--canon-size-fine);
        color: var(--canon-theme-faint);
    }
    .assembly {
        font-size: var(--canon-size-note);
        line-height: var(--canon-leading-reading);
        white-space: pre-wrap;
        word-break: break-word;
    }

    .tab-mark,
    .tab-prefix {
        pointer-events: none;
    }
    .modes {
        transition: opacity 0.2s;
    }
    .format {
        transition: opacity 0.2s;
    }
    .gutter {
        user-select: none;
    }
    .headings-item,
    .headings-divider {
        cursor: pointer;
        transition: color 0.15s;
    }
    .editor-text > [data-editor-wrap]::after {
        pointer-events: none;
        user-select: none;
    }
    .zoom {
        transition: opacity 0.3s;
        pointer-events: none;
    }
}