@charset "UTF-8";








@font-face {
    font-family: "Helix";
    src: url("/assets/fonts/Helix-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helix";
    src: url("/assets/fonts/Helix-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root {
    color-scheme: light dark;

    

    







    





    --c-base:         light-dark(#e6e6e6, #171717);
    --c-fg:         light-dark(#363636, #ebebeb);

    



    --c-warn:       #ff1100;
    --c-ok:         #00ad20;
    --c-pending:    #ff8800;
    

    --c-draft:      #dd7169;
    --c-open:       #b82500;
    



    --c-company:    #363636;
    --c-intern:     #2d8fe1;
    --c-extern:     #c51ce5;

    
    
    --c-warn-bg:    color-mix(in srgb, var(--c-warn)    var(--status-bg-mix), transparent);
    --c-pending-bg: color-mix(in srgb, var(--c-pending) var(--status-bg-mix), transparent);

    
    --font-body: "Helix", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    



    








    





    










    --fs-md: clamp(var(--fs-md-narrow), 0.4545rem + 1.2121vw, 1rem);
    



    




    --fs-lg: clamp(0.875rem, 0.556rem + 1.31vw, 1.375rem); 
    

    --fs-xl: clamp(1.125rem, 0.805rem + 1.31vw, 1.625rem); 
    



    --lh-tight: 1.25;
    


    --lh-loose: 1.6;
    


    --underline-offset: 0.15em;

    






















    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap:    12px;
    --gap-md: 16px;
    --gap-lg: 24px;
    







    --gap-lg-narrow: 20px;
    --input-h-narrow: 26px;
    



    --icon-xs-narrow: 11px;
    



    --fs-theme-icon-narrow: calc(var(--fs-md) * 11 / 12);
    


    --fs-md-narrow: 0.75rem;    
    


    --fs-field: clamp(var(--fs-field-narrow), 0.7273rem + 0.6061vw, 1rem);
    

    --fs-field-narrow: 0.875rem;
    


    --gap-hair: 2px;
    





    --row-pad-narrow: var(--gap);
    --gap-xl: 32px;
    --pad:    var(--gap-lg);
    --side:   48px;
    --gutter: clamp(var(--gap-md), 4vw, var(--side));

    
    --radius-sm: 2px;
    --radius:    8px;
    --radius-round: 999px;

    



    --status-bg-mix: 18%;
    



    --status-fg-mix: 70%;

    
    


    --input-h:    38px;
    --icon-xs:    14px;
    --icon-sm:    16px;
    




    --icon-cap:   0.92em;
    --brand-h:    28px;

    

    --dur-fast: 100ms;

    
    

    --z-sticky:   1;
    --z-bar:      2;
    --z-island:   50;
    --z-progress: 100;
    --z-notice:   1000;
    






    --glass: blur(20px);
    --glass-backdrop: blur(8px);
    













    --glass-mix: 50%;
    





    


    --hairline:        1px solid var(--c-line);
    --hairline-thick: 2px solid var(--c-line);

    






    
    --mix-page:  5%;
    --mix-card:  10%;
    --mix-line:  50%;
    --mix-muted: 35%;

    --page-max-narrow: 480px;
    

    --surface: var(--c-page);
}








:root,
helix-theme-preview {
    
    --c-page:       color-mix(in srgb, var(--c-fg)  var(--mix-page), var(--c-base));
    --c-card:       color-mix(in srgb, var(--c-fg)  var(--mix-card), var(--c-base));
    



    --c-muted:      color-mix(in srgb, var(--c-base) var(--mix-muted), var(--c-fg));
    --c-line:       color-mix(in srgb, var(--c-base) var(--mix-line), var(--c-fg));

    






    --c-hover:      color-mix(in srgb, var(--c-fg)  5%, transparent);
    --c-press:      color-mix(in srgb, var(--c-fg) 12%, transparent);
    

    --c-hover-inv:  color-mix(in srgb, var(--c-base) 14%, transparent);
    --c-press-inv:  color-mix(in srgb, var(--c-base) 28%, transparent);
    
    --c-scroll:       color-mix(in srgb, var(--c-fg) 22%, transparent);
    --c-scroll-hover: color-mix(in srgb, var(--c-fg) 40%, transparent);
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }























:root {
    --arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1.8v8.4M2.4 6.6 6 10.2l3.6-3.6' fill='none' stroke='black' stroke-width='1'/></svg>");
    

    --arrow-down-bold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1.8v8.4M2.4 6.6 6 10.2l3.6-3.6' fill='none' stroke='black' stroke-width='1.46'/></svg>");
    


    --calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.2 3.4h9.6v8.4H2.2zM2.2 6.1h9.6M4.6 1.6v2.4M9.4 1.6v2.4' fill='none' stroke='black' stroke-width='1.2'/></svg>");
}












:root { --chevron: var(--chevron-light, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23363636' stroke-width='1'/></svg>")); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --calendar-icon: var(--calendar-dark, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.2 3.4h9.6v8.4H2.2zM2.2 6.1h9.6M4.6 1.6v2.4M9.4 1.6v2.4' fill='none' stroke='%23ebebeb' stroke-width='1.2'/></svg>")); }
    :root:not([data-theme="light"]) { --chevron: var(--chevron-dark, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ebebeb' stroke-width='1'/></svg>")); }
}
:root { --calendar-icon: var(--calendar-light, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.2 3.4h9.6v8.4H2.2zM2.2 6.1h9.6M4.6 1.6v2.4M9.4 1.6v2.4' fill='none' stroke='%23363636' stroke-width='1.2'/></svg>")); }
:root[data-theme="dark"] { --calendar-icon: var(--calendar-dark, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.2 3.4h9.6v8.4H2.2zM2.2 6.1h9.6M4.6 1.6v2.4M9.4 1.6v2.4' fill='none' stroke='%23ebebeb' stroke-width='1.2'/></svg>")); }
:root[data-theme="dark"] { --chevron: var(--chevron-dark, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ebebeb' stroke-width='1'/></svg>")); }


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    background: var(--c-page);
    

    scroll-padding-top: var(--pad);

    
















    scrollbar-width: thin;
    scrollbar-color: var(--c-scroll) transparent;
    scrollbar-gutter: stable;
}




@media (hover: hover) {
.table-grid:hover,
.cmd-dialog .cmd-results:hover {
    scrollbar-color: var(--c-scroll-hover) transparent;
}
}
html.js-smooth-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.js-smooth-scroll { scroll-behavior: auto; } }

details.expandable.js-anim { overflow: hidden; }

body {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
    color: var(--c-fg);
    background: var(--c-page);
    




    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "onum";
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



.scroll-progress {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--c-fg);
    transform-origin: left; transform: scaleX(0);
    z-index: var(--z-progress); pointer-events: none;
    opacity: 0.4;
}
@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: scroll-progress linear;
        animation-timeline: scroll(root);
    }
    @keyframes scroll-progress { to { transform: scaleX(1); } }
}









@property --edge-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --edge-r { syntax: '<length>'; inherits: false; initial-value: 0px; }








@property --overlay { syntax: '<color>'; inherits: false; initial-value: transparent; }
@supports (animation-timeline: scroll()) {
    .site-nav, .tab-bar {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge-l), #000 calc(100% - var(--edge-r)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--edge-l), #000 calc(100% - var(--edge-r)), transparent);
        animation: scroll-edges linear both;
        animation-timeline: scroll(self inline);
    }
    @keyframes scroll-edges {
        0%   { --edge-l: 0px;        --edge-r: var(--pad); }
        5%   { --edge-l: var(--pad); }
        95%  { --edge-r: var(--pad); }
        100% { --edge-l: var(--pad); --edge-r: 0px; }
    }
}




body, main, .card, .btn, .badge, .status-select,
input, select, textarea,
dialog.confirm-dialog, dialog.cmd-dialog,
.site-user :is(.who, .theme-toggle, .logout-btn) {
    transition:
        background-color var(--dur-fast) ease-out,
        color            var(--dur-fast) ease-out,
        border-color     var(--dur-fast) ease-out;
}




h1, h2 { font-size: var(--fs-xl); line-height: 1; }
h1 { font-weight: 700; margin: 0 0 var(--gap);   letter-spacing: -0.01em; text-wrap: balance; }



h2 { font-weight: 700; margin: var(--gap-xl) 0 var(--gap-md); text-wrap: balance; }
h3 { font-size: var(--fs-md); font-weight: 700; margin: var(--gap-lg) 0 var(--gap-md); text-wrap: balance; }
p  { margin: 0 0 var(--gap-sm); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
em { font-style: normal; }




code { font-family: var(--font-mono); }
pre.text { font: inherit; margin: var(--gap-sm) 0; white-space: pre-wrap; word-wrap: break-word; }





::selection      { background: color-mix(in srgb, var(--c-company) 50%, transparent); }
::-moz-selection { background: color-mix(in srgb, var(--c-company) 50%, transparent); }


a {
    




    color: var(--c-fg);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: 1px;
    
    text-decoration-skip-ink: auto;
    


    text-decoration-color: var(--c-line);
    

    transition: text-decoration-color var(--dur-fast) ease-out;
}
@media (hover: hover) {
a:hover { text-decoration-color: transparent; }
}



a.btn, .site-nav a, .filter-island a, th a { text-decoration: none; }




.sort-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--gap-xs);
    width: var(--icon-xs);
    height: var(--icon-xs);
    background-color: currentColor;
    -webkit-mask: var(--arrow-down) center / contain no-repeat;
    mask: var(--arrow-down) center / contain no-repeat;
}
.sort-arrow[data-dir="desc"] { transform: rotate(180deg); }


.page {
    margin: 0;
    



    padding: var(--pad) var(--gutter) var(--side);
    background: var(--c-page);
    flex: 1 0 auto;
    width: 100%;
}
.page.narrow { max-width: var(--page-max-narrow); margin: 0 auto; }


.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    column-gap: var(--gap-lg);
    



    row-gap: var(--gap);
    padding: var(--gap-lg) var(--gutter) 0;
    background: var(--c-base);
    container-type: inline-size;
}
.site-header > * { min-width: 0; }
.site-header .brand {
    display: flex;
    align-items: center;
    align-self: center;
    text-decoration: none;
    

    order: 2;
    font-weight: 700;
    font-size: var(--fs-lg);
    font-weight: 400;
    letter-spacing: -0.01em;
}
.site-header .brand img,
.site-header .brand svg { height: var(--brand-h); width: auto; display: block; }
.site-user {
    display: inline-flex;
    



    gap: 0.5em;
    align-items: center;
    align-self: center;
    color: var(--c-muted);
    font-size: var(--fs-md);
    line-height: 1;
    order: 1;
    margin-left: auto;
}





.site-user .who { color: inherit; text-decoration: none; }
.site-user .who.active { color: var(--c-fg); }
@media (hover: hover) {
.site-user .who:hover { color: var(--c-fg); }
}


.field-group { margin: 0 0 var(--pad); }
.field-group > *:first-child { margin-top: 0; }
.field-group > *:last-child { margin-bottom: 0; }





.row > * > .field-group:last-child { margin-bottom: 0; }



.site-clock { color: var(--c-fg); font-weight: 400; }
.t1 { font-feature-settings: "tnum"; }



.site-user form.inline { display: contents; }

.site-nav {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    gap: var(--gap-sm);
    

    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
    line-height: 1;
    align-items: end;
    




    user-select: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
    text-decoration: none;
    

    padding: var(--gap);
    border-radius: var(--radius) var(--radius) 0 0;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    -webkit-user-drag: none;
    user-select: none;
    transition: none;
}


.site-nav a.active {
    background: var(--c-page);
}


.theme-toggle {
    background: transparent;
    border: none;
    color: var(--c-muted);
    font: inherit;
    font-weight: 400;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    height: var(--icon-xs);
    display: inline-flex;
    align-items: center;
}









.theme-toggle:not(.lang-toggle) { font-size: calc(var(--fs-md) * 5 / 6); transform: translateY(1px); width: 0.75em; justify-content: center; }
@media (hover: hover) {
.theme-toggle:hover { color: var(--c-fg); background: transparent; }
}

.logout-btn {
    background: transparent;
    border: none;
    color: var(--c-muted);
    padding: 0;
    cursor: pointer;
    line-height: 1;
    height: var(--icon-xs);
    display: inline-flex;
    align-items: center;
}
@media (hover: hover) {
.logout-btn:hover { color: var(--c-fg); background: transparent; }
}




.logout-btn svg { display: block; width: calc(var(--icon-xs) * 20 / 24); height: var(--icon-xs); }










.license-banner {
    



    


    padding: var(--gap-sm) var(--gutter);
    text-align: center;
    color: var(--c-fg);
    background-color: color-mix(in srgb, var(--c-card) var(--glass-mix), transparent);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
}
.license-banner a { color: inherit; }


.card {
    --surface: var(--c-card);
    background: var(--c-card);
    border: none;
    border-radius: var(--radius);
    padding: var(--pad);
    margin: 0 0 var(--pad);
    transition: background-color var(--dur-fast) ease-out, --overlay var(--dur-fast) ease-out;
}

a > .card, a.card { background-image: linear-gradient(var(--overlay), var(--overlay)); }
@media (hover: hover) {
    a > .card:hover,
    a.card:hover { --overlay: var(--c-hover); background-image: linear-gradient(var(--overlay), var(--overlay)); }
}
a > .card:active,
a.card:active { --overlay: var(--c-press); background-image: linear-gradient(var(--overlay), var(--overlay)); }
.card > *:first-child { margin-top: 0; }
.card > *:last-child  { margin-bottom: 0; }








.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); align-items: start; margin-bottom: var(--pad); }
.cols > .card, .cols > div > .card:last-child { margin-bottom: 0; }
.cols > div > .card { margin-bottom: var(--pad); }


.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-lg);
    margin-bottom: var(--gap-lg);
    align-items: start;
}
.row.row.auto {
    display: flex; flex-wrap: wrap; align-items: end;
    gap: var(--gap);
}
.row.auto > * { flex: 1 1 auto; min-width: max-content; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }




.detail-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--gap-xs) var(--gap-md); align-items: baseline; }
.detail-list dt { color: var(--c-fg); }
.detail-list dd { margin: 0; }







