/* ================================================================================
   CREATE.CSS - The + sheet, the venue finder, and the shared venue chip
   The sheet's structure comes from modals.css (.modal / .modal-backdrop /
   .modal-container / .modal-card). The finder is a full-screen overlay and
   brings its own layout. This file only adds what's specific to the three
   create surfaces.

   The finder's rules are scoped to #venueFinderOverlay rather than left as
   bare classes. base.css styles every input and button, and dark-mode.css
   adds more on [data-theme="dark"] input - both beat a single class, so an
   unscoped rule lost and the search box drew a second border inside the
   wrapper's. The id wins outright, so what's written here is what renders.
   ================================================================================ */

/* ================================
   CREATE SHEET - bottom-anchored
   A sheet, not a centred card: it's reached from the nav at the bottom
   of the screen, so it should rise from where the thumb already is.
   ================================ */
#createSheet {
    align-items: flex-end;
    padding: 0;
}

#createSheet .modal-container {
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
}

/* Sits ABOVE the nav, not over it. .modal is position:fixed so it
   ignores body's padding-bottom - the nav height has to be reserved
   here or the last action lands underneath it. */
#createSheet .modal-card {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
    animation: createSheetUp var(--transition) ease-out;
}

@keyframes createSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

#createSheet .create-sheet-handle {
    width: 38px;
    height: 4px;
    margin: var(--space-md) auto var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--border-medium);
    flex-shrink: 0;
}

/* ================================
   CREATE SHEET VENUE CHIP
   A control, never a question. Full-width tap target because it's the
   thing people will reach for when GPS has guessed the pub next door.

   Kept separate from the shared .venue-chip below: this one lives in a
   sheet with its own padding scale, and its label is an eyebrow over the
   venue name rather than a caption beside it.
   ================================ */
#createSheet .create-venue-chip {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: calc(100% - var(--space-xl) * 2);
    margin: 0 var(--space-xl) var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-muted);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), border-color var(--transition);
}

#createSheet .create-venue-chip:hover {
    background: var(--bg-option-hover);
    border-color: var(--border-purple);
}

#createSheet .create-venue-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

#createSheet .create-venue-info {
    flex: 1;
    min-width: 0;
}

#createSheet .create-venue-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Venue names run long ("The Old Bell Hotel & Brasserie") and this sits
   next to a Change affordance - clip rather than wrap and shove it out. */
#createSheet .create-venue-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Three states, and the colour says which one you're in.

   Green = GPS reckons you're here. It's a guess, so the affordance reads
   "Not here" - same treatment as snap's chip, because it's the same claim
   being made.

   Purple = you chose this, by picking a venue or by saying at home / out
   and about. Not a guess, so nothing to correct - just "Change".

   Neutral = nothing set. Reads as an empty field, which is what it is. */
#createSheet .create-venue-chip.is-verified {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.25);
}

#createSheet .create-venue-chip.is-verified:hover {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
}

/* Uppercase + tracking on the label only in the confirmed states - it turns
   the label into an eyebrow over the venue name rather than a caption
   beside it, which is what makes the card read so clearly. */
#createSheet .create-venue-chip.is-verified .create-venue-label {
    color: var(--green);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#createSheet .create-venue-chip.is-verified .create-venue-change {
    color: rgba(239, 68, 68, 0.9);
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

/* Chosen by hand, or an explicit at-home / out-and-about answer. */
#createSheet .create-venue-chip.is-set {
    background: var(--bg-purple);
    border-color: var(--border-purple);
}

#createSheet .create-venue-chip.is-set .create-venue-label {
    color: var(--purple);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* A bordered pill rather than bare link text. The chip is one big tap
   target, so this is signage for what tapping does - it needs enough
   presence to read as the control, without becoming a second button. */
#createSheet .create-venue-change {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-link);
    transition: color var(--transition), background var(--transition),
                border-color var(--transition);
}

/* ================================
   CREATE ACTIONS
   ================================ */
#createSheet .create-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: 0;
}

#createSheet .create-action {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-option);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), border-color var(--transition);
}

#createSheet .create-action:hover {
    background: var(--bg-option-hover);
    border-color: var(--border-purple);
}

/* Snap is the most-used action and it's the one losing a tap in this
   redesign - so it gets the biggest target and the accent border. */
#createSheet .create-action-primary {
    padding: var(--space-lg);
    border-color: var(--border-purple);
    background: var(--bg-purple);
}

#createSheet .create-action-icon {
    font-size: var(--text-2xl);
    flex-shrink: 0;
}

