/*
Purpose: Provide the single shared Gray Iris visual system.
Inputs: Shared page shell and application presentation classes.
Outputs: Consistent responsive styling for Gray Iris pages and Administration.
Requirements: Modern browser CSS support.
Goal: Keep all Gray Iris presentation rules in one authoritative stylesheet.
Section: Shared presentation.
*/
:root{--background:#f6f1eb;--surface:#fffdf9;--text:#322d2a;--muted:#746c66;--accent:#9f655f;--accent-soft:#ead9d5;--border:#e6ddd5;--shadow:0 18px 45px rgba(52,42,35,0.08);}
*{box-sizing:border-box;}
body{margin:0;background:var(--background);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
a{color:inherit;text-decoration:none;}
.topbar{min-height:72px;padding:16px 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,249,0.94);border-bottom:1px solid var(--border);}
.brand{font-family:Georgia,serif;font-size:1.55rem;letter-spacing:0.02em;}
.nav{display:flex;align-items:center;gap:22px;font-size:0.95rem;}
.nav form{margin:0;}
.nav-button{border:0;background:transparent;color:var(--text);cursor:pointer;font:inherit;padding:0;}
.page{width:min(1120px,90vw);margin:0 auto;padding:54px 0 90px;}
.eyebrow{margin:0 0 8px;color:var(--accent);font-size:0.76rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;}
h1,h2{font-family:Georgia,serif;font-weight:500;}
h1{margin:0;font-size:clamp(2.3rem,6vw,4.4rem);}
h2{margin:5px 0 8px;}
.lead,.muted{color:var(--muted);}
.hero-panel{padding:45px 0 55px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.feature-card,.milestone-card,.login-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);}
.feature-card{display:block;padding:28px;}
.card-kicker,.task-notes{color:var(--muted);font-size:0.85rem;}
.progress-track{height:8px;margin:22px 0 10px;overflow:hidden;background:var(--accent-soft);border-radius:100px;}
.progress-value{height:100%;background:var(--accent);border-radius:inherit;}
.page-heading{margin-bottom:36px;}
.milestone-list{display:grid;gap:24px;}
.milestone-card{padding:28px;}
.milestone-heading{display:flex;justify-content:space-between;gap:28px;}
.task-list{margin-top:20px;border-top:1px solid var(--border);}
.task-row{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border);}
.check-button{width:29px;height:29px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:white;cursor:pointer;}
.check-button.done{border-color:var(--accent);background:var(--accent);}
.done-text{color:var(--muted);text-decoration:line-through;}
.task-notes{margin-top:4px;}
.login-shell{min-height:calc(100vh - 190px);display:grid;place-items:center;}
.login-card{width:min(440px,100%);padding:38px;}
.form-stack{display:grid;gap:18px;margin-top:28px;}
.form-stack label{display:grid;gap:8px;font-size:0.9rem;font-weight:600;}
.form-stack input,.form-stack select{width:100%;min-width:0;box-sizing:border-box;padding:13px 14px;border:1px solid var(--border);border-radius:11px;background:white;color:var(--text);font:inherit;}
.primary-button{padding:13px 18px;border:0;border-radius:11px;background:var(--accent);color:white;cursor:pointer;font:inherit;font-weight:700;}
.error-box{margin-top:20px;padding:12px 14px;border-radius:10px;background:#f5dfdc;}
@media (max-width:650px){.topbar{align-items:flex-start;gap:16px;}
.nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.page{padding-top:32px;}
.milestone-heading{flex-direction:column;gap:8px;}
.milestone-card,.login-card{padding:22px;}
}
.settings-card{max-width:760px;}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:36px;}
.setting-row h2{margin-top:0;}
.toggle-control{display:grid;justify-items:center;gap:8px;min-width:110px;cursor:pointer;}
.toggle-control input{width:24px;height:24px;accent-color:var(--accent);}
.toggle-label{color:var(--muted);font-size:0.88rem;white-space:nowrap;}
@media (max-width:650px){.setting-row{align-items:flex-start;flex-direction:column;}
.toggle-control{justify-items:start;}
}
.settings-stack{display:grid;gap:24px;}
.setting-heading{margin-bottom:26px;}
.secret-setting{display:grid;gap:12px;}
.setting-field-label{font-size:0.9rem;font-weight:700;}
.secret-field-shell{display:grid;grid-template-columns:1fr auto;align-items:stretch;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:white;}
.secret-field{min-width:0;padding:14px 16px;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;}
.secret-reveal-button{width:48px;border:0;border-left:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:1.1rem;}
.secret-reveal-button:hover{color:var(--accent);}
.runtime-location{margin:0;color:var(--muted);font-size:0.82rem;}
.runtime-location code{overflow-wrap:anywhere;}
.setting-actions{display:flex;gap:12px;margin-top:8px;}
.secondary-button{padding:13px 18px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);cursor:pointer;font:inherit;font-weight:700;}
.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:0.48;}
.setting-message{min-height:22px;font-size:0.9rem;font-weight:600;}
.setting-message[data-state="success"]{color:#55735a;}
.setting-message[data-state="error"]{color:#9a4f49;}
.setting-message[data-state="neutral"]{color:var(--muted);}
.setting-footnote{margin:2px 0 0;font-size:0.86rem;}
@media (max-width:650px){.setting-actions{align-items:stretch;flex-direction:column;}
.setting-actions button{width:100%;}
}
.deployment-details{display:grid;grid-template-columns:repeat( auto-fit,minmax(220px,1fr) );gap:1px;margin:24px 0;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--border);}
.deployment-detail{display:grid;gap:6px;min-width:0;padding:18px;background:var(--surface);}
.deployment-detail span{font-size:0.8rem;}
.deployment-detail strong,.deployment-detail code{overflow-wrap:anywhere;}
.deployment-detail code{color:var(--text);font-size:0.86rem;}
.nav-dropdown{position:relative;}
.nav-dropdown > summary{list-style:none;}
.nav-dropdown > summary::-webkit-details-marker{display:none;}
.nav-dropdown-trigger{cursor:pointer;white-space:nowrap;}
.nav-dropdown-trigger::after{content:" ▾";font-size:0.72em;}
.nav-dropdown:not([open]) .nav-dropdown-trigger::after{content:" ▸";}
.nav-dropdown-menu{position:absolute;z-index:1000;top:calc(100% + 12px);left:0;display:grid;min-width:220px;padding:10px;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);}
.nav-dropdown-menu a{display:block;padding:12px 14px;border-radius:10px;white-space:nowrap;}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:var(--accent-soft);}
@media (max-width:650px){.topbar{display:flex;flex-direction:column;align-items:stretch;}
.brand{align-self:flex-start;}
.nav{width:100%;justify-content:flex-start;align-items:center;flex-wrap:wrap;}
.nav-dropdown-menu{left:0;right:auto;min-width:210px;}
}

