/*
 * ═══════════════════════════════════════════════════════════════════
 *                        THE BROADSHEET
 *                   Editorial Excellence
 * ═══════════════════════════════════════════════════════════════════
 *
 * A radical redesign inspired by premium newspapers and editorial
 * design. Warm cream paper, serif headlines, ruled lines, and the
 * sophisticated authority of a morning broadsheet.
 *
 * DESIGN PHILOSOPHY:
 * 1. Editorial Authority - Headlines command attention
 * 2. Typographic Hierarchy - Clear information architecture
 * 3. Paper & Ink - Warm, tactile, timeless
 * 4. Ruled Precision - Lines guide the eye
 * 5. Quiet Confidence - Let the content speak
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   FOUNDATION: The Paper Stock
   ═══════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* =======================
       PAPER & INK PHILOSOPHY
       ======================= */

    /* THE PAPER - Warm newsprint foundation */
    --paper-cream: #FDF8F3;          /* Primary background - warm cream */
    --paper-white: #FFFFFF;          /* Card surfaces - clean white */
    --paper-aged: #F5F0E8;           /* Subtle depth - aged paper */
    --paper-shadow: #EDE8E0;         /* Shadows and wells */
    --paper-border: #E8E3DB;         /* Subtle borders */

    /* THE INK - Rich blacks and grays */
    --ink-black: #1A1A1A;            /* Headlines - dense black */
    --ink-dark: #2D2D2D;             /* Body text - readable dark */
    --ink-medium: #4A4A4A;           /* Secondary text */
    --ink-gray: #666666;             /* Tertiary text */
    --ink-light: #888888;            /* Captions and metadata */
    --ink-faded: #AAAAAA;            /* Disabled states */

    /* EDITORIAL ACCENTS - Classic newspaper colors */
    --accent-red: #C41E3A;           /* Breaking news red - urgent */
    --accent-red-light: #E8D0D4;     /* Red tint for backgrounds */
    --accent-blue: #1E3A5F;          /* Section links - authoritative blue */
    --accent-blue-light: #E8EDF2;    /* Blue tint for backgrounds */
    --accent-gold: #B8860B;          /* Premium highlights - old gold */
    --accent-gold-light: #F5F0E0;    /* Gold tint for backgrounds */

    /* SEMANTIC STATES - Editorial meaning */
    --semantic-error: #C41E3A;       /* Same as accent red */
    --semantic-warning: #CC7722;     /* Amber warning */
    --semantic-success: #2D5A27;     /* Forest green - done */
    --semantic-info: #1E3A5F;        /* Same as accent blue */

    /* TASK STATES - Priority through typography */
    --state-active: var(--accent-red);
    --state-active-bg: var(--accent-red-light);
    --state-next: var(--accent-blue);
    --state-next-bg: var(--accent-blue-light);
    --state-waiting: var(--accent-gold);
    --state-waiting-bg: var(--accent-gold-light);
    --state-completed: var(--ink-light);
    --state-completed-bg: var(--paper-shadow);

    /* PRIORITY - Breaking news hierarchy */
    --priority-high: var(--accent-red);
    --priority-high-bg: var(--accent-red-light);
    --priority-medium: var(--accent-gold);
    --priority-medium-bg: var(--accent-gold-light);
    --priority-low: var(--ink-gray);
    --priority-low-bg: var(--paper-shadow);

    /* AGE INDICATORS */
    --age-warning: var(--semantic-warning);
    --age-warning-bg: #FFF8E8;
    --age-critical: var(--accent-red);
    --age-critical-bg: var(--accent-red-light);

    /* =======================
       TYPOGRAPHY DISCIPLINE
       ======================= */

    /* FONT FAMILIES - Editorial hierarchy */
    --font-headline: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-body: 'Source Serif Pro', 'Georgia', serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    --font-technical: var(--font-body);  /* Compatibility alias */

    /* MODULAR SCALE - Newspaper hierarchy (1.333 perfect fourth) */
    --text-tiny: 0.563rem;       /* 9px - Fine print */
    --text-small: 0.75rem;       /* 12px - Captions */
    --text-base: 1rem;           /* 16px - Body text */
    --text-medium: 1.125rem;     /* 18px - Lead paragraphs */
    --text-large: 1.333rem;      /* 21.3px - Subheadings */
    --text-xlarge: 1.777rem;     /* 28.4px - Section headers */
    --text-huge: 2.369rem;       /* 37.9px - Page titles */
    --text-massive: 3.157rem;    /* 50.5px - Masthead */

    /* LINE HEIGHTS - Readable columns */
    --line-tight: 1.2;           /* Headlines */
    --line-normal: 1.5;          /* Standard body */
    --line-relaxed: 1.65;        /* Long-form reading */
    --line-loose: 1.8;           /* Large text */

    /* WEIGHT HIERARCHY */
    --weight-light: 400;         /* Body text */
    --weight-normal: 400;        /* Default */
    --weight-medium: 500;        /* Emphasis */
    --weight-semibold: 600;      /* Strong */
    --weight-bold: 700;          /* Headlines */

    /* =======================
       SPATIAL DISCIPLINE
       ======================= */

    /* COLUMN RHYTHM - Newspaper grid */
    --space-1: 0.125rem;         /* 2px */
    --space-2: 0.25rem;          /* 4px */
    --space-3: 0.375rem;         /* 6px */
    --space-4: 0.5rem;           /* 8px */
    --space-6: 0.75rem;          /* 12px */
    --space-8: 1rem;             /* 16px */
    --space-12: 1.5rem;          /* 24px */
    --space-16: 2rem;            /* 32px */
    --space-20: 2.5rem;          /* 40px */
    --space-24: 3rem;            /* 48px */
    --space-32: 4rem;            /* 64px */
    --space-48: 6rem;            /* 96px */

    /* =======================
       RULES & BORDERS
       ======================= */

    /* EDITORIAL EDGES - Sharp, no rounding */
    --edge-sharp: 0px;
    --edge-subtle: 2px;
    --edge-standard: 2px;
    --edge-soft: 2px;
    --edge-round: 2px;

    /* RULE WEIGHTS - Newspaper lines */
    --rule-hairline: 1px;
    --rule-standard: 1px;
    --rule-bold: 2px;
    --rule-heavy: 4px;

    /* Compatibility aliases */
    --border-hairline: var(--rule-hairline);
    --border-standard: var(--rule-standard);
    --border-bold: var(--rule-bold);
    --border-heavy: var(--rule-heavy);

    /* SHADOW - Paper depth */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-standard: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-dramatic: 0 16px 48px rgba(0, 0, 0, 0.2);

    /* =======================
       MOTION
       ======================= */

    --motion-instant: 0ms;
    --motion-quick: 120ms;
    --motion-standard: 200ms;
    --motion-smooth: 300ms;
    --motion-slow: 400ms;

    --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);

    /* Compatibility aliases for old variable names */
    --blueprint-void: var(--paper-cream);
    --blueprint-primary: var(--paper-white);
    --blueprint-secondary: var(--paper-aged);
    --blueprint-tertiary: var(--paper-white);
    --blueprint-grid: var(--paper-border);
    --line-bright: var(--ink-black);
    --line-standard: var(--ink-dark);
    --line-faded: var(--ink-gray);
    --line-dim: var(--ink-light);
    --brass-bright: var(--accent-blue);
    --brass-standard: var(--accent-blue);
    --brass-warm: var(--accent-red);
    --brass-subtle: var(--accent-gold);
    --brass-patina: var(--ink-gray);
}

