/* ==========================================================================
   Lan of Fashion - admin surfaces.

   Sits on top of Bridge, exactly like assets/lanofashion-theme.css. Typography,
   colours and buttons come from the theme; this only adds the few pieces an
   admin screen needs that a marketing site does not - tabs, data tables, forms.

   No new colours. Black, white, grey. No yellow.
   ========================================================================== */

.lof-admin {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.lof-admin h2 {
  margin: 0 0 6px;
}
.lof-admin .lof-sub {
  margin: 0 0 28px;
  color: var(--lof-text);
  font-size: 14px;
  font-weight: 300;
}
/* ---- sign in ------------------------------------------------------------ */

.lof-signin {
  max-width: 380px;
  margin: 0 auto;
  padding: 40px 0 20px;
}
.lof-lbl {
  display: block;
  margin: 18px 0 6px;
  color: var(--lof-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lof-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lof-rule);
  border-radius: 0;
  background: #fff;
  color: var(--lof-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
}
.lof-input:focus {
  border-color: var(--lof-ink);
  outline: none;
}
.lof-note {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid var(--lof-rule);
  font-size: 13px;
  font-weight: 300;
  line-height: 22px;
}
.lof-note.bad {
  border-color: #b00;
  color: #b00;
}
/* ---- signed-in bar ------------------------------------------------------ */

.lof-whoami {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lof-rule);
  font-size: 12px;
  letter-spacing: 1px;
}
/* ---- counters ----------------------------------------------------------- */

.lof-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}
.lof-count {
  padding: 18px;
  border: 1px solid var(--lof-rule);
}
.lof-count b {
  display: block;
  color: var(--lof-ink);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 1px;
}
.lof-count span {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* ---- tabs --------------------------------------------------------------- */

.lof-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--lof-rule);
}
.lof-tabs button {
  padding: 12px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--lof-text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.lof-tabs button[aria-selected="true"] {
  border-bottom-color: var(--lof-ink);
  color: var(--lof-ink);
}
/* ---- tables ------------------------------------------------------------- */

.lof-scroll {
  overflow-x: auto;
}
.lof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lof-table th,
.lof-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--lof-rule);
  text-align: left;
  vertical-align: top;
}
.lof-table th {
  color: var(--lof-text);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lof-table td {
  color: var(--lof-ink);
  font-weight: 300;
}
.lof-table tbody tr:hover {
  background: #fafafa;
}
.lof-table a {
  text-decoration: underline;
}
.lof-muted {
  color: var(--lof-text);
}
.lof-empty {
  padding: 44px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
}
.lof-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.lof-toolbar .lof-input {
  flex: 1;
}
.lof-back {
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .lof-admin { padding: 26px 16px 60px; }
}
/* ---- filters and paging ------------------------------------------------- */

.lof-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.lof-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lof-flbl {
  color: var(--lof-text);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.lof-fsel {
  width: auto;
  min-width: 150px;
  padding: 8px 10px;
  font-size: 13px;
}
.lof-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--lof-rule);
  font-size: 12px;
}
.lof-pagebtns {
  display: flex;
  gap: 18px;
}
.lof-pagebtns a {
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: underline;
  white-space: nowrap;
}
/* ---- image upload fields ------------------------------------------------ */

