/*=====================================================================

    gitshack.css

    GITSHACKS EGEN FORM - INTE MALLENS.

    base.css ägs av Webling-mallen och uppdateras med den. En regel
    GitShack lagt till mitt i den filen är en rad som kan hamna i en
    sammanslagningskonflikt den dagen mallen ändrar något i närheten.
    Ligger regeln HÄR rör mallens uppdateringar den aldrig. Samma
    resonemang som __config/gitshack.php, se rutan högst upp i den.

    LADDAS SIST, efter base.css och efter temat. Ordningen står i
    include/layout/head.php och spelar roll: filen använder temats
    färgvariabler, alltså måste temat vara läst först.

    INGA EGNA FÄRGER, bara var(--color-...). Ett hårdkodat värde här
    ser rätt ut i ljust tema och fel i mörkt - det är hela poängen med
    att färgerna bor i theme/*.css.

=====================================================================*/


/*---------------------------------------------------------------------
    REPOLISTAN

    Startsidan, se include/page/landing.php.

    EN RAD ÄR INTE EN LÄNK, den INNEHÅLLER en. base.css skriver att
    "hela rutan är länken" om .card, och det är rätt där - men en
    rad här bär flera mål: namnet leder in i repot, knapparna bredvid
    gör var sin sak. Ett <a> som omslutet allt hade gjort de andra
    omöjliga att nå med tangentbord.
---------------------------------------------------------------------*/

.repo-list {
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    margin: 0;
    padding: 0;
}

.repo {
    /*  ANKARE ÅT KLONRUTAN, som ligger absolut placerad under sin
        knapp. Utan den här raden räknar rutan från sidan i stället
        för från raden, och hamnar var som helst. Se .repo__clone-body
        längre ner - de två hör ihop. */
    position: relative;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);

    padding: var(--space-4) var(--space-5);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition: border-color var(--transition), background var(--transition);
}

/*  Ramen markeras när muspekaren är någonstans på raden, och när
    fokus står på något inuti den.

    :focus-within OCH INTE BARA :hover - den som går med tangentbord
    ska se vilken rad hen står på, och det är samma upplysning. */
.repo:hover,
.repo:focus-within {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
}


/*---------------------------------------------------------------------
    Namnet - radens huvudsakliga mål
---------------------------------------------------------------------*/

/*  KLICKYTAN ÄR STÖRRE ÄN TEXTEN.

    flex: 1 gör att länken tar allt utrymme som knapparna inte
    behöver, alltså går det att träffa raden var som helst till
    vänster om dem. En klickyta på ett kort ord är en klickyta man
    missar. */
.repo__link {
    flex: 1 1 12rem;

    display: flex;
    align-items: center;
    gap: var(--space-2);

    min-width: 0;

    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-heading);
}

.repo__link:hover,
.repo__link:focus-visible {
    color: var(--color-link-hover);
}

/*  Ett långt reponamn ska kapas, inte tvinga raden att bli bred.
    min-width: 0 ovanför är det som gör att det fungerar i en
    flexbox - utan den vägrar elementet krympa under sitt innehåll. */
.repo__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*---------------------------------------------------------------------
    Hänglåset - repot syns inte för utloggade
---------------------------------------------------------------------*/

/*  SYMBOLEN ÄR EN UPPLYSNING TILL DEN INLOGGADE, inte ett skydd.
    Det som faktiskt döljer ett repo är Git::visibleRepos(), som
    aldrig lämnar ut namnet till en utloggad. Låset säger bara
    "det här ser bara du". */
.repo__lock {
    flex: none;

    display: inline-flex;
    align-items: center;

    color: var(--color-text-muted);
}

.repo__lock svg {
    display: block;
    width: 1em;
    height: 1em;
}


/*---------------------------------------------------------------------
    Knapparna till höger
---------------------------------------------------------------------*/

.repo__actions {
    flex: none;

    display: flex;
    align-items: center;
    gap: var(--space-2);

    margin-left: auto;
}

.repo__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    padding: var(--space-1) var(--space-3);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: transparent;

    transition: border-color var(--transition), color var(--transition);
}

/*  PLATSHÅLLARE, INTE EN KNAPP SOM INTE FUNGERAR.

    Klona och zip finns inte än. Ett vanligt utseende hade lovat
    något som inte händer när man trycker - och en knapp som ser
    tryckbar ut ska gå att trycka på. Den här ser avstängd ut med
    flit, och sidan sätter dessutom aria-disabled så att en
    skärmläsare säger samma sak.

    cursor: not-allowed hör ihop med den dämpade färgen. Ta inte
    bort den ena utan den andra - då blir intrycket "trasig" i
    stället för "kommer sedan". */