.detail-list.stacked { grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); align-items: start; }



.detail-list.stacked > div > dt { margin: 0 0 var(--gap-xs); font-weight: 700; }

.section-header { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-lg); flex-wrap: wrap; margin-bottom: var(--gap-md); }






.section-header > .title-cluster { display: flex; align-items: baseline; gap: var(--gap-sm); min-width: 0; }



.section-header > h2,
.section-header > h3,
.section-header > .title-cluster h2 { margin: 0; }



.section-header > .title-cluster h2 a { text-decoration: none; }
.section-header > .actions { margin: 0; }









[hidden][hidden] { display: none; }





.receipt-view {
    display: block;
    width: 100%;
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--c-page);
}
img.receipt-view { height: auto; max-height: 70vh; object-fit: contain; }
iframe.receipt-view { height: 70vh; }


label {
    display: block;
    font-size: var(--fs-md);
    



    font-weight: 400;
    


    margin: 0 0 var(--gap-xs);
    color: var(--c-fg);
}
label .muted { font-weight: 400; }





input::placeholder, textarea::placeholder {
    color: var(--c-muted);
    opacity: 1;
}







input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: currentColor;
    background-image: none;
    -webkit-mask: var(--calendar) center / contain no-repeat;
    mask: var(--calendar) center / contain no-repeat;
    width: var(--icon-xs);
    height: var(--icon-xs);
    opacity: 0.7;
    cursor: pointer;
}
@media (hover: hover) {
    input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
}