.lof-imgfield {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.lof-imgfield .lof-input {
  flex: 1;
}
.lof-uplabel {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
.lof-imgprev {
  margin-top: 10px;
}
.lof-imgprev img {
  display: block;
  max-width: 260px;
  max-height: 170px;
  border: 1px solid var(--lof-rule);
  object-fit: cover;
}
/* ---- page builder ------------------------------------------------------- */

.lof-lib {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lof-rule);
}
.lof-libitem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--lof-rule);
  background: #fff;
  color: var(--lof-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.lof-libitem:hover {
  border-color: var(--lof-ink);
}
.lof-libicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--lof-rule);
  font-size: 12px;
}
.lof-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lof-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lof-rule);
  background: #fff;
  font-size: 13px;
}
.lof-block.is-dragging {
  opacity: .4;
  border-color: var(--lof-ink);
}
.lof-drag {
  cursor: grab;
  color: var(--lof-text);
  font-size: 16px;
  line-height: 1;
  user-select: none;
}
.lof-btype {
  min-width: 110px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
}
.lof-bsum {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lof-bacts {
  display: flex;
  gap: 14px;
  white-space: nowrap;
}
.lof-bacts a {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
}
/* Rows must not start a text selection when the drag begins. */
.lof-block {
  user-select: none;
  -webkit-user-select: none;
}
.lof-move {
  display: inline-flex;
  gap: 2px;
}
.lof-move button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--lof-rule);
  background: #fff;
  color: var(--lof-ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.lof-move button:hover {
  border-color: var(--lof-ink);
}
.lof-styles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--lof-rule);
}
.lof-stylefield { display: block; }
.lof-stylefield .lof-lbl { margin-top: 0; }
.lof-stylefield .lof-input { width: auto; min-width: 130px; padding: 9px 11px; font-size: 13px; }
.lof-mrow { display: grid; grid-template-columns: minmax(300px, 46%) 1fr; gap: 26px; align-items: start; }
.lof-pill { padding: 3px 9px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #ddd; }
.lof-pill.is-accepted { border-color: #1c7a43; color: #1c7a43; }
.lof-pill.is-declined { color: #999; }
.lof-pill.is-shortlisted { border-color: #b8860b; color: #b8860b; }
/* Headshot column. Small enough not to dominate the row, large enough to tell
   people apart - which is the entire reason a casting list has faces in it. */
.lof-thumbcell { width: 58px; padding-right: 0 !important; }
.lof-thumb { display: block; width: 46px; height: 62px; object-fit: cover; background: #eee; }
.lof-thumb.is-none { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 6px, #e6e6e6 6px, #e6e6e6 12px); }
/* List / grid toggle. Grid is for judging faces, list is for comparing numbers -
   casting needs both, so the choice is remembered per browser. */
.lof-viewtoggle { display: flex; gap: 0; margin: 0 0 16px; }
.lof-viewtoggle button {
  padding: 8px 16px; border: 1px solid #ddd; background: #fff; cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}
.lof-viewtoggle button + button { border-left: 0; }
.lof-viewtoggle button[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.lof-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.lof-mcard { display: block; border: 1px solid #eee; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .18s ease; }
.lof-mcard:hover { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.lof-mcard-shot { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #f0f0f0; }
.lof-mcard-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lof-mcard-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lof-mcard-body { padding: 12px 13px; }
.lof-mcard-body strong { display: block; font-size: 15px; font-weight: 400; }
.lof-mcard-body span { display: block; margin-top: 3px; color: #888; font-size: 12px; }
/* Event cards: the poster/hero image is the fastest way to tell events apart,
   while the compact footer keeps commerce readiness visible. */
.lof-eventbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.lof-eventbar .lof-viewtoggle { margin-bottom: 0; }
.lof-egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 16px; }
.lof-ecard { display: block; border: 1px solid #eee; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .18s ease; }
.lof-ecard:hover { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.lof-ecard-shot { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #f0f0f0; }
.lof-ecard-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lof-ecard-shot span, .lof-ecard-shot.is-empty:before {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #aaa; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.lof-ecard-shot.is-empty:before { content: "No image"; }
.lof-ecard-body { padding: 13px 14px 14px; }
.lof-ecard-kicker, .lof-ecard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lof-ecard-kicker { margin-bottom: 9px; color: #888; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lof-ecard-body strong { display: block; min-height: 40px; font-size: 16px; font-weight: 400; line-height: 20px; }
.lof-ecard-body > span { display: block; margin-top: 5px; color: #888; font-size: 12px; }
.lof-ecard-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid #eee; font-size: 12px; }
.lof-ecard-foot .is-missing { color: #b00; }
.lof-ethumbcell { width: 76px; padding-right: 0 !important; }
.lof-ethumb { display: block; width: 64px; height: 44px; object-fit: cover; background: #eee; }
.lof-ethumb.is-none { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 6px, #e6e6e6 6px, #e6e6e6 12px); }
@media only screen and (max-width: 680px) {
  .lof-eventbar { align-items: stretch; flex-direction: column; }
  .lof-eventbar .qbutton { align-self: flex-start; }
  .lof-egrid { grid-template-columns: 1fr; }
}
/* Registration review is image-led for designers/media and detail-led after
   selection; cards open the full application so the list is only the entry. */
.lof-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.lof-rcard { display: block; border: 1px solid #eee; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .18s ease; }
.lof-rcard:hover { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.lof-rcard-shot { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #f0f0f0; }
.lof-rcard-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lof-rcard-shot span, .lof-rcard-shot.is-empty:before {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #aaa; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.lof-rcard-shot.is-empty:before { content: "No image"; }
.lof-rcard-shot em {
  position: absolute; right: 8px; bottom: 8px; padding: 4px 7px; background: rgba(0,0,0,.72);
  color: #fff; font-size: 10px; font-style: normal; letter-spacing: 1px; text-transform: uppercase;
}
.lof-rcard-body { padding: 13px 14px 14px; }
.lof-rcard-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 9px; color: #888; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lof-rcard-body strong { display: block; min-height: 40px; font-size: 16px; font-weight: 400; line-height: 20px; }
.lof-rcard-body > span { display: block; margin-top: 5px; color: #888; font-size: 12px; }
.lof-rcard-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid #eee; color: #777; font-size: 12px; overflow-wrap: anywhere; }
.lof-rthumbcell { width: 76px; padding-right: 0 !important; }
.lof-rthumb { display: block; width: 58px; height: 72px; object-fit: cover; background: #eee; }
.lof-rthumb.is-none { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 6px, #e6e6e6 6px, #e6e6e6 12px); }
@media only screen and (max-width: 680px) {
  .lof-rgrid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   Shared model-profile styles.

   assets/lanofashion-profile.js draws the same card in the dashboard as in the
   model portal, so the dashboard needs the same rules. Copied rather than
   linked because the portal's stylesheet also carries the public site's theme,
   and the dashboard should not inherit that.
   -------------------------------------------------------------------------- */

.lof-pf { display: grid; grid-template-columns: minmax(320px, 44%) 1fr; gap: 0;
  border: 1px solid var(--lof-rule); background: #fff; overflow: hidden; }
.lof-pf-shot { background: #ececec; }
.lof-pf-shot img { width: 100%; height: 100%; min-height: 460px;
  object-fit: cover; display: block; }
.lof-pf-noshot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 320px; color: var(--lof-muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.lof-pf-body { padding: 30px; }
.lof-pf-body h2 { margin: 0 0 4px; font-size: 26px; font-weight: 300; letter-spacing: 0; text-transform: none; }
.lof-pf-where { margin: 0 0 20px; color: var(--lof-muted); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.lof-pf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 20px; margin: 0 0 22px; }
.lof-pf-facts dt { color: var(--lof-muted); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; overflow-wrap: normal; word-break: keep-all;
  white-space: nowrap; padding-right: 8px; }
.lof-pf-facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 300; }
.lof-pf-exp { margin: 0 0 16px; font-size: 14px; font-weight: 300; line-height: 23px; }
.lof-pf-links { margin: 0 0 20px; font-size: 13px; }
.lof-pf-links a { color: var(--lof-ink); text-decoration: underline; }
.lof-pf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--lof-rule); }
@media only screen and (max-width: 680px) {
  .lof-pf { grid-template-columns: 1fr; }
  .lof-pf-shot img, .lof-pf-noshot { min-height: 260px; }
  .lof-pf-body { padding: 22px; }
}
/* Portfolio inside the profile card, plus an embedded showreel. */
.lof-pf-folio { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; align-items: center; }
.lof-pf-folio a, .lof-pf-folio button { display: block; width: 68px; height: auto;
  aspect-ratio: 2/3; padding: 0; border: 0; overflow: hidden; background: #ececec;
  cursor: zoom-in; }
.lof-pf-folio img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.lof-pf-folio a:hover img, .lof-pf-folio button:hover img { opacity: .8; }
.lof-pf-folio a:hover img { opacity: .8; }
.lof-pf-more { color: var(--lof-muted); font-size: 12px; letter-spacing: 1px; }
.lof-pf-video { position: relative; margin: 0 0 20px; padding-top: 56.25%; background: #000; }
.lof-pf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The photo manager reads as a gallery rather than a row of boxes. */
.lof-mp-strip { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
/* Photos as a gallery, matching the runway galleries elsewhere on the site.
   Management controls appear only while managing - a portfolio should look
   like a portfolio, not like a form that happens to contain pictures. */
.lof-mp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 4px; }
.lof-mp-shot { position: relative; margin: 0; aspect-ratio: 2/3; overflow: hidden; background: #ececec; cursor: zoom-in; }
.lof-mp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.lof-mp-shot:hover img { transform: scale(1.03); }
.lof-mp-shot.is-main { outline: 2px solid var(--lof-ink); outline-offset: -2px; }
.lof-mp-shot figcaption { position: absolute; left: 0; bottom: 0; padding: 4px 9px; background: var(--lof-ink); color: #fff; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.lof-mp-gallery.is-managing .lof-mp-shot { cursor: default; }
.lof-mp-manage { margin-bottom: 18px; }
/* Lightbox */
.lof-lb { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0,0,0,.9); }
.lof-lb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lof-lb-x { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lof-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lof-lb-nav.is-prev { left: 16px; }
.lof-lb-nav.is-next { right: 16px; }
.lof-lb-nav:hover, .lof-lb-x:hover { background: rgba(255,255,255,.25); }
@media only screen and (max-width: 680px) {
  .lof-mp-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .lof-lb { padding: 16px; }
  .lof-lb-nav { width: 44px; height: 44px; }
}
/* Link preview. A thumbnail where the URL gives one away (video), otherwise the
   site's own favicon and hostname - so "Website" never hides where it goes. */
.lof-ext { position: relative; display: inline-block; }
.lof-prev {
  position: absolute; z-index: 9999; width: 300px;
  background: #fff; border: 1px solid var(--lof-rule);
  box-shadow: 0 6px 26px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.lof-prev.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.lof-prev-shot { aspect-ratio: 16/9; background: #111; overflow: hidden; }
.lof-prev-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lof-prev-text { padding: 10px 12px; }
.lof-prev-host { display: flex; align-items: center; gap: 7px; }
.lof-prev-icon { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.lof-prev-host strong { font-size: 13px; font-weight: 400; letter-spacing: .2px; }
.lof-prev-url {
  margin-top: 3px; color: var(--lof-muted); font-size: 11px; line-height: 15px;
  overflow-wrap: anywhere;
}
.lof-prev-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; }
.lof-prev-icon svg { width: 16px; height: 16px; fill: var(--lof-ink); }
/* Contact details sit under the location - the email is how casting replies. */
.lof-pf-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 20px; font-size: 14px; }
.lof-pf-contact a { color: var(--lof-ink); text-decoration: underline; font-weight: 300; }
.lof-pf-contact:empty { display: none; }
.lof-prev-warn {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lof-rule);
  color: #a3341f; font-size: 10px; line-height: 14px; letter-spacing: .2px;
}
.lof-pf-guardian { margin: 0 0 16px; padding: 9px 12px; background: rgba(163,52,31,.08);
  color: #a3341f; font-size: 12px; }
.lof-pf-folio button { padding: 0; border: 0; background: none; cursor: zoom-in; }
.lof-age-minor { color: #a3341f; }

.lof-pf-guardian { display: block; margin: 0 0 18px; padding: 12px 14px;
  background: rgba(163,52,31,.07); border-left: 3px solid #a3341f; }
.lof-pf-guardian strong { display: block; color: #a3341f; font-size: 13px; font-weight: 400; }
.lof-pf-guardian span { display: block; margin-top: 4px; font-size: 13px; font-weight: 300; }
.lof-pf-guardian a { color: var(--lof-ink, #111); text-decoration: underline; }
.lof-pf-consent { color: #777; font-size: 11px !important; }
.lof-regactions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.lof-regactions button { padding: 9px 16px; border: 1px solid #ddd; background: #fff;
  font: inherit; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.lof-regactions button[disabled] { background: #111; border-color: #111; color: #fff; cursor: default; }
.lof-pill.is-published { border-color: #1c7a43; color: #1c7a43; }
.lof-pill.is-draft { color: #b8860b; border-color: #b8860b; }
.lof-pill.is-applications { color: #6b4d9b; border-color: #6b4d9b; }
.lof-pill.is-retired { color: #999; }
.lof-note { padding: 12px 14px; background: rgba(0,0,0,.05); font-size: 13px; line-height: 20px; }
.lof-note.bad { background: rgba(163,52,31,.08); color: #a3341f; }
.lof-contract-file { margin: 18px 0; padding: 14px 16px; border: 1px solid #eee; }
.lof-contract-file h4 { margin: 0 0 8px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #888; }
.lof-contract-file p { margin: 0 0 8px; font-size: 13px; }