/*******************************************************************************
 *  responsive layer over the original fixed 950px table layout.
 *  added 2026-09-21.
 *
 *  loaded by an @import at the top of stylesheet.css, which every page on the
 *  site links, including the sub pages that render inside an iframe. one file,
 *  every surface.
 *
 *  the shell markup carries the hooks this file targets:
 *    table.shell    the 950px wrapper
 *    tr.body-row    the row holding ornament / subnav / content
 *    td.ornament    the disassembly background column
 *    td.gutter      the 10px spacer columns
 *    td.subnav      sub navigation column
 *    td.main        content column
 *    table.navbar   top level nav
 *    table.footerbar
 ******************************************************************************/

/* ------------------------------------------------------------------ all widths */

html
{
    -webkit-text-size-adjust: 100%;
}

/*
 * never let an oversized image push the page sideways.
 *
 * height:auto is withheld from any image that declares a height attribute,
 * because this site is held together by 1x1 gifs stretched with width and
 * height attributes. auto makes such a gif resolve its square intrinsic ratio,
 * which turns a 1px rule into a block as tall as the page is wide. a content
 * image carries no height attribute, so it still scales correctly.
 */
img
{
    max-width: 100%;
}

img:not([height])
{
    height: auto;
}

table.shell,
table[width="950"]
{
    width:     100% !important;
    max-width: 950px;
}

table.shell
{
    margin: 0 auto;
}

/* long advisory output and pgp blocks wrap instead of scrolling the page */
pre
{
    white-space: pre-wrap;
    word-wrap:   break-word;
    overflow-x:  auto;
    max-width:   100%;
}

.content,
.content_small
{
    overflow-wrap: break-word;
}

/*
 * sub pages used to load into an absolutely positioned iframe pinned to 95% of
 * the cell height, which trapped a long document in a short box. they size to
 * their own content now, driven by iframe_autosize.js.
 */
iframe.autosize
{
    display: block;
    width:   100%;
    border:  0;
}

/* ------------------------------------------------------------ phone + tablet */

@media (max-width: 820px)
{
    table.shell,
    table.shell td,
    table.shell table
    {
        box-sizing: border-box;
    }

    /* nothing in this layout may hold a hard no-wrap on a narrow screen */
    table.shell td[nowrap],
    table.shell [nowrap]
    {
        white-space: normal !important;
    }

    /*
     * the whole shell stacks. a td turned into a block inside a live table row
     * still takes its width from the table's column algorithm, which is how the
     * content column ended up 320px wide on a 500px screen, so every level from
     * the table down to the cell is blocked out together.
     */
    table.shell,
    table.shell > tbody,
    table.shell > tbody > tr,
    table.shell > tbody > tr > td
    {
        display: block !important;
        width:   auto !important;
        height:  auto !important;
    }

    tr.body-row > td.ornament,
    tr.body-row > td.gutter,
    .fader
    {
        display: none !important;
    }

    /*
     * content first, sub navigation under it. on a phone the subnav is a full
     * screen of links standing between the reader and the page they asked for,
     * and the section nav is already in the header.
     */
    table.shell > tbody > tr.body-row
    {
        display:        flex !important;
        flex-direction: column;
    }

    tr.body-row > td.main
    {
        order: 1;
    }

    tr.body-row > td.subnav
    {
        order:      2;
        margin-top: 10px;
    }

    /* readable body copy, and 16px keeps ios from zooming on focus */
    td,
    .content,
    .nav,
    .heading
    {
        font-size: 16px !important;
    }

    .content_small,
    .footer
    {
        font-size: 14px !important;
    }

    font[size="1"],
    font[size="2"]
    {
        font-size: 14px;
    }

    .header
    {
        font-size: 20px !important;
    }

    /* six nav items wrap three up, with a tap target that is actually tappable */
    table.navbar tbody
    {
        display: block;
    }

    table.navbar tr
    {
        display:   flex;
        flex-wrap: wrap;
    }

    table.navbar td
    {
        flex:      1 1 33%;
        width:     auto !important;
        min-width: 0;
    }

    /* cellpadding + a:link width:100% add up past the row on a flex track */
    table.navbar td
    {
        padding: 0 !important;
    }

    table.navbar a.nav
    {
        width:   auto !important;
        padding: 11px 2px;
    }

    /* footer stacks and centers rather than running off the right edge */
    table.footerbar tbody
    {
        display: block;
    }

    table.footerbar tr
    {
        display: block;
    }

    table.footerbar td
    {
        display:    block;
        width:      auto !important;
        text-align: center !important;
        padding:    3px 0;
    }

    /*
     * the blog keeps its own internal scroll, because its infinite scroll reads
     * the iframe's scroll position. give it the screen instead of 488px.
     */
    iframe#blog-frame
    {
        width:      100% !important;
        height:     calc(100vh - 250px) !important;
        min-height: 380px;
    }

    /*
     * the legacy standalone pages under /PaiMei, /process_stalking_manual and
     * /openrce are 700 to 800px layout tables with a width attribute. a global
     * cap is the only thing that reaches all of them without touching 300 files.
     */
    table
    {
        max-width: 100% !important;
    }

    /*
     * long unbreakable runs are what actually keep a legacy page wider than the
     * screen: the process stalker manual holds a shell command line joined by
     * non breaking spaces, which asks for 605px and will not wrap at any width.
     * "anywhere" both permits the break and counts against min content width,
     * and it only ever breaks a run that would otherwise overflow.
     */
    td, p, li, dd, dt, font, blockquote, div
    {
        overflow-wrap: anywhere;
    }

    /*
     * a percentage max-width contributes NOTHING to a table's min content width
     * under auto layout, so a legacy 700px page whose screenshots are wider than
     * the screen stays wider than the screen no matter what the table says. a
     * viewport unit is a definite length and does count, which is the whole
     * reason this is vw and not %. table-layout:fixed was tried first and
     * collapsed the manual's text column to a third of the screen.
     */
    img
    {
        max-width: calc(100vw - 32px) !important;
    }

    /*
     * word-wrap:break-word does not shrink a box's min content width, and a
     * table can never render narrower than that, so the pgp block on the
     * contact page kept the whole page 641px wide until this. "anywhere" is the
     * one value that counts against min content. soft wraps insert no
     * characters, so the key still copies out intact.
     */
    pre
    {
        overflow-wrap: anywhere;
    }

    /*
     * every nested table stays inside the screen. the contact page is the case
     * that needs this: an unsized table shrink wraps to the max content width
     * of the pgp block, which is wider than a phone no matter how the pre wraps.
     */
    table.shell table,
    .content table,
    .content_small table
    {
        max-width: 100% !important;
    }
}

/* ------------------------------------------------------------------- phone */

@media (max-width: 379px)
{
    table.navbar td
    {
        flex: 1 1 50%;
    }
}

@media (max-width: 520px)
{
    .header
    {
        font-size: 18px !important;
    }
}