/* Ported from cleardmarc-design/redesign/canvas/project/kit.css by
   scripts/port-design-css.py. Do not edit above the "site" marker: change the design file
   and run the script again. Site-only rules go below the marker. */

/* ClearDMARC kit: shared primitives the screens need beyond cd.css. Base-level names, reserved: page stylesheets must prefix their own classes. Loads after cd.css. */
/* small icon button, danger button */
.cd .icon-btn-sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.cd .icon-btn-quiet{border-color:transparent;background:transparent}
.cd .icon-btn:focus-visible,.cd .input:focus-visible,.cd .select:focus-visible,.cd .menu-item:focus-visible,.cd .subnav-item:focus-visible,.cd .pager-n:focus-visible,.cd .cal-day:focus-visible,.cd .th-sort>button:focus-visible,.cd .chip-x>button:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}
.cd .btn-danger{background:var(--bad);color:#fff;box-shadow:var(--shadow-sm)}
.cd .btn[disabled],.cd .btn.is-disabled{opacity:.5;cursor:not-allowed}
.cd .btn.is-busy{cursor:progress}
.cd .btn-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;flex:none;animation:cd-kit-spin .8s linear infinite}
@keyframes cd-kit-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cd .btn-spin{animation:none}}
/* field */
.cd .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cd .field-label{font-size:14px;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--text)}
.cd .field-opt{font-size:12px;font-weight:400;color:var(--text-3)}
.cd .field .input,.cd .field .select,.cd .field .input-group{width:100%}
.cd .input::placeholder{color:var(--text-3)}
.cd .input[disabled],.cd .input[readonly]{background:var(--surface-sunken);color:var(--text-2)}
.cd .textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
.cd .input-group{display:flex;align-items:stretch;min-width:0}
.cd .input-group>.input{flex:1 1 auto;min-width:0;border-radius:0}
.cd .input-group>:first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}
.cd .input-group>:last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.cd .input-group>*+*{margin-left:-1px}
.cd .input-affix{display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--border-control);background:var(--surface-sunken);color:var(--text-2);font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.cd .field-hint{font-size:13px;color:var(--text-2);line-height:1.45}
.cd .field-error{font-size:13px;color:var(--bad-ink);line-height:1.45;display:flex;gap:6px;align-items:flex-start}
.cd .field.is-invalid .input,.cd .field.is-invalid .input-affix{border-color:var(--bad)}
.cd .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.cd .form-grid>.field-wide{grid-column:1 / -1}
.cd .form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
/* toolbar, search, filter chips */
.cd .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px var(--pad-card)}
.cd .card>.toolbar{border-bottom:1px solid var(--border)}
.cd .toolbar .select{min-width:0}
.cd .search{position:relative;display:flex;align-items:center;min-width:0}
.cd .toolbar>.search{flex:1 1 240px;max-width:360px}
.cd .search>.i{position:absolute;left:12px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.cd .search>.input{width:100%;padding-left:36px}
.cd .filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px var(--pad-card);font-size:13px;color:var(--text-2)}
.cd .card>.filters{border-bottom:1px solid var(--border);background:var(--surface-sunken)}
.cd .chip-x{font-family:var(--font-sans);font-size:13px;font-weight:600;background:var(--primary-tint);border-color:var(--primary-tint-2);color:var(--primary-ink);padding-right:4px}
.cd .chip-x>button{width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;padding:0}
.cd .chip-x>button .i{width:12px;height:12px}
/* table extras */
.cd .th-sort>button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.cd .th-sort>button .i{width:12px;height:12px;opacity:.45}
.cd .th-sort.is-asc>button,.cd .th-sort.is-desc>button{color:var(--text)}
.cd .th-sort.is-asc>button .i,.cd .th-sort.is-desc>button .i{opacity:1;color:var(--primary-ink)}
.cd .tbl .num.th-sort>button{flex-direction:row-reverse}
.cd .td-actions{width:1%;white-space:nowrap;text-align:right}
.cd .td-check{width:1%;padding-right:0}
.cd .tbl tr.is-selected>td{background:var(--primary-tint)}
.cd .tbl tr.is-muted>td{color:var(--text-3)}
.cd .tbl tr.row-detail>td{background:var(--surface-sunken);padding:16px 20px}
.cd .tbl tbody tr.is-link{cursor:pointer}
.cd .tbl-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px var(--pad-card);border-top:1px solid var(--border)}
.cd .pager{display:inline-flex;align-items:center;gap:4px}
.cd .pager-n{min-width:var(--control-h-sm);height:var(--control-h-sm);padding:0 8px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.cd .pager-n.is-active{background:var(--primary-tint);color:var(--primary-ink);border-color:var(--primary-tint-2)}
.cd .pager-gap{color:var(--text-3);padding:0 4px;font-size:13px}
.cd .pager .icon-btn[disabled]{opacity:.45;cursor:not-allowed}
/* popover and menu */
.cd .pop{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--text)}
.cd .menu{display:flex;flex-direction:column;gap:2px;min-width:220px;width:max-content;max-width:320px;padding:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.cd .pop>.menu{border:0;box-shadow:none;background:none}
.cd .menu-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:8px 10px 4px}
.cd .menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer}
.cd .menu-item>.i{width:16px;height:16px;color:var(--text-2)}
.cd .menu-item.is-active{background:var(--primary-tint);color:var(--primary-ink);font-weight:600}
.cd .menu-item.is-active>.i{color:var(--primary-ink)}
.cd .menu-item.is-danger,.cd .menu-item.is-danger>.i{color:var(--bad-ink)}
.cd .menu-item[disabled]{color:var(--text-3);cursor:not-allowed}
.cd .menu-meta{margin-left:auto;padding-left:16px;font-size:12px;font-weight:400;color:var(--text-3);white-space:nowrap}
.cd .menu-sep{height:1px;margin:4px 0;background:var(--border)}
/* modal */
.cd .modal-scrim{display:flex;align-items:center;justify-content:center;padding:40px 24px;border-radius:var(--radius);background:color-mix(in srgb,var(--side-bg) 55%,transparent)}
.cd .modal{width:100%;max-width:560px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--text)}
.cd .modal-sm{max-width:420px}
.cd .modal-lg{max-width:760px}
.cd .modal-hd{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.cd .modal-hd>div{flex:1;min-width:0}
.cd .modal-hd h3{font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.4}
.cd .modal-x{margin:-4px -4px 0 0;border-color:transparent;background:transparent}
.cd .modal-body{display:flex;flex-direction:column;gap:16px;padding:20px;font-size:14px;line-height:1.5}
.cd .modal-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-sunken);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
/* toast */
.cd .toasts{display:flex;flex-direction:column;gap:8px;width:360px;max-width:100%}
.cd .toast{display:flex;align-items:flex-start;gap:12px;padding:12px 8px 12px 14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:14px;line-height:1.45}
.cd .toast>.i{margin-top:1px}
.cd .toast>div{flex:1;min-width:0;color:var(--text-2)}
.cd .toast b{display:block;color:var(--text);font-weight:600}
.cd .toast>.icon-btn{border-color:transparent;background:transparent;margin-top:-6px}
.cd .toast-ok>.i{color:var(--ok-ink)}
.cd .toast-bad>.i{color:var(--bad-ink)}
.cd .toast-info>.i{color:var(--primary-ink)}
.cd .toast-ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
.cd .toast-bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--border))}
/* empty, error, locked */
.cd .empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center}
.cd .empty-ico{width:48px;height:48px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--primary-tint);color:var(--primary-ink);margin-bottom:4px}
.cd .empty-ico .i{width:24px;height:24px}
.cd .empty h3{font-size:16px;font-weight:700;letter-spacing:-0.01em}
.cd .empty p{font-size:14px;color:var(--text-2);max-width:46ch}
.cd .empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.cd .empty-sm{padding:28px 20px;gap:4px}
.cd .empty-sm .empty-ico{width:36px;height:36px}
.cd .empty-sm .empty-ico .i{width:18px;height:18px}
.cd .empty-sm h3{font-size:14px}
.cd .empty-sm p{font-size:13px}
.cd .empty.is-error .empty-ico{background:var(--bad-tint);color:var(--bad-ink)}
.cd .locked{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-sunken)}
.cd .locked>div{flex:1 1 220px;min-width:0;font-size:14px}
.cd .locked b{display:block;font-weight:600}
.cd .locked p{font-size:13px;color:var(--text-2)}
/* banner */
.cd .banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border:1px solid transparent;border-radius:var(--radius);font-size:14px;line-height:1.45}
.cd .banner>div{flex:1 1 260px;min-width:0}
.cd .banner-info{background:var(--primary-tint);color:var(--primary-ink);border-color:var(--primary-tint-2)}
.cd .banner-warn{background:var(--warn-tint);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 40%,var(--warn-tint))}
.cd .banner-bad{background:var(--bad-tint);color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 35%,var(--bad-tint))}
/* steps */
.cd .steps{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0}
.cd .step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center;font-size:13px;font-weight:600;color:var(--text-2)}
.cd .step+.step::before{content:'';position:absolute;top:13px;right:calc(50% + 20px);left:calc(-50% + 20px);height:2px;background:var(--border-strong)}
.cd .step.is-done+.step::before{background:var(--primary)}
.cd .step-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid var(--border-control);background:var(--surface);color:var(--text-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.cd .step-n .i{width:14px;height:14px}
.cd .step.is-done .step-n{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cd .step.is-current{color:var(--text)}
.cd .step.is-current .step-n{border-color:var(--primary);color:var(--primary-ink);box-shadow:0 0 0 4px var(--primary-tint)}
.cd .steps-v{flex-direction:column;align-items:stretch}
.cd .steps-v>.step{flex:none;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;justify-items:start;column-gap:12px;row-gap:4px;text-align:left;padding-bottom:20px}
.cd .steps-v>.step:last-child{padding-bottom:0}
.cd .steps-v>.step+.step::before{content:none}
.cd .steps-v>.step:not(:last-child)::after{content:'';position:absolute;left:13px;top:32px;bottom:4px;width:2px;background:var(--border-strong)}
.cd .steps-v>.step.is-done:not(:last-child)::after{background:var(--primary)}
.cd .steps-v>.step>.step-t{align-self:center;font-size:14px;line-height:28px}
.cd .steps-v .step-body{grid-column:2;font-size:14px;font-weight:400;color:var(--text-2);display:flex;flex-direction:column;gap:12px;min-width:0;width:100%}
/* avatar, user */
.cd .avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--primary-tint-2);color:var(--primary-ink);font-size:12px;font-weight:700;letter-spacing:0}
.cd .avatar-sm{width:24px;height:24px;font-size:10px}
.cd .avatar-lg{width:48px;height:48px;font-size:16px}
.cd .avatar.is-pending{background:var(--surface-sunken);color:var(--text-3);border:1px dashed var(--border-control)}
.cd .user{display:flex;align-items:center;gap:12px;min-width:0}
.cd .user>div{min-width:0}
.cd .user-name{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cd .user-meta{font-size:13px;color:var(--text-2);line-height:1.35;overflow-wrap:anywhere}
/* stat */
.cd .stat{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:0}
.cd .stat-l{font-size:13px;color:var(--text-2)}
.cd .stat-v{font-size:22px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.cd .stat-v small{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:0}
.cd .stat-s{font-size:12px;color:var(--text-2)}
/* sub-nav */
.cd .subnav{display:flex;flex-direction:column;gap:2px;min-width:200px}
.cd .subnav-item{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--text-2)}
.cd .subnav-item>.i{width:16px;height:16px}
.cd .subnav-item.is-active{background:var(--primary-tint);color:var(--primary-ink)}
/* copy row, dns row */
.cd .copy-row{display:flex;align-items:flex-start;gap:8px;min-width:0}
.cd .copy-row>.record{flex:1 1 auto;min-width:0;display:block}
.cd .copy-row>.btn{flex:none}
.cd .dns-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.6fr) auto auto;align-items:center;gap:8px 16px;padding:12px var(--pad-card);border-bottom:1px solid var(--border);font-size:14px}
.cd .dns-row:last-child{border-bottom:0}
.cd .dns-row>.tag{justify-self:start}
.cd .dns-host,.cd .dns-val{font-family:var(--font-mono);font-size:13px;overflow-wrap:anywhere;min-width:0}
.cd .dns-host small,.cd .dns-val small{display:block;font-family:var(--font-sans);font-size:12px;color:var(--text-3)}
/* date range picker */
.cd .drp{display:flex;flex-wrap:wrap;width:max-content;max-width:100%}
.cd .drp-presets{display:flex;flex-direction:column;gap:2px;padding:8px;min-width:160px;border-right:1px solid var(--border)}
.cd .drp-main{display:flex;flex-direction:column;min-width:0}
.cd .drp-cals{display:flex;flex-wrap:wrap;gap:24px;padding:16px}
.cd .drp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.cd .cal{width:252px}
.cd .cal-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;height:32px;margin-bottom:8px;font-size:14px;font-weight:700}
.cd .cal-grid{display:grid;grid-template-columns:repeat(7,36px);row-gap:2px}
.cd .cal-dow{height:28px;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cd .cal-day{width:36px;height:36px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;padding:0}
.cd .cal-day.is-out{color:var(--text-3);opacity:.6}
.cd .cal-day.is-today{font-weight:700;box-shadow:inset 0 0 0 1px var(--border-control)}
.cd .cal-day.is-in{background:var(--primary-tint);color:var(--primary-ink);border-radius:0}
.cd .cal-day.is-start,.cd .cal-day.is-end{background:var(--primary);color:var(--on-primary);font-weight:700}
.cd .cal-day.is-start{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.cd .cal-day.is-end{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.cd .cal-day.is-start.is-end{border-radius:var(--radius-sm)}
.cd .cal-day[disabled]{color:var(--text-3);opacity:.45;cursor:not-allowed}
/* notification panel */
.cd .notif{display:flex;flex-direction:column;width:380px;max-width:100%;overflow:hidden}
.cd .notif-hd{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--border)}
.cd .notif-hd h3{font-size:16px;font-weight:700;flex:1}
.cd .notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 8px 12px 16px;border-bottom:1px solid var(--border);font-size:14px;line-height:1.4}
.cd .notif-item>div{flex:1;min-width:0;color:var(--text-2)}
.cd .notif-item b{display:block;color:var(--text);font-weight:600}
.cd .notif-item .page-sub{margin-top:2px;font-size:12px}
.cd .notif-item.is-unread{background:color-mix(in srgb,var(--primary-tint) 60%,var(--surface))}
.cd .notif-item.is-unread b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-right:8px;vertical-align:middle}
.cd .notif-item>.icon-btn{border-color:transparent;background:transparent}
.cd .notif-foot{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:var(--surface-sunken)}
/* tooltip */
.cd .tip{display:inline-block;max-width:280px;padding:8px 10px;border-radius:var(--radius);background:var(--side-bg);border:1px solid oklch(1 0 0 / 0.14);color:#fff;font-size:13px;line-height:1.4;box-shadow:var(--shadow-lg)}
.cd .tip b{display:block;font-weight:600}
.cd .tip span{color:var(--side-text)}
/* skeleton recipes (on cd.css .sk) */
.cd .sk-rows{display:flex;flex-direction:column}
.cd .sk-row{display:flex;align-items:center;gap:16px;padding:14px var(--pad-card);border-bottom:1px solid var(--border)}
.cd .sk-row:last-child{border-bottom:0}
.cd .sk-row>.sk-grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cd .sk-input{height:var(--control-h);width:100%}
.cd .sk-btn{height:var(--control-h);width:120px}
/* phone */
.cd[data-theme="dark"] .modal-scrim{background:oklch(0 0 0 / 0.45)}
@media (max-width: 900px){
.cd.cd .form-grid{grid-template-columns:1fr}
.cd.cd .toolbar>.search{max-width:none;flex-basis:100%}
.cd.cd .dns-row{grid-template-columns:64px minmax(0,1fr) auto}
.cd.cd .dns-row>.dns-val{grid-column:1 / -1}
.cd.cd .drp-presets{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border);width:100%}
.cd.cd .modal-scrim{padding:16px}
.cd.cd .steps:not(.steps-v) .step-t{font-size:12px}
}

/* ==== site: written by hand. scripts/port-design-css.py keeps everything below ==== */