/* Project 14 | Grafana OSS + Microsoft Entra Single Sign-On
   Deliberately isolated visual layer; original 19 proof PNGs and technical
   narrative are retained in the Jekyll project record. No sticky evidence
   card or section overlay, no remote dependencies. */
.grafana-case-study .case-study-shell[data-case-study-number="14"] {
  --p14-ice: #99e8ea;
  --p14-lilac: #bf79bf;
  --p14-edge: rgba(107, 170, 192, .43);
  --p14-quiet: #bfd3e1;
  --p14-glass: linear-gradient(137deg, #1a2d44 0%, #122035 85%);
}
.grafana-case-study .case-study-shell[data-case-study-number="14"] .case-study-document {
  min-width: 0;
}
.grafana-case-study .project14-hero {
  position: relative;
  margin: 16px 0 26px;
  padding: clamp(30px, 4.5vw, 62px);
  border: 1px solid rgba(121, 190, 211, .45);
  border-radius: 25px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 91% 15%, rgba(179, 74, 155, .20), transparent 58%),
    radial-gradient(ellipse at 65% 90%, rgba(75, 197, 201, .12), transparent 56%),
    linear-gradient(132deg, #1a2f45 0%, #111c32 69%, #11192a 100%);
  box-shadow: 0 22px 62px rgba(0, 4, 17, .3);
}
.grafana-case-study .project14-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(30px, 4.5vw, 62px);
  width: 108px;
  height: 3px;
  background: linear-gradient(90deg, #67d4d9, #c37aaf);
}
.grafana-case-study .project14-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(230px, .68fr);
  align-items: center;
  gap: clamp(25px, 4vw, 63px);
}
.grafana-case-study .project14-hero-copy { min-width: 0; }
.grafana-case-study .project14-hero .eyebrow {
  color: #a4e3e7;
  font-size: 11px;
  letter-spacing: .13em;
  margin: 0 0 13px;
}
.grafana-case-study .project14-kicker {
  color: #e2b8db;
  font: 700 11px/1.6 ui-monospace, Consolas, monospace;
  letter-spacing: .115em;
  margin: 0 0 18px;
}
.grafana-case-study .project14-hero h1 {
  color: #fafcff;
  font-size: clamp(2.75rem, 4.35vw, 4.85rem);
  line-height: 1.065;
  max-width: 17ch;
  letter-spacing: -.055em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.grafana-case-study .project14-hero h1 span {
  background: linear-gradient(108deg, #b7f7ef, #7fd7dc 52%, #c0a2dd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grafana-case-study .project14-hero-copy > p:not(.eyebrow):not(.project14-kicker) {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.8;
  max-width: 58ch;
  color: #cddde7;
}
.grafana-case-study .project14-hero-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 21px;
}
.grafana-case-study .project14-hero-traits span {
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  color: #c5f2f2;
  border: 1px solid rgba(140, 222, 221, .43);
  border-radius: 99px;
  padding: 7px 11px;
  background: rgba(32, 88, 103, .23);
}
.grafana-case-study .project14-hero-graphic {
  position: relative;
  width: min(100%, 315px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.grafana-case-study .project14-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.grafana-case-study .project14-orbit--outer {
  inset: 3%;
  border: 1px dashed rgba(118, 223, 220, .34);
  box-shadow: 0 0 0 14px rgba(96, 185, 190, .035), 0 0 0 30px rgba(192, 103, 179, .025);
}
.grafana-case-study .project14-orbit--inner {
  inset: 17%;
  border: 1px solid rgba(113, 209, 219, .45);
  background: radial-gradient(circle, rgba(48, 118, 135, .18), transparent 71%);
}
.grafana-case-study .project14-orbit-core {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 47%;
  aspect-ratio: 1;
  border-radius: 29px;
  text-align: center;
  border: 1px solid rgba(169, 235, 239, .6);
  background: linear-gradient(140deg, #285c72, #14364a 80%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3), inset 0 0 32px rgba(90, 215, 220, .1);
}
.grafana-case-study .project14-symbol {
  display: block;
  color: #f7fcff;
  font-size: clamp(31px, 3.6vw, 49px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.065em;
}
.grafana-case-study .project14-symbol span { color: #a8e5e3; font-size: .57em; padding-inline: 2px; }
.grafana-case-study .project14-orbit-core small {
  color: #b8e3e8;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 650;
}
.grafana-case-study .project14-orbit-tag {
  position: absolute;
  padding: 8px 11px;
  border: 1px solid #527c90;
  border-radius: 9px;
  background: #15283c;
  color: #bde9ef;
  font: 700 11px/1.4 ui-monospace, Consolas, monospace;
  letter-spacing: .07em;
}
.grafana-case-study .project14-orbit-tag--top { top: 3%; left: 14%; }
.grafana-case-study .project14-orbit-tag--left { bottom: 21%; left: 1%; }
.grafana-case-study .project14-orbit-tag--right { top: 36%; right: -4%; }
.grafana-case-study .project14-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-top: 26px;
  margin-top: 34px;
  border-top: 1px solid rgba(149, 205, 217, .23);
}
.grafana-case-study .project14-hero-metrics > div {
  padding: 3px clamp(12px, 2vw, 25px);
  border-left: 1px solid rgba(119, 176, 192, .28);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.grafana-case-study .project14-hero-metrics > div:first-child { padding-left: 0; border-left: 0; }
.grafana-case-study .project14-hero-metrics strong {
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.12;
  color: #a9eff1;
  letter-spacing: -.04em;
}
.grafana-case-study .project14-hero-metrics > div:last-child strong {
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -.025em;
}
.grafana-case-study .project14-hero-metrics span {
  font-size: 12px;
  line-height: 1.55;
  color: #bfcedb;
}
.grafana-case-study .project14-section-nav {
  position: static;
  top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(34px, 5vw, 68px);
  padding: 12px 14px;
  border: 1px solid rgba(101, 171, 196, .39);
  border-radius: 14px;
  background: rgba(20, 38, 57, .85);
}
.grafana-case-study .project14-section-nav a {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(108, 183, 200, .2);
  border-radius: 9px;
  color: #d1e6ec;
  font-size: 13px;
  font-weight: 700;
}
.grafana-case-study .project14-section-nav a:hover {
  color: #fff;
  background: rgba(63, 138, 155, .26);
  border-color: #8ddce1;
}
.grafana-case-study .project14-section { padding-block: clamp(36px, 4vw, 68px); }
.grafana-case-study .project14-section-index {
  color: #96e1e7;
  font: 700 11px/1.5 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.grafana-case-study .project14-section > h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.047em;
  margin: 0 0 19px;
}
.grafana-case-study .project14-section > p:not(.project14-section-index) {
  color: #c9dbe5;
  font-size: 16.5px;
  line-height: 1.85;
  max-width: 84ch;
}
.grafana-case-study .project14-section .tags { margin: 20px 0 27px; }
.grafana-case-study .project14-section .tag {
  font-size: 11px;
  color: #d4edf0;
  background: rgba(28, 63, 80, .55);
  border-color: #4e7891;
  padding: 6px 10px;
  border-radius: 8px;
}
.grafana-case-study .project14-architecture-flow {
  padding: clamp(23px, 3.7vw, 39px);
  margin-top: 25px;
  border: 1px solid var(--p14-edge);
  border-radius: 20px;
  background: linear-gradient(135deg, #1b3047, #101c31 85%);
  box-shadow: 0 16px 48px rgba(0, 5, 16, .19);
}
.grafana-case-study .project14-flow-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-bottom: 21px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(129, 177, 193, .22);
}
.grafana-case-study .project14-flow-head .project14-section-index { margin: 0; }
.grafana-case-study .project14-flow-head p:last-child { margin: 0; color: #c3d7e3; font-size: 13px; }
.grafana-case-study .project14-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.grafana-case-study .project14-flow-step {
  position: relative;
  min-width: 0;
  padding: clamp(19px, 2vw, 27px);
  border: 1px solid rgba(101, 164, 188, .44);
  border-radius: 14px;
  background: rgba(15, 33, 53, .86);
}
.grafana-case-study .project14-flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  right: -19px;
  top: 45%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #5d9dab;
  border-radius: 100%;
  background: #214358;
  color: #b3e7e9;
  font: 700 14px/1 ui-monospace, monospace;
}
.grafana-case-study .project14-flow-step-id {
  display: block;
  margin-bottom: 12px;
  color: #9ed9e2;
  font: 700 10px/1.6 ui-monospace, Consolas, monospace;
  letter-spacing: .065em;
}
.grafana-case-study .project14-flow-step > strong {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 11px;
  color: #f5fbff;
  letter-spacing: -.027em;
}
.grafana-case-study .project14-flow-step > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: #c4d7e4;
}
.grafana-case-study .project14-flow-footer {
  font-size: 12px;
  line-height: 1.6;
  color: #a1cddd;
  margin: 22px 0 0;
}
.grafana-case-study .project14-implementation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 19px;
  row-gap: 18px;
}
.grafana-case-study .project14-implementation > .project14-section-index,
.grafana-case-study .project14-implementation > h2,
.grafana-case-study .project14-implementation > p.evidence-summary {
  grid-column: 1 / -1;
}
.grafana-case-study .project14-implementation > p.evidence-summary {
  padding: 23px 27px;
  margin: 0;
  border-left: 3px solid #bb65ae;
  border-radius: 0 13px 13px 0;
  background: rgba(28, 46, 68, .87);
  font-size: 16px;
}
.grafana-case-study .project14-implementation > p:not(.project14-section-index):not(.evidence-summary) {
  min-width: 0;
  margin: 0;
  padding: clamp(21px, 2.5vw, 30px);
  border: 1px solid var(--p14-edge);
  border-radius: 15px;
  background: var(--p14-glass);
  color: #cfdee8;
  font-size: 15px;
  line-height: 1.83;
}
.grafana-case-study .project14-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
  margin-top: 22px;
}
.grafana-case-study .project14-results > .panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(25px, 3vw, 36px);
  border: 1px solid var(--p14-edge);
  border-radius: 19px;
  background: var(--p14-glass);
  box-shadow: 0 16px 44px rgba(0, 4, 15, .18);
}
.grafana-case-study .project14-results > .panel:first-child {
  grid-column: 1 / -1;
  padding: clamp(28px, 3.5vw, 43px);
  border-color: rgba(139, 211, 209, .5);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(174, 87, 169, .14), transparent 52%),
    linear-gradient(130deg, #1d3847, #15253a 85%);
}
.grafana-case-study .project14-results > .panel h3 {
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-bottom: 13px;
}
.grafana-case-study .project14-results > .panel p {
  color: #d0dfe9;
  font-size: 15.5px;
  line-height: 1.82;
}
.grafana-case-study .project14-evidence {
  padding-top: clamp(40px, 5vw, 75px);
}
.grafana-case-study .project14-evidence-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 27px 0 38px;
}
.grafana-case-study .project14-evidence-index a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid #476b82;
  border-radius: 11px;
  color: #dbf3f4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  background: #173044;
  text-decoration: none;
}
.grafana-case-study .project14-evidence-index a:hover {
  border-color: #94dfe0;
  color: white;
  background: #21485c;
}
.grafana-case-study .project14-evidence-index a span {
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  width: 27px;
  aspect-ratio: 1;
  border: 1px solid #6babb6;
  border-radius: 8px;
  color: #a5eeee;
  font: 800 12px/1 ui-monospace, Consolas, monospace;
}
.grafana-case-study .project14-evidence-chapter {
  scroll-margin-top: 104px;
  margin: 38px 0 0;
  padding-top: clamp(27px, 3.4vw, 43px);
  border-top: 1px solid rgba(127, 181, 198, .27);
}
.grafana-case-study .project14-evidence-chapter > h3 {
  color: #effaff;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  line-height: 1.17;
  letter-spacing: -.038em;
  text-transform: none;
  margin: 0 0 23px;
  padding: 0 0 17px;
  border-bottom: 1px solid rgba(122, 178, 198, .24);
}
.grafana-case-study .project14-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(17px, 2vw, 25px);
  align-items: stretch;
}
.grafana-case-study .project14-gallery > .panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding: clamp(23px, 2.6vw, 33px);
  border: 1px solid var(--p14-edge);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(104, 181, 194, .09), transparent 58%),
    linear-gradient(148deg, #1b3045, #101e32 80%);
  box-shadow: 0 15px 40px rgba(0, 4, 15, .24);
  transition: border-color .2s ease;
}
.grafana-case-study .project14-gallery > .panel:hover { border-color: #72cbd3; transform: none; }
.grafana-case-study .project14-gallery .number {
  color: #9fe9e9;
  letter-spacing: .11em;
  margin: 0;
  font: 700 11px/1.6 ui-monospace, Consolas, monospace;
}
.grafana-case-study .project14-gallery h4 {
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: #f4faff;
  margin: 0;
}
.grafana-case-study .project14-gallery .panel > p:not(.number):not(.note) {
  font-size: 15px;
  line-height: 1.79;
  color: #cadce7;
  margin: 0;
}
.grafana-case-study .project14-gallery .panel > a[aria-label] {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid rgba(126, 176, 193, .34);
  border-radius: 12px;
  margin: 5px 0 0;
  padding: 10px;
  background: #0b1524;
  overflow: hidden;
}
.grafana-case-study .project14-gallery .panel > a[aria-label]:focus-visible {
  outline: 3px solid #a9f3f1;
  outline-offset: 4px;
}
.grafana-case-study .project14-gallery .evidence-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 410px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: #0a1422;
  object-fit: contain;
  object-position: center;
}
.grafana-case-study .project14-gallery .panel > .note {
  font-size: 14px;
  line-height: 1.75;
  color: #c3d9e5;
  margin: 0;
}
.grafana-case-study .project14-gallery .panel > .text-link {
  margin-top: auto;
  display: block;
  min-height: 48px;
  padding: 14px;
  color: #c9f3f4;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
  text-decoration: none;
  border: 1px solid #508ca1;
  border-radius: 10px;
  background: rgba(39, 89, 107, .33);
  overflow-wrap: anywhere;
}
.grafana-case-study .project14-gallery .panel > .text-link:hover {
  border-color: #95e8e9;
  background: rgba(45, 109, 123, .42);
  color: white;
}
.grafana-case-study .project14-gallery .evidence-filename {
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
  color: #a2b9c8;
  overflow-wrap: anywhere;
}
/* A three-card evidence chapter ends in an intentional, horizontally
   featured proof card. The screenshot remains an unmodified source link. */
