/* Focus Goals (scoped). Accent = brand gold #b08a48. No global selectors. */

/* tokens */
:root {
  --fg-accent: var(--brand-gold, #b08a48);
  --fg-bg: #ffffff;
  --fg-text: var(--bs-body-color, #212529);
  --fg-muted: var(--bs-secondary-color, #6c757d);
  --fg-radius: .5rem;
  --fg-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* wrapper + heading */
.fg-wrap { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.fg-heading { margin: 0 0 .75rem; font-weight: 700; }

/* form */
.fg-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.fg-input {
  flex: 1 1 360px; min-width: 200px;
  border: 1px solid var(--fg-accent); border-radius: var(--fg-radius);
  background: var(--fg-bg); padding: .5rem .75rem; box-shadow: var(--fg-shadow);
}
.fg-select {
  flex: 0 0 160px;
  border: 1px solid var(--fg-accent); border-radius: var(--fg-radius);
  background: var(--fg-bg); padding: .5rem .75rem; box-shadow: var(--fg-shadow);
}
.fg-btn {
  border: 1px solid var(--fg-accent);
  background: var(--fg-bg); color: var(--fg-text);
  border-radius: var(--fg-radius); padding: .5rem .75rem;
  box-shadow: var(--fg-shadow);
}
.fg-btn:hover { background: rgba(176,138,72,.08); }
.fg-submit { font-weight: 600; }

/* toolbar */
.fg-toolbar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.fg-chip {
  display: inline-block; padding: .25rem .5rem; font-size: .875rem;
  border: 1px solid var(--fg-accent); border-radius: var(--fg-radius); background: var(--fg-bg);
}

/* signed-out note */
.fg-note {
  display: none; margin: .25rem 0 1rem;
  color: var(--fg-muted); font-size: .95rem;
}
.fg-note.is-visible { display: block; }

/* layout row */
.fg-row {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1200px) { .fg-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 992px)  { .fg-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px)  { .fg-row { grid-template-columns: 1fr; } }

/* cards */
.fg-card {
  background: var(--fg-bg); border: 1px solid var(--fg-accent);
  border-radius: var(--fg-radius); padding: 1rem; box-shadow: var(--fg-shadow);
}
.fg-title { margin: 0 0 .5rem; font-weight: 700; }

/* progress */
.fg-progress {
  height: .5rem; border: 1px solid var(--fg-accent);
  border-radius: 999px; background: #fff; overflow: hidden; margin-bottom: .75rem;
}
.fg-progress-bar {
  height: 100%; background: var(--fg-accent);
  width: calc(var(--pct, 0) * 1%); transition: width .2s ease;
}

/* list + empty */
.fg-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: stretch;   /* force children to fill the available width */
  min-width: 0;           /* allow inner grid tracks to shrink correctly */
}
.fg-empty { color: var(--fg-muted); font-size: .95rem; }
.is-hidden { display: none; }

/* items */
.fg-item {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important; /* stop the text track collapsing */
  gap: .5rem !important;
  align-items: center !important;
  width: 100%;
  min-width: 0;
  padding: .5rem .625rem;
  background: #fff;
  border: 1px solid var(--fg-accent);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow);
}

.fg-item.done .fg-text { color: var(--fg-muted); text-decoration: line-through; }
.fg-text {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;                 /* cooperate with the grid’s text track */
  white-space: normal !important;
  overflow-wrap: anywhere !important;      /* break long strings if needed */
  word-break: normal !important;

  /* absolute guard against vertical writing from late CSS */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* actions */
.fg-actions {
  display: inline-flex;
  gap: .375rem;
  flex-shrink: 0;           /* keep buttons from collapsing the text column */
}
.fg-icon-btn {
  border: 1px solid var(--fg-accent); background: var(--fg-bg);
  border-radius: var(--fg-radius); padding: .25rem .5rem; line-height: 1;
}
.fg-icon-btn:hover { background: rgba(176,138,72,.12); }


/* widths via class (fg-w-0 … fg-w-100 => sets --pct) */
.fg-w-0{--pct:0;} .fg-w-1{--pct:1;} .fg-w-2{--pct:2;} .fg-w-3{--pct:3;} .fg-w-4{--pct:4;}
.fg-w-5{--pct:5;} .fg-w-6{--pct:6;} .fg-w-7{--pct:7;} .fg-w-8{--pct:8;} .fg-w-9{--pct:9;}
.fg-w-10{--pct:10;} .fg-w-11{--pct:11;} .fg-w-12{--pct:12;} .fg-w-13{--pct:13;} .fg-w-14{--pct:14;}
.fg-w-15{--pct:15;} .fg-w-16{--pct:16;} .fg-w-17{--pct:17;} .fg-w-18{--pct:18;} .fg-w-19{--pct:19;}
.fg-w-20{--pct:20;} .fg-w-21{--pct:21;} .fg-w-22{--pct:22;} .fg-w-23{--pct:23;} .fg-w-24{--pct:24;}
.fg-w-25{--pct:25;} .fg-w-26{--pct:26;} .fg-w-27{--pct:27;} .fg-w-28{--pct:28;} .fg-w-29{--pct:29;}
.fg-w-30{--pct:30;} .fg-w-31{--pct:31;} .fg-w-32{--pct:32;} .fg-w-33{--pct:33;} .fg-w-34{--pct:34;}
.fg-w-35{--pct:35;} .fg-w-36{--pct:36;} .fg-w-37{--pct:37;} .fg-w-38{--pct:38;} .fg-w-39{--pct:39;}
.fg-w-40{--pct:40;} .fg-w-41{--pct:41;} .fg-w-42{--pct:42;} .fg-w-43{--pct:43;} .fg-w-44{--pct:44;}
.fg-w-45{--pct:45;} .fg-w-46{--pct:46;} .fg-w-47{--pct:47;} .fg-w-48{--pct:48;} .fg-w-49{--pct:49;}
.fg-w-50{--pct:50;} .fg-w-51{--pct:51;} .fg-w-52{--pct:52;} .fg-w-53{--pct:53;} .fg-w-54{--pct:54;}
.fg-w-55{--pct:55;} .fg-w-56{--pct:56;} .fg-w-57{--pct:57;} .fg-w-58{--pct:58;} .fg-w-59{--pct:59;}
.fg-w-60{--pct:60;} .fg-w-61{--pct:61;} .fg-w-62{--pct:62;} .fg-w-63{--pct:63;} .fg-w-64{--pct:64;}
.fg-w-65{--pct:65;} .fg-w-66{--pct:66;} .fg-w-67{--pct:67;} .fg-w-68{--pct:68;} .fg-w-69{--pct:69;}
.fg-w-70{--pct:70;} .fg-w-71{--pct:71;} .fg-w-72{--pct:72;} .fg-w-73{--pct:73;} .fg-w-74{--pct:74;}
.fg-w-75{--pct:75;} .fg-w-76{--pct:76;} .fg-w-77{--pct:77;} .fg-w-78{--pct:78;} .fg-w-79{--pct:79;}
.fg-w-80{--pct:80;} .fg-w-81{--pct:81;} .fg-w-82{--pct:82;} .fg-w-83{--pct:83;} .fg-w-84{--pct:84;}
.fg-w-85{--pct:85;} .fg-w-86{--pct:86;} .fg-w-87{--pct:87;} .fg-w-88{--pct:88;} .fg-w-89{--pct:89;}
.fg-w-90{--pct:90;} .fg-w-91{--pct:91;} .fg-w-92{--pct:92;} .fg-w-93{--pct:93;} .fg-w-94{--pct:94;}
.fg-w-95{--pct:95;} .fg-w-96{--pct:96;} .fg-w-97{--pct:97;} .fg-w-98{--pct:98;} .fg-w-99{--pct:99;}
.fg-w-100{--pct:100;}
/* Anti-collapse guard for the Focus Goals subtree */
.fg-wrap, .fg-card, .fg-list, .fg-item {
  min-width: 0;
  width: 100%;
}
/* Final guard: if any inline style or late rule sets writing-mode, reset it here */
.fg-item[style*="writing-mode"],
.fg-text[style*="writing-mode"]{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}