/*
 * ij-ui.css - shared building blocks for the InboxJournal UI refresh.
 *
 * Linked once per page from Templates/main.php (after /Style/main.css) via
 * ij_ui_css_href(), which appends ?v=<mtime> for cache busting.
 *
 * Scope so far: .ij-box (replacement for the legacy sprite-image boxes) and
 * .ij-form (the login form). The colour values are read off the legacy sprites
 * in /images/boxes/<variant>/ so the new boxes match the old look:
 *   orange  fill #ffd773, border #d3ba92, outer halo #f0e8db,
 *           inner highlight #fff4b1 (top/left), inner shade #cfa75d (bottom/right)
 *   blue    fill #a8e8e8, border #9bc1cf, halo #deebef, highlight #bff8f8, shade #69c5ca
 *   grey    fill #ffffff, border #838383, soft drop shadow to the bottom/right
 * Link colours (#379bad / #2ec7c7) are the ones in /Style/main.css.
 *
 * Pure ASCII file - the site is served as ISO-8859-1.
 */

/* Design tokens, scoped to the component roots (no global selectors). */
.ij-box,
.ij-form {
    --ij-orange:        #ffd773;
    --ij-orange-border: #d3ba92;
    --ij-orange-halo:   #f0e8db;
    --ij-orange-light:  #fff4b1;
    --ij-orange-dark:   #cfa75d;

    --ij-blue:          #a8e8e8;
    --ij-blue-border:   #9bc1cf;
    --ij-blue-halo:     #deebef;
    --ij-blue-light:    #bff8f8;
    --ij-blue-dark:     #69c5ca;

    --ij-grey-border:   #838383;

    --ij-link:          #379bad;
    --ij-link-hover:    #2ec7c7;
    /* Button fill: darker than the link colour so white 12px bold text passes WCAG AA (>4.5:1). */
    --ij-btn:           #22717f;
    --ij-btn-hover:     #1a5a66;
    --ij-text:          #000;
    --ij-text-muted:    #666;
    --ij-text-label:    #333;
    --ij-error:         #b3261e;

    --ij-box-radius:    14px;
}

/* ---------- box ---------- */

.ij-box {
    box-sizing: border-box;
    display: flow-root;                 /* contain floated children, as the old <fieldset> did */
    width: var(--ij-box-width, auto);   /* set inline by ij_box(['width' => N]) */
    max-width: 100%;
    margin: 0 0 10px;
    padding: 12px 16px 14px;
    background: var(--ij-box-bg);
    border: 1px solid var(--ij-box-border);
    border-radius: var(--ij-box-radius);
    box-shadow: var(--ij-box-shadow);
    color: var(--ij-text);
    text-align: left;
}

/* 1px pale halo outside + a soft bevel inside = the old sprite look */
.ij-box--orange {
    --ij-box-bg: var(--ij-orange);
    --ij-box-border: var(--ij-orange-border);
    --ij-box-shadow:
        0 0 0 1px var(--ij-orange-halo),
        inset 1px 1px 2px var(--ij-orange-light),
        inset -2px -2px 2px var(--ij-orange-dark);
}

.ij-box--blue {
    --ij-box-bg: var(--ij-blue);
    --ij-box-border: var(--ij-blue-border);
    --ij-box-shadow:
        0 0 0 1px var(--ij-blue-halo),
        inset 1px 1px 2px var(--ij-blue-light),
        inset -2px -2px 2px var(--ij-blue-dark);
}

.ij-box--grey {
    --ij-box-bg: #fff;
    --ij-box-border: var(--ij-grey-border);
    --ij-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
}

.ij-box--center {
    margin-left: auto;
    margin-right: auto;
}

/* Keeps the footprint of the old fixed-height 200px box (welcome_right.php tags/words);
   content taller than that grows the box instead of overflowing. */
.ij-box--minh-200 {
    min-height: 200px;
}

/* overrides the global h3 { text-transform: capitalize } in main.css */
.ij-box__title {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.25;
    font-weight: bold;
    color: var(--ij-text-muted);
    text-transform: none;
}

/* ---------- form ---------- */

.ij-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    font-size: 12px;
}

.ij-form__notice {
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ij-error);
    font-weight: bold;
}

.ij-form__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ij-form__field label {
    color: var(--ij-text-label);
}

.ij-form__input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    font: inherit;
    color: var(--ij-text);
    background: #fff;
    border: 1px solid var(--ij-orange-dark);
    border-radius: 5px;
}

.ij-form__input:focus {
    border-color: var(--ij-link);
    outline: 2px solid var(--ij-link);
    outline-offset: 1px;
}

/* remember-me on the left, button on the right; wraps in narrow columns */
.ij-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 2px;
}

.ij-form__check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ij-text-label);
    cursor: pointer;
}

.ij-form__check input {
    margin: 0;
}

.ij-btn {
    margin: 0;
    padding: 5px 16px;
    font: inherit;
    font-weight: bold;
    line-height: 1.2;
    color: var(--ij-text);
    background: #f4f4f4;
    border: 1px solid #999;
    border-radius: 5px;
    cursor: pointer;
}

.ij-btn--primary {
    color: #fff;
    background: var(--ij-btn);
    border-color: var(--ij-btn-hover);
}

.ij-btn--primary:hover {
    background: var(--ij-btn-hover);
    border-color: var(--ij-btn-hover);
}

.ij-btn:focus-visible {
    outline: 2px solid var(--ij-text);
    outline-offset: 2px;
}

.ij-form__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}