/* ═══════════════════════════════════════════════════════════════════
   BODY: The Newsprint Canvas
   ═══════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--line-relaxed);
    font-weight: var(--weight-normal);
    color: var(--ink-dark);
    letter-spacing: 0.01em;

    /* Warm paper with subtle texture */
    background-color: var(--paper-cream);
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.02) 50%, transparent 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

    min-height: 100vh;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT: Column Structure
   ═══════════════════════════════════════════════════════════════════ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-16);
    position: relative;
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER: The Masthead
   ═══════════════════════════════════════════════════════════════════ */

.header {
    background: var(--paper-white);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: var(--rule-heavy) solid var(--ink-black);
}

/* Double rule effect below masthead */
.header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink-black);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    gap: var(--space-12);
}

/* ═══════════════════════════════════════════════════════════════════
   TAGLINE: The Motto
   ═══════════════════════════════════════════════════════════════════ */

.header-tagline {
    font-family: var(--font-headline);
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    font-style: italic;
    color: var(--ink-black);
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 1;
    transition: all var(--motion-standard) var(--ease-standard);
    order: -1;
}

.header-tagline:hover {
    color: var(--accent-red);
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION: Section Tabs
   ═══════════════════════════════════════════════════════════════════ */

.nav {
    display: flex;
    gap: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    border-bottom: var(--rule-standard) solid var(--paper-border);
}

.nav-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ink-gray);
    font-family: var(--font-headline);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;

    padding: var(--space-6) var(--space-8);
    cursor: pointer;
    position: relative;

    transition: all var(--motion-standard) var(--ease-standard);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    color: var(--ink-black);
    border-bottom-color: var(--ink-light);
    background: transparent;
    transform: none;
}

