/* The branch toggle in the rail, and the line that admits when a page is not narrowed.
 *
 * ITS OWN FILE, NOT portal.css. portal.css is GENERATED from Eugene's design by
 * tools/sync_portal_design.py, so anything hand-written in it is wiped by the next sync.
 * This is new markup he did not draw, so it carries its own stylesheet and the generated
 * one stays byte-identical to his.
 *
 * It borrows his variables rather than inventing colours, so a business with two yards
 * still looks like the portal he designed. */

.loc-pick {
  margin: 6px 12px 0;
  font-size: 13px;
}

.loc-pick > summary {
  cursor: pointer;
  list-style: none;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--nav-fg, #cbd5e1);
  background: rgba(255, 255, 255, .04);
}

.loc-pick > summary::-webkit-details-marker { display: none; }

.loc-pick > summary::after {
  content: "";
  float: right;
  opacity: .6;
}

.loc-pick[open] > summary::after { content: ""; }

.loc-pick > summary:hover { background: rgba(255, 255, 255, .08); }

.loc-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.loc-list .is-here {
  font-weight: 600;
  color: var(--nav-fg-strong, #fff);
}

/* The sentence a page prints when a branch is chosen and the page cannot honour it.
 * Deliberately quiet: it is a statement of fact on every unnarrowed screen, not an alarm. */
.loc-note {
  margin: 6px 12px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--nav-fg-dim, #94a3b8);
}

/* The owner's own Locations screen, which Eugene did not draw.
 *
 * ITS OWN CLASSES, not borrowed ones. portal.css scopes most component classes under the
 * #view- id of the screen they belong to, so reusing `.panel` or `.row` here would render
 * bare: the rules exist and cannot reach this page. A repo test checks exactly that, which
 * is how this was caught rather than shipped looking broken. */

#view-settings-locations .loc-panel {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  background: var(--card, #fff);
}

#view-settings-locations .loc-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #e2e8f0);
}

#view-settings-locations .loc-row:last-child { border-bottom: 0; }

#view-settings-locations .loc-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--chip, #eef2f7);
  vertical-align: middle;
}

#view-settings-locations .loc-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 2px 0;
}

#view-settings-locations .loc-said {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
}

#view-settings-locations .loc-said--ok { background: #ecfdf5; }
#view-settings-locations .loc-said--warn { background: #fffbeb; }

#view-settings-locations .loc-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  cursor: pointer;
}

#view-settings-locations .loc-btn--go {
  background: var(--brand, #0f172a);
  color: #fff;
  border-color: transparent;
}

/* What an empty override box falls back to.
 *
 * Quiet, because it is a statement about what already happens rather than something the
 * owner has to act on. It sits under the input it explains, so it reads as part of the
 * field and not as a warning about it. */
#view-settings-locations .loc-inherited {
  margin: 2px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #64748b);
}

/* == GENERATED: the Settings chassis, re-scoped. Do not hand-edit:
   run tools/sync_settings.py, which copies it from portal.css. == */
#view-settings-locations {

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px 13px}
.p-head h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--navy-ink)}
.p-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}

.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px}
.kpi__label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.kpi__val{font-size:25px;font-weight:700;letter-spacing:-.035em;color:var(--navy-ink);margin-top:5px;line-height:1.1}
.kpi__sub{font-size:11.5px;color:var(--muted);margin-top:5px}