@supports (-webkit-touch-callout: none) {
    input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        

        min-width: 0;
        background-image: var(--calendar-icon);
        background-repeat: no-repeat;
        background-position: right var(--gap-sm) center;
        background-size: var(--icon-xs);
        padding-inline-end: calc(2 * var(--gap-sm) + var(--icon-xs));
    }
    input[type="date"]::-webkit-date-and-time-value { text-align: start; }
}

input, select, textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-field);
    color: inherit;
    background: transparent;
    border: var(--hairline);
    border-radius: var(--radius);
}
input, select { height: var(--input-h); padding: 0 var(--gap-sm); }



textarea {
    padding: var(--gap-sm);
    line-height: var(--lh-tight);
    resize: none;
    field-sizing: content;
    min-height: var(--input-h);
}












input:not([type="file"]):focus, select:focus, textarea:focus {
    background-color: var(--c-page);
}


@media (hover: hover) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
    select:not(.status-select):hover,
    textarea:hover {
        background-color: var(--c-page);
    }
}
input:focus, select:focus, textarea:focus { outline: none; }









input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--c-fg);
    -webkit-box-shadow: 0 0 0 1000px var(--c-base) inset;
    box-shadow: 0 0 0 1000px var(--c-base) inset;
    caret-color: var(--c-fg);
}

input[type="number"] { text-align: right; appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="checkbox"], input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    padding: 0;
    border: var(--hairline);
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    
    margin: 0;
    display: inline-block;
    flex: none;
    border-radius: var(--radius-sm);
}
input[type="radio"] { border-radius: 50%; }




input[type="checkbox"]:checked {
    background-color: var(--c-fg);
}
input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--c-base);
    --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask: var(--check) center / 12px no-repeat;
    mask: var(--check) center / 12px no-repeat;
}
input[type="radio"]:checked {
    background: var(--c-fg);
    box-shadow: inset 0 0 0 2.5px var(--c-base);
}









.color-input {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    height: var(--input-h);
}
.color-input .color-swatch {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: var(--hairline);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}
.color-input .color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-input .color-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-input .color-swatch::-moz-color-swatch { border: none; border-radius: 50%; }
.color-input .color-hex {
    flex: 1 1 auto;
    height: var(--input-h);
    




    



    text-align: right;
}





input[type="file"] { border: none; padding: 0; height: auto; pointer-events: none; }
input[type="file"]::file-selector-button { pointer-events: auto; }






:is(input, select, textarea, helix-number, helix-tags):has(+ :is(p, .muted)) { margin-bottom: var(--gap-sm); }
input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    height: var(--input-h);
    padding: 0 var(--gap-sm);
    margin-right: var(--gap);
    background: transparent;
    background-image: linear-gradient(var(--overlay), var(--overlay));
    color: var(--c-fg);
    border: var(--hairline);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1;
    transition: --overlay var(--dur-fast) ease-out;
}
@media (hover: hover) {
input[type="file"]::file-selector-button:hover {
    --overlay: var(--c-hover); background-image: linear-gradient(var(--overlay), var(--overlay));
}
}
select {
    appearance: none;
    -webkit-appearance: none;
    


    padding-right: calc(2 * var(--gap-sm) + var(--icon-xs));
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right var(--gap-sm) center;
    background-size: var(--icon-xs);
}


form.inline { display: inline; margin: 0; }






















.btn:has(> input[type="radio"]) { position: relative; margin: 0; }





.btn:has(> input[type="radio"]):active { background-image: none; }
.btn > input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.pick-block { margin-bottom: var(--gap-lg); }



.picker:has(input[value="existing"]:checked) .pick-block:not([data-mode="existing"]),
.picker:has(input[value="new_project"]:checked) .pick-block:not([data-mode="new_project"], [data-mode="project_name"]),
.picker:has(input[value="new_client"]:checked) .pick-block:not([data-mode="new_client"], [data-mode="project_name"]) {
    display: none;
}
.picker h3 { margin-top: 0; }



.pick-account {
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}
.pick-account select { flex: 1 1 12rem; }







label:has(> input[type="checkbox"]):not(.btn),
label:has(> input[type="radio"]):not(.btn) {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-weight: 400;
}














.filter-island, .form-actions.island {
    position: fixed;
    bottom: var(--gap-lg);
    left: var(--gap-lg);
    z-index: var(--z-island);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    max-width: calc(100vw - 2 * var(--gap-lg));
    


    flex-wrap: wrap;
}





.form-actions.island .btn,
.form-actions.island .btn.primary {
    


    background-color: color-mix(in srgb, var(--c-card) var(--glass-mix), transparent);
    color: var(--c-fg);
    border-color: transparent;
}




.filter-island .status-wrap,
.form-actions.island .btn {
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
}












.filter-island .status-wrap {
    background-color: color-mix(in srgb,
        color-mix(in srgb, var(--status-c, var(--c-card)) var(--status-bg-mix), var(--c-card)) var(--glass-mix),
        transparent);
}



body:has(.filter-island) .page,
body:has(.form-actions.island) .page { padding-bottom: calc(var(--side) + var(--island-h, var(--input-h)) + var(--gap-lg)); }










button, .btn, a.btn {
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    height: var(--input-h);
    padding: 0 var(--gap-sm);
    background: transparent;
    background-image: linear-gradient(var(--overlay), var(--overlay));
    color: var(--c-fg);
    border: var(--hairline);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color var(--dur-fast) ease-out, --overlay var(--dur-fast) ease-out;
}




@media (hover: hover) {
button:hover, .btn:hover, a.btn:hover {
    --overlay: var(--c-hover); background-image: linear-gradient(var(--overlay), var(--overlay));
    text-decoration: none;
}
}
button:active, .btn:active, a.btn:active {
    --overlay: var(--c-press); background-image: linear-gradient(var(--overlay), var(--overlay));
}








button, .btn, a.btn, summary, .status-select, .status-wrap { outline: none; }



:is(.site-nav, .tab-bar, .table-grid) a:focus-visible { outline-offset: -2px; }
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
summary:focus-visible,
.btn:has(input:focus-visible),
.status-wrap:has(.status-select:focus-visible) {
    --overlay: var(--c-hover); background-image: linear-gradient(var(--overlay), var(--overlay));
}

.btn.primary, button.primary, .btn:has(input:checked) {
    background: var(--c-fg);
    background-image: linear-gradient(var(--overlay), var(--overlay));
    color: var(--c-base);
}




@media (hover: hover) {
.btn.primary:hover, button.primary:hover, .btn:has(input:checked):hover {
    --overlay: var(--c-hover-inv); background-image: linear-gradient(var(--overlay), var(--overlay));
    filter: none;
}
}
.btn.primary:active, button.primary:active, .btn:has(input:checked):active {
    --overlay: var(--c-press-inv); background-image: linear-gradient(var(--overlay), var(--overlay));
    filter: none;
}
.btn.danger, button.danger {
    color: var(--c-warn);
    border-color: color-mix(in srgb, var(--c-warn) 50%, transparent);
}
@media (hover: hover) {
.btn.danger:hover, button.danger:hover {
    --overlay: color-mix(in srgb, var(--c-warn) 12%, transparent);
    background-image: linear-gradient(var(--overlay), var(--overlay));
}
.btn.danger:active, button.danger:active {
    --overlay: color-mix(in srgb, var(--c-warn) 24%, transparent);
    background-image: linear-gradient(var(--overlay), var(--overlay));
}
}