.nav-btn.active {
    background: transparent;
    color: var(--ink-black);
    border-bottom-color: var(--accent-red);
    font-weight: var(--weight-bold);
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   MAIN CONTENT: The Columns
   ═══════════════════════════════════════════════════════════════════ */

.main {
    padding: var(--space-24) 0 var(--space-32);
    min-height: calc(100vh - 120px);
    position: relative;
}

.view {
    animation: page-entrance var(--motion-smooth) var(--ease-out) both;
}

@keyframes page-entrance {
    from {
        opacity: 0;
        transform: translateY(var(--space-6));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY: Editorial Hierarchy
   ═══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: var(--weight-bold);
    color: var(--ink-black);
    line-height: var(--line-tight);
    margin-bottom: var(--space-6);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--text-massive);
    font-weight: var(--weight-bold);
    border-bottom: var(--rule-bold) solid var(--ink-black);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-12);
}

h2 {
    font-size: var(--text-huge);
    font-weight: var(--weight-bold);
    border-bottom: var(--rule-standard) solid var(--ink-light);
    padding-bottom: var(--space-3);
}

h3 {
    font-size: var(--text-xlarge);
    font-weight: var(--weight-semibold);
}

h4 {
    font-size: var(--text-large);
    font-weight: var(--weight-medium);
}

p {
    margin-bottom: var(--space-8);
    line-height: var(--line-relaxed);
    color: var(--ink-dark);
}

.subtitle {
    font-family: var(--font-body);
    font-size: var(--text-medium);
    font-style: italic;
    color: var(--ink-gray);
    line-height: var(--line-normal);
    margin-bottom: var(--space-12);
    text-transform: none;
    letter-spacing: 0;
}

code, .code {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    background: var(--paper-shadow);
    color: var(--ink-dark);
    padding: var(--space-1) var(--space-3);
    border: var(--rule-hairline) solid var(--paper-border);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS: Editorial Actions
   ═══════════════════════════════════════════════════════════════════ */

.btn {
    font-family: var(--font-headline);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;

    padding: var(--space-6) var(--space-12);
    border: var(--rule-bold) solid var(--ink-black);
    cursor: pointer;
    position: relative;

    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);

    transition: all var(--motion-quick) var(--ease-standard);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--ink-black);
    color: var(--paper-white);
    border-color: var(--ink-black);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    box-shadow: none;
    transform: none;
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-secondary {
    background: var(--paper-white);
    color: var(--ink-black);
    border-color: var(--ink-black);
    box-shadow: none;
}

.btn-secondary:hover {
    background: var(--ink-black);
    color: var(--paper-white);
    transform: none;
}

.btn-danger {
    background: var(--accent-red);
    color: var(--paper-white);
    border-color: var(--accent-red);
}

.btn-danger:hover {
    background: #A01830;
    border-color: #A01830;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS: Article Blocks
   ═══════════════════════════════════════════════════════════════════ */

.card {
    background: var(--paper-white);
    border: none;
    border-top: var(--rule-bold) solid var(--ink-black);
    padding: var(--space-12);
    box-shadow: var(--shadow-subtle);
    margin-bottom: var(--space-12);
    transition: all var(--motion-standard) var(--ease-standard);
    position: relative;
}

/* Remove corner brackets - use ruled lines instead */
.card::before,
.card::after {
    display: none;
}

/* Bottom rule for card */
.card:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: var(--space-12);
    right: var(--space-12);
    height: var(--rule-hairline);
    background: var(--paper-border);
}

.card:hover {
    box-shadow: var(--shadow-medium);
    transform: none;
    border-color: var(--ink-black);
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: var(--rule-hairline) solid var(--paper-border);
}

.card-title {
    font-family: var(--font-headline);
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    color: var(--ink-black);
    margin: 0;
    line-height: var(--line-tight);
}