table.grid{width:100%;border-collapse:collapse}
.grid thead th{background:#fafbfc;border-bottom:1px solid var(--line);text-align:left;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2);padding:9px 14px;white-space:nowrap}
.grid tbody tr{border-top:1px solid var(--line-soft)}
.grid tbody tr:first-child{border-top:0}
.grid tbody tr:hover{background:#fbfcfd}
.grid td{padding:11px 14px;vertical-align:middle;font-size:12.5px;color:#3d4f66}
.grid td b{color:var(--navy-ink);font-weight:700}
.grid .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sub{font-size:11px;color:var(--muted-2);margin-top:2px}
.tablewrap{overflow-x:auto}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 9px;
  font-size:10.5px;font-weight:700;white-space:nowrap}
.pill__dot{width:6px;height:6px;border-radius:50%}
.p-live{background:#e8f5ea;color:#1f7a3c}.p-live .pill__dot{background:#2f9e51}
.p-draft{background:#f0f2f5;color:#5c6b7d}.p-draft .pill__dot{background:#94a3b3}
.p-proof{background:#fdf1e0;color:#a76a12}.p-proof .pill__dot{background:#e0932a}
.p-done{background:#eaf1fb;color:#2c63ab}.p-done .pill__dot{background:#3b82d9}

.bar{height:6px;border-radius:3px;background:#edf0f4;overflow:hidden;min-width:70px}
.bar span{display:block;height:100%;border-radius:3px;background:#2f74d0}

.notice{display:flex;gap:11px;align-items:flex-start;background:#f4f8fc;border:1px solid #e2ecf6;
  border-radius:10px;padding:13px 15px;margin-bottom:14px}
.notice .ic{width:16px;height:16px;color:#2c63ab;flex:0 0 auto;margin-top:1px}
.notice b{display:block;font-size:12.5px;color:var(--navy-ink)}
.notice p{margin:4px 0 0;font-size:12px;color:#3d4f66;line-height:1.55}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 17px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.form input,.form textarea,.form select{
  border:1px solid #e3e6ec;border-radius:8px;padding:9px 11px;font:inherit;font-size:12.5px;
  color:var(--navy-ink);background:#fff}
.form textarea{min-height:104px;resize:vertical;line-height:1.55}
.form .wide{grid-column:1 / -1}
.form .hint{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:#9aa6b3}
.p-foot{border-top:1px solid var(--line-soft);padding:12px 17px;display:flex;justify-content:flex-end;gap:9px}

/* a row of label + control + explanation, for the toggle-ish settings */
.set-rows{display:flex;flex-direction:column}
.set-row{display:flex;align-items:flex-start;gap:14px;padding:14px 17px;
  border-top:1px solid var(--line-soft)}
.set-row:first-child{border-top:0}
.set-row__b{flex:1 1 auto;min-width:0}
.set-row b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--navy-ink)}
.set-row p{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.set-row__side{flex:0 0 auto;padding-top:1px}

/* the portal has no switch yet and four screens now want one */
.tog{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 auto}
.tog input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.tog span{position:absolute;inset:0;border-radius:999px;background:#d9dfe8;transition:background .16s}
.tog span::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,22,34,.28);transition:transform .16s}
.tog input:checked + span{background:#17a85b}
.tog input:checked + span::after{transform:translateX(17px)}
.tog input:focus-visible + span{outline:2px solid #0b5cff;outline-offset:2px}


.stack{display:flex;flex-direction:column;gap:14px}
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
.empty{padding:40px 20px;text-align:center}
.empty h3{margin:0;font-size:14px;color:var(--navy-ink)}
.empty p{margin:7px auto 0;font-size:12.5px;color:var(--muted);max-width:430px;line-height:1.6}

@media(max-width:1180px){.grid-stats{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}}

.set-wrap{display:grid;grid-template-columns:222px minmax(0,1fr);gap:20px;align-items:start}
.setnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:14px}
.setnav__i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:#46577a;text-decoration:none;position:relative}
.setnav__i .ic{width:17px;height:17px;color:#8593a6;flex:0 0 auto}
.setnav__i:hover{background:#f2f5f9;color:var(--navy-ink)}
.setnav__i.active{background:#eef3fd;color:#0b5cff}
.setnav__i.active .ic{color:#0b5cff}
.setnav__i.active::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;
  border-radius:2px;background:#0b5cff}

.set-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.set-h{margin:0 0 2px}
.set-h h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.026em;color:var(--navy-ink)}
.set-h p{margin:5px 0 0;font-size:13px;color:var(--muted);line-height:1.55;max-width:70ch}

.set-danger{border-color:#f3d6d3}
.set-danger .p-head h2{color:#b93b33}


}
/* == END GENERATED == */
/* == GENERATED from scr_settings-locations.html. Do not hand-edit:
   run tools/sync_locations.py, which takes it from the design. == */
#view-settings-locations a.settings-link, #view-settings-locations a.location-row, #view-settings-locations a.collapse, #view-settings-locations a.btn, #view-settings-locations a.help{text-decoration:none;color:inherit}
#view-settings-locations a.location-row{cursor:pointer}
#view-settings-locations .add-form{display:flex;flex-direction:column;gap:10px;max-width:320px}
#view-settings-locations .add-form .add-btn{justify-content:center}
#view-settings-locations .add-form .help-note{margin:0}
#view-settings-locations {--navy:#08284b;
  --navy-2:#0e3159;
  --navy-3:#153a66;
  --ink:#0d2b4f;
  --muted:#75869f;
  --muted-2:#9aa8ba;
  --line:#dfe6ef;
  --line-2:#e9eef4;
  --bg:#f7f9fc;
  --white:#ffffff;
  --blue:#2d6df6;
  --blue-soft:#eaf1ff;
  --green:#36c56b;
  --orange:#ff6a1a;
  --shadow:0 1px 2px rgba(14,35,65,.05),0 8px 24px rgba(14,35,65,.04);}
#view-settings-locations .nav-item.active{color:#fff;
  background:rgba(83,137,214,.25);}
#view-settings-locations .nav-item.active svg{stroke:#fff}
#view-settings-locations .toprow{display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;
  margin-bottom:19px;}
#view-settings-locations .kicker{color:#697e99;font-weight:700;font-size:14px;margin-bottom:2px;}
#view-settings-locations .subtitle{margin-top:6px;
  color:#6f8097;
  font-size:15px;}
#view-settings-locations .help{height:43px;
  display:flex;align-items:center;gap:9px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font-weight:700;
  color:#163659;}
#view-settings-locations .settings-wrap{display:grid;
  grid-template-columns:265px minmax(0,1fr);
  gap:28px;}
#view-settings-locations .settings-nav{padding:2px 0 0;}
#view-settings-locations .settings-link{height:51px;
  display:flex;align-items:center;
  gap:12px;
  padding:0 14px;
  border-radius:10px;
  color:#49617f;
  font-size:15px;
  font-weight:700;}
#view-settings-locations .settings-link svg{width:18px;height:18px;stroke:#7d90aa;stroke-width:1.8}
#view-settings-locations .settings-link.active{color:#1f60f2;
  background:#edf3ff;
  position:relative;}
#view-settings-locations .settings-link.active::before{content:"";
  position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:0 4px 4px 0;background:#2b6eff;}
#view-settings-locations .settings-link.active svg{stroke:#2b6eff}
#view-settings-locations .content{min-width:0;}
#view-settings-locations .plan-row{display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:0 0 15px;}
#view-settings-locations .plan-note{color:#8a9ab0;
  font-size:14px;
  line-height:1.4;}
#view-settings-locations .add-btn{height:43px;
  padding:0 18px;
  border:0;border-radius:8px;
  background:#2d6df6;color:#fff;
  font-weight:700;
  display:flex;align-items:center;gap:9px;
  box-shadow:0 4px 12px rgba(45,109,246,.17);}
#view-settings-locations .add-btn svg{width:18px;height:18px}
#view-settings-locations /* LOCATION CARD */ .location-card{border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;}
#view-settings-locations .location-body{padding:21px 20px 11px;}
#view-settings-locations .location-heading{display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  margin-bottom:13px;}
#view-settings-locations .location-name-wrap{display:flex;align-items:center;gap:8px;}
#view-settings-locations .location-name{font-size:22px;
  font-weight:800;
  color:#0c2b50;
  letter-spacing:-.02em;}
#view-settings-locations .tag{display:inline-flex;align-items:center;
  height:24px;padding:0 10px;
  border-radius:999px;
  background:#eaf2ff;color:#215fc3;
  font-size:12px;font-weight:800;
  text-transform:lowercase;}
#view-settings-locations .collapse{border:0;background:transparent;padding:4px;cursor:pointer;}
#view-settings-locations .collapse svg{width:18px;height:18px;stroke:#23476d}
#view-settings-locations .phone{font-size:14px;
  color:#0c2e56;
  font-weight:700;
  margin-bottom:18px;}
#view-settings-locations .form-grid{display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 22px;}
#view-settings-locations .field{display:flex;flex-direction:column;
  gap:7px;}
#view-settings-locations .field.full{grid-column:1 / -1}
#view-settings-locations .control{height:45px;
  border:1px solid #cfd9e6;
  border-radius:8px;
  background:#fff;
  display:flex;align-items:center;
  padding:0 14px;
  font-size:15px;
  color:#19395e;
  box-shadow:inset 0 0 0 1px rgba(18,45,79,.01);}