.admin-record-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
gap:8px;
width:100%;
margin:0 0 18px;
}

.admin-record-actions .toggle-control{
display:flex;
align-items:center;
justify-items:initial;
min-width:0;
gap:7px;
}

.admin-record-actions .toggle-label{
white-space:nowrap;
}

.compact-action-button{
flex:0 0 auto;
width:auto;
min-width:0;
padding:7px 10px;
border:1px solid var(--border);
border-radius:9px;
background:var(--surface);
color:var(--text);
cursor:pointer;
font:inherit;
font-size:0.82rem;
font-weight:700;
white-space:nowrap;
}

.compact-action-button:disabled{
cursor:not-allowed;
opacity:0.48;
}

.record-secondary{
margin-top:0;
}

.record-fields{
margin-top:18px;
}

.family-children{
margin-top:22px;
padding-top:22px;
border-top:1px solid var(--border);
}

.admin-subrecord{
padding:0;
}

.admin-subrecord + .admin-subrecord{
margin-top:24px;
padding-top:24px;
border-top:1px solid var(--border);
}

.child-name-row{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:12px;
min-width:0;
width:100%;
}

.child-name-row label,
.milestone-card .form-stack,
.milestone-card .form-stack label,
.admin-subrecord .form-stack,
.admin-subrecord .form-stack label{
min-width:0;
max-width:100%;
}