.card-body {
    color: var(--ink-dark);
    line-height: var(--line-relaxed);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS: Editorial Input
   ═══════════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: var(--space-12);
    position: relative;
}

.form-label {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--ink-black);
    margin-bottom: var(--space-3);
    line-height: var(--line-tight);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);

    padding: var(--space-6);
    border: var(--rule-standard) solid var(--ink-light);

    background: var(--paper-white);
    color: var(--ink-dark);

    transition: all var(--motion-standard) var(--ease-standard);
    outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--ink-black);
    box-shadow: 0 0 0 2px var(--paper-shadow);
    background: var(--paper-white);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--ink-faded);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   TASK SYSTEM: News Items
   ═══════════════════════════════════════════════════════════════════ */

.task-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.task-item {
    background: var(--paper-white);
    border: none;
    border-bottom: var(--rule-hairline) solid var(--paper-border);
    padding: var(--space-8) var(--space-6);
    position: relative;
    transition: all var(--motion-standard) var(--ease-standard);
    cursor: pointer;
}

.task-item:first-child {
    border-top: var(--rule-bold) solid var(--ink-black);
}

/* State indicators - editorial left stripe */
.task-item[data-state="active"] {
    border-left: var(--rule-heavy) solid var(--accent-red);
    background: var(--paper-white);
    padding-left: var(--space-8);
}

.task-item[data-state="next"] {
    border-left: var(--rule-heavy) solid var(--accent-blue);
    background: var(--paper-white);
    padding-left: var(--space-8);
}

.task-item[data-state="waiting"] {
    border-left: var(--rule-heavy) solid var(--accent-gold);
    background: var(--paper-white);
    padding-left: var(--space-8);
}

.task-item[data-state="completed"] {
    border-left: var(--rule-heavy) solid var(--ink-faded);
    background: var(--paper-aged);
    padding-left: var(--space-8);
    opacity: 0.7;
}

.task-item[data-priority="1"] {
    box-shadow: none;
}

.task-item[data-priority="1"] .task-title {
    color: var(--accent-red);
    font-weight: var(--weight-bold);
}

.task-item[data-priority="2"] .task-title {
    font-weight: var(--weight-semibold);
}

.task-item:hover {
    background: var(--paper-aged);
    box-shadow: none;
    transform: none;
}

.task-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.task-main {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-family: var(--font-headline);
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    color: var(--ink-black);
    margin-bottom: var(--space-2);
    line-height: var(--line-tight);
}

