/*
 * Locate2u Mesh — module documentation pages.
 *
 * Layered on top of /styles.css: the nav, footer, buttons, pills and status
 * dots are shared with the docs index and are NOT redefined here. Every
 * colour, radius, and spacing value below resolves to a token from
 * /brand/brand.css — if something is missing, add it to the source of truth
 * in loc-mesh/design/brand/tokens/colors_and_type.css and re-sync.
 */

/* ============================================================
   Page shell — breadcrumbs + module header
   ============================================================ */

.mod-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--l2u-s-8) var(--l2u-s-20) var(--l2u-s-24);
}

.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--l2u-s-2);
    font-size: 13px;
    color: var(--l2u-text-mute-2);
}

.crumbs a { color: var(--l2u-text-mute-2); transition: color .15s; }
.crumbs a:hover { color: var(--l2u-primary); }
.crumbs [aria-current="page"] { color: var(--l2u-bluish-grey); font-weight: 500; }
.crumbs__sep { opacity: 0.45; }

.mod-head {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
    max-width: 820px;
    margin: var(--l2u-s-8) 0 var(--l2u-s-12);
}

.mod-head__title { margin: 0; }
.mod-head__lead { margin: 0; }

.mod-head__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--l2u-s-2);
}

/* Module code chip — the value that identifies the module on the API. */
.pill--code {
    background: var(--l2u-blue-tint);
    border: 1px solid rgba(79, 139, 255, 0.28);
    color: var(--l2u-primary);
}
.pill--code .l2u-mono { color: inherit; }

/* Availability chips. Live = shipped and callable; preview = partially
   shipped; planned = designed, not yet callable. */
.pill--live,
.pill--preview,
.pill--planned {
    border: 1px solid var(--l2u-border);
    background: var(--l2u-white);
    color: var(--l2u-text-mute-2);
    font-weight: 500;
}
.pill--live .l2u-mono,
.pill--preview .l2u-mono,
.pill--planned .l2u-mono { color: inherit; }

.status-dot--warn { background: var(--l2u-warn); }
.status-dot--mute { background: var(--l2u-text-mute-2); }

/* ============================================================
   Two-column body — article + sticky rail
   ============================================================ */

.mod-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--l2u-s-16);
    align-items: start;
}

.mod-main { min-width: 0; }

.mod-sec { margin-bottom: var(--l2u-s-14); scroll-margin-top: 100px; }
.mod-sec:last-child { margin-bottom: 0; }

.mod-sec > h2 {
    margin: 0 0 var(--l2u-s-4);
    color: var(--l2u-bluish-grey);
}

.mod-sec > h3 {
    margin: var(--l2u-s-8) 0 var(--l2u-s-3);
    font-size: 16px;
    font-weight: 600;
    color: var(--l2u-bluish-grey);
}

.mod-sec p { margin: 0 0 var(--l2u-s-4); line-height: 1.7; }
.mod-sec p:last-child { margin-bottom: 0; }

.mod-sec ul { margin: 0 0 var(--l2u-s-4); padding-left: var(--l2u-s-5); }
.mod-sec li { margin-bottom: var(--l2u-s-2); line-height: 1.65; }
.mod-sec a:not(.btn) { color: var(--l2u-primary); }
.mod-sec a:not(.btn):hover { text-decoration: underline; }

.mod-sec strong { color: var(--l2u-bluish-grey); font-weight: 600; }

/* Inline code — permission codes, event types, field names. */
.code {
    font-family: var(--l2u-font-mono);
    font-size: 0.88em;
    padding: 2px 6px;
    border-radius: var(--l2u-r-xs);
    background: var(--l2u-cream-2);
    border: 1px solid var(--l2u-border);
    color: var(--l2u-bluish-grey);
    white-space: nowrap;
}

/* ============================================================
   Tables — permissions and events
   ============================================================ */

.mod-table {
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-card, 18px);
    background: var(--l2u-white);
    overflow: hidden;
    box-shadow: var(--l2u-shadow-card);
}

.mod-table__scroll { overflow-x: auto; }

.mod-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mod-table th {
    text-align: left;
    padding: var(--l2u-s-3) var(--l2u-s-5);
    background: var(--l2u-cream);
    border-bottom: 1px solid var(--l2u-border);
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--l2u-text-mute-2);
    font-weight: 500;
    white-space: nowrap;
}

.mod-table td {
    padding: var(--l2u-s-4) var(--l2u-s-5);
    border-bottom: 1px solid var(--l2u-border);
    vertical-align: top;
    line-height: 1.6;
}

