/* Home: a connected farm-to-market workspace. All figures come from account records. */ .home-dashboard { --home-ink: var(--text, var(--ink, #183126)); --home-muted: var(--text-2, var(--ink-2, #617166)); --home-line: var(--line, var(--line, #e0e7df)); --home-surface: var(--surface, #fff); --home-brand: var(--brand, #205c43); --home-soft: color-mix(in srgb, var(--home-surface) 94%, var(--home-brand) 6%); color: var(--home-ink); min-width: 0; padding-bottom: 24px; } .home-dashboard * { box-sizing: border-box; } .home-dashboard a { color: inherit; } .home-dashboard button, .home-dashboard summary, .home-dashboard a { -webkit-tap-highlight-color: transparent; } .home-dashboard :is(a, button, summary):focus-visible { outline: 2px solid var(--home-brand); outline-offset: 4px; } /* The tap highlight is off, so a pressed control shows its own state (ledger 57). */ .home-dashboard .home-metric:active { transform: none; border-color: var(--home-brand); background: var(--home-soft); } .home-dashboard .home-overview-stat:active > .k, .home-dashboard .home-overview-stat:active > .v { color: var(--home-brand); } .home-dashboard .home-work-filters button:active, .home-dashboard .home-work-group > summary:active, .home-dashboard .home-task-action:active, .home-dashboard .home-workflow-main:active, .home-dashboard .home-workflow-tools > summary:active, .home-dashboard .home-workflow-tools a:active, .home-dashboard .home-more-tasks > summary:active { background: color-mix(in srgb, var(--home-surface) 86%, var(--home-brand) 14%); } .home-dashboard .home-help-link:active { background: color-mix(in srgb, var(--help-link-bg) 78%, var(--help-link-ink)); } .home-icon { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block; vertical-align: middle; } .home-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; color: var(--home-muted); font-size: 12px; } .home-context > span { display: flex; align-items: center; gap: 8px; min-width: 0; } .home-context .home-icon { width: 16px; height: 16px; } .home-context time { flex: 0 0 auto; } .home-read-warning { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--home-line)); border-radius: 12px; background: color-mix(in srgb, var(--home-surface) 92%, var(--warn) 8%); font-size: 13px; } .home-read-warning > span { flex: 1; } .home-read-warning .home-icon { color: var(--warn); } .home-read-warning .btn { white-space: nowrap; } .home-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; } .home-metric { display: flex; flex-direction: column; min-width: 0; gap: 15px; padding: 20px; background: var(--home-surface); border: 1px solid var(--home-line); border-radius: 15px; text-decoration: none; transition: border-color .16s, transform .16s; } .home-metric:hover { border-color: var(--home-brand); transform: translateY(-2px); } .home-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; } .home-metric-top .home-icon { color: var(--home-muted); width: 19px; height: 19px; } .home-metric-value { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .home-metric-attention .home-metric-value { color: var(--warn-text, #93621d); } .home-metric-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--home-muted); font-size: 12px; line-height: 1.5; } .home-metric-bottom > span:last-child { font-size: 18px; color: var(--home-brand); } .home-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .43fr); gap: 22px; align-items: start; margin-bottom: 36px; } .home-panel { border: 1px solid var(--home-line); background: var(--home-surface); border-radius: 16px; min-width: 0; overflow: hidden; } .home-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 18px; } .home-eyebrow { display: block; font-size: 12px; font-weight: 650; letter-spacing: .12em; line-height: 1.6; color: var(--home-muted); } .home-dashboard h2 { margin: 5px 0 0; font-family: inherit; font-weight: 600; letter-spacing: -.035em; font-size: 21px; line-height: 1.25; } .home-panel-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .home-head-icon { color: var(--home-muted); } .home-total { display: inline-grid; min-width: 25px; height: 25px; padding: 0 7px; place-items: center; background: var(--home-soft); border-radius: 7px; color: var(--home-brand); font-size: 12px; font-weight: 600; letter-spacing: normal; font-variant-numeric: tabular-nums; } .home-work-filters { display: flex; align-items: center; gap: 5px; padding: 0 24px 18px; border-bottom: 1px solid var(--home-line); overflow-x: auto; } .home-work-filters button { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 34px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--home-muted); background: transparent; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .home-work-filters button:hover { background: var(--home-soft); } .home-work-filters button[aria-pressed="true"] { color: var(--home-brand); background: var(--home-soft); border-color: color-mix(in srgb, var(--home-line) 70%, var(--home-brand) 30%); } .home-work-filters button > span { opacity: .8; font-size: 12px; font-variant-numeric: tabular-nums; } .home-work-group { margin: 0; border: 0; border-bottom: 1px solid var(--home-line); border-radius: 0; background: none; padding: 0; } .home-work-group:last-child { border-bottom: 0; } .home-work-group > summary { display: flex; align-items: center; gap: 10px; min-height: 62px; list-style: none; padding: 14px 24px; cursor: pointer; background: var(--home-surface); } .home-dashboard summary::-webkit-details-marker { display: none; } .home-work-group > summary:hover { background: var(--home-soft); } .home-subject-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--home-line); border-radius: 9px; color: var(--home-muted); } .home-subject-icon .home-icon { width: 18px; height: 18px; } .home-subject-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .home-subject-count { color: var(--home-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } .home-chevron { color: var(--home-muted); font-size: 19px; line-height: 1; transition: transform .16s; } .home-work-group[open] > summary .home-chevron, .home-workflow-tools[open] > summary .home-chevron { transform: rotate(180deg); } .home-group-tasks { padding: 0 24px 14px; } .home-task-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--home-line); } .home-task-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--warn); } .home-task-dot-critical { background: var(--bad-text, #b3473f); } .home-task-copy { flex: 1; min-width: 0; } .home-task-copy p { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .home-task-copy > span { display: block; margin-top: 3px; color: var(--home-muted); font-size: 12px; } .home-task-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex: 0 0 auto; max-width: 44%; min-height: 34px; border: 1px solid var(--home-line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; line-height: 1.25; font-weight: 550; color: var(--home-brand); background: var(--home-surface); cursor: pointer; } .home-task-action:hover { border-color: var(--home-brand); background: var(--home-soft); } .home-task-action > span { font-size: 16px; } .home-more-tasks { border: 0; padding: 0; margin: 0; background: none; } .home-more-tasks > summary { padding: 12px 0 2px 16px; font-size: 12px; color: var(--home-brand); font-weight: 550; cursor: pointer; } .home-more-tasks[open] > summary { margin-bottom: 10px; } .home-clear-state { text-align: center; padding: 38px 24px 40px; } .home-clear-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--home-soft); color: var(--home-brand); margin-bottom: 14px; } .home-clear-icon .home-icon { width: 26px; height: 26px; } .home-clear-state h3 { font: inherit; font-size: 16px; font-weight: 600; margin: 0 0 8px; } .home-clear-state p { max-width: 330px; margin: 0 auto; font-size: 13px; color: var(--home-muted); line-height: 1.65; } .home-side-column { display: grid; gap: 16px; } /* The help card is the one brand slab on Home. Light keeps the deep brand ground; dark tints the surface instead, so the card is not the brightest thing on a dark page. Text and link take the pair that clears AA in each. */ .home-help-card { --help-bg: var(--brand); --help-ink: var(--on-brand); --help-link-bg: var(--on-brand); --help-link-ink: var(--brand); border: 1px solid var(--help-bg); border-radius: 16px; background: var(--help-bg); color: var(--help-ink); padding: 24px; } :root[data-theme="dark"] .home-help-card { --help-bg: color-mix(in srgb, var(--surface) 82%, var(--brand) 18%); --help-ink: var(--text); --help-link-bg: var(--brand); --help-link-ink: var(--on-brand); border-color: color-mix(in srgb, var(--line) 60%, var(--brand) 40%); } .home-help-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--help-ink) 40%, var(--help-bg)); border-radius: 12px; color: var(--help-ink); margin-bottom: 22px; } .home-help-card .home-eyebrow { color: color-mix(in srgb, var(--help-ink) 85%, var(--help-bg)); font-size: 12px; letter-spacing: .1em; } .home-help-card h2 { margin: 10px 0; color: var(--help-ink); font-size: 25px; line-height: 1.2; font-weight: 500; } .home-help-card p { color: color-mix(in srgb, var(--help-ink) 92%, var(--help-bg)); font-size: 12px; line-height: 1.7; margin: 13px 0 22px; max-width: 280px; } .home-help-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 11px 14px; border-radius: 9px; background: var(--help-link-bg); color: var(--help-link-ink) !important; text-decoration: none; font-size: 13px; font-weight: 600; } .home-help-link:hover { background: color-mix(in srgb, var(--help-link-bg) 88%, var(--help-link-ink)); } .home-help-link > span { font-size: 18px; line-height: 1; } .home-help-card a:focus-visible { outline-color: var(--help-ink); } .home-handbook { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--home-line); background: var(--home-surface); padding: 18px; border-radius: 14px; } .home-handbook-icon { display: grid; place-items: center; color: var(--home-muted); padding-top: 2px; } .home-handbook-icon .home-icon { width: 20px; height: 20px; } .home-handbook h3 { font-size: 13px; font-weight: 600; margin: 0 0 5px; } .home-handbook p { font-size: 12px; line-height: 1.5; color: var(--home-muted); margin: 0 0 10px; } .home-handbook a { font-size: 12px; color: var(--home-brand); font-weight: 550; text-decoration: none; } .home-handbook a:hover { text-decoration: underline; } @media (max-width: 600px) { .home-handbook a { display: inline-flex; align-items: center; min-height: 44px; } } .home-workflow { margin-bottom: 36px; } .home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .home-section-note { font-size: 12px; color: var(--home-muted); } .home-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .home-workflow-card { border: 1px solid var(--home-line); background: var(--home-surface); border-radius: 16px; min-width: 0; padding: 22px 22px 0; } .home-workflow-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .home-workflow-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; background: var(--home-soft); color: var(--home-brand); } .home-step { color: var(--home-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } .home-workflow-card h3 { font-family: inherit; font-size: 18px; line-height: 1.25; letter-spacing: -.03em; font-weight: 600; margin: 0 0 9px; } .home-workflow-card > p { min-height: 44px; margin: 0 0 20px; font-size: 12px; line-height: 1.65; color: var(--home-muted); max-width: 290px; } .home-workflow-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 10px 12px; background: var(--home-soft); border: 1px solid color-mix(in srgb, var(--home-line) 80%, var(--home-brand) 20%); border-radius: 9px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--home-brand) !important; } .home-workflow-main:hover { border-color: var(--home-brand); } .home-workflow-main > span { font-size: 17px; line-height: 1; } .home-workflow-note { display: flex; align-items: baseline; gap: 6px; margin: 15px 0 19px; font-size: 12px; color: var(--home-muted); } .home-workflow-note strong { color: var(--home-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .home-workflow-tools { margin: 0 -22px; border: 0; border-top: 1px solid var(--home-line); border-radius: 0; padding: 0; background: none; } .home-workflow-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; min-height: 43px; padding: 13px 22px; font-size: 12px; font-weight: 500; color: var(--home-muted); cursor: pointer; } .home-workflow-tools > summary:hover { color: var(--home-brand); } .home-workflow-tools > div { border-top: 1px solid var(--home-line); padding: 8px 10px; } .home-workflow-tools a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; text-decoration: none; font-size: 12px; line-height: 1.4; } .home-workflow-tools a:hover { background: var(--home-soft); } .home-workflow-tools a .home-icon { width: 17px; height: 17px; color: var(--home-muted); } .home-workflow-tools a > span:first-of-type { flex: 1; } .home-workflow-tools small { display: block; font-size: 12px; color: var(--home-muted); margin-top: 2px; } .home-period { font-size: 12px; color: var(--home-muted); border: 1px solid var(--home-line); background: var(--home-surface); padding: 8px 11px; border-radius: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; } .home-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .home-overview-group { padding: 20px; } .home-overview-group h3 { font-size: 14px; font-weight: 600; margin: 0 0 7px; } .home-overview-stat { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 18px 0; border-top: 1px solid var(--home-line); text-decoration: none; } .home-overview-stat:first-of-type { border-top: 0; } .home-overview-stat:last-child { padding-bottom: 0; } .home-overview-label { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; font-size: 12px; color: var(--home-muted); line-height: 1.5; } .home-overview-label > span { font-size: 17px; line-height: 1; opacity: .6; } .home-overview-stat:hover .home-overview-label { color: var(--home-brand); } .home-overview-value { font-size: 25px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; font-variant-numeric: tabular-nums; } .home-overview-value small { font-size: 12px; letter-spacing: 0; font-weight: 400; color: var(--home-muted); margin-left: 7px; } .home-overview-critical .home-overview-value { color: var(--warn-text, #93621d); } .home-overview-negative .home-overview-value { color: var(--bad-text, #b3473f); } .home-overview-stat .trend { font-size: 12px; color: var(--home-muted); } .home-ratio { display: block; height: 5px; background: var(--home-soft); border-radius: 5px; overflow: hidden; margin: 1px 0; } .home-ratio > span { display: block; height: 100%; background: var(--home-brand); border-radius: inherit; } .home-overview-critical .home-ratio > span { background: var(--warn-text, #93621d); } .home-overview-explanation { font-size: 12px; line-height: 1.5; color: var(--home-muted); } .home-data-note { font-size: 12px; line-height: 1.6; color: var(--home-muted); margin: 14px 0 0; } .home-unavailable { border: 1px solid var(--home-line); border-radius: 12px; padding: 22px; background: var(--home-surface); color: var(--home-muted); font-size: 13px; } @media (max-width: 1180px) { .home-metrics { gap: 12px; } .home-metric { padding: 17px; } .home-metric-top { align-items: flex-start; } .home-main-grid { grid-template-columns: minmax(0, 1fr) minmax(225px, .45fr); gap: 16px; } .home-panel-head { padding: 21px 20px 16px; } .home-work-filters { padding: 0 20px 16px; } .home-group-tasks { padding: 0 20px 12px; } .home-work-group > summary { padding: 14px 20px; } .home-help-card { padding: 21px; } .home-workflow-grid, .home-overview-grid { gap: 14px; } } @media (max-width: 1000px) { .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-main-grid { grid-template-columns: minmax(0, 1fr); } .home-side-column { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .home-help-card { display: flex; flex-direction: column; } .home-help-icon { display: none; } .home-help-card h2 { font-size: 22px; } .home-help-card h2 br { display: none; } .home-help-card p { flex: 1; max-width: none; } .home-handbook { align-items: center; } .home-workflow-card { padding: 18px 18px 0; } .home-workflow-tools { margin: 0 -18px; } .home-workflow-tools > summary { padding-left: 18px; padding-right: 18px; } .home-overview-group { padding: 18px; } } @media (max-width: 700px) { .home-workflow-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .home-workflow-top { margin-bottom: 14px; } .home-workflow-card > p { min-height: 0; max-width: none; } .home-workflow-main { min-height: 44px; } .home-workflow-tools > summary { min-height: 44px; font-size: 12px; } .home-workflow-tools a { min-height: 44px; } .home-workflow-note { font-size: 12px; } .home-overview-grid { grid-template-columns: minmax(0, 1fr); } .home-section-note { display: none; } .home-overview-stat { padding: 15px 0; } .home-overview-value { font-size: 26px; } } @media (max-width: 480px) { .home-context { font-size: 12px; align-items: flex-start; gap: 10px; } .home-context time { max-width: 120px; text-align: right; } .home-metrics { gap: 10px; margin-bottom: 22px; } .home-metric { padding: 15px; gap: 14px; border-radius: 12px; } .home-metric-top { font-size: 12px; } .home-metric-top .home-icon { width: 17px; height: 17px; } .home-metric-value { font-size: 32px; } .home-metric-bottom { font-size: 12px; } .home-panel-head { padding: 20px 16px 16px; } .home-panel-head h2 { font-size: 19px; } .home-work-filters { padding: 0 16px 16px; gap: 2px; } .home-work-filters button { min-height: 40px; padding: 9px 7px; gap: 5px; } .home-work-group > summary { padding: 14px 16px; gap: 8px; } .home-subject-count { font-size: 12px; } .home-subject-icon { width: 28px; height: 28px; border-radius: 8px; } .home-group-tasks { padding: 0 16px 14px; } .home-task-row { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 8px 9px; } .home-task-dot { align-self: start; margin-top: 7px; } .home-task-action { grid-column: 2; justify-self: start; min-height: 40px; max-width: 100%; } .home-task-copy > span { font-size: 12px; } .home-side-column { grid-template-columns: minmax(0, 1fr); gap: 12px; } .home-help-card { padding: 22px; } .home-help-card .home-eyebrow { font-size: 12px; } .home-help-card p { font-size: 13px; } .home-help-link { min-height: 44px; } .home-main-grid { margin-bottom: 28px; } .home-handbook { align-items: flex-start; } .home-read-warning { flex-wrap: wrap; } .home-read-warning > span { flex-basis: calc(100% - 40px); } .home-read-warning > button { margin-left: 34px; } .home-section-head { gap: 12px; } .home-section-head h2 { font-size: 20px; } .home-overview-label, .home-overview-stat .trend, .home-overview-explanation, .home-data-note { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .home-metric, .home-chevron { transition: none; } .home-metric:hover { transform: none; } } /* Shared KPI markup, scoped here so every figure keeps the same accessible API. */ .home-dashboard .home-metric.ui-kpi { text-align: left; margin: 0; } .home-dashboard .home-metric > .k { display: flex; align-items: center; gap: 10px; color: var(--home-ink); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; } .home-dashboard .home-metric > .k .home-icon { width: 19px; height: 19px; color: var(--home-muted); } .home-dashboard .home-metric > .v { margin: 0; color: var(--home-ink); font-family: inherit; font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .home-dashboard .home-metric-attention > .v { color: var(--warn-text, #93621d); } .home-dashboard .home-metric > .small { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: var(--home-muted); font-size: 12px; line-height: 1.5; } .home-dashboard .home-metric > .small::after { content: "↗"; color: var(--home-brand); font-size: 18px; } .home-dashboard .home-overview-stat.ui-kpi { display: flex; flex-direction: column; padding: 18px 0; border: 0; border-top: 1px solid var(--home-line); border-radius: 0; background: transparent; text-align: left; box-shadow: none; margin: 0; } .home-dashboard .home-overview-stat.ui-kpi:first-of-type { border-top: 0; } .home-dashboard .home-overview-stat.ui-kpi:last-child { padding-bottom: 0; } .home-dashboard .home-overview-stat > .k { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; color: var(--home-muted); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; } .home-dashboard .home-overview-stat > .k::after { content: "↗"; font-size: 17px; opacity: .6; } .home-dashboard .home-overview-stat:hover > .k { color: var(--home-brand); } .home-dashboard .home-overview-stat > .v { margin: 0; color: var(--home-ink); font-family: inherit; font-size: 25px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; font-variant-numeric: tabular-nums; } .home-dashboard .home-overview-stat > .v .small { font-size: 12px; letter-spacing: 0; font-weight: 400; color: var(--home-muted); margin-left: 4px; } .home-dashboard .home-overview-stat > .small { font-size: 12px; line-height: 1.5; color: var(--home-muted); } .home-dashboard .home-overview-critical > .v { color: var(--warn-text, #93621d); } .home-dashboard .home-overview-negative > .v { color: var(--bad-text, #b3473f); } @media (max-width: 480px) { .home-dashboard .home-metric > .k { font-size: 12px; gap: 7px; } .home-dashboard .home-metric > .k .home-icon { width: 17px; height: 17px; } .home-dashboard .home-metric > .v { font-size: 32px; } } /* The application navigation also uses