/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
button {
    cursor: pointer;
}

/* Outer wrapper */
.choices {
    width: 100% !important;
    margin-bottom: 1rem;
}

/* Inner container where tags and input live */
.choices__inner {
    background-color: #ffffff !important; /* bg-base-100 */
    color: #1f2937 !important; /* text-base-content */
    border: 1px solid #d1d5db !important; /* border-base-200 */
    border-radius: 0.5rem !important; /* rounded-box */
    min-height: 2.5rem !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem; /* text-sm */
}

/* Selected item badges */
.choices__list--multiple .choices__item {
    background-color: #3b82f6 !important; /* bg-primary */
    color: white !important;
    font-size: 0.75rem !important; /* text-xs */
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
}

/* Remove button inside badges */
.choices__list--multiple .choices__item .choices__button {
    color: white !important;
    margin-left: 0.25rem;
    font-weight: bold;
    font-size: 0.75rem;
}

/* Input field */
.choices__input--cloned {
    background-color: transparent !important;
    color: #1f2937 !important;
    font-size: 0.875rem;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    min-width: 1ch;
}

/* Dropdown menu container */
.choices__list--dropdown {
    background-color: #ffffff !important; /* bg-base-100 */
    border: 1px solid #d1d5db !important; /* border-base-200 */
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    z-index: 50;
    margin-top: 0.25rem;
}

/* Dropdown items */
.choices__item--selectable {
    font-size: 0.875rem; /* text-sm */
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: #1f2937 !important; /* text-base-content */
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* Highlighted/hovered dropdown item */
.choices__item--selectable.is-highlighted {
    background-color: #f3f4f6 !important; /* bg-base-200 */
    color: #1f2937 !important;
}

/* Dropdown container hidden */
.choices__list--dropdown.is-active {
    display: block !important;
}

/*#thing-description ul {*/
/*    display: block;*/
/*    list-style-type: disc;*/
/*    padding-inline-start: 1em;*/
/*}*/

/*
 * Drag handle: default hidden/shown via Tailwind on the element (group-hover).
 * `hover: none` matched too many desktops and kept the grip always visible; use `pointer: coarse` for touch.
 */
@media (pointer: coarse) {
    .drag-row-handle[data-drag-handle] {
        opacity: 1 !important;
    }
}

li.sortable-chosen .drag-row-handle[data-drag-handle],
li.sortable-drag .drag-row-handle[data-drag-handle] {
    opacity: 1 !important;
}

/* Sortable.js: insertion slot (ghost) reads as a line, not a faded row */
.sortable-ghost {
    opacity: 1 !important;
    background: transparent !important;
    position: relative;
    height: auto;
    min-height: 0.375rem;
    margin-block: 0.125rem;
    padding-block: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.sortable-ghost > * {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: none !important;
}

.sortable-ghost::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    pointer-events: none;
    /* Fades at edges so it reads as a slot, not a heavy bar */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in oklab, var(--color-base-content) 28%, transparent) 12%,
        color-mix(in oklab, var(--color-base-content) 28%, transparent) 88%,
        transparent 100%
    );
}

.sortable-chosen {
    transform: scale(1.01);
    box-shadow:
        0 2px 8px color-mix(in oklab, var(--color-base-content) 12%, transparent),
        0 0 0 1px color-mix(in oklab, var(--color-base-content) 8%, transparent);
    border-radius: 0.375rem;
}

.sortable-drag {
    transform: rotate(1deg);
    opacity: 0.96;
    box-shadow:
        0 12px 28px color-mix(in oklab, var(--color-base-content) 18%, transparent),
        0 0 0 1px color-mix(in oklab, var(--color-base-content) 10%, transparent);
    border-radius: 0.375rem;
}


