/* Setup's pop-up menu (static/setup-menu.js; ~/prod-promote/mock-setup.html, layout D),
   the "Setup ▾ › <page>" line above a Setup page's title, and the amber count
   both it and the phone's Setup list (app.js renderSetupCards) put after a name. */

/* the amber count: a page that needs something */
.setup-att {
  flex: none; display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: #fbefdc; color: #9a5b12; font-size: 11px; font-weight: 700; line-height: 17px;
  white-space: nowrap;
}

.sm-menu {
  position: fixed; z-index: 1200; width: 700px;
  background: #fff; border: 1px solid rgba(29, 43, 33, .08); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 44px rgba(16, 40, 24, .20);
  padding: 16px 14px 14px; color: var(--ink); text-align: left;
}
.sm-menu[hidden] { display: none; }
/* the page beside the sidebar dims while it's open (left set by setup-menu.js place()) */
.sm-scrim {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1190;
  background: rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.sm-scrim.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .12s ease; }
/* "Setup ▾" that opened it stays above the scrim, as Setup in the sidebar does */
.sm-crumb-btn[aria-expanded="true"] { position: relative; z-index: 1201; }
.sm-menu.sm-stack { width: 340px; }
/* one column: the checklist link and the attention pill share a line under the title */
.sm-stack .sm-head { flex-wrap: wrap; row-gap: 6px; }
.sm-stack .sm-r { width: 100%; justify-content: space-between; }
.sm-stack .sm-check { padding-left: 0; }
/* the pointer toward Setup (beside it) or toward "Setup ▾" (under it) */
.sm-ptr {
  position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg);
  border: 1px solid rgba(29, 43, 33, .08); pointer-events: none;
}
.sm-menu:not(.sm-below) .sm-ptr { left: -8px; top: calc(var(--sm-ptr) - 7px); border-top: 0; border-right: 0; }
.sm-menu.sm-below .sm-ptr { top: -8px; left: calc(var(--sm-ptr) - 7px); border-bottom: 0; border-right: 0; }
/* the columns scroll, not the menu (that would clip the pointer), on a window too short for it */
.sm-menu .sm-cols { overflow: auto; max-height: calc(var(--sm-max, 100vh) - 76px); }
/* no gap to cross from Setup into the menu */
.sm-menu:not(.sm-below)::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }

.sm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 12px; }
.sm-t { font-size: 16px; font-weight: 700; }
.sm-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sm-att {
  font-size: 12.5px; font-weight: 700; color: #9a5b12; background: #fbefdc;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.sm-check {
  border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--gm); cursor: pointer; white-space: nowrap; border-radius: 6px;
}
.sm-check:hover, .sm-check:focus-visible { text-decoration: underline; outline: none; }

.sm-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.sm-stack .sm-cols { grid-template-columns: 1fr; gap: 4px; }
.sm-g {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink3); padding: 4px 10px 6px;
}
.sm-it {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; margin: 0;
  border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.sm-it:hover { background: #f4f1ea; }
.sm-it:focus-visible { outline: 2px solid var(--gm); outline-offset: -2px; }
.sm-it.on { background: #e7f1e6; }
.sm-ic, .sm-it svg.lucide {
  width: 18px; height: 18px; margin-top: 2px; flex: none;
  fill: none; stroke: #6b8571; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sm-it.on svg.lucide { stroke: var(--gm); }
.sm-tx { min-width: 0; flex: 1; }
.sm-nm { display: flex; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sm-it.on .sm-nm { color: var(--gm); }
.sm-nm .setup-att { margin-left: auto; padding-left: 7px; }
.sm-ds { display: block; font-size: 12.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Setup in the sidebar reads as opening something */
.side-nav .snav-car { font-size: 15px; opacity: .6; margin-left: 2px; }

/* "Setup ▾ › Tank Mixes" above the title: desktop and tablet (the phone has its top bar) */
.sm-crumb { display: none; }
@media (min-width: 768px) {
  .sm-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 13px; color: var(--ink3); font-weight: 400; }
  .sm-crumb-btn {
    display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff;
    border-radius: 999px; padding: 1px 10px; font: inherit; font-size: 13px; color: var(--ink2); cursor: pointer;
  }
  .sm-crumb-btn:hover, .sm-crumb-btn[aria-expanded="true"] { border-color: var(--gb); color: var(--ink); }
  .sm-crumb-pg { white-space: nowrap; }
}

/* the onboarding checklist on Farms & Blocks: desktop and tablet (the phone's is on its Setup list) */
#farms-checklist { display: none; }
@media (min-width: 768px) { #farms-checklist { display: block; } }