/* =========================================================
   LCARS CAMPAIGN COMPUTER
   TYPOGRAPHY POLISH

   Purpose:
   Improve the visual hierarchy and restore a more
   technical late-24th-century LCARS feel without changing
   layouts, database logic, startup logic, or modal logic.
========================================================= */


/* =========================================================
   FONT SYSTEM
========================================================= */

:root {
    --lcars-font-display:
        "Avenir Next Condensed",
        "Arial Narrow",
        "Helvetica Neue Condensed",
        "Roboto Condensed",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --lcars-font-interface:
        "Avenir Next",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --lcars-font-technical:
        "Arial Narrow",
        "Avenir Next Condensed",
        "Helvetica Neue Condensed",
        "Helvetica Neue",
        Arial,
        sans-serif;
}


/* =========================================================
   GLOBAL TEXT
========================================================= */

body {
    font-family: var(--lcars-font-interface);

    font-weight: 400;

    letter-spacing: 0.01em;

    line-height: 1.4;
}


button,
input,
select,
textarea {
    font-family: var(--lcars-font-interface);
}


/* =========================================================
   MAIN DISPLAY HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
.lcars-header h1,
.content-area > section > h2,
.welcome-panel h2,
.onboarding-header h1,
.lcars-confirm-header h2 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.055em;
}


/* =========================================================
   MAIN LCARS HEADER
========================================================= */

