@layer base, components, responsive;

@layer base {
    :root {
        --ink: #252a27;
        --muted: #656b66;
        --paper: #fafbf9;
        --line: #e2e6e1;
        --green: #294e3f;
        --soft: #edf1eb;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--ink);
        background: var(--paper);
        font-synthesis: none;
    }
    * { box-sizing: border-box; }
    body { margin: 0; font-size: 15px; line-height: 1.5; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    button, summary { cursor: pointer; }
    button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    a:focus-visible, button:focus-visible, summary:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 4px;
    }
    input, textarea, select {
        min-width: 0;
        max-width: 100%;
        border: 1px solid #b6beb6;
        border-radius: 6px;
        background: white;
        color: var(--ink);
        padding: 11px 12px;
    }
    input:focus, textarea:focus, select:focus {
        outline: 2px solid var(--green);
        outline-offset: 1px;
    }
    input:not([type=radio]):not([type=checkbox]), select, textarea { width: 100%; }
    input::placeholder, textarea::placeholder { color: var(--muted); }
    textarea { resize: vertical; }
    label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { font-size: 32px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; margin-bottom: 12px; }
    h2 { font-size: 21px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; margin-bottom: 20px; }
    h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
    p { line-height: 1.65; margin-bottom: 20px; }
    small, time { font-size: 12px; }
    time { color: var(--muted); }
    form { margin: 0; }
    fieldset { margin: 0; padding: 0; border: 0; }
    legend { font-size: 14px; margin-bottom: 10px; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    td, th { padding: 18px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
    th { font-size: 12px; font-weight: 500; color: var(--muted); }
    td:first-child, th:first-child { padding-left: 0; }
    td:last-child, th:last-child { padding-right: 0; }
    td small { display: block; color: var(--muted); margin-top: 4px; }
    td p { font-size: 14px; margin: 8px 0 0; }
    tfoot th, tfoot td { color: var(--ink); font-weight: 600; }
    pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
    ::selection { background: #dce9db; }
}

@layer components {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .skip-link { position: fixed; top: -100px; left: 16px; z-index: 50; background: var(--green); color: white; padding: 12px; }
    .skip-link:focus { top: 12px; }
    .topbar {
        max-width: 1104px;
        margin: 0 auto;
        padding: 24px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .brand { font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -1.5px; }
    .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--soft);
        color: #425044;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 550;
    }
    .muted, .role-label { color: var(--muted); }
    .small, .role-label { font-size: 13px; }
    .eyebrow { display: block; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
    .accent-dot { color: var(--green); }
    .hint { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 0; }
    .quiet-link, .back-link, .text-button { color: var(--muted); font-size: 14px; }
    .quiet-link:hover, .back-link:hover, .text-button:hover { color: var(--ink); text-decoration: underline; }
    .text-button { border: 0; background: none; padding: 10px 0; }
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        gap: 8px;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 550;
        line-height: 1.4;
        white-space: nowrap;
    }
    .button.primary { color: white; background: var(--green); }
    .button.primary:hover { background: #1d3d30; }
    .button.secondary { border-color: #c4ccc3; background: transparent; }
    .button.secondary:hover, .button.subtle:hover { background: var(--soft); }
    .button.subtle { background: transparent; color: var(--muted); }
    .button.full { width: 100%; }
    .small-button { min-height: 40px; font-size: 13px; padding: 8px 14px; }
    .icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        font-size: 22px;
        color: var(--muted);
        flex-shrink: 0;
    }
    .icon-button:hover { background: var(--soft); color: var(--ink); }
    .button-row, .decision-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .stack { display: flex; flex-direction: column; gap: 22px; }
    .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .notice, .form-error { padding: 14px 16px; background: var(--soft); border-radius: 6px; font-size: 13px; line-height: 1.6; }
    .form-error { background: #fbede7; color: #913a20; }
    .menu { position: relative; flex-shrink: 0; }
    .menu > summary { list-style: none; }
    .menu > summary::-webkit-details-marker { display: none; }
    .menu-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 5;
        min-width: 200px;
        max-width: calc(100vw - 40px);
        padding: 8px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 8px 32px #172a1914;
    }
    .menu:not([open]) > .menu-panel { display: none; }
    .menu-panel > a, .menu-panel > form > button, .menu-label {
        display: block;
        width: 100%;
        padding: 11px 12px;
        text-align: left;
        font-size: 14px;
        border: 0;
        border-radius: 4px;
        background: transparent;
    }
    .menu-panel > a:hover, .menu-panel > form > button:hover { background: var(--soft); }
    .menu-label { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .workspace, .projects-page, .document-page { width: min(880px, calc(100% - 64px)); margin: 48px auto 80px; }
    .workspace.focused { max-width: 640px; margin-top: 32px; }
    .project-heading, .page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 36px; }
    .project-heading h1 { margin-bottom: 10px; overflow-wrap: anywhere; }
    .budget-line { color: var(--muted); font-size: 14px; display: inline-block; padding: 4px 0; }
    .budget-line strong { color: var(--ink); font-weight: 550; }
    .budget-line:hover { text-decoration: underline; }
    .project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
    .project-toolbar > .button { margin: 0 0 12px; }
    .project-nav { display: flex; gap: 28px; }
    .project-nav > a { color: var(--muted); padding: 13px 0 22px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; }
    .project-nav > a:hover { color: var(--ink); }
    .project-nav > a[aria-current] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 550; }
    .list-tools { display: flex; justify-content: space-between; align-items: center; min-height: 56px; gap: 16px; color: var(--muted); font-size: 12px; }
    .filter-menu > summary { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 13px; }
    .filter-menu .menu-panel { left: 0; right: auto; width: 280px; padding: 20px; }
    .filter-menu .menu-panel > a { padding: 0; min-height: 24px; }
    .idea-row { display: flex; border-bottom: 1px solid var(--line); }
    .idea-link { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; min-width: 0; padding: 23px 0; }
    .idea-row:hover { background: #f2f5ef; }
    .idea-title { display: block; font-size: 17px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
    .idea-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
    .state.working, .state.approved { color: #2c6248; }
    .idea-estimate { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .idea-estimate strong { display: block; font-size: 16px; font-weight: 500; }
    .idea-estimate > span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
    .list-note { color: var(--muted); font-size: 12px; margin: 20px 0 0; }
    .list-note a { text-decoration: underline; }
    .priority-control { display: flex; align-items: center; margin-right: 16px; }
    .detail-navigation { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
    .detail-state { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
    .idea-detail h1 { margin-bottom: 24px; font-size: 34px; overflow-wrap: anywhere; }
    .detail-description { font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; margin-bottom: 32px; }
    .detail-estimate { display: flex; gap: 56px; margin: 0 0 18px; }
    .detail-estimate dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
    .detail-estimate dd { margin: 0; font-size: 26px; letter-spacing: -.5px; }
    .idea-detail > .hint { margin-bottom: 22px; }
    .decision-actions { margin: 28px 0 36px; }
    .detail-section { border-top: 1px solid var(--line); }
    .detail-section:first-of-type { margin-top: 36px; }
    .detail-section > summary { padding: 21px 0; display: flex; align-items: center; gap: 12px; list-style: none; font-size: 14px; }
    .detail-section > summary::-webkit-details-marker { display: none; }
    .detail-section > summary > span:nth-child(2) { margin-left: auto; font-size: 13px; color: var(--muted); }
    .detail-section > summary::after { content: '+'; font-size: 18px; color: var(--muted); width: 16px; text-align: center; }
    .detail-section[open] > summary::after { content: '−'; }
    .work-entry, .comment, .decision-entry { padding: 0 0 24px; }
    .work-entry p, .comment p, .decision-entry p { margin: 6px 0; overflow-wrap: anywhere; }
    .work-entry > span, .decision-entry p { font-size: 13px; color: var(--muted); }
    .comment strong, .decision-entry strong { font-size: 14px; font-weight: 600; }
    .comment-form { margin-bottom: 24px; }
    .comment-form > .button { margin-top: 12px; }
    .status { color: var(--muted); font-size: 13px; white-space: nowrap; }
    .status.approved, .status.working, .status.paid { color: #2c6248; }
    .content-card { padding: 28px 0; }
    .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
    .section-heading h2, .section-heading h3 { margin-bottom: 0; }
    .content-card > .hint { margin-top: 20px; }
    .content-card > h3 { margin-top: 32px; }
    .table-scroll { overflow-x: auto; }
    .number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .table-title { font-weight: 500; }
    .table-title:hover { text-decoration: underline; }
    .cost-summary { display: flex; justify-content: space-between; gap: 24px; margin: 0 0 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
    .cost-summary dt { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
    .cost-summary dd { font-size: 26px; font-weight: 500; margin: 0; }
    .two-column { display: grid; grid-template-columns: 1fr; gap: 0; }
    .two-column > .content-card + .content-card { border-top: 1px solid var(--line); }
    .two-column .stack { max-width: 520px; }
    .person-row { display: flex; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
    .person-name { flex: 1; min-width: 0; }
    .person-name strong { display: block; font-size: 15px; font-weight: 550; }
    .person-name small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
    .inline-form { display: flex; gap: 8px; }
    .inline-form select { width: auto; font-size: 13px; }
    .compact-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
    .compact-row small { display: block; margin-top: 4px; color: var(--muted); }
    .compact-row strong { overflow-wrap: anywhere; }
    .share-card > p { max-width: 600px; }
    .share-card > form { margin-top: 20px; }
    .activity-item { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
    .activity-item > div { flex: 1; min-width: 0; }
    .activity-item strong { font-weight: 550; font-size: 14px; }
    .activity-item p { margin: 4px 0; overflow-wrap: anywhere; }
    .mail-previews details { padding: 16px 0; border-bottom: 1px solid var(--line); }
    .mail-previews .status { margin-left: 16px; }
    .mail-previews pre { margin: 16px 0 0; font-size: 13px; }
    .form-dialog {
        width: min(560px, calc(100% - 32px));
        max-height: calc(100dvh - 48px);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 32px;
        color: var(--ink);
        background: var(--paper);
        overflow-y: auto;
    }
    .form-dialog::backdrop { background: #1c2a2459; }
    .form-dialog.wide-dialog { width: min(760px, calc(100% - 32px)); }
    .dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
    .dialog-heading h2 { font-size: 24px; margin-bottom: 0; }
    .importance-choice { display: flex; gap: 24px; }
    .importance-choice label { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
    .importance-choice input { margin: 0; accent-color: var(--green); }
    .work-selection label { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .work-selection input { margin-top: 5px; accent-color: var(--green); }
    .work-selection span { flex: 1; }
    .work-selection small { display: block; color: var(--muted); margin-top: 4px; }
    .work-selection b { white-space: nowrap; font-weight: 550; }
    .empty-state { padding: 56px 0; color: var(--muted); }
    .empty-state h2 { color: var(--ink); font-size: 21px; margin-bottom: 12px; }
    .empty-state p { max-width: 480px; margin-bottom: 0; }
    .project-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
    .project-card:hover h2 { text-decoration: underline; }
    .project-card h2 { margin-bottom: 8px; overflow-wrap: anywhere; }
    .project-card p { color: var(--muted); margin: 0; font-size: 14px; overflow-wrap: anywhere; }
    .welcome { width: min(360px, calc(100% - 48px)); margin: 80px auto; }
    .auth-card h1 { margin-bottom: 32px; }
    .auth-card > .hint { margin-top: 28px; }
    .message-page { width: min(560px, calc(100% - 48px)); margin: 64px auto; }
    .message-page .button-row, .message-page .stack { margin-top: 28px; }
    .message-page > .hint { margin-top: 20px; }
    .document-page > .back-link { display: inline-block; margin-bottom: 32px; }
    .invoice-paper { background: white; border: 1px solid var(--line); padding: 36px; }
    .invoice-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
    .invoice-parties p { font-size: 13px; overflow-wrap: anywhere; }
    .invoice-totals { width: min(100%, 300px); margin: 32px 0 32px auto; }
    .invoice-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
    .invoice-totals .grand-total { border-top: 1px solid var(--line); font-size: 20px; margin-top: 8px; }
    .invoice-actions { margin-top: 28px; }
    .invoice-actions p { font-size: 14px; color: var(--muted); }
    .invoice-actions .button { margin: 0 8px 8px 0; }
}

@layer responsive {
    @media (max-width: 600px) {
        body { font-size: 15px; }
        h1 { font-size: 28px; }
        .topbar { padding: 20px 24px; }
        .brand { font-size: 27px; }
        .workspace, .projects-page, .document-page { width: calc(100% - 48px); margin: 32px auto 56px; }
        .workspace.focused { margin-top: 12px; }
        .project-heading { margin-bottom: 24px; gap: 8px; }
        .project-heading h1 { font-size: 26px; letter-spacing: -.7px; }
        .budget-line { font-size: 13px; }
        .project-toolbar { gap: 12px; }
        .project-toolbar > .button { padding: 10px 13px; font-size: 13px; }
        .project-nav { gap: 20px; }
        .project-nav > a { font-size: 13px; }
        .idea-link { gap: 16px; padding: 21px 0; }
        .idea-title { font-size: 16px; }
        .idea-meta, .idea-estimate > span { font-size: 12px; }
        .idea-estimate { max-width: 90px; }
        .idea-estimate strong { font-size: 15px; }
        .priority-control { flex-direction: column; justify-content: center; margin-right: 8px; }
        .priority-control .icon-button { width: 36px; height: 36px; }
        .detail-navigation { margin-bottom: 24px; }
        .idea-detail h1 { font-size: 30px; }
        .detail-description { font-size: 16px; }
        .detail-estimate { gap: 36px; }
        .detail-estimate dd { font-size: 24px; }
        .cost-summary { display: grid; gap: 20px; }
        .cost-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
        .cost-summary dt { margin-bottom: 0; }
        .cost-summary dd { font-size: 21px; }
        .content-card { padding: 24px 0; }
        .section-heading { flex-wrap: wrap; gap: 12px; }
        .table-scroll table { min-width: 600px; }
        .table-scroll .cost-table, .table-scroll .invoices-table { min-width: 0; font-size: 14px; }
        .cost-table td, .cost-table th, .invoices-table td, .invoices-table th { padding-inline: 8px; }
        .cost-table td:first-child, .cost-table th:first-child, .invoices-table td:first-child, .invoices-table th:first-child { padding-left: 0; }
        .cost-table td:last-child, .cost-table th:last-child, .invoices-table td:last-child, .invoices-table th:last-child { padding-right: 0; }
        .person-row { flex-wrap: wrap; }
        .person-name { flex-basis: calc(100% - 60px); }
        .inline-form { margin-left: 52px; }
        .person-row > .role-label { margin-left: 52px; }
        .activity-item { flex-wrap: wrap; }
        .activity-item > .quiet-link { margin-left: 52px; }
        .form-dialog { padding: 24px; max-height: calc(100dvh - 32px); }
        .form-dialog input, .form-dialog textarea, .form-dialog select, .auth-card input { font-size: 16px; }
        .form-row { gap: 16px; }
        .dialog-heading { gap: 16px; }
        .dialog-heading h2 { font-size: 22px; }
        .work-selection label { flex-wrap: wrap; }
        .work-selection b { margin-left: 26px; }
        .project-card { gap: 16px; }
        .project-card h2 { font-size: 19px; }
        .welcome { margin-top: 48px; }
        .invoice-paper { padding: 24px; }
        .invoice-parties { grid-template-columns: 1fr; gap: 20px; }
        .invoice-parties p { margin-bottom: 8px; }
        .document-page > .page-heading { flex-wrap: wrap; }
    }
    @media (max-width: 360px) {
        .workspace, .projects-page, .document-page { width: calc(100% - 32px); }
        .project-nav { gap: 16px; }
        .project-toolbar > .button { padding-inline: 10px; }
        .form-row { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    }
    @media print {
        .topbar, .invoice-actions, .document-page > .page-heading, .document-page > .back-link { display: none; }
        .document-page { width: 100%; margin: 0; }
        .invoice-paper { padding: 0; border: 0; }
        .table-scroll { overflow: visible; }
    }
}