/* Indicators dialog (app/indicators-dialog.js) */

.id-back {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 6vh 16px 16px;
    background: rgba(0, 0, 0, 0.5);
}

.id-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    height: min(640px, 86vh);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    font: 14px/1.3 -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
}

.id-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 16px 12px 24px; }
.id-title { flex: 1; margin: 0; font-size: 20px; font-weight: 600; }
.id-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.id-close svg { width: 20px; height: 20px; }
.id-close:hover { background: var(--surface-2); color: var(--text); }

.id-search {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    margin: 0 24px 14px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: text;
}
.id-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.id-search svg { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.id-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

.id-body { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--border); }

.id-nav {
    flex: none;
    width: 220px;
    overflow-y: auto;
    padding: 8px 8px 16px;
    border-right: 1px solid var(--border);
}
.id-nav-title {
    padding: 14px 12px 6px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.id-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.id-nav-item:hover { background: var(--surface-2); }
.id-nav-item[aria-current="true"] { background: var(--surface-2); font-weight: 600; }
.id-nav-item > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-icon { flex: none; display: grid; width: 18px; height: 18px; color: var(--text-muted); }
.id-icon svg { width: 18px; height: 18px; }
.id-nav-item[aria-current="true"] .id-icon { color: var(--accent); }
.id-nav-item[data-section="favorites"] .id-icon { color: #f5a623; }
.id-count { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.id-pills { flex: none; display: flex; gap: 8px; padding: 12px 16px 10px; }
.id-pill {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font: 500 13px/1 -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
    cursor: pointer;
}
.id-pill[aria-pressed="true"] { background: var(--text); color: var(--surface); }

.id-cols, .id-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 92px; align-items: center; column-gap: 8px; padding: 0 16px; }
.id-cols {
    flex: none;
    height: 30px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.id-col-name { grid-column: 2; }

.id-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 4px 0 8px; list-style: none; }
.id-row { height: 38px; cursor: pointer; }
.id-row.is-selected { background: var(--surface-2); }
.id-star {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
}
.id-star svg { width: 16px; height: 16px; fill: none; }
.id-row:hover .id-star, .id-row.is-selected .id-star, .id-star:focus-visible { opacity: 1; }
.id-star:hover { color: #f5a623; }
.id-star.is-on { opacity: 1; color: #f5a623; }
.id-star.is-on svg { fill: currentColor; }

.id-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.id-name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-name mark { background: none; color: var(--accent); font-weight: 600; }
.id-badge {
    flex: none;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.id-badge.is-premium { background: rgba(245, 166, 35, 0.16); color: #f5a623; }
.id-badge.is-free { background: rgba(38, 166, 154, 0.16); color: #26a69a; }
.id-lock { flex: none; display: grid; color: var(--text-muted); }
.id-lock svg { width: 14px; height: 14px; }
.id-gem { flex: none; display: grid; }
.id-gem svg { width: 17px; height: 17px; stroke-width: 1.2; }
.id-gem.is-silver { --gem: #c7ced9; --gem-top: #eef2f7; --gem-edge: #8b95a5; }
.id-gem.is-bronze { --gem: #c97a45; --gem-top: #f0b48a; --gem-edge: #8a4b24; }
.id-gem.is-gold { --gem: #f5b82e; --gem-top: #ffe08a; --gem-edge: #b7791f; }
.id-gem .gem-body { fill: var(--gem); stroke: var(--gem-edge); }
.id-gem .gem-top { fill: var(--gem-top); stroke: var(--gem-edge); }
.id-gem .gem-line { stroke: var(--gem-edge); stroke-width: 0.9; }
.id-type, .id-by { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.id-by.is-ours { color: var(--accent); }
.id-empty { padding: 28px 16px; color: var(--text-muted); text-align: center; }

.id-toast {
    position: absolute;
    left: 50%;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--text);
    color: var(--surface);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
}
.id-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Phones: the dialog fills the screen and the sections become a scrolling row above the list. */
@media (max-width: 720px) {
    .id-back { padding: 0; }
    .id-dialog { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
    .id-head { padding: 14px 12px 10px 16px; }
    .id-title { font-size: 17px; }
    .id-search { margin: 0 16px 10px; }
    .id-body { flex-direction: column; }
    .id-nav { display: flex; gap: 6px; width: auto; overflow-x: auto; overflow-y: hidden; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
    .id-nav-title { display: none; }
    .id-nav-item { flex: none; width: auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; }
    .id-nav-item .id-count { display: none; }
    .id-cols, .id-row { grid-template-columns: 28px minmax(0, 1fr) 76px; padding: 0 10px; }
    .id-col-by, .id-by { display: none; }
    .id-star { opacity: 1; }
}