/* /addlog/ — "Add a dive". Layers on /common/css/dl.css +
   dl-components.css and reuses the dive page's story-card classes from
   /browse/browse.css (.dive-card, .dive-card__head, .dive-field,
   .dive-story-grid) so creating and editing a dive read as one editor.
   Everything page-specific is scoped under .addlog-page; shared .dl-* /
   .dlf-* components are only positioned here, never restyled. */

.addlog-page .addlog-form { padding-bottom: var(--space-6); }

/* ── Header ──────────────────────────────────────────────────────────── */
.addlog-page .addlog-header { margin-bottom: var(--space-4); }
.addlog-page .addlog-nav { margin: 0 0 var(--space-4); }

/* ── Sections ────────────────────────────────────────────────────────── */
.addlog-page .addlog-section { margin: 0 0 var(--section-gap); }
.addlog-page .addlog-section > .dl-section-header { margin-bottom: var(--space-3); }

/* Stacked label rows (dive page's storyField) inside our cards. */
.addlog-page .dive-field .site-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.addlog-page .site-link-host:empty { display: none; }
.addlog-page .addlog-map-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.addlog-page .addlog-map-link:hover { color: var(--accent); text-decoration: underline; }
.addlog-page .addlog-field-hint {
    margin: 0;
    color: var(--text-subtle);
    font-size: var(--font-size-xs);
    line-height: var(--line-normal);
}
/* DL.Form fields sitting directly in a card / grid: the grid gap spaces
   them, not the field's own bottom margin. */
.addlog-page .dive-card .dlf-field,
.addlog-page .addlog-fields > .dlf-field,
.addlog-page .addlog-when-grid > .dlf-field { margin: 0; min-width: 0; }

/* ── 1. When & where ─────────────────────────────────────────────────── */
.addlog-page .addlog-when-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
    align-items: start;
}
.addlog-page .addlog-started .dlf-label { color: var(--text); }
/* Labels of the When & where card read like the story labels next to
   them (the DL.Form ones are bolder by default). */
.addlog-page .addlog-when-grid .dlf-label,
.addlog-page .addlog-fields .dlf-label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: flex-end;
    line-height: var(--line-tight);
}
/* In the number grids a label that wraps (HU / DE) must not push its
   input below its neighbours': all labels get the same minimum height. */
.addlog-page .addlog-fields .dlf-label { min-height: var(--control-sm); }
/* Same height for the label row of DL.Form fields and storyField rows
   (which carry a Manage button), so Site and Dive center line up. */
.addlog-page .addlog-when-grid .dlf-label { min-height: var(--control-sm); margin-bottom: var(--space-1); }
.addlog-page .addlog-when-grid .dive-field { gap: var(--space-1); }
.addlog-page .addlog-when-grid .addlog-started .dlf-label { color: var(--text); }

.addlog-page .addlog-sign-ask {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.addlog-page .addlog-sign-ask[hidden] { display: none; }
.addlog-page .addlog-sign-ask input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }

/* Rating — five icon buttons. */
.addlog-page .addlog-stars { display: inline-flex; gap: 0; }
.addlog-page .addlog-stars button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-md);
    height: var(--control-md);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}
.addlog-page .addlog-stars button:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
}
.addlog-page .addlog-stars .dl-icon { width: var(--icon-lg); height: var(--icon-lg); }
.addlog-page .addlog-stars .star-on  { color: var(--favorite); }
.addlog-page .addlog-stars .star-on .dl-icon { fill: currentColor; }
.addlog-page .addlog-stars .star-off { color: var(--text-subtle); }
.addlog-page .addlog-stars button:hover { color: var(--favorite); }

/* ── 2. The dive (story) ─────────────────────────────────────────────── */
/* Notes + Media, Wildlife + Buddies, then Dive type & gear full width. */
.addlog-page .addlog-story-grid > .dive-logbook-card { grid-column: 1 / -1; }
.addlog-page .addlog-notes-input {
    min-height: calc(180px / var(--dl-zoom));
    font-size: var(--font-size-md);
    line-height: var(--line-normal);
    padding: var(--space-3);
    resize: vertical;
}
.addlog-page .addlog-logbook-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
    align-items: start;
}
.addlog-page .addlog-logbook-grid .addlog-field--full { grid-column: 1 / -1; }
.addlog-page .addlog-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.addlog-page .addlog-col > div:empty { display: none; }
.addlog-page .addlog-trash-field { max-width: 14rem; }

