@media screen {
:root {
--hwf-ink:#263230;
--hwf-charcoal:#44514d;
--hwf-muted:#68736f;
--hwf-canvas:#f3efe7;
--hwf-paper:#fffdf8;
--hwf-soft:#f7f3ec;
--hwf-line:#d9d2c6;
--hwf-line-strong:#beb6a9;
--hwf-teal:#2c6d65;
--hwf-teal-deep:#245a54;
--hwf-teal-soft:#eaf3f0;
--hwf-coral:#a64c3d;
--hwf-coral-soft:#faece8;
--hwf-amber:#85672f;
--hwf-amber-soft:#f8f0df;
--navy:var(--hwf-ink);
--slate:var(--hwf-charcoal);
--blue:var(--hwf-teal);
--blue-dark:var(--hwf-teal-deep);
--blue-soft:var(--hwf-teal-soft);
--bg:var(--hwf-canvas);
--paper:var(--hwf-paper);
--soft:var(--hwf-soft);
--line:var(--hwf-line);
--muted:var(--hwf-muted);
--ink:var(--hwf-ink);
--success:var(--hwf-teal);
--success-soft:var(--hwf-teal-soft);
--warning:var(--hwf-amber);
--warning-soft:var(--hwf-amber-soft);
--danger:var(--hwf-coral);
--danger-soft:var(--hwf-coral-soft);
--shadow:0 18px 42px rgba(38,50,48,.075);
--shadow-sm:0 6px 18px rgba(38,50,48,.055);
--radius:14px;
--radius-sm:10px;
}
html,
body {
background:var(--hwf-canvas);
}
body {
color:var(--hwf-ink);
background-image:linear-gradient(180deg,#f7f3ec 0%,var(--hwf-canvas) 36%,#f5f1e9 100%);
}
.app {
max-width:1140px;
background:rgba(255,253,248,.985);
border-color:#ded7cb;
border-radius:18px;
box-shadow:var(--shadow);
}
header {
border-bottom-color:var(--hwf-line);
}
.brand,
h1,
h2,
h3 {
color:var(--hwf-ink);
}
.brand small {
color:#687a74;
}
.proto {
border-color:var(--hwf-line);
background:#faf7f1;
color:var(--hwf-charcoal);
border-radius:8px;
}
button {
border-color:var(--hwf-line);
background:var(--hwf-paper);
color:var(--hwf-ink);
border-radius:9px;
box-shadow:none;
transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease;
}
button:hover {
transform:none;
border-color:var(--hwf-line-strong);
background:#faf7f1;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline:3px solid var(--hwf-teal-deep);
outline-offset:3px;
}
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus-visible {
outline:none;
}
button.primary,
.lesson-primary,
.lessons-screen>.actions:last-child .primary,
.setup-screen .actions .primary,
.activity-modal-actions .primary {
background:var(--hwf-teal)!important;
border-color:var(--hwf-teal)!important;
color:#fff!important;
box-shadow:0 7px 18px rgba(44,109,101,.16)!important;
}
button.primary:hover,
.lesson-primary:hover,
.lessons-screen>.actions:last-child .primary:hover,
.setup-screen .actions .primary:hover,
.activity-modal-actions .primary:hover {
background:var(--hwf-teal-deep)!important;
border-color:var(--hwf-teal-deep)!important;
}
button.link,
.guided-tip .tip-dismiss,
.readiness-guidance button,
.summary-chevron {
color:var(--hwf-teal-deep);
}
.field input,
.field select,
.setup-screen .field input,
.minutes-input input,
.session-day-row select,
.planned-time-control select {
background:var(--hwf-paper);
border-color:#d5cec3;
border-radius:9px!important;
box-shadow:none;
}
.field input:hover,
.field select:hover {
border-color:#b9b0a3;
}
.field-label {
font-weight:760;
color:var(--hwf-ink);
font-size:.93rem;
}
.progress {
gap:.5rem;
margin:1.45rem 0 2rem;
}
.progress .step {
position:relative;
min-height:42px;
padding:.58rem .62rem .5rem;
border:0;
border-top:3px solid #d8d1c6;
border-radius:0;
background:transparent;
box-shadow:none;
color:var(--hwf-muted);
text-align:left;
}
.progress .step.done {
border-top-color:#91ada7;
background:transparent;
color:#4c625d;
}
.progress .step.on,
.progress .step.on:hover {
border-top-color:var(--hwf-teal);
background:var(--hwf-teal-soft);
color:var(--hwf-teal-deep);
box-shadow:none;
}
.notice,
.guided-tip,
.readiness-overview,
.quick-capacity,
.review-time-card,
.week-glance,
.decision-card,
.decision-capacity-visual,
.decision-readiness-summary,
.decision-next-step,
.current-plan-card,
.compare-dialog-current,
.compare-status,
.compare-bottom-line,
.change-history-panel {
border-color:var(--hwf-line);
background:#fbf8f2;
box-shadow:none;
}
.card,
.result-coverage-card,
.week-glance-day,
.week-glance-item,
.review-counts>div,
.review-time-metrics>div,
.capacity-day-card,
.decision-option,
.decision-session,
.compare-option-card,
.compare-table,
.compare-changes,
.compare-pressure {
border-color:var(--hwf-line);
background:var(--hwf-paper);
box-shadow:none;
}
.card,
.result-coverage-card {
border-radius:13px;
}
.tag,
.readiness,
.readiness-row .status,
.scenario-chip {
border-radius:6px;
}
.tabs button,
.chips label {
border-radius:8px;
}
.tabs button[aria-selected="true"] {
background:var(--hwf-ink);
border-color:var(--hwf-ink);
}
.chips label:has(input:checked),
.copy-item:has(input:checked),
#days label:has(input:checked),
.decision-option:has(input:checked),
.decision-session:has(input:checked),
.recovery-mode-card:has(input:checked) {
background:var(--hwf-teal-soft);
border-color:#8fb7ae;
color:var(--hwf-teal-deep);
}
.chips input,
.copy-item input,
.inline-check input,
.option-check input,
.parent-time-entry .whole-session-toggle input,
.recovery-mode-card input,
.decision-option input {
accent-color:var(--hwf-teal);
}
#days label:has(input:checked)::before {
background:var(--hwf-teal);
border-color:var(--hwf-teal);
}
.verdict,
.result-hero {
border:1px solid #c9d9d4;
border-left:5px solid var(--hwf-teal);
border-radius:12px;
background:var(--hwf-paper);
box-shadow:none;
}
.result-hero.result-tight {
border-color:#ddcfad;
border-left-color:var(--hwf-amber);
background:#fffaf0;
}
.result-hero.result-bad {
border-color:#dfb7af;
border-left-color:var(--hwf-coral);
background:#fff8f5;
box-shadow:none;
}
.result-status-icon,
.result-check-row .mark,
.result-note .info {
border-radius:7px;
}
.result-status-icon,
.result-check-row .mark,
.result-note .info {
background:var(--hwf-teal-soft);
color:var(--hwf-teal-deep);
}
.result-hero.result-bad .result-status-icon {
background:var(--hwf-coral-soft);
color:var(--hwf-coral);
}
.result-status-kicker {
color:var(--hwf-teal-deep);
letter-spacing:.08em;
}
.result-hero.result-bad .result-status-kicker,
.result-hero.result-bad .result-metric-over strong,
.result-hero.result-bad .result-reason strong {
color:var(--hwf-coral);
}
.result-metric,
.result-reason,
.result-check-row,
.result-note {
border-color:var(--hwf-line);
background:#faf7f1;
border-radius:9px;
}
.readiness-track,
.decision-capacity-track {
height:10px;
border-radius:2px;
background:#ded9cf;
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(38,50,48,.04);
}
.readiness-track>span,
.decision-capacity-needed {
border-radius:0;
background:var(--hwf-teal);
}
.decision-capacity-room {
background:#b8d0ca;
}
.decision-capacity-deficit {
background:var(--hwf-coral);
}
.decision-capacity-track.is-tight .decision-capacity-needed {
background:var(--hwf-amber);
}
.decision-capacity-swatch {
border-radius:2px;
}
.decision-capacity-swatch.is-needed { background:var(--hwf-teal); }
.decision-capacity-swatch.is-room { background:#b8d0ca;border-color:#9cbab3; }
.decision-capacity-swatch.is-deficit { background:var(--hwf-coral); }
.decision-pressure-row.is-over,
.field-error,
.activity-modal-actions .delete-activity {
color:var(--hwf-coral);
}
.decision-pressure-row.is-over {
background:var(--hwf-coral-soft);
}
.decision-pressure-row.is-tight,
.decision-readiness-summary.is-limited,
.decision-readiness-summary.is-stale,
.compare-tradeoff {
background:var(--hwf-amber-soft);
border-color:#dfcfaa;
}
.week-glance-day-head,
.compare-table thead th {
background:#f5f1e9;
border-color:var(--hwf-line);
}
.week-glance-kind,
.change-history-latest,
.home-decision-snapshot strong,
.decision-readiness-summary strong {
color:var(--hwf-teal-deep);
}
.scenario-banner,
.scenario-home-card,
.scenario-decision-panel {
border-color:#c7d8d3;
background:var(--hwf-teal-soft);
color:var(--hwf-charcoal);
}
.scenario-banner strong,
.scenario-chip,
.compare-bottom-line strong {
color:var(--hwf-teal-deep);
}
.block,
.transform-note {
border-left-color:var(--hwf-teal);
background:var(--hwf-teal-soft);
}
.toast {
background:var(--hwf-ink);
border-radius:8px;
}
dialog {
border-color:var(--hwf-line);
background:var(--hwf-paper);
border-radius:14px;
}
dialog::backdrop {
background:rgba(38,50,48,.48);
}
@media(max-width:700px) {
html,
body {
background:var(--hwf-paper);
}
.app {
background:var(--hwf-paper);
}
.progress .step {
min-height:40px;
padding-inline:.38rem;
}
}
}
@media screen {
.current-plan-card {
display:grid;
grid-template-columns:1fr;
align-items:stretch;
gap:1rem;
padding:1.05rem;
}
.current-plan-main {
width:100%;
}
.current-plan-actions {
width:100%;
display:grid;
grid-template-columns:1fr;
gap:0;
justify-content:stretch;
}
.current-plan-actions button {
width:100%;
min-height:50px;
}
#viewDecisionBtn:not(.hidden) {
margin-bottom:.7rem;
min-height:54px;
border-color:var(--hwf-teal);
background:var(--hwf-teal);
color:#fff;
font-weight:800;
box-shadow:0 7px 18px rgba(44,109,101,.14);
}
#viewDecisionBtn:not(.hidden):hover {
border-color:var(--hwf-teal-deep);
background:var(--hwf-teal-deep);
}
.current-plan-actions #comparePlansBtn,
.current-plan-actions #manageWorkstreamsBtn,
.current-plan-actions #managePlansBtn {
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
min-height:52px;
padding:.8rem .15rem;
border:0;
border-top:1px solid var(--hwf-line);
border-radius:0;
background:transparent;
text-align:left;
box-shadow:none;
}
.current-plan-actions #comparePlansBtn:not(.hidden)::after,
.current-plan-actions #manageWorkstreamsBtn::after,
.current-plan-actions #managePlansBtn::after {
content:'›';
flex:0 0 auto;
color:#7a8782;
font-size:1.35rem;
font-weight:500;
line-height:1;
}
.current-plan-actions #comparePlansBtn:hover,
.current-plan-actions #manageWorkstreamsBtn:hover,
.current-plan-actions #managePlansBtn:hover {
background:#faf7f1;
color:var(--hwf-teal-deep);
}
#acceptWeekBtn {
width:100%;
min-height:54px;
margin-top:.3rem;
font-weight:800;
}
#acceptWeekBtn:not(:disabled) {
border-color:var(--hwf-teal);
background:var(--hwf-teal);
color:#fff;
box-shadow:0 7px 18px rgba(44,109,101,.14);
}
#acceptWeekBtn:not(:disabled):hover {
border-color:var(--hwf-teal-deep);
background:var(--hwf-teal-deep);
}
#acceptWeekBtn:disabled {
border-color:#ded8ce;
background:#f3efe8;
color:#8b918d;
opacity:1;
}
#normalResultActions {
position:relative;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 .55rem;
margin-top:1.35rem;
padding-top:2rem;
border-top:1px solid var(--hwf-line);
}
#normalResultActions::before {
content:'Other ways to work with this result';
position:absolute;
inset:0 auto auto 0;
color:var(--hwf-muted);
font-size:.76rem;
font-weight:800;
letter-spacing:.055em;
text-transform:uppercase;
}
#normalResultActions button[data-go="check"],
#normalResultActions #tryChangeResultBtn,
#normalResultActions #comparePlansResultBtn,
#normalResultActions #recoveryBtn {
grid-column:1 / -1;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
min-height:52px;
padding:.78rem .15rem;
border:0;
border-bottom:1px solid var(--hwf-line);
border-radius:0;
background:transparent;
color:var(--hwf-ink);
text-align:left;
box-shadow:none;
}
#normalResultActions #tryChangeResultBtn {
color:var(--hwf-teal-deep);
font-weight:800;
}
#normalResultActions button[data-go="check"]::after,
#normalResultActions #tryChangeResultBtn::after,
#normalResultActions #comparePlansResultBtn:not(.hidden)::after,
#normalResultActions #recoveryBtn::after {
content:'›';
flex:0 0 auto;
color:#7a8782;
font-size:1.35rem;
font-weight:500;
line-height:1;
}
#normalResultActions button[data-go="check"]:hover,
#normalResultActions #tryChangeResultBtn:hover,
#normalResultActions #comparePlansResultBtn:hover,
#normalResultActions #recoveryBtn:hover {
background:#faf7f1;
color:var(--hwf-teal-deep);
}
#normalResultActions #verdictPrintBtn,
#normalResultActions #verdictPrimaryBtn {
min-height:46px;
margin-top:.8rem;
border-color:#d6d0c6;
background:#faf7f1;
color:var(--hwf-charcoal);
font-size:.9rem;
font-weight:720;
}
#normalResultActions #verdictPrintBtn:hover,
#normalResultActions #verdictPrimaryBtn:hover {
border-color:var(--hwf-line-strong);
background:#f5f0e8;
}
@media(max-width:620px) {
.current-plan-card {
padding:1rem;
gap:.9rem;
}
#normalResultActions {
grid-template-columns:1fr 1fr;
column-gap:.5rem;
}
#normalResultActions #verdictPrintBtn,
#normalResultActions #verdictPrimaryBtn {
min-width:0;
padding:.68rem .55rem;
line-height:1.3;
}
}
@media(max-width:390px) {
#normalResultActions {
grid-template-columns:1fr;
}
#normalResultActions #verdictPrintBtn,
#normalResultActions #verdictPrimaryBtn {
grid-column:1 / -1;
margin-top:0;
}
#normalResultActions #verdictPrintBtn {
margin-top:.8rem;
}
}
}
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {
scroll-behavior:auto!important;
transition-duration:.001ms!important;
animation-duration:.001ms!important;
animation-iteration-count:1!important;
}
}
@media screen {
/* Phase 13 identity cleanup — legacy blue removal */
.brand-mark {
background:var(--hwf-teal)!important;
color:#fff!important;
box-shadow:0 8px 20px rgba(44,109,101,.16)!important;
}
.brand-mark:hover {
background:var(--hwf-teal-deep)!important;
}
.dialog-kicker,
.guided-tip::before {
color:var(--hwf-teal-deep)!important;
}
.guided-tip::before {
background:var(--hwf-teal-soft)!important;
}
.guided-tip .tip-dismiss,
.readiness-guidance button,
.example-mode-banner button {
color:var(--hwf-teal-deep)!important;
}
.example-mode-banner button {
border-color:#a8c7c0!important;
}
.setup-screen .counter button {
color:var(--hwf-teal-deep)!important;
}
#applyAll {
color:var(--hwf-teal-deep)!important;
background:var(--hwf-teal-soft)!important;
border-color:#a8c7c0!important;
}
#applyAll:hover {
background:#dfeeea!important;
border-color:#88afa6!important;
}
label:has(> input[name="movePolicyUI"]:checked) {
border-color:var(--hwf-teal)!important;
background:var(--hwf-teal-soft)!important;
color:var(--hwf-teal-deep)!important;
}
label:has(> input[name="movePolicyUI"]:checked) strong,
label:has(> input[name="movePolicyUI"]:checked) small {
color:var(--hwf-teal-deep)!important;
}
input[name="movePolicyUI"] {
accent-color:var(--hwf-teal)!important;
}
#continuitySetupDialog {
max-width:560px;
}
.continuity-exit-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.continuity-exit-actions .status-chip{cursor:default}
.continuity-setup-explainer {
margin:1rem 0 1.15rem;
padding:1rem 1.05rem;
border:1px solid #c7d8d3;
border-left:4px solid var(--hwf-teal);
border-radius:10px;
background:var(--hwf-teal-soft);
color:var(--hwf-charcoal);
}
.continuity-setup-explainer strong {
color:var(--hwf-ink);
}
.continuity-setup-explainer p {
margin:.4rem 0 0;
color:var(--hwf-charcoal);
}
.continuity-setup-actions {
margin-top:1rem;
}
}