.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nested outline rows: data-node-depth + static rules (CSP). Steps: 1.5rem pad, 0.625rem margin per level. */
.node-tree-row[data-node-depth="0"] {
    padding-left: 0;
    margin-left: 0;
}
.node-tree-row[data-node-depth="1"] { padding-left: 1.5rem; margin-left: 0.625rem; }
.node-tree-row[data-node-depth="2"] { padding-left: 3rem; margin-left: 1.25rem; }
.node-tree-row[data-node-depth="3"] { padding-left: 4.5rem; margin-left: 1.875rem; }
.node-tree-row[data-node-depth="4"] { padding-left: 6rem; margin-left: 2.5rem; }
.node-tree-row[data-node-depth="5"] { padding-left: 7.5rem; margin-left: 3.125rem; }
.node-tree-row[data-node-depth="6"] { padding-left: 9rem; margin-left: 3.75rem; }
.node-tree-row[data-node-depth="7"] { padding-left: 10.5rem; margin-left: 4.375rem; }
.node-tree-row[data-node-depth="8"] { padding-left: 12rem; margin-left: 5rem; }
.node-tree-row[data-node-depth="9"] { padding-left: 13.5rem; margin-left: 5.625rem; }
.node-tree-row[data-node-depth="10"] { padding-left: 15rem; margin-left: 6.25rem; }
.node-tree-row[data-node-depth="11"] { padding-left: 16.5rem; margin-left: 6.875rem; }
.node-tree-row[data-node-depth="12"] { padding-left: 18rem; margin-left: 7.5rem; }
.node-tree-row[data-node-depth="13"] { padding-left: 19.5rem; margin-left: 8.125rem; }
.node-tree-row[data-node-depth="14"] { padding-left: 21rem; margin-left: 8.75rem; }
.node-tree-row[data-node-depth="15"] { padding-left: 22.5rem; margin-left: 9.375rem; }
.node-tree-row[data-node-depth="16"] { padding-left: 24rem; margin-left: 10rem; }
.node-tree-row[data-node-depth="17"] { padding-left: 25.5rem; margin-left: 10.625rem; }
.node-tree-row[data-node-depth="18"] { padding-left: 27rem; margin-left: 11.25rem; }
.node-tree-row[data-node-depth="19"] { padding-left: 28.5rem; margin-left: 11.875rem; }
.node-tree-row[data-node-depth="20"] { padding-left: 30rem; margin-left: 12.5rem; }
.node-tree-row[data-node-depth="21"] { padding-left: 31.5rem; margin-left: 13.125rem; }
.node-tree-row[data-node-depth="22"] { padding-left: 33rem; margin-left: 13.75rem; }
.node-tree-row[data-node-depth="23"] { padding-left: 34.5rem; margin-left: 14.375rem; }
.node-tree-row[data-node-depth="24"] { padding-left: 36rem; margin-left: 15rem; }
.node-tree-row[data-node-depth="25"] { padding-left: 37.5rem; margin-left: 15.625rem; }
.node-tree-row[data-node-depth="26"] { padding-left: 39rem; margin-left: 16.25rem; }
.node-tree-row[data-node-depth="27"] { padding-left: 40.5rem; margin-left: 16.875rem; }
.node-tree-row[data-node-depth="28"] { padding-left: 42rem; margin-left: 17.5rem; }
.node-tree-row[data-node-depth="29"] { padding-left: 43.5rem; margin-left: 18.125rem; }
.node-tree-row[data-node-depth="30"] { padding-left: 45rem; margin-left: 18.75rem; }
.node-tree-row[data-node-depth="31"] { padding-left: 46.5rem; margin-left: 19.375rem; }
.node-tree-row[data-node-depth="32"] { padding-left: 48rem; margin-left: 20rem; }
.node-tree-row[data-node-depth="33"] { padding-left: 49.5rem; margin-left: 20.625rem; }
.node-tree-row[data-node-depth="34"] { padding-left: 51rem; margin-left: 21.25rem; }
.node-tree-row[data-node-depth="35"] { padding-left: 52.5rem; margin-left: 21.875rem; }
.node-tree-row[data-node-depth="36"] { padding-left: 54rem; margin-left: 22.5rem; }
.node-tree-row[data-node-depth="37"] { padding-left: 55.5rem; margin-left: 23.125rem; }
.node-tree-row[data-node-depth="38"] { padding-left: 57rem; margin-left: 23.75rem; }
.node-tree-row[data-node-depth="39"] { padding-left: 58.5rem; margin-left: 24.375rem; }
.node-tree-row[data-node-depth="40"] { padding-left: 60rem; margin-left: 25rem; }
.node-tree-row[data-node-depth="41"] { padding-left: 61.5rem; margin-left: 25.625rem; }
.node-tree-row[data-node-depth="42"] { padding-left: 63rem; margin-left: 26.25rem; }
.node-tree-row[data-node-depth="43"] { padding-left: 64.5rem; margin-left: 26.875rem; }
.node-tree-row[data-node-depth="44"] { padding-left: 66rem; margin-left: 27.5rem; }
.node-tree-row[data-node-depth="45"] { padding-left: 67.5rem; margin-left: 28.125rem; }
.node-tree-row[data-node-depth="46"] { padding-left: 69rem; margin-left: 28.75rem; }
.node-tree-row[data-node-depth="47"] { padding-left: 70.5rem; margin-left: 29.375rem; }
.node-tree-row[data-node-depth="48"] { padding-left: 72rem; margin-left: 30rem; }

/* Note markdown: undo Tailwind preflight inside rendered bodies (lists, code, quotes) */
.note-markdown p {
    margin: 0.35rem 0;
}

.note-markdown p:first-child {
    margin-top: 0;
}

.note-markdown p:last-child {
    margin-bottom: 0;
}

.note-markdown ul,
.note-markdown ol {
    margin: 0.35rem 0;
    padding-inline-start: 1.25rem;
}

.note-markdown ul {
    list-style-type: disc;
}

.note-markdown ol {
    list-style-type: decimal;
}

.note-markdown li {
    margin: 0.15rem 0;
    display: list-item;
}

.note-markdown li.task-list-item {
    list-style-type: none;
    list-style-position: outside;
    padding-inline-start: 0;
    margin-inline-start: 0;
}

.note-markdown ul ul,
.note-markdown ol ol,
.note-markdown ul ol,
.note-markdown ol ul {
    margin: 0.15rem 0;
}

.note-markdown blockquote {
    margin: 0.5rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid color-mix(in oklab, var(--color-base-content) 22%, transparent);
    color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
}

.note-markdown pre {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent);
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.note-markdown code {
    font-size: 0.8125em;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    background-color: color-mix(in oklab, var(--color-base-200) 70%, transparent);
}

.note-markdown pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

.note-markdown a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Note markdown heading hierarchy */
.note-markdown h1,
.note-markdown h2,
.note-markdown h3,
.note-markdown h4 {
    margin: 0.15rem 0;
    line-height: 1.2;
}

.note-markdown h1 {
    font-size: 1.75rem; /* about 2x base text */
    font-weight: 500;
}

.note-markdown h2 {
    font-size: 1.25rem;
    font-weight: 400; /* explicitly not bold */
}

.note-markdown h3 {
    font-size: 1rem; /* slightly bigger than text */
    font-weight: 700;
}

.note-markdown h4 {
    font-size: 0.875rem; /* text sized */
    font-weight: 700;
}