/* ClarisWorks word-processor document, built on the window kit (window-kit.css).
   Glyphs are traced pixel-for-pixel from ClarisWorks screenshots (see _includes/clarisworks-*.html,
   generated by tools/clarisworks); chrome colours below are sampled from the same screenshots.

   Everything ClarisWorks-drawn is shown at --s = 2 (each traced pixel = 2px), which matches the
   kit's 2px lines: a 16px Mac control becomes 32px, a 14px scrollbar interior becomes 28px.
   One inch = --cw-in: fits 8.5in across the window, capped at 72px x 2, and rounded down to a
   multiple of 8px so 1/8in ticks land on whole pixels.
   Kept self-contained so it can be ported into JonahOS as the WP app. */

.cw-window {
    max-width: 1000px;
    container-type: inline-size;
    --s: 2;
    --cw-bar: #cccccc;
    --cw-face: #c0c0c0;
    --cw-hi: #ffffff;
    --cw-shadow: #808080;
    --cw-pressed-face: #808080;
    --cw-pressed-hi: #404040;
    --cw-panel-face: #cccccc;
    --cw-panel-shadow: #888888;
    /* inside the window's content box, beside the 8.5in page:
       well margins (8) + well borders (4) + v-scrollbar (30) */
    --cw-chrome: 42px;
}

.cw-window .window-content {
    --cw-in: max(24px, round(down, min(calc(72px * var(--s)), calc((100cqw - var(--cw-chrome)) / 8.5)), 8px));
    --cw-ml: var(--cw-in);
    --cw-mr: var(--cw-in);
    /* the 8.5in page (and the ruler with it) is centred when the window is wider */
    --cw-x: max(0px, round(down, calc((100cqw - var(--cw-chrome) - 8.5 * var(--cw-in)) / 2), 2px));
}


/* ============================================
   RULER BAR: format controls
   ============================================ */

.cw-window .cw-ruler-bar {
    padding: 0;
    border-bottom: 0;
    box-shadow: none;
    background: var(--cw-bar);
    position: relative;
    z-index: 1;
}

.cw-toolbar {
    /* groups flow with ClarisWorks' 12px gaps on one 22px row. Groups that don't fit
       wrap onto a second row, which is clipped, so only whole groups are ever shown */
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 8px 12px;
    box-sizing: border-box;
    height: 22px;
    padding: 4px 5px;
    zoom: var(--s);
    box-shadow: inset 0 -1px 0 var(--cw-panel-shadow);
}

.cw-group {
    position: relative;
    flex-shrink: 0;
    height: 14px;
}

/* Bevelled control: 1px black frame, white top/left, grey bottom/right (at 1x; the
   toolbar is zoomed). Neighbours overlap by 1px so groups share borders. */
.cw-btn {
    position: absolute;
    top: 0;
    height: 14px;
    padding: 0;
    border: 1px solid #000000;
    background: var(--cw-face);
    box-shadow: inset 1px 1px 0 var(--cw-hi), inset -1px -1px 0 var(--cw-shadow);
    --cw-hollow: var(--cw-face);
}

.cw-btn svg {
    position: absolute;
    left: 1px;
    top: 1px;
    display: block;
}

.cw-btn .f {
    fill: var(--cw-hollow);
}

.cw-btn.is-pressed,
.cw-btn:active {
    background: var(--cw-pressed-face);
    box-shadow: inset 1px 1px 0 var(--cw-pressed-hi);
    --cw-hollow: var(--cw-face);
}

.cw-btn:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: 1px;
    z-index: 1;
}

.cw-field {
    position: absolute;
    top: 0;
    height: 14px;
    border: 1px solid #000000;
    background: #ffffff;
}

.cw-field svg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

/* ============================================
   RULER: ticks at 1/8, 1/4, 1/2, 1 inch (3/5/7/9 px at 1x), then the groove.
   Drawn at --s; tick spacing follows --cw-in.
   ============================================ */