#view-settings-locations .control.select{justify-content:space-between;}
#view-settings-locations .helper{color:#7890ae;
  font-size:13px;
  line-height:1.45;
  margin-top:-1px;}
#view-settings-locations .card-footer{border-top:1px solid var(--line-2);
  padding:11px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;}
#view-settings-locations .updated{font-size:12px;color:#8a9db5;}
#view-settings-locations .actions{display:flex;gap:10px;}
#view-settings-locations .btn{height:41px;padding:0 17px;
  border-radius:8px;
  font-weight:700;}
#view-settings-locations .btn.secondary{background:#fff;border:1px solid #d6dfe9;color:#18395e;}
#view-settings-locations .btn.primary{background:#2d6df6;border:1px solid #2d6df6;color:#fff;
  box-shadow:0 4px 12px rgba(45,109,246,.17);}
#view-settings-locations /* COLLAPSED ROWS */ .location-row{margin-top:10px;
  min-height:61px;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 17px 11px 20px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow);}
#view-settings-locations .location-row-left{display:flex;align-items:center;gap:15px;}
#view-settings-locations .row-main strong{display:block;
  font-size:15px;
  color:#0d2b4f;}
#view-settings-locations .row-main span{display:block;
  margin-top:2px;
  color:#71849e;
  font-size:12px;}