form.inline button:not(.btn):not(.badge):not(.theme-toggle):not(.logout-btn) {
    background: none;
    border: 0;
    color: inherit;
    padding: 0;
    height: auto;
    font: inherit;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
    text-decoration-skip-ink: auto;
    text-decoration-color: var(--c-line);
    background-image: linear-gradient(var(--overlay), var(--overlay));
    transition: text-decoration-color var(--dur-fast) ease-out, --overlay var(--dur-fast) ease-out;
    cursor: pointer;
}
@media (hover: hover) {
form.inline button:not(.btn):not(.badge):not(.theme-toggle):not(.logout-btn):hover {
    text-decoration-color: transparent;
    filter: none;
}
}



.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: var(--gap-md);
}





.page-header > :is(h1, .actions) { margin: 0; }







.page-header:has(+ p) { margin-bottom: var(--gap-sm); }









.actions {
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
    flex-wrap: wrap;
    margin: var(--gap-md) 0;
}

.form-actions {
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--gap-md);
    



    margin-bottom: var(--gap-sm);
}
.form-actions:last-child { margin-bottom: 0; }




.form-actions:has(+ dialog:not([open]):last-child) { margin-bottom: 0; }




.field-group > form + form { margin-top: var(--gap-md); }

form > .form-actions:first-child { margin-top: 0; }
td.actions-cell, th.actions-cell {
    text-align: right;
    white-space: nowrap;
}



td.actions-cell {
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex-wrap: wrap;
}
td.actions-cell form.inline { display: inline-flex; margin: 0; align-items: center; }

table:not(.lines) tbody tr:has(td.actions-cell) td { vertical-align: middle; }


table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th, td {
    text-align: left;
    padding: var(--gap) var(--gap-sm);
    border-bottom: var(--hairline);
    vertical-align: middle;
    



    line-height: var(--lh-tight);
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child  { padding-right: 0; }




th { font-weight: 400; }
th.title { font-weight: 700; }




td[data-label]::before { font-weight: 400; color: var(--c-fg); }






thead > tr > th { padding-top: 0; padding-bottom: var(--gap-sm); }


td.num, th.num { text-align: right; white-space: nowrap; }
td.hrs, th.hrs { text-align: right; white-space: nowrap; }
td.tar, th.tar { white-space: nowrap; }




tbody tr { transition: background var(--dur-fast) ease-out; }
@media (hover: hover) {
tbody tr:hover { background: var(--c-hover); }
}





tr.grand td {
    font-weight: 700;
    border-bottom: var(--hairline-thick);
}


tr.grand td .muted { font-weight: 400; }





tr.vat td, tr.vat td.num { color: var(--c-muted); }









tr.week-header td { color: var(--c-muted); }


tfoot tr:last-child td { border-bottom: none; }









.badge {
    display: inline-flex;
    align-items: center;
    height: var(--input-h);
    padding: 0 var(--gap-sm);
    border-radius: var(--radius);
    font-size: var(--fs-md);
    font-weight: 700;
    background: color-mix(in srgb, var(--status-c, var(--c-muted)) var(--status-bg-mix), transparent);
    color: color-mix(in srgb, var(--status-c, var(--c-muted)) var(--status-fg-mix), var(--c-fg));
    vertical-align: middle;
    line-height: 1;
    white-space: nowrap;
}







[data-status="entwurf"]                  { --status-c: var(--c-draft); }
[data-status="offen"]                    { --status-c: var(--c-open); }
[data-status="gesendet"]                 { --status-c: var(--c-pending); }
[data-status="intern"]                   { --status-c: var(--c-intern); }
[data-status="extern"]                   { --status-c: var(--c-extern); }
[data-status="archiviert"]               { --status-c: var(--c-muted); }
:is([data-status="warn"], [data-status="err"]) { --status-c: var(--c-warn); }
:is([data-status="ok"], [data-status="aktiv"], [data-status="bezahlt"],
    [data-status="freigegeben"], [data-status="erstattet"], [data-status="ueberwiesen"]) { --status-c: var(--c-ok); }





form.status-wrap,
.status-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--input-h);
    border-radius: var(--radius);
    background-color: color-mix(in srgb, var(--status-c, var(--c-muted)) var(--status-bg-mix), transparent);
    background-image: linear-gradient(var(--overlay), var(--overlay));
    transition: background-color var(--dur-fast) ease-out, --overlay var(--dur-fast) ease-out;
}
@media (hover: hover) {
    .status-wrap:hover {
        --overlay: var(--c-hover); background-image: linear-gradient(var(--overlay), var(--overlay));
    }
}
.status-wrap:has(.status-select:active),
.status-wrap:active {
    --overlay: var(--c-press); background-image: linear-gradient(var(--overlay), var(--overlay));
}
.status-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    



    padding: 0 calc(2 * var(--gap-sm) + var(--icon-xs)) 0 var(--gap-sm);
    height: var(--input-h);
    line-height: var(--input-h);
    border: none;
    border-radius: var(--radius);
    

    background: transparent;
    background-image: none;
    color: color-mix(in srgb, var(--status-c, var(--c-muted)) var(--status-fg-mix), var(--c-fg));
    cursor: pointer;
    vertical-align: middle;
    width: auto;
}



select.status-select:focus { background: transparent; }
.status-wrap::after {
    content: "";
    position: absolute;
    right: var(--gap-sm);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-xs);
    height: var(--icon-xs);
    pointer-events: none;
    background-color: color-mix(in srgb, var(--status-c, var(--c-muted)) var(--status-fg-mix), var(--c-fg));
    -webkit-mask: var(--arrow-down-bold) center / contain no-repeat;
    mask: var(--arrow-down-bold) center / contain no-repeat;
}




.status-wrap:has(> .status-select option:only-child) { pointer-events: none; }
.status-wrap:has(> .status-select option:only-child)::after { content: none; }
.status-wrap:has(> .status-select option:only-child) > .status-select { padding-right: var(--gap-sm); }



@media (min-width: 720.02px) { .status-wrap[data-sort] { display: none; } }








.account-dot {
    --dot-s: round(0.625em, 1px);
    display: inline-block;
    width: var(--dot-s);
    height: var(--dot-s);
    border-radius: 50%;
    background: var(--dot-c, var(--c-muted));
    margin-right: 0.5em;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex: none;
}
td:has(> .account-dot), th:has(> .account-dot) { white-space: nowrap; }


.error, .warn {
    margin: var(--gap) 0;
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius);
}








.error  { background: var(--c-warn-bg);    color: color-mix(in srgb, var(--c-warn)    var(--status-fg-mix), var(--c-fg)); }
.warn   { background: var(--c-pending-bg); color: color-mix(in srgb, var(--c-pending) var(--status-fg-mix), var(--c-fg)); }
.errors { list-style: none; margin: 0; padding: 0; }
.errors li { color: var(--c-warn); padding: var(--gap-xs) 0; }












.bold     { font-weight: 700; }











body:has(form[data-dirty]) .btn[data-needs-saved],
body:not(:has(form[data-dirty])) .btn[data-needs-dirty],
.btn[disabled] {
    color: var(--c-muted);
    pointer-events: none;
}









