/* css/location.css
 *
 * The Locations tab and its dialog.
 *
 * Built on css/character.css, which is loaded on every page this is: the cards,
 * the tabs, the dropzone and the read-only view are the .sc- rules, so a
 * location and a character look like two of the same kind of thing. What is
 * here is only what a place needs and a person does not -- a wide picture, the
 * rooms, and the headings it covers. Namespaced .lc-.
 */

/* ---------------------------------------------------------------- the cards */

/* The character cards' flex row, with a narrower basis: a location card puts
   its picture on top rather than beside the text, so it reads well narrower
   and three fit where two characters do. */
.lc-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sc-card.lc-card {
    flex: 1 1 300px;
    max-width: 460px;
    flex-direction: column;
    gap: 10px;
}

/* 16:9, the shape a place is drawn and photographed in. Full width of the card,
   cropped by cover when an upload is another shape. */
.lc-card-face {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #e2dedb;
}

.lc-card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

/* The rooms the headings name after a dash. Quiet, one line. */
.lc-card-rooms {
    margin: -4px 0 7px;
    font-size: 12px;
    color: var(--text-muted, #8a8a8a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-card-rooms i {
    margin-right: 3px;
    font-size: 11px;
}

/* ------------------------------------------------- the editor's sidebar */

/* The character row's thumb, widened to the shape of a place. Same height as a
   character's, so the two panels' rows line up. */
.sc-thumb.lc-thumb {
    flex: 0 0 54px;
    width: 54px;
    height: 34px;
}

/* In a 260px column the dropdown takes the whole width and the AI button goes
   under it, rather than both being squeezed onto one line. */
.lc-tools-stack {
    flex-direction: column;
    align-items: stretch;
}

.lc-tools-stack .sc-untracked-select {
    flex: none;
    width: 100%;
}

.lc-tools-stack .sc-quick-sketch {
    align-self: flex-start;
}

/* --------------------------------------------------------------- the dialog */

.lc-dialog {
    width: min(640px, 92vw);
}

/* The character portrait's frame, laid on its side.
 *
 * Only once there is a picture. Empty, a full-width 16:9 frame was half the
 * dialog's height spent on an invitation, and pushed every field below the
 * fold -- so an empty one is a short strip that grows to the picture's shape
 * when one arrives. */
.sc-dropzone.lc-dropzone {
    aspect-ratio: auto;
    height: 96px;
    margin-bottom: 14px;
}

.sc-dropzone.lc-dropzone.has-image {
    aspect-ratio: 16 / 9;
    height: auto;
}

.lc-dropzone .sc-dropzone-prompt {
    font-size: 12.5px;
}

/* The headings it covers, as chips. The look of the profession chip. */
.lc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.lc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border: 1px solid #e4dccb;
    border-radius: 14px;
    background: #f7f0dc;
    font-size: 12.5px;
    font-weight: 600;
    color: #4a4644;
}

.lc-chip-count {
    padding: 0 6px;
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #8a8a8a);
}

.lc-chip button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #8d8781;
    cursor: pointer;
    line-height: 1;
}

.lc-chip button:hover {
    background: #f6eceb;
    color: var(--danger, #e85347);
}

.lc-chip-add {
    max-width: 360px;
}

/* Scenes, shot and rooms, under the headings. */
.lc-facts {
    margin: 0 0 14px;
}

/* The scenes set here, folded away: a busy place has thirty. */
.lc-scenes {
    margin: 4px 0 14px;
    font-size: 13px;
}

.lc-scenes summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary, #06798e);
}

.lc-scenes ol {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.lc-scenes li {
    padding: 2px 0;
    color: var(--text-soft, #555);
}

.lc-scene-n {
    display: inline-block;
    min-width: 30px;
    color: var(--text-muted, #8a8a8a);
}

/* A reader's view: the picture across the top. */
.lc-view-picture {
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e2dedb;
}

.lc-view-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------------------------ the sketches */

/* The Sketch button, full width under the picture: the location dialog has no
   portrait column for it to sit in. */
.lc-dialog .lc-sketch-btn {
    width: auto;
    margin: -6px 0 14px;
}

/* The character picker's grid, with wide tiles: places are drawn 16:9, and a
   2:3 frame would crop away most of every one. */
.ai-sk-grid.lc-sk-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.lc-sk-grid .ai-sk-card img {
    aspect-ratio: 16 / 9;
}

/* -------------------------------------------------------------- the AI step */

.lc-rebuild {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
    font-size: 13.5px;
}

.lc-notes {
    text-align: left;
    font-size: 13px;
    color: var(--text-soft, #555);
}

/* ------------------------------------------------------------ quick sketch */

/* The character quick sketch's look (.ai-qs-, css/ai-images.css), with
   places drawn wide: 16:9 thumbnails, not round faces or 2:3 portraits. */
.lc-qs-form .ai-qs-row img,
.lc-qs-form .ai-qs-noimg {
    width: 56px;
    height: 32px;
    border-radius: 4px;
}

.lc-qs-form .ai-qs-row.lc-qs-blank {
    opacity: .55;
    cursor: default;
}

.lc-qs-tiles {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.lc-qs-tiles .ai-qs-pic {
    aspect-ratio: 16 / 9;
}