via the pageclass block), so pages can never collide with each other. ════════════════════════════════════════════════════════════════════ */ /* ═══ Page: dashboard.html (scope .pg-dashboard) ═══ */ .pg-dashboard .stat.circle .num { color: var(--green); } .pg-dashboard .stat.atrisk .num { color: var(--warm); } /* Mini bar-trend inside the reach tile (one bar per calendar month). */ .pg-dashboard .vt-trend { display: flex; gap: 5px; align-items: flex-end; height: 34px; margin: 4px 0 2px; } .pg-dashboard .vt-trend-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; } .pg-dashboard .vt-trend-col i { display: block; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--line); } .pg-dashboard .vt-trend-col i.ok { background: var(--green); } .pg-dashboard .vt-trend-col span { font-size: 9px; color: var(--muted); line-height: 1; } .pg-dashboard .gesture-stale { color: var(--warm); margin: -4px 0 8px; } /* Momentum cards are links to their detail view. */ .pg-dashboard a.card.stat { color: inherit; text-decoration: none; transition: border-color .12s; } .pg-dashboard a.card.stat:hover { border-color: var(--accent); text-decoration: none; } .pg-dashboard .dash h2 { display: flex; align-items: baseline; gap: 10px; } .pg-dashboard .dash h2 .more { font-size: 13px; font-weight: 400; } .pg-dashboard .due-item { border-left: 3px solid var(--hot); } .pg-dashboard .due-item.today { border-left-color: var(--accent); } .pg-dashboard .change-item { border-left: 3px solid var(--green); padding-left: 12px; } .pg-dashboard .change-move { margin-top: 3px; } .pg-dashboard .reason { white-space: nowrap; } /* Pipeline funnel: clickable stage boxes joined by arrows. */ .pg-dashboard .funnel { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .pg-dashboard .funnel .stage { flex: 1; min-width: 130px; text-align: center; padding: 14px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); } .pg-dashboard .funnel .stage:hover { border-color: var(--accent); text-decoration: none; } .pg-dashboard .funnel .stage .n { font-size: 26px; font-weight: 700; } .pg-dashboard .funnel .stage .s { display: block; font-size: 13px; color: var(--muted); } .pg-dashboard .funnel .arrow { align-self: center; color: var(--muted); } .pg-dashboard .funnel .stage.st-live .n { color: #1d7a46; } .pg-dashboard .funnel .stage.st-unresponsive .n { color: var(--hot); } /* Mobile: a 2×2 grid — the arrows only make sense in a single row. */ @media (max-width: 760px) { .pg-dashboard .funnel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pg-dashboard .funnel .arrow { display: none; } } .pg-dashboard .round { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pg-dashboard .round-card { border-left: 3px solid var(--accent); } .pg-dashboard .round-why { margin: 6px 0 10px; } .pg-dashboard .round-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pg-dashboard .round-actions form { margin: 0; } .pg-dashboard .round-write { padding: 8px 14px; border-radius: 8px; display: inline-block; } .pg-dashboard .round-write:hover { text-decoration: none; } .pg-dashboard .intent-tag { background: var(--accent-soft); color: var(--accent); } @media (max-width: 760px) { .pg-dashboard .round { grid-template-columns: 1fr; } } /* ═══ Page: contacts.html (scope .pg-contacts) ═══ */ /* Search autocomplete: dropdown anchored to the search field. */ .pg-contacts .search-wrap { position: relative; flex: 1; min-width: 220px; } .pg-contacts .search-wrap input[type=text] { width: 100%; } .pg-contacts .ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; } .pg-contacts .ac-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; } .pg-contacts .ac-item:hover, .pg-contacts .ac-item.active { background: var(--hover); } .pg-contacts .ac-name { font-weight: 600; } .pg-contacts .ac-sub { font-size: 12.5px; color: var(--muted); } /* Space budget: the role column absorbs the slack but never exceeds two lines (full title on the sheet); data columns stay compact on one line. */ /* Fixed layout: each column's width comes from the , the Rôle column takes the remainder, and the colspan summary row can no longer inflate the columns it spans (the flaw of auto table layout). */ .pg-contacts table.grid { table-layout: fixed; } .pg-contacts .grid th { white-space: nowrap; } .pg-contacts .grid th:nth-child(n+5), .pg-contacts .grid td:nth-child(n+5) { padding-left: 6px; padding-right: 6px; } .pg-contacts .grid td { overflow: hidden; } /* Name and company wrap up to two lines before truncating (like Rôle). */ .pg-contacts .name-clamp, .pg-contacts .co-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pg-contacts .co-clamp { font-weight: 500; } .pg-contacts .role-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Keep each contact's qualification detail visually attached to its row — ONE line, then ellipsis: the list is for scanning, the sheet for reading. */ .pg-contacts .grid tbody tr:has(+ .detailrow) td { border-bottom: 0; } .pg-contacts .grid tbody tr.detailrow td { border-top: 0; padding-top: 0; padding-bottom: 10px; } .pg-contacts .grid tbody tr.detailrow:hover { background: transparent; } .pg-contacts .detail-cell { line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-contacts .detail-cell strong { font-weight: 500; } /* Warmth dot beside the name: hot/warm/cold at a glance. */ .pg-contacts .warmth-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; margin-right: 2px; } .pg-contacts .warmth-dot.hot { background: var(--live); } .pg-contacts .warmth-dot.warm { background: var(--warm); } .pg-contacts .warmth-dot.cold { background: var(--line-strong); } .pg-contacts .pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 18px 0; } .pg-contacts .pager a, .pg-contacts .pager .pg { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--field-bg); color: var(--accent); } .pg-contacts .pager a:hover { background: var(--accent); color: #fff; text-decoration: none; } .pg-contacts .pager .pg.cur { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } /* Mobile: stacked cards. The checkbox columns (connu/ignorer) live on the contact sheet instead. The card shows the one-sentence who_summary in full; the longer rationale is desktop-only (never truncate mid-text). */ @media (max-width: 760px) { .pg-contacts .filters .search-wrap { grid-column: 1 / -1; } .pg-contacts .grid.stack td:nth-child(5), .pg-contacts .grid.stack td:nth-child(6) { display: none; } .pg-contacts .grid.stack tr:has(+ .detailrow:has(strong)) { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: none; padding-bottom: 2px; } .pg-contacts .grid.stack tr.detailrow { margin-top: -8px; border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); padding-top: 0; } .pg-contacts .grid.stack tr.detailrow:not(:has(strong)) { display: none; } .pg-contacts .grid.stack tr.detailrow:hover { background: var(--panel); } .pg-contacts .grid.stack .detail-cell { max-width: none; white-space: normal; } .pg-contacts .grid.stack .name-clamp, .pg-contacts .grid.stack .co-clamp { white-space: normal; } .pg-contacts .grid.stack .detail-cell .rationale-part { display: none; } } /* ═══ Page: contact_detail.html (scope .pg-contact) ═══ */ .pg-contact /* :not([hidden]) so the `hidden` attribute (toggled by JS) still wins — a bare `display:flex` would override the browser's [hidden] {display:none} .pg-contact . */ .pot-display:not([hidden]) { cursor: pointer; display: flex; align-items: center; gap: 10px; } .pg-contact .pot-display .edit-hint { margin-left: auto; opacity: .35; } .pg-contact .pot-display:hover .edit-hint { opacity: 1; } .pg-contact .pot-edit:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; } .pg-contact .pot-edit select, .pg-contact .pot-edit input[type=number] { padding: 6px 8px; } .pg-contact .pot-edit input[type=number] { width: 80px; } /* Secondary "Annuler" button: neutral, so the blue "Enregistrer" stays primary. */ .pg-contact .pot-edit .btn-cancel { background: var(--field-bg); color: var(--muted); border: 1px solid var(--line); } .pg-contact .pot-edit .btn-cancel:hover { background: var(--hover); } /* Champs étiquetés, partagés par « Prochain pas » et « Noter un échange ». */ .pg-contact .field-label { font-size: 12px; color: var(--muted); } .pg-contact .career h3 { margin: 0 0 10px; font-size: 14px; } .pg-contact .career-trail { list-style: none; margin: 0; padding: 0; } .pg-contact .career-trail li { position: relative; padding: 0 0 10px 18px; border-left: 2px solid var(--line); } .pg-contact .career-trail li:last-child { padding-bottom: 0; border-left-color: transparent; } .pg-contact .career-trail li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .pg-contact .career-trail li.now::before { background: var(--green); } .pg-contact .gesture-card { border-left: 3px solid var(--green); margin: 14px 0; } .pg-contact .gesture-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 12px; } .pg-contact .gesture-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .pg-contact .subjects-card .sub-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .pg-contact .subjects-card .pair-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; } .pg-contact .subjects-card .pair-link:hover { border-color: var(--accent); } .pg-contact .subjects-card .pair-link .who { color: var(--muted); font-size: 13px; } .pg-contact .touch-log { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--accent-soft); } .pg-contact .touch-log > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; list-style: none; font-weight: 600; color: var(--accent-ink); } .pg-contact .touch-log > summary::-webkit-details-marker { display: none; } .pg-contact .touch-log > summary::before { content: "▸"; font-weight: 400; } .pg-contact .touch-log[open] > summary::before { content: "▾"; } .pg-contact .touch-log .touch-hint { font-weight: 400; margin: 0; } .pg-contact .touch-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .pg-contact .touch-fields { display: flex; flex-wrap: wrap; gap: 12px; } .pg-contact .field { display: flex; flex-direction: column; gap: 3px; } .pg-contact .field-note input { width: 100%; } .pg-contact .touch-form button { align-self: flex-start; } .pg-contact .detected { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .pg-contact .detected > p { margin: 0 0 8px; } .pg-contact .detected-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fffdf5; border: 1px solid #f0e6c0; border-radius: 10px; } .pg-contact .detected-chip .chip-note { flex: 1; min-width: 180px; } .pg-contact .detected-chip .chip-meta { color: #777; } .pg-contact .detected-chip form { display: inline; margin: 0; } .pg-contact .detected-chip .btn-add { padding: 5px 12px; } .pg-contact .detected-chip .btn-skip { padding: 5px 10px; background: var(--field-bg); color: #777; border: 1px solid var(--line); } .pg-contact .detected-chip .btn-skip:hover { background: var(--hover); } .pg-contact .exch-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .pg-contact .exch-actions .edit-exch > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; } .pg-contact .exch-actions .edit-exch > summary::-webkit-details-marker { display: none; } .pg-contact .exch-actions .edit-exch[open] > summary { color: var(--accent); } .pg-contact .exch-actions form { margin: 0; } .pg-contact .edit-exch .touch-form { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--accent-soft); } /* Sent vs received: offset the row to read like a conversation — mine (envoyé) sit left, theirs (reçu) sit right. */ .pg-contact .timeline li.side-out { margin-right: 14%; } .pg-contact .timeline li.side-in { margin-left: 14%; } @media (max-width: 760px) { .pg-contact .timeline li.side-out { margin-right: 8%; } .pg-contact .timeline li.side-in { margin-left: 8%; } } /* ═══ Page: planning.html (scope .pg-planning) ═══ */ .pg-planning .plan h2 { margin-top: 30px; } .pg-planning .plan-group { margin: 14px 0 22px; border-left: 3px solid var(--line); padding-left: 14px; } .pg-planning .plan-overdue { border-color: var(--hot); } .pg-planning .plan-today { border-color: var(--accent); } .pg-planning .plan-week { border-color: var(--warm); } .pg-planning .plan-group h3 { margin: 6px 0 10px; font-size: 15px; } /* ═══ Page: topics.html (scope .pg-topics) ═══ */ .pg-topics .topic-list { display: grid; gap: 12px; margin-top: 18px; } .pg-topics .topic-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); } .pg-topics .topic-card:hover { border-color: var(--accent); } .pg-topics .topic-card .name { font-weight: 600; font-size: 15px; } .pg-topics .topic-card .note { color: var(--muted); font-size: 13px; margin-top: 2px; } .pg-topics .topic-counts { display: flex; gap: 8px; flex-shrink: 0; } .pg-topics .new-topic { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .pg-topics .new-topic input[type=text] { flex: 1; min-width: 180px; } /* ═══ Page: topic_detail.html (scope .pg-topic) ═══ */ .pg-topic .topic-desc { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 6px 0 4px; max-width: 720px; } .pg-topic .topic-desc textarea { width: 100%; box-sizing: border-box; resize: vertical; color: var(--muted); font-size: 13px; } .pg-topic .pools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } @media (max-width: 720px) { .pg-topic .pools { grid-template-columns: 1fr; } } .pg-topic .pool h2 { font-size: 15px; margin: 0 0 10px; } .pg-topic .pool .hint { color: var(--muted); font-size: 12.5px; margin: -6px 0 12px; } .pg-topic .member { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); margin-bottom: 8px; background: var(--field-bg); } .pg-topic .member .who a { font-weight: 600; } .pg-topic .member .who .co { color: var(--muted); font-size: 12.5px; } .pg-topic .member .mnote { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .pg-topic .add-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .pg-topic .add-form select, .pg-topic .add-form input { width: 100%; box-sizing: border-box; } .pg-topic .pair-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; } .pg-topic .pair-card:hover { border-color: var(--accent); } .pg-topic .pair-card .x { font-size: 14px; } .pg-topic .pair-card .x .arr { color: var(--muted); margin: 0 8px; } .pg-topic .make-pair { margin-top: 12px; display: grid; gap: 8px; grid-template-columns: 1fr auto 1fr auto; align-items: center; } @media (max-width: 720px) { .pg-topic .make-pair { grid-template-columns: 1fr; } } .pg-topic .suggest { margin-top: 10px; } .pg-topic .cta-suggest { font-size: 12.5px; } .pg-topic .suggestions { display: flex; flex-direction: column; gap: 6px; } .pg-topic .suggestions:not(:empty) { margin-top: 8px; } .pg-topic .sugg { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm, 8px); background: var(--surface-2, #fff); } .pg-topic .sugg .s-name { font-weight: 600; font-size: 13px; } .pg-topic .sugg .s-why { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.4; } .pg-topic .sugg .s-add { background: none; border: none; color: var(--accent); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } /* ═══ Page: pair_detail.html (scope .pg-pair) ═══ */ .pg-pair .pair-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 14px 0 8px; } .pg-pair .pair-side { flex: 1; min-width: 200px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); } .pg-pair .pair-side .role { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .pg-pair .pair-side .nm { font-weight: 600; font-size: 15px; margin-top: 3px; } .pg-pair .pair-side .co { color: var(--muted); font-size: 13px; } .pg-pair .cross { align-self: center; font-size: 20px; color: var(--muted); } .pg-pair .status-form { margin: 6px 0 22px; display: flex; gap: 8px; align-items: center; } .pg-pair .timeline { border-left: 3px solid var(--line); padding-left: 16px; margin: 8px 0 26px; } .pg-pair .tl-event { margin-bottom: 16px; } .pg-pair .tl-event .meta { font-size: 12.5px; color: var(--muted); } .pg-pair .tl-event .body { margin-top: 3px; } .pg-pair .ev-form { display: flex; flex-direction: column; gap: 8px; max-width: 540px; } .pg-pair .ev-form .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pg-pair .ev-form textarea { width: 100%; box-sizing: border-box; min-height: 60px; } /* ═══ Page: network.html (scope .pg-network) ═══ */ .pg-network .net-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0; } /* .seg pill styles are global in style.css */ .pg-network .type-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pg-network .type-chips .chip { cursor: pointer; padding: 5px 11px; font-size: 13px; opacity: .45; } .pg-network .type-chips .chip.on { opacity: 1; } .pg-network .net-controls select, .pg-network .net-controls input[type=search] { padding: 7px 10px; } .pg-network .net-controls input[type=search] { min-width: 200px; } .pg-network #net-legend span.dot { font-size: 16px; vertical-align: -1px; } .pg-network #net-legend span.ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); vertical-align: -1px; margin-right: 2px; } .pg-network .net-wrap { position: relative; } .pg-network #net { width: 100%; height: 78vh; min-height: 620px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .pg-network #net .link { stroke: var(--line-strong); } .pg-network #net text.lbl { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; } .pg-network #net text.cnt { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; fill: var(--ink); font-weight: 700; } .pg-network #net-panel { position: absolute; top: 14px; right: 14px; width: 280px; z-index: 2; box-shadow: var(--shadow-pop); } .pg-network #net-panel .np-close { position: absolute; top: 6px; right: 6px; background: none; border: none; color: var(--muted); padding: 4px 8px; border-radius: 6px; } .pg-network #net-panel .np-close:hover { background: var(--hover); } .pg-network #net-panel .np-name { font-weight: 600; font-size: 16px; margin-right: 24px; } .pg-network #net-panel .np-role { margin: 4px 0 8px; } .pg-network #net-panel .np-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .pg-network #net-panel .np-open { display: inline-block; } @media (max-width: 760px) { .pg-network #net { height: 64vh; min-height: 420px; } .pg-network #net-panel { left: 10px; right: 10px; width: auto; top: auto; bottom: 10px; } .pg-network .net-controls input[type=search] { min-width: 100%; } } /* ═══ Page: news.html (scope .pg-actu) ═══ */ .pg-actu .actu-grid { display: grid; gap: 18px; grid-template-columns: 320px 1fr; align-items: start; } @media (max-width: 860px) { .pg-actu .actu-grid { grid-template-columns: 1fr; } } .pg-actu .feed-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); } .pg-actu .feed-row:last-child { border-bottom: none; } .pg-actu .feed-row .fr-main { flex: 1; min-width: 0; } .pg-actu .feed-row .fr-label { font-weight: 600; font-size: 14px; } .pg-actu .feed-row .fr-url { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-actu .feed-row .fr-err { font-size: 12px; color: #b42318; } .pg-actu .feed-row form { margin: 0; } .pg-actu .feed-row .x { background: none; color: var(--muted); padding: 4px 8px; } .pg-actu .feed-add { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .pg-actu .feed-add input[name=url] { flex: 1; min-width: 160px; padding: 7px 10px; } .pg-actu .feed-add input[name=label] { width: 110px; padding: 7px 10px; } .pg-actu .topic-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .pg-actu .topic-controls input[type=text] { flex: 1; min-width: 180px; padding: 8px 11px; } .pg-actu .topic-card { padding: 16px; margin-bottom: 14px; } .pg-actu .topic-card h3 { margin: 0 0 6px; font-size: 17px; } .pg-actu .topic-card .angle { margin: 0 0 10px; } .pg-actu .topic-card .src { font-size: 13px; margin-bottom: 10px; } .pg-actu .topic-card .why-now { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .pg-actu .reach { font-size: 13px; background: var(--accent-soft); border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; } .pg-actu .reach .names { margin-top: 4px; } .pg-actu .reach .who { display: inline-block; margin: 2px 6px 2px 0; } .pg-actu .reach .who.known::before { content: "👤 "; } .pg-actu .people .person { padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; } .pg-actu .people .person .pn { font-weight: 600; } .pg-actu .people .person .pw { color: var(--muted); } .pg-actu .ta-actions { display: flex; gap: 8px; flex-wrap: wrap; } .pg-actu #topics-status { color: var(--muted); margin: 10px 0; } /* ═══ Page: redaction.html (scope .pg-redaction) ═══ */ .pg-redaction .aud-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; } .pg-redaction .aud-target { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line-strong); border-radius:8px; padding:2px; } .pg-redaction .aud-target .aud-lbl { color:var(--muted); font-size:0.78rem; padding:0 6px; } .pg-redaction .aud-target button { border:0; background:transparent; padding:4px 10px; border-radius:6px; cursor:pointer; font-size:0.82rem; color:var(--ink); } .pg-redaction .aud-target button.on { background:var(--accent); color:#fff; } .pg-redaction .aud-btn { border:1px solid var(--line-strong); background:var(--field-bg); border-radius:8px; padding:5px 11px; cursor:pointer; font-size:0.82rem; } .pg-redaction .aud-btn:hover { border-color:var(--accent); } .pg-redaction .aud-out:not(:empty) { margin:8px 0 4px; } .pg-redaction .aud-card { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--surface-2); } .pg-redaction .aud-card h4 { margin:0 0 6px; font-size:0.9rem; } .pg-redaction .topic-item { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:6px 0; background:var(--field-bg); cursor:pointer; } .pg-redaction .topic-item:hover { border-color:var(--accent); background:var(--hover); } .pg-redaction .topic-item .t-title { font-weight:600; font-size:0.9rem; } .pg-redaction .topic-item .t-angle { color:var(--muted); font-size:0.84rem; margin-top:2px; } .pg-redaction .topic-item .t-meta { color:var(--muted); font-size:0.76rem; margin-top:4px; } .pg-redaction .reso-chips { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 8px; } .pg-redaction .reso-chip { background:var(--accent-soft); border-radius:12px; padding:2px 9px; font-size:0.76rem; color:var(--accent-ink); } .pg-redaction .reso-person { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-top:1px solid var(--line); font-size:0.82rem; } .pg-redaction .reso-person .rp-meta { color:var(--muted); } .pg-redaction .reso-score { color:var(--green); font-variant-numeric:tabular-nums; } .pg-redaction .aud-muted { color:var(--muted); font-size:0.82rem; } /* This page needs the full width: override the content column locally. */ .pg-redaction main { max-width: none; } /* The mode switcher anchors the whole page: centered, like the panes it drives. (.seg pill styles are global in style.css.) */ .pg-redaction #write-tabs { display: flex; width: fit-content; margin: 4px auto 14px; } /* Focused single-form panes: centered column, real title, carded fields. */ .pg-redaction .write-pane { max-width: 660px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 4px; } .pg-redaction .write-pane[hidden] { display: none; } .pg-redaction .write-pane h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0; } .pg-redaction .pane-sub { margin: 2px 0 14px; font-size: 14px; } .pg-redaction .write-pane .card { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; } .pg-redaction .write-pane .card > button { align-self: stretch; padding: 12px; font-size: 15px; font-weight: 600; margin-top: 2px; } .pg-redaction .field { display: flex; flex-direction: column; gap: 6px; } .pg-redaction .intent-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pg-redaction .intent-chips .chip { cursor: pointer; font-size: 13px; padding: 6px 12px; color: var(--ink); } .pg-redaction .intent-chips .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .pg-redaction .field > span:first-child { font-weight: 600; font-size: 13.5px; } .pg-redaction .field .hint { color: var(--muted); font-size: 12.5px; } .pg-redaction #msg-picker { position: relative; } .pg-redaction #msg-picker input { width: 100%; } .pg-redaction #msg-options { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--field-bg); border: 1px solid var(--line); border-radius: 0 0 10px 10px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } .pg-redaction .msg-option { padding: 8px 12px; cursor: pointer; font-size: 0.9rem; border-bottom: 1px solid var(--line); } .pg-redaction .msg-option:hover { background: var(--hover); } .pg-redaction .post-card { position: relative; background: var(--field-bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 10px; } .pg-redaction .post-card pre { margin: 0; white-space: pre-wrap; font: inherit; line-height: 1.6; padding-right: 70px; } .pg-redaction .copy-mini { position: absolute; top: 10px; right: 10px; padding: 4px 10px; font-size: 12px; background: var(--field-bg); color: var(--accent); border: 1px solid var(--line); } .pg-redaction .copy-mini:hover { background: var(--accent); color: #fff; } .pg-redaction #rw-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; } .pg-redaction #rw-toolbar button { background: var(--field-bg); color: var(--accent); border: 1px solid var(--line); } .pg-redaction #rw-toolbar button:hover { background: var(--hover); } .pg-redaction #rewrite-page { display: flex; height: calc(100vh - 200px); min-height: 560px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--field-bg); } .pg-redaction #rewrite-left { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .pg-redaction #rewrite-left h2, .pg-redaction #rewrite-center h2 { font-size: 14px; font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0; flex-shrink: 0; } .pg-redaction #rewrite-center { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line); overflow: hidden; } .pg-redaction #rw-output { flex: 1; overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; line-height: 1.7; background: var(--surface-2); color: var(--ink); } .pg-redaction #rw-output h1, .pg-redaction #rw-output h2, .pg-redaction #rw-output h3 { color: var(--accent); margin-top: 16px; font-size: 1rem; } .pg-redaction #rw-center-actions { flex-shrink: 0; display: flex; gap: 10px; } .pg-redaction #rw-title { padding: 10px 14px; } .pg-redaction #rw-text { flex: 1; min-height: 280px; padding: 14px; resize: none; line-height: 1.6; } .pg-redaction #rw-annotated { flex: 1; min-height: 280px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; line-height: 1.6; overflow-y: auto; background: var(--surface-2); } .pg-redaction #rw-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .pg-redaction #rw-actions button, .pg-redaction #rw-center-actions button { background: var(--field-bg); color: var(--accent); border: 1.5px solid var(--accent); font-weight: 600; } .pg-redaction #rw-actions button:hover, .pg-redaction #rw-center-actions button:hover { background: var(--hover); } .pg-redaction #rw-actions button:disabled, .pg-redaction #rw-center-actions button:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; background: var(--field-bg); } .pg-redaction #rewrite-panel { width: 420px; min-width: 420px; background: var(--bg); border-left: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; min-height: 0; } .pg-redaction #rw-panel-scroll { flex: 1; overflow-y: auto; } .pg-redaction #rw-panel-placeholder { color: var(--muted); font-style: italic; padding: 24px 4px; } .pg-redaction #rewrite-panel h3 { font-size: 0.9rem; color: var(--accent); font-weight: 700; margin: 0 0 12px; } .pg-redaction .rw-chip-intent { display: inline-block; padding: 4px 12px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; } .pg-redaction .rw-section-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .pg-redaction .rw-label-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .pg-redaction .rw-purpose { flex: 1; color: var(--muted); } .pg-redaction .rw-wc { color: var(--muted); font-size: 0.8rem; } .pg-redaction .rw-compare-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .pg-redaction .rw-compare-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--line-strong); } .pg-redaction .rw-compare-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; } .pg-redaction .rw-pct-cell { white-space: nowrap; color: var(--muted); font-size: 0.8rem; } .pg-redaction .rw-bar-wrap { display: inline-block; width: 50px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 4px; } .pg-redaction .rw-bar { height: 100%; border-radius: 3px; } .pg-redaction .rw-row-missing { background: #fef2f2; } .pg-redaction .rw-row-under { background: #fefce8; } .pg-redaction .rw-row-over { background: #eff6ff; } .pg-redaction .rw-arc-step { display: flex; align-items: center; gap: 8px; padding: 2px 0; flex-wrap: wrap; } .pg-redaction .rw-arc-words { font-size: 0.72rem; color: var(--muted); font-weight: 600; } .pg-redaction .rw-arc-purpose { font-size: 0.78rem; color: #777; font-style: italic; } .pg-redaction .rw-arc-arrow { color: #ccc; font-size: 0.8rem; padding-left: 10px; } .pg-redaction .rw-arc-issue { font-size: 0.75rem; color: var(--muted); font-style: italic; margin: 2px 0 0; line-height: 1.3; width: 100%; } .pg-redaction .rw-section-tag { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; padding: 6px 0; border-top: 1px solid var(--line); } .pg-redaction .rw-tag-purpose { font-size: 0.8rem; color: #777; font-style: italic; } .pg-redaction .rw-tag-wc { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-left: auto; } .pg-redaction .rw-added { background: linear-gradient(to bottom, transparent 60%, #fff176 60%); } .pg-redaction .rw-lost { background: linear-gradient(to bottom, transparent 60%, #ffab91 60%); cursor: help; } .pg-redaction .rw-regen-info { margin-top: 8px; padding: 8px 12px; border-radius: 6px; background: #fff8e1; border-left: 3px solid #e9c46a; font-size: 0.8rem; } .pg-redaction .rw-regen-notice { margin: 12px 0; padding: 10px 14px; border-radius: 6px; background: var(--hover); border-left: 3px solid var(--accent); font-size: 0.85rem; color: var(--accent); font-style: italic; } .pg-redaction #rw-target-wrap { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field-bg); } .pg-redaction #rw-target-wrap label { font-size: 0.82rem; color: var(--muted); font-weight: 600; white-space: nowrap; } .pg-redaction #rw-target-words { width: 70px; border: none; font-weight: 600; text-align: center; padding: 4px; } .pg-redaction .rw-target-unit { font-size: 0.78rem; color: var(--muted); } @media (max-width: 1100px) { .pg-redaction #rewrite-page { flex-direction: column; height: auto; } .pg-redaction #rewrite-panel { width: auto; min-width: 0; border-left: none; border-top: 1px solid var(--line); } .pg-redaction #rewrite-center { border-left: none; border-top: 1px solid var(--line); } } /* ═══ Page: profile.html (scope .pg-profile) ═══ */ /* Two-column config grid: LinkedIn on the left, intelligence on the right. */ .pg-profile .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .pg-profile .profile-grid .card { margin: 0; } @media (max-width: 960px) { .pg-profile .profile-grid { grid-template-columns: 1fr; } } /* Voice accordion: one quiet row per facet; the dot says filled/empty. */ .pg-profile .voice-field { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--field-bg); } .pg-profile .voice-field summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; } .pg-profile .voice-field summary::-webkit-details-marker { display: none; } .pg-profile .voice-field summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; } .pg-profile .voice-field[open] summary::after { transform: rotate(90deg); } .pg-profile .voice-field summary:hover { background: var(--hover); border-radius: var(--r-md); } .pg-profile .voice-field .vf-help { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pg-profile .voice-field textarea { display: block; width: calc(100% - 28px); margin: 0 14px 12px; } .pg-profile .vf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--line-strong); align-self: center; } .pg-profile .vf-dot.on { background: var(--green); } .pg-profile .corpus-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; } .pg-profile .corpus-list { margin: 8px 0 2px; padding-left: 4px; list-style: none; } .pg-profile .corpus-list li { padding: 2px 0; } .pg-profile .corpus-empty { margin: 8px 0 2px; } .pg-profile .voice-gen { margin: 8px 0 14px; } .pg-profile .news-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .pg-profile .voice-form { display: flex; flex-direction: column; gap: 12px; } .pg-profile .voice-form label { display: flex; flex-direction: column; gap: 4px; } .pg-profile .voice-form button { align-self: flex-start; } .pg-profile .email-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 4px; } .pg-profile .email-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 260px; } .pg-profile .coach-status { display: flex; gap: 12px; align-items: center; margin: 10px 0; flex-wrap: wrap; } .pg-profile .test-form { margin-top: 10px; } .pg-profile .btn-outline { background: var(--field-bg); color: var(--accent); border: 1px solid var(--accent); } .pg-profile .btn-outline:hover { background: var(--accent-soft); color: var(--accent); } /* ═══ Component: coach widget (included on several pages) ═══ */ #coach-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; padding: 0; font-size: 24px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } #coach-panel { position: fixed; right: 24px; bottom: 92px; z-index: 60; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); } #coach-panel:not([hidden]) { display: flex; flex-direction: column; } .cw-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); } .cw-head-actions { display: flex; align-items: center; gap: 2px; } .cw-icon { background: none; border: none; color: var(--muted); padding: 4px 8px; font-size: 15px; border-radius: 6px; } .cw-icon:hover { background: var(--hover); color: var(--ink); } .cw-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; } .bubble { max-width: 88%; padding: 9px 12px; border-radius: 10px; line-height: 1.45; } .bubble-text { white-space: pre-wrap; } .bubble.me { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--line); } .bubble.them { align-self: flex-start; background: var(--surface-2); border-left: 3px solid var(--accent); } .bubble.pending .bubble-text:empty::after { content: '…'; animation: cw-blink 1s infinite; } @keyframes cw-blink { 50% { opacity: .25; } } .bubble .muted { display: block; margin-top: 4px; } /* margin:auto centers the empty state in the (otherwise empty) flex column. */ .cw-empty { margin: auto; text-align: center; padding: 0 12px; } .cw-empty p { margin: 4px 0 10px; } .cw-suggest { background: var(--field-bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: left; line-height: 1.4; } .cw-suggest:hover { background: var(--hover); } .cw-mobilize { display: flex; align-items: center; gap: 6px; padding: 6px 12px 0; color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; } .cw-mobilize input { accent-color: var(--accent); cursor: pointer; } #coach-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: flex-end; } #coach-form textarea { flex: 1; resize: none; border-radius: 10px; overflow-y: auto; } .cw-send { border-radius: 10px; padding: 0 16px; } /* Mobile: sit above the bottom tab bar. */ @media (max-width: 880px) { #coach-fab { bottom: calc(76px + env(safe-area-inset-bottom)); } #coach-panel { bottom: calc(140px + env(safe-area-inset-bottom)); height: min(480px, calc(100vh - 220px)); } } /* ═══ Page: login.html (scope .pg-login) — standalone, no app shell ═══ */ .pg-login { display: grid; place-items: center; min-height: 100vh; padding: 20px; } .pg-login .login-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .pg-login .login-brand { display: flex; align-items: center; gap: 10px; } .pg-login .login-name { font-weight: 700; font-size: 17px; } .pg-login .login-card p { margin: 0; } .pg-login form { display: flex; flex-direction: column; gap: 10px; } .pg-login input[type=password] { width: 100%; box-sizing: border-box; } .pg-login .login-error { color: var(--red); }