#createSheet .create-action-primary .create-action-icon {
    font-size: var(--text-3xl);
}

#createSheet .create-action-content h3 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}

#createSheet .create-action-primary .create-action-content h3 {
    font-size: var(--text-lg);
}

#createSheet .create-action-content p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ================================
   VENUE FINDER
   A full-screen overlay, opened by every flow that needs a venue and every
   way of adding one. It was a modal; a modal could only ever show five rows
   of a list that routinely runs to a dozen, and back dismissed it rather
   than returning you to what was underneath.

   Painting, the nav-height padding and the flex column all come from
   .overlay in base.css - this only adds what's specific to the finder.
   ================================ */
#venueFinderOverlay {
    /* Stacks ON TOP of the overlay that opened it: snap, results and the
       create sheet all stay open behind rather than being force-closed. */
    z-index: var(--z-overlay-stacked);

    /* .overlay is overflow-y: auto, and the list inside scrolls too - two
       scroll containers means the header drifts and the list fights the
       page. The finder scrolls in exactly one place. */
    overflow: hidden;
}

#venueFinderOverlay .venue-finder-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Each screen is a full-height column, so the header and search box stay
   put and only the list scrolls. The horizontal padding lives here, which
   is what the rows' negative margin below bleeds back out against. */
#venueFinderOverlay .venue-finder-screen {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-lg);
}

#venueFinderOverlay .venue-finder-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    padding: var(--space-lg) 0 var(--space-md);
    flex-shrink: 0;
}

/* The duplicate-check screen puts its ‹ beside the title instead. */
#venueFinderOverlay .venue-finder-header-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

/* Not .modal-title: that one is white on a gradient header, which is
   invisible on the page background this overlay paints. */
#venueFinderOverlay .venue-finder-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

#venueFinderOverlay .venue-finder-header-row .venue-finder-title {
    flex: 1;
}

#venueFinderOverlay .venue-finder-subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ================================
   SEARCH BOX
   The wrapper carries the border and background so the icon sits inside
   it; the field itself is stripped right back. Both halves are scoped to
   the id because base.css styles every input with a 2px border and
   dark-mode.css adds another - unscoped, the field drew its own border
   inside the wrapper's.
   ================================ */
#venueFinderOverlay .venue-finder-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-input);
    border: 2px solid var(--border-light);
    transition: border-color var(--transition), box-shadow var(--transition);
}

#venueFinderOverlay .venue-finder-search-wrap:focus-within {
    border-color: var(--border-purple);
    box-shadow: 0 0 0 3px var(--bg-purple);
}

#venueFinderOverlay .venue-finder-search-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

#venueFinderOverlay .venue-finder-search,
#venueFinderOverlay .venue-finder-search:focus {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-md);
    outline: none;
    box-shadow: none;
}

#venueFinderOverlay .venue-finder-search::placeholder {
    color: var(--text-muted);
}

/* ================================
   THE LIST
   ================================ */
/* Only this scrolls - the At home / Out & about options never scroll off,
   they're answers, not fallbacks. Bled out to the screen edges so a row's
   tap target and hover run the full width. */
#venueFinderOverlay .venue-picker-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: var(--space-sm) calc(var(--space-lg) * -1) 0;
    padding-bottom: var(--space-sm);
}

/* In add mode the At home / Out & about row is hidden, so the list has to
   keep its own clearance from the nav's raised + button. */
#venueFinderOverlay.is-add .venue-picker-results {
    padding-bottom: var(--space-4xl);
}

#venueFinderOverlay .venue-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    min-height: 60px;
    cursor: pointer;
}

#venueFinderOverlay .venue-picker-row:hover {
    background: var(--bg-option-hover);
}

/* Both icons are the same box, so names line up down the list whichever
   group a row is in. */
#venueFinderOverlay .venue-picker-row-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-option);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    flex-shrink: 0;
}

#venueFinderOverlay .venue-picker-row-icon.is-add {
    background: var(--bg-purple);
    color: var(--purple);
    font-size: var(--text-lg);
    font-weight: 600;
}

#venueFinderOverlay .venue-picker-row-info {
    flex: 1;
    min-width: 0;
}

/* Flex rather than inline, so the tier dot sits pinned after the text
   rather than inside the ellipsis. */
#venueFinderOverlay .venue-picker-row-name {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

#venueFinderOverlay .venue-picker-row-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Says what tapping does before they tap. Without it a Google row looks
   like a venue that's already here. */
#venueFinderOverlay .venue-picker-row-add {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--purple);
    flex-shrink: 0;
}