.cw-ruler {
    --px: calc(1px * var(--s));
    position: relative;
    height: calc(24 * var(--px));
    background-image:
        linear-gradient(to right, #000 var(--px), transparent 0),
        linear-gradient(to right, #000 var(--px), transparent 0),
        linear-gradient(to right, #000 var(--px), transparent 0),
        linear-gradient(to right, #000 var(--px), transparent 0),
        linear-gradient(to bottom,
            #000000 0 var(--px),
            #ffffff var(--px) calc(18 * var(--px)),
            #000000 calc(18 * var(--px)) calc(19 * var(--px)),
            var(--cw-bar) calc(19 * var(--px)) calc(21 * var(--px)),
            var(--cw-panel-shadow) calc(21 * var(--px)) calc(22 * var(--px)),
            #000000 calc(22 * var(--px)) calc(23 * var(--px)),
            var(--cw-panel-shadow) calc(23 * var(--px)) calc(24 * var(--px)));
    background-size:
        var(--cw-in) calc(9 * var(--px)),
        calc(var(--cw-in) / 2) calc(7 * var(--px)),
        calc(var(--cw-in) / 4) calc(5 * var(--px)),
        calc(var(--cw-in) / 8) calc(3 * var(--px)),
        100% 100%;
    background-position: var(--cw-x) var(--px), var(--cw-x) var(--px), var(--cw-x) var(--px), var(--cw-x) var(--px), 0 0;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
}

.cw-ruler-num {
    position: absolute;
    top: calc(5 * var(--px));
    left: calc(var(--cw-x) + var(--n) * var(--cw-in) + 3 * var(--px));
    line-height: 0;
}

.cw-ruler-num svg,
.cw-marker svg {
    display: block;
    zoom: var(--s);
}

/* Markers are anchored on their indent position; --dx/--dy (1x px) come from the trace */
.cw-marker {
    position: absolute;
    top: calc(var(--dy) * var(--s));
    line-height: 0;
}

.cw-marker-left {
    left: calc(var(--cw-x) + var(--cw-ml) + var(--dx) * var(--s));
}

.cw-marker-right {
    left: calc(var(--cw-x) + 8.5 * var(--cw-in) - var(--cw-mr) + var(--dx) * var(--s));
}

/* ============================================
   DOCUMENT
   ============================================ */

.cw-canvas {
    padding: calc(var(--cw-in) * 0.75) 0 calc(var(--cw-in) * 0.5);
}

/* The grey guide is the text boundary (8.5in page minus margins), like ClarisWorks' page view */
.cw-page {
    margin-left: calc(var(--cw-x) + var(--cw-ml));
    width: calc(8.5 * var(--cw-in) - var(--cw-ml) - var(--cw-mr));
    max-width: calc(100% - var(--cw-ml));
    padding: 8px 10px 32px;
    border: 1px solid #c8c8c8;
    /* set by the alignment buttons (clarisworks.js) */
    text-align: left;
}

.cw-page p {
    font-family: var(--font-body);
    /* W95FA capitals are 0.72em: 10px x --s puts them at or above the ruler digits
       (7px x --s); 12px x --s is 24px text at 2x */
    font-size: calc(12px * var(--s));
    line-height: 1.6;
    color: #000000;
    text-align: inherit;
}

.cw-page p + p {
    margin-top: 0.8em;
}

/* ============================================
   SCROLLBARS + BOTTOM STRIP at 2x: 14px Mac scrollbar interior -> 28px,
   between the kit's 2px lines (2 + 28 + 2 = 32 = a 16px Mac control at 2x)
   ============================================ */

.cw-window .window-scrollbar-v {
    width: 30px;
    background-size: 28px auto;
}

.cw-window .scroll-arrow,
.cw-window .scroll-thumb {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    background-size: 28px 28px;
}

.cw-window .scroll-track {
    min-width: 28px;
    min-height: 28px;
}

.cw-window .window-bottom {
    height: 29px;
}

.cw-window .window-scrollbar-h {
    height: 30px;
    background-size: auto 28px;
}

.cw-window .resize-handle {
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
}

/* ============================================
   STATUS BAR: zoom, zoom out/in, page view, page — left of the h-scrollbar.
   Panels are 16px (1x) zoomed to 32px; they overlap the 2px lines above and
   below so their own borders are the strip's lines, as in ClarisWorks.
   ============================================ */

.cw-status {
    position: relative;
    z-index: 1;
    /* one 1x pixel short of the panels, so the last panel's right border sits on the
       h-scrollbar's left line (a single shared line, as in ClarisWorks) */
    width: calc(188px * var(--s));
    height: 30px;
    flex-shrink: 0;
    background: var(--cw-panel-face);
    border-bottom: 2px solid #000000;
}

.cw-status-panels {
    position: absolute;
    left: 0;
    /* zoom scales this element's own offsets too: -1px here is -2px on screen,
       lifting the panels onto the 2px line above */
    top: -1px;
    width: 190px;
    height: 16px;
    zoom: var(--s);
}

.cw-panel,
.cw-status .cw-status-btn {
    position: absolute;
    top: 0;
    height: 16px;
    border: 1px solid #000000;
    background: var(--cw-panel-face);
    box-shadow: inset 1px 1px 0 var(--cw-hi), inset -1px -1px 0 var(--cw-panel-shadow);
}

.cw-status .cw-status-btn:active {
    background: var(--cw-pressed-face);
    box-shadow: inset 1px 1px 0 var(--cw-pressed-hi);
}

.cw-panel svg {
    position: absolute;
    display: block;
}

.cw-zoom .cw-zoom-value {
    left: 7px;
    top: 4px;
}

.cw-page-field svg {
    left: 1px;
    top: 1px;
}

/* Small windows: the page fills the canvas edge to edge (the ruler stays at 2x) */
@container (max-width: 560px) {
    .cw-window .window-content {
        --cw-ml: 0px;
        --cw-mr: 0px;
        --cw-x: 0px;
    }

    .cw-page {
        width: auto;
        max-width: none;
    }

    .cw-page p {
        font-size: 20px;
    }

    /* the inch is too short for the finer ticks, so only whole inches are marked */
    .cw-ruler {
        background-size:
            var(--cw-in) calc(9 * var(--px)),
            0 0,
            0 0,
            0 0,
            100% 100%;
    }

    /* the page's right edge is the canvas edge, not 8.5in */
    .cw-marker-right {
        left: calc(100cqw - var(--cw-chrome) + var(--dx) * var(--s));
    }
}

/* Status strip: the zoom/page-view buttons go first, then the page field, so the
   h-scrollbar (arrows + thumb, 88px) and resize box always keep their room.
   Full strip: 376 + 88 + 28 + 8 (bottom margins) = 500px of window content. */
@container (max-width: 500px) {
    .cw-status {
        width: calc(112px * var(--s));
    }

    .cw-status-panels {
        width: 113px;
    }

    .cw-status .cw-status-btn {
        display: none;
    }

    .cw-status .cw-page-field {
        left: 33px !important;
        width: 80px !important;
    }
}

/* Page-field strip: 224 + 88 + 28 + 8 = 348px; below that only the zoom box stays */
@container (max-width: 348px) {
    .cw-status {
        width: calc(33px * var(--s));
    }

    .cw-status-panels {
        width: 34px;
    }

    .cw-status .cw-page-field {
        display: none;
    }
}