/* =========================================================
   STATE: UI CORE
   TOWN: Global Base
   STREET: body, .panel-block
   ========================================================= */

body {
    margin: 0;
    padding: 16px;
    background: #111;
    color: #eee;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.panel-block {
    all: unset;
}

/* =========================================================
   STATE: UI MODULE 1
   TOWN: Module 1 Container
   STREET: .module-1-container
   ========================================================= */

.module-1-container {
    display: grid;
    grid-template-columns: 60% 40%;
    width: 75%;
    height: 60px;
    margin: 0 auto;
    align-items: center;
    background-color: #0d0d0d;
    color: #e6e6e6;
    font-family: monospace;
}

/* TOWN: Clock Surface */
/* STREET: .m1-clock-surface */
.m1-clock-surface {
    display: grid;
    grid-template-columns: repeat(8, auto);
    align-items: center;
    column-gap: 14px;
    padding-left: 16px;
}

/* TOWN: Condition Surface */
/* STREET: .m1-condition-surface */
.m1-condition-surface {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-right: 5px;
    gap: 8px;
    text-align: right;
}

/* TOWN: Condition Item */
/* STREET: .m1-condition-item */
.m1-condition-item {
    display: flex;
    align-items: center;
}

/* TOWN: Condition Label */
/* STREET: .m1-condition-item.label */
.m1-condition-item.label {
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    justify-content: flex-end;
    margin-right: 6px;
}

/* TOWN: Condition Value */
/* STREET: .m1-condition-item.value */
.m1-condition-item.value {
    font-weight: bold;
    margin-left: 6px;
}

/* =========================================================
   STATE: UI MODULE 2
   TOWN: Static Render Panel
   STREET: .render-container, img, .render-link
   ========================================================= */

.render-container {
    position: relative;
    width: 75%;
    margin: 40px auto 0;
}

/* TOWN: Render Image */
/* STREET: .render-container img */
.render-container img {
    width: 100%;
    display: block;
}

/* TOWN: Hotspot Link */
/* STREET: .render-link */
.render-link {
    position: absolute;
    left: 39.45%;
    top: 63.56%;
    width: 19.72%;
    height: 13.19%;
    cursor: pointer;
}

/* =========================================================
   STATE: UI MODULE 1
   TOWN: Condition Surface
   STREET: .m1-condition-surface
   ========================================================= */
.m1-condition-surface {
    display: grid;
    grid-template-columns: repeat(8, auto);
    padding-right: 5px;
    gap: 8px;
    text-align: right;
}
/* ========================================================= */
/* STATE: UI TOKEN LINE                                       */
/* TOWN: Engine Token Display                                 */
/* STREET: .ui-token-line                                     */
/* ========================================================= */
.ui-token-line {
    display: grid;
    grid-template-columns: auto auto;
    position: relative;
    padding-left: 13%;   /* replaces margin-left */
    margin-top: 10px;
    gap: 12px;
    align-items: center;
    font-family: monospace;
    color: #e6e6e6;
}


/* STREET: Engine Token Descriptor (smaller label) */
.ui-token-line .ui-token-item.label {
    font-size: 13px;
    font-weight: bold;
    color: #e6e6e6;
}

/* STREET: Engine Token Value (green output) */
.ui-token-line .value {
    font-size: 16px;
    font-weight: bold;
    color: #00ff88;   /* matching IP green */
    font-family: monospace;
}