#zero-habits-state[hidden] { display:none !important; }
#zero-habits-state { grid-column:1/-1; width:min(100%,640px); margin:24px auto; padding:clamp(24px,5vw,48px); text-align:center; }
#zero-habits-state h2 { margin:0 0 12px; font-size:clamp(24px,4vw,32px); }
#zero-habits-state p { line-height:1.6; margin:0 auto 24px; max-width:45ch; }
#zero-habits-state button { min-height:48px; padding:12px 24px; }
body[data-page="main"] #main-layout.zero-habits-welcome { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; }
body[data-page="main"] #main-layout.zero-habits-welcome > .habits,
body[data-page="main"] #main-layout.no-habits > .details,
body[data-page="main"] #main-layout.no-habits > .details-placeholder { display:none !important; }
#subgoal-hierarchy { margin-top:24px; }
#subgoal-hierarchy-list { display:grid; gap:14px; }
#subgoal-hierarchy .subgoal-row { grid-template-columns:minmax(0,1fr); gap:10px; padding:16px; border:1px solid #d3dbd7; border-radius:14px; background:var(--surface,#fff); }
#subgoal-hierarchy .subgoal-daily { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#subgoal-hierarchy .subgoal-daily label { display:flex; align-items:center; gap:12px; margin:0; line-height:1.5; overflow-wrap:anywhere; }
#subgoal-hierarchy .subgoal-daily input[type=checkbox] { width:24px; height:24px; margin:10px; accent-color:#27664c; flex-shrink:0; }
#subgoal-hierarchy .subgoal-settings { grid-column:1/-1; width:100%; }
#subgoal-hierarchy summary { display:list-item; cursor:pointer; min-height:44px; padding:12px 16px; border:1px solid #b8c7bf; border-radius:10px; font-size:14px; font-weight:600; width:fit-content; box-sizing:border-box; }
#subgoal-hierarchy .subgoal-settings[open] > summary { margin-bottom:16px; }
#subgoal-hierarchy form:not(.subgoal-daily) { display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%; max-width:440px; }
#subgoal-hierarchy form:not(.subgoal-daily) label,#initial-subgoal-rows label { display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:14px; }
#subgoal-hierarchy input:not([type=checkbox]):not([type=hidden]),#initial-subgoal-rows input { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #a8b8af; border-radius:8px; font:inherit; }
#subgoal-hierarchy button,#initial-subgoals button { min-height:44px; padding:10px 16px; border-radius:10px; font:inherit; cursor:pointer; }
#subgoal-hierarchy form:not([data-b2-operation=archive_component]) button { background:#27664c; color:#fff; border:1px solid #27664c; }
#subgoal-hierarchy form[data-b2-operation=archive_component] { margin-top:20px; padding-top:16px; border-top:1px solid #d3dbd7; }
#subgoal-hierarchy form[data-b2-operation=archive_component] button { background:transparent; color:#a32626; border:1px solid #bf6969; align-self:flex-start; }
#subgoal-hierarchy small { display:block; font-size:13px; line-height:1.5; color:#4e6056; }
#subgoal-hierarchy button:disabled,#subgoal-hierarchy input:disabled { opacity:.65; cursor:wait; }
#subgoal-hierarchy :focus-visible,#initial-subgoals :focus-visible,#zero-habits-state :focus-visible { outline:3px solid #277354; outline-offset:3px; }
#subgoal-hierarchy-status:not(:empty),.subgoal-empty { padding:14px; border-radius:10px; background:#edf4ef; color:#314d3c; line-height:1.5; margin-bottom:12px; }
.subgoal-empty h4,.subgoal-empty p { margin:0 0 8px; }
#initial-subgoals { padding:16px; border:1px solid #c7d5cc; border-radius:12px; }
#initial-subgoals[hidden] { display:none !important; }
#initial-subgoal-rows { display:grid; gap:16px; margin:16px 0; }
#initial-subgoal-rows > div { display:grid; gap:8px; }
#initial-subgoal-rows button { justify-self:start; }
html[data-theme=dark] #subgoal-hierarchy .subgoal-row { background:#202b25; border-color:#607467; }
html[data-theme=dark] #subgoal-hierarchy small { color:#c1d1c7; }
html[data-theme=dark] #subgoal-hierarchy form[data-b2-operation=archive_component] button { color:#ffb5b5; border-color:#d18a8a; }
@media(max-width:600px) { #zero-habits-state { margin:12px auto; padding:20px 18px; } #zero-habits-state p { margin-bottom:18px; } #subgoal-hierarchy .subgoal-row { padding:12px; } #subgoal-hierarchy form:not(.subgoal-daily) { max-width:none; } #subgoal-hierarchy input[type=date] { min-height:48px; } }
#subgoal-hierarchy .subgoal-settings > summary { width:fit-content; max-width:100%; margin-inline-start:0; font-size:14px; }
#subgoal-hierarchy .subgoal-settings form,#subgoal-hierarchy .subgoal-add form { box-sizing:border-box; padding:0; border:0; border-radius:0; }
#subgoal-hierarchy .subgoal-settings form[data-b2-operation=archive_component] { padding-top:16px; border-top:1px solid #d3dbd7; }
#zero-habits-state { box-sizing:border-box; }
#zero-habits-state button { background:var(--accent-dark); color:#fff; border:1px solid var(--accent-dark); border-radius:12px; font:inherit; font-weight:600; cursor:pointer; }


/* ==========================================================
 * POWER HABITS
 * SUBGOALS UX — VALIDATED 2026-09-14 COMPLETE OVERRIDE LAYER
 * Active production base + complete validated tail.
 * ========================================================== */

 * POWER HABITS — SUBGOAL ROW INTERACTION V2
 * Isolated preview only.
 * ========================================================== */

/*
 * Each subgoal inherits one color from the official Power Habits palette.
 * The identity follows component.position.
 */
#subgoal-hierarchy .subgoal-row {
  --subgoal-color: #2A9D8F;

  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;

  border-color: color-mix(
    in srgb,
    var(--subgoal-color) 46%,
    #d3dbd7
  );

  background:
    color-mix(
      in srgb,
      var(--subgoal-color) 7%,
      var(--surface, #fff)
    );

  box-shadow:
    inset 4px 0 0 var(--subgoal-color);

  cursor: pointer;
}

#subgoal-hierarchy .subgoal-row:hover {
  background:
    color-mix(
      in srgb,
      var(--subgoal-color) 11%,
      var(--surface, #fff)
    );
}

/*
 * Checkbox is the only completion hit target.
 * The task title belongs to the row/note interaction.
 */
#subgoal-hierarchy .subgoal-daily {
  grid-column: 1;
  width: 100%;
}

