/* The public platform page (SPEC-052), in the design of the platform mockup
   (roadmap/artifacts/platform-mockup.html): a facet rail beside the results and
   a grid or timeline view of each lens, styled with the site's own values
   (fonts, blues, 4 px corners, the site's card shadow).

   Every rule is scoped under .platform-app so nothing here can restyle the
   site header, navigation or footer. Three mockup class names collide with
   the site's own stylesheets (Bootstrap's .card and .badge, style.css's
   .hero) and carry a pf- prefix here; everything else keeps the mockup's name. */

.platform-app {
  /* The site's design values (style.css, about.css), mapped onto the mockup's
     token names so its layout keeps working (owner, 2026-09-24: align with
     the site's CSS and design) */
  --ink: #013289; --ink-2: #6c757d; --ink-3: #8a94a6;
  --line: #e1ecff; --line-2: #eef3fc; --line-strong: #cfdcf5;
  --bg: #ffffff; --bg-2: #f6f9ff; --bg-3: #ecf3ff; --page: #ffffff;
  --dark: var(--seadev-primary, #1a5fd6);
  --accent: var(--seadev-primary, #1a5fd6); --accent-2: var(--seadev-primary-dark, #013289);
  --prod: #0f8a3c; --prod-bg: rgba(21, 190, 86, 0.1);
  --pilot: #b8540f; --pilot-bg: rgba(238, 108, 32, 0.1);
  --rnd: #6d3fd1; --rnd-bg: rgba(139, 92, 246, 0.1);
  --done: #6c757d; --done-bg: #f6f9ff;
  --proj: #013289; --proj-bg: #ecf3ff;
  --radius: 4px;
  --shadow: 0px 0 30px rgba(1, 41, 112, 0.08);

  font-family: "Open Sans", sans-serif;
  color: #444444;
  background: var(--page);
  line-height: 1.6;
  margin-top: 82px; /* clears the fixed site header, as .breadcrumbs does */
}
.platform-app *, .platform-app *::before, .platform-app *::after { box-sizing: border-box; }
.platform-app a { color: inherit; }
/* the site sets Poppins, a colour and 1.2 line height on every heading */
.platform-app h1, .platform-app h2, .platform-app h3, .platform-app h4, .platform-app h5 {
  font-family: "Poppins", sans-serif; color: #013289; line-height: 1.3;
}
.platform-app [hidden] { display: none !important; }

/* The same container as the site header (Bootstrap container-xl: 1320 px
   from 1400 px, 12 px gutters), so the content lines up under the logo */
.platform-app .wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 12px; }
@media (max-width: 1399px) { .platform-app .wrap { max-width: 1140px; } }
@media (max-width: 1199px) { .platform-app .wrap { max-width: none; } }

/* ---- lens bar: the mockup's app-bar tabs and view switcher, without the
        brand, language and account controls the site header already carries */
.platform-app .pf-bar {
  background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06);
}
.platform-app .pf-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.platform-app .pf-tabs {
  display: flex; align-items: center; gap: 1px; min-width: 0; overflow-x: auto;
  height: 56px; scrollbar-width: none;
}
.platform-app .pf-tabs::-webkit-scrollbar { display: none; }
.platform-app .lens {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0 12px; height: 55px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.platform-app .lens:hover { color: var(--ink); }
.platform-app .lens[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--dark); font-weight: 600; }
.platform-app .lens small { font-weight: 400; opacity: .6; margin-left: 5px; font-size: 12px; }