.milestone-card .form-stack input,
.milestone-card .form-stack select,
.admin-subrecord .form-stack input,
.admin-subrecord .form-stack select{
width:100%;
min-width:0;
max-width:100%;
box-sizing:border-box;
}

.date-field-shell{
display:block;
width:100%;
min-width:0;
max-width:100%;
overflow:hidden;
border:1px solid var(--border);
border-radius:11px;
background:white;
box-sizing:border-box;
}

.date-field-shell input[type="date"]{
display:block;
inline-size:100%;
width:100%;
min-inline-size:0;
min-width:0;
max-inline-size:100%;
max-width:100%;
margin:0;
padding:13px 14px;
border:0;
border-radius:0;
background:transparent;
box-sizing:border-box;
-webkit-appearance:none;
appearance:none;
}

@media (max-width:650px){
.admin-record-actions{
gap:6px;
}

.admin-record-actions .toggle-control{
gap:5px;
}

.admin-record-actions .compact-action-button{
padding:7px 8px;
font-size:0.78rem;
}

.child-name-row{
gap:9px;
}
}

.summary-group{
margin-top:18px;
}

.summary-group-heading{
display:block;
margin-bottom:8px;
}

.summary-items{
display:grid;
gap:6px;
}

.summary-item{
display:block;
color:var(--muted);
}

/*
Section: Shared publishable record actions.
Keep four-action editable cards usable on narrow displays.
*/
@media (max-width:650px){
.admin-record-actions-publishable{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"enabled publication"
"save delete";
gap:8px;
width:100%;
}

.admin-record-actions-publishable .admin-enabled-action{
grid-area:enabled;
width:100%;
min-width:0;
justify-content:center;
}

.admin-record-actions-publishable .admin-publication-action{
grid-area:publication;
}

.admin-record-actions-publishable .admin-save-action{
grid-area:save;
}

.admin-record-actions-publishable .admin-delete-action{
grid-area:delete;
}

.admin-record-actions-publishable .compact-action-button{
width:100%;
min-width:0;
}

.admin-record-actions-publishable .toggle-label{
overflow:visible;
white-space:nowrap;
}
}

.password-field-shell{
position:relative;
display:block;
width:100%;
min-width:0;
}

.password-field-shell > input{
display:block;
width:100%;
padding-right:54px;
}

.password-visibility-button{
position:absolute;
top:50%;
right:4px;
display:grid;
place-items:center;
width:42px;
height:42px;
padding:0;
border:0;
border-radius:9px;
background:transparent;
color:var(--muted);
cursor:pointer;
transform:translateY(-50%);
}

.password-visibility-button:hover,
.password-visibility-button:focus-visible{
background:var(--accent-soft);
color:var(--accent);
outline:0;
}

.password-visibility-button svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
pointer-events:none;
}


/* Publishing progress */
.publish-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid currentColor;
    border-radius: 1rem;
}

.publish-progress[hidden] {
    display: none;
}

.publish-progress p {
    margin-bottom: 0;
}

.publish-spinner {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border: 0.25rem solid;
    border-right-color: transparent;
    border-radius: 50%;
    animation:
        grayiris-publish-spin
        0.8s
        linear
        infinite;
}

#grayiris-publish-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

@keyframes grayiris-publish-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Compact publishing activity/result indicator */
[data-deployment-publish-form] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Retire the earlier large progress panel. */
.publish-progress {
    display: none !important;
}

.publish-inline-indicator {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
}

.publish-inline-indicator[hidden] {
    display: none;
}

.publish-inline-spinner {
    width: 1.45rem;
    height: 1.45rem;
    border: 0.22rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation:
        grayiris-publish-inline-spin
        0.8s
        linear
        infinite;
}

.publish-inline-indicator.is-success {
    color: #2f7d32;
}

.publish-inline-indicator.is-failure {
    color: #a4433d;
}

@keyframes grayiris-publish-inline-spin {
    to {
        transform: rotate(360deg);
    }
}