#subgoal-hierarchy .subgoal-completion-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  width: 100%;
}

#subgoal-hierarchy .subgoal-completion-control input[type="checkbox"] {
  flex: 0 0 auto;
  cursor: pointer;
}

#subgoal-hierarchy .subgoal-title {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  cursor: pointer;
}

#subgoal-hierarchy
.subgoal-row[data-complete="true"]
.subgoal-title {
  text-decoration: line-through;
  opacity: .72;
}

/*
 * No persistent "Adicionar observação" line.
 * The entire row is now the note disclosure target.
 */
#subgoal-hierarchy .subgoal-note {
  grid-column: 1 / -1;
  margin: 0 0 0 38px;
  cursor: default;
}

#subgoal-hierarchy .subgoal-note > .subgoal-note-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#subgoal-hierarchy .subgoal-note[open] {
  margin-top: 5px;
}

#subgoal-hierarchy .subgoal-note form {
  padding-top: 4px;
}

/*
 * Structural overflow stays independent from row click.
 */
#subgoal-hierarchy .subgoal-settings {
  z-index: 2;
  cursor: default;
}

#subgoal-hierarchy .subgoal-settings > summary {
  color: var(--subgoal-color);
  border-color:
    color-mix(
      in srgb,
      var(--subgoal-color) 52%,
      #b8c7bf
    );
}

#subgoal-hierarchy .subgoal-settings[open] > summary {
  font-size: 1.12rem;
  font-weight: 500;
}

/*
 * Open editor receives a subtle visual relationship
 * to the component color without overpowering text.
 */
#subgoal-hierarchy .subgoal-note textarea:focus {
  border-color: var(--subgoal-color);
  outline:
    2px solid
    color-mix(
      in srgb,
      var(--subgoal-color) 35%,
      transparent
    );
  outline-offset: 1px;
}

#subgoal-hierarchy .subgoal-note-actions button {
  background: var(--subgoal-color);
  border-color: var(--subgoal-color);
}

/*
 * Dark theme.
 */
html[data-theme="dark"]
#subgoal-hierarchy
.subgoal-row {
  background:
    color-mix(
      in srgb,
      var(--subgoal-color) 11%,
      #202b25
    );

  border-color:
    color-mix(
      in srgb,
      var(--subgoal-color) 48%,
      #607467
    );
}

