/**
 * DG Calculators — Show Working
 * Shared styles for collapsible "Show working" panels across all calculators.
 *
 * Minimal HTML:
 *   <details class="dg-working" hidden>
 *     <summary>Show working</summary>
 *     <div class="dg-working-body"> ...content... </div>
 *   </details>
 *
 * Use the classes .dg-w-row / .dg-w-formula / .dg-w-source / etc. inside the
 * body for consistent look-and-feel.
 */

.dg-working {
    margin: 1rem 0 0.5rem 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.9rem;
    color: #333;
    overflow: hidden;
}
.dg-working[hidden] { display: none; }

.dg-working > summary {
    padding: 10px 14px;
    cursor: pointer;
    color: #517F7A;
    font-weight: 600;
    list-style: none;
    user-select: none;
    background: #f8f9f8;
    border-bottom: 1px solid transparent;
    transition: background-color 0.12s ease;
}
.dg-working > summary::-webkit-details-marker { display: none; }
.dg-working > summary::marker { content: ''; }
.dg-working > summary:hover { background: #f1f4f3; }

.dg-working > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.55em;
    color: #517F7A;
    transition: transform 0.12s ease;
}
.dg-working[open] > summary {
    border-bottom-color: #e5e5e5;
    background: #f1f4f3;
}
.dg-working[open] > summary::before {
    transform: rotate(90deg);
}

.dg-working-body {
    padding: 12px 16px 14px;
    line-height: 1.65;
    color: #333;
}
.dg-working-body p {
    margin: 0 0 0.5rem 0;
}
.dg-working-body p:last-child { margin-bottom: 0; }
.dg-working-body strong { color: #2b2b2b; }

/* Row helper: "<label>: <value>" on one line */
.dg-w-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.4em;
    margin: 0 0 0.4rem 0;
}
.dg-w-row > .dg-w-label {
    color: #517F7A;
    font-weight: 600;
    flex: 0 0 auto;
}
.dg-w-row > .dg-w-value {
    flex: 1 1 auto;
    min-width: 0;
}

/* Monospace block for formulas / computed expressions */
.dg-w-formula {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #f6f7f6;
    border: 1px solid #ececec;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.92em;
    color: #2b2b2b;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Sub-heading inside the working body (for multi-part calculations) */
.dg-w-heading {
    margin: 0.75rem 0 0.35rem;
    color: #517F7A;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 0.15rem;
}
.dg-w-heading:first-child { margin-top: 0; }

/* Italicised caveat / note */
.dg-w-note {
    margin: 0.5rem 0;
    color: #555;
    font-style: italic;
    font-size: 0.9em;
}

/* Source / authority line — smaller, quieter */
.dg-w-source {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dotted #e0e0e0;
    font-size: 0.82em;
    color: #666;
}
.dg-w-source a { color: #517F7A; text-decoration: underline; }

/* Tables for itemised breakdowns (tax bands, cost items, etc.) */
.dg-w-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.4rem 0 0.6rem;
    font-size: 0.92em;
}
.dg-w-table th,
.dg-w-table td {
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.dg-w-table th {
    color: #517F7A;
    font-weight: 600;
    background: #fafbfa;
    border-bottom-color: #e0e0e0;
}
.dg-w-table td.num,
.dg-w-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.dg-w-table tr.total td {
    border-top: 1px solid #ccc;
    border-bottom: none;
    font-weight: 600;
    color: #2b2b2b;
    padding-top: 7px;
}

/* Steps / ordered-list style for step-by-step walkthroughs */
.dg-w-steps {
    list-style: none;
    counter-reset: dg-step;
    padding: 0;
    margin: 0.25rem 0 0.5rem;
}
.dg-w-steps > li {
    counter-increment: dg-step;
    padding: 0.25rem 0 0.25rem 2.1em;
    position: relative;
}
.dg-w-steps > li::before {
    content: counter(dg-step);
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #517F7A;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 0.78em;
    font-weight: 700;
    text-align: center;
    line-height: 1.55em;
}

/* Print: expand closed details so workings appear on paper */
@media print {
    .dg-working { border-color: #999; page-break-inside: avoid; }
    .dg-working > summary { display: none; }
    .dg-working .dg-working-body { display: block !important; }
    .dg-working:not([open]) .dg-working-body { display: block !important; }
}