.repo__action.is-pending {
    color: var(--color-text-faint);
    border-color: var(--color-border-soft);
    border-style: dashed;

    cursor: not-allowed;
}

.repo__action.is-pending:hover {
    color: var(--color-text-faint);
    border-color: var(--color-border-soft);
}


/*---------------------------------------------------------------------
    Klona - knappen som fäller ut kommandot

    Se include/page/landing.php. Elementet är en <details>, alltså
    webbläsarens egen utfällning: den fungerar med tangentbord, läses
    upp som det den är, och kräver inte en rad JavaScript. Mallen
    använder samma element till .reveal i base.css.
---------------------------------------------------------------------*/

/*  Ramen krymper till knappen och inte till rutan som fälls ut -
    rutan ligger utanför flödet, se .repo__clone-body nedan. */
.repo__clone {
    flex: none;
}

/*  SAMMANFATTNINGEN ÄR PILLERKNAPPEN. Formen kommer från
    .repo__action, som ligger på samma element i HTML:en, och det
    enda som ändras här är hur elementet ritas.

    display: list-item ÄR DET SOM BEHÅLLER WEBBLÄSARENS EGEN PIL.
    .repo__action säger inline-flex, och en <summary> som inte är ett
    list-item tappar sin markör i Chrome och Safari. Pilen ritas
    medvetet inte om: den ser olika ut i olika webbläsare, och det är
    rätt - besökaren känner igen sin egen. Samma regel som .reveal i
    base.css följer.

    list-style-position: inside HÖR IHOP MED RADEN OVANFÖR. Utanför
    hamnar pilen bortom knappens kant, alltså utanför ramen den ska
    stå i. */
.repo__action--summary {
    display: list-item;
    list-style-position: inside;

    cursor: pointer;
}

.repo__action--summary:hover {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

/*  Utfälld: knappen ser intryckt ut, så att det syns vilken av
    raderna i listan som står öppen. */
.repo__clone[open] .repo__action--summary {
    color: var(--color-heading);
    border-color: var(--color-border-strong);
    background: var(--color-surface-strong);
}

/*  RUTAN LIGGER UTANFÖR FLÖDET, ALLTSÅ VÄXER INTE RADEN.

    Alternativet - att låta rutan trycka isär raden - hade flyttat
    varje repo under den nedåt varje gång någon tryckte på Klona, och
    en lista som hoppar är en lista man tappar bort sig i.

    ANKARET ÄR .repo OCH INTE .repo__clone, alltså blir rutan lika
    bred som hela raden i stället för lika bred som knappen. Ett
    klonkommando är en lång rad och ska inte behöva scrollas i ett
    fält på fem centimeter. position: relative står på .repo längst
    upp i filen - de två hör ihop.

    z-index BEHÖVS: nästa rad i listan ritas efter den här och skulle
    annars hamna ovanpå rutan. */
.repo__clone-body {
    position: absolute;
    z-index: 20;

    left: 0;
    right: 0;
    top: calc(100% + var(--space-1));

    padding: var(--space-4);

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);

    background: var(--color-surface);
}

/*  readonly OCH INTE disabled i HTML:en - fältet ska gå att markera.
    Formen är monospace därför att innehållet är ett kommando: en
    adress i proportionell text är svårare att läsa fel för fel. */
.repo__clone-command {
    width: 100%;

    padding: var(--space-2) var(--space-3);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    font-family: var(--font-mono);
    font-size: var(--text-sm);

    color: var(--color-heading);
    background: var(--color-surface-strong);
}

.repo__clone-hint {
    margin: var(--space-3) 0 0 0;

    font-size: var(--text-xs);
    color: var(--color-text-muted);
}


/*---------------------------------------------------------------------
    Smala skärmar

    Under gränsen lägger sig knapparna under namnet i stället för
    bredvid. margin-left: auto ovanför skulle annars klämma ihop
    namnet till ett par tecken på en telefon.
---------------------------------------------------------------------*/

@media (max-width: 30rem) {

    .repo {
        align-items: flex-start;
        flex-direction: column;
    }

    .repo__actions {
        margin-left: 0;
    }
}