html[data-theme="dark"]
#subgoal-hierarchy
.subgoal-row:hover {
  background:
    color-mix(
      in srgb,
      var(--subgoal-color) 17%,
      #202b25
    );
}

@media (max-width: 600px) {
  #subgoal-hierarchy .subgoal-note {
    margin-left: 34px;
  }
}

/* ==========================================================
 * SUBGOALS UX — COMPACT CLOSED ROW V1
 * Isolated preview candidate only.
 * Preserve checkbox and overflow hit targets.
 * ========================================================== */

#subgoal-hierarchy .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open])) {
  padding-block: 8px;
  min-height: 58px;
}

#subgoal-hierarchy
.subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
.subgoal-completion-control {
  min-height: 44px;
}

#subgoal-hierarchy
.subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
.subgoal-settings > summary {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
}

@media (max-width: 600px) {
  #subgoal-hierarchy .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open])) {
    padding-block: 7px;
    min-height: 56px;
  }
}

/* ==========================================================
 * POWER HABITS
 * SUBGOALS UX — FIXED SETTINGS ANCHOR V1
 *
 * Keep ellipsis and close X at exactly the same visual anchor.
 * Open settings content may expand; its trigger must not move.
 * ========================================================== */

/*
 * Once open, the settings body spans the row,
 * but the DETAILS element must no longer establish the
 * positioning context for its SUMMARY.
 */
#subgoal-hierarchy .subgoal-settings[open] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin: 0;
  position: static;
}

/*
 * Anchor the open control to the SUBGOAL ROW,
 * whose positioning context is already position:relative.
 *
 * Desktop closed compact row:
 *   padding-block = 8px
 *   padding-inline = 14px
 */
#subgoal-hierarchy .subgoal-settings[open] > summary {
  position: absolute;
  top: 8px;
  right: 14px;

  width: 40px;
  min-width: 40px;
  max-width: 40px;

  height: 40px;
  min-height: 40px;

  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;
}

/*
 * Mobile compact row:
 *   padding-block = 7px
 *   padding-inline = 12px
 */
@media (max-width: 600px) {
  #subgoal-hierarchy .subgoal-settings[open] > summary {
    top: 7px;
    right: 12px;

    width: 40px;
    min-width: 40px;
    max-width: 40px;

    height: 40px;
    min-height: 40px;
  }
}

/* ==========================================================
 * POWER HABITS — SUBGOALS SETTINGS FIXED ANCHOR V2
 * Absolute control / flow content.
 *
 * Goal:
 * - ⋯ and × occupy the exact same visual anchor;
 * - settings content expands below without moving the control;
 * - note/settings mutual exclusion remains JS-owned;
 * - no functional route changes.
 * ========================================================== */

#subgoal-hierarchy .subgoal-row {
  position: relative;
}

/*
 * The <details> content itself remains in normal grid flow.
 * Reserve the full row width only when open so its forms can expand.
 */
#subgoal-hierarchy .subgoal-settings {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  margin: 0;
  padding: 0;
  align-self: start;
  justify-self: end;
}

/*
 * The disclosure control is visually detached from the flow.
 * Its anchor never changes between closed/open states.
 */
#subgoal-hierarchy .subgoal-settings > summary {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 4;

  margin: 0 !important;

  width: 40px;
  min-width: 40px;
  max-width: 40px;

  height: 40px;
  min-height: 40px;

  display: grid;
  place-items: center;
}

/*
 * Opening settings must not relocate the summary.
 * Only the details content joins the lower full-width row.
 */
#subgoal-hierarchy .subgoal-settings[open] {
  position: static;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;

  /*
   * Leave room below the compact top row while keeping
   * the absolutely-positioned × at the original anchor.
   */
  margin: 8px 0 0;
  padding: 0;
}

/*
 * Neutralize previous open-summary relocation rules.
 */
#subgoal-hierarchy .subgoal-settings[open] > summary {
  position: absolute;
  top: 8px;
  right: 12px;

  margin: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * Settings forms/content begin below the compact header line.
 * The control itself remains over the top-right anchor.
 */
#subgoal-hierarchy .subgoal-settings[open] > :not(summary) {
  margin-top: 44px;
}

/*
 * Preserve compact closed-row density.
 */
#subgoal-hierarchy
.subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open])) {
  padding-block: 7px;
  min-height: 56px;
}

/*
 * When settings are open, retain a compact header region,
 * then allow content to grow downward only.
 */
