/* Box "Details" rich-text editor (toolbar + editable) and the three font-size
   classes. The .box-fs-* rules are shared by the editor and the public box view so
   sizes match; this file is loaded on both the app pages and the public box page. */

.rte {
    border: 1px solid var(--border, #d9dee5);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.rte-toolbar {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px;
    border-bottom: 1px solid var(--border, #d9dee5);
    background: var(--surface-2, #f7f8fa);
}

.rte-btn {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-1, #1a1f27);
}

.rte-btn:hover {
    background: #fff;
    border-color: var(--border, #d9dee5);
}

.rte-btn b { font-weight: 700; }
.rte-btn i { font-style: italic; }
.rte-btn u { text-decoration: underline; }

.rte-sep {
    width: 1px;
    margin: 2px 4px;
    background: var(--border, #d9dee5);
}

.rte-editable {
    min-height: 120px;
    padding: 10px 12px;
    outline: none;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.rte-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-3, #9aa4b2);
}

/* Font sizes — shared with .public-box-details on the public page. */
.box-fs-small { font-size: 0.85em; }
.box-fs-medium { font-size: 1em; }
.box-fs-large { font-size: 1.35em; }