/* CENTRAL home and compact MUST TEAM topbar. Screen-only; print layouts are preserved. */
@media screen {
  .workspace > .app-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 7px 14px;
    margin: 0 0 21px;
    border: 1px solid #554b38;
    border-radius: 10px;
    background: #21252b;
    color: #f7f2e6;
  }
  .workspace > .app-topbar .topbar-brands { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; min-width: 0; }
  .workspace > .app-topbar .topbar-brand-divider { width: 1px; height: 24px; background: linear-gradient(transparent, #9e8754, transparent); flex-shrink: 0; }
  .workspace > .app-topbar .topbar-brand.topbar-central b { color: #efdbad; font-size: 12px; line-height: 1.2; letter-spacing: 1px; }
  .workspace > .app-topbar .topbar-brand.topbar-central b span { display: block; margin-top: 3px; color: #bba370; font-size: 9px; letter-spacing: 2.4px; }
  .workspace > .app-topbar .topbar-central-logo { position: relative; display: block; width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; border: 1px solid #776347; border-radius: 50%; box-shadow: 0 0 13px #c6a96916; background: #171817; }
  .workspace > .app-topbar .topbar-central-logo img { position: absolute; width: 256px; height: 256px; max-width: none; left: -28px; top: -103px; }
  .workspace > .app-topbar .topbar-brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .workspace > .app-topbar .topbar-brand b { font-size: 13px; font-weight: 750; line-height: 1.4; letter-spacing: .7px; white-space: nowrap; }
  .workspace > .app-topbar .topbar-logo {
    display: block;
    position: relative;
    width: 42px;
    height: 38px;
    flex: 0 0 42px;
    overflow: hidden;
    border-radius: 6px;
    background: #21252b;
  }
  /* Show the emblem within the original 1080px square image, without a new asset. */
  .workspace > .app-topbar .topbar-logo img {
    position: absolute;
    display: block;
    width: 240px;
    height: 240px;
    max-width: none;
    left: -103px;
    top: -90px;
  }
  .workspace > .app-topbar .topbar-credit {
    padding-left: 14px;
    border-left: 1px solid #575345;
    color: #c5bca9;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .workspace > .app-topbar .topbar-motto {
    margin: 0 0 0 auto;
    color: #e3cd9c;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: -.2px;
    text-align: right;
    word-break: keep-all;
  }

  .workspace > .app-topbar .topbar-motto > span { display:block; }
  .workspace > .app-topbar .topbar-motto > small { display:block; margin-top:2px; color:#b9b09d; font-size:10px; font-weight:500; letter-spacing:0; }

  #goalsView { min-width: 0; }
  #goalsView .home-welcome {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 0 14px;
  }
  #goalsView .home-welcome > div:first-child { min-width: 0; }
  #goalsView .home-kicker {
    display: block;
    margin: 0 0 5px;
    color: #cfb17a;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: 1.5px;
  }
  #goalsView .home-welcome h2 {
    margin: 0 0 7px;
    color: #fffaf1;
    font-size: 29px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: -1px;
    word-break: keep-all;
    text-wrap: balance;
    max-width: 25em;
  }
  #goalsView .home-welcome p { margin: 0; color: #c5bdaf; font-size: 13px; line-height: 1.7; word-break: keep-all; }
  #goalsView .home-today { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; }
  #goalsView #homeToday { color: #d4c5a7; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
  #goalsView .home-today button {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #736244;
    border-radius: 8px;
    background: #302c25;
    color: #ebd4a2;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
  }
  #goalsView .home-today button:hover { border-color: #a98a4f; background: #3a3327; }
  #goalsView .home-goals-section { min-width: 0; margin-bottom: 25px; }
  #goalsView .home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 1px 11px;
  }
  #goalsView .home-section-head h3 { margin: 0; color: #f7f1e5; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -.3px; }
  #goalsView .home-section-head p { margin: 0; color: #c0b7a7; font-size: 12px; line-height: 1.6; }

  /* The same monthly record is presented here, with no clipped pledge or incentive text. */
  #goalsView #monthlyGoals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "heading edit" "pledge pledge" "metrics metrics" "incentive incentive";
    align-items: start;
    gap: 15px 18px;
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid #dcd8cf;
    border-top: 3px solid #b49457;
    border-radius: 12px;
    background: #fff;
    color: #29394e;
    box-shadow: 0 5px 19px #00000012;
  }
  #goalsView #monthlyGoals .goal-heading {
    grid-area: heading;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 15px;
    min-width: 0;
    order: 0;
  }
  #goalsView #monthlyGoals .goal-heading label { display: flex; align-items: center; gap: 8px; margin: 0; }
  #goalsView #monthlyGoals .goal-kicker { display: none; }
  #goalsView #monthlyGoals .goal-heading input {
    width: 137px;
    min-height: 36px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #d5dce5;
    border-radius: 7px;
    background: #fff;
    color: #43546b;
    font-size: 13px;
    line-height: 1.5;
  }
  #goalsView #monthlyGoals .goal-heading b {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #29394e;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.5;
  }
  #goalsView #monthlyGoals .goal-heading em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 0;
    padding: 3px 9px;
    border: 1px solid #e1d1b0;
    border-radius: 6px;
    background: #fbf4e5;
    color: #785822;
    font-size: 12px;
    font-weight: 750;
    font-style: normal;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  #goalsView #monthlyGoals .goal-pledge {
    grid-area: pledge;
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 1px 0 1px 10px;
    border-left: 3px solid #cfb781;
    color: #5c5547;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    order: 0;
  }
  #goalsView #monthlyGoals .goal-metrics {
    grid-area: metrics;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    overflow: hidden;
    order: 0;
  }
  #goalsView #monthlyGoals .goal-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px 15px;
    border-right: 1px solid #e6eaf0;
    background: #fff;
    white-space: normal;
  }
  #goalsView #monthlyGoals .goal-metrics > div:last-child { border-right: 0; }
  #goalsView #monthlyGoals .goal-metrics span { color: #637085; font-size: 12px; font-weight: 650; line-height: 1.5; }
  #goalsView #monthlyGoals .goal-metrics strong {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 6px;
    color: #28394f;
    font-size: 24px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #goalsView #monthlyGoals .goal-metrics small {
    min-width: 0;
    margin: 0;
    color: #6b7688;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  #goalsView #monthlyGoals .goal-incentive {
    grid-area: incentive;
    display: block;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid #e2ca96;
    border-left: 4px solid #b58b3c;
    border-radius: 9px;
    background: #fff8e7;
    color: #514329;
    font-size: 15px;
    line-height: 1.75;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    order: 0;
  }
  #goalsView #monthlyGoals .goal-incentive > span {
    display: block;
    margin: 0 0 7px;
    padding: 0;
    color: #785c2a;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
  }
  #goalsView #monthlyGoals .goal-incentive-content { margin: 0; font-size: 15px; font-weight: 550; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
  #goalsView #monthlyGoals .goal-incentive-content.is-empty { color: #75684e; font-weight: 450; }
  #goalDialog .goal-incentive-editor { color: #785c2a; font-weight: 700; }
  #goalDialog textarea[name="incentives"] { min-height: 145px; padding: 11px 12px; border-color: #d9c398; background: #fffaf0; color: #514329; font-size: 15px; font-weight: 450; line-height: 1.7; }
  #goalsView #monthlyGoals .goal-edit {
    grid-area: edit;
    align-self: start;
    min-height: 37px;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid #927039;
    border-radius: 8px;
    background: #927039;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
    order: 0;
  }
  #goalsView #monthlyGoals .goal-edit:hover { border-color: #795b2d; background: #795b2d; }
  #goalsView #monthlyGoals .goal-conflict {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid #e4c2b7;
    border-radius: 7px;
    background: #fff4ed;
    color: #964b35;
    font-size: 12px;
    line-height: 1.5;
    order: 0;
  }

  #goalsView .home-links-panel { min-width: 0; }
  #goalsView .home-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #goalsView .home-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 83px;
    padding: 15px;
    border: 1px solid #e1e3e7;
    border-radius: 11px;
    background: #fff;
    color: #2f4057;
    text-align: left;
    box-shadow: 0 3px 12px #00000008;
  }
  #goalsView .home-shortcut:hover { border-color: #c3aa76; background: #fffcf6; box-shadow: 0 4px 16px #00000017; }
  #goalsView .home-shortcut-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid #eee3cc;
    border-radius: 10px;
    background: #faf5e9;
    color: #8a6a33;
  }
  #goalsView .home-shortcut-icon svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #goalsView .home-shortcut-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
  #goalsView .home-shortcut-copy strong { display: block; color: #2d3e55; font-size: 15px; font-weight: 750; line-height: 1.45; letter-spacing: -.3px; word-break: keep-all; overflow-wrap: anywhere; }
  #goalsView .home-shortcut-copy small { display: block; margin: 0; color: #68758a; font-size: 12px; font-weight: 450; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
  #goalsView .home-shortcut-arrow { flex: 0 0 auto; color: #9d8b69; font-size: 17px; line-height: 1.5; }
  #goalsView :is(button, input):focus-visible { outline: 3px solid #c29d55; outline-offset: 3px; }
}

