@import url("pico.orange.min.css");

:root {
    --pico-spacing: 0.5rem;
    --pico-font-size: 100%;
    --pico-line-height: 1.3;
    --pico-form-element-spacing-vertical: 0.3rem;
    --pico-form-element-spacing-horizontal: 0.5em;

    /* Garden color palette (used for project color-coding). */
    --color-daylily-gold: #f5c518;
    --color-coneflower-amber: #e07e0f;
    --color-shasta-white: #fafaf5;
    --color-foxglove-cream: #f2efd9;
    --color-campanula-violet: #6b4fa0;
    --color-clematis-frost: #dcd3e8;
    --color-foxglove-blush: #d467b0;
    --color-sky-blue: #4a90c4;
    --color-leaf-green: #5a8f3d;
    --color-basil-plum: #4a2e3d;
    --color-bark-brown: #5c4033;
    --color-menkayonta-orange: #bd3c13;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-daylily-gold: #f7d24a;
        --color-coneflower-amber: #f0923a;
        --color-menkayonta-orange: #f56b3d;
        --color-shasta-white: #fafaf5;
        --color-foxglove-cream: #f2efd9;
        --color-campanula-violet: #9b85d4;
        --color-clematis-frost: #e5ddf0;
        --color-foxglove-blush: #e080c0;
        --color-sky-blue: #6baedd;
        --color-leaf-green: #7ab558;
        --color-basil-plum: #b98ba8;
        --color-bark-brown: #a67c5b;
    }
}

body {
    padding: 0;
    margin: 0;
}

/* main contains the sidebar and content */
main {
    display: flex;
    height: 100dvh;
    padding-block: 0;
    overflow: hidden;
}

body > main,
#root > main {
    padding-block: 0;
}

/* content contains 0 or more `.tab-column`s */
#content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto hidden;
}

/* Project rail */
.rail {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 2rem;
    min-height: 100dvh;
    padding-top: 0;
    overflow: visible;
    border-right: 1px solid var(--pico-muted-border-color);
}

.rail-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: bold;
    color: color-mix(in srgb, var(--pico-color) 30%, transparent);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.15s;
}

.rail-button:hover {
    color: color-mix(in srgb, var(--pico-color) 70%, transparent);
}

.rail-button:not(.secondary) {
    color: var(--pico-color);
}

.rail-button-status-dot {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background: orange;
    border-radius: 50%;
    animation: rail-button-status-pulse 1.2s ease-in-out infinite;
}

.rail-button-status-dot.export-failed {
    background: var(--pico-del-color);
    animation: none;
}

@keyframes rail-button-status-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

/* Project color-coding flags. */

/* Rail buttons carry the flag as a full backplate. The background and
   foreground colors are supplied inline by Elm from the project's flag. */
.rail-button.has-flag {
    /* Constrain the backplate to the rail width less a little padding on
       either side, and keep it a centered square (flex-shrink: 0 stops the
       rail column from compressing it out of square). */
    flex-shrink: 0;
    width: calc(100% - 0.5rem);
    aspect-ratio: 1;
    margin: 0.2rem auto;
    border-radius: 0.35rem;
}

/* Keep the flag foreground on hover/selected rather than the pico defaults,
   since the backplate defines the needed contrast. */
.rail-button.has-flag:hover,
.rail-button.has-flag:not(.secondary) {
    color: inherit;
}

/* A small inline flag badge shown before a tab title in place of the old
   "key:" prefix. Background and foreground are supplied inline by Elm. */
.project-flag-badge {
    /* A square badge no taller than the tab's text; aspect-ratio keeps it
       square regardless of the key's width. */
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 1em;
    aspect-ratio: 1;
    padding: 0;
    margin-right: 0.4em;
    font-weight: bold;
    line-height: 1;
    vertical-align: baseline;
    border-radius: 0.25em;
}

/* The project key text, drawn slightly translucent so the backplate shows
   through emoji keys. */
.project-flag-key {
    opacity: 0.85;
}

/* The preview badge in the picker legend and the sidebar title badge match
   the rail backplate size. */
.sidebar-title .project-flag-badge,
.project-color-picker legend .project-flag-badge {
    height: 1.5rem;
    font-size: 1.125rem;
    vertical-align: -0.4rem;
    border-radius: 0.35rem;
}

/* Sit the header badge on the text baseline so its bottom is flush with the
   bottom of the header text. */
.sidebar-title h4 .project-flag-badge {
    vertical-align: baseline;
}

