*,*::before,*::after{
box-sizing:border-box;
}
html{
-webkit-text-size-adjust:100%;
scrollbar-gutter:stable;
}
html:has(dialog[open]){
overflow:hidden;
}
body{
margin:0;
background:var(--bg1);
color:var(--tx1);
font-family:var(--ff1);
font-size:var(--fz1);
line-height:var(--lh1);
}
a{
color:inherit;
text-decoration-thickness:var(--ut1);
text-underline-offset:var(--uo1);
}
a:hover{
color:var(--cl2);
}
a.link{
color:var(--cl2);
}
h1,h2,h3{
line-height:1.2;
overflow-wrap:anywhere;
margin:0 0 var(--gp4);
font-weight:var(--fw3);
}
h1{
font-size:var(--fz4);
}
h2{
font-size:var(--fz3);
margin-top:var(--gp6);
}
h3{
font-size:var(--fz2);
margin-top:var(--gp5);
}
p{
margin:0 0 var(--gp4);
}
code,pre{
font-family:var(--ff2);
font-size:var(--fz0);
}
code{
background:var(--bg2);
padding:1px 5px;
overflow-wrap:anywhere;
}
pre{
background:var(--bg2);
padding:var(--gp4);
margin:0 0 var(--gp4);
white-space:pre-wrap;
overflow-wrap:anywhere;
}
pre code{
background:none;
padding:0;
}
img,svg{
max-width:100%;
}
.wrap{
max-width:var(--mw2);
margin:0 auto;
padding:0 var(--sd1);
}
.narrow{
max-width:var(--mw1);
}
.logo{
display:inline-flex;
align-items:center;
gap:var(--gp2);
font-weight:var(--fw2);
font-size:var(--fz2);
text-decoration-line:none;
}
.logo:hover{
color:inherit;
}
.logo svg{
width:28px;
height:28px;
}
.top{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gp4);
padding:var(--gp4) 0;
}
.top nav{
display:flex;
gap:var(--gp5);
align-items:center;
flex-wrap:wrap;
}
.top nav a{
text-decoration-line:none;
}
.top nav a:hover{
text-decoration-line:underline;
}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--gp2);
min-height:44px;
padding:var(--gp2) var(--gp5);
border:0;
border-radius:var(--br9);
background:var(--bg4);
color:var(--tx4);
font:inherit;
font-weight:var(--fw2);
text-decoration-line:none;
cursor:pointer;
white-space:nowrap;
}
.button:hover{
color:var(--tx4);
opacity:.88;
}
.button:disabled{
opacity:.45;
cursor:default;
}
.button.is-quiet{
background:var(--bg2);
color:var(--tx1);
}
.button.is-quiet:hover{
background:var(--bg3);
opacity:1;
}
.button.is-danger{
background:var(--rd3);
color:#fff;
}
.button.is-small{
min-height:36px;
padding:var(--gp1) var(--gp4);
}
.buttons{
display:flex;
flex-wrap:wrap;
gap:var(--gp2);
align-items:center;
}
.hero{
padding:var(--gp8) 0 var(--gp7);
text-align:center;
}
.hero svg.bot{
width:64px;
height:64px;
pointer-events:none;
}
.hero h1{
font-size:var(--fz5);
margin:var(--gp5) 0 var(--gp4);
letter-spacing:-.02em;
}
.hero p{
font-size:var(--fz2);
color:var(--tx2);
max-width:620px;
margin:0 auto var(--gp6);
}
.hero .buttons{
justify-content:center;
}
.hero p.hero-note{
font-size:var(--fz1);
color:var(--tx3);
margin:var(--gp4) auto 0;
}
.steps{
display:grid;
padding:0;
grid-template-columns:repeat(3,1fr);
gap:var(--gp4);
margin:var(--gp7) 0;
counter-reset:step;
}
.steps li{
list-style:none;
background:var(--bg2);
padding:var(--gp5);
counter-increment:step;
}
.steps li::before{
content:counter(step);
display:block;
font-weight:var(--fw3);
font-size:var(--fz3);
margin-bottom:var(--gp2);
}
.steps h2{
margin:0 0 var(--gp2);
font-size:var(--fz2);
}
.steps p{
margin:0;
color:var(--tx2);
}
.points{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--gp5) var(--gp6);
margin:var(--gp7) 0;
}
.points h2{
margin:0 0 var(--gp1);
font-size:var(--fz2);
}
.points p{
color:var(--tx2);
margin:0;
}
.hero.is-short{
padding-bottom:var(--gp6);
}
.plans{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gp4);
margin:0 0 var(--gp6);
}
.plan{
background:var(--bg2);
padding:var(--gp5);
}
.plan h2{
margin:0;
font-size:var(--fz2);
}
.plan p.plan-price{
font-size:var(--fz4);
font-weight:var(--fw3);
margin:var(--gp3) 0 0;
}
.plan-price span{
font-size:var(--fz1);
font-weight:var(--fw1);
color:var(--tx2);
margin-left:var(--gp2);
}
.plan p.plan-for{
color:var(--tx2);
margin:var(--gp1) 0 var(--gp4);
}
.plan li+li{
margin-top:var(--gp1);
}
.plan-act{
margin-top:var(--gp4);
}
.buttons.is-center{
justify-content:center;
}
.narrow.is-center{
margin:var(--gp7) auto 0;
}
.foot{
padding:var(--gp7) 0;
color:var(--tx3);
}
.foot nav{
display:flex;
gap:var(--gp4) var(--gp5);
flex-wrap:wrap;
justify-content:center;
}
.foot a{
text-decoration-line:none;
}
.foot a:hover{
text-decoration-line:underline;
}
.docs{
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:var(--gp7);
padding:var(--gp5) 0 var(--gp7);
}
.docs-nav{
position:sticky;
top:var(--gp4);
align-self:start;
display:flex;
flex-direction:column;
gap:0;
}
.docs-nav a{
text-decoration-line:none;
padding:var(--gp1) var(--gp3);
}
.docs-nav a.is-on{
background:var(--bg2);
font-weight:var(--fw2);
}
.docs-body{
max-width:780px;
}
.docs-body h2{
scroll-margin-top:var(--gp4);
}
.copy{
position:relative;
}
.copy pre::before{
content:"";
float:right;
width:64px;
height:28px;
}
.copy-button{
position:absolute;
top:var(--gp2);
right:var(--gp2);
min-height:32px;
padding:0 var(--gp3);
border:0;
border-radius:var(--br9);
background:var(--bg3);
color:var(--tx1);
font:inherit;
font-size:var(--fz0);
cursor:pointer;
}
.auth{
max-width:420px;
margin:var(--gp8) auto;
}
.auth h1{
text-align:center;
}
.auth .logo{
display:flex;
justify-content:center;
margin-bottom:var(--gp5);
}
.auth form{
margin-bottom:var(--gp4);
}
.auth .button{
width:100%;
}
.or{
text-align:center;
color:var(--tx3);
margin:var(--gp4) 0;
}
.field{
display:flex;
flex-direction:column;
gap:var(--gp1);
margin-bottom:var(--gp4);
}
.field label,.field .label{
font-weight:var(--fw2);
display:flex;
flex-direction:column;
gap:var(--gp1);
}
.field label input,.field label select,.field label textarea{
font-weight:var(--fw1);
}
.passkey-box{
margin-bottom:var(--gp4);
}
.field small,.hint{
color:var(--tx2);
}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=search],select,textarea{
width:100%;
min-height:44px;
padding:var(--gp2) var(--gp3);
background:var(--bg2);
color:var(--tx1);
border:var(--bd1) solid transparent;
border-radius:var(--br1);
font:inherit;
}
textarea{
min-height:96px;
max-height:60vh;
resize:none;
field-sizing:content;
}
textarea.code{
font-family:var(--ff2);
font-size:var(--fz0);
}
input:focus,select:focus,textarea:focus{
outline:none;
border-color:var(--cl1);
}
.checks{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:var(--gp1) var(--gp4);
}
.check{
display:flex;
align-items:center;
gap:var(--gp2);
width:fit-content;
user-select:none;
cursor:pointer;
}
.check input{
appearance:none;
display:grid;
place-content:center;
width:20px;
height:20px;
border-radius:50%;
background:color-mix(in srgb,var(--cl1) 18%,transparent);
cursor:pointer;
}
.check input::before{
content:"";
width:5px;
height:10px;
margin-top:-2px;
border:solid var(--bg1);
border-width:0 2px 2px 0;
transform:rotate(45deg);
visibility:hidden;
}
.check input:checked{
background:var(--cl1);
}
.check input:checked::before{
visibility:visible;
}
.check:has(input:disabled){
opacity:.5;
}
.check:has(input:disabled),.check input:disabled{
cursor:default;
}
:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:var(--bd1) solid var(--cl2);
outline-offset:2px;
}
.flash{
padding:var(--gp3) var(--gp4);
margin-bottom:var(--gp4);
background:var(--bl2);
}
.flash.is-error{
background:var(--rd2);
}
.flash.is-ok{
background:var(--gn2);
}
.secret-once{
background:var(--yl2);
padding:var(--gp4);
margin-bottom:var(--gp5);
}
.secret-once pre{
background:var(--bg1);
white-space:pre-wrap;
word-break:break-all;
}
.app{
display:grid;
grid-template-columns:232px minmax(0,1fr);
min-height:100vh;
}
.side{
background:var(--bg2);
padding:var(--gp5) var(--gp4);
display:flex;
flex-direction:column;
gap:var(--gp5);
position:sticky;
top:0;
height:100vh;
overflow-y:auto;
}
.side-label{
color:var(--tx2);
font-size:var(--fz0);
padding:var(--gp4) var(--gp3) var(--gp1);
}
.me{
margin-top:auto;
position:relative;
}
.me summary{
display:flex;
align-items:center;
gap:var(--gp3);
padding:var(--gp2) var(--gp3);
color:var(--tx1);
list-style:none;
}
.me summary::-webkit-details-marker{
display:none;
}
.me summary:hover,.me[open] summary,.me summary.is-on{
background:var(--bg3);
}
.me-name{
font-weight:var(--fw2);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.me-menu{
position:absolute;
z-index:5;
left:0;
right:0;
bottom:100%;
display:flex;
flex-direction:column;
gap:var(--gp2);
padding:var(--gp3);
background:var(--bg3);
}
.me-menu .muted{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.me-menu a{
text-decoration-line:none;
}
.me-menu form{
margin:0;
}
.me-menu .linkish{
text-decoration-line:none;
}
.me-menu .linkish:hover{
color:var(--cl2);
}
.avatar{
flex:none;
width:32px;
height:32px;
border-radius:var(--br9);
background:var(--bg4);
color:var(--tx4);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:var(--fw3);
object-fit:cover;
}
.side nav{
display:flex;
flex-direction:column;
gap:0;
}
.side nav a{
text-decoration-line:none;
padding:var(--gp2) var(--gp3);
display:flex;
justify-content:space-between;
gap:var(--gp2);
}
.side nav a:hover{
background:var(--bg3);
color:inherit;
}
.side nav a.is-on{
background:var(--bg1);
font-weight:var(--fw2);
}
.side .count{
background:var(--bg4);
color:var(--tx4);
border-radius:var(--br9);
padding:0 8px;
font-size:var(--fz0);
font-weight:var(--fw2);
}
.linkish{
background:none;
border:0;
padding:0;
font:inherit;
color:inherit;
text-decoration-line:underline;
text-decoration-thickness:var(--ut1);
text-underline-offset:var(--uo1);
cursor:pointer;
}
.org-switch select{
min-height:40px;
}
.main{
padding:var(--gp6) var(--gp7) var(--gp7);
min-width:0;
width:100%;
max-width:1040px;
container-type:inline-size;
}
.main:has(.ticket-technical){
--fz0:16px;
--fz1:17px;
--fz2:19px;
--fz3:23px;
font-size:var(--fz1);
}
.main:has(.ticket-technical) h1{
font-size:calc(var(--fz4) + 1px);
}
.main:has(.tix-wrap){
max-width:none;
}
.main:has(.tix-wrap)>.main-in{
width:fit-content;
min-width:min(100%,calc(1040px - 2*var(--gp7)));
max-width:100%;
}
.main-in>:not(.tix-wrap,:has(.tix-wrap)),.block:has(.tix-wrap)>:not(.tix-wrap){
max-width:calc(1040px - 2*var(--gp7));
}
.main-in>h1{
margin:0 0 var(--gp4);
}
.main-in>.sub{
color:var(--tx2);
margin:calc(var(--gp2) - var(--gp4)) 0 var(--gp5);
}
.meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--gp2);
margin-bottom:var(--gp4);
}
.toolbar{
display:flex;
flex-wrap:wrap;
gap:var(--gp2);
align-items:flex-start;
margin-bottom:var(--gp5);
}
.pop{
position:relative;
}
.pop summary{
list-style:none;
}
.pop summary::-webkit-details-marker{
display:none;
}
.pop-body{
position:absolute;
z-index:5;
top:calc(100% + var(--gp1));
left:0;
width:340px;
max-width:80vw;
display:flex;
flex-direction:column;
gap:var(--gp2);
padding:var(--gp4);
background:var(--bg3);
}
.row-side .pop-body{
left:auto;
right:0;
}
.pop-body textarea,.pop-body select{
background:var(--bg1);
}
.close-x{
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
padding:10px;
border:0;
border-radius:50%;
background:var(--bg2);
color:var(--tx1);
cursor:pointer;
}
.close-x svg{
width:100%;
height:100%;
}
.close-x:hover{
background:var(--bg3);
color:var(--cl2);
}
.modal .close-x{
position:absolute;
top:var(--gp3);
right:var(--gp3);
}
.pop-body .close-x{
align-self:flex-end;
margin:calc(-1 * var(--gp2)) calc(-1 * var(--gp2)) 0 0;
background:var(--bg1);
}
.pop-body .close-x:hover{
background:var(--bg2);
}
.block{
margin-bottom:var(--gp6);
}
.ticket-technical>summary{
font-size:var(--fz3);
font-weight:600;
color:var(--tx1);
}
.ticket-explanation details form{
margin-top:var(--gp3);
}
.block>h2{
margin:0 0 var(--gp3);
}
.comment{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--gp2);
margin-top:var(--gp4);
}
.comment-foot{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--gp3);
}
.part{
display:contents;
}
.page-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:var(--gp4);
flex-wrap:wrap;
margin-bottom:var(--gp5);
}
.page-head h1{
margin:0;
word-break:break-word;
}
.page-head .sub{
color:var(--tx2);
margin-top:var(--gp1);
}
.crumb{
color:var(--tx2);
margin-bottom:var(--gp3);
}
.crumb a{
display:inline-flex;
align-items:center;
gap:var(--gp3);
font-weight:var(--fw2);
text-decoration-line:none;
}
.crumb svg{
flex:none;
width:40px;
height:40px;
padding:9px;
border-radius:var(--br9);
background:var(--bg2);
color:var(--tx1);
}
.crumb a:hover{
color:inherit;
}
.crumb a:hover svg{
background:var(--bg3);
color:var(--cl2);
}
.modal{
width:min(440px,calc(100vw - 2 * var(--sd1)));
max-width:none;
padding:0;
border:0;
border-radius:var(--br1);
background:var(--bg1);
color:var(--tx1);
}
.modal::backdrop{
background:rgba(0,0,0,.45);
}
@media(prefers-color-scheme:dark){
.modal{
background:var(--bg2);
}
.modal .button.is-quiet,.modal .close-x{
background:var(--bg3);
}
.modal .button.is-quiet:hover{
opacity:.8;
}
.modal::backdrop{
background:rgba(0,0,0,.6);
}
}
.modal-box{
position:relative;
padding:var(--gp5);
}
.modal-text{
margin:0 0 var(--gp5);
padding-right:var(--gp7);
font-size:var(--fz2);
font-weight:var(--fw2);
overflow-wrap:anywhere;
}
.modal-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:var(--gp2);
}
.filters{
display:flex;
gap:var(--gp2);
flex-wrap:wrap;
align-items:center;
margin-bottom:var(--gp4);
}
.filters select,.filters input{
width:auto;
min-width:160px;
}
.tabs{
display:flex;
gap:var(--gp1);
flex-wrap:wrap;
margin-bottom:var(--gp4);
}
.tabs a{
text-decoration-line:none;
padding:var(--gp1) var(--gp4);
border-radius:var(--br9);
background:var(--bg2);
}
.tabs a.is-on{
background:var(--bg4);
color:var(--tx4);
}
.rows{
display:flex;
flex-direction:column;
gap:0;
margin:0 0 var(--gp5);
padding:0;
list-style:none;
}
.row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:var(--gp2) var(--gp4);
align-items:center;
padding:var(--gp3) var(--gp4);
background:var(--bg2);
position:relative;
}
.row:hover{
background:var(--bg3);
}
.row-title{
font-weight:var(--fw2);
text-decoration-line:none;
word-break:break-word;
}
.row-title::after{
content:"";
position:absolute;
inset:0;
}
.row-meta{
color:var(--tx2);
display:flex;
flex-wrap:wrap;
gap:var(--gp1) var(--gp3);
}
.row-side{
display:flex;
gap:var(--gp2);
align-items:center;
flex-wrap:wrap;
justify-content:flex-end;
position:relative;
z-index:1;
}
.tix-wrap{
margin:0 0 var(--gp5);
}
.tix{
width:100%;
border-collapse:collapse;
}
.tix th{
text-align:left;
font-weight:var(--fw1);
padding:0 var(--gp2) var(--gp2);
white-space:nowrap;
}
.tix td{
padding:var(--gp3) var(--gp2);
color:var(--tx2);
white-space:nowrap;
}
.tix th:first-child,.tix td:first-child{
padding-left:var(--gp4);
}
.tix th:last-child,.tix td:last-child{
padding-right:var(--gp4);
}
.tix tbody tr{
position:relative;
background:var(--bg2);
}
.tix tbody tr:hover{
background:var(--bg3);
}
.tix th:not(.c-title){
width:1%;
}
.tix td.c-title{
white-space:normal;
color:var(--tx1);
}
.cell-label{
display:none;
}
.sort{
display:inline-flex;
align-items:center;
gap:6px;
color:var(--tx2);
text-decoration-line:none;
}
.sort:hover,.sort.is-asc,.sort.is-desc{
color:var(--tx1);
}
.sort::after{
content:"";
flex:none;
width:12px;
height:12px;
background:currentColor;
-webkit-mask:var(--arrow) center/contain no-repeat;
mask:var(--arrow) center/contain no-repeat;
transform:rotate(90deg);
display:none;
}
.sort.is-asc::after{
transform:rotate(-90deg);
}
.sort.is-asc::after,.sort.is-desc::after{
display:block;
}
@container(max-width:760px){
.plans{
grid-template-columns:minmax(0,1fr);
}
.tix,.tix thead,.tix tbody{
display:block;
}
.tix thead tr{
display:flex;
flex-wrap:wrap;
gap:var(--gp1) var(--gp4);
padding:0 var(--gp4) var(--gp2);
}
.tix tbody tr{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--gp1) var(--gp3);
padding:var(--gp3) var(--gp4);
}
.tix th,.tix td,.tix th:first-child,.tix td:first-child,.tix th:last-child,.tix td:last-child{
padding:0;
}
.tix td.c-title{
flex-basis:100%;
}
.tix td:empty{
display:none;
}
.tix th:not(.c-title){
width:auto;
}
.cell-label{
display:inline;
}
}
.pill{
display:inline-block;
padding:1px 10px;
border-radius:var(--br9);
background:var(--bg3);
font-size:var(--fz0);
font-weight:var(--fw2);
white-space:nowrap;
}
.pill.is-open{
background:var(--bl2);
color:var(--bl1);
}
.pill.is-active,.pill.is-working,.pill.is-claimed,.pill.is-continuing{
background:var(--yl2);
color:var(--yl1);
}
.pill.is-pending{
background:var(--bl2);
color:var(--bl1);
}
.pill.is-done,.pill.is-pass{
background:var(--gn2);
color:var(--gn1);
}
.pill.is-bad,.pill.is-fail{
background:var(--rd2);
color:var(--rd1);
}
.pill.is-human{
background:var(--bg4);
color:var(--tx4);
}
.empty{
background:var(--bg2);
padding:var(--gp6) var(--gp5);
color:var(--tx2);
text-align:center;
}
.grid{
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:var(--gp5);
align-items:start;
}
.card{
background:var(--bg2);
padding:var(--gp4) var(--gp5);
margin-bottom:var(--gp4);
}
.card>h2:first-of-type,.card>h3:first-of-type{
margin-top:0;
}
.card.is-alert{
background:var(--yl2);
}
.card.is-danger{
background:var(--rd2);
}
.kv{
display:grid;
grid-template-columns:fit-content(40%) minmax(0,1fr);
gap:var(--gp1) var(--gp4);
margin:0;
}
.kv dt{
color:var(--tx2);
}
.kv dd{
margin:0;
word-break:break-word;
}
.card .kv+*{
margin-top:var(--gp4);
}
.section{
margin-bottom:var(--gp5);
}
.section h3{
margin:0 0 var(--gp1);
font-size:var(--fz1);
color:var(--tx2);
}
.prose{
white-space:pre-wrap;
word-break:break-word;
}
.untrusted{
background:var(--bg1);
padding:var(--gp3) var(--gp4);
}
.untrusted-note{
color:var(--tx2);
font-size:var(--fz0);
margin-bottom:var(--gp3);
}
ol.plain,ul.plain{
margin:0;
padding-left:var(--gp5);
}
:is(ol,ul).plain+p{
margin-top:var(--gp4);
}
.criteria{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:var(--gp4);
}
.criteria p{
margin:var(--gp1) 0 0;
}
.criteria .crit-head{
display:flex;
justify-content:space-between;
gap:var(--gp3);
flex-wrap:wrap;
}
.evidence{
list-style:none;
padding:0;
margin:var(--gp2) 0 0;
display:flex;
flex-direction:column;
gap:var(--gp2);
color:var(--tx2);
}
.timeline{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:var(--gp1);
}
.timeline li{
display:grid;
grid-template-columns:120px minmax(0,1fr);
gap:var(--gp3);
padding:var(--gp1) 0;
}
.timeline p{
margin:var(--gp1) 0 0;
}
.timeline .is-note p{
background:var(--bg2);
padding:var(--gp2) var(--gp3);
margin-top:var(--gp2);
}
.timeline time{
color:var(--tx2);
}
.chain{
list-style:none;
padding:0;
margin:0;
}
.chain li{
padding:var(--gp1) 0;
}
.chain li.is-this{
font-weight:var(--fw2);
}
.chain .indent{
display:inline-block;
color:var(--tx3);
}
.actions form{
display:flex;
flex-direction:column;
gap:var(--gp2);
margin-bottom:var(--gp4);
}
.actions textarea{
min-height:72px;
}
.table{
width:100%;
border-collapse:collapse;
}
.table th{
text-align:left;
color:var(--tx2);
font-weight:var(--fw2);
padding:var(--gp2) var(--gp3);
}
.table td{
padding:var(--gp2) var(--gp3);
vertical-align:top;
word-break:break-word;
}
.table tbody tr:nth-child(odd){
background:var(--bg2);
}
.table-wrap{
overflow-x:auto;
margin-bottom:var(--gp5);
}
.mono{
font-family:var(--ff2);
font-size:var(--fz0);
word-break:break-all;
}
.muted{
color:var(--tx2);
}
.small{
font-size:var(--fz0);
}
.inline-form{
display:inline;
margin:0;
}
.visually-hidden{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
.split{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gp4);
}
.menu-toggle{
display:none;
}
@media(max-width:900px){
.app{
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto 1fr;
}
.side{
padding:var(--gp3) var(--sd1);
gap:var(--gp3);
}
.side-head{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-toggle{
display:inline-flex;
}
.side{
position:static;
height:auto;
}
.side nav,.me,.org-switch{
display:none;
}
.side.is-open nav,.side.is-open .org-switch{
display:flex;
}
.side.is-open .me{
display:block;
}
.main{
padding:var(--gp4) var(--sd1) var(--gp7);
}
.grid{
grid-template-columns:minmax(0,1fr);
}
.docs{
grid-template-columns:minmax(0,1fr);
gap:var(--gp4);
}
.docs-nav{
position:static;
flex-direction:row;
flex-wrap:wrap;
}
}
@media(max-width:700px){
.steps,.points,.split,.plans{
grid-template-columns:minmax(0,1fr);
}
.row{
grid-template-columns:minmax(0,1fr);
}
.row-side{
justify-content:flex-start;
}
.timeline li{
grid-template-columns:minmax(0,1fr);
gap:0;
}
.pop-body{
position:static;
width:auto;
margin-top:var(--gp1);
}
.filters select,.filters input{
min-width:0;
flex:1 1 140px;
}
.top{
flex-wrap:wrap;
}
.top nav{
gap:var(--gp4);
}
}
.provider-list{
display:flex;
flex-direction:column;
gap:var(--gp2);
margin-bottom:var(--gp4);
}
.brand{
flex:none;
opacity:.7;
}
.with-brand{
display:inline-flex;
align-items:center;
gap:var(--gp2);
}
fieldset{
border:0;
padding:0;
margin:0 0 var(--gp4);
min-width:0;
}
legend{
padding:0;
margin-bottom:var(--gp1);
}
details summary{
cursor:pointer;
color:var(--tx2);
}
details pre{
margin-top:var(--gp2);
max-height:400px;
}
.pill.is-muted{
background:var(--bg3);
color:var(--tx2);
}
.pill.urgency{
min-width:2.25em;
text-align:center;
font-variant-numeric:tabular-nums;
}
.pill.urgency.is-u1{
background-color:#ededed;
color:#5c5c5c;
}
.pill.urgency.is-u2{
background-color:#e6e6e6;
color:#3d3d3d;
}
.pill.urgency.is-u3{
background-color:#ececd4;
color:#4d4a1f;
}
.pill.urgency.is-u4{
background-color:#fbf1dc;
color:#8f5b00;
}
.pill.urgency.is-u5{
background-color:#f8e1a8;
color:#6e4600;
}
.pill.urgency.is-u6{
background-color:#f5c565;
color:#4a2f00;
}
.pill.urgency.is-u7{
background-color:#f29a3a;
color:#3a1d00;
}
.pill.urgency.is-u8{
background-color:#bf4a13;
color:#fff;
}
.pill.urgency.is-u9{
background-color:#d6401b;
color:#fff;
}
.pill.urgency.is-u10{
background-color:#c2261c;
color:#fff;
}
@media(prefers-color-scheme:dark){
.pill.urgency.is-u1{
background-color:#232323;
color:#a8a8a8;
}
.pill.urgency.is-u2{
background-color:#2a2a2a;
color:#dddddd;
}
.pill.urgency.is-u3{
background-color:#2e2d1c;
color:#d8d39a;
}
.pill.urgency.is-u4{
background-color:#33280f;
color:#f0c060;
}
.pill.urgency.is-u5{
background-color:#4a3510;
color:#f5c86a;
}
.pill.urgency.is-u6{
background-color:#6b4510;
color:#ffd27a;
}
.pill.urgency.is-u7{
background-color:#a8551a;
color:#fff;
}
.pill.urgency.is-u8{
background-color:#bf4a13;
color:#fff;
}
.pill.urgency.is-u9{
background-color:#d63f1a;
color:#fff;
}
.pill.urgency.is-u10{
background-color:#e3261c;
color:#fff;
}
}
select.pill{
width:auto;
field-sizing:content;
min-height:0;
padding:1px 28px 1px 10px;
border:0;
border-radius:var(--br9);
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;
background-size:5px 5px;
background-repeat:no-repeat;
cursor:pointer;
}
select.pill option{
background:var(--bg1);
color:var(--tx1);
}
.card .row{
background:var(--bg1);
}
.card .button.is-quiet,.row .button.is-quiet,.secret-once .button.is-quiet,.card .copy-button{
background:var(--bg1);
}
.card .button.is-quiet:hover,.row .button.is-quiet:hover{
background:var(--bg3);
}
.card .untrusted .pill{
background:var(--bg2);
}
.card input[type=text],.card input[type=email],.card input[type=url],.card input[type=number],.card input[type=search],.card select,.card textarea{
background:var(--bg1);
}
.field label.check,label.check{
flex-direction:row;
align-items:center;
font-weight:var(--fw1);
}
.check input{
flex:none;
margin:0;
}
.more{
margin:var(--gp4) 0;
}
.more>summary{
display:inline-block;
margin-bottom:var(--gp2);
}
.more[open]>summary{
margin-bottom:var(--gp4);
}
.more>h3:first-of-type{
margin-top:var(--gp4);
}
input[type=number]{
appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
appearance:none;
margin:0;
}
@media(max-width:700px),(pointer:coarse){
.button.is-small,.copy-button,select.pill{
min-height:44px;
font-size:var(--fz1);
}
.pill,.small,.untrusted-note{
font-size:var(--fz1);
}
details>summary.small{
padding:10px 0;
}
.me-menu a,.me-menu .linkish{
display:flex;
align-items:center;
min-height:44px;
width:100%;
}
}