.mod-table tr:last-child td { border-bottom: none; }
.mod-table td:first-child { white-space: nowrap; }

/* ============================================================
   Callouts
   ============================================================ */

.callout {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-2);
    padding: var(--l2u-s-5);
    border-radius: var(--l2u-r-lg);
    border: 1px solid var(--l2u-border);
    background: var(--l2u-cream-2);
    margin: 0 0 var(--l2u-s-4);
}

.callout__title {
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--l2u-text-mute-2);
}

.callout p { margin: 0; font-size: 14px; line-height: 1.65; }

.callout--info {
    background: var(--l2u-blue-tint);
    border-color: rgba(79, 139, 255, 0.28);
}
.callout--info .callout__title { color: var(--l2u-primary); }

.callout--warn {
    background: rgba(244, 161, 29, 0.10);
    border-color: rgba(244, 161, 29, 0.32);
}
.callout--warn .callout__title { color: rgb(163, 104, 6); }

/* ============================================================
   Right rail
   ============================================================ */

.mod-aside {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-6);
}

.mod-toc { display: flex; flex-direction: column; gap: var(--l2u-s-3); }

.mod-toc__head {
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--l2u-text-mute-2);
}

.mod-toc__links {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-2);
    border-left: 2px solid var(--l2u-border);
    padding-left: var(--l2u-s-4);
}

.mod-toc__links a {
    font-size: 13px;
    color: var(--l2u-text-mute-2);
    transition: color .15s;
}
.mod-toc__links a:hover { color: var(--l2u-primary); }

.rail-card {
    padding: var(--l2u-s-5);
    border-radius: var(--l2u-r-lg);
    background: var(--l2u-bluish-grey);
    color: var(--l2u-on-dark-9);
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
}

.rail-card__title { font-size: 14px; font-weight: 600; color: #fff; }
.rail-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--l2u-on-dark-7); }

/* ============================================================
   Prev / next
   ============================================================ */

.mod-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--l2u-s-4);
    margin-top: var(--l2u-s-16);
    padding-top: var(--l2u-s-8);
    border-top: 1px solid var(--l2u-border);
}

.mod-nav a {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-1);
    max-width: 48%;
}

.mod-nav__dir {
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--l2u-text-mute-2);
}

.mod-nav__name { font-size: 15px; font-weight: 500; color: var(--l2u-bluish-grey); }
.mod-nav a:hover .mod-nav__name { color: var(--l2u-primary); }
.mod-nav__next { text-align: right; margin-left: auto; }

/* ============================================================
   Module index grid
   ============================================================ */

.mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--l2u-s-5);
}

.mod-card {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
    padding: var(--l2u-s-6);
    background: var(--l2u-white);
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-card, 18px);
    box-shadow: var(--l2u-shadow-card);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.mod-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 139, 255, 0.4);
    box-shadow: var(--l2u-shadow-pop);
}

.mod-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-3);
}

.mod-card__title { margin: 0; color: var(--l2u-bluish-grey); }
.mod-card__body { margin: 0; font-size: 14px; line-height: 1.6; }

.mod-card__link {
    margin-top: auto;
    padding-top: var(--l2u-s-2);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--l2u-primary);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
    .mod-body { grid-template-columns: minmax(0, 1fr); }
    .mod-aside { position: static; flex-direction: row; flex-wrap: wrap; }
    .mod-toc { flex: 1 1 260px; }
    .rail-card { flex: 1 1 260px; }
}

@media (max-width: 720px) {
    .mod-page { padding: var(--l2u-s-6) var(--l2u-s-5) var(--l2u-s-16); }
    .mod-nav { flex-direction: column; }
    .mod-nav a { max-width: 100%; }
    .mod-nav__next { text-align: left; margin-left: 0; }
}

/* Fenced code sample.
   First added for /webhooks/signature/, which is the first docs page to carry
   real sample code. `.code` above is the INLINE span (nowrap, one token); this
   is the block form, so it must wrap-not-truncate and scroll horizontally
   rather than forcing the page wide on a phone. Values are brand tokens only. */
.code-block {
    margin: var(--l2u-s-4) 0;
    padding: var(--l2u-s-4);
    border-radius: var(--l2u-r-md);
    background: var(--l2u-dark-blue);
    border: 1px solid var(--l2u-dark-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.code-block code {
    font-family: var(--l2u-font-mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--l2u-on-dark-9);
    white-space: pre;
}