/* Looking at one item in a day, and editing it.

   The add-to-a-day menu used to be declared here as well as in timeline.css,
   with different colours in each, and whichever file loaded last won. It is in
   timeline.css only; what is left here is the two states that belong to this
   file's own concern. */

/* ------------------------------------------------------------------ drawer */

.activity-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--scrim);
    backdrop-filter: blur(2px);
    animation: overlay-in var(--dur-2) var(--ease) both;
}

.activity-detail-drawer {
    width: min(440px, 94vw);
    height: 100%;
    margin-left: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    /* The drawer itself no longer scrolls; its body does, below a header that
       stays where the traveller left it. */
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-4);
    animation: activity-drawer-in var(--dur-3) var(--ease-out) both;
}
@keyframes activity-drawer-in {
    from { opacity: 0; transform: translateX(36px); }
    to { opacity: 1; transform: none; }
}

.activity-drawer-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.activity-drawer-kind {
    color: var(--fern);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.activity-drawer-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--ink-3);
    background: transparent;
    font-size: var(--text-md);
    line-height: var(--leading-flat);
}
.activity-drawer-close:hover { background: var(--canvas-2); color: var(--ink); }

.activity-drawer-title {
    margin: var(--space-5) 0 var(--space-5);
    color: var(--ink);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
    font-weight: var(--weight-semi);
}

.activity-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Room for the scrollbar so it does not sit on the text. */
    margin-right: calc(var(--space-2) * -1);
    padding-right: var(--space-2);
}

.activity-detail-list { margin: 0; border-top: 1px solid var(--line); }
.activity-detail-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}
.activity-detail-row dt,
.activity-detail-row dd { margin: 0; }
.activity-detail-row dt {
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.activity-detail-row dd {
    color: var(--ink);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.activity-drawer-section {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}
.activity-drawer-section > span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.activity-drawer-section p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.activity-details-edit-button {
    margin-left: auto;
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    color: var(--ink);
    background: var(--paper);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}
.activity-details-edit-button:hover { border-color: var(--ink-3); background: var(--canvas); }

/* ------------------------------------------------------------------ editing */

.activity-edit-form {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.activity-edit-field {
    position: relative;
    display: grid;
    gap: var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.activity-edit-field input,
.activity-edit-field textarea {
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    color: var(--ink);
    background: var(--paper);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}
.activity-edit-field input:focus,
.activity-edit-field textarea:focus {
    border-color: var(--fern);
    outline: 0;
    box-shadow: 0 0 0 3px var(--fern-tint-2);
}
.activity-edit-field textarea { resize: vertical; }
.activity-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.activity-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}
.activity-edit-actions button {
    min-height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}
.activity-remove-button {
    margin-right: auto;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    border: 1px solid transparent;
    color: var(--alert);
    background: transparent;
}
.activity-remove-button:hover { background: var(--alert-tint); }
.activity-cancel-button {
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    background: var(--paper);
}
.activity-cancel-button:hover { border-color: var(--ink-3); color: var(--ink); }
.activity-save-button {
    border: 1px solid var(--fern);
    color: var(--ink-inverse);
    background: var(--fern);
}
.activity-save-button:hover { background: var(--fern-hover); }

.activity-editor-layer { display: grid; place-items: center; padding: var(--space-5); }
.activity-editor-modal {
    width: min(620px, 100%);
    height: auto;
    max-height: min(760px, calc(100vh - var(--space-7)));
    margin: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-4);
    animation: panel-in var(--dur-3) var(--ease-out) both;
}

/* -------------------------------------------------------------- suggestions */
/* The list is positioned against the field's label, which wraps the input, so
   it follows the input wherever the form puts it. */

.place-search-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    max-height: 232px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-3);
}
.place-search-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.place-search-option.is-active { background: var(--fern-tint); }
.place-search-name {
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}
.place-search-kind {
    flex: none;
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}
.place-search-credit {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 21;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--canvas);
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    pointer-events: none;
}

/* --------------------------------------------- what a place is, at the foot */

.activity-guide-ask {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3);
    text-align: left;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.activity-guide-ask:hover,
.activity-guide-ask:focus-visible {
    border-color: var(--fern);
    background: var(--fern-tint);
    color: var(--ink);
}
.activity-guide-waiting { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: var(--text-xs); }
.activity-guide-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.activity-guide-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--fern);
}
.activity-guide-remove {
    flex: none;
    padding: 2px var(--space-1);
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}
.activity-guide-remove:hover { color: var(--ink); text-decoration: underline; }
.activity-guide-subheading {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}
.activity-guide-tips {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.activity-guide-tips li + li { margin-top: var(--space-1); }
.activity-guide-note {
    display: block;
    margin-top: var(--space-3);
    color: var(--ink-3);
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
}
.activity-guide-photo { margin: 0 0 var(--space-3); }
.activity-guide-photo img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}
.activity-guide-photo figcaption {
    padding-top: var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-2xs);
}
.activity-guide-more {
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}
.activity-guide-sources-label { color: var(--ink-3); font-size: var(--text-2xs); }
.activity-guide-more a {
    padding: 2px var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    color: var(--fern);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    text-decoration: none;
}
.activity-guide-more a:hover { border-color: var(--fern); background: var(--fern-tint); }

/* ------------------------------------------------------- add menu, expanded */

.add-item-header .add-item-trigger { white-space: nowrap; }
.add-item-header .add-item-trigger[aria-expanded="true"] {
    border-color: var(--fern);
    background: var(--fern-tint);
    color: var(--fern);
}
.add-item-menu-icon svg { display: block; }

@media (max-width: 760px) {
    .activity-detail-drawer { width: min(420px, 100vw); padding: var(--space-4); }
    .activity-editor-layer { align-items: end; padding: 0; }
    .activity-editor-modal {
        width: 100%;
        max-height: 88vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: var(--space-4);
    }
    .activity-edit-row { grid-template-columns: 1fr; }
    .add-item-menu { left: 0; right: auto; }
}

/* Things that change, named rather than answered. The most useful part of a
   briefing and the part this app is least willing to guess at. */
.activity-guide-check li { color: var(--ink); }
.activity-guide-check li::marker { color: var(--caution); }

/* Cost: a number and who it is for, on one line. */
.activity-cost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.activity-cost-per {
    min-height: 40px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}
.activity-price { display: flex; align-items: center; gap: var(--space-2); }
.activity-price svg { flex: none; color: var(--ink-3); }

/* What kind of thing this is. Eight chips with their drawings on them, because
   a dropdown would hide both the count and the pictures behind a click. */
.category-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.category-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--paper);
    color: var(--ink-2);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}
.category-chip svg { flex: none; color: var(--ink-3); }
.category-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.category-chip.is-on { border-color: var(--fern); background: var(--fern); color: var(--ink-inverse); }
.category-chip.is-on svg { color: var(--ink-inverse); }

/* Official places to check the things in "Check before you go". */
.activity-guide-official { margin-top: var(--space-2); }