/* ==========================================================================
   Concura.AI Bookmarker — styling
   ==========================================================================
   Palette consistency:
     teal   #008080  → completed (Concura value zone)
     coral  #D85A30  → not_started (action / danger)
     amber  #BA7517  → in_progress (warning)
     gray   neutral  → unset / default
   The status strip uses a subtle tinted background so the customer can see
   their current state at a glance, but the page content is never visually
   dominated by the bookmarker.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Status strip — slot above the .objective-tabs notebook
   -------------------------------------------------------------------------- */

.bookmarker-strip {
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 0.85rem 0 1.25rem 0;
  background: rgba(0, 0, 0, 0.02);
  font-size: 0.9rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Status-driven left border tint. Now using a chunky 8px solid bar plus a
   stronger background tint, so the customer can tell their status at a
   glance without having to read the dropdown. */
.bookmarker-strip[data-status="completed"] {
  border-left: 8px solid #008080;
  background: rgba(0, 128, 128, 0.10);
}
.bookmarker-strip[data-status="in_progress"] {
  border-left: 8px solid #BA7517;
  background: rgba(186, 117, 23, 0.12);
}
.bookmarker-strip[data-status="not_started"] {
  border-left: 8px solid #D85A30;
  background: rgba(216, 90, 48, 0.10);
}
.bookmarker-strip[data-status="unset"] {
  border-left: 8px solid var(--md-default-fg-color--lighter, #c0c0c0);
}

.bookmarker-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}

.bookmarker-label {
  font-weight: 600;
  color: var(--md-default-fg-color, #333);
}
.bookmarker-label code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}

.bookmarker-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bookmarker-field-label {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light, #666);
}
.bookmarker-field select {
  padding: 0.32rem 0.55rem;
  font-size: 0.88rem;
  font-family: inherit;
  border: 1px solid var(--md-default-fg-color--lighter, #c0c0c0);
  border-radius: 4px;
  background: white;
  color: var(--md-default-fg-color, #333);
  cursor: pointer;
}
.bookmarker-field select:focus {
  outline: none;
  border-color: #008080;
  box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.15);
}

.bookmarker-saved {
  font-size: 0.8rem;
  color: #008080;
  font-weight: 500;
  margin-left: auto;       /* push to the right when there's room */
  min-width: 5rem;
}

.bookmarker-helper {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--md-default-fg-color--lightest, #e0e0e0);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light, #666);
  max-width: 70ch;
}

.bookmarker-inheritance-reminder {
  display: none;
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(186, 117, 23, 0.06);
  border-left: 3px solid #BA7517;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--md-default-fg-color, #333);
  max-width: 80ch;
}
.bookmarker-inheritance-reminder.is-visible {
  display: block;
}
.bookmarker-inheritance-reminder strong {
  color: #854F0B;
}

/* --------------------------------------------------------------------------
   Button status colorization — applied via [data-bookmark-status] on the
   existing .objective-nav-button (requirement pages) and .md-button
   (family pages) links.

   Design constraint (Senior Assessor): leave the box highlight (hover state) alone.
   Customers like the way the buttons fill on hover — that should
   continue to work exactly as it did before. Status is signaled
   PURELY through font properties (color + weight + style), so that:
     - the unset state is visually identical to the public-site default
     - the hover transition still shows the existing teal fill
     - status differentiation survives hover (font-weight and
       font-style aren't typically overridden by the hover color rule)

   The default (no [data-bookmark-status] attribute, or value="unset")
   leaves the existing button styling unchanged.
   -------------------------------------------------------------------------- */

/* Completed = bold + dark forest green text */
a[data-bookmark-status="completed"].objective-nav-button,
a[data-bookmark-status="completed"].md-button {
  color: #1B5E20 !important;
  font-weight: 700 !important;
}

/* In progress = bold italic + amber text */
a[data-bookmark-status="in_progress"].objective-nav-button,
a[data-bookmark-status="in_progress"].md-button {
  color: #854F0B !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

/* Not started = bold + coral text. Bold across all three statuses
   distinguishes "bookmarked" from "unset" at a glance. */
a[data-bookmark-status="not_started"].objective-nav-button,
a[data-bookmark-status="not_started"].md-button {
  color: #993C1D !important;
  font-weight: 700 !important;
}

/* "unset" intentionally has no rule — falls through to default styling. */

/* Material's .md-button defaults to border-color: currentColor, which means
   our text-color overrides above would also change the border. Senior Assessor wants
   borders to stay teal at every nav level (consistent with the sub-objective
   buttons whose border-color is hardcoded teal in objective-page.css). Pin
   it explicitly. */
a[data-bookmark-status="completed"].md-button,
a[data-bookmark-status="in_progress"].md-button,
a[data-bookmark-status="not_started"].md-button {
  border-color: #008080 !important;
}

/* The link text contains <strong> wrappers around the control ID
   ("**3.1.1[a]**" in the markdown source). The existing site CSS has
   explicit color rules on those <strong> elements that beat our
   [data-bookmark-status] selector. Force descendants to inherit the
   link's color so the entire button text reflects the bookmarked
   status, not just the prose portion. */
a[data-bookmark-status="completed"].objective-nav-button *,
a[data-bookmark-status="completed"].md-button *,
a[data-bookmark-status="in_progress"].objective-nav-button *,
a[data-bookmark-status="in_progress"].md-button *,
a[data-bookmark-status="not_started"].objective-nav-button *,
a[data-bookmark-status="not_started"].md-button * {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   Toggle UI (dashboard root)
   -------------------------------------------------------------------------- */

.bookmarker-toggle {
  display: block;
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.5rem 0;
  background: rgba(0, 0, 0, 0.015);
  max-width: 70ch;
}
.bookmarker-toggle.is-on {
  border-color: #008080;
  background: rgba(0, 128, 128, 0.04);
}

.bookmarker-toggle-text {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.bookmarker-toggle-text strong {
  font-size: 1rem;
}
.bookmarker-toggle-state {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--md-default-fg-color--lighter, #c0c0c0);
  color: white;
  text-transform: uppercase;
}
.bookmarker-toggle.is-on .bookmarker-toggle-state {
  background: #008080;
}

.bookmarker-toggle-help {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light, #666);
  margin-bottom: 0.7rem;
}

.bookmarker-toggle-btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--md-default-fg-color, #333);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bookmarker-toggle-btn:hover { background: #555; }
.bookmarker-toggle-btn:disabled { opacity: 0.6; cursor: progress; }
.bookmarker-toggle.is-on .bookmarker-toggle-btn { background: #D85A30; }
.bookmarker-toggle.is-on .bookmarker-toggle-btn:hover { background: #993C1D; }

.bookmarker-toggle-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.bookmarker-placemat-link {
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Placemat — bird's-eye grid at /dashboard/my-progress/
   -------------------------------------------------------------------------- */

.placemat-loading {
  font-style: italic;
  color: var(--md-default-fg-color--light, #666);
}

.placemat-disabled {
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 6px;
  padding: 1.2rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  max-width: 60ch;
}
.placemat-disabled h3 {
  margin-top: 0;
  color: var(--md-default-fg-color, #333);
}

.placemat-summary {
  margin: 0.5rem 0 1.25rem 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-left: 8px solid #008080;
  border-radius: 6px;
  background: rgba(0, 128, 128, 0.05);
}
.placemat-summary-headline {
  font-size: 1rem;
  color: var(--md-default-fg-color, #333);
}
.placemat-summary-headline strong {
  font-size: 1.15rem;
  color: #006464;
}
.placemat-summary-pct {
  margin-left: 0.4rem;
  color: var(--md-default-fg-color--light, #666);
}
.placemat-summary-detail {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light, #666);
}

/* Compact, single-page-friendly grid. minmax(140px, 1fr) lets the grid
   pack 7-8 columns on a 1080p screen and still wraps gracefully on
   narrower viewports. */
.placemat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem;
  margin: 1rem 0;
}

.placemat-family {
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 4px;
  overflow: hidden;
  background: white;
}

.placemat-family-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.32rem 0.55rem 0.18rem;
  background: rgba(0, 128, 128, 0.10);
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
}
.placemat-family-code {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--md-default-fg-color, #333);
  letter-spacing: 0.02em;
}
.placemat-family-count {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--md-default-fg-color--light, #666);
}

/* Microsoft-style row: monospace ID on the left in the site's normal
   link color, small colored status box on the right. No row tinting,
   no font-weight or color changes on the ID — just the box conveys
   status. */
.placemat-req {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #f3f3f3);
  text-decoration: none;
  line-height: 1.2;
  color: #008080;       /* normal site link color */
  transition: background-color 0.12s ease;
}
.placemat-req:last-child { border-bottom: none; }
.placemat-req:hover { background: rgba(0, 0, 0, 0.04); }

.placemat-req-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
}

.placemat-status-dot {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--md-default-fg-color--lighter, #d0d0d0);  /* default = unset / not bookmarked */
  border: 1px solid rgba(0, 0, 0, 0.10);
}
/* Symmetric: each set status colors both the ID text and the status
   box to the same value, so the placemat reads consistently. Unset
   rows keep the default teal link color and a neutral gray box. */

.placemat-req[data-bookmark-status="completed"],
.placemat-req[data-bookmark-status="completed"] .placemat-req-id {
  color: #008080;
}
.placemat-req[data-bookmark-status="completed"] .placemat-status-dot {
  background: #008080;
  border-color: #006464;
}

/* In progress uses Material's amber accent (the same yellow the site
   uses for hover / focus highlights). */
.placemat-req[data-bookmark-status="in_progress"],
.placemat-req[data-bookmark-status="in_progress"] .placemat-req-id {
  color: var(--md-accent-fg-color, #FFAB00);
}
.placemat-req[data-bookmark-status="in_progress"] .placemat-status-dot {
  background: var(--md-accent-fg-color, #FFAB00);
  border-color: var(--md-accent-fg-color, #FFAB00);
}

.placemat-req[data-bookmark-status="not_started"],
.placemat-req[data-bookmark-status="not_started"] .placemat-req-id {
  color: #D85A30;
}
.placemat-req[data-bookmark-status="not_started"] .placemat-status-dot {
  background: #D85A30;
  border-color: #993C1D;
}

.placemat-help {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--md-default-fg-color--lightest, #e0e0e0);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light, #666);
  max-width: 80ch;
}