@media (min-width: 901px) {
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    grid-template-areas:
      "number image"
      "title image"
      "observed image"
      "note image"
      "link image"
      "file image";
    gap: 9px clamp(24px, 4vw, 52px);
    align-items: start;
    padding: clamp(29px, 3.4vw, 42px);
    background:
      radial-gradient(ellipse at 92% 0%, rgba(184, 87, 159, .13), transparent 59%),
      linear-gradient(136deg, #1c3449, #151f35 90%);
  }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > .number { grid-area: number; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > h4 { grid-area: title; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > p:not(.note):not(.number) { grid-area: observed; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > a[aria-label] { grid-area: image; align-self: stretch; margin: 0; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > .note { grid-area: note; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > .text-link { grid-area: link; margin-top: 4px; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) > .evidence-filename { grid-area: file; }
  .grafana-case-study .project14-gallery > .panel:last-child:nth-child(odd) .evidence-image { max-height: 460px; }
}
.grafana-case-study .project14-evidence > .scope {
  margin-top: 34px;
  padding: clamp(22px, 3vw, 33px);
  border-color: rgba(122, 169, 191, .37);
  border-left: 3px solid #b75ea6;
  border-radius: 0 14px 14px 0;
  background: #1a2c41;
}
.grafana-case-study .project14-limits {
  padding: clamp(27px, 3.8vw, 45px);
  border: 1px solid rgba(132, 178, 196, .36);
  border-left: 4px solid #b44ca5;
  border-radius: 0 19px 19px 0;
  background: linear-gradient(135deg, #192c42, #131f33);
  margin: clamp(40px, 5vw, 72px) 0;
}
.grafana-case-study .project14-limits h2 { font-size: clamp(1.7rem, 2.5vw, 2.25rem); margin-bottom: 13px; }
.grafana-case-study .project14-limits p { font-size: 15.5px; line-height: 1.87; color: #cedfe8; }
@media (max-width: 1050px) {
  .grafana-case-study .project14-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr); }
  .grafana-case-study .project14-hero h1 { font-size: clamp(2.65rem, 4.2vw, 3.75rem); }
  .grafana-case-study .project14-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grafana-case-study .project14-flow-step::after { display: none !important; }
  .grafana-case-study .project14-evidence-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grafana-case-study .project14-gallery { grid-template-columns: 1fr; }
  .grafana-case-study .project14-gallery > .panel { grid-column: auto; }
  .grafana-case-study .project14-gallery .evidence-image { max-height: 465px; }
  .grafana-case-study .project14-implementation { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .grafana-case-study .project14-hero { padding: 33px 28px; }
  .grafana-case-study .project14-hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .grafana-case-study .project14-hero h1 { font-size: clamp(2.65rem, 7.1vw, 4rem); }
  .grafana-case-study .project14-hero-graphic { width: min(100%, 248px); }
  .grafana-case-study .project14-section-nav { margin-bottom: 22px; }
  .grafana-case-study .project14-evidence-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grafana-case-study .project14-results { grid-template-columns: 1fr; }
  .grafana-case-study .project14-results > .panel:first-child { grid-column: auto; }
}
@media (max-width: 520px) {
  .grafana-case-study .project14-hero { padding: 28px 21px; border-radius: 18px; }
  .grafana-case-study .project14-hero::before { left: 21px; }
  .grafana-case-study .project14-hero h1 { font-size: clamp(2.2rem, 9vw, 3.25rem); }
  .grafana-case-study .project14-kicker { font-size: 10px; }
  .grafana-case-study .project14-hero-metrics { grid-template-columns: 1fr; gap: 12px; }
  .grafana-case-study .project14-hero-metrics > div {
    display: flex;
    flex-direction: row;
    gap: 17px;
    align-items: baseline;
    border-left: 0;
    border-bottom: 1px solid rgba(119, 176, 192, .25);
    padding: 0 0 12px;
  }
  .grafana-case-study .project14-hero-metrics > div:last-child { border-bottom: 0; }
  .grafana-case-study .project14-hero-metrics strong { min-width: 68px; }
  .grafana-case-study .project14-flow-grid { grid-template-columns: 1fr; }
  .grafana-case-study .project14-evidence-index { grid-template-columns: 1fr; }
  .grafana-case-study .project14-section-nav a { flex: 1 1 100%; text-align: center; justify-content: center; }
  .grafana-case-study .project14-gallery > .panel { padding: 23px 21px; }
  .grafana-case-study .project14-gallery h4 { font-size: 1.48rem; }
  .grafana-case-study .project14-flow-step { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .grafana-case-study .project14-gallery > .panel { transition: none; }
}