/* Objekto analizė - the "NTAlert - Objekto analizė" design canvas, 1:1. The dialog carries .ph-oa; everything the design draws lives in the .oa-* namespace so the older .ph-* modal rules (many of them !important) cannot reach it. Sizes, colours and radii are the design's own values. Loaded last. */ .ph-oa { --oa-bg: #F7F3EB; --oa-card: #FBF9F4; --oa-line: #E3DCCF; --oa-line-soft: #EFEAE0; --oa-ink: #1B1A17; --oa-ink-2: #3A3630; --oa-ink-3: #5E584D; --oa-ink-4: #8C8577; --oa-chip: #EFEAE0; --oa-green: #0F3D2E; --oa-green-soft: #DCEEE4; --oa-green-row: #EDF5F0; --oa-amber: #8A3B0C; --oa-amber-soft: #FCEBD9; --oa-dash: #D3CABA; --oa-serif: Newsreader, Georgia, 'Times New Roman', serif; --oa-ui: Inter, system-ui, -apple-system, sans-serif; --oa-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- dialog frame -------------------------------------------------------- */ .ph-popup.ph-oa, .ph-sheet.ph-oa { background: var(--oa-bg) !important; color: var(--oa-ink); font-family: var(--oa-ui); line-height: normal; border: 0 !important; padding-bottom: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .ph-popup.ph-oa { width: min(1200px, calc(100vw - 48px)) !important; max-height: calc(100dvh - 48px) !important; border-radius: 20px !important; box-shadow: 0 24px 64px rgba(27, 26, 23, .22), 0 4px 14px rgba(27, 26, 23, .08) !important; } @media (max-width: 899px) { .ph-popup.ph-oa { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; } } .ph-oa button { width: auto; margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; } .ph-oa a { color: var(--oa-green); } .ph-oa a:hover { color: #082219; } .ph-oa .oa-main a, .ph-oa .oa-method a { text-decoration: underline; text-underline-offset: 2px; } .ph-oa :focus-visible { outline: 2px solid var(--oa-green); outline-offset: 2px; } .ph-oa [hidden] { display: none !important; } .ph-oa .oa-main :is(p, h2, h3, h4, ul, ol, dl, dd, figure) { margin: 0; } .ph-oa .oa-main :is(ul, ol) { padding: 0; list-style: none; } /* ---- header -------------------------------------------------------------- */ .ph-popup.ph-oa .ph-header, .ph-sheet.ph-oa .ph-header { padding: 28px 40px 20px !important; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; background: var(--oa-bg); flex: 0 0 auto; } .ph-oa .oa-headmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ph-oa .oa-crumb { font-family: var(--oa-mono); font-size: 11px; letter-spacing: .14em; color: var(--oa-ink-3); text-transform: uppercase; } .ph-popup.ph-oa .oa-title, .ph-sheet.ph-oa .oa-title { margin: 0; font-family: var(--oa-serif) !important; font-weight: 500 !important; font-size: 32px !important; line-height: 1.15; letter-spacing: 0 !important; text-transform: none !important; color: var(--oa-ink) !important; overflow-wrap: anywhere; } .ph-oa .oa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; } .ph-oa .oa-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--oa-line); border-radius: 999px; background: var(--oa-card); color: var(--oa-ink); line-height: normal; } .ph-oa .oa-chip-energy:has(.oa-en-letter) { padding: 4px 12px 4px 4px; } .ph-oa .oa-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .ph-oa .oa-srclink { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--oa-line); border-radius: 10px; background: var(--oa-card); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--oa-ink); white-space: nowrap; } .ph-oa .oa-srclink:hover { background: var(--oa-chip); color: var(--oa-ink); } .ph-oa .oa-iconbtn { width: 44px; height: 40px; min-width: 44px !important; min-height: 40px !important; border: 1px solid var(--oa-line); border-radius: 10px; background: var(--oa-card); display: flex; align-items: center; justify-content: center; color: var(--oa-ink); line-height: 0; position: static; } .ph-oa .oa-iconbtn:hover { background: var(--oa-chip); color: var(--oa-ink); } /* The close button also carries .ph-close, whose older !important rules (28px, transparent) would otherwise win over the design's icon button. */ .ph-popup.ph-oa .oa-iconbtn.ph-close, .ph-sheet.ph-oa .oa-iconbtn.ph-close { width: 44px !important; height: 40px !important; border: 1px solid var(--oa-line) !important; border-radius: 10px !important; background: var(--oa-card) !important; color: var(--oa-ink) !important; font-size: 0 !important; } .ph-popup.ph-oa .oa-iconbtn.ph-close:hover, .ph-sheet.ph-oa .oa-iconbtn.ph-close:hover { background: var(--oa-chip) !important; } .ph-oa .oa-star.starred { color: #C2560F; } .ph-oa .oa-star.starred svg path { fill: currentColor; } /* ---- tabs ---------------------------------------------------------------- */ .ph-oa .oa-tabs { flex: 0 0 auto; padding: 0 40px; margin: 0; display: flex; gap: 4px; border-bottom: 1px solid var(--oa-line); background: var(--oa-bg); font-size: 14px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; } .ph-oa .oa-tabs::-webkit-scrollbar { display: none; } .ph-oa .oa-tab { flex: 0 0 auto; padding: 12px 14px; min-height: 0; color: var(--oa-ink-3); border-bottom: 2px solid transparent; border-radius: 0; font-size: 14px; white-space: nowrap; background: none; } .ph-oa .oa-tab:hover { color: var(--oa-ink); border-color: transparent; border-bottom-color: var(--oa-line); } .ph-oa .oa-tab.ph-nav-active { font-weight: 600; color: var(--oa-ink); background: none; border-color: transparent; border-bottom-color: var(--oa-ink); } .ph-oa .oa-tab-count { font-size: 12px; font-weight: 400; color: var(--oa-ink-3); margin-left: 4px; } .ph-oa .oa-tab-count:empty { display: none; } /* ---- page body ----------------------------------------------------------- */ .ph-popup.ph-oa .ph-body, .ph-sheet.ph-oa .ph-body { padding: 0; color: var(--oa-ink); } .ph-oa .oa-main { padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 48px; } .ph-oa .oa-sec { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; } .ph-oa .oa-sec:empty { display: none; } .ph-oa .oa-sec-summary { gap: 20px; } .ph-oa .oa-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .ph-oa .oa-sectitle { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ph-oa .oa-eyebrow { font-family: var(--oa-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; color: var(--oa-ink-3); text-transform: uppercase; } /* Headings and figures keep the faces' own (normal) line height, as the design does; only running text sets one. */ .ph-oa .oa-h2 { font-family: var(--oa-serif); font-weight: 500; font-size: 26px; line-height: normal; color: var(--oa-ink); } .ph-oa .oa-h2-sm { font-size: 22px; } .ph-oa .oa-h3 { font-family: var(--oa-serif); font-weight: 500; font-size: 18px; line-height: normal; color: var(--oa-ink); } .ph-oa .oa-meta { font-size: 13px; color: var(--oa-ink-3); } .ph-oa .oa-meta-sm { font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-card { background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: 16px; min-width: 0; } .ph-oa .oa-status { font-size: 13px; color: var(--oa-ink-3); line-height: 1.5; } .ph-oa .oa-error { font-size: 13px; color: var(--oa-amber); line-height: 1.5; } .ph-oa .oa-notice { padding: 10px 12px; border-radius: 10px; background: var(--oa-chip); font-size: 12px; line-height: 1.5; color: var(--oa-ink-2); } .ph-oa .oa-warn { padding: 10px 12px; border-radius: 10px; background: var(--oa-amber-soft); font-size: 12px; line-height: 1.5; color: var(--oa-amber); } .ph-oa .oa-btn { height: 36px; padding: 0 16px; border: 1px solid var(--oa-line); border-radius: 999px; background: var(--oa-bg); font-size: 13px; font-weight: 600; color: var(--oa-ink); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .ph-oa .oa-btn:hover { background: var(--oa-chip); } .ph-oa .oa-btn-ghost { background: transparent; font-weight: 400; color: var(--oa-ink-2); } .ph-oa .oa-btn-green { height: 40px; border-color: #9CCBB3; background: var(--oa-green-soft); color: var(--oa-green); } .ph-oa .oa-btn-green:hover { background: #CFE3D7; } .ph-oa .oa-seg { display: flex; padding: 3px; background: var(--oa-chip); border-radius: 999px; font-size: 12px; font-weight: 600; flex: 0 0 auto; } .ph-oa .oa-seg button { height: 30px; padding: 0 14px; border-radius: 999px; color: var(--oa-ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; } .ph-oa .oa-seg button.oa-seg-on { background: var(--oa-ink); color: #FFFFFF; } .ph-oa .oa-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: normal; white-space: nowrap; } .ph-oa .oa-tag-green { background: var(--oa-green-soft); color: var(--oa-green); } .ph-oa .oa-tag-amber { background: var(--oa-amber-soft); color: var(--oa-amber); } .ph-oa .oa-tag-grey { background: var(--oa-chip); color: var(--oa-ink-2); } /* ---- Santrauka ------------------------------------------------------------ */ .ph-oa .oa-summary { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 20px; } .ph-oa .oa-ask { padding: 24px; display: flex; flex-direction: column; gap: 10px; } .ph-oa .oa-askline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ph-oa .oa-askprice { font-family: var(--oa-serif); font-size: 52px; line-height: 1; font-weight: 500; white-space: nowrap; } .ph-oa .oa-asksqm { font-size: 14px; color: var(--oa-ink-3); white-space: nowrap; } .ph-oa .oa-verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .ph-oa .oa-verdict:empty, .ph-oa .oa-narrative:empty { display: none; } .ph-oa .oa-badge { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--oa-chip); color: var(--oa-ink-2); } .ph-oa .oa-badge-warn { background: var(--oa-amber-soft); color: var(--oa-amber); } .ph-oa .oa-badge-good { background: var(--oa-green-soft); color: var(--oa-green); } .ph-oa .oa-main .oa-narrative { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--oa-ink-2); text-wrap: pretty; } .ph-oa .oa-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ph-oa .oa-tiles.oa-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-oa .oa-tile { padding: 18px 20px; background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; } .ph-oa .oa-tile:empty { display: none; } .ph-oa .oa-tile-wide { grid-column: span 2; } .ph-oa .oa-tiles-2 .oa-tile-wide { grid-column: span 1; } .ph-oa .oa-tile-dashed { background: transparent; border: 1.5px dashed var(--oa-dash); gap: 8px; } .ph-oa .oa-tile-eyebrow { font-family: var(--oa-mono); font-size: 11px; letter-spacing: .1em; color: var(--oa-ink-3); text-transform: uppercase; } .ph-oa .oa-tileline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .ph-oa .oa-tile-value { font-family: var(--oa-serif); font-size: 26px; line-height: normal; color: var(--oa-ink); } .ph-oa .oa-tile-value-md { font-family: var(--oa-serif); font-size: 22px; line-height: 1.25; color: var(--oa-ink); } .ph-oa .oa-tile-value-muted { color: var(--oa-ink-2); } .ph-oa .oa-delta { font-size: 13px; font-weight: 600; white-space: nowrap; } .ph-oa .oa-up { color: var(--oa-amber); } .ph-oa .oa-down { color: var(--oa-green); } .ph-oa .oa-tile-sub { font-size: 13px; color: var(--oa-ink-3); line-height: normal; } .ph-oa .oa-tile-sub a { font-weight: 600; } .ph-oa .oa-tile-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--oa-ink-3); } .ph-oa .oa-tile-energy { gap: 8px; } .ph-oa .oa-en-row { display: flex; align-items: center; gap: 12px; } .ph-oa .oa-en-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ph-oa .oa-en-col strong { font-weight: 600; font-size: 14px; } .ph-oa .oa-en-col span { font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-en-box { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--oa-serif); font-size: 26px; font-weight: 600; } .ph-oa .oa-en-box.oa-en-two { font-size: 24px; } .ph-oa .oa-en-box.oa-en-three { font-size: 19px; } .ph-oa .oa-en-box.oa-en-none { border: 1.5px dashed #B8B0A2; color: var(--oa-ink-4); font-size: 22px; font-weight: 500; background: transparent; } .ph-oa .oa-en-letter { min-width: 26px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* Energy class colours (design ladder). */ .ph-oa .oa-en-app { background: #0B6B3A; color: #FFFFFF; } .ph-oa .oa-en-ap { background: #1F8A46; color: #FFFFFF; } .ph-oa .oa-en-a { background: #4CA84A; color: #FFFFFF; } .ph-oa .oa-en-b { background: #9BC53D; color: #1B1A17; } .ph-oa .oa-en-c { background: #D8D23A; color: #1B1A17; } .ph-oa .oa-en-d { background: #F2B632; color: #1B1A17; } .ph-oa .oa-en-e { background: #EE8A2A; color: #1B1A17; } .ph-oa .oa-en-f { background: #E2562A; color: #1B1A17; } .ph-oa .oa-en-g { background: #C62E2A; color: #FFFFFF; } /* ---- Kainos pozicija ------------------------------------------------------ */ .ph-oa .oa-position { padding: 24px 0 18px; display: flex; flex-direction: column; gap: 14px; margin: 0; } .ph-oa .oa-position:empty { display: none; } .ph-oa .oa-poshead { padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .ph-oa .oa-pos-scroll { overflow-x: auto; } .ph-oa .oa-pos-svg { width: 100%; height: auto; display: block; font-family: var(--oa-ui); } .ph-oa .oa-pos-note { padding: 0 24px; } .ph-oa .oa-legend { padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-legend span { display: flex; align-items: center; gap: 6px; } .ph-oa .oa-sw-dot { width: 8px; height: 8px; border-radius: 50%; background: #4F6B5C; } .ph-oa .oa-sw-band { width: 18px; height: 10px; border-radius: 3px; background: #CFE3D7; } .ph-oa .oa-sw-ai { width: 8px; height: 8px; background: #2F5D8A; transform: rotate(45deg); } .ph-oa .oa-sw-ask { width: 14px; border-top: 2px dashed #C2560F; } .ph-oa svg .oa-t-lab { font-size: 13px; font-weight: 600; fill: #1B1A17; } .ph-oa svg .oa-t-lab-muted { fill: #5E584D; } .ph-oa svg .oa-t-sub { font-size: 12px; fill: #5E584D; } .ph-oa svg .oa-t-val { font-size: 14px; font-weight: 600; fill: #1B1A17; } .ph-oa svg .oa-t-val-muted { fill: #5E584D; } .ph-oa svg .oa-t-dash { fill: #8C8577; } .ph-oa svg .oa-t-mono { font-family: var(--oa-mono); font-size: 11px; fill: #5E584D; } .ph-oa svg .oa-t-mono-green { fill: #0F3D2E; } .ph-oa svg .oa-t-mono-amber { fill: #8A3B0C; } .ph-oa svg .oa-t-mono-ink { fill: #1B1A17; } .ph-oa svg .oa-t-median { font-size: 11px; font-weight: 600; fill: #0F3D2E; } .ph-oa svg .oa-t-pill { font-size: 12px; font-weight: 600; fill: #FFFFFF; } .ph-oa svg .oa-t-bold { font-size: 12px; font-weight: 600; fill: #1B1A17; } .ph-oa svg .oa-t-bold-green { font-size: 12px; font-weight: 600; fill: #0F3D2E; } .ph-oa svg .oa-t-bold-amber { font-size: 12px; font-weight: 600; fill: #8A3B0C; } .ph-oa svg .oa-t-name { font-size: 13px; font-weight: 600; fill: #1B1A17; } /* Chart labels keep a card-coloured halo so a crossing line never cuts the text. */ .ph-oa svg .oa-t-halo { paint-order: stroke; stroke: #FBF9F4; stroke-width: 4px; stroke-linejoin: round; } /* ---- Kainos istorija ------------------------------------------------------ */ .ph-oa .oa-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; } .ph-oa .oa-histchart { padding: 20px 20px 12px; } .ph-oa .oa-hist-svg { width: 100%; height: auto; display: block; font-family: var(--oa-ui); } .ph-oa .oa-hist-scroll { overflow-x: auto; } .ph-oa .oa-stats { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .ph-oa .oa-stats-tight { gap: 12px; } .ph-oa .oa-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ph-oa .oa-stat-k { font-size: 13px; color: var(--oa-ink-3); } .ph-oa .oa-stat-k-sm { font-size: 12px; } .ph-oa .oa-stat-big { font-family: var(--oa-serif); font-size: 30px; line-height: normal; } .ph-oa .oa-stat-big small { font-size: 18px; } .ph-oa .oa-stat-num { font-family: var(--oa-serif); font-size: 22px; line-height: normal; } .ph-oa .oa-stat-strong { font-size: 13px; font-weight: 600; } .ph-oa .oa-statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 13px; } .ph-oa .oa-rule { height: 1px; background: var(--oa-line); } .ph-oa .oa-neg { color: var(--oa-green); } .ph-oa .oa-pos { color: var(--oa-amber); } .ph-oa .oa-conflict { padding: 12px 14px; border-radius: 10px; background: var(--oa-amber-soft); color: var(--oa-amber); font-size: 13px; line-height: 1.5; } .ph-oa .oa-conflict dl { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .ph-oa .oa-conflict dl > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ph-oa .oa-conflict dd { font-weight: 600; white-space: nowrap; } /* ---- Panašūs skelbimai ---------------------------------------------------- */ .ph-oa .oa-sechead-comps { align-items: flex-end; } .ph-oa .oa-sectitle-comps { gap: 8px; } .ph-oa .oa-pills { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; } .ph-oa .oa-pill { padding: 4px 10px; border-radius: 999px; background: var(--oa-chip); color: var(--oa-ink); white-space: nowrap; } .ph-oa .oa-table { overflow: hidden; } .ph-oa .oa-table-scroll { overflow-x: auto; } .ph-oa .oa-tr { display: grid; grid-template-columns: minmax(260px, 420px) 90px 80px 140px 120px 130px minmax(96px, 1fr); align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--oa-line-soft); font-size: 14px; min-width: 916px; } .ph-oa .oa-tr > * { min-width: 0; } .ph-oa .oa-th { padding: 12px 20px; font-family: var(--oa-mono); font-size: 11px; letter-spacing: .08em; color: var(--oa-ink-3); border-bottom: 1px solid var(--oa-line); text-transform: uppercase; } .ph-oa .oa-tr-self { background: var(--oa-green-row); border-bottom-color: var(--oa-line); } .ph-oa .oa-tr > :last-child { text-align: right; font-size: 12px; } .ph-oa .oa-th > :last-child { font-size: 11px; } .ph-oa .oa-obj { display: flex; align-items: center; gap: 14px; padding-right: 16px; } .ph-oa .oa-thumb { width: 64px; height: 48px; flex-shrink: 0; border-radius: 8px; background: var(--oa-chip); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .ph-oa .oa-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ph-oa .oa-thumb-self { background: var(--oa-green); color: #FFFFFF; font-family: var(--oa-mono); font-size: 10px; letter-spacing: .08em; } .ph-oa .oa-objtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ph-oa .oa-tr-self .oa-objtext { gap: 2px; } .ph-oa .oa-objtext strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-oa .oa-objsub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-tr-self .oa-objsub { color: var(--oa-ink-2); } .ph-oa .oa-price { font-family: var(--oa-serif); font-size: 18px; white-space: nowrap; } .ph-oa .oa-strong { font-weight: 600; } .ph-oa .oa-muted { color: var(--oa-ink-3); } .ph-oa .oa-diff { padding: 3px 8px; border-radius: 6px; background: var(--oa-chip); font-size: 13px; font-weight: 600; white-space: nowrap; } .ph-oa .oa-diff-out { background: var(--oa-amber-soft); color: var(--oa-amber); } .ph-oa .oa-tfoot { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; } .ph-oa .oa-tfoot > span { color: var(--oa-ink-3); } /* ---- Kaimynystė ------------------------------------------------------------ */ .ph-oa .oa-ruler { padding: 20px 0 8px; } .ph-oa .oa-ruler-scroll { overflow-x: auto; } .ph-oa .oa-ruler-svg { width: 100%; height: auto; display: block; font-family: var(--oa-ui); } .ph-oa .oa-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ph-oa .oa-listcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ph-oa .oa-listhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ph-oa .oa-list { background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: 14px; display: flex; flex-direction: column; } .ph-oa .oa-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--oa-line-soft); font-size: 14px; } .ph-oa .oa-list li:last-child { border-bottom: 0; } .ph-oa .oa-list .oa-li-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .ph-oa .oa-list .oa-li-name strong { font-weight: 600; overflow-wrap: anywhere; } .ph-oa .oa-list .oa-li-dist { color: var(--oa-ink-2); white-space: nowrap; } /* Desktop: the two lists share one row grid (subgrid), so a row whose name or tag wraps makes its neighbour in the other list equally tall - rows stay level across Darželiai and Mokyklos. The phone sheet stacks the lists. */ .ph-oa:not(.ph-sheet) .oa-lists { gap: 0 20px; } .ph-oa:not(.ph-sheet) .oa-listcol { display: grid; grid-template-rows: subgrid; grid-row: 1 / span var(--oa-span, 2); gap: 0; } .ph-oa:not(.ph-sheet) .oa-listhead { margin-bottom: 10px; } .ph-oa:not(.ph-sheet) .oa-list { display: grid; grid-template-rows: subgrid; grid-row: span var(--oa-span, 1); } .ph-oa .oa-empty { padding: 16px 20px; border: 1.5px dashed var(--oa-dash); border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--oa-ink-3); } /* ---- Energija ------------------------------------------------------------- */ /* The ladder column is a little wider than the artboard's 560px so the class pointer fits beside the longest bars without squeezing them. */ .ph-oa .oa-energy { padding: 24px; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 32px; align-items: start; } .ph-oa .oa-ladder { display: flex; flex-direction: column; gap: 6px; max-width: 100%; } .ph-oa .oa-rung { display: flex; align-items: center; gap: 10px; min-width: 0; } .ph-oa .oa-bar { height: 30px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; flex: 0 0 auto; opacity: .38; border-radius: 4px 15px 15px 4px; font-weight: 600; font-size: 14px; } .ph-oa .oa-rung-on .oa-bar { opacity: 1; } .ph-oa .oa-pointer { display: flex; align-items: center; min-width: 0; } .ph-oa .oa-pointer::before { content: ''; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 12px solid var(--oa-ink); flex: 0 0 auto; } .ph-oa .oa-pointer span { height: 30px; padding: 0 14px; display: flex; align-items: center; background: var(--oa-ink); color: #FFFFFF; border-radius: 0 8px 8px 0; font-size: 13px; font-weight: 600; line-height: 1.12; } .ph-oa .oa-ladder-scale { display: flex; justify-content: space-between; width: 452px; max-width: 100%; margin-top: 6px; font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-enside { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ph-oa .oa-enfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ph-oa .oa-enfig { display: flex; flex-direction: column; gap: 2px; } .ph-oa .oa-enfig span { font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-enfig strong { font-family: var(--oa-serif); font-weight: 500; font-size: 26px; line-height: normal; } .ph-oa .oa-kv { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .ph-oa .oa-kv > div { display: flex; justify-content: space-between; gap: 12px; } .ph-oa .oa-kv dt { color: var(--oa-ink-3); } .ph-oa .oa-kv dd { font-weight: 600; text-align: right; } .ph-oa .oa-enline { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 14px; } .ph-oa .oa-enline-main { display: flex; align-items: center; gap: 14px; min-width: 0; } .ph-oa .oa-enline-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ph-oa .oa-enline-text strong { font-weight: 600; font-size: 14px; } .ph-oa .oa-enline-text span { font-size: 13px; color: var(--oa-ink-3); line-height: 1.45; } .ph-oa .oa-ministrip { display: flex; gap: 3px; flex: 0 0 auto; } .ph-oa .oa-ministrip i { width: 14px; height: 22px; border-radius: 3px; opacity: .25; } /* ---- Statybos ------------------------------------------------------------- */ .ph-oa .oa-cxstrip { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: center; } .ph-oa .oa-cx-scroll { overflow-x: auto; min-width: 0; } .ph-oa .oa-cx-svg { width: 100%; max-width: 700px; height: auto; display: block; font-family: var(--oa-ui); } .ph-oa .oa-cxlegend { display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .ph-oa .oa-cxlegend span { display: flex; align-items: center; gap: 8px; } .ph-oa .oa-cxlegend i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; } .ph-oa .oa-cx-new { background: #C2560F; } .ph-oa .oa-cx-renov { border: 2px solid #4F6B5C; } .ph-oa .oa-cxcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ph-oa .oa-cxcard { padding: 16px; background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; } .ph-oa .oa-cxcard-inactive { opacity: .85; } .ph-oa .oa-cxhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ph-oa .oa-cxtype { padding: 3px 8px; border-radius: 999px; background: var(--oa-chip); font-size: 11px; font-weight: 600; color: var(--oa-ink-2); } .ph-oa .oa-cxtype-new { background: var(--oa-amber-soft); color: var(--oa-amber); } .ph-oa .oa-cxdist { font-weight: 600; font-size: 14px; white-space: nowrap; } .ph-oa .oa-cxtitle { font-weight: 600; font-size: 14px; line-height: 1.4; } .ph-oa .oa-cxmeta { font-size: 12px; color: var(--oa-ink-3); line-height: normal; } .ph-oa .oa-cxcard > .oa-cxlink { display: inline; padding: 0; font-size: 12px; font-weight: 600; align-self: flex-start; } .ph-oa .oa-cxbtns { display: flex; gap: 10px; flex-wrap: wrap; } .ph-oa .oa-cxbtns .oa-btn { height: 38px; background: var(--oa-card); } .ph-oa .oa-cxbtns .oa-btn-ghost { background: transparent; } .ph-oa .oa-subhead { font-weight: 600; font-size: 14px; } /* ---- sources footer + methodology panel ----------------------------------- */ .ph-oa .oa-footer { padding: 20px 40px 28px; border-top: 1px solid var(--oa-line); display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; } .ph-oa .oa-sources strong { font-weight: 600; color: var(--oa-ink); } .ph-oa .oa-sources a { color: inherit; } .ph-oa .oa-howlink { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--oa-green); text-decoration: underline; text-underline-offset: 2px; } .ph-oa .oa-method { position: absolute; inset: 0; z-index: 5; background: var(--oa-bg); display: flex; flex-direction: column; border-radius: inherit; } .ph-oa .oa-method-head { flex: 0 0 auto; padding: 28px 40px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 1px solid var(--oa-line); } .ph-oa .oa-method-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 40px 40px; display: flex; flex-direction: column; gap: 28px; } .ph-oa .oa-method-sec { display: flex; flex-direction: column; gap: 10px; } .ph-oa .oa-method-sec:empty { display: none; } .ph-oa .oa-method-sec h3 { margin: 0; font-family: var(--oa-serif); font-weight: 500; font-size: 20px; } .ph-oa .oa-method-sec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--oa-ink-2); list-style: disc; } .ph-oa .oa-method-sec p { margin: 0; font-size: 12px; color: var(--oa-ink-3); line-height: 1.5; } .ph-oa .oa-events { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none !important; padding-left: 0 !important; } .ph-oa .oa-events li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--oa-line-soft); font-size: 13px; align-items: baseline; } .ph-oa .oa-events time { font-family: var(--oa-mono); font-size: 11px; color: var(--oa-ink-3); } .ph-oa .oa-events span { color: var(--oa-ink-3); } /* Dialog is the positioning context for the methodology panel. */ .ph-popup.ph-oa, .ph-sheet.ph-oa { overflow: hidden; } /* ---- loading / error shell ------------------------------------------------- */ .ph-oa .oa-loading { padding: 64px 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; color: var(--oa-ink-3); } .ph-oa .oa-loading .ph-loading-spinner { border-color: var(--oa-line); border-top-color: var(--oa-green); } .ph-oa .oa-fail { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } /* ---- narrower desktop ------------------------------------------------------ */ @media (max-width: 1100px) { .ph-oa .oa-summary { grid-template-columns: minmax(0, 1fr); } .ph-oa .oa-energy { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ph-oa .oa-cxstrip { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ph-oa .oa-cxlegend { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; } } @media (max-width: 960px) { .ph-oa .oa-split { grid-template-columns: minmax(0, 1fr); } .ph-oa .oa-cxcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- mobile sheet (<= 720px): the Mobile / Mobile-first artboards ----------- A full-screen sheet: a slim top bar, the title block and a sticky pill row scrolling with the page, a sticky action bar at the bottom. The charts are drawn in their own narrow geometry by the modules (svg.oa-svg-m), so nothing scrolls sideways. Everything is scoped to .ph-sheet, which only exists here. */ /* top + bottom (the legacy sheet rule sets bottom: 0) fill the viewport on every browser, with or without dvh. */ .ph-sheet.ph-oa { top: 0 !important; bottom: 0; height: auto; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; } .ph-sheet.ph-oa .ph-header.oa-topbar { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px !important; align-items: center; gap: 12px; } .ph-sheet.ph-oa .oa-crumb { font-size: 10px; letter-spacing: .12em; } .ph-sheet.ph-oa .oa-iconbtn { width: 44px; height: 44px; min-width: 44px !important; min-height: 44px !important; border-radius: 12px; } .ph-sheet.ph-oa .oa-iconbtn.ph-close { width: 44px !important; height: 44px !important; border-radius: 12px !important; } .ph-sheet.ph-oa .oa-mhead { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; } .ph-sheet.ph-oa .oa-title { font-size: 26px !important; } .ph-sheet.ph-oa .oa-chips { gap: 6px; margin: 0; font-size: 12px; } .ph-sheet.ph-oa .oa-chip { padding: 4px 10px; gap: 6px; } .ph-sheet.ph-oa .oa-chip-energy:has(.oa-en-letter) { padding: 3px 10px 3px 3px; } .ph-sheet.ph-oa .oa-chip .oa-en-letter { min-width: 22px; height: 18px; font-size: 11px; } /* Tabs: a scrollable row of pills, sticky at the top of the page. */ .ph-sheet.ph-oa .oa-pillnav { position: sticky; top: 0; z-index: 3; padding: 10px 16px; gap: 8px; border-top: 1px solid var(--oa-line); border-bottom: 1px solid var(--oa-line); } .ph-sheet.ph-oa .oa-pillnav .oa-tab { position: relative; height: 38px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--oa-line); border-radius: 999px; background: var(--oa-card); color: var(--oa-ink-2); font-size: 13px; font-weight: 600; } .ph-sheet.ph-oa .oa-pillnav .oa-tab::before { content: ''; position: absolute; inset: -10px -4px; } /* 58px touch target */ .ph-sheet.ph-oa .oa-pillnav .oa-tab:hover { border-color: var(--oa-line); } .ph-sheet.ph-oa .oa-pillnav .oa-tab-count { display: none; } .ph-sheet.ph-oa .oa-pillnav .oa-tab.ph-nav-active { background: var(--oa-ink); border-color: var(--oa-ink); color: #FFFFFF; } .ph-sheet.ph-oa .oa-main { padding: 20px 16px 36px; gap: 36px; } .ph-sheet.ph-oa .oa-sec, .ph-sheet.ph-oa .oa-sec-summary { gap: 12px; } .ph-sheet.ph-oa .oa-eyebrow { font-size: 10px; } .ph-sheet.ph-oa .oa-h2 { font-size: 22px; line-height: 1.2; } .ph-sheet.ph-oa .oa-h2-sm { font-size: 19px; line-height: normal; } .ph-sheet.ph-oa .oa-h3 { font-size: 17px; } .ph-sheet.ph-oa .oa-sechead { flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: nowrap; } .ph-sheet.ph-oa .oa-sechead > .oa-meta { margin-top: -8px; font-size: 12px; } .ph-sheet.ph-oa .oa-seg { display: flex; } .ph-sheet.ph-oa .oa-seg button { flex: 1 1 0; height: 36px; padding: 0 12px; } .ph-sheet.ph-oa .oa-btn { height: 44px; font-size: 14px; } /* Drawn 1:1 at 390 px; wider sheets centre the chart instead of blowing its text up. */ .ph-sheet.ph-oa svg.oa-svg-m { max-width: 420px; margin: 0 auto; } .ph-sheet.ph-oa svg.oa-svg-m .oa-t-mono { font-size: 10px; } .ph-sheet.ph-oa svg.oa-svg-m :is(.oa-t-bold, .oa-t-bold-green, .oa-t-bold-amber, .oa-t-sub, .oa-t-pill) { font-size: 11px; } .ph-sheet.ph-oa svg.oa-svg-m :is(.oa-t-lab, .oa-t-val) { font-size: 12px; } /* Santrauka: the asking-price card, a two-up grid of tiles, Vieta across. */ .ph-sheet.ph-oa .oa-summary { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ph-sheet.ph-oa .oa-ask { padding: 18px; gap: 8px; } .ph-sheet.ph-oa .oa-askline { gap: 4px 10px; } .ph-sheet.ph-oa .oa-askprice { font-size: 40px; } .ph-sheet.ph-oa .oa-asksqm { font-size: 13px; } .ph-sheet.ph-oa .oa-verdict { margin-top: 4px; } .ph-sheet.ph-oa .oa-badge, .ph-sheet.ph-oa .oa-verdict .oa-meta { font-size: 12px; } .ph-sheet.ph-oa .oa-main .oa-narrative { margin: 4px 0 0; line-height: 1.5; } .ph-sheet.ph-oa .oa-tiles, .ph-sheet.ph-oa .oa-tiles.oa-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ph-sheet.ph-oa .oa-tile { padding: 14px; gap: 4px; } .ph-sheet.ph-oa .oa-tile-eyebrow { font-size: 10px; letter-spacing: .08em; } .ph-sheet.ph-oa .oa-tileline { gap: 0 8px; } .ph-sheet.ph-oa .oa-tile-value { font-size: 22px; } .ph-sheet.ph-oa .oa-tile-value-md { line-height: normal; } .ph-sheet.ph-oa .oa-delta, .ph-sheet.ph-oa .oa-tile-sub, .ph-sheet.ph-oa .oa-tile-row { font-size: 12px; } .ph-sheet.ph-oa .oa-tile-energy { gap: 6px; order: 4; } .ph-sheet.ph-oa .oa-tile[data-card="vieta"], .ph-sheet.ph-oa .oa-tiles-2 .oa-tile[data-card="vieta"] { order: 5; grid-column: span 2; } .ph-sheet.ph-oa .oa-tiles-odd .oa-tile[data-card="change"] { grid-column: span 2; } .ph-sheet.ph-oa .oa-en-row { gap: 10px; } .ph-sheet.ph-oa .oa-en-box { width: 36px; height: 36px; border-radius: 8px; font-size: 22px; } .ph-sheet.ph-oa .oa-en-box.oa-en-two { font-size: 19px; } .ph-sheet.ph-oa .oa-en-box.oa-en-three { font-size: 15px; } .ph-sheet.ph-oa .oa-en-col { gap: 0; } .ph-sheet.ph-oa .oa-en-col strong { font-size: 13px; } .ph-sheet.ph-oa .oa-en-col span { font-size: 11px; } /* Kainos pozicija: labels stacked above each row. */ .ph-sheet.ph-oa .oa-position { padding: 16px; gap: 12px; } .ph-sheet.ph-oa .oa-poshead { padding: 0; flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: nowrap; } .ph-sheet.ph-oa .oa-pos-note { padding: 0; } .ph-sheet.ph-oa .oa-legend { padding: 0; gap: 6px 14px; font-size: 11px; } .ph-sheet.ph-oa .oa-legend span { gap: 5px; } .ph-sheet.ph-oa .oa-sw-dot, .ph-sheet.ph-oa .oa-sw-ai { width: 7px; height: 7px; } .ph-sheet.ph-oa .oa-sw-band { width: 14px; height: 8px; border-radius: 2px; } .ph-sheet.ph-oa .oa-sw-ask { width: 12px; } /* Kainos istorija: one card - chart, three figures, one line of context. */ .ph-oa .oa-histcard { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .ph-oa .oa-hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--oa-line); } .ph-oa .oa-hstats .oa-stat-k { font-size: 11px; } .ph-oa .oa-hstats .oa-stat-num { font-size: 18px; white-space: nowrap; } .ph-oa .oa-main .oa-hnote { font-size: 12px; color: var(--oa-ink-3); line-height: 1.5; } .ph-sheet.ph-oa .oa-split { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ph-sheet.ph-oa .oa-histchart { padding: 16px; } .ph-sheet.ph-oa .oa-stats { padding: 16px; } .ph-sheet.ph-oa .oa-stats .oa-btn { width: 100%; } .ph-sheet.ph-oa .oa-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; } /* Panašūs skelbimai: the table becomes cards. */ .ph-sheet.ph-oa .oa-sectitle-comps { gap: 4px; } .ph-sheet.ph-oa .oa-sectitle-comps .oa-pills { margin-top: 8px; } .ph-sheet.ph-oa .oa-pills { font-size: 11px; } .ph-sheet.ph-oa .oa-pill { padding: 4px 9px; } .ph-oa .oa-ctable { border-radius: 14px; } .ph-oa .oa-crow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; min-width: 0; font-size: 14px; } .ph-oa .oa-main a.oa-crow, .ph-oa .oa-main a.oa-crow:hover { color: inherit; text-decoration: none; } .ph-oa a.oa-crow:active { background: var(--oa-line-soft); } .ph-oa .oa-clist > .oa-crow:last-child { border-bottom: 0; } .ph-oa .oa-ctable .oa-cfoot { border-top: 1px solid var(--oa-line-soft); } .ph-oa .oa-crow .oa-thumb { width: 52px; height: 44px; } .ph-oa .oa-crow .oa-thumb svg { width: 18px; height: 18px; } .ph-oa .oa-cmid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; } .ph-oa .oa-cmid strong { font-weight: 600; overflow-wrap: anywhere; } .ph-oa .oa-cmid .oa-tag { align-self: flex-start; } .ph-oa .oa-cmeta { font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-cend { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .ph-oa .oa-cend .oa-price { font-size: 17px; } .ph-oa .oa-csqm { font-size: 12px; color: var(--oa-ink-2); } .ph-oa .oa-cend .oa-diff { padding: 2px 6px; font-size: 12px; } .ph-oa .oa-cnote { font-size: 12px; color: var(--oa-ink-3); } .ph-oa .oa-cfoot { padding: 12px 14px; } .ph-oa .oa-cfoot .oa-btn { width: 100%; } /* Aplinka: the ruler becomes a vertical walking timeline. */ .ph-oa .oa-walk { padding: 8px 14px; } .ph-oa .oa-walk-row { display: grid; grid-template-columns: 48px 24px minmax(0, 1fr); align-items: center; min-height: 44px; } .ph-oa .oa-walk-min { font-family: var(--oa-mono); font-size: 12px; font-weight: 500; white-space: nowrap; } .ph-oa .oa-walk-rail { align-self: stretch; min-height: 44px; display: flex; flex-direction: column; align-items: center; } .ph-oa .oa-walk-seg { width: 3px; flex: 1 1 0; } .ph-oa .oa-walk-seg.oa-on { background: #9CCBB3; } .ph-oa .oa-walk-seg.oa-off { background: var(--oa-line); } .ph-oa .oa-walk-dot { width: 12px; height: 12px; flex: 0 0 auto; box-sizing: border-box; border-radius: 50%; background: var(--oa-green); } .ph-oa .oa-walk-far .oa-walk-dot { background: var(--oa-bg); border: 2px solid #6E685D; } .ph-oa .oa-walk-text { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0 4px 4px; } .ph-oa .oa-walk-text strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .ph-oa .oa-walk-text > span { font-size: 12px; color: var(--oa-ink-3); flex: 0 0 auto; } .ph-oa .oa-walk-edge { padding: 6px 0 6px 72px; font-family: var(--oa-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--oa-green); display: flex; align-items: center; gap: 8px; } .ph-oa .oa-walk-edge::before, .ph-oa .oa-walk-edge::after { content: ''; width: 8px; height: 1px; background: currentColor; } .ph-sheet.ph-oa .oa-lists { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ph-sheet.ph-oa .oa-listcol { gap: 12px; } .ph-sheet.ph-oa .oa-listhead { margin-top: 8px; align-items: baseline; } .ph-sheet.ph-oa .oa-listhead .oa-meta-sm { font-size: 11px; } .ph-sheet.ph-oa .oa-list li { padding: 12px 14px; gap: 8px; } .ph-sheet.ph-oa .oa-list .oa-li-name { gap: 6px; } .ph-sheet.ph-oa .oa-list .oa-li-dist { font-size: 12px; } /* Energija: one column - ladder, two figures, certificate rows, note. */ .ph-sheet.ph-oa .oa-energy { padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 14px; } .ph-sheet.ph-oa .oa-ladder { gap: 4px; } .ph-sheet.ph-oa .oa-rung { gap: 8px; } .ph-sheet.ph-oa .oa-bar { height: 24px; padding: 0 10px; border-radius: 3px 12px 12px 3px; font-size: 12px; } .ph-sheet.ph-oa .oa-pointer::before { border-top-width: 12px; border-bottom-width: 12px; border-right-width: 10px; } .ph-sheet.ph-oa .oa-pointer span { height: 24px; padding: 0 10px; border-radius: 0 6px 6px 0; font-size: 12px; white-space: nowrap; } .ph-sheet.ph-oa .oa-enside { gap: 14px; padding-top: 12px; border-top: 1px solid var(--oa-line); } .ph-sheet.ph-oa .oa-enfigs { gap: 12px; } .ph-sheet.ph-oa .oa-enfig span { font-size: 11px; } .ph-sheet.ph-oa .oa-enfig strong { font-size: 20px; } .ph-sheet.ph-oa .oa-kv { gap: 6px; } .ph-sheet.ph-oa .oa-enline { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; } .ph-sheet.ph-oa .oa-enline-main { flex-direction: column; align-items: flex-start; gap: 10px; } /* Statybos: strip with alternating labels, one-column cards. */ .ph-sheet.ph-oa .oa-cxstrip { padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 10px; } .ph-sheet.ph-oa .oa-cxlegend { flex-direction: column; flex-wrap: nowrap; gap: 6px; font-size: 12px; color: var(--oa-ink-2); } .ph-sheet.ph-oa .oa-cxlegend i { width: 9px; height: 9px; } .ph-sheet.ph-oa .oa-cxcards { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ph-sheet.ph-oa .oa-cxcard { padding: 14px; gap: 6px; } .ph-sheet.ph-oa .oa-cxcard > .oa-cxlink { position: relative; font-size: 13px; min-height: 32px; display: flex; align-items: center; } .ph-sheet.ph-oa .oa-cxcard > .oa-cxlink::before { content: ''; position: absolute; inset: -6px 0; } /* 44px touch target */ .ph-sheet.ph-oa .oa-cxbtns { flex-direction: column; flex-wrap: nowrap; } .ph-sheet.ph-oa .oa-cxbtns .oa-btn { width: 100%; height: 44px; } /* Sources: one running line, then the method link. */ .ph-sheet.ph-oa .oa-footer { margin: 0 16px; padding: 16px 0 32px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.5; } .ph-sheet.ph-oa .oa-sources { display: block; } .ph-sheet.ph-oa .oa-howlink { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; } .ph-sheet.ph-oa .oa-footer .oa-howlink { position: relative; min-height: 32px; } .ph-sheet.ph-oa .oa-footer .oa-howlink::before { content: ''; position: absolute; inset: -6px 0; } /* Sticky action bar: star, follow, open the advertisement. */ .ph-oa .oa-actionbar { flex: 0 0 auto; position: relative; z-index: 2; padding: 12px 16px max(20px, env(safe-area-inset-bottom, 0px)); background: var(--oa-bg); border-top: 1px solid var(--oa-line); box-shadow: 0 -8px 24px rgba(27, 26, 23, .06); display: flex; gap: 8px; } .ph-oa .oa-barbtn { width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid var(--oa-line); border-radius: 14px; background: var(--oa-card); color: var(--oa-ink); display: flex; align-items: center; justify-content: center; line-height: 0; } .ph-oa .oa-barfollow { flex: 0 0 auto; height: 48px; padding: 0 14px; border: 1px solid #9CCBB3; border-radius: 14px; background: var(--oa-green-soft); color: var(--oa-green); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ph-oa a.oa-baropen, .ph-oa a.oa-baropen:hover { flex: 1 1 auto; min-width: 0; height: 48px; border-radius: 14px; background: var(--oa-ink); color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .ph-sheet.ph-oa .oa-method-head { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; align-items: center; } .ph-sheet.ph-oa .oa-method-body { padding: 20px 16px 28px; } .ph-sheet.ph-oa .oa-loading, .ph-sheet.ph-oa .oa-fail { padding: 40px 16px; } /* ---- Taisyti adresą (design: the two "Adreso taisymas" artboards) ---- */ /* Header: the pill beside the title, the corrected-address chips, the muted "Adresas nenustatytas" title. */ .ph-oa .oa-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .ph-popup.ph-oa .oa-title.oa-title-muted, .ph-sheet.ph-oa .oa-title.oa-title-muted { color: var(--oa-ink-3) !important; } .ph-oa .oa-addr-pill { flex-shrink: 0; height: 34px; padding: 0 12px; border: 1px solid var(--oa-line); border-radius: 999px; background: var(--oa-card); color: var(--oa-ink-2); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ph-oa .oa-addr-pill:hover { background: var(--oa-chip); } .ph-oa .oa-chip-fixed { gap: 6px; border-color: transparent; background: var(--oa-green-soft); color: var(--oa-green); font-weight: 600; } .ph-oa .oa-chip-plain { color: var(--oa-ink-3); } .ph-oa .oa-linkbtn { height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--oa-green); text-decoration: underline; } .ph-oa .oa-address:empty { display: none; } /* Top of the page: the address block, then the estimates caveat. The page's 48 px section gap is too wide under them. */ .ph-oa .oa-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: -28px; } .ph-sheet.ph-oa .oa-top { margin-bottom: -16px; } .ph-oa .oa-main .oa-disclaimer { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--oa-chip); font-size: 12px; line-height: 1.5; color: var(--oa-ink-2); } /* Amber banner: the advertisement has no exact address. */ .ph-oa .oa-addr-banner { padding: 16px 18px; border-radius: 12px; background: var(--oa-amber-soft); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ph-oa .oa-addr-bannertext { display: flex; flex-direction: column; gap: 2px; color: #6B2E09; min-width: 0; } .ph-oa .oa-addr-bannertext strong { font-size: 14px; font-weight: 600; } .ph-oa .oa-addr-bannertext span { font-size: 13px; } /* A complete address: one quiet line inviting a correction, not a warning. */ .ph-oa .oa-addr-banner-info { padding: 6px 14px; background: var(--oa-chip); } .ph-oa .oa-addr-banner-info .oa-addr-bannertext { color: var(--oa-ink-2); } .ph-oa .oa-addr-cta { flex-shrink: 0; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--oa-ink); color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; } /* Panel (desktop): suggestions on the left, what changes and the buttons on the right. */ .ph-oa .oa-addr-banner + .oa-addr-panel { margin-top: 12px; } .ph-oa .oa-addr-panel { padding: 20px; background: #fff; border: 1px solid var(--oa-line); border-radius: 14px; } .ph-oa .oa-addr-bar { display: none; } .ph-oa .oa-addr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } .ph-oa .oa-addr-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ph-oa .oa-addr-known { display: none; font-size: 12px; color: var(--oa-ink-3); } /* margin: 0 - the site's global label rule adds 6 px under every