.platform-app .views { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.platform-app .views .lbl {
  font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; margin-right: 4px;
}
.platform-app .vbtn {
  appearance: none; border: 1px solid var(--line); background: var(--bg); border-radius: 4px;
  padding: 5px 10px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer;
  display: inline-flex; gap: 5px; align-items: center; line-height: 1.4;
}
.platform-app .vbtn:hover { border-color: #cbd5e0; color: var(--ink); }
.platform-app .vbtn[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.platform-app .vbtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 700px) { .platform-app .views .lbl { display: none; } }
@media (max-width: 520px) {
  .platform-app .vbtn span { display: none; }
  .platform-app .vbtn { padding: 5px 8px; }
  .platform-app .lens { padding: 0 8px; font-size: 13px; }
  .platform-app .lens small { margin-left: 3px; }
}

/* ---- hero: title and the figures of the lens you are on */
.platform-app .pf-hero { border-bottom: 1px solid var(--line); padding: 22px 0 18px; background: var(--bg); }
.platform-app .pf-hero h1 { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.2; color: #013289; }
.platform-app .pf-hero .pf-sub { margin: 5px 0 0; font-size: 14px; color: var(--ink-2); }

.platform-app .stats { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.platform-app .statrow { display: flex; gap: 34px; flex-wrap: wrap; }
@media (max-width: 520px) { .platform-app .statrow { gap: 18px 26px; } }
.platform-app .statreach {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-2);
}
.platform-app .statreach b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.platform-app .stat b { display: block; font-size: 24px; font-weight: 600; line-height: 1.1; }
.platform-app .stat span {
  display: block; margin-top: 5px; color: var(--ink-3); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.platform-app .stat em {
  font-style: normal; font-size: 11px; color: var(--ink-2); display: block; margin-top: 3px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* ---- layout: facet rail and results */
.platform-app .layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 32px; padding: 26px 0 30px; align-items: start; }
@media (max-width: 900px) { .platform-app .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

.platform-app aside h3 {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 8px; font-weight: 600;
}
.platform-app .facet { margin-bottom: 22px; }
.platform-app .facet label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2);
  padding: 3px 0; cursor: pointer; margin: 0;
}
.platform-app .facet .txt { flex: 1; min-width: 0; }
.platform-app .facet .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platform-app .facet label:hover { color: var(--ink); }
.platform-app .facet input { margin: 0; accent-color: var(--accent); }
.platform-app .facet .n { flex-shrink: 0; margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.platform-app .facet label.zero { opacity: .38; }
.platform-app .facet label:has(.def) { align-items: flex-start; }
.platform-app .def {
  display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); line-height: 1.35; margin-top: 1px;
}
.platform-app .clearall {
  font-size: 12px; background: none; border: 0; color: var(--accent-2); cursor: pointer;
  padding: 0; text-decoration: underline;
}
.platform-app .facetsec {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  font-weight: 700; margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
.platform-app .facetsec:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.platform-app .facetmore {
  appearance: none; background: none; border: 0; padding: 4px 0 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--accent-2); text-align: left;
}
.platform-app .facetmore:hover { text-decoration: underline; }

.platform-app .resultbar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.platform-app .resultbar .count { font-size: 14px; font-weight: 600; }
.platform-app .resultbar .why { font-size: 12px; color: var(--ink-3); }
.platform-app .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.platform-app .chip {
  font-size: 11px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 3px 9px; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center;
}
.platform-app .chip button { border: 0; background: none; cursor: pointer; color: var(--ink-3); padding: 0; font-size: 13px; line-height: 1; }

/* ---- cards */
.platform-app .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 14px; }
.platform-app .grid--wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
@media (max-width: 520px) {
  .platform-app .grid, .platform-app .grid--wide { grid-template-columns: minmax(0, 1fr); }
}
.platform-app .pf-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: #fff;
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.platform-app .pf-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.platform-app .pf-card .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.platform-app .pf-card h4 { margin: 0; font-size: 16px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.platform-app .pf-card .client { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
/* who delivered it (SPEC-101): quiet outlined names after the industry and year */
.platform-app .pf-by { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.platform-app .pf-by span { font-size: 11px; line-height: 1.5; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.platform-app .pf-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.platform-app .pf-card .foot {
  margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line-2);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

.platform-app .pf-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap; line-height: 1.55; flex-shrink: 0;
}
.platform-app .b-production, .platform-app .b-application { color: var(--prod); background: var(--prod-bg); border: 1px solid #d5e6dc; }
.platform-app .b-pilot, .platform-app .b-studio { color: var(--pilot); background: var(--pilot-bg); border: 1px solid #ecdec2; }
.platform-app .b-rnd { color: var(--rnd); background: var(--rnd-bg); border: 1px solid #ded5ee; }
.platform-app .b-project { color: var(--proj); background: var(--proj-bg); border: 1px solid #d3e2f2; }
.platform-app .b-delivered { color: var(--done); background: var(--done-bg); border: 1px solid var(--line); }

.platform-app .kind {
  font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 3px 9px; background: var(--bg-2); font-weight: 600;
}
.platform-app .svclink { font-size: 11.5px; color: var(--accent-2); text-decoration: none; border-bottom: 1px dotted; }
.platform-app .svclink:hover { color: var(--accent); }
.platform-app .plogo { height: 20px; width: auto; vertical-align: -4px; margin-right: 6px; max-width: 110px; object-fit: contain; }

.platform-app .cflag { font-size: 12px; line-height: 1.5; border-radius: 8px; padding: 8px 10px; border: 1px solid; }
.platform-app .cflag--note { background: var(--bg-2); border-color: var(--line); color: var(--ink-2); }

.platform-app .repolist { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.platform-app .miniline {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); min-width: 0;
}
.platform-app .miniline b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-app .miniline span:not(.pf-badge) { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 520px) { .platform-app .miniline span:not(.pf-badge) { display: none; } }
/* A line's title links to the software's own page (SPEC-083, SPEC-085) */
.platform-app .miniline b a, .platform-app .glabel b a, .platform-app .pf-card h4 a.pf-title { color: inherit; text-decoration: none; }
.platform-app .miniline b a:hover, .platform-app .glabel b a:hover, .platform-app .pf-card h4 a.pf-title:hover { color: var(--accent); text-decoration: underline; }

/* the engagement period drawn on a small track, as on the mockup's client cards */
.platform-app .tl { margin: 4px 0 2px; position: relative; }
.platform-app .tl .years {
  display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.platform-app .tl .track { position: relative; height: 9px; background: var(--bg-3); border-radius: 5px; overflow: hidden; }
.platform-app .tl .span { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 5px; }
.platform-app .tl .span.done { background: #a0aec0; }

/* ---- timeline view */
.platform-app .gwrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto;
}
.platform-app .ghead, .platform-app .grow {
  display: grid; grid-template-columns: var(--gcols, 264px 1fr 104px); align-items: center; gap: 14px; min-width: 760px;
}
.platform-app .ghead { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.platform-app .gaxis { display: grid; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.platform-app .gaxis span { border-left: 1px solid var(--line-2); padding-left: 5px; }
.platform-app .grow { min-height: 40px; border-bottom: 1px solid var(--line-2); }
.platform-app .grow:last-of-type { border-bottom: 0; }
.platform-app .glabel { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; }
.platform-app .glogo { width: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.platform-app .glabel img { height: 17px; max-width: 34px; width: auto; object-fit: contain; }
.platform-app .gtxt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.platform-app .glabel b {
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.platform-app .glabel i {
  font-style: normal; font-size: 10.5px; color: var(--ink-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.platform-app .gtrack { position: relative; height: 14px; background: var(--bg-3); border-radius: 7px; display: block; }
.platform-app .gbar { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.platform-app .t-production, .platform-app .t-application { background: #2f6f4f; }
.platform-app .t-pilot, .platform-app .t-studio { background: #b7791f; }
.platform-app .t-rnd { background: #5b4a86; }
.platform-app .t-project { background: #2c4f7c; }
.platform-app .t-delivered { background: #a0aec0; }
.platform-app .t-offer { background: #191919; }
.platform-app .gnow { position: absolute; top: -3px; width: 2px; height: 20px; background: #e05252; }
.platform-app .glegend {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2);
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); align-items: center;
}
.platform-app .glegend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }

.platform-app .grow--parent { border-bottom: 0; cursor: pointer; border-radius: 6px; }
.platform-app .grow--parent:hover { background: var(--bg-2); }
.platform-app .grow--parent:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.platform-app .gkcount {
  font-size: 10px; color: var(--ink-3); background: var(--bg-3); border-radius: 4px;
  padding: 1px 7px; flex-shrink: 0; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-2); transition: .12s;
}
.platform-app .grow--parent:hover .gkcount,
.platform-app .grow--parent[aria-expanded="true"] .gkcount { background: var(--ink); color: #fff; border-color: var(--ink); }
.platform-app .gkids { border-bottom: 1px solid var(--line-2); }
.platform-app .gkids:last-child { border-bottom: 0; }
.platform-app .grow--child { min-height: 26px; border-bottom: 0; }
.platform-app .grow--child .glogo { justify-content: flex-end; padding-right: 2px; }
.platform-app .grow--child .glabel b { font-size: 11.5px; font-weight: 500; color: var(--ink-2); -webkit-line-clamp: 1; }
.platform-app .grow--child .glabel i { font-size: 10px; }
.platform-app .gtick { width: 10px; height: 1px; background: var(--line-strong); flex-shrink: 0; }
.platform-app .gtrack--thin { height: 8px; border-radius: 4px; background: transparent; }
.platform-app .gtrack--empty { background: transparent; }
.platform-app .gtrack--thin .gbar { border-radius: 4px; opacity: .85; }
.platform-app .grow--child .pf-badge { transform: scale(.88); transform-origin: left center; }
.platform-app .grow .pf-badge { justify-self: start; }

/* ---- empty state and the members panel */
.platform-app .empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 34px; background: #fff;
  text-align: center; color: var(--ink-3); font-size: 14px;
}
.platform-app .empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; font-weight: 600; }
.platform-app .empty a { color: var(--accent-2); }

.platform-app .pf-join {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--dark);
  border-radius: 0 12px 12px 0; padding: 18px 20px; margin: 0 0 60px;
  display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.platform-app .pf-join h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.platform-app .pf-join p { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 760px; }
.platform-app .pf-join .pf-join-txt { flex: 1 1 320px; min-width: 0; }
.platform-app .pf-join a.btn-join {
  display: inline-block; background: var(--dark); color: #fff; border-radius: 4px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.platform-app .pf-join a.btn-join:hover { box-shadow: 0 0 0 3px rgba(25, 25, 25, .14); }

/* Tablet and phone (below 900 px, where the rail stacks above the results):
   the filters fold behind a button, closed by default, so the results come
   first. The desktop rail is unchanged. */
.platform-app .facets-toggle { display: none; }
@media (max-width: 900px) {
  .platform-app .facets-toggle { display: inline-flex; justify-self: start; }
  .platform-app #facets.is-collapsed { display: none; }
}
.platform-app .facets-count:empty { display: none; }

/* Sort control in the result bar (SPEC-052), in the site's form style */
.platform-app .resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.platform-app .sortsel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: "Poppins", sans-serif; font-size: 12px; color: var(--ink-2); }
.platform-app .sortsel select { font: inherit; font-size: 13px; color: #013289; background: #fff;
  border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; cursor: pointer; }
.platform-app .sortsel select:focus { outline: 2px solid rgba(26, 95, 214, 0.25); border-color: var(--seadev-primary, #1a5fd6); }
@media (max-width: 520px) { .platform-app .sortsel { margin-left: 0; width: 100%; } }


/* An application under Subscribe to an application: name, industry, one sentence (SPEC-054) */
.platform-app .miniline--app { flex-wrap: wrap; }
.platform-app .miniline--app .app-text { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* Subscribe link on each application (SPEC-054), the site's primary colour */
.platform-app .miniline--app .app-subscribe { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--seadev-primary, #1a5fd6); text-decoration: none; }
.platform-app .miniline--app .app-subscribe:hover { color: var(--seadev-primary-dark, #013289); text-decoration: underline; }
.platform-app .pf-card .app-text { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.platform-app .pf-card .app-subscribe { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--seadev-primary, #1a5fd6); text-decoration: none; }
.platform-app .pf-card .app-subscribe:hover { color: var(--seadev-primary-dark, #013289); text-decoration: underline; }
/* In a card's footer, Request access is a button at the bottom right, in the header pill's blue (SPEC-095, SPEC-093) */
.platform-app .pf-card .foot .app-subscribe {
  margin-left: auto; padding: 6px 16px; border-radius: 50px; line-height: 1.4; white-space: nowrap;
  background: var(--seadev-primary, #1a5fd6); color: #fff; text-decoration: none;
}
.platform-app .pf-card .foot .app-subscribe:hover { background: #2f6ce0; color: #fff; text-decoration: none; }
.platform-app .pf-card .foot .app-subscribe:focus-visible { outline: 2px solid var(--seadev-primary-dark, #013289); outline-offset: 2px; }

/* Technology lens (SPEC-059): a component badge. Technologies and
   Capabilities have no timeline, so no view switch (SPEC-083: every tab keeps
   its filter rail) */
.platform-app .b-component { color: var(--accent-2); background: var(--bg-3); border: 1px solid var(--line-strong); }
.platform-app.pf-notimeline .views { display: none; }

/* Capabilities lens (SPEC-081): the icon before the title, the items as a short list */
.platform-app .cap-icon { color: var(--accent); margin-right: 8px; font-size: 0.95em; }
.platform-app .cap-items { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.platform-app .cap-items li { margin-bottom: 4px; }

/* The rail's header row and search field (SPEC-083): the field is the rail's
   first item, in the rail's own tokens, with a search icon and a clear button */
.platform-app .facethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.platform-app .facethead h3 { margin: 0; }
.platform-app .pf-search { position: relative; margin-bottom: 22px; }
.platform-app .pf-search .bi-search {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--ink-3); pointer-events: none; line-height: 1;
}
.platform-app .pf-search input {
  width: 100%; appearance: none; -webkit-appearance: none; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  padding: 8px 30px 8px 32px; font: inherit; font-size: 13px; line-height: 1.4; color: var(--ink);
}
.platform-app .pf-search input::placeholder { color: var(--ink-3); opacity: 1; }
.platform-app .pf-search input::-webkit-search-cancel-button,
.platform-app .pf-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.platform-app .pf-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 95, 214, 0.15); }
.platform-app .pf-qclear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 2px 7px; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--ink-3); border-radius: var(--radius);
}
.platform-app .pf-qclear:hover { color: var(--ink); }
.platform-app .pf-qclear:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* A software product's client, and the links between tabs (SPEC-083) */
.platform-app .pf-client { display: flex; align-items: center; font-size: 12.5px; min-width: 0; }
.platform-app .pf-client .plogo { height: 18px; }
.platform-app .pf-clientlink { color: var(--accent-2); text-decoration: none; border-bottom: 1px dotted; font-weight: 600; }
.platform-app .pf-clientlink:hover { color: var(--accent); }
.platform-app .pf-links { font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }
.platform-app .pf-links > span { margin-right: 4px; }
.platform-app .pf-sub h5 {
  font-family: "Open Sans", sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin: 4px 0 6px;
}

/* A shared address's item, outlined for a moment (SPEC-083) */
.platform-app .pf-focus { outline: 3px solid var(--accent); outline-offset: 3px; animation: pf-focus 2.4s ease-out forwards; }
@keyframes pf-focus {
  0%, 60% { outline-color: var(--accent); }
  100% { outline-color: rgba(26, 95, 214, 0); }
}
@media (prefers-reduced-motion: reduce) { .platform-app .pf-focus { animation-duration: 4s; } }

/* An application's feature lines on its cards (SPEC-085) */
.platform-app .miniline--app .app-lines { flex-basis: 100%; margin: 0; font-size: 13px; }
.platform-app .miniline--app .app-text { flex-basis: 100%; }
/* The phone rule that hides the view buttons' labels hid the Filters button's
   label too, leaving "(1)" alone: keep it (SPEC-083) */
@media (max-width: 520px) { .platform-app .facets-toggle span { display: inline; } }
.platform-app .app-avail { margin: 6px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-2); }