@media screen and (max-width: 1100px) {
  #goalsView .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #goalsView .home-welcome h2 { font-size: 26px; }
  #goalsView #monthlyGoals .goal-metrics > div { padding: 11px 12px; }
  #goalsView #monthlyGoals .goal-metrics strong { font-size: 22px; }
}

@media screen and (max-width: 760px) {
  #goalsView .home-welcome { align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  #goalsView .home-today { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
  #goalsView .home-section-head { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media screen and (max-width: 620px) {
  .workspace > .app-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brands credit" "motto motto";
    gap: 1px 8px;
    min-height: 56px;
    padding: 4px 10px;
    margin-bottom: 19px;
    border-radius: 9px;
  }
  .workspace > .app-topbar .topbar-brands { grid-area: brands; gap: 9px; }
  .workspace > .app-topbar .topbar-brand { gap: 6px; }
  .workspace > .app-topbar .topbar-brand-divider { height: 21px; }
  .workspace > .app-topbar .topbar-central-logo { width: 28px; height: 28px; flex-basis: 28px; }
  .workspace > .app-topbar .topbar-central-logo img { width: 184px; height: 184px; left: -20px; top: -74px; }
  .workspace > .app-topbar .topbar-brand.topbar-central b { font-size: 10px; letter-spacing: .5px; }
  .workspace > .app-topbar .topbar-brand.topbar-central b span { font-size: 8px; letter-spacing: 1.8px; margin-top: 2px; }
  .workspace > .app-topbar .topbar-brand b { font-size: 12px; letter-spacing: .6px; }
  .workspace > .app-topbar .topbar-logo { width: 30px; height: 28px; flex-basis: 30px; border-radius: 4px; }
  .workspace > .app-topbar .topbar-logo img { width: 172px; height: 172px; left: -74px; top: -64px; }
  .workspace > .app-topbar .topbar-credit { grid-area: credit; justify-self: end; padding-left: 0; border-left: 0; font-size: 10px; }
  .workspace > .app-topbar .topbar-motto { grid-area: motto; justify-self: center; margin: 0; font-size: 12px; line-height: 1.4; text-align: center; }
  #goalsView .home-welcome h2 { font-size: 23px; letter-spacing: -.75px; }
  #goalsView .home-welcome p { font-size: 12px; }
  #goalsView #homeToday { font-size: 12px; }
  #goalsView .home-today button { min-height: 40px; padding: 8px 10px; }
  #goalsView .home-goals-section { margin-bottom: 21px; }
  #goalsView .home-section-head h3 { font-size: 15px; }
  #goalsView #monthlyGoals { padding: 14px; gap: 13px 10px; }
  #goalsView #monthlyGoals .goal-heading { gap: 8px; }
  #goalsView #monthlyGoals .goal-heading input { width: 135px; min-height: 40px; padding: 7px 8px; font-size: 14px; }
  #goalsView #monthlyGoals .goal-heading b { font-size: 15px; gap: 6px; }
  #goalsView #monthlyGoals .goal-heading em { min-height: 26px; padding: 3px 7px; font-size: 11px; }
  #goalsView #monthlyGoals .goal-edit { min-height: 40px; padding: 8px 10px; font-size: 12px; }
  #goalsView #monthlyGoals .goal-pledge { font-size: 13px; }
  #goalsView #monthlyGoals .goal-metrics > div { padding: 11px 12px; gap: 5px; }
  #goalsView #monthlyGoals .goal-metrics strong { font-size: 22px; }
  #goalsView #monthlyGoals .goal-metrics small { font-size: 12px; }
  #goalsView #monthlyGoals .goal-incentive { padding: 12px 13px; }
  #goalsView .home-shortcuts { gap: 9px; }
  #goalsView .home-shortcut {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
    min-height: 116px;
    padding: 13px;
  }
  #goalsView .home-shortcut-icon { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 8px; }
  #goalsView .home-shortcut-icon svg { width: 18px; height: 18px; }
  #goalsView .home-shortcut-copy { gap: 3px; width: 100%; }
  #goalsView .home-shortcut-copy strong { font-size: 14px; }
  #goalsView .home-shortcut-copy small { font-size: 11px; line-height: 1.5; }
  #goalsView .home-shortcut-arrow { position: absolute; right: 13px; top: 15px; font-size: 16px; }
}

