/* P6 (2026-09-30) /durum: big status line, 90-day hairline strip (hover = day + share), short note. No JS.
   Status colours only (never a family): ok = --ok, limited = amber, outage = signal red, unknown / no data = paper-3. */
.dur-ph { --st: var(--ink-3); }
.dur__h { display: flex; align-items: flex-start; gap: .32em; grid-column: 1 / 9; font-size: clamp(34px, 5.4vw, 88px); }
.dur__h[data-st="ok"] { --st: var(--ok); }
.dur__h[data-st="kisitli"] { --st: #B86A00; }
.dur__h[data-st="kesinti"] { --st: var(--signal-strong); }
.dur__h > span { min-width: 0; }
.dur__dot { position: relative; flex: none; width: .3em; height: .3em; margin-top: .34em; background: var(--st); border-radius: var(--r-1); }
.dur__h[data-st="bilinmiyor"] .dur__dot { background: transparent; box-shadow: inset 0 0 0 max(2px, .045em) var(--ink-3); }
.dur__h[data-st="ok"] .dur__dot::after { content: ""; position: absolute; inset: 0; background: inherit; border-radius: inherit; animation: durPulse 2.4s var(--e-out) infinite; }
@keyframes durPulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
html:is(.is-reduced, .is-still, .is-paused) .dur__h .dur__dot::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dur__dot::after { animation: none !important; opacity: 0; } }
.dur__chk { color: var(--ink-3); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; }
html[lang="ja"] .dur__chk, html[lang="ar"] .dur__chk { letter-spacing: 0; text-transform: none; }

.dur { padding-bottom: var(--s-6); }
.dur__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.dur__k { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html[lang="ja"] .dur__k, html[lang="ar"] .dur__k { letter-spacing: 0; }
.dur__up { color: var(--ink-2); font-size: var(--t-sm); }
.dur__up b { color: var(--ink); font-family: var(--f-wide); font-size: var(--t-h3); font-weight: 760; font-stretch: 112%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* the strip: 90 hairline bars; oldest at the start (RTL: right), today at the end */
.dur__bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 44px; }
.dur__b { position: relative; background: var(--paper-3); border-radius: 1px; transition: transform var(--d-1) var(--e-out); transform-origin: 50% 100%; }
.dur__b[data-d="ok"] { background: var(--ok); }
.dur__b[data-d="kisitli"] { background: #B86A00; }
.dur__b[data-d="kesinti"] { background: var(--signal); }
.dur__b:hover { transform: scaleY(1.14); }
/* the label box exists only while hovered: 90 hidden labels would otherwise widen the page (scrollable overflow) */
.dur__b:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); inset-inline-start: 50%; translate: -50% 0;
  z-index: 2; white-space: nowrap; padding: 6px 9px; background: var(--ink); color: var(--paper);
  font: 500 var(--t-mono)/1.3 var(--f-mono); letter-spacing: .02em; border-radius: var(--r-1); pointer-events: none;
}
[dir="rtl"] .dur__b:hover::after { translate: 50% 0; }
/* edge bars: the label opens inwards (never cut by the viewport) */
.dur__b:nth-child(-n+12):hover::after { inset-inline-start: 0; translate: 0 0; }
.dur__b:nth-last-child(-n+12):hover::after { inset-inline-start: auto; inset-inline-end: 0; translate: 0 0; }
.dur__axis { display: flex; justify-content: space-between; margin-top: 10px; color: var(--ink-3); font-size: var(--t-mono); }
.dur__legend { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); margin-top: var(--s-5); color: var(--ink-2); font-size: var(--t-meta); }
.dur__legend li { display: inline-flex; align-items: center; gap: 8px; }
.dur__legend i { width: 10px; height: 10px; background: var(--paper-3); border-radius: 1px; }
.dur__legend [data-d="ok"] i { background: var(--ok); }
.dur__legend [data-d="kisitli"] i { background: #B86A00; }
.dur__legend [data-d="kesinti"] i { background: var(--signal); }
.dur__since { margin-top: var(--s-4); color: var(--ink-3); font-size: var(--t-meta); }

.dur-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5); padding-bottom: var(--s-8); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.dur-note p { max-width: 70ch; }
.dur-note__a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.dur-note__a:hover { text-decoration: underline; }

@media (max-width: 1023.98px) { .dur__h { grid-column: 1 / -1; } }
@media (max-width: 719.98px) {
  .dur__h { font-size: clamp(30px, 9vw, 44px); }
  .dur__bars { gap: 1px; height: 36px; position: relative; }
  /* phones: bars are ~3 px wide, so the label sits centred over the whole strip instead of over the bar */
  .dur__bars .dur__b { position: static; }
  .dur__bars .dur__b:hover::after { inset-inline: 0; margin-inline: auto; width: max-content; max-width: 100%; translate: 0 0; }
  .dur__b:hover { outline: 1px solid var(--ink); outline-offset: 1px; transform: none; }
  .dur { padding-top: var(--s-6); }
}