/* Delad design (apple-design): mjuka kort, material, fokus, press-feedback.
   Laddas av sidor som valt den nya looken (artikelsidan, översikten). */
:root {
    --ap-radius: 14px;
    --ap-hairline: rgba(0, 0, 0, .08);
    --ap-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
}
body { font-family: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif; background: #f5f5f7; -webkit-font-smoothing: antialiased; }

/* Rubrik: stor text = tät spärrning/radavstånd */
h1.h3 { font-size: 1.625rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }

/* Sidhuvud som genomskinligt material; innehållet scrollar under */
@media (min-width: 992px) {
    .page-header-sticky {
        background-color: rgba(245, 245, 247, .72);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--ap-hairline);
        margin-left: -.75rem; margin-right: -.75rem; padding-left: .75rem; padding-right: .75rem;
    }
}

/* Kort: mjuka ytor med hårfin kant, rubrik utan tung bakgrund */
.card { border: 1px solid var(--ap-hairline); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); background: #fff; }
.card-header { background: transparent; border-bottom: 1px solid var(--ap-hairline); padding: .9rem 1.25rem .75rem; border-radius: var(--ap-radius) var(--ap-radius) 0 0; }
.card-header strong { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
.card-body { padding: 1.25rem; }

/* Etiketter: små, dämpade, lite luft i spärrningen */
.form-label { font-size: .8125rem; font-weight: 500; color: #6e6e73; letter-spacing: .005em; margin-bottom: .3rem; }
.form-text { color: #86868b; }

/* Fält: stora träffytor, mjuk fokusring */
.form-control, .form-select { border-radius: 10px; border-color: rgba(0, 0, 0, .14); transition: border-color .15s, box-shadow .15s; }
.form-control:not(.form-control-sm):not(.form-control-lg), .form-select:not(.form-select-sm):not(.form-select-lg) { min-height: 2.5rem; }
.form-control:focus, .form-select:focus { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
.form-control:disabled, .form-select:disabled { background: #f5f5f7; color: #6e6e73; }

/* Knappar: respons direkt vid nedtryck */
.btn { border-radius: 10px; font-weight: 500; transition: transform .1s ease-out, background-color .15s, box-shadow .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: #0071e3; border-color: #0071e3; }
.btn-primary:hover { background: #0077ed; border-color: #0077ed; }
.btn-outline-secondary { border-color: rgba(0, 0, 0, .14); color: #1d1d1f; }
.btn-outline-secondary:hover { background: rgba(0, 0, 0, .05); color: #1d1d1f; border-color: rgba(0, 0, 0, .14); }

/* Tabellrubriker: små, dämpade, versaler med positiv spärrning */
.table > :not(caption) > tr > th, .table thead th { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #86868b; }
.table > :not(caption) > * > * { border-color: var(--ap-hairline); }
.alert, .modal-content { border-radius: var(--ap-radius); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }
@media (prefers-reduced-transparency: reduce) {
    .page-header-sticky { background-color: #f5f5f7; -webkit-backdrop-filter: none; backdrop-filter: none; }
}