.lcars-header h1 {
    font-weight: 700;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.registry {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    letter-spacing: 0.24em;

    text-transform: uppercase;
}


.header-status {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* =========================================================
   LCARS MICRO LABELS
========================================================= */

.small-label,
.mini-label,
.screen-kicker,
label,
.episode-label,
.settings-section-heading,
.record-count,
.timeline-stardate-heading,
.timeline-entry-type,
.mission-live-status span,
.scene-command-data span,
.overview-block-code,
.mechanics-launch-code {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    text-transform: uppercase;
}


.small-label,
.mini-label,
.screen-kicker {
    letter-spacing: 0.24em;
}


.small-label,
.mini-label {
    font-size: 0.7rem;
}


.screen-kicker {
    font-size: 0.74rem;
}


/* =========================================================
   SIDEBAR
========================================================= */

.lcars-sidebar button {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    font-size: 0.76rem;

    letter-spacing: 0.115em;

    text-transform: uppercase;
}


/* =========================================================
   GENERIC BUTTONS
========================================================= */

button,
.primary-action,
.secondary-button,
.danger-button,
.settings-secondary-action,
.compact-button {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


button {
    font-size: 0.91rem;
}


.compact-button {
    font-size: 0.72rem;

    letter-spacing: 0.08em;
}


/* =========================================================
   FORM LABELS
========================================================= */

label {
    font-size: 0.7rem;

    letter-spacing: 0.14em;
}


input,
select,
textarea {
    font-family: var(--lcars-font-interface);

    font-weight: 400;

    letter-spacing: 0.01em;
}


/* =========================================================
   PAGE TITLES
========================================================= */

.content-area > section > h2 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


/* =========================================================
   MISSION CONTROL
========================================================= */

.mission-command-header h2 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.mission-command-header .mission-meta {
    font-family: var(--lcars-font-technical);

    font-size: 0.82rem;

    letter-spacing: 0.035em;
}


.mission-live-status span {
    font-size: 0.65rem;

    letter-spacing: 0.16em;
}


.mission-live-status strong {
    font-family: var(--lcars-font-display);

    font-weight: 600;

    letter-spacing: 0.025em;
}


.mission-subscreen-nav label {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    font-size: 0.76rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.mission-tab-number {
    font-family: var(--lcars-font-interface);

    font-weight: 700;

    letter-spacing: 0;
}


.mission-screen-heading h3 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.overview-resource-card {
    font-family: var(--lcars-font-interface);
}


.overview-resource-card .mini-label {
    letter-spacing: 0.18em;
}


.overview-scene-title {
    font-family: var(--lcars-font-display);

    font-weight: 600;

    letter-spacing: 0.025em;
}


.overview-block-header h3 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* =========================================================
   SCENE CONTROL
========================================================= */

.scene-command-title {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.04em;
}


.scene-command-data span {
    font-size: 0.66rem;

    letter-spacing: 0.16em;
}


.scene-command-data strong {
    font-family: var(--lcars-font-interface);

    font-weight: 600;

    letter-spacing: 0.015em;
}


.scene-journal-console h3 {
    font-family: var(--lcars-font-display);

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.scene-journal {
    font-family:
        "Avenir Next",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.55;

    letter-spacing: 0.005em;
}


/* =========================================================
   MECHANICS
========================================================= */

.mechanics-launch-title {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.mechanics-launch-description {
    font-family: var(--lcars-font-interface);

    line-height: 1.45;
}


.mechanics-launch-code {
    font-size: 0.66rem;

    letter-spacing: 0.16em;
}


/* =========================================================
   PERSONNEL DATABASE
========================================================= */

.character-card {
    font-family: var(--lcars-font-interface);

    line-height: 1.3;
}


.character-card-name {
    font-family: var(--lcars-font-display);

    font-size: 1.25rem;

    font-weight: 700;

    letter-spacing: 0.035em;
}


.character-card-rank {
    margin-top: 3px;

    color: #dddddd;

    font-size: 0.88rem;

    font-weight: 500;
}


.character-card-role {
    margin-top: 1px;

    color: #aaaaaa;

    font-family: var(--lcars-font-technical);

    font-size: 0.76rem;

    font-weight: 600;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}


.character-card-portrait {
    font-family: var(--lcars-font-technical);

    font-size: 0.67rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    color: #777777;

    text-transform: uppercase;
}


.record-player-badge {
    display: inline-block;

    margin-top: 8px;

    margin-right: 5px;

    font-family: var(--lcars-font-technical);

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.record-primary-badge {
    color: var(--lcars-gold);
}


/* =========================================================
   VESSELS / FACILITIES
========================================================= */

.ship-card {
    font-family: var(--lcars-font-interface);

    line-height: 1.3;
}


.ship-card-name {
    font-family: var(--lcars-font-display);

    font-size: 1.25rem;

    font-weight: 700;

    letter-spacing: 0.035em;
}


.ship-card-class,
.ship-card-registry,
.ship-card-type {
    font-family: var(--lcars-font-technical);

    letter-spacing: 0.055em;
}


/* =========================================================
   COMPUTER DATABASE
========================================================= */

.computer-record-title {
    font-family: var(--lcars-font-display);

    font-size: 1.18rem;

    font-weight: 700;

    letter-spacing: 0.035em;
}


.computer-record-category {
    font-family: var(--lcars-font-technical);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.computer-record-summary {
    font-family: var(--lcars-font-interface);

    line-height: 1.45;

    color: #c8c8c8;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline-controls label {
    font-size: 0.68rem;

    letter-spacing: 0.16em;
}


.timeline-summary {
    font-family: var(--lcars-font-technical);

    font-size: 0.76rem;

    font-weight: 600;

    letter-spacing: 0.05em;
}


.timeline-stardate-heading {
    margin-top: 18px;

    margin-bottom: 7px;

    color: var(--lcars-peach);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.timeline-mission-group {
    margin-bottom: 18px;
}


.timeline-entry {
    padding: 15px 17px;

    background: #080808;

    border-left: 8px solid var(--lcars-lavender);

    font-family: var(--lcars-font-interface);
}


.timeline-entry + .timeline-entry {
    margin-top: 8px;
}


.timeline-entry-type {
    color: var(--lcars-peach);

    font-size: 0.64rem;

    letter-spacing: 0.18em;
}


.timeline-entry-title {
    margin-top: 3px;

    font-family: var(--lcars-font-display);

    font-size: 1.13rem;

    font-weight: 700;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


.timeline-entry-subtitle {
    margin-top: 3px;

    color: #d5d5d5;

    font-family: var(--lcars-font-technical);

    font-size: 0.82rem;

    font-weight: 500;

    letter-spacing: 0.04em;
}


.timeline-entry-description {
    margin-top: 7px;

    color: #aaaaaa;

    font-family: var(--lcars-font-interface);

    font-size: 0.88rem;

    line-height: 1.45;
}


.timeline-entry button {
    margin-top: 10px;
}


/* =========================================================
   ARCHIVE
========================================================= */

#missionArchiveDisplay {
    font-family: var(--lcars-font-interface);
}


#missionArchiveDisplay h3,
#missionArchiveDisplay strong {
    font-family: var(--lcars-font-display);

    letter-spacing: 0.035em;
}


/* =========================================================
   SETTINGS
========================================================= */

.settings-section-heading h3 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.settings-help {
    font-family: var(--lcars-font-interface);

    line-height: 1.45;
}


/* =========================================================
   HOME
========================================================= */

.home-mission-title {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.home-mission-details {
    font-family: var(--lcars-font-technical);

    font-size: 0.82rem;

    letter-spacing: 0.035em;
}


/* =========================================================
   CONFIRMATION DIALOG
========================================================= */

.lcars-confirm-header h2 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.lcars-confirm-code {
    font-family: var(--lcars-font-technical);

    letter-spacing: 0.1em;
}


.lcars-confirm-message {
    font-family: var(--lcars-font-interface);

    font-weight: 600;
}


.lcars-confirm-detail {
    font-family: var(--lcars-font-interface);

    line-height: 1.45;
}


/* =========================================================
   STARTUP TYPOGRAPHY
========================================================= */

.lcars-startup-overlay {
    font-family: var(--lcars-font-interface);
}


.startup-system-label,
.startup-header-subtitle,
.startup-clock,
.startup-menu-kicker,
.startup-status-label,
.campaign-modal-code {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    text-transform: uppercase;
}


.lcars-startup-header h1,
.startup-campaign-name,
.campaign-modal-header h2 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.06em;
}


.startup-command strong {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    letter-spacing: 0.08em;
}


.startup-command span {
    font-family: var(--lcars-font-interface);
}


/* =========================================================
   ONBOARDING
========================================================= */

.onboarding-header h1 {
    font-family: var(--lcars-font-display);

    font-weight: 700;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.onboarding-progress-segment {
    font-family: var(--lcars-font-technical);

    font-weight: 700;

    letter-spacing: 0.08em;
}


.onboarding-copy {
    font-family: var(--lcars-font-interface);

    line-height: 1.5;
}


/* =========================================================
   FOOTER
========================================================= */

.lcars-footer {
    font-family: var(--lcars-font-technical);

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


/* =========================================================
   DESKTOP FINE TUNING
========================================================= */

@media (min-width: 900px) {

    .content-area > section > h2 {
        letter-spacing: 0.055em;
    }

    .character-card-name,
    .ship-card-name {
        font-size: 1.3rem;
    }

}


/* =========================================================
   TABLET / IPAD
========================================================= */

@media (max-width: 900px) {

    .lcars-sidebar button {
        font-size: 0.7rem;

        letter-spacing: 0.08em;
    }

    .character-card-name,
    .ship-card-name {
        font-size: 1.16rem;
    }

    .timeline-entry-title {
        font-size: 1.05rem;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    body {
        font-size: 15px;
    }

    .small-label,
    .mini-label,
    .screen-kicker {
        letter-spacing: 0.17em;
    }

    .lcars-sidebar button {
        font-size: 0.65rem;
    }

    .mission-subscreen-nav label {
        font-size: 0.68rem;

        letter-spacing: 0.07em;
    }

}


/* =========================================================
   ACCESSIBILITY

   Never reduce readability simply for visual styling.
========================================================= */

input,
textarea,
select,
.scene-journal,
.timeline-entry-description,
.computer-record-summary,
.settings-help,
.onboarding-copy {
    font-variant-ligatures: common-ligatures;
}