input.is-inherited, textarea.is-inherited { color: var(--c-muted); }
.empty    { margin: var(--gap-xl) 0; color: var(--c-muted); }



.pos { color: var(--c-ok); }
.neg { color: var(--c-warn); }









.num.muted { color: var(--c-muted); }








table.totals,
table.totals-live:not(:last-child) { margin-bottom: var(--gap); }
table.totals-live { font-size: var(--fs-md); }
table.totals-live td { padding: var(--gap-sm) 0; border-bottom: var(--hairline); }
table.totals-live tr:last-child td { border-bottom: none; padding-top: var(--gap); }



table.totals-live tr.grand td { border-bottom: var(--hairline-thick); }



table.totals-live tr:first-child td { padding-top: 0; }



p:has(+ table.totals-live) { margin-bottom: var(--gap); }
@media (hover: hover) {
table.totals-live tbody tr:hover { background: none; }
}























table.lines {
    display: grid;
    grid-template-columns:
        minmax(6rem, 1fr)      
        minmax(5rem, 14rem)    
        4rem                   
        5rem                   
        max-content            
        5rem                   
        max-content;           
    gap: var(--gap-xs) var(--gap);
    font-size: var(--fs-md);
}
table.lines > thead,
table.lines > tbody,
table.lines > tfoot { display: contents; }
table.lines > * > tr {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
}
table.lines > * > tr > * { padding: 0; border: none; min-width: 0; }






table.lines > tfoot > tr > :first-child { grid-column: 1 / -2; }
table.lines > tfoot > tr > td.col-eff { grid-column: -2 / -1; }
table.lines > tfoot > tr > td:empty { display: none; }



table.lines-view { font-size: var(--fs-md); table-layout: fixed; width: 100%; }
table.lines-view th.title  { width: 65%; text-align: left; }
table.lines-view th.tar    { width: 8%; }


table.lines-view th.hrs    { width: 11%; }
table.lines-view th.amount { width: 16%; }
table.lines-view td, table.lines-view th { vertical-align: top; }


table.lines-view + table.lines-view { margin-top: var(--gap-lg); }
table.lines td, table.lines th { vertical-align: top; }



table.lines td.actions-cell {
    display: table-cell;
    text-align: right;
    height: auto;
}









table.lines td.col-flag   { line-height: var(--input-h); }






table.lines tr[data-line]:has(input[name$="[expense]"]) > td:has(:is(.js-tariff, .js-hours)) {
    visibility: hidden;
}



table.lines:not(:has(tr[data-line] textarea:not([readonly]))) > thead :is(.col-tariff, .col-hours) {
    visibility: hidden;
}
@container style(--stack: 1) {
    table.lines tr[data-line]:has(input[name$="[expense]"]) > td:has(:is(.js-tariff, .js-hours)) { display: none; }
}
table.lines td.col-eff    { line-height: var(--input-h); }



.section-header > input[type="text"] { flex: 1 1 0; width: auto; min-width: 0; }




.drag-handle {
    flex: none;
    width: var(--icon-sm);
    height: var(--input-h);
    cursor: grab;
    background-image: radial-gradient(currentColor 1.2px, transparent 1.3px);
    background-size: 5px 5px;
    


    background-position: center top;
    background-repeat: repeat;
    opacity: .45;
    border-radius: var(--radius-sm);
}
@media (hover: hover) { .drag-handle:hover { opacity: .8; } }
.drag-handle:active { opacity: 1; cursor: grabbing; }
[data-section].is-dragging { opacity: .5; }



.section-move { display: inline-flex; gap: var(--gap-xs); flex: none; }
.section-move .btn { padding: 0 var(--gap-sm); }
helix-sections { display: block; }

helix-doc-number { display: block; }


helix-number { display: block; position: relative; }


helix-number input { text-align: right; }













helix-number[data-unit] input { padding-right: calc(var(--gap-sm) + 1.15em); }





helix-number[data-unit]::after {
    content: attr(data-unit);
    position: absolute;
    inset: 0 var(--gap-sm) 0 auto;
    display: flex;
    align-items: center;
    border: var(--hairline);
    border-color: transparent;
    pointer-events: none;
    color: inherit;
}







helix-theme-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-lg);
    margin: var(--gap) 0 0;
}






helix-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs);
    box-sizing: border-box;
    min-height: var(--input-h); padding: 0 var(--gap-sm);
    border: var(--hairline); border-radius: var(--radius);
    transition: background-color var(--dur-fast) ease-out;
}
helix-tags:focus-within { background-color: var(--c-page); }
@media (hover: hover) { helix-tags:hover { background-color: var(--c-page); } }

helix-tags > span { display: contents; }
helix-tags input {
    flex: 1 1 6rem; width: auto; min-width: 6rem;
    height: auto; padding: 0; border: none; border-radius: 0;
}
helix-tags input:hover, helix-tags input:focus { background-color: transparent; }



helix-tags .badge { height: auto; padding: var(--gap-xs) var(--gap-sm); }



helix-tags .badge button,
.notice .notice-close {
    all: unset; cursor: pointer;
    line-height: 1; opacity: .6;
}
helix-tags .badge button { margin-left: var(--gap-xs); }
helix-tags .badge button:hover,
.notice .notice-close:hover { opacity: 1; }









.swatch { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xs); color: var(--c-fg); }




.color-input span.color-swatch { background: var(--swatch); }
.color-input > helix-number { flex: 1 1 auto; min-width: 0; }
.font-sample { margin: var(--gap) 0 0; font-size: var(--fs-lg); }




input[readonly] { color: var(--c-muted); cursor: default; }
[data-drag-ready] .section-move { display: none; }
[data-sections]:not([data-drag-ready]) .drag-handle { display: none; }


[data-sections] > .form-actions { margin-bottom: var(--pad); }





.asset-preview { display: flex; align-items: center; gap: var(--gap); margin: 0 0 var(--gap-sm); padding-block: var(--gap-xs); }
.asset-preview img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }







.page.page-bare {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    


    padding-inline: max(var(--gutter), var(--gap-xl));
}
.page.page-bare > .card { width: 100%; }



.auth-card .row { grid-template-columns: 1fr; }


.auth-card .row > * { grid-column: auto; }
.page.narrow .card { max-width: 100%; }
.page.narrow h1    { text-align: left; }
.auth-card .form-actions { margin-top: var(--gap-lg); }



.auth-card .form-actions ~ .form-actions { margin-top: var(--pad); }




.auth-card > p:has(+ div > .field-group) { margin-bottom: var(--pad); }
.auth-card .error        { margin-top: var(--gap); }
.codes {
    list-style: none;
    padding: 0;
    margin: var(--gap) 0;
    display: grid;
    

    grid-template-columns: repeat(auto-fill, minmax(16ch, 1fr));
    gap: var(--gap-xs);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
}
.codes li {
    padding: var(--gap-xs) var(--gap-sm);
    background: var(--c-page);
    border-radius: var(--radius-sm);
}



.secret {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    padding: var(--gap-sm) var(--gap-md);
    background: var(--c-page);
    border-radius: var(--radius);
    word-break: break-all;
    overflow-wrap: anywhere;
    user-select: all;
}
.qr { text-align: center; margin: var(--gap-md) 0; }
.qr svg, .qr img { max-width: 220px; height: auto; }


dialog.confirm-dialog,
dialog.cmd-dialog {
    



    border: none;
    border-radius: var(--radius);
    

    --surface: var(--c-base);
    background: var(--c-base);
    color: var(--c-fg);
    font-family: inherit;
    font-size: var(--fs-md);
    transform: scale(0.9);
    opacity: 0;
    padding: var(--pad);
    transition:
        transform var(--dur-fast) ease-out,
        opacity   var(--dur-fast) ease-out,
        overlay   var(--dur-fast) allow-discrete,
        display   var(--dur-fast) allow-discrete;
}






