/* ============================================================
   RESPONSIVE — layout & size adaptation only.
   Visual styling (colour, shadow, type) lives in the base
   stylesheets; this file adjusts size and flow per breakpoint
   and guards against horizontal overflow.
   ============================================================ */

/* ---- Overflow guards (all widths) ---------------------------------
   The result card's header row (code pill + unit + template select)
   and long descriptions could force the container wider than the
   viewport; body has overflow-x:hidden, so that clipped content.
   Let flex rows wrap and shrink instead. */
.container        { min-width: 0; }
.card, #resultCard { max-width: 100%; }
.card-header-top  { flex-wrap: wrap; }
.item-meta        { min-width: 0; flex-wrap: wrap; }
#itemDesc, .result-desc { overflow-wrap: anywhere; }

/* ---- Tablet / small laptop (≤ 768px) ---- */
@media (max-width: 768px) {
    body            { padding: calc(40px + 2.6rem + 1.75rem) 0.9rem 2.5rem; } /* top clears the glass bar */
    .container      { --stack-gap: 1.75rem; }
    .card-header    { padding: 1.6rem 1.4rem; }
    #itemDesc       { font-size: 1.2rem; }
    th, td          { padding: 1rem 1.2rem; }
    #searchInput    { font-size: 1.05rem; padding: 1.05rem 1.3rem; padding-right: 6.4rem; }
}

/* ---- Phone (≤ 480px) ---- */
@media (max-width: 480px) {
    :root           { --fab-size: 48px; --fab-gap: 1rem; } /* the Help launcher (help.css) */
    body            { padding: calc(36px + 1.5rem + 1.25rem) 0.6rem 2rem; } /* top clears the glass bar */
    .top-glass      { height: calc(36px + 1.5rem); }
    .site-brand     { top: 0.75rem; left: 0.75rem; height: 36px; font-size: 1.25rem; }
    .projects       { margin-top: 0.5rem; }
    .project-list   { grid-template-columns: minmax(0, 1fr); }
    .project-new    { flex-basis: 100%; max-width: none; flex-wrap: wrap; }
    .project-new .project-input, .project-rename .project-input { flex-basis: 100%; }
    .project-rename { flex-wrap: wrap; }
    .project-card   { flex-wrap: wrap; }
    .project-open   { flex-basis: 100%; }
    .project-tools  { display: flex; }
    .ways           { grid-template-columns: 1fr; gap: 1rem; margin-top: 0.5rem; }   /* one above the other */
    .way            { padding: 1.15rem; gap: 0.9rem; }
    .way.way-wide   { grid-column: auto; display: flex; align-items: stretch; }
    .way-wide ul    { grid-template-columns: 1fr; }
    .container      { --stack-gap: 1.4rem; }

    .card-header    { padding: 1.2rem 1rem; }
    .item-code      { font-size: 1rem; padding: 0.35rem 0.85rem; }
    .item-unit      { font-size: 0.92rem; }
    #itemDesc       { font-size: 1.05rem; }

    th, td          { padding: 0.7rem 0.8rem; font-size: 0.9rem; }
    th              { font-size: 0.7rem; }

    #searchInput    { font-size: 1rem; padding: 0.95rem 1rem; padding-right: 5.6rem; }
    #searchBtn      { width: 40px; height: 40px; right: 0.5rem; }
    .clear-search-btn { right: 3.3rem; width: 26px; height: 26px; }

    .top-controls   { top: 0.75rem; right: 0.75rem; gap: 0.35rem; }
    .account-menu   { top: calc(0.75rem + 36px + 0.5rem); right: 0.75rem; }
    .top-ctrl-btn, .burger-menu-btn, .top-ctrl-burger { width: 36px; height: 36px; }

    .card-footer    { padding: 1.2rem 1rem; flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .card-footer .copy-btn, .card-footer .add-cart-btn { flex: none; }   /* stacked: full width, height from the rule */
    /* Short screens: the whole drawer scrolls rather than squeezing the list; the actions stay in reach */
    .cart-panel     { width: 100%; right: -100%; padding: 1rem 0.9rem 0; overflow-y: auto; }
    .cart-list      { flex: none; overflow: visible; }
    .cart-actions   { position: sticky; bottom: 0; background: var(--bg-primary); padding-bottom: 1rem; }
    .cart-meta      { grid-template-columns: 1fr; gap: 0.15rem; }
    .cart-meta dd   { margin-bottom: 0.4rem; }

    .help-results   { max-height: 170px; }
    .chat-log       { max-height: 200px; }
}