/* wishes.css — the wish tree on wishes-5.0.php.
 * Loaded AFTER explore.css, which supplies the shared visual language (top bar,
 * .xp-controls, the greys). Only what the tree itself needs lives here.
 * Palette is explore's: #c0c0c0 borders, #e8e8e8 heads, #f7f7f7 fills.
 * → nao-admin docs/www/wishes.md */

.wsh-summary { margin: 0.4em 0 0.1em 0; }
.wsh-sum-n   { font-size: 1.8em; font-weight: bold; margin-right: 0.35em; }
.wsh-sum-l   { color: #444; }
.wsh-prov    { color: #777; font-size: small; margin-bottom: 0.7em; }

.wsh-controls { margin-bottom: 0.5em; display: flex; gap: 0.4em; flex-wrap: wrap; }
.wsh-search {
    flex: 1 1 22em;
    max-width: 32em;
    padding: 0.25em 0.4em;
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    color: #000;
}
.wsh-expand {
    padding: 0.25em 0.7em;
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    color: #000;
    cursor: pointer;
}
.wsh-expand:hover { background-color: #e0e0e0; }

/* ---- level 1: class. Both heads are <button> for keyboard + screen readers;
   these rules undo the UA button look, they are not decoration. */
.wsh-class { margin-bottom: 2px; }
.wsh-classhead, .wsh-itemhead {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    width: 100%;
    text-align: left;
    font: inherit;
    border: 1px solid #c0c0c0;
    background-color: #e8e8e8;
    color: #000;
    padding: 0.3em 0.5em;
    cursor: pointer;
}
.wsh-classhead:hover { background-color: #e0e0e0; }
.wsh-caret  { width: 1em; flex: none; color: #666; }
.wsh-cname  { font-weight: bold; flex: none; }
.wsh-cn     { color: #444; flex: none; }
.wsh-citems { color: #777; font-size: small; flex: none; }

/* ---- level 2: object. */
.wsh-items { border-left: 2px solid #e8e8e8; margin-left: 0.5em; }
.wsh-item  { margin: 1px 0 1px 0.4em; }
.wsh-itemhead { background-color: #ffffff; border-color: #e0e0e0; }
.wsh-itemhead:hover { background-color: #f7f7f7; }
.wsh-name { flex: none; }
.wsh-n    { color: #444; flex: none; min-width: 3em; text-align: right; }

/* The bar is the only proportional element; it takes the slack so the two
   numeric columns stay put as rows expand. */
.wsh-bar {
    flex: 1 1 auto;
    min-width: 3em;
    height: 0.65em;
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
}
.wsh-barfill { display: block; height: 100%; background-color: #888888; }
.wsh-classhead .wsh-barfill { background-color: #555555; }
.wsh-pct { color: #777; flex: none; min-width: 3.4em; text-align: right; }

/* ---- level 3: the cross-tab. */
.wsh-detail {
    border: 1px solid #e0e0e0;
    border-top: 0;
    background-color: #fbfbfb;
    padding: 0.4em 0.6em;
}
.wsh-dim { display: flex; align-items: baseline; gap: 0.5em; margin: 0.2em 0; }
.wsh-dimlab {
    flex: none;
    width: 6.5em;
    color: #777;
    font-size: small;
    text-align: right;
}
.wsh-chips { display: flex; flex-wrap: wrap; gap: 0.25em; }
.wsh-chip {
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    padding: 0 0.35em;
    font-size: small;
    white-space: nowrap;
}
.wsh-chipk { margin-right: 0.35em; }
.wsh-chipv { color: #777; }
/* "unspecified" is the absence of a choice — visually recessive, never absent:
   knowing that 60% did NOT ask for it blessed is the finding. */
.wsh-chip-none { background-color: #f4f4f4; color: #888; border-color: #e0e0e0; }
.wsh-chip-role { background-color: #fbfbfb; }

.wsh-note { font-size: small; color: #666; margin: 0.35em 0 0.1em 0; }
.wsh-warn { color: #a00; }

.wsh-strings { margin-top: 0.4em; }
.wsh-more {
    font: inherit;
    font-size: small;
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    color: #000;
    padding: 0.1em 0.5em;
    cursor: pointer;
}
.wsh-more:hover { background-color: #e0e0e0; }
.wsh-strlist {
    list-style: none;
    margin: 0.3em 0 0 0;
    padding: 0;
    max-height: 22em;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
}
.wsh-strlist li {
    display: flex;
    gap: 0.6em;
    padding: 0.1em 0.4em;
    border-bottom: 1px solid #f4f4f4;
    font-size: small;
}
.wsh-strn { flex: none; min-width: 3em; text-align: right; color: #777; }
/* Player-typed text: wrap it rather than letting a long wish widen the page. */
.wsh-strt { overflow-wrap: anywhere; }

@media (max-width: 40em) {
    .wsh-dimlab { width: 4.5em; }
    .wsh-citems { display: none; }
}