/* Push drawer: a side panel that collapses to a thin strip so the main
   content can grow. Same mechanic as the nav rail collapse (class toggle +
   flex-basis transition + localStorage), generalised for page content.
   Markup pattern documented in templates/components/push_drawer_toggle.html. */

.push-drawer {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.push-drawer__main {
    flex: 1 1 auto;
    min-width: 0;
}

.push-drawer__panel {
    flex: 0 0 var(--push-drawer-w, 50%);
    min-width: 0;
    transition: flex-basis 0.15s ease;
}

.push-drawer__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid var(--grey-lighter);
    border-radius: var(--border-radius-sm, 4px);
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    color: var(--deep-teal);
    font-size: 0.8rem;
    font-weight: 600;
}

.push-drawer__toggle:hover {
    background-color: var(--seasalt-white);
}

.push-drawer__toggle:focus-visible {
    outline: 2px solid var(--deep-teal);
    outline-offset: 2px;
}

/* Collapsed: the panel becomes a thin strip with a vertical label.
   Child combinators throughout: drawers nest (the assistant drawer wraps
   whole pages that carry their own drawers), and a descendant selector here
   lets an outer drawer's is-collapsed crush a nested drawer's panel to the
   48px strip and hide its content regardless of the inner drawer's own
   state. That is exactly what broke the review drawer. */
.push-drawer.is-collapsed > .push-drawer__panel {
    flex-basis: 48px;
}

.push-drawer.is-collapsed > .push-drawer__panel > .push-drawer__content {
    display: none;
}

.push-drawer.is-collapsed > .push-drawer__panel > .push-drawer__toggle {
    flex-direction: column;
    width: 100%;
    min-width: 24px; /* WCAG 2.5.8 target size (A11Y-018): the strip measured 23 px */
    padding: 0.6rem 0.2rem;
}

.push-drawer.is-collapsed > .push-drawer__panel > .push-drawer__toggle .push-drawer__strip-label {
    writing-mode: vertical-rl;
}

/* Below tablet the columns stack anyway; the panel just collapses vertically. */
@media (max-width: 768px) {
    .push-drawer {
        flex-direction: column;
        align-items: stretch; /* the main pane takes the drawer's width, never its content's */
    }
    .push-drawer__panel {
        flex-basis: auto;
        width: 100%;
    }
    .push-drawer.is-collapsed > .push-drawer__panel {
        flex-basis: auto;
    }
    .push-drawer.is-collapsed > .push-drawer__panel > .push-drawer__toggle {
        flex-direction: row;
        width: auto;
        padding: 0.35rem 0.6rem;
    }
    .push-drawer.is-collapsed > .push-drawer__panel > .push-drawer__toggle .push-drawer__strip-label {
        writing-mode: horizontal-tb;
    }
}

@media (prefers-reduced-motion: reduce) {
    .push-drawer__panel {
        transition: none;
    }
}

/* Stacked variant: the panel sits centred in the normal page flow (e.g. under
   a metrics strip) and the content drops down/up instead of pushing sideways.
   Markup adds a .push-drawer__reveal wrapper around .push-drawer__content
   (see push_drawer_toggle.html). Additive: plain .push-drawer is unaffected. */

.push-drawer--stacked {
    display: block;
}

.push-drawer--stacked .push-drawer__panel {
    flex-basis: auto;
    max-width: 56rem;
    margin: 0 auto 1.5rem;
    transition: none;
}

/* A core action, not a side toggle: full button sizing in both states. */
.push-drawer--stacked .push-drawer__toggle {
    display: flex;
    margin: 0 auto 0.75rem;
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    gap: 0.6rem;
}

/* The shared JS/markup uses left/right chevrons; rotating them -90deg makes
   collapsed (left) point down and expanded (right) point up. */
.push-drawer--stacked [data-push-drawer-icon] {
    transform: rotate(-90deg);
}

/* Drop-down reveal: 1fr <-> 0fr grid rows animate height without a magic
   max-height. The card styling lives on an inner element so the clipped
   (unpadded) content collapses to a true zero height. */
.push-drawer--stacked .push-drawer__reveal {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s ease;
}

.push-drawer--stacked .push-drawer__content {
    overflow: hidden;
    min-height: 0;
    padding: 0 6px 10px; /* room for the card shadow inside the clip */
    transition: visibility 0.2s;
}

.push-drawer--stacked .push-drawer__card {
    background: var(--white);
    border: 1px solid var(--grey-lighter);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

.push-drawer--stacked.is-collapsed .push-drawer__reveal {
    grid-template-rows: 0fr;
}

/* Base hides content with display:none; the stacked reveal keeps it in the
   grid so height can animate. visibility (flipping at the transition's end on
   collapse) keeps the closed form unpaintable and out of the tab order. */
.push-drawer--stacked.is-collapsed .push-drawer__content {
    display: block;
    visibility: hidden;
}

/* Collapsed toggle stays a normal centred button, never a vertical strip.
   Selectors mirror the base collapsed rules' child-combinator structure so
   these keep equal specificity and win by order. */
.push-drawer--stacked.is-collapsed > .push-drawer__panel > .push-drawer__toggle {
    flex-direction: row;
    width: auto;
    padding: 0.65rem 1.5rem;
}

.push-drawer--stacked.is-collapsed > .push-drawer__panel > .push-drawer__toggle .push-drawer__strip-label {
    writing-mode: horizontal-tb;
}

@media (prefers-reduced-motion: reduce) {
    .push-drawer--stacked .push-drawer__reveal,
    .push-drawer--stacked .push-drawer__content {
        transition: none;
    }
}

/* ---- Assistant drawer (base.html app-frame instance) ----------------------
   A full-height variant: the frame locks the shell to the viewport and
   scrolls inside .app-content, so this instance stretches its columns and
   scrolls the panel content independently instead of sitting in page flow. */
.push-drawer--assistant {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    gap: 0;
}

.push-drawer--assistant > .push-drawer__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Size container: pages nested inside the assistant drawer can adapt to
       the width they actually get, not the viewport (see review-workspace.css). */
    container-type: inline-size;
}

.push-drawer--assistant > .push-drawer__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--grey-lighter);
    background: var(--white);
    padding: 0.75rem;
}

.push-drawer--assistant > .push-drawer__panel > .push-drawer__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Assistant | Guide tab strip: fixed above the scrolling panes, hidden with
   the content when the drawer collapses to its strip. */
.assistant-drawer-tabs {
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
}

.push-drawer.is-collapsed > .push-drawer__panel > .assistant-drawer-tabs {
    display: none;
}

/* Both tabs share the inline --push-drawer-w (480px) so switching between
   Assistant and Guide never resizes the panel. assistant-drawer.js still
   toggles .is-guide-active for state/tests. */

/* Touch devices: the toggle strip is the only way to open/close a drawer,
   so it must meet the 44px minimum target (WCAG 2.5.8). Same treatment as
   .button.is-small in design-system.css and the .dc-* controls. */
@media (pointer: coarse) {
    .push-drawer__toggle {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Small screens: the assistant panel becomes a height-capped bottom sheet
   instead of splitting the fixed-height frame in half. Declared after the
   --assistant rules above so it wins the cascade at <=768px (the generic
   mobile block near the top of this file loses to them otherwise). dvh
   keeps the cap honest under the mobile URL bar. */
@media (max-width: 768px) {
    .push-drawer--assistant > .push-drawer__panel {
        border-left: none;
        border-top: 1px solid var(--grey-lighter);
        max-height: 45vh;
        max-height: 45dvh;
    }
}