/* ── 3. Dive data ────────────────────────────────────────────────────── */
.addlog-page .addlog-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}
.addlog-page .addlog-gas-panel { grid-column: 1 / -1; }

/* Numeric fields sized to their content: a grid of narrow cells instead
   of 1 000 px-wide inputs. Labels share a fixed minimum height and sit on
   the bottom edge, so a label that wraps (HU / DE) keeps its input in
   line with its neighbours. */
.addlog-page .addlog-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(150px / var(--dl-zoom)), 1fr));
    gap: var(--space-4);
    align-items: start;
}
.addlog-page .addlog-fields--wide { grid-template-columns: repeat(auto-fill, minmax(calc(240px / var(--dl-zoom)), 1fr)); }
.addlog-page .addlog-fields > .addlog-field--span2 { grid-column: span 2; }
.addlog-page .addlog-fields .dlf-input-number { max-width: 11rem; }
.addlog-page .addlog-fields:empty { display: none; }
.addlog-page .addlog-mode-specific { display: contents; }
.addlog-page .addlog-mode-specific > .dlf-field { margin: 0; min-width: 0; }
.addlog-page .addlog-subhead {
    margin: var(--space-5) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Gas used / SAC: two quiet metrics above the tank table. */
.addlog-page .addlog-gas-stats { margin: 0 0 var(--space-4); max-width: 36rem; }
.addlog-page .addlog-tanks-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}
.addlog-page .addlog-tanks-foot:empty { display: none; }

/* ── 4. More details (accordion) ─────────────────────────────────────── */
.addlog-page .addlog-more #depth-profile-host:empty { display: none; }

/* ── End-of-form actions ─────────────────────────────────────────────── */
.addlog-page .addlog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.addlog-page .addlog-required-note {
    margin: 0 auto 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}
/* The save bar carries Create + Start over while the form is dirty;
   hide the duplicate pair so only one Create is ever on screen. */
html.dl-savebar-open .addlog-page .addlog-actions #reset-host,
html.dl-savebar-open .addlog-page .addlog-actions #submit-host { display: none; }

/* ── Phones / narrow ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .addlog-page .addlog-data-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .addlog-page .addlog-when-grid,
    .addlog-page .addlog-logbook-grid { grid-template-columns: 1fr; }
    .addlog-page .addlog-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .addlog-page .addlog-fields--wide { grid-template-columns: 1fr; }
    .addlog-page .addlog-fields .dlf-input-number { max-width: none; }
    .addlog-page .addlog-actions { justify-content: stretch; }
    .addlog-page .addlog-actions > span { flex: 1 1 auto; }
    .addlog-page .addlog-actions > span .dl-btn { width: 100%; }
    .addlog-page .addlog-required-note { flex: 1 1 100%; }
    /* The shared URL + title + Add row: URL on its own line. */
    .addlog-page #media-add-row .media-add-row { flex-wrap: wrap; }
    .addlog-page #media-add-row .media-url-field { flex: 1 1 100%; }
    .addlog-page #media-add-row .dlf-field:not(.media-url-field) { flex: 1 1 0; min-width: 0; }
}

/* Typeable combobox — a .dlf-input with a small "▾" trigger that
   pops a DL.Combo of presets. The user can pick a preset OR keep
   typing freely; the parser turns whatever they wrote into a value
   on submit (see parseGasMix / product handling in index.html).

   Built as a flex row that mimics .dlf-input's chrome on the wrapper
   so focus rings and error borders match the rest of the form. */