/* The project color picker in the project form. */
.project-color-picker .color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.project-color-picker .color-swatch {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1;
    padding: 0;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 2px rgb(0 0 0 / 60%);
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 0.35rem;
}

.project-color-picker .color-swatch.selected {
    border-color: var(--pico-color);
    box-shadow: 0 0 0 2px var(--pico-background-color);
}

.project-color-picker .color-swatches + small {
    display: block;
    margin-top: 0.4rem;
}

.project-color-picker[aria-invalid="true"] .color-swatches + small {
    color: var(--pico-del-color);
}

/* The sidebar. */
.side {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 150px;
    padding: 1em;
    overflow: hidden;
    border-right: 1px solid var(--pico-muted-border-color);
}

.sidebar-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    justify-content: space-between;
    padding: 1em 1em 0.5em;
    margin: -1em -1em 0.5em;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.file-tree-header {
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em 1em;
    margin: 0.75em -1em 0;
    border-top: 1px solid var(--pico-muted-border-color);
}

.file-tree-header h4 {
    margin: 0;
}

.file-tree-open-button {
    flex-shrink: 0;
    padding: 0.15em 0.5em;
    margin: 0;
    font-size: 0.8em;
    line-height: 1.4;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}

.file-tree-open-button:hover {
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
}

.file-tree {
    font-size: 0.9em;
}

.file-tree-empty {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.7;
}

.no-project-selected {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2em;
    font-size: 0.9em;
    text-align: center;
    opacity: 0.7;
}

.file-tree-dir {
    margin-bottom: 0;
    border: none;
}

.file-tree-dir summary {
    padding: 0;
    margin-bottom: 0;
    line-height: inherit;
    cursor: pointer;
}

/* Pico has a `nav details summary:not([role])` rule (for its dropdown-menu
   component) that forces its own height/padding on any <summary> inside a
   <nav>, and a `details[open]>summary` rule that adds margin-bottom below
   an open directory's summary (right where its children sit). Both are
   more specific than `.file-tree-dir summary` above. This selector
   out-specifies them (two classes beat their type selectors) so directory
   rows size and space purely from .file-tree-row, matching file rows. */
.side .file-tree-dir summary {
    height: auto;
    padding-block: 0.15em;
    margin-bottom: 0;
}

/* We render our own chevron as a flex child (see .file-tree-gutter) so
   that file and directory labels at the same depth line up in a column;
   Pico's own floated chevron icon is disabled here. */
.file-tree-dir summary::after {
    display: none;
}

.file-tree-row {
    display: flex;
    gap: 0.3em;
    align-items: center;
    padding-block: 0.15em;
    padding-inline: 1rem;
    margin-inline: -1rem;
}

.file-tree-row:hover {
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
}

.file-tree-gutter {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 0.9em;
}

.file-tree-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.45em;
    height: 0.45em;
}

.file-tree-caret::before {
    box-sizing: border-box;
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    content: '';
    border-style: solid;
    border-width: 0.14em 0.14em 0 0;
    opacity: 0.6;
    transform: rotate(45deg);
}

.file-tree-dir[open] > summary .file-tree-caret::before {
    transform: rotate(135deg);
}

.file-tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-copy-button {
    box-sizing: border-box;
    display: inline-flex;
    visibility: hidden;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding: 0.2em;
    margin: 0 0 0 auto;
    color: inherit;
    appearance: none;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: var(--pico-border-radius);
    opacity: 0.7;
}

.file-tree-copy-button:hover {
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
    opacity: 1;
}

.file-tree-copy-button:focus,
.file-tree-copy-button.copied {
    visibility: visible;
}

.file-tree-dir > summary .file-tree-copy-button {
    margin-right: 1rem;
}

.file-tree-row:hover .file-tree-copy-button {
    visibility: visible;
}

.file-tree-copy-icon {
    position: relative;
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
}

/* The back sheet is drawn with only its top and right edges, like a
   partial outline peeking out from behind the front sheet. Since it has
   no fill and no left/bottom border, it never needs to visually mask
   anything where the two overlap - unlike a full bordered square, which
   would need its background to exactly match whatever is painted behind
   it (the row's hover tint, the button's own hover tint, etc.) in every
   state, which proved too fragile to keep in sync. */
.file-tree-copy-icon::before {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    width: 0.5em;
    height: 0.5em;
    content: '';
    border-top: 0.08em solid currentcolor;
    border-right: 0.08em solid currentcolor;
}

.file-tree-copy-icon::after {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 0.5em;
    height: 0.5em;
    content: '';
    border: 0.08em solid currentcolor;
    border-radius: 0.06em;
}

