/* Small additions on top of Keystone's design system — no color/token changes,
   just a couple of layout helpers for content shapes Qartaj's pages need. */

.qt-timeline{position:relative;}
.qt-timeline-item{display:grid;grid-template-columns:90px 24px 1fr;gap:0 24px;padding-bottom:40px;}
.qt-timeline-item:last-child{padding-bottom:0;}
.qt-timeline-year{font-weight:800;font-size:1.1rem;color:#dc2626;padding-top:2px;}
.qt-timeline-dot-col{display:flex;flex-direction:column;align-items:center;}
.qt-timeline-dot{width:14px;height:14px;border-radius:50%;background:#dc2626;flex:none;margin-top:6px;}
.qt-timeline-line{flex:1;width:2px;background:#e5e7eb;margin-top:4px;}

.qt-form label{display:block;font-size:0.85rem;font-weight:600;color:#374151;margin-bottom:6px;}
.qt-form input,.qt-form textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e5e7eb;
  font-family:inherit;font-size:0.95rem;margin-bottom:18px;background:#fafafa;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.qt-form input:focus,.qt-form textarea:focus{
  outline:none;border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,0.12);background:#fff;
}

.qt-chip{
  padding:8px 16px;border-radius:999px;font-size:0.82rem;font-weight:600;
  border:1px solid #e5e7eb;color:#4b5563;background:#fff;cursor:pointer;
  transition:all .15s ease;
}
.qt-chip.is-active,.qt-chip:hover{background:#dc2626;border-color:#dc2626;color:#fff;}

/* ===========================================================
   Tailwind utility polyfills — Keystone's tailwind.css is a
   precompiled, static file containing only the exact classes its
   original pages used. These are additional utility classes this
   rebuild needs that weren't already in that file.
=========================================================== */
.border-red-900\/40{border-color:rgba(127,29,29,.4)}
.gap-14{gap:3.5rem}
.h-44{height:11rem}
.h-52{height:13rem}
.h-56{height:14rem}
.pb-5{padding-bottom:1.25rem}
.space-x-8>:not([hidden])~:not([hidden]){margin-left:2rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.text-white\/70{color:rgba(255,255,255,.7)}
.min-h-\[50vh\]{min-height:50vh}
.min-h-\[55vh\]{min-height:55vh}
.min-h-\[60vh\]{min-height:60vh}
.min-h-\[70vh\]{min-height:70vh}
.shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.02\)\]{box-shadow:0 8px 30px rgba(0,0,0,.02)}
.shadow-\[0_0_6px_2px_rgba\(255\,255\,255\,0\.6\)\]{box-shadow:0 0 6px 2px rgba(255,255,255,.6)}

.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(220,38,38,.3)}
.focus\:border-red-500:focus{border-color:#ef4444}
.focus\:ring-red-500\/30:focus{box-shadow:0 0 0 2px rgba(239,68,68,.3)}
.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}
.focus-visible\:ring-2:focus-visible{box-shadow:0 0 0 2px rgba(239,68,68,.6)}
.focus-visible\:ring-red-500:focus-visible{box-shadow:0 0 0 2px #ef4444}
.focus-visible\:ring-offset-2:focus-visible{box-shadow:0 0 0 2px #000,0 0 0 4px #ef4444}
.focus-visible\:ring-offset-black:focus-visible{--tw-ring-offset-color:#000}

.hover\:-translate-y-0\.5:hover{transform:translateY(-0.125rem)}
.hover\:bg-gray-200:hover{background-color:#e5e7eb}
.hover\:bg-red-700:hover{background-color:#b91c1c}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.1)}
.hover\:border-red-500\/20:hover{border-color:rgba(239,68,68,.2)}
.hover\:border-red-500\/60:hover{border-color:rgba(239,68,68,.6)}
.hover\:border-white:hover{border-color:#fff}
.hover\:gap-2\.5:hover{gap:.625rem}
.hover\:gap-3:hover{gap:.75rem}
.hover\:text-gray-900:hover{color:#111827}
.hover\:text-red-500:hover{color:#ef4444}
.hover\:text-red-600:hover{color:#dc2626}
.hover\:text-white:hover{color:#fff}
.hover\:shadow-\[0_20px_40px_rgba\(239\,68\,68\,0\.07\)\]:hover{box-shadow:0 20px 40px rgba(239,68,68,.07)}

.group:hover .group-hover\:bg-red-600{background-color:#dc2626}
.group:hover .group-hover\:border-red-600{border-color:#dc2626}
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.group:hover .group-hover\:scale-110{transform:scale(1.1)}
.group:hover .group-hover\:text-white{color:#fff}
details[open] .group-open\:rotate-180{transform:rotate(180deg)}

@media (min-width:640px){
  .sm\:gap-10{gap:2.5rem}
  .sm\:items-end{align-items:flex-end}
  .sm\:justify-between{justify-content:space-between}
  .sm\:max-w-sm{max-width:24rem}
}
@media (min-width:768px){
  .md\:h-full{height:100%}
}
@media (min-width:1024px){
  .lg\:gap-14{gap:3.5rem}
}