dialog.confirm-dialog[open],
dialog.cmd-dialog[open]     { transform: none; opacity: 1; }
dialog.confirm-dialog::backdrop,
dialog.cmd-dialog::backdrop {
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        backdrop-filter var(--dur-fast) ease-out,
        -webkit-backdrop-filter var(--dur-fast) ease-out,
        overlay var(--dur-fast) allow-discrete,
        display var(--dur-fast) allow-discrete;
}
dialog.confirm-dialog[open]::backdrop,
dialog.cmd-dialog[open]::backdrop {
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
}
@starting-style {
    dialog.confirm-dialog[open],
    dialog.cmd-dialog[open]     { transform: scale(0.9); opacity: 0; }
    dialog.confirm-dialog[open]::backdrop,
    dialog.cmd-dialog[open]::backdrop { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
}

dialog.confirm-dialog {
    max-width: 480px;
    width: 90%;
    



    text-align: start;
}






dialog .row { grid-template-columns: 1fr; gap: var(--gap); }
dialog .row > * { grid-column: auto; }








helix-dialog > dialog[open]:not(:modal) {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    background: none;
    --surface: inherit;
    transform: none;
    opacity: 1;
}
.confirm-dialog h2 { margin: 0 0 var(--gap-sm); font-size: var(--fs-lg); }


.confirm-dialog .detail-list:not(:last-child) { margin-bottom: var(--gap-md); }
.confirm-dialog p.warning { margin: 0 0 var(--gap-lg); }


.confirm-dialog p.warning:has(+ label:not([hidden])) { margin-bottom: 0; }
.confirm-dialog label { margin: var(--gap-sm) 0 var(--gap-xs); }


.confirm-dialog td > label { margin: 0; }





.confirm-dialog input:not([type="checkbox"], [type="radio"], [data-totp-input]) { width: 100%; }
.confirm-dialog-actions {
    display: flex; gap: var(--gap-xs);
    margin-top: var(--pad);
    justify-content: flex-end;
    


    position: sticky;
    
    z-index: var(--z-bar);
    bottom: calc(-1 * var(--pad));
    padding-bottom: var(--pad);
    margin-bottom: calc(-1 * var(--pad));
    background: var(--surface);
}








.confirm-dialog > form:not(:last-child) .confirm-dialog-actions {
    position: static;
    padding-bottom: 0;
    margin-bottom: 0;
    background: none;
}


dialog.cmd-dialog {
    position: fixed;
    inset: 12vh 0 auto 0;
    margin: 0 auto;
    max-width: 640px;
    width: 92%;
}
.cmd-dialog .cmd-input {
    



    width: 100%;
    box-sizing: border-box;
    height: var(--input-h);
    padding: 0 var(--gap-sm);
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-lg);
}
.cmd-dialog .cmd-input:focus { outline: none; background: transparent; }
.cmd-dialog .cmd-input::-webkit-search-cancel-button,
.cmd-dialog .cmd-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.cmd-dialog .cmd-results {
    list-style: none; margin: var(--gap) 0 0; padding: 0;
    max-height: 50vh; overflow-y: auto;
}
.cmd-dialog .cmd-item {
    display: flex; justify-content: space-between; align-items: center; gap: var(--gap);
    padding: var(--gap-sm) var(--gap-sm);
    cursor: pointer;
    border-radius: var(--radius);
}
.cmd-dialog .cmd-item.is-sel { background: var(--c-hover); }
.cmd-dialog .cmd-item .cmd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-dialog .cmd-item .cmd-type  { flex: 0 0 auto; color: var(--c-muted); }
.cmd-dialog .cmd-empty { padding: var(--pad) var(--gap-sm); color: var(--c-muted); text-align: center; }





















.tab-bar:has(~ .card form[data-dirty]) a[aria-current]::after {
    content: "";
    display: inline-block;
    width: var(--gap-sm);
    height: var(--gap-sm);
    margin-left: var(--gap-sm);
    border-radius: 50%;
    background: var(--c-warn);
    vertical-align: middle;
}



.progress { height: var(--gap-sm); border-radius: var(--radius-round); background: var(--c-page); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--x-w, 0%); background: var(--c-ok);
                   transition: width var(--dur-fast) ease-out; }























.notice {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    



    max-width: min(80ch, calc(100vw - 2 * var(--gap-lg)));
    min-height: var(--input-h);
    


    margin: 0;
    padding: var(--gap-sm) var(--gap-md);
    border-radius: var(--radius);
    

    text-align: center;
    
    color: var(--c-fg);
    background-color: color-mix(in srgb, var(--c-card) var(--glass-mix), transparent);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
}





.notices {
    position: fixed;
    bottom: var(--gap-lg); right: var(--gap-lg);
    z-index: var(--z-notice);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap-sm);
    

    pointer-events: none;
}

















.notices.top {
    top: var(--gap-lg); bottom: auto;
    left: var(--gap-lg); right: var(--gap-lg);
    align-items: center;
}
.notices > * { pointer-events: auto; }




.notice.event {
    animation:
        notice-in var(--dur-fast) ease-out,
        notice-out var(--dur-fast) ease-out 2.35s forwards;
}




.notice.error {
    color: color-mix(in srgb, var(--c-warn) var(--status-fg-mix), var(--c-fg));
    animation: notice-in var(--dur-fast) ease-out;
}




.notice .notice-close { flex: none; }
@keyframes notice-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: none; }
}
@keyframes notice-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(0.9); }
}





details.card {
    margin: 0 0 var(--pad);
    padding: 0;
    background: transparent;
    border-radius: var(--radius);
    overflow: clip;
    transition: background var(--dur-fast) ease-out;
}
details.card > summary::-webkit-details-marker { display: none; }












details.expandable > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    font-size: var(--fs-lg);
    font-weight: 400;
    letter-spacing: -0.01em;
    padding: var(--gap-lg) var(--pad);
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--c-card);
    background-image: linear-gradient(var(--overlay), var(--overlay));
    transition: --overlay var(--dur-fast) ease-out;
    line-height: 1;
}



details.expandable > summary :is(h2, h3) { font-size: inherit; letter-spacing: inherit; font-weight: inherit; margin: 0; display: inline; }
details.expandable > summary::-webkit-details-marker { display: none; }
details.expandable > summary::after {
    content: "";
    flex: none;
    width: var(--icon-cap);
    height: var(--icon-cap);
    background-color: currentColor;
    -webkit-mask: var(--arrow-down) center / contain no-repeat;
    mask: var(--arrow-down) center / contain no-repeat;
    transition: transform var(--dur-fast) ease-out;
}
details.expandable[open] > summary::after { transform: rotate(180deg); }





details.expandable[open][data-closing] > summary::after { transform: none; }
details.expandable[open] > summary { margin-bottom: var(--gap); }
@media (hover: hover) {
details.expandable > summary:hover,
details.expandable[open] > summary { --overlay: var(--c-hover); background-image: linear-gradient(var(--overlay), var(--overlay)); }
}





details.expandable details.expandable > summary {
    font-size: var(--fs-md);
    min-height: var(--input-h);
    padding: 0 var(--gap-sm);
}

details.card.expandable[open] { background: var(--c-card); padding: 0 0 var(--pad) 0; border: var(--hairline); border-radius: var(--radius); }
details.card.expandable[open] > summary { border: none; border-radius: var(--radius) var(--radius) 0 0; }

details.card.expandable > *:not(summary) { padding-left: var(--pad); padding-right: var(--pad); }