#subgoal-hierarchy .subgoal-row:has(.subgoal-settings[open]) {
  padding-top: 7px;
}

/*
 * Observation open state continues to grow naturally.
 */
#subgoal-hierarchy .subgoal-row:has(.subgoal-note[open]) {
  padding-top: 7px;
}

@media (max-width: 600px) {
  #subgoal-hierarchy .subgoal-settings > summary,
  #subgoal-hierarchy .subgoal-settings[open] > summary {
    top: 7px;
    right: 10px;

    width: 40px;
    min-width: 40px;
    max-width: 40px;

    height: 40px;
    min-height: 40px;
  }

  #subgoal-hierarchy .subgoal-settings[open] > :not(summary) {
    margin-top: 44px;
  }
}

/* ==========================================================
 * POWER HABITS
 * SUBGOALS UX — SETTINGS-CENTERED SECONDARY ACTIONS V1
 *
 * Secondary actions live exclusively behind the ellipsis.
 * Completion remains exclusively checkbox-driven.
 * ========================================================== */

#subgoal-hierarchy .subgoal-row {
  cursor: default;
}

/*
 * The settings body behaves as a compact secondary-action panel.
 */
#subgoal-hierarchy .subgoal-settings[open] {
  padding-top: 0;
}

#subgoal-hierarchy .subgoal-settings[open] > :not(summary) {
  margin-top: 44px;
}

/*
 * Note action is intentionally quieter than the completion control.
 */
#subgoal-hierarchy .subgoal-note-action {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  max-width: 440px;
  min-height: 44px;

  margin: 0 0 12px;
  padding: 10px 12px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--subgoal-color) 42%,
      #b8c7bf
    );

  border-radius: 9px;

  background:
    color-mix(
      in srgb,
      var(--subgoal-color) 5%,
      transparent
    );

  color: inherit;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;

  cursor: pointer;
}

#subgoal-hierarchy .subgoal-note-action:hover {
  background:
    color-mix(
      in srgb,
      var(--subgoal-color) 10%,
      transparent
    );
}

#subgoal-hierarchy .subgoal-note-action:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--subgoal-color) 50%,
      transparent
    );
  outline-offset: 2px;
}

/*
 * Archive remains visually destructive and secondary.
 */
#subgoal-hierarchy
.subgoal-settings
form[data-b2-operation="archive_component"] {
  max-width: 440px;
  margin-top: 8px;
}

/*
 * Note editor remains visually linked to its subgoal,
 * but is no longer opened by clicking the row.
 */
#subgoal-hierarchy .subgoal-note[open] {
  margin-top: 8px;
}

@media (max-width: 600px) {
  #subgoal-hierarchy .subgoal-note-action,
  #subgoal-hierarchy
  .subgoal-settings
  form[data-b2-operation="archive_component"] {
    max-width: none;
  }
}


/* ==========================================================
 * POWER HABITS
 * SUBGOALS UX — DIRECT NOTE IN SETTINGS V1
 *
 * Observation editor is part of the ellipsis panel itself.
 * No intermediate "Adicionar/Editar observação" action.
 * ========================================================== */

#subgoal-hierarchy .subgoal-note-form {
  display: grid;
  gap: 8px;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
}

#subgoal-hierarchy .subgoal-note-form .subgoal-note-field,
#subgoal-hierarchy .subgoal-note-form label {
  display: block;
  width: 100%;
}

#subgoal-hierarchy .subgoal-note-form textarea {
  box-sizing: border-box;
  display: block;

  width: 100%;
  min-height: 64px;

  padding: 10px 11px;

  border: 1px solid rgba(120, 120, 120, .45);
  border-radius: 9px;

  background: rgba(20, 20, 20, .14);
  color: inherit;

  font: inherit;
  line-height: 1.4;

  resize: vertical;
}

#subgoal-hierarchy .subgoal-note-form textarea:focus {
  border-color: var(--subgoal-color);

  outline:
    2px solid
    color-mix(
      in srgb,
      var(--subgoal-color) 35%,
      transparent
    );

  outline-offset: 1px;
}

#subgoal-hierarchy .subgoal-note-form .subgoal-note-actions {
  display: flex;
  justify-content: flex-end;
}

#subgoal-hierarchy .subgoal-note-form .subgoal-note-actions button {
  min-height: 40px;
  padding: 7px 13px;

  background: var(--subgoal-color);
  border-color: var(--subgoal-color);
}

