/* The WINDOW FIELD layout (GLOSSARY: "window field") — FLOATING windows. The C++
   glue feeds each row's box as bound state (x,y,w,h,z) + the focused flag; this
   stylesheet turns that into the on-screen frame, chrome, and highlight. There is
   NO automatic layout here (that was the earlier focused-dominates tiling): every
   window is absolutely positioned, moved by a data-style translate and sized by
   data-style width/height. Tiled / sidebar containers are a LATER wave (windows
   will migrate between containers with captured-state animations). */

/* The field fills its whole surface (sized to the output by the glue) and is
   transparent so the scene below shows through every unpainted pixel (per-pixel
   alpha). Absolutely-positioned .win children stack within it. */
body.field {
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-family: Noto Sans;
}

/* A floating window frame. Absolutely positioned; data-style left/top place it,
   width/height size it, z-index stacks it (all driven by the bound box state).
   Column flex so the titlebar sits above the live body with no calc(). Rounded +
   overflow:hidden clips the body texture to the card; a 1dp border becomes the
   bright focus ring via .focused. */
div.win {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: #1c1c20ff;
    border-width: 1dp;
    border-color: #00000088;
    border-radius: 8dp;
    overflow: hidden;
}

/* The FOCUSED window gets a bright highlight ring (z-order is driven by the bound
   `z`, so no transform/raise needed here). A short transition tweens the ring. */
div.win.focused {
    border-color: #4da3ffff;
}

/* Titlebar: the move handle (drag: drag set inline in the RML). Fixed height,
   full width, holds the centered title. */
div.win .titlebar {
    height: 30dp;
    width: 100%;
    background-color: #26262cff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
div.win.focused .titlebar {
    background-color: #2e3340ff;
}
div.win .title {
    color: #c7c9d1ff;
    font-size: 13dp;
    /* leave room so a long title does not slide under the close button */
    padding: 0 36dp 0 36dp;
}

/* Close button: a sibling laid over the titlebar's right edge (NOT inside the
   draggable titlebar, so a tap closes rather than starting a move). The "×" glyph
   renders in Noto Sans (loaded by the substrate). */
div.win .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 30dp;
    height: 30dp;
    color: #c7c9d1ff;
    font-size: 18dp;
    text-align: center;
    background-color: transparent;
}
div.win .closebtn:hover {
    background-color: #e0414aff;
    color: #ffffffff;
}

/* The live window texture fills the body below the titlebar (flex:1). RmlUi
   scales the texture to this box; once the client is configured to the box size
   (resize_mode, default "settle") it maps 1:1. */
img.live {
    display: block;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
}

/* The two BOTTOM resize grips, overlaid at the bottom corners (drag: drag set in
   the RML). Small, subtle, slightly brighter on hover; touch can grab the 22dp
   square. The top corners have no grip (the titlebar owns the top edge). */
div.win .grip {
    position: absolute;
    bottom: 0;
    width: 22dp;
    height: 22dp;
    background-color: #ffffff14;
}
div.win .grip:hover {
    background-color: #ffffff3c;
}
div.win .grip-bl {
    left: 0;
    border-top-right-radius: 8dp;
}
div.win .grip-br {
    right: 0;
    border-top-left-radius: 8dp;
}