.file-tree-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75em;
    height: 0.75em;
}

.file-tree-check-icon::before {
    box-sizing: border-box;
    width: 0.3em;
    height: 0.5em;
    margin-bottom: 0.1em;
    content: '';
    border-right: 0.08em solid currentcolor;
    border-bottom: 0.08em solid currentcolor;
    transform: rotate(45deg);
    transform-origin: center;
}

.file-tree-copy-button.copied {
    color: var(--pico-ins-color, var(--pico-primary));
}

.file-tree-file {
    cursor: pointer;
}

.sidebar-title h4 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    z-index: 10;
    width: 4px;
    height: 100%;
    touch-action: none;
    cursor: col-resize;
}

.side-resize-handle:hover,
.side-resize-handle.dragging {
    background: color-mix(in srgb, var(--pico-primary) 30%, transparent);
}

.hidden-side {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    min-height: 100dvh;
    touch-action: none;
    cursor: col-resize;
    border-right: 1px solid var(--pico-muted-border-color);
}

.hidden-side:hover,
.hidden-side.dragging {
    border-right-color: color-mix(in srgb, var(--pico-primary) 60%, transparent);
}

.side-grip-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 14px;
    color: var(--pico-color);
    background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);
    background-repeat: round;
    background-position: 0 0, 4px 4px;
    background-size: 4px 4px;
    transform: translate(-50%, -50%);
}

.hidden-side:hover .side-grip-icon {
    color: color-mix(in srgb, var(--pico-primary) 60%, transparent);
}

.drag-shield {
    position: fixed;
    inset: 0;
    z-index: 9999;
    cursor: col-resize;
    background: transparent;
}

.project-activity-status {
    display: block;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 0.25rem;
}

.project-activity-progress {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 0.35rem;
    margin: 0;
}

.export-failure {
    color: var(--pico-del-color);
}


/* Row and column containers. */
.tab-column {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    min-width: 256px;
    height: 100%;
}

.tab-column-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.tab-column-resize-area {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
}

.tab-row {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.tab-content {
    padding-top: 0.5rem;
}

.multiple-columns .tab-column {
    flex: 1 0 256px;
    border-right: 1px solid var(--pico-muted-border-color);
}

.multiple-columns .tab-column:last-child {
    border-right-style: none;
}

.tab-column-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    z-index: 10;
    width: 4px;
    height: 100%;
    touch-action: none;
    cursor: col-resize;
}

.tab-column-resize-handle:hover,
.tab-column-resize-handle.dragging {
    background: color-mix(in srgb, var(--pico-primary) 30%, transparent);
}

.tab-column-resize-handle-last {
    left: 0;
    width: 16px;
    border-right: 1px solid var(--pico-muted-border-color);
    border-left: 1px solid var(--pico-muted-border-color);
}

.tab-column-resize-handle-last:hover,
.tab-column-resize-handle-last.dragging {
    background: color-mix(in srgb, var(--pico-primary) 15%, transparent);
    border-right-color: color-mix(in srgb, var(--pico-primary) 60%, transparent);
    border-left-color: color-mix(in srgb, var(--pico-primary) 60%, transparent);
}

.tab-column-resize-handle-last:hover .side-grip-icon,
.tab-column-resize-handle-last.dragging .side-grip-icon {
    color: color-mix(in srgb, var(--pico-primary) 60%, transparent);
}

.tab-row-resize-handle {
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 4px;
    touch-action: none;
    cursor: row-resize;
}

.tab-row-resize-handle:hover,
.tab-row-resize-handle.dragging {
    background: color-mix(in srgb, var(--pico-primary) 30%, transparent);
}

/* The tab navigation area */
button.focused {
    font-weight: bold;
    text-decoration-line: underline;
}

.tab-header {
    position: sticky;
    top: 0;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 0.4rem;
    padding-left: 0.4rem;
    background-color: var(--pico-card-sectioning-background-color);
}

.tab-row:not(:first-child) .tab-header {
    border-top: 1px solid var(--pico-muted-border-color);
}

