/* ISIMET Build-It — shared front-end theme.
   Page components (cards, forms, buttons, layout) for all front-facing Build-It
   pages. The header, footer, and grid come from css/bipub.css (the real ISIMET
   chrome), imported below and injected by js/bi-chrome.js. Brand navy #25408F. */

/* bipub.css is no longer imported — the chrome is self-contained in
   bi-chrome.css. (bipub's `body *{font-family}` over-reach clobbered the
   chrome's font inheritance.) */

:root{
  --bi-navy:#25408F;
  --bi-navy-dark:#1c3270;
  --bi-navy-soft:rgba(37,64,143,.92);
  --bi-ink:#222b45;
  --bi-muted:#5b6472;
  --bi-line:#e2e5ec;
  --bi-tint:#eef1f8;
  --bi-radius:10px;
  --bi-radius-sm:8px;
  --bi-shadow:0 1px 3px rgba(22,33,61,.10);
  --bi-shadow-lg:0 12px 34px rgba(22,33,61,.16);
  --bi-font:'proxima-nova','Segoe UI',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
body.bi{
  margin:0;font-family:var(--bi-font);color:var(--bi-ink);
  background:linear-gradient(180deg,#f7f9fc 0%,#e9edf6 100%);
  min-height:100vh;display:flex;flex-direction:column;
}

/* ---- layout ---- */
.bi-main{flex:1;width:100%;max-width:1140px;margin:0 auto;padding:28px 22px 48px;}
.bi-center{display:flex;justify-content:center;align-items:flex-start;padding-top:44px;}

/* ---- card / panel ---- */
.bi-card{background:#fff;border:1px solid var(--bi-line);border-radius:var(--bi-radius);box-shadow:var(--bi-shadow);overflow:hidden;}
/* An option that cannot apply to this build. Greyed and inert rather than
   removed: a control that vanishes between renders reads as a bug, and the
   title attribute carries the reason it is unavailable. */
.bi-card.bi-card-unavailable{opacity:.45;filter:grayscale(1);cursor:not-allowed;}
.bi-card.bi-card-unavailable *{pointer-events:none;}
.bi-card-head{background:var(--bi-navy-soft);color:#fff;font-weight:600;font-size:16px;text-align:center;padding:14px 18px;}
.bi-card-body{padding:22px 24px;}
.bi-panel{max-width:560px;width:100%;}

/* ---- buttons ---- */
.bi-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:var(--bi-radius-sm);font:600 15px/1 var(--bi-font);padding:11px 20px;cursor:pointer;transition:background .15s ease,transform .05s ease;text-decoration:none;}
.bi-btn-primary{background:var(--bi-navy);color:#fff;box-shadow:0 1px 2px rgba(37,64,143,.25);}
.bi-btn-primary:hover{background:var(--bi-navy-dark);}
.bi-btn-primary:active{transform:translateY(1px);}
.bi-btn-primary:disabled{opacity:.6;cursor:default;}
.bi-btn-block{width:100%;}
.bi-btn-ghost{background:#fff;color:var(--bi-navy);border:1.5px solid var(--bi-navy);}
.bi-btn-ghost:hover{background:var(--bi-tint);}

/* ---- form fields ---- */
.bi-field{margin-bottom:16px;}
.bi-field label{display:block;font-size:12px;font-weight:600;color:var(--bi-navy);margin-bottom:5px;}
.bi-input{width:100%;font:400 15px/1.3 var(--bi-font);color:var(--bi-ink);padding:11px 13px;border:1px solid #cfd6e4;border-radius:var(--bi-radius-sm);background:#fff;}
.bi-input:focus{outline:none;border-color:var(--bi-navy);box-shadow:0 0 0 3px rgba(37,64,143,.14);}
.bi-input[readonly]{background:#f4f6fa;color:var(--bi-muted);}
.bi-row{display:flex;gap:14px;}
.bi-row>.bi-field{flex:1;}
.bi-help{font-size:13.5px;color:var(--bi-muted);margin:0 0 18px;line-height:1.5;}
.bi-error{color:#c0392b;font-size:13px;margin:0 0 14px;}

/* ---- selected/highlight card (e.g. chosen project) ---- */
.bi-selected-card{background:var(--bi-tint);border:1px solid #d5ddef;border-left:4px solid var(--bi-navy);border-radius:var(--bi-radius);padding:14px 16px;}

/* ---- modal (project picker) ----
 * <dialog> handles the backdrop, focus trap and Esc natively. ::backdrop is
 * styled here rather than an overlay div. */
/* Flex column so the BODY absorbs whatever height is left after the header,
 * instead of being told its own max-height separately.
 *
 * The two were stated independently — the dialog capped at min(78vh,640px)
 * while the body allowed calc(78vh - 66px) — so on any viewport taller than
 * ~820px the body's ceiling was the larger of the two. A long project list
 * then sat comfortably under its own limit, never grew a scrollbar, and got
 * clipped by the dialog's overflow:hidden: rows you could not see and could
 * not scroll to. Reported by Gabe with several projects loaded.
 *
 * Letting the body flex removes the duplicated figure altogether, so the two
 * cannot disagree again at any window size. */
.bi-modal{border:none;padding:0;border-radius:var(--bi-radius);box-shadow:0 18px 50px rgba(16,24,40,.28);width:min(520px,calc(100vw - 32px));max-height:min(78vh,640px);overflow:hidden;background:#fff;color:var(--bi-ink);display:flex;flex-direction:column;}
/* A CLOSED <dialog> must actually disappear.
 *
 * The browser hides one with `dialog:not([open]){display:none}`, but the rule
 * above sets display:flex unconditionally and outranks it, so close() removed
 * the backdrop and the modal state while leaving the panel painted on the
 * page. Choosing a project looked like it did nothing — the dialog stayed put
 * — and every click after that landed on a dead, non-modal dialog and really
 * did nothing. Reported by Gabe against Start Build and Change project; it hit
 * every .bi-modal, the project editor included. */
.bi-modal:not([open]){display:none;}
.bi-modal::backdrop{background:rgba(15,23,42,.5);}
.bi-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--bi-line);flex:0 0 auto;}
.bi-modal-head h2{margin:0;font-size:17px;}
.bi-modal-x{border:none;background:none;font-size:22px;line-height:1;color:var(--bi-muted);cursor:pointer;padding:2px 6px;border-radius:6px;}
.bi-modal-x:hover{background:#f1f4f9;color:var(--bi-ink);}
/* min-height:0 is what actually makes it scroll: without it a flex child
   refuses to shrink below its content, so overflow-y never has anything to
   do and the clipping comes back. */
.bi-modal-body{padding:12px 18px 18px;overflow-y:auto;flex:1 1 auto;min-height:0;}

/* PROJECT PICKER: scroll the LIST, not the whole body.
 *
 * Scrolling the body is right for the editor, which is one long form. It is
 * wrong here, because two of the picker's three parts must not move. With
 * fourteen projects the search box scrolled away exactly while it was being
 * typed into, and "New project" ended up ~550px below the fold — reachable
 * only by scrolling past every project, which is the opposite of what someone
 * who found no match needs. Both were visible with three projects, so the
 * controls disappeared precisely when the list grew long enough to need them.
 * Reported by Gabe.
 *
 * Deliberately keyed on the picker's own id rather than changed on
 * .bi-modal-body, so the editor keeps the behaviour that suits it.
 *
 * No `display` here: #bipp-searchwrap carries the `hidden` attribute below six
 * projects, and setting display on it would defeat that. */
#bipp-modal .bi-modal-body{display:flex;flex-direction:column;overflow:hidden;}
#bipp-modal #bipp-searchwrap,
#bipp-modal #bipp-createwrap{flex:0 0 auto;}
#bipp-modal #bipp-list{flex:1 1 auto;min-height:0;overflow-y:auto;}

/* option rows */
.bi-optlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.bi-opt{width:100%;text-align:left;display:block;background:#fff;border:1px solid var(--bi-line);border-radius:var(--bi-radius-sm);padding:12px 14px;cursor:pointer;font:400 15px/1.3 var(--bi-font);color:var(--bi-ink);transition:border-color .12s ease,background .12s ease;}
.bi-opt:hover{border-color:var(--bi-navy);background:var(--bi-tint);}
.bi-opt:focus-visible{outline:none;border-color:var(--bi-navy);box-shadow:0 0 0 3px rgba(37,64,143,.14);}
.bi-opt[aria-current="true"]{border-color:var(--bi-navy);background:var(--bi-tint);border-left-width:4px;}
.bi-opt-name{font-weight:700;font-size:15px;display:block;}
.bi-opt-loc{color:var(--bi-muted);font-size:13.5px;display:block;margin-top:2px;}
.bi-opt-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bi-navy);display:block;margin-top:5px;}

.bi-muted{color:var(--bi-muted);font-size:13.5px;}

/* Amber "what saving this will affect" note at the top of the project editor.
   Shared, because js/bi-project-editor.js renders it on every page that opens
   the dialog — it used to live in builds.html and the dialog came up unstyled
   anywhere else. */
.bi-scope{font-size:12.5px;color:#9a6b00;background:#fff8e1;border:1px solid #ffe6a1;border-radius:8px;padding:8px 11px;margin:0 0 14px;}

@media (max-width:560px){ .bi-row{flex-direction:column;gap:0;} }