#view-settings-locations .row-right{display:flex;align-items:center;gap:12px;}
#view-settings-locations .status{display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 11px;border-radius:999px;
  background:#eef3f8;
  color:#4f6784;
  font-size:12px;font-weight:700;}
#view-settings-locations .status-dot{width:8px;height:8px;border-radius:50%;background:#38c46b}
#view-settings-locations .row-chevron svg{width:18px;height:18px;stroke:#56708e}
#view-settings-locations /* SVG helpers */ .icon{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* == END GENERATED SCREEN CSS == */
/* THE TWO CONTROLS HIS DESIGN DOES NOT DRAW, and where they sit.
 *
 * Under the card rather than inside it: the card is one <form> with one Save, and a form
 * inside a form is invalid HTML that browsers resolve by dropping the inner one. Quiet,
 * because neither is a thing an owner does often, and both spend or stop something. */
#view-settings-locations .card-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 10px 0 0;
  padding: 13px 20px;
  border: 1px solid var(--line, #dfe6ef);
  border-radius: 10px;
  background: #fbfcfe;
}
#view-settings-locations .card-extra form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
#view-settings-locations .card-extra label {
  font-size: 12.5px;
  font-weight: 600;
  color: #56708e;
}
#view-settings-locations .card-extra .control { height: 38px; max-width: 220px; }
#view-settings-locations .help-note {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7890ae;
}