/* =========================
   LAYERS
========================= */
@layer base, components;

/* =========================
   TOKENS (defaults)
========================= */
@layer base {
    :root {
        /* tokens ONLY here */
        --space: 12px;
        --ctl-h: 42px; /* control height also used for checkbox width */
        --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-size: 14px;
        --line-height: 1.45;

        --radius-card: 12px;
        --radius-btn: 12px;
        --radius-field: 8px;

        --card-bg: #ff8a00;
        --card-bg2: #e67600;
        --text-on-card: #fff;
        --ink: #111;
        --line: #cbd5e1;
        --btn-border: #a3a3a3;
        --focus: rgba(37,99,235,.35);

        --card-overlay: none;
        --card-bg-image: none;
        --card-bg-size: auto;
        --card-bg-repeat: repeat;
    }

    /* global links — outside :root */
    a, a:visited {
        color: inherit;
        text-decoration: none;
    }
    a:hover      {
        text-decoration: underline;
    }


    /* ====== PRESETS (one switch) ====== */
    [data-style="easyjet"] {
        --card-bg: #ff8a00;
        --card-bg2: #e67600;
        --text-on-card: white;
        --focus: rgba(255,122,0,.35);

        /*        --card-overlay: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.05));*/
        --card-bg-image: url("../img/easyjet/airplane.svg");
        --card-bg-size: cover;         /* fill card */
        --card-bg-repeat: no-repeat;   /* no tiling for photos */
    }

    [data-style="xmas"] {
        --card-bg:   #0f5132;
        --card-bg2:  #bd3b47;
        --text-on-card: white;
        --focus: rgba(176,42,55,.35);
        --card-overlay: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06));
        --card-bg-image: url("../img/xmas/holly.jpg");
        --card-bg-repeat: repeat;
    }


    [data-style="ryanair"] {
        --card-bg:   #093a9d;        /* dark blue */
        --card-bg2: #ddb82e;        /* yellow */
        --text-on-card: white;
        --focus: rgba(255,122,0,.35);
        --card-overlay: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05));
        --card-bg-image: url("../img/easyjet/airplane.svg");   /* hero photo */
        --card-bg-size: cover;         /* fill card */
        --card-bg-repeat: no-repeat;   /* no tiling for photos */
    }

    /* reset + titles */
    *,*::before,*::after{
        box-sizing:border-box
    }
    html,body{
        height:100%
    }
    body{
        margin:0;
        font: var(--font-size)/var(--line-height) var(--font-family);
        color:var(--text-on-card);
        background:#fff
    }
    h1,h2{
        margin:0;
        line-height:1.15;
        text-align:center
    }
    h1 {
        margin-block-end: clamp(10px, 1.5vh, 20px);
    }
    h2 {
        margin-block-end: clamp(12px, 2vh, 28px);
    }
}

