.graph-hero{padding-block:44px 36px}.graph-hero h1{font-size:clamp(2.8rem,6vw,5rem)}nav [aria-current=page]{border-bottom:2px solid #dfb986}.graph-controls{display:flex;align-items:end;flex-wrap:wrap;gap:20px;padding:18px 0}.graph-controls label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px}.graph-controls select{font:inherit;min-height:44px;max-width:100%;padding:8px 12px;background:var(--paper);color:var(--ink);border:1px solid #82968c;border-radius:4px}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-controls button{min-height:44px;min-width:44px;border:1px solid #82968c;border-radius:4px;background:var(--paper);color:var(--ink);padding:8px 12px}.zoom-controls button:disabled{opacity:.4;cursor:default}.zoom-controls output{min-width:30px;text-align:center}.graph-controls>a{padding-block:10px;font-size:.85rem}.graph-controls select:focus-visible,#graph-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:3px}#graph-status{font-size:.82rem;color:var(--muted);padding:12px 0}#graph-scroll{overflow:auto;max-height:680px;border:1px solid var(--line);border-radius:8px;background:var(--paper);position:relative;overscroll-behavior-x:contain;scrollbar-color:#8a9c91 #eef0e8}#graph-canvas{--names:200px;position:relative}.graph-axis,.graph-row{display:grid;grid-template-columns:var(--names) minmax(0,1fr)}.graph-axis{position:sticky;top:0;z-index:4;background:var(--paper);height:48px;border-bottom:1px solid #82968c}.graph-corner,.graph-name{position:sticky;left:0;z-index:2;background:var(--paper);border-right:1px solid var(--line)}.graph-corner{font-size:.8rem;padding:14px;font-weight:600}.axis-track,.period-track{position:relative;margin-inline:30px}.axis-label{position:absolute;top:12px;transform:translateX(-50%);font-size:.75rem;white-space:nowrap;color:var(--muted)}.graph-row{border-bottom:1px solid var(--line)}.graph-name{width:100%;text-align:left;color:var(--ink);font:inherit;font-size:.84rem;padding:14px;border-width:0 1px 0 0;line-height:1.45}.graph-name span{display:block;font-size:.73rem;font-weight:400;margin-top:7px}.graph-name[aria-pressed=true]{background:var(--ink);color:white}.grid-line{position:absolute;top:0;bottom:0;border-left:1px solid #d8dfd680;pointer-events:none}.period-bar{position:absolute;top:12px;height:18px;background:var(--color);border:1px solid #203c3840;border-radius:4px;min-width:2px;cursor:pointer}.period-bar::after{content:'';position:absolute;inset:-10px -3px}.period-bar:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.event-dot{position:absolute;width:44px;height:44px;transform:translateX(-50%);background:transparent;border:0;border-radius:5px;color:var(--ink);padding:0;display:grid;place-items:center}.event-dot::before{content:'';width:11px;height:11px;background:var(--ink);border-radius:50%}.event-dot.approximate::before{background:var(--paper);border:2px solid var(--ink)}.event-dot[data-count]::before{width:22px;height:22px}.event-dot .event-count{position:absolute;color:white;font-size:11px;font-weight:700}.event-dot:hover{background:#203c3818}.graph-detail-header{max-width:850px}.graph-detail-header h2{margin-bottom:12px}.graph-detail-header .persian{margin:0}.graph-events{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin:26px 0 0}.graph-event-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px;min-width:0}.graph-event-card.highlighted{border:2px solid var(--accent);padding:19px}.graph-event-card h3{font-size:.95rem;line-height:1.5}.graph-event-date{font-size:.78rem;color:var(--accent);margin-bottom:8px}.graph-event-card a{display:inline-block;font-size:.8rem;margin-top:12px}.graph-event-card p{overflow-wrap:anywhere}@media(max-width:900px){.graph-events{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){#graph-canvas{--names:132px}.graph-name{font-size:.78rem;padding:10px}.graph-name span{font-size:.7rem}.graph-corner{padding:14px 8px}.graph-events{grid-template-columns:1fr}.graph-controls{gap:12px}.graph-controls>div:first-child{width:100%}.graph-controls select{width:100%}#graph-scroll{max-height:560px}}