#subgoal-hierarchy .subgoal-settings-separator,
#subgoal-hierarchy .subgoal-settings > hr {
  width: 100%;
  margin: 14px 0 12px;

  border: 0;
  border-top: 1px solid rgba(190, 200, 195, .7);
}

/*
 * Obsolete secondary note-action visual layer must disappear.
 */
#subgoal-hierarchy .subgoal-note-action {
  display: none !important;
}

/*
 * Direct note form is the first content block under the fixed ×.
 */
#subgoal-hierarchy
.subgoal-settings[open]
> .subgoal-note-form {
  margin-top: 44px;
}

/*
 * Avoid the generic fixed-anchor rule adding the same top gap
 * independently to every child.
 */
#subgoal-hierarchy
.subgoal-settings[open]
> .subgoal-note-form ~ * {
  margin-top: 0;
}

@media (max-width: 600px) {
  #subgoal-hierarchy .subgoal-note-form textarea {
    min-height: 64px;
  }
}

/* ==========================================================
 * POWER HABITS
 * DIRECT NOTE SETTINGS — VISUAL POLISH V2
 *
 * Scope:
 * - remove redundant 44px reservation;
 * - preserve fixed ⋯ / × anchor;
 * - keep exactly one visual separator before archive;
 * - no interaction or functional-route changes.
 * ========================================================== */

/*
 * The open <details> already occupies grid row 2.
 * A second 44px reservation is therefore unnecessary.
 */
#subgoal-hierarchy
.subgoal-settings[open]
> .subgoal-note-form {
  margin-top: 8px;
}

/*
 * Generic historical rules may target every non-summary child.
 * Pin the direct-note form to the intended final value.
 */
#subgoal-hierarchy
.subgoal-settings[open]
> .subgoal-note-form:first-of-type {
  margin-top: 8px;
}

/*
 * The explicit <hr> is the sole separator between
 * observation editing and the destructive archive action.
 */
#subgoal-hierarchy
.subgoal-settings
> hr.subgoal-settings-separator,
#subgoal-hierarchy
.subgoal-settings
> hr {
  box-sizing: border-box;
  width: 100%;
  height: 0;

  margin: 12px 0 12px;

  padding: 0;
  border: 0;
  border-top: 1px solid rgba(190, 200, 195, .7);

  background: transparent;
  box-shadow: none;
}

/*
 * Prevent an inherited form edge from visually creating
 * a second horizontal separator.
 */
#subgoal-hierarchy
.subgoal-settings
form[data-b2-operation="archive_component"] {
  margin-top: 0;

  border-top: 0 !important;
  border-bottom: 0;
  box-shadow: none;
}

@media (max-width: 600px) {
  #subgoal-hierarchy
  .subgoal-settings[open]
  > .subgoal-note-form,
  #subgoal-hierarchy
  .subgoal-settings[open]
  > .subgoal-note-form:first-of-type {
    margin-top: 8px;
  }
}



/* ==========================================================
 * POWER HABITS
 * SUBGOAL CARD DIMENSION ALIGNMENT — FINAL CANDIDATE V3
 *
 * Closed mobile subgoal card:
 * - same external footprint as habit-card;
 * - compact internal controls;
 * - open state remains content-driven;
 * - no interaction/route changes.
 * ========================================================== */

@media (max-width: 600px) {

  /* External footprint */
  #subgoal-hierarchy .subgoal-row {
    width: calc(100% + 24px);
    max-width: none;
    margin-left: -28px;
    margin-right: 4px;
    height: auto;
  }

  /* Closed card only */
  #subgoal-hierarchy
  .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open])) {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Internal row */
  #subgoal-hierarchy
  .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
  .subgoal-daily,

  #subgoal-hierarchy
  .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
  .subgoal-completion-control {
    height: 44px;
    min-height: 44px;
    align-items: center;
  }

  /* Checkbox */
  #subgoal-hierarchy
  .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
  .subgoal-completion-control input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0 10px;
  }

  /* Title */
  #subgoal-hierarchy
  .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
  .subgoal-title {
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 600;
  }

  /* Closed overflow control */
  #subgoal-hierarchy
  .subgoal-row:not(:has(.subgoal-note[open])):not(:has(.subgoal-settings[open]))
  .subgoal-settings > summary {
    box-sizing: border-box;

    width: 34px;
    min-width: 34px;
    max-width: 34px;

    height: 34px;
    min-height: 34px;
    max-height: 34px;

    padding: 0;
    top: 5px;
    right: 6px;

    display: grid;
    place-items: center;
  }
}