details.card.expandable[open] :is(h2, h3, p):first-of-type { margin-top: 0; }


.upper  { text-transform: uppercase; }
.w-full { width: 100%; }







.table-grid { margin-bottom: var(--pad); }












.tab-bar {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: end;
    







    position: relative;
    top: 1px;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar a {
    





    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    color: var(--c-fg);
    

    padding: var(--gap);
    border-radius: var(--radius) var(--radius) 0 0;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}
.tab-bar a[aria-current] { background: var(--c-card); }




.tab-bar:has(> a:first-child[aria-current]) + .card { border-top-left-radius: 0; }










.tab-bar + .card > form:not(:last-child),
.tab-bar + .card > .field-group > form:not(:last-child),
.auth-card > form:not(:last-child) { margin-bottom: var(--pad); }







.section-break,
.field-group > .section-break {
    border-top: var(--hairline);
    padding-top: var(--pad);
    margin-top: var(--gap-xl);
}















.table-grid {
    container-type: inline-size;
    overflow-x: auto;
    scrollbar-width: none;
}
.table-grid::-webkit-scrollbar { display: none; }










.lines-frame { container-type: inline-size; }
.page { container-type: inline-size; }






























table:is([data-table], .lines, .lines-view) { --stack: 0; }







table[data-table] {
    display: grid;
    column-gap: 0;
    width: 100%;
}
table[data-table="grid"] { grid-template-columns: var(--cols, 1fr); }
@container (max-width: 600px) {
    table[data-table]:not([data-stack]),
    table:is(.lines, .lines-view) { --stack: 1; display: block; }
}
@container (max-width: 700px)  { table[data-table][data-stack="700"]  { --stack: 1; display: block; } }
@container (max-width: 880px)  { table[data-table][data-stack="880"]  { --stack: 1; display: block; } }
@container (max-width: 960px)  { table[data-table][data-stack="960"]  { --stack: 1; display: block; } }
@container (max-width: 1300px) { table[data-table][data-stack="1300"] { --stack: 1; display: block; } }
@container (max-width: 1450px) { table[data-table][data-stack="1450"] { --stack: 1; display: block; } }

@container style(--stack: 0) {
    table[data-table] > thead,
    table[data-table] > tbody,
    table[data-table] > tfoot { display: contents; }
    table[data-table] > * > tr {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        border-bottom: var(--hairline);
    }
    


















    table[data-table] > * > tr > th,
    table[data-table] > * > tr > td {
        padding: var(--gap) var(--gap-sm);
        border-bottom: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        width: auto;
    }
    table[data-table] > * > tr > *:first-child { padding-inline-start: 0; }
    table[data-table] > * > tr > *:last-child  { padding-inline-end: 0; }
    
    table[data-table] > * > tr > td.stretch,
    table[data-table] > * > tr > th.stretch {
        white-space: normal;
        text-wrap: pretty;
    }

    




    table[data-table] > * > tr > *[colspan="2"] { grid-column: span 2; }
    table[data-table] > * > tr > *[colspan="3"] { grid-column: span 3; }
    table[data-table] > * > tr > *[colspan="4"] { grid-column: span 4; }
    table[data-table] > * > tr > *[colspan="5"] { grid-column: span 5; }
    table[data-table] > * > tr > *[colspan="6"] { grid-column: span 6; }
    table[data-table] > * > tr > *[colspan="7"] { grid-column: span 7; }
    table[data-table] > * > tr > *[colspan="8"] { grid-column: span 8; }

    table[data-table] > tfoot > tr > td:empty { display: none; }

}










@container style(--stack: 0) {
    table[data-table] > * > tr > :is(:first-child, .col-status, .actions-cell) {
        position: sticky;
        z-index: var(--z-sticky);
        background-color: var(--surface);
        

        transition: background-color var(--dur-fast) ease-out;
    }
    table[data-table] > * > tr > :first-child { left: 0; }
    table[data-table] > * > tr > .actions-cell { right: 0; }
    table[data-table] > * > tr > .col-status { right: var(--end-w, 0px); }
    

    table[data-table] > * > tr > :first-child::after,
    table[data-table] > * > tr > :is(.col-status, .actions-cell:not(.col-status + .actions-cell))::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--gap-lg);
        pointer-events: none;
        opacity: 0;
    }
    table[data-table] > * > tr > :first-child::after {
        left: 100%;
        background: linear-gradient(to right, var(--surface), transparent);
    }
    table[data-table] > * > tr > :is(.col-status, .actions-cell:not(.col-status + .actions-cell))::before {
        right: 100%;
        background: linear-gradient(to left, var(--surface), transparent);
    }
}
@media (hover: hover) {
    @container style(--stack: 0) {
        






        table[data-table] > tbody > tr:hover > :is(:first-child, .col-status, .actions-cell) {
            background-color: color-mix(in srgb, var(--c-fg) 5%, var(--surface));
        }
    }
}
@supports (animation-timeline: scroll()) {
    .table-grid { scroll-timeline: --table-scroll inline; }
    @container style(--stack: 0) {
        table[data-table] > * > tr > :first-child::after {
            animation: sticky-edge-start linear both;
            animation-timeline: --table-scroll;
        }
        table[data-table] > * > tr > :is(.col-status, .actions-cell:not(.col-status + .actions-cell))::before {
            animation: sticky-edge-end linear both;
            animation-timeline: --table-scroll;
        }
    }
    @keyframes sticky-edge-start { 0% { opacity: 0; } 3%, 100% { opacity: 1; } }
    @keyframes sticky-edge-end   { 0%, 97% { opacity: 1; } 100% { opacity: 0; } }
}


@media (max-width: 1024px) {
    :root {
        --side: var(--gap-lg);
    }
    .site-header { padding-top: var(--pad); }
    .site-header .brand img,
    .site-header .brand svg { height: calc(var(--brand-h) - 8px); }
    .site-user { flex-wrap: wrap; justify-content: flex-end; }
    .filter-island, .form-actions.island { left: var(--gap); right: var(--gap); max-width: none; }
    

    .notices:not(.top) { right: var(--gap); }
    body:has(.filter-island) .notices:not(.top),
    body:has(.form-actions.island) .notices:not(.top) {
        bottom: calc(var(--gap-lg) + var(--island-h, var(--input-h)) + var(--gap-sm));
    }
}