/* =========================
   COMPONENTS (read tokens)
========================= */
@layer components {
    .card {
        position: relative;
    }

    .page {
        min-height:100dvh;
        padding:10px;
    }
    .card {
        background-color: var(--card-bg);
        background-image: var(--card-overlay), var(--card-bg-image);
        background-size: auto, var(--card-bg-size);
        background-repeat: repeat, var(--card-bg-repeat);
        background-position: 0 0, 50% 50%;
        color: var(--text-on-card);
        border-radius: var(--radius-card);
        padding: clamp(14px, 2vw, 24px);
        min-height: calc(100dvh - 20px);
        overflow: auto;
        display:flex;
        flex-direction:column;
    }

    /* inputs */
    .field, input[type="text"], input[type="url"], input[type="search"]{
        height: var(--ctl-h);
        min-height: var(--ctl-h);
        line-height: calc(var(--ctl-h)-2px);
        padding: 0 12px;
        border:1px solid var(--line);
        border-radius: var(--radius-field);
        background:#fff;
        color:var(--ink);
        font:inherit;
        outline:none;
        transition:border-color .12s, box-shadow .12s;
    }
    .field:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="search"]:hover{
        border-color: color-mix(in srgb, var(--line) 60%, #000);
    }
    .field:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="search"]:focus{
        border-color: color-mix(in srgb, var(--focus) 60%, #2563eb);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 60%, rgba(37,99,235,.15));
    }

    /* buttons */
    .btn, button{
        height: var(--ctl-h);
        min-height: var(--ctl-h);
        padding:0 16px;
        border:1.5px solid var(--btn-border);
        border-radius: var(--radius-btn);
        background: linear-gradient(#fff,#fafafa);
        color:#2b2b2b;
        font-weight:600;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8);
        transition: transform .06s, box-shadow .12s, border-color .12s;
    }

    tbody td{
        padding:10px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .table-wrap{
        border-radius:10px;
        overflow:hidden;
        background: var(--table-head, var(--card-bg2))
    } /* keeps rounded corners */

    table{
        padding:10px;
        width:100%;
        border-collapse: collapse;
        background: var(--table-base);         /* ← makes table opaque */
    }

    thead th{
        padding:10px;
        background: var(--table-head, var(--card-bg2))
    }

    tbody tr:nth-child(odd){
        background: var(--table-stripe, var(--card-bg));       /* only odd rows painted */
    }

    /* Button-sized, themed checkbox */
    /* Base */
    input[type="checkbox"]{
        -webkit-appearance: none;
        appearance: none;
        inline-size: var(--ctl-h);
        block-size: var(--ctl-h);
        background: linear-gradient(#fff, #fafafa);
        border: 1.5px solid #a3a3a3;
        border-radius: var(--radius-btn, 12px);
        box-shadow:
            0 1px 0 rgba(0,0,0,.03),
            0 2px 8px rgba(0,0,0,.10),
            inset 0 1px 0 rgba(255,255,255,.8);
        display: inline-grid;
        place-content: center;
        vertical-align: middle;
        cursor: pointer;
        transition: transform .06s, box-shadow .12s, border-color .12s, background-color .12s;
    }

    /* Hover when UNCHECKED */
    input[type="checkbox"]:not(:disabled):not(:checked):hover,
        label.checkbox:hover input[type="checkbox"]:not(:disabled):not(:checked){
        background: linear-gradient(#fff, #f3f3f3);
        border-color: #8b8b8b;
        box-shadow:
            0 2px 0 rgba(0,0,0,.04),
            0 6px 16px rgba(0,0,0,.14),
            inset 0 1px 0 rgba(255,255,255,.85);
    }

    /* Checked (normal) */
    input[type="checkbox"]:checked{
        /* NOTE the token name: --card-bg2 (with the dash) */
        background: linear-gradient(var(--card-bg2), color-mix(in srgb, var(--card-bg2) 85%, #fff));
        border-color: color-mix(in srgb, var(--card-bg2) 85%, #000);
        color: #fff;
        box-shadow:
            0 1px 0 rgba(0,0,0,.03),
            0 2px 8px rgba(0,0,0,.10),
            inset 0 2px 4px rgba(0,0,0,.06);
    }

    /* Hover when CHECKED */
    input[type="checkbox"]:not(:disabled):checked:hover,
        label.checkbox:hover input[type="checkbox"]:not(:disabled):checked{
        background: linear-gradient(
            color-mix(in srgb, var(--card-bg2) 92%, #fff 8%),
            color-mix(in srgb, var(--card-bg2) 84%, #fff 16%)
            );
        border-color: color-mix(in srgb, var(--card-bg2) 90%, #000 10%);
        box-shadow:
            0 2px 0 rgba(0,0,0,.05),
            0 7px 18px rgba(0,0,0,.18),
            inset 0 2px 4px rgba(255,255,255,.35);
    }

    /* Pressed */
    input[type="checkbox"]:active{
        transform: translateY(1px);
    }

    /* Focus ring */
    input[type="checkbox"]:focus-visible{
        outline: 3px solid var(--focus);
        outline-offset: 3px;
    }

    /* Disabled */
    input[type="checkbox"]:disabled{
        background: #f8fafc;
        cursor: not-allowed;
        opacity: .8;
    }

    /* Tick */
    input[type="checkbox"]::before{
        content: "";
        inline-size: calc(var(--ctl-h) * .5);
        block-size:  calc(var(--ctl-h) * .5);
        background: #fff;
        clip-path: polygon(14% 53%, 0 66%, 34% 100%, 100% 34%, 86% 20%, 34% 72%);
        transform: scale(0);
        transition: transform .12s ease-in-out;
    }
    input[type="checkbox"]:checked::before{
        transform: scale(1);
    }


}