/* Keep the mobile home focused; connection and backup remain one tap away. */
.home-settings-toggle { display:none; }
@media screen and (max-width:900px) {
  body.home-active .home-settings-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:34px; margin:7px 0 0; padding:5px 9px; border:1px solid #574c36; border-radius:7px; background:transparent; color:#d4c8b0; font-size:11px; }
  body.home-active #appUtilities:not(.home-utilities-open) { display:none; }
  body.home-active .workspace > .app-topbar { margin-bottom:9px; }
  body.home-active .workspace > header.compact-toolbar { margin-bottom:8px; }
  body.home-active .workspace > header.compact-toolbar > .actions { width:100%; justify-content:flex-end; }
  body.home-active .workspace > header .quick-sync-wrap { flex:0 1 auto; flex-direction:row; align-items:center; justify-content:flex-end; gap:8px; }
  body.home-active .workspace > header .quick-sync-wrap small { font-size:9px; order:-1; }
  body.home-active .workspace > header #quickSync { flex:none; min-height:32px; padding:5px 9px; font-size:11px; }
}
@media screen and (max-width:900px) {
  body.home-active .workspace > header .quick-sync-wrap { width:100%; flex:1 1 auto; }
  body.home-active .workspace > header .quick-sync-wrap small { flex:0 1 auto; white-space:nowrap; }
  body.home-active .workspace > header #quickSync { width:auto; min-width:88px; }
}