/*
 * File: applications.css
 * Author: Hanik Sator
 *
 * Description:
 * This file contains styling for the portfolio applications, including
 * About, Experience, Skills, Resume, and Contact windows.
 *
 * Also, provides layouts, cards, typography, grids, and application-
 * specific interface components.
 */
      /* skills css beginning */
      .config-content {
        overflow: auto;
        padding: 1.25rem;
        background: rgba(250, 248, 244, .22);
      }

      .skills-intro {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        gap: 1.5rem;

        margin-bottom: 1.25rem;
        padding: 1.15rem 1.25rem;

        border: 1px solid var(--border);
        border-radius: 14px;

        background: rgba(230, 226, 218, .54);
      }

      .skills-eyebrow {
        margin-bottom: .3rem;

        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .72rem;
        font-weight: 600;

        letter-spacing: .08em;
        text-transform: uppercase;

        color: var(--heading);
        opacity: .65;
      }

      .skills-intro h2 {
        margin-bottom: .35rem;
        font-size: 1.35rem;
        color: var(--heading);
      }

      .skills-intro p {
        max-width: 470px;
        margin: 0;

        line-height: 1.55;
        opacity: .72;
      }

      .skills-status {
        display: flex;
        align-items: center;

        gap: .45rem;

        flex-shrink: 0;

        padding: .38rem .7rem;

        border: 1px solid rgba(93, 128, 82, .2);
        border-radius: 999px;

        background: rgba(104, 145, 91, .1);

        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .72rem;
        font-weight: 600;

        color: var(--heading);
      }

      .skills-status-dot {
        width: 7px;
        height: 7px;

        border-radius: 50%;

        background: #68a357;

        box-shadow: 0 0 0 3px rgba(104,163,87,.14);

        flex-shrink: 0;
      }

      .skills-dashboard {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1rem;
      }

      .skill-category {
        padding: 1.1rem;

        border: 1px solid var(--border);
        border-radius: 14px;

        background: rgba(230, 226, 218, .72);

        transition:
            transform .18s var(--ease),
            border-color .18s var(--ease),
            box-shadow .18s var(--ease);
      }

      .skill-category:hover {
        transform: translateY(-2px);

        border-color: rgba(135, 144, 127, .38);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .08),
            0 0 0 1px rgba(135, 144, 127, .08);
      }

      .skill-category-header {
        display: flex;
        align-items: flex-start;

        gap: .75rem;

        margin-bottom: 1rem;
      }

      .skill-category-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;

        flex-shrink: 0;

        border: 1px solid rgba(135, 144, 127, .22);
        border-radius: 10px;

        background: rgba(135, 144, 127, .11);

        color: var(--heading);
      }

      .skill-category-icon svg {
        width: 17px;
        height: 17px;

        stroke-width: 1.8;
      }

      .skill-category h3 {
        margin: 0 0 .22rem;

        font-size: 1rem;

        color: var(--heading);
      }

      .skill-category-header p {
        margin: 0;

        font-size: .79rem;
        line-height: 1.4;

        opacity: .62;
      }

      .skill-tags {
        display: flex;
        flex-wrap: wrap;

        gap: .5rem;
      }

      .skill-tags span {
        padding: .3rem .65rem;

        border: 1px solid rgba(135, 144, 127, .18);
        border-radius: 999px;

        background: rgba(250, 248, 244, .42);

        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .74rem;
        font-weight: 600;

        color: var(--heading);

        transition:
            background-color .15s var(--ease),
            border-color .15s var(--ease),
            transform .15s var(--ease);
      }

      .skill-tags span:hover {
        transform: translateY(-1px);

        background: rgba(135, 144, 127, .15);
        border-color: rgba(135, 144, 127, .32);
      }

      @media (max-width: 720px) {
        .skills-intro {
            flex-direction: column;
        }

        .skills-dashboard {
            grid-template-columns: 1fr;
        }
      }
      /* skills css ending */

      /* about css beginning */
      .about-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .about-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
      }

      .about-hero h1 {
        font-size: 2rem;
        color: var(--heading);
        margin-bottom: .4rem;
      }

      .about-subtitle {
        max-width: 520px;
        line-height: 1.7;
        opacity: .82;
      }

      .status-pill {
        padding: .5rem .9rem;

        border-radius: 999px;

        background: rgba(135,144,127,.14);

        border: 1px solid rgba(135,144,127,.18);

        color: var(--accent);

        font-size: .82rem;
        font-weight: 600;

        white-space: nowrap;
      }

      .status-dot {
        color: #7FA36B;

        margin-right: .35rem;

        text-shadow: 0 0 10px rgba(127,163,107,.35);
      }

      .about-grid {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;
      }

      .about-card {
        padding: 1rem;

        border-radius: 14px;

        background: rgba(230,226,218,.72);

        border: 1px solid var(--border);
      }

      .about-label {
        display: inline-block;

        margin-bottom: .55rem;

        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;

        opacity: .58;
      }

      .about-card p {
        line-height: 1.6;
      }

      .about-terminal {
        margin-top: .5rem;

        padding: 1.2rem;

        border-radius: 14px;

        background: rgba(36,32,28,.94);

        color: #D8E0CC;

        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

        line-height: 1.8;
      }

      .about-terminal span {
        color: #A8C090;
      }

      .terminal-response {
        opacity: .88;
        margin-bottom: 1rem;
      }

      .about-side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .9rem;
      }

      .profile-image {
        width: 92px;
        height: 92px;
        object-fit: cover;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.22);

        box-shadow:
            0 12px 30px rgba(0,0,0,.18),
            0 0 0 1px rgba(255,255,255,.08);

        background: rgba(255,255,255,.08);
      }
      /* about css ending */

      /* experience css beginning */

      .experience-content {
        position: relative;

        display: flex;
        flex-direction: column;

        gap: 1.25rem;

        padding-left: 2.4rem;
      }

      /* Vertical timeline */
      .experience-content::before {
        content: "";

        position: absolute;

        top: 1rem;
        bottom: 1rem;
        left: 1rem;

        width: 2px;

        background: linear-gradient(
            to bottom,
            rgba(135, 144, 127, .1),
            rgba(135, 144, 127, .55),
            rgba(135, 144, 127, .1)
          );
      }

      .experience-entry {
        position: relative;
      }

      .experience-marker {
        position: absolute;

        top: 1.25rem;
        left: -1.82rem;

        width: 12px;
        height: 12px;

        border: 3px solid rgba(236, 233, 225, .95);
        border-radius: 50%;

        box-shadow:
            0 0 0 1px rgba(0, 0, 0, .12),
            0 3px 8px rgba(0, 0, 0, .15);
      }

      .internship-marker {
        background: #6f8fa6;
      }

      .work-marker {
        background: #d39b47;
      }

      .education-marker {
        background: #748f6a;
      }

      .experience-card {
        padding: 1.1rem 1.2rem;

        border: 1px solid var(--border);
        border-radius: 14px;

        background: rgba(230, 226, 218, .72);

        transition:
            transform .18s var(--ease),
            border-color .18s var(--ease),
            box-shadow .18s var(--ease);
      }

      .experience-card:hover {
        transform: translateY(-2px);

        border-color: rgba(135, 144, 127, .38);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .08),
            0 0 0 1px rgba(135, 144, 127, .08);
      }

      .experience-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 1rem;

        margin-bottom: .65rem;
      }

      .experience-type {
        padding: .22rem .55rem;

        border: 1px solid rgba(135, 144, 127, .22);
        border-radius: 999px;

        background: rgba(135, 144, 127, .1);

        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .7rem;
        font-weight: 600;

        letter-spacing: .06em;
        text-transform: uppercase;

        color: var(--heading);
      }

      .experience-date {
        margin: 0;

        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .78rem;

        opacity: .58;
      }

      .experience-card h2 {
        margin-bottom: .3rem;

        font-size: 1.18rem;

        color: var(--heading);
      }

      .experience-company {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: .35rem .7rem;

        margin-bottom: .85rem;

        font-size: .92rem;
        font-weight: 600;
      }

      .experience-location {
        font-size: .85rem;
        font-weight: 400;

        opacity: .62;
      }

      .experience-location::before {
        content: "•";
        margin-right: .7rem;
      }

      .experience-card ul {
        display: grid;
        gap: .45rem;

        margin: 0;
        padding-left: 1.1rem;
      }

      .experience-card li {
        line-height: 1.55;
      }

      .experience-card li::marker {
        color: rgba(100, 111, 93, .7);
      }

      /* Mobile */
      @media (max-width: 650px) {
        .experience-content {
            padding-left: 1.9rem;
        }

        .experience-content::before {
            left: .65rem;
        }

        .experience-marker {
            left: -1.55rem;
        }

        .experience-meta {
            align-items: flex-start;
            flex-direction: column;

            gap: .45rem;
        }
      }

      .experience-highlights {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;

        margin-top: 1rem;
        padding-top: .9rem;

        border-top: 1px solid var(--border);
      }

      .experience-highlights span {
        padding: .25rem .65rem;

        border-radius: 999px;

        background: rgba(135, 144, 127, .12);
        border: 1px solid rgba(135, 144, 127, .18);

        font-size: .78rem;
        font-weight: 600;

        color: var(--heading);
      }
      /* experience css ending */

      /* resume css beginning */
      .resume-content {
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
      }

      .resume-toolbar {
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;

        padding: 0 1rem;

        border-bottom: 1px solid var(--border);
        background: rgba(255,255,255,.18);

        font-size: .9rem;
      }

      .resume-download {
        padding: .5rem .75rem;

        border-radius: 999px;

        background: rgba(46,42,38,.92);
        color: #F4F1EC;

        font-size: .85rem;
        font-weight: 600;
      }

      .resume-download:hover {
        background: var(--accent);
        }

      .resume-frame {
        display: block;
        width: 100%;
        flex: 1;
        min-height: 0;
        border: none;

        background: #fff;
      }
      /* resume css ending */

      /* contact css beginning */
      .contact-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .contact-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
      }

      .contact-hero h2 {
        margin-bottom: .45rem;
        color: var(--heading);
      }

      .contact-hero p {
        max-width: 520px;
        line-height: 1.7;
        opacity: .82;
      }

      .contact-status {
        padding: .5rem .9rem;

        border-radius: 999px;

        background: rgba(135,144,127,.14);

        border: 1px solid rgba(135,144,127,.18);

        color: var(--accent);

        font-size: .82rem;
        font-weight: 600;

        white-space: nowrap;
      }

      .contact-grid {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;
      }

      .contact-card {
        padding: 1rem;

        border-radius: 14px;

        background: rgba(230,226,218,.72);

        border: 1px solid var(--border);
      }

      .contact-label {
        display: inline-block;

        margin-bottom: .55rem;

        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;

        opacity: .58;
      }

      .contact-value {
        color: var(--text);

        line-height: 1.6;

        word-break: break-word;
      }

      .contact-actions {
        display: flex;
        gap: .8rem;
        flex-wrap: wrap;
      }

      .contact-button {
        padding: .7rem 1rem;

        border-radius: 999px;

        border: none;

        background: rgba(46,42,38,.92);
        color: #F4F1EC;

        font: inherit;
        font-weight: 600;

        cursor: pointer;

        transition: .18s ease;
      }

      .contact-button:hover {
        transform: translateY(-1px);

        background: var(--accent);
      }

      .contact-button.secondary {
        background: rgba(255,255,255,.28);

        color: var(--text);

        border: 1px solid var(--border);
      }
      /* contact css ending */