/* ==========================================================================
   Laseo's own CSS - everything that is NOT a Tailwind utility.
   GENERATED BY NOTHING: this file is written by hand and served as it is.

   It is loaded by _Layout.cshtml in EVERY environment, deliberately, unlike
   output.css which exists only outside Development. That is the whole point of
   the split: a rule in here behaves the same locally and in production, and
   needs no Tailwind rebuild to take effect.

   Plain CSS only - no @tailwind, no @apply, no @layer. Anything that needs the
   Tailwind toolchain belongs in input.css.
   ========================================================================== */

/* Hides a scrollbar without losing the scrolling. */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   .laseo-guide - the model information sheet.
   The sheet is stored in part_model.guide_fr / guide_en as bare h3/p/ul/table,
   so it cannot carry Tailwind classes: it is styled from the outside, once.
   The same class will serve the popup and the public model page, from the
   same column - one source, two surfaces.
   Deliberately outside @layer: these are descendant selectors on HTML that
   comes from the database, so Tailwind's content scan must not tree-shake
   them, and they have to win over the Preflight reset.
   ========================================================================== */

/* The reading measure. One variable, tuned once, used by the popup and by the
   public model page. 80ch is the top of the comfortable range at this size:
   below 70 the sheet scrolls too much, above 90 the eye loses the next line. */
:root { --laseo-measure: 80ch; }

/* The scroller is a query container: a figure floats beside the text when the
   column is wide and stacks when it is not. What decides is the width of THIS
   column, not the window's - a media query cannot see that. */
.laseo-guide-scroll { container-type: inline-size; }

.laseo-guide {
    color:#334155; font-size:0.9375rem; line-height:1.58;
    max-width:var(--laseo-measure);
}
.laseo-guide > *:first-child { margin-top:0; }

.laseo-guide h3 {
    margin:1.45rem 0 .6rem; padding-bottom:.35rem;
    font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    color:#0F172A; border-bottom:1px solid #e2e8f0;
    scroll-margin-top:.5rem;
}
.laseo-guide p  { margin:.6rem 0; }
.laseo-guide ul { margin:.6rem 0; padding-left:1.15rem; list-style:disc; }
.laseo-guide li { margin:.35rem 0; }
.laseo-guide strong { font-weight:600; color:#0F172A; }
.laseo-guide em     { font-style:italic; }

/* Each block carries the reading width itself, not the box. A paragraph that
   ends up UNDER a floated figure keeps the same measure as one beside it -
   otherwise the line length jumps from 60 to 95 characters mid-sheet. */
.laseo-guide > h3,
.laseo-guide > p,
.laseo-guide > ul,
.laseo-guide > table { max-width:var(--laseo-measure); }

/* Ruled on every side, not just under each row. A sheet's tables carry figures
   read ACROSS - a screw size against its clearance - and a table with no
   vertical rule reads as three columns of loose text, which is exactly what it
   looked like before. The outer border is on the table, the inner ones on the
   cells, so collapse does not double them. */
.laseo-guide table {
    width:100%; margin:.85rem 0; border-collapse:collapse;
    font-size:.875rem; font-variant-numeric:tabular-nums;
    border:1px solid #cbd5e1; border-radius:.375rem; overflow:hidden;
}
.laseo-guide th {
    padding:.4rem .75rem; text-align:left; background:#F1F5F9;
    font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    color:#475569; border:1px solid #cbd5e1;
}
.laseo-guide td { padding:.4rem .75rem; border:1px solid #e2e8f0; }
.laseo-guide tr:nth-child(even) td { background:#fafafa; }

/* ---- Images -------------------------------------------------------------
   No photo ships today, but the slot is ready: a picture is written straight
   into guide_fr as <figure><img><figcaption>, so adding one later needs no
   column, no table and no code change. Conventions:
     alt          what an answer engine reads of the image. Never empty.
     class="full" full width, for a drawing that has to be read across.
     (no class)   floats right of the text on a wide column.
   See docs/Makerjs/fiche-modele-conventions.md. */
.laseo-guide figure { margin:.9rem 0; }
.laseo-guide figure img {
    display:block; width:100%; height:auto;
    border:1px solid #e2e8f0; border-radius:.5rem; background:#fff;
}
.laseo-guide figcaption { margin-top:.35rem; font-size:.8125rem; color:#64748b; }

/* Wide column: the figure floats and costs no vertical space at all. That is
   most of the scrolling saved on a sheet that carries two or three images. */
@container (min-width: 680px) {
    .laseo-guide figure {
        float:right; width:300px; clear:right;
        margin:.25rem 0 .9rem 1.6rem;
    }
    .laseo-guide figure.full { float:none; width:100%; margin:.9rem 0; }

    /* A floated figure eats 300 px of the column. Without this the text would
       be squeezed to 45 characters and the sheet would scroll MORE than with
       no image at all - the opposite of the point. */
    .laseo-guide:has(figure) { max-width:calc(var(--laseo-measure) + 300px + 1.6rem); }
}

/* A five column table does not fit a phone. Scroll the table, not the dialog. */
@media (max-width:640px) {
    .laseo-guide table { display:block; overflow-x:auto; white-space:nowrap; }
}