.task-description {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--ink-gray);
    line-height: var(--line-normal);
    margin-bottom: var(--space-3);
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.task-badge {
    font-family: var(--font-mono);
    font-size: var(--text-tiny);
    font-weight: var(--weight-medium);

    padding: var(--space-1) var(--space-3);

    background: var(--paper-shadow);
    color: var(--ink-gray);
    border: var(--rule-hairline) solid var(--paper-border);

    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.task-badge.priority-high {
    background: var(--accent-red-light);
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.task-badge.priority-medium {
    background: var(--accent-gold-light);
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.task-badge.state-active {
    background: var(--accent-red-light);
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.task-badge.age-warning {
    background: var(--age-warning-bg);
    color: var(--age-warning);
    border-color: var(--age-warning);
}

.task-badge.age-critical {
    background: var(--age-critical-bg);
    color: var(--age-critical);
    border-color: var(--age-critical);
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD: Front Page
   ═══════════════════════════════════════════════════════════════════ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-16);
    margin-top: var(--space-12);
}

.dashboard-section {
    background: var(--paper-white);
    border: none;
    border-top: var(--rule-bold) solid var(--ink-black);
    padding: var(--space-12);
    box-shadow: var(--shadow-subtle);
    transition: all var(--motion-standard) var(--ease-standard);
    position: relative;
}

/* Remove corner brackets */
.dashboard-section::before,
.dashboard-section::after {
    display: none;
}

.dashboard-section:hover {
    box-shadow: var(--shadow-medium);
    transform: none;
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: var(--rule-hairline) solid var(--paper-border);
    gap: var(--space-8);
}

.dashboard-section-title {
    font-family: var(--font-headline);
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    color: var(--ink-black);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-section-count {
    background: var(--ink-black);
    color: var(--paper-white);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    padding: var(--space-2) var(--space-4);
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Context task list for dashboard */
.context-task-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 300px;
    overflow-y: auto;
    padding-right: var(--space-3);
    flex: 1;
}

.context-task-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    border-bottom: var(--rule-hairline) solid var(--paper-border);
    transition: all var(--motion-standard) var(--ease-standard);
    min-height: var(--space-12);
    justify-content: flex-start;
}

.context-task-item:last-child {
    border-bottom: none;
}

.context-task-item:hover {
    background: var(--paper-aged);
    margin: 0 calc(-1 * var(--space-6));
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.context-task-item .task-name {
    font-family: var(--font-headline);
    font-size: var(--text-medium);
    font-weight: var(--weight-medium);
    color: var(--ink-black);
    cursor: pointer;
    transition: all var(--motion-standard) var(--ease-standard);
    line-height: var(--line-normal);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
    margin: 0;
}

.context-task-item .task-name:hover {
    color: var(--accent-red);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: var(--space-2);
}

.context-task-item .project-name {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: var(--weight-normal);
    color: var(--ink-gray);
    cursor: pointer;
    transition: all var(--motion-standard) var(--ease-standard);
    opacity: 0.8;
    line-height: var(--line-tight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.context-task-item .project-name:hover {
    color: var(--accent-blue);
    text-decoration: underline;
    opacity: 1;
}

.context-task-item .project-name:not(.clickable) {
    cursor: default;
    opacity: 0.5;
}

.context-task-item .project-name:not(.clickable):hover {
    text-decoration: none;
    color: var(--ink-gray);
}

.context-task-item .task-state {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--ink-light);
    font-style: italic;
    white-space: nowrap;
    opacity: 0.7;
    font-weight: var(--weight-normal);
}

.task-first-line {
    line-height: var(--line-normal);
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.context-empty {
    text-align: center;
    color: var(--ink-light);
    font-style: italic;
    padding: var(--space-12);
    opacity: 0.6;
    font-family: var(--font-body);
    font-size: var(--text-base);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE: Column Collapse
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .nav {
        flex-wrap: wrap;
        gap: 0;
    }

    .nav-btn {
        font-size: var(--text-tiny);
        padding: var(--space-4) var(--space-4);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    h1 { font-size: var(--text-huge); }
    h2 { font-size: var(--text-xlarge); }
    h3 { font-size: var(--text-large); }

    .main {
        padding: var(--space-12) 0 var(--space-24);
    }

    .card {
        padding: var(--space-8);
    }
}

@media (max-width: 480px) {
    .header .container {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
        gap: var(--space-8);
    }

    .btn {
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-tiny);
    }

    h1 { font-size: var(--text-xlarge); }
    h2 { font-size: var(--text-large); }

    .task-item {
        padding: var(--space-6);
    }

    .task-title {
        font-size: var(--text-base);
    }

    .context-task-item {
        min-height: var(--space-12);
        padding: var(--space-4) 0;
        gap: var(--space-2);
    }

    .context-task-item .task-name {
        font-size: var(--text-base);
    }

    .context-task-item .project-name {
        font-size: var(--text-tiny);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════ */

*:focus {
    outline: 2px solid var(--ink-black);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-3); }
.mt-3 { margin-top: var(--space-6); }
.mt-4 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-3); }
.mb-3 { margin-bottom: var(--space-6); }
.mb-4 { margin-bottom: var(--space-12); }

.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }

.text-primary { color: var(--ink-black); }
.text-secondary { color: var(--ink-dark); }
.text-brass { color: var(--accent-blue); }
.text-success { color: var(--semantic-success); }
.text-warning { color: var(--semantic-warning); }
.text-error { color: var(--semantic-error); }

/* ═══════════════════════════════════════════════════════════════════
   LOGIN SCREEN: The Subscriber Gate
   ═══════════════════════════════════════════════════════════════════ */

.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: var(--paper-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
}

.login-container {
    background: var(--paper-white);
    border: none;
    border-top: var(--rule-heavy) solid var(--ink-black);
    box-shadow: var(--shadow-strong);
    padding: var(--space-24);
    max-width: 400px;
    width: 100%;
    animation: login-entrance var(--motion-smooth) var(--ease-out) both;
    text-align: center;
    position: relative;
}

/* Double rule effect */
.login-container::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink-black);
}

/* Remove corner brackets */
.login-container::before {
    display: none;
}

@keyframes login-entrance {
    from {
        opacity: 0;
        transform: translateY(var(--space-12));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-title {
    font-family: var(--font-headline);
    font-size: var(--text-massive);
    font-weight: var(--weight-bold);
    color: var(--ink-black);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.login-tagline {
    font-family: var(--font-headline);
    font-size: var(--text-medium);
    font-weight: var(--weight-normal);
    font-style: italic;
    color: var(--ink-gray);
    letter-spacing: 0.02em;
    text-transform: none;
    margin-bottom: var(--space-16);
    opacity: 1;
}

.login-form {
    background: var(--paper-aged);
    border: var(--rule-standard) solid var(--paper-border);
    padding: var(--space-12);
    margin-top: var(--space-12);
}

.login-form h2 {
    font-family: var(--font-headline);
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    color: var(--ink-black);
    margin-bottom: var(--space-12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-btn {
    width: 100%;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    padding: var(--space-8);
    background: var(--ink-black);
    border: var(--rule-bold) solid var(--ink-black);
    color: var(--paper-white);
    margin-top: var(--space-12);
}

.login-btn:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.login-error {
    background: var(--accent-red-light);
    color: var(--accent-red);
    border: var(--rule-standard) solid var(--accent-red);
    padding: var(--space-6);
    margin-top: var(--space-12);
    font-size: var(--text-small);
    animation: error-appear var(--motion-standard) var(--ease-standard) both;
}

@keyframes error-appear {
    from {
        opacity: 0;
        transform: translateY(-var(--space-3));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL SYSTEMS: Overlay Articles
   ═══════════════════════════════════════════════════════════════════ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.7);
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--motion-smooth) var(--ease-standard);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal-content {
    background: var(--paper-white);
    border-top: var(--rule-heavy) solid var(--ink-black);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-dramatic);
    transform: translateY(var(--space-8));
    transition: transform var(--motion-smooth) var(--ease-standard);
}

.modal.show .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-12);
    border-bottom: var(--rule-standard) solid var(--paper-border);
    background: var(--paper-aged);
}

.modal-header h3 {
    font-family: var(--font-headline);
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    color: var(--ink-black);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--text-large);
    cursor: pointer;
    color: var(--ink-gray);
    padding: var(--space-3);
    transition: all var(--motion-standard) var(--ease-standard);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.modal-body {
    padding: var(--space-12);
}

/* Export modal specific styles */
.export-options h4 {
    font-family: var(--font-headline);
    font-size: var(--text-small);
    color: var(--ink-black);
    margin: var(--space-12) 0 var(--space-6) 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: var(--rule-hairline) solid var(--paper-border);
    padding-bottom: var(--space-2);
}

.export-options h4:first-child {
    margin-top: 0;
}

.format-buttons {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    flex-wrap: wrap;
}

.format-btn {
    padding: var(--space-4) var(--space-8);
    border: var(--rule-standard) solid var(--ink-light);
    background: var(--paper-white);
    color: var(--ink-dark);
    font-family: var(--font-headline);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--motion-standard) var(--ease-standard);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-small);
}

.format-btn:hover {
    background: var(--ink-black);
    color: var(--paper-white);
    border-color: var(--ink-black);
}

.format-btn.active {
    background: var(--ink-black);
    color: var(--paper-white);
    border-color: var(--ink-black);
}

.export-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.export-completed-section {
    margin: var(--space-12) 0;
    padding: var(--space-12);
    background: var(--paper-aged);
    border: var(--rule-hairline) solid var(--paper-border);
}

.export-completed-section h4 {
    font-size: var(--text-small);
    margin: 0 0 var(--space-6) 0;
    border-bottom: none;
}

.checkbox-filter, .radio-filter {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--ink-dark);
    cursor: pointer;
    user-select: none;
    margin: var(--space-4) 0;
}

.checkbox-filter input[type="checkbox"],
.radio-filter input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: var(--rule-standard) solid var(--ink-light);
    background: var(--paper-white);
    cursor: pointer;
    position: relative;
    transition: all var(--motion-standard) var(--ease-standard);
}

