/* Dashboard. Shares the home page's colours and masthead; each map card shows the map's own shape. */
:root{--paper:#f6f8fc;--ink:#18233b;--body:#4a566c;--muted:#75809a;--line:#dfe4ee;--blue:#1764b5;--green:#39845a;--rose:#c5767b;--sans:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1176px;margin:0 auto;padding-left:32px;padding-right:32px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.masthead-actions{display:flex;align-items:center;gap:8px}
button{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#3d495f;font:500 15px/1.3 var(--sans);cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s}
button:hover{background:#f1f4f9}
button:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:default}
button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:is(button,a):focus-visible{outline:3px solid #9fc8ed;outline-offset:3px}
.primary{padding:10px 18px 10px 14px;border-color:var(--blue);background:var(--blue);color:#fff;font-weight:550;box-shadow:0 3px 10px #1764b52e}
.primary:hover{background:#105397;border-color:#105397}
.quiet{border-color:transparent;background:none}
.quiet:hover{background:#e9eef6}
.danger{border-color:#e8bcc0;color:#ad5862}
.danger:hover{background:#fcf0f1}
.count{min-width:20px;padding:1px 6px;border-radius:10px;background:#e3ebf6;color:var(--blue);font-size:12.5px;font-weight:600;text-align:center}
.error{color:#ad5862;font-size:15px}
.error:empty{display:none}

main{padding-top:40px;padding-bottom:96px}
.heading{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
h1{margin:0;color:var(--ink);font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.035em}
.heading-count{font-size:16px;color:var(--muted)}
.loading{color:var(--muted)}

#map-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:22px}
.map-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px #34435c0a,0 1px 2px #34435c08;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.map-card:hover,.map-card:focus-within{border-color:#b7c9e2;box-shadow:0 14px 34px #34435c1c,0 1px 2px #34435c08;transform:translateY(-2px)}
.map-card>a{display:block;height:100%;color:inherit;text-decoration:none}
.map-card>a:focus-visible{outline-offset:-3px;border-radius:16px}
/* The map in miniature, on the editor's dotted ground. */
.shape{display:block;width:100%;height:168px;padding:18px 22px;border-bottom:1px solid #eaeef5;background:#fafbfe radial-gradient(#d3dae8 .8px,transparent .8px) 0 0/18px 18px}
.shape rect{fill:#fff;stroke:#c3cddd;stroke-width:1.2;vector-effect:non-scaling-stroke}
.shape .main{fill:#e7f0fb;stroke:#7fa9d8}
.shape .implicit{stroke-dasharray:3 3}
.shape path{fill:none;stroke:#a9b3c6;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.shape .supports{stroke:var(--green);stroke-width:1.8}
.shape .opposes{stroke:var(--rose);stroke-width:1.8}
.shape .clarifies{stroke:#8b97ad;stroke-width:1.8}
.shape .dot{stroke-width:9}
.map-text{padding:16px 20px 18px}
.map-card h2{margin:0;color:var(--ink);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.015em;overflow-wrap:anywhere}
.conclusion{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:5px 0 0;font-size:14.5px;line-height:1.5}
.meta{margin:12px 0 0;font-size:13px;color:var(--muted)}
.delete{position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border-color:var(--line);color:#8a94a8;opacity:0;transition:opacity .16s,background .16s,color .16s,border-color .16s}
.delete:hover{border-color:#e8bcc0;background:#fcf0f1;color:#ad5862}
.map-card:hover .delete,.delete:focus-visible{opacity:1}
@media(hover:none){.delete{opacity:1}}

.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;padding:64px 24px;border:1.5px dashed #c5cede;border-radius:16px;text-align:center}
.empty h2{margin:0;color:var(--ink);font-size:22px;font-weight:600;letter-spacing:-.02em}
.empty p{margin:8px 0 22px;max-width:420px}

dialog{width:min(480px,calc(100vw - 32px));padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--body);box-shadow:0 30px 90px #1924403d}
dialog::backdrop{background:#26335450;backdrop-filter:blur(3px)}
dialog h2{margin:0 0 10px;color:var(--ink);font-size:22px;font-weight:600;letter-spacing:-.02em}
dialog h3{margin:26px 0 10px;color:var(--ink);font-size:15px;font-weight:600}
dialog p{margin:0 0 12px}
.named{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.small{font-size:14px;color:var(--muted)}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
#agents-dialog{width:min(580px,calc(100vw - 32px))}
.close{position:absolute;top:16px;right:16px;width:34px;height:34px;padding:0;border-color:transparent;color:#8a94a8}
.address{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
.address code{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#f7f9fc;color:var(--ink);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.connections{list-style:none;margin:0;padding:0}
.connections li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid #eaeef5}
.connections strong{display:block;color:var(--ink);font-weight:600}
.connections span{font-size:13px;color:var(--muted)}
.connections button{padding:7px 12px;font-size:14px}

/* Sign-in page and the account panel. */
.signin{max-width:400px;margin:24px auto 0;padding:32px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 4px 14px #34435c0a,0 1px 2px #34435c08}
.signin .lead{margin:10px 0 24px}
.signin form{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.signin label{color:var(--ink);font-size:14px;font-weight:550}
.signin .error{margin:18px 0 0}
input{width:100%;padding:10px 12px;border:1px solid #cfd6e3;border-radius:10px;background:#fff;color:var(--ink);font:400 16px/1.3 var(--sans)}
input:focus-visible{outline:3px solid #9fc8ed;outline-offset:1px;border-color:var(--blue)}
.code{font-size:22px;letter-spacing:.3em;text-align:center}
.wide{width:100%;padding-top:11px;padding-bottom:11px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#3d495f;font:500 15px/1.3 var(--sans);text-decoration:none;transition:background .16s}
.button:hover{background:#f1f4f9}
.button .author-icon{width:17px;height:17px;flex:none}
.providers{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid #eaeef5}
#step-code .quiet,#step-passkey .quiet{margin-top:8px}
[hidden]{display:none!important}
.account-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}

@media(max-width:600px){
 .wrap{padding-left:16px;padding-right:16px}
 main{padding-top:24px}
 h1{font-size:28px}
 .brand{font-size:0;gap:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}