#venueFinderOverlay .venue-picker-status {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

#venueFinderOverlay .venue-picker-group-head {
    padding: var(--space-sm) var(--space-lg) var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* An add is a network round trip. The list goes quiet so a second tap
   can't start a second one. */
#venueFinderOverlay.is-busy .venue-picker-results,
#venueFinderOverlay.is-busy .venue-picker-alt {
    opacity: .5;
    pointer-events: none;
}

/* ================================
   NO-VENUE OPTIONS
   ================================ */
#venueFinderOverlay .venue-picker-alt {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) 0 calc(var(--space-md) + env(safe-area-inset-bottom));
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
}

#venueFinderOverlay .venue-picker-alt-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-option);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

#venueFinderOverlay .venue-picker-alt-btn:hover {
    background: var(--bg-option-hover);
}

#venueFinderOverlay .venue-picker-alt-icon {
    font-size: var(--text-lg);
}

/* ================================
   IS IT ONE OF THESE?
   ================================ */
#venueFinderOverlay .venue-picker-back {
    width: 44px;
    height: 44px;
    margin-left: calc(var(--space-sm) * -1);
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-xl);
    cursor: pointer;
}

#venueFinderOverlay .venue-picker-possible-text {
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

#venueFinderOverlay .venue-picker-possible-text strong {
    color: var(--text-primary);
}

#venueFinderOverlay .venue-picker-candidates {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow-y: auto;
    min-height: 0;
}

/* A real button here, not a div: this is the primary answer to the
   question and has to be reachable by keyboard. */
#venueFinderOverlay .venue-picker-candidate {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    min-height: 68px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-option);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#venueFinderOverlay .venue-picker-candidate:hover {
    background: var(--bg-option-hover);
}

/* Secondary on purpose. Adding a new venue when we've just shown you two
   that might be it is the less likely answer, and the costlier one to get
   wrong. */
#venueFinderOverlay .venue-picker-add-anyway {
    flex-shrink: 0;
    margin: var(--space-md) 0 calc(var(--space-md) + env(safe-area-inset-bottom));
    width: 100%;
    height: 50px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

#venueFinderOverlay .venue-picker-add-anyway:hover {
    background: var(--bg-option-hover);
}

/* ================================
   SHARED VENUE CHIP
   "Which venue?" as it appears inside a flow rather than in the finder:
   snap and log-beer. Tapping either opens the finder, so they look the
   same wherever you meet them.

   A class, not an id, because it renders inside three different overlays.
   The two ids below cover both of them so it still outranks the base
   button styling wherever it lands.

   Green = GPS guessed it, purple = the user chose it. Same signal as the
   create sheet's chip above, at the scale those two sheets use.
   ================================ */
#snapOverlay .venue-chip,
#logBeerOverlay .venue-chip {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    min-height: 64px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-option);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

#snapOverlay .venue-chip:hover,
#logBeerOverlay .venue-chip:hover {
    background: var(--bg-option-hover);
}

#snapOverlay .venue-chip.is-verified,
#logBeerOverlay .venue-chip.is-verified {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.25);
}

#snapOverlay .venue-chip.is-verified:hover,
#logBeerOverlay .venue-chip.is-verified:hover {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
}

#snapOverlay .venue-chip.is-set,
#logBeerOverlay .venue-chip.is-set {
    background: var(--bg-purple);
    border-color: var(--border-purple);
}

#snapOverlay .venue-chip-icon,
#logBeerOverlay .venue-chip-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

#snapOverlay .venue-chip-info,
#logBeerOverlay .venue-chip-info {
    flex: 1;
    min-width: 0;
}

#snapOverlay .venue-chip-label,
#logBeerOverlay .venue-chip-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

#snapOverlay .venue-chip.is-verified .venue-chip-label,
#logBeerOverlay .venue-chip.is-verified .venue-chip-label {
    color: var(--green);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#snapOverlay .venue-chip.is-set .venue-chip-label,
#logBeerOverlay .venue-chip.is-set .venue-chip-label {
    color: var(--purple);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#snapOverlay .venue-chip-name,
#logBeerOverlay .venue-chip-name {
    font-size: var(--text-md);
    font-weight: 700;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#snapOverlay .venue-chip-action,
#logBeerOverlay .venue-chip-action {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-link);
}

#snapOverlay .venue-chip.is-verified .venue-chip-action,
#logBeerOverlay .venue-chip.is-verified .venue-chip-action {
    color: rgba(239, 68, 68, 0.9);
}