.checkbox-filter input[type="checkbox"] {
    border-radius: 0;
}

.radio-filter input[type="radio"] {
    border-radius: 50%;
}

.checkbox-filter input[type="checkbox"]:checked,
.radio-filter input[type="radio"]:checked {
    background: var(--ink-black);
    border-color: var(--ink-black);
}

.checkbox-filter input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: var(--paper-white);
    font-size: 12px;
    font-weight: bold;
}

.radio-filter input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--paper-white);
}

/* ═══════════════════════════════════════════════════════════════════
   SHORTCUTS MODAL: Reference Guide
   ═══════════════════════════════════════════════════════════════════ */

.shortcuts-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--motion-smooth) var(--ease-standard);
}

.shortcuts-modal.show {
    display: flex;
    opacity: 1;
}

.shortcuts-content {
    background: var(--paper-white);
    border-top: var(--rule-heavy) solid var(--ink-black);
    box-shadow: var(--shadow-dramatic);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform var(--motion-smooth) var(--ease-standard);
}

.shortcuts-modal.show .shortcuts-content {
    transform: scale(1);
}

.shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-12);
    border-bottom: var(--rule-bold) solid var(--ink-black);
    background: var(--paper-aged);
}

.shortcuts-header h2 {
    color: var(--ink-black);
    font-family: var(--font-headline);
    font-size: var(--text-large);
    font-weight: var(--weight-bold);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
}

