/* style.css - white bg + high-contrast text per project rule */
:root {
    --bg:       #ffffff;      /* white background everywhere */
    --fg:       #101418;      /* near-black text */
    --panel:    #f5f7fa;      /* very light gray panels */
    --border:   #c7ced6;
    --accent:   #0a3d8f;      /* dark navy - strong contrast on white */
    --accent-2: #8a1538;      /* dark maroon */
    --good:     #0b6b2b;
    --bad:      #9a1b1b;
    --warn:     #8a5a00;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.45 "Segoe UI", Arial, sans-serif;
}

a          { color: var(--accent); text-decoration: none; }
a:hover    { text-decoration: underline; }

header.site {
    background: var(--bg);
    border-bottom: 2px solid var(--accent);
    padding: 10px 18px;
}
header.site h1 { margin: 0; font-size: 20px; color: var(--accent); }
header.site nav a {
    margin-right: 14px; font-weight: 600;
}

main { padding: 18px; max-width: 1100px; margin: 0 auto; }

footer.site {
    margin-top: 30px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    color: var(--fg);
    font-size: 13px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
    margin: 10px 0;
}

.btn {
    display: inline-block;
    padding: 8px 14px;
    background: var(--accent);
    color: #ffffff;        /* WHITE text on dark navy - strong contrast */
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.btn:hover     { background: #082f6e; }
.btn.secondary { background: var(--accent-2); }
.btn.secondary:hover { background: #6c0f2b; }
.btn.danger    { background: var(--bad); }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--fg);
    font-size: 14px;
}

label { display: block; font-weight: 600; margin-top: 8px; }

.flash       { padding: 10px; border-radius: 4px; margin: 10px 0; }
.flash.info  { background: #e7efff; color: #0a3d8f; border: 1px solid #0a3d8f; }
.flash.good  { background: #e7fbec; color: #0b6b2b; border: 1px solid #0b6b2b; }
.flash.bad   { background: #ffe8e8; color: #9a1b1b; border: 1px solid #9a1b1b; }
.flash.warn  { background: #fff7e0; color: #8a5a00; border: 1px solid #8a5a00; }

table       { width: 100%; border-collapse: collapse; }
th, td      { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
th          { background: #e9edf2; }

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.card { background: #ffffff; border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
.card img { max-width: 100%; border-radius: 4px; }

.age-gate {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.97);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.age-gate .box {
    background: #ffffff; color: var(--fg);
    border: 2px solid var(--bad); border-radius: 8px;
    padding: 24px; max-width: 480px; text-align: center;
}

.chat-window {
    height: 55vh; min-height: 300px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 4px;
}
.chat-msg { margin: 4px 0; }
.chat-msg .who { font-weight: 700; color: var(--accent); }
.chat-msg .when { color: #5a6472; font-size: 12px; margin-left: 6px; }

.error-list { color: var(--bad); }
.muted      { color: #5a6472; }