/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Panel */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.panel-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: row;
}

.panel-container h1,
.panel-container h2 {
    display: block;
    padding-bottom: 0.25em;
}

.panel-container h1 {
    font-size: var(--font-huge);
    font-variation-settings: var(--weight-black);
    padding-top: 0.375em;
}

.panel-container h2 {
    font-size: var(--font-large);
    font-variation-settings: var(--weight-black);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Panel nav */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.panel-container .panel-nav {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    border-left: solid 1px var(--color-medium-gray);
    background-color: var(--color-white);
    border: solid 1px var(--color-light-gray);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.5em;
    height: auto;
    gap: 0.5em;
    position: relative;
}

.panel-container[data-panel-id='dimensions'] .panel-nav,
.panel-container[data-panel-id='guidance'] .panel-nav,
.panel-container[data-panel-id='insights'] .panel-nav,
.panel-container[data-panel-id='notes'] .panel-nav,
.panel-container[data-panel-id='tools'] .panel-nav {
    border-right-color: var(--color-white);
    border-radius: 1.75em 0 0 1.75em;
    box-shadow: inset 0 4px 8px #ffffff30, -4px 4px 8px #00000030, -8px 8px 16px #00000015;
    margin-right: -1px;
}

.panel-container .panel-nav .controls-title {
    margin: 0;
    padding: 0;
    width: 2.5em;
    text-align: center;
}

.panel-container .panel-nav .controls-title span.text {
    font-size: var(--font-tiny);
    color: var(--color-dark-gray);
}

.panel-container .dimensions-container,
.panel-container .guidance-container,
.panel-container .insights-container,
.panel-container .notes-container,
.panel-container .tools-container,
.panel-container [data-action='close-panel'] {
    display: none;
}

.panel-container:not([data-panel-id='']) [data-action='close-panel'] {
    display: flex;
}

.panel-container[data-panel-id='dimensions'] .dimensions-container,
.panel-container[data-panel-id='guidance'] .guidance-container,
.panel-container[data-panel-id='insights'] .insights-container,
.panel-container[data-panel-id='notes'] .notes-container,
.panel-container[data-panel-id='tools'] .tools-container {
    display: unset;
    overflow-y: auto;
    margin: 0.5em 0.5em 0.5em 0;
    background-color: var(--color-white);
    border: solid 1px var(--color-light-gray);
    border-radius: 0 var(--radius-small) var(--radius-small) var(--radius-small);
    box-shadow: inset 0 4px 8px #ffffff30, 3px 4px 8px #00000030, 6px 8px 16px #00000015, -6px 0 6px #ffffff;
    padding: 0.5em 1.5em;
}

.panel-container .panel-nav ~ * button.rectangle,
.panel-container .panel-nav ~ * input.email,
.panel-container .panel-nav ~ * input.text,
.panel-container .panel-nav ~ * textarea.text {
    width: 100%;
}

.panel-container .panel-nav ~ * input.email,
.panel-container .panel-nav ~ * input.text,
.panel-container .panel-nav ~ * textarea.text {
    border: solid 1px var(--color-light-gray);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Insights */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.panel-container .insights-container [data-insight='timezones'] table th:not(:first-of-type),
.panel-container .insights-container [data-insight='timezones'] table td:not(:first-of-type) {
    width: 33%;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Dimensions */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.dimensions-container {
}

.dimensions-container .stakeholder {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

.dimensions-container .stakeholder .dimension {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 2.75em;
    gap: 0.5em;
}

.dimensions-container .stakeholder .dimension button.circle,
.dimensions-container .stakeholder .dimension button.switch {
    align-self: center;
}

/* */
/* SECTION: Title */
/* */

.dimensions-container .stakeholder .dimension .title {
    width: 11.5em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0.5em;
    border-bottom: solid 1px var(--color-light-gray);
    border-left: solid 1px var(--color-blue-200);
    border-right: solid 1px var(--color-blue-200);
}

.dimensions-container .stakeholder .dimension .title span.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.dimensions-container .stakeholder .dimension:last-child .title {
    border-bottom: solid 1px var(--color-medium-blue);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.dimensions-container .stakeholder .dimension .title .counters {
    flex-wrap: wrap;
    gap: 0.25em;
    padding: 0.25em 0;
}

.dimensions-container .stakeholder .dimension .title .counters span.material-symbols-outlined {
    font-size: var(--icon-tiny);
}
.dimensions-container .stakeholder .dimension .title .counters span.text {
    font-size: var(--font-tiny);
}

/* */
/* SECTION: Identification */
/* */

.dimensions-container .stakeholder .dimension[data-dimension='identification'] .title {
    border-bottom: solid 1px var(--color-blue-200);
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    border-top: solid 1px var(--color-blue-200);
    background-color: var(--color-blue-200);
}

.dimensions-container .stakeholder .dimension[data-dimension='identification'] .title > span.text {
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* */
/* SECTION: Badges */
/* */

.dimensions-container .stakeholder .dimension[data-dimension='badges'] .title {
    border-bottom: solid 1px var(--color-blue-200);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Guidance container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.guidance-container label.label {
    color: var(--color-black);
    font-size: var(--font-large);
    font-variation-settings: var(--weight-black);
}