.shortcuts-close {
    background: transparent;
    border: var(--rule-standard) solid var(--ink-black);
    color: var(--ink-black);
    font-size: var(--text-medium);
    cursor: pointer;
    padding: var(--space-4);
    transition: all var(--motion-standard) var(--ease-standard);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcuts-close:hover {
    background: var(--ink-black);
    color: var(--paper-white);
}

.shortcuts-body {
    padding: var(--space-12);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-12);
    overflow-y: auto;
    max-height: 65vh;
}

.shortcuts-section h3 {
    color: var(--ink-black);
    font-family: var(--font-headline);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-6) 0;
    padding-bottom: var(--space-3);
    border-bottom: var(--rule-bold) solid var(--ink-black);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.shortcuts-description {
    color: var(--ink-dark);
    font-family: var(--font-body);
    font-size: var(--text-small);
    margin: 0 0 var(--space-6) 0;
    line-height: var(--line-relaxed);
}

.shortcut-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-2) 0;
}

.shortcut-item kbd {
    background: var(--paper-aged);
    border: var(--rule-standard) solid var(--ink-light);
    color: var(--ink-black);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    padding: var(--space-2) var(--space-4);
    min-width: 28px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 var(--ink-light);
}

.shortcut-item span {
    color: var(--ink-dark);
    font-family: var(--font-body);
    font-size: var(--text-small);
    flex: 1;
}

.shortcuts-note {
    color: var(--ink-gray);
    font-family: var(--font-body);
    font-size: var(--text-small);
    margin: var(--space-6) 0 0 0;
    padding: var(--space-6);
    background: var(--paper-aged);
    border-left: var(--rule-heavy) solid var(--ink-black);
    line-height: var(--line-relaxed);
}

.shortcuts-note strong {
    color: var(--ink-black);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTEXT MENU: Quick Actions
   ═══════════════════════════════════════════════════════════════════ */

.context-menu {
    display: none;
    position: fixed;
    z-index: 3000;
    background: var(--paper-white);
    border: var(--rule-standard) solid var(--ink-black);
    box-shadow: var(--shadow-strong);
    min-width: 160px;
    padding: var(--space-4);
    overflow: hidden;
    opacity: 0;
    transform: translateY(var(--space-3));
    transition: all var(--motion-standard) var(--ease-standard);
}

.context-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.context-menu-item {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-8);
    margin: var(--space-1) 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-normal);
    color: var(--ink-dark);
    transition: all var(--motion-quick) var(--ease-standard);
    user-select: none;
    border-left: var(--rule-bold) solid transparent;
}

.context-menu-item:hover {
    background: var(--ink-black);
    color: var(--paper-white);
    border-left-color: var(--accent-red);
    transform: translateX(var(--space-2));
}

.context-menu-item:active {
    transform: translateX(var(--space-2)) scale(0.98);
}

.context-menu-item[data-action="complete"]:hover {
    background: var(--semantic-success);
}

.context-menu-item[data-action="delete"]:hover {
    background: var(--accent-red);
}

/*
 * ═══════════════════════════════════════════════════════════════════
 *                     THE BROADSHEET COMPLETE
 * ═══════════════════════════════════════════════════════════════════
 *
 * An editorial redesign inspired by premium newspapers. Warm cream
 * paper, rich black ink, serif headlines, and ruled lines create
 * an interface that feels like reading the morning broadsheet.
 *
 * "All the tasks that's fit to print."
 *
 */