@container style(--stack: 1) {
    






    table[data-table] > thead,
    table.lines > thead { display: none; }
    table:is([data-table], .lines, .lines-view) > tbody,
    table:is([data-table], .lines, .lines-view) > tfoot,
    table.lines-view > thead { display: block; }
    table:is([data-table], .lines, .lines-view) > * > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--gap-xs) var(--gap);
        padding: var(--gap) 0;
        border-bottom: var(--hairline);
        align-items: baseline;
    }
    table:is([data-table], .lines, .lines-view) > * > tr > * {
        padding: 0;
        border: none;
        white-space: normal;
        min-width: 0;
        text-align: left !important;
    }
    
    


    table:is([data-table], .lines, .lines-view) > * > tr > *:first-child { grid-column: 1; }
    table:is([data-table], .lines, .lines-view) > * > tr > td.num { grid-column: 2; text-align: right !important; }
    


    table:is([data-table], .lines, .lines-view) > * > tr > td:not(:first-child):not(.num):not([data-label]):not(.actions-cell) { grid-column: 1 / -1; }
    






    table:is([data-table], .lines, .lines-view) > * > tr > td[data-label] {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        



        gap: var(--gap-xs) 0;
    }
    


    table:is([data-table], .lines, .lines-view) > * > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-inline-end: auto;
        padding-inline-end: var(--gap);
    }
    





    table:is([data-table], .lines, .lines-view) > * > tr > td.actions-cell {
        grid-column: 1 / -1;
        display: flex; gap: var(--gap-xs);
        flex-wrap: wrap;
        justify-self: stretch;
        



        justify-content: flex-start;
        height: auto;
        margin-top: calc(var(--gap) - var(--gap-xs));
    }
    

    table.lines td[data-label] > :is(select, helix-number) { flex: 0 1 50%; min-width: 0; }
    table.lines > tbody > tr > td:first-child > textarea { flex: 1 1 100%; }
    

    table.lines-view > thead th:not(.title) { display: none; }
    table.lines-view > thead > tr { border-bottom: none; }
    
    table:is(.lines, .lines-view) td:empty { display: none; }
    



    :root[data-row-tap] table[data-table] > tbody > tr:not([aria-expanded="true"]) > td.actions-cell { display: none; }
    :root[data-row-tap] table[data-table] > tbody > tr:has(> td.actions-cell) { cursor: pointer; }
    



    :root[data-row-tap] table[data-table] > tbody > tr:has(> td.actions-cell):active { background: var(--c-press); }

    

















    


    table[data-phone="list"] > tbody > tr:has(> td[data-slot]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--gap);
        row-gap: 0;
        padding-block: var(--row-pad-narrow);
    }
    table[data-phone="list"] > tbody > tr:has(> td[data-slot])::before,
    table[data-phone="list"] > tbody > tr:has(> td[data-slot])::after {
        content: "";
        flex-basis: 100%;
        height: 0;
    }
    table[data-phone="list"] > tbody > tr:has(> td[data-slot])::before { order: 2; }
    table[data-phone="list"] > tbody > tr:has(> td[data-slot])::after { order: 4; }
    table[data-phone="list"] > tbody > tr > td[data-slot] { display: block; min-width: 0; }
    table[data-phone="list"] > tbody > tr > td[data-slot]::before { content: none; }
    


    table[data-phone="list"] > tbody > tr > td:empty { display: none; }
    



    


    table[data-phone="list"] > tbody > tr > td:is([data-slot="title"], [data-slot="sub"], [data-slot="note"], [data-slot="meta"], [data-slot="end"]) {
        flex: 1 1 0;
        max-width: max-content;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        





        padding-block-end: var(--gap-xs);
        margin-block-end: calc(-1 * var(--gap-xs));
    }
    table[data-phone="list"] > tbody > tr > td:is([data-slot="trail"], [data-slot="status"]) { flex: 0 0 auto; margin-inline-start: auto; }
    table[data-phone="list"] > tbody > tr > td[data-slot="title"] { order: 1; }
    table[data-phone="list"] > tbody > tr > td[data-slot="trail"] { order: 1; }
    table[data-phone="list"] > tbody > tr > td[data-slot="sub"] { order: 3; }
    




    table[data-phone="list"] > tbody > tr > td[data-slot="note"] { order: 4; flex: 1 0 100%; max-width: none; }
    



    table[data-phone="list"] > tbody > tr > td[data-slot="end"] { order: 6; }
    



















    table[data-phone="list"][data-status-float] > tbody > tr:has(> td[data-slot="status"]) {
        position: relative;
        padding-inline-end: var(--status-w, 0px);
        


        min-height: calc(1lh + var(--gap-xs) + var(--input-h));
    }
    









    table[data-phone="list"][data-status-float] > tbody > tr > td:is([data-slot="trail"], [data-slot="status"]) {
        position: absolute;
        margin-inline-start: 0;
        text-align: right;
    }
    table[data-phone="list"][data-status-float] > tbody > tr > td[data-slot="trail"] {
        top: var(--row-pad-narrow);
        right: 0;
    }
    table[data-phone="list"][data-status-float] > tbody > tr > td[data-slot="status"] {
        top: calc(var(--row-pad-narrow) + 1lh + var(--gap-xs));
        right: var(--status-right, 0px);
    }
    table[data-phone="list"] > tbody > tr > td[data-slot="status"] { order: 5; }
    
    table[data-phone="list"] > tbody > tr > td[data-slot="status"] ~ td[data-slot="status"] { margin-inline-start: 0; }
    table[data-phone="list"] > tbody > tr > td[data-slot="meta"] { order: 5; }
    







    table[data-phone="list"] > tbody > tr > td.actions-cell { order: 6; flex-basis: 100%; margin-top: var(--row-pad-narrow); }
    



    table[data-phone="list"][data-status-float] > tbody > tr > td.actions-cell { flex: 0 0 calc(100% + var(--status-w, 0px)); }
    


    table[data-phone="list"] > tbody > tr:has(> td[data-slot]) { column-gap: var(--gap-xs); }
    



    table[data-phone="list"] > tbody > tr > td[data-slot="sub"] ~ td[data-slot="sub"],
    table[data-phone="list"] > tbody > tr > td[data-slot="meta"] ~ td[data-slot="meta"] {
        margin-inline-start: calc(var(--gap) - var(--gap-xs));
    }
    

}

@media (max-width: 720px) {
    :root {
        




        --pad: var(--gap);
        





        --gap-lg: var(--gap-lg-narrow);
        --input-h: var(--input-h-narrow);
        --icon-xs: var(--icon-xs-narrow);
    }

    


    






    .row { grid-template-columns: 1fr 1fr; gap: var(--gap-md); margin-bottom: var(--gap-md); }
    
    .detail-list.stacked { grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    
    helix-theme-preview { grid-template-columns: 1fr; }
    


    .row > :where(.col-span-2, .col-span-3, .col-span-4) { grid-column: span 2; }
    






    .row > :has(> .field-group) { grid-column: span 2; }
    .cols { grid-template-columns: 1fr; }
    





    .site-clock { display: none; }
    



    
    details.expandable > summary { padding: var(--gap) var(--pad); }
    
    .site-nav a { padding: var(--gap-sm); }
    




    .theme-toggle:not(.lang-toggle) { font-size: var(--fs-theme-icon-narrow); transform: translateY(0.04em); }
    

    .field-group { margin-bottom: var(--gap); }
    

    label { margin-bottom: var(--gap-hair); }
}



.contents { display: contents; }



.col-log-time { width: 1%; text-align: right; white-space: nowrap; padding-right: var(--gap-sm); }

.col-log-time:last-child { padding-right: 0; padding-left: var(--gap-sm); }
.col-log-date { width: 10em; }




@container (max-width: 600px) {
    table:has(> tbody > tr > .col-log-date),
    table:has(> tbody > tr > .col-log-date) > tbody { display: block; }
    tr:has(> .col-log-date) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    tr:has(> .col-log-date) { border-bottom: var(--hairline); }
    tr:has(> .col-log-date) > td { border-bottom: none; }
    tr:has(> .col-log-date) > td:first-child { flex: 1 0 100%; }
    tr:has(> .col-log-date) > .col-log-time { width: auto; }
    tr:has(> .col-log-date) > .col-log-time:last-child:not(:has(button)) { display: none; }
}



.totp-inputs { display: flex; gap: var(--gap-sm); }




.totp-inputs input {
    flex: none;
    

    width: round(var(--input-h) * 1.4, 2px);
    height: round(var(--input-h) * 1.6, 2px);
    padding: 0;
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}



details.expandable > summary:active,
form.inline button:not(.btn):not(.badge):not(.theme-toggle):not(.logout-btn):active {
    --overlay: var(--c-press); background-image: linear-gradient(var(--overlay), var(--overlay));
}




.site-user :is(.who, .theme-toggle, .logout-btn):active { color: var(--c-fg); background: transparent; }