/* ==========================================
   BriefStandup
   Clean Utility UI
========================================== */

:root{

    --bg:#f5f6f8;

    --panel:#ffffff;

    --text:#1f2937;
    --muted:#6b7280;

    --border:#dde3ea;

    --accent:#2563eb;
    --accent-hover:#1d4ed8;

    --radius:16px;

    --shadow:
        0 1px 2px rgba(0,0,0,.04),
        0 8px 28px rgba(15,23,42,.05);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    font-size:16px;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height:1.5;

    padding:36px 18px;

}

/* ========================================== */

.app{

    width:100%;
    max-width:700px;

    margin:auto;

}

/* ========================================== */

.app-header{

    margin-bottom:28px;

}

.app-header h1{

    font-size:2.5rem;

    font-weight:700;

    letter-spacing:-.05em;

    margin-bottom:8px;

}

.app-header p{

    font-size:1rem;

    color:var(--muted);

}

/* ========================================== */

.panel{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:28px;

    margin-bottom:22px;

}

/* ========================================== */

.panel h2{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:var(--muted);

    margin-bottom:18px;

}

/* ========================================== */

textarea{

    width:100%;

    min-height:140px;

    resize:vertical;

    padding:16px;

    font:inherit;

    font-size:1rem;

    line-height:1.7;

    border:1px solid var(--border);

    border-radius:10px;

    background:white;

    color:var(--text);

    transition:
        border-color .15s,
        box-shadow .15s;

}

textarea::placeholder{

    color:#9ca3af;

}

textarea:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);

}

/* ========================================== */

.actions{

    display:flex;

    justify-content:center;

    margin-top:18px;

}

button{

    appearance:none;

    border:none;

    border-radius:10px;

    padding:12px 24px;

    background:var(--accent);

    color:white;

    font:inherit;

    font-weight:600;

    cursor:pointer;

    transition:
        background .15s,
        transform .08s;

}

button:hover{

    background:var(--accent-hover);

}

button:active{

    transform:translateY(1px);

}

button:disabled{

    opacity:.65;

    cursor:not-allowed;

}

/* ========================================== */

#output{

    min-height:170px;

    line-height:1.8;

    white-space:pre-wrap;

    overflow-wrap:anywhere;

    font-size:1rem;

}

/* Empty State */

#output:empty::before{

    content:"Your generated briefing will appear here.";

    color:#9ca3af;

    font-style:italic;

}

/* Generated bullets */

#output ul{

    padding-left:20px;

}

#output li{

    margin-bottom:10px;

}

/* ========================================== */

@media (max-width:700px){

    body{

        padding:16px;

    }

    .app-header h1{

        font-size:2rem;

    }

    .panel{

        padding:20px;

    }

    textarea{

        min-height:120px;

    }

    button{

        width:100%;

    }

}