.tab-content::before {
    display: block;
    height: 0.5rem;
    content: "";
    background-color: var(--pico-background-color);
    border-top: 1px solid var(--pico-muted-border-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.tab-header > span {
    flex-shrink: 0;
}

.back-button {
    padding-right: 0.45rem;
    padding-left: 0.45rem;
    margin-bottom: 0;
    border-right-style: none;
    border-radius: 6px 0 0 6px;
}

.back-icon {
    font-size: 0.9em;
}

.back-button:disabled {
    cursor: default;
    opacity: 0.35;
}

.tab-nav {
    padding-right: 0;
    padding-left: 0.6rem;
    margin-bottom: 0;
    text-align: left;
    border-right-style: none;
    border-left-style: none;
    border-radius: 0;
}

.close-button {
    margin-bottom: 0;
    border-left-style: none;
    border-radius: 0 6px 6px 0;
}

.tab-header > span:has(.back-button:focus, .tab-nav:focus, .close-button:focus) {
    border-radius: 6px;
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}

.tab-header > span:has(.back-button:focus, .tab-nav:focus, .close-button:focus) .back-button,
.tab-header > span:has(.back-button:focus, .tab-nav:focus, .close-button:focus) .tab-nav,
.tab-header > span:has(.back-button:focus, .tab-nav:focus, .close-button:focus) .close-button {
    box-shadow: none;
}

.close-button.focused {
    text-decoration: none;
}

.back-button.outline,
.tab-nav.outline,
.close-button.outline {
    color: var(--pico-muted-color);
    border-color: var(--pico-muted-border-color);
}

.back-button.focused,
.tab-nav.focused,
.close-button.focused {
    position: relative;
    z-index: 1;
    color: var(--pico-contrast);
    background-color: var(--pico-card-background-color);
    border-bottom: 3px solid var(--pico-primary);
}

/* Vista internal */

.tab-view {
    padding: 0 1rem 1rem;
}

ul.index-listing {
    padding-left: 0;
}

ul.index-listing > li {
    list-style-type: none;
}

.docview {
    padding: 1rem;
}

.copy-id-button {
  margin-left: 0.5em;
}

.tag {
    display: inline-block;
    padding: 0.1rem;
    margin: 0.25rem;
    background-color: var(--pico-contrast-background);
    border-radius: 4px;
}

.tag > a {
    margin-right: 0.1rem;
    margin-left: 0.1rem;
    color: var(--pico-contrast-inverse);
    text-decoration: none;
}

div.hidden {
    display: none;
}

.filters {
    max-width: 30em;
}

.aligned-glosses {
    padding-left: 1.5em;
    text-indent: -1em;
}

.gloss-column {
    display: inline-table;
    padding: 0.25em;
    text-indent: 0;
}

.gloss-source-text {
    font-size: 110%;
}

.judgment-blank {
    padding: 0.25em;
}

.judgment {
    padding-right: 0.25em;
}

.nav-link {
    padding: 0.5em;
}

.gloss-controls {
    text-align: right;
}

.nostretch {
    align-self: start;
}

.metadata-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metadata-list-heading {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    white-space: nowrap;
}

.metadata-scope-control {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0;
    font-size: 0.8rem;
    font-weight: normal;
}

.metadata-scope-label {
    font-weight: normal;
}

.metadata-list-heading select.metadata-scope-select {
    box-sizing: border-box;
    width: auto;
    height: 1.3rem;
    min-height: 1.3rem;
    padding: 0 1.7rem 0 0.45rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
    background-position: right 0.45rem center;
    background-size: 0.75rem auto;
}

.metadata-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
    gap: 1rem;
    align-items: start;
    overflow-x: auto;
}

.metadata-columns > * {
    min-width: 0;
}

.switch-label {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.switch-label input[type="checkbox"][role="switch"]:checked {
    background-color: var(--pico-primary);
    border-color: var(--pico-primary);
}

/* Note rendering */

.note-mode-control {
    width: 8rem;
    max-width: 100%;
}

.note-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: center;
    margin-bottom: var(--pico-typography-spacing-vertical);
}

.note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-left: auto;
}

.note-actions button,
.note-mode-control button {
    width: auto;
    padding: 0.25rem 0.5rem;
    margin: 0;
    font-size: 80%;
    line-height: 1.15;
}

h1.note-title {
    font-size: 150%;
}

.page-editor-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--pico-typography-spacing-vertical);
}

.page-summary,
.page-details-editor {
    flex: 1 1 24rem;
    min-width: 0;
}

.page-summary h1 {
    margin-bottom: 0.25rem;
}

.page-description {
    margin-bottom: 0;
    white-space: pre-wrap;
}

.page-details-edit {
    width: auto;
    padding: 0.25rem 0.5rem;
    margin: 0;
    font-size: 60%;
    line-height: 1;
}

.key {
    padding-right: 0.5em;
}

.key::after {
    content: ")";
}