.addlog-combo {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* No `overflow: hidden` here — the inner input + trigger have
       transparent backgrounds, so the wrapper's own background carries
       the rounded corners; nothing visible needs to be clipped.
       (DL.Combo's popup is portalled to <body>, so it is immune to
       clipping ancestors — see the portal note in dl-combo.js.) */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.addlog-combo:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dlf-has-error .addlog-combo,
.addlog-combo.addlog-combo-invalid { border-color: var(--err); }
.addlog-combo .addlog-combo-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    background: transparent;
    color: var(--text);
    border: 0;
    font: inherit;
    font-size: var(--font-size-sm);
    outline: none;
}
.addlog-combo .addlog-combo-trigger {
    flex: 0 0 auto;
    width: 32px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-left: 1px solid var(--border);
    font-size: var(--font-size-md);
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.addlog-combo .addlog-combo-trigger:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── SSI log importer ────────────────────────────────────────────────
 * Modal chrome (.stat-modal, .stat-modal-card) is shared with the dive
 * picker (common/js/dl-dive-picker.js) and lives in /stat/stat.css. Both
 * lazy-load it under their own marker attribute, so either can be the
 * first to mount on this page. The rules below cover
 * just the importer-specific bits: the file-pick pane, the review
 * table, status pills, and the "+ new site" badge.
 */
.importssi-body            { display: flex;
                             flex-direction: column;
                             gap: 12px;
                             max-height: 60vh;
                             overflow: hidden; }

.importssi-file-pane       { display: flex;
                             flex-direction: column;
                             gap: 12px;
                             padding: 16px 4px; }
.importssi-file-label      { display: flex;
                             flex-direction: column;
                             gap: 6px;
                             font-size: 13px;
                             color: var(--text-muted); }
.importssi-file-input      { padding: 6px;
                             background: var(--bg-elev);
                             border: 1px solid var(--border);
                             border-radius: 6px;
                             color: var(--text);
                             font: inherit; }
.importssi-file-help       { font-size: 12px;
                             color: var(--text-muted); }
.importssi-err-host        { color: var(--err);
                             font-size: 13px;
                             min-height: 1.2em; }

.importssi-summary         { padding: 10px 12px;
                             background: var(--bg-elev);
                             border: 1px solid var(--border);
                             border-radius: 6px;
                             font-size: 13px;
                             color: var(--text-muted); }

.importssi-table-host      { flex: 1;
                             min-height: 0;
                             overflow: auto;
                             border: 1px solid var(--border);
                             border-radius: 6px;
                             background: var(--bg-card); }
.importssi-table           { width: 100%;
                             border-collapse: collapse;
                             font-size: 13px; }
.importssi-table thead th  { position: sticky;
                             top: 0;
                             background: var(--bg-elev);
                             border-bottom: 1px solid var(--border);
                             padding: 8px;
                             text-align: left;
                             font-weight: 600;
                             color: var(--text-muted);
                             font-size: 12px;
                             text-transform: uppercase;
                             letter-spacing: .03em; }
.importssi-table tbody td  { padding: 8px;
                             border-bottom: 1px solid var(--border); }
.importssi-table tbody tr:hover
                           { background: var(--bg-elev); }
.importssi-table tbody tr:last-child td
                           { border-bottom: 0; }

.importssi-row             { cursor: pointer; }
.importssi-row-dup         { opacity: .55; }
.importssi-row-error       { opacity: .65; }

.importssi-th-check,
.importssi-td-check        { width: 36px;
                             text-align: center; }

.importssi-status          { display: inline-block;
                             padding: 2px 8px;
                             border-radius: 999px;
                             font-size: 11px;
                             font-weight: 600;
                             text-transform: uppercase;
                             letter-spacing: .04em; }
.importssi-status-new      { background: color-mix(in srgb, var(--ok)  20%, transparent);
                             color: var(--ok); }
.importssi-status-dup      { background: color-mix(in srgb, var(--text-muted) 20%, transparent);
                             color: var(--text-muted); }
.importssi-status-error    { background: color-mix(in srgb, var(--err) 20%, transparent);
                             color: var(--err); }

.importssi-site-new-badge  { display: inline-block;
                             padding: 1px 6px;
                             border-radius: 999px;
                             background: var(--accent-soft);
                             color: var(--accent);
                             font-size: 10px;
                             font-weight: 600;
                             letter-spacing: .02em;
                             vertical-align: middle; }

.importssi-center-none     { color: var(--text-muted);
                             font-style: italic; }

/* WCAG 2.5.5 on touch — the inline combo caret rendered 29px wide. */
@media (max-width: 720px) {
    .addlog-combo-trigger {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

/* Media card: no empty list box above the add row. */
.addlog-page #media-list:empty { display: none; }