/*========================================================================*/
/*== General Styles ======================================================*/
/*========================================================================*/

.cartel {
    position: relative;

    --title-color: Teal;
    --title-color-tint: PaleTurquoise;
    --border-color: FireBrick;
    --border-color-tint: #cfafaf;
    --bg-color: WhiteSmoke;
    --bg-color2: Snow;

    @import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display&display=swap');

    background-color: var(--bg-color2);

    border: 5px double var(--border-color);
    font-family: Garamond;
    font-size: 16px; 

}

.cartel h1, .cartel h2 { 
    color: var(--title-color);
}

.cartel label[title],
.cartel summary[title] { cursor: context-menu; }
.cartel input.hidden_control { display: none; }

.cartel blockquote { 
    border: 1px solid LightGray;
    background-color: var(--bg-color2); 
    font-size: 90%;
}

.cartel details.expandable summary {
    position: relative;
    height: 75px; overflow: auto;
    border: 1px dotted SlateGray;
    padding: 15px; margin: 0;
    cursor: zoom-in;
}
.cartel details.expandable[open] summary {
    height: auto; overflow: initial;
    cursor: zoom-out;
}
.cartel details.expandable summary:before {
    display: block; position: absolute; top: 0; right: 0;
    font-family: Pictos; content: "s";
}
.cartel details.expandable[open] summary:before { content: "*"; }

.cartel .row { display: flex; flex-flow: row nowrap; }

.cartel .tabpage { padding: 10px; background-color: var(--bg-color); }

/* roll buttons */
/* .charsheet .cartel button[type="roll"] { display: inline-block; } */
.charsheet .cartel button[type="roll"]:before {
    font-family: dicefontd6; content: "mf";
}

/* make sure the repeating controls stay accessible */
.charsheet .cartel .repcontrol, .charsheet .cartel .itemcontrol { z-index: 10; }

/* style inputs that have datalist options */
.charsheet .cartel input[type="text"][list] { cursor: context-menu; }
.charsheet .cartel input[type="text"][list] + span:before { font-family: Pictos; content: "l"; }

.cols2 { column-count: 2; column-width: 300px; }
.cols2 .repcontrol {}
.cols2 section { break-inside: avoid; }

main.flexpage { display: flex; flex-flow: row nowrap; }
main.flexpage .repcontrol {}

/*========================================================================*/
/*==  Collapsible Rules Boxes  ===========================================*/
.cartel details.rulesbox summary {
    cursor: pointer;
}
.cartel details.rulesbox summary * { 
    display: inline-block; 
}
.cartel details.rulesbox summary:after {
    font-family: Pictos; content: "?";
    vertical-align: super;
}
.cartel .rules_text {
    border: 1px solid Gray;
    margin: 5px; padding: 5px;
}

/*========================================================================*/
/*==  EDIT BOXES  ========================================================*/

/* controls */
.charsheet .cartel .editbox,
.charsheet .cartel li.editbox { 
    position: relative; 
    margin: 5px; padding: 5px; padding-right: 30px;
}
.charsheet .cartel .editbox summary { 
    position: absolute; 
    top: 5px; right: 5px; 
}
.charsheet .cartel .editbox summary:before { 
    display: block; 
    border: 1px solid black; padding: 1px;
    width: 16px; height: 16px; font-size: 12px;
    font-weight: bold;
    text-align: center; vertical-align: top;
    font-family: Pictos; content: "p";
    cursor: pointer;
}
.charsheet .cartel .editbox details[open] summary:before { content: "*"; cursor: pointer; }
.charsheet .cartel .editbox details[open] {
    position: relative;
    margin: 10px; padding: 10px; 
    border: 1px dotted var(--border-color);
}

.charsheet .cartel .editbox summary:hover {
}

.charsheet .cartel details.editbox textarea {
    width: calc(100% - 20px);
}

/*========================================================================*/
/*==  TRACKS  ============================================================*/

.track { margin: 10px 30px; }
input.attr_track0 { display: none; } /* Zero value radio is for reseting the track */
input.attr_track { opacity: 0; z-index: 1; width: 20px; height: 20px; margin: 0; padding: 0; }
input.attr_track + span { display: inline-block; padding: 0; margin: 0; }

/* all boxes look "checked" by default
    boxes to the right of the selected box will be "cleared" */
input.attr_track + span:before { 
  display: inline-block;
  font-size: 17px; height: 17px; line-height: 17px; width: 17px;
  border: 2px solid var(--title-color); padding 2px;
  margin: 0 10px 0 -20px;   /* 10px between the boxes */
  text-align: center; font-family: "Pictos Custom"; content: "t"; color: var(--border-color); font-weight: bold; }
input.attr_track[type="radio"]:checked ~ input.attr_track + span:before { color: transparent; }

input.attr_track:hover + span:before { background-color: grey; }

input.attr_trackreset { display: none; }

/*========================================================================*/
/*==  Checklists  ========================================================*/
.list_title { margin-top: 15px; font-size: 14px; font-family: Garamond; font-weight: bold; }
ul.checklist { list-style: none; }
ul.checklist label { font-weight: normal; font-size: 100%; }
ul.checklist input[type="checkbox"] { display: none; }
ul.checklist input[type="checkbox"] + span { 
    display: inline-block; height: 14px; font-size: 16px; 
    margin-left: 22px; text-indent: -22px; 
    padding: 1px; 
}
ul.checklist input[type="checkbox"] + span:before {
    width: 14px; margin-top: -2px; margin-right: 5px; border: 2px solid var(--title-color);
    font-family: "Pictos Custom"; content: "t"; color: transparent;
    text-align: center; vertical-align: top; 
}
ul.checklist input[type="checkbox"]:checked + span:before { color: var(--border-color); }
ul.checklist input[type="checkbox"]:checked + span { background-color: LightGray; color: Gray; text-decoration: line-through; }

/*-- picklist: instead of crossing items off, select from a list --*/
ul.checklist.picklist span { opacity: 0.5; color: Gray; font-style: italic; }
ul.checklist.picklist span i { font-style: normal; }
ul.checklist.picklist input + span:before { 
    font-family: "Pictos Custom"; content: "["; font-style: normal; 
}
ul.checklist.picklist input:checked + span {
    opacity: 1.0; 
    text-decoration: none;
    color: var(--border-color); background-color: initial;
}

/*========================================================================*/
/*==  Tag Lists  =========================================================*/
span.tags { display: inline-block; font-weight: normal; text-indent: 20px; }
span.tags:before {}
span.tags:after { font-family: Pictos; content: "z"; vertical-align: super;}

/*========================================================================*/
/*== Label Cloud  ========================================================*/
.label_cloud { display: flex; flex-flow: row wrap; justify-content: center; gap: 0.5em; font-size: 12px; margin-bottom: 25px; }
.label_cloud label { 
    display: inline-block; 
    width: auto; font-weight: normal; 
    margin: 0; padding: 0; 
}
.label_cloud input[type="checkbox"] { display: none; }
.label_cloud input[type="checkbox"] + span { 
    display: inline-block; 
    border: 1px solid transparent; border-radius: 8px; 
    padding: 1px 3px;
    color: Gray;
}
.label_cloud input[type="checkbox"]:checked + span {
    font-size: 125%;
    color: var(--border-color);
    border-color: var(--border-color);
}

/*========================================================================*/
/*==  Label Rows  ========================================================*/
.label_row { display: flex; flex-flow: row nowrap; }
.label_row label { 
    display: inline-block; width: auto; 
    margin-right: 10px; 
    font-weight: normal; 
}

/*========================================================================*/
/*==  HEADER  ============================================================*/
/*========================================================================*/

.charsheet .cartel > header.editbox { padding: 0; margin: 0; }

/* .charsheet .cartel > header + * { margin-top: 20px; }*/

.identity { 
    margin: 0 20px 0px;
    display: flex; 
}

dl.description span.lifestyle_description:before { content: "("; }
dl.description span.lifestyle_description:after { content: ")"; }

.charsheet .cartel > header .identity:first-child { 
    font-family: Candal;
    color: var(--title-color);
    border-bottom: 5px dotted var(--border-color);
    margin: 10px;
}
.charsheet .cartel > header h1,
.charsheet .cartel > header h2 { 
    color: var(--title-color); 
}

.charsheet .cartel > header dl.description { display: flex; gap: 0.5em; }
.charsheet .cartel > header dl.description * { display: inline-block; }
.charsheet .cartel > header dl.description dt { margin-left: 1em; }
.charsheet .cartel > header dl.description dd span:before { content("—"); }

.editlifestyle { display: flex; }
.editlifestyle label { flex-basis: 0; padding: 5px 20px; }
.editlifestyle input { display: none; }
.editlifestyle input + span { font-weight: normal; }
.editlifestyle input:checked + span { padding: 5px 10px; border: 1px solid SlateGray; border-radius: 7.5px; }

input.pbfilter { display: none; }

/*========================================================================*/
/*==  TABS (Navigation)  =================================================*/
/*========================================================================*/

.tabs { 
    display: flex; flex-flow: row nowrap; justify-content: flex-end;
    padding: 0; margin: 0;
    border-bottom: 2px solid var(--border-color);
}

input.attr_showtab[value="stats"] + .tabs button[name="act_stats"],
input.attr_showtab[value="character_moves"] + .tabs button[name="act_character_moves"],
input.attr_showtab[value="extras"] + .tabs button[name="act_extras"],
input.attr_showtab[value="basic_moves"] + .tabs button[name="act_basic_moves"],
input.attr_showtab[value="stress_heat"] + .tabs button[name="act_stress_heat"],
input.attr_showtab[value="notes"] + .tabs button[name="act_notes"] { 
    background-color: var(--bg-color);
    z-index: 1;
    margin: 0 10px -2px;
    border-bottom: 2px solid var(--bg-color);
}

.tabs button {
    padding: 2px 15px 0; margin: 0 1px;
    border: 2px solid var(--border-color);
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    font-family: Garamond;
    font-size: 16px; font-weight: normal;
    background-color: #afcfcf;
}
.tabs button:hover { background-color: #dfecec; }

.tabpage { display: none; }

input.attr_showtab[value="stats"] ~ .statspage,
input.attr_showtab[value="character_moves"] ~ .character_movespage,
input.attr_showtab[value="extras"] ~ .extraspage,
input.attr_showtab[value="basic_moves"] ~ .basic_movespage,
input.attr_showtab[value="stress_heat"] ~ .stress_heatpage,
input.attr_showtab[value="notes"] ~ .notespage
    { display: block; }

/*========================================================================*/
/*==  STATS  =============================================================*/
/*========================================================================*/

.charsheet .statspage main { display: flex; flex-flow: row wrap; }
.charsheet .statspage main .left,
.charsheet .statspage main .right { min-width: 300px; flex: 1 0 0; padding: 0 20px; margin: 0;  }
.charsheet .statspage main section { border-top: 1px dotted var(--border-color); margin-bottom: 15px; }
.statsrow {
    display: flex; gap: 5px;
}
.statsrow label {
    display: inline-block; width: auto;
    border: 2px solid var(--border-color);
    background-color: Snow;
    padding: 5px; 
    text-align: center; 
    font-size: 14px;
}

.statsrow button { margin: 5px; }
.statsrow button:before { font-size: 150%; }

/*========================================================================*/
/*==  ENLACES  ===========================================================*/
.charsheet .enlaces li.editbox {
    border: 1px solid rgba( 128, 128, 128, 0.25);
    border-radius: 5px;
    padding: 5px;
    list-style: none;
}
.charsheet .enlaces li.editbox:before {
    font-family: Pictos; content: "j"; font-size: 20px;
    position: absolute; top: 5px; left: -25px;
}
    
.rel_name { font-weight: bold; font-size: 115%; }
.enlaces li.editbox { padding-right: 25px; }
.enlaces li.editbox .sentence-display {
    display: inline-block; margin-right: 25px;
}


/*========================================================================*/
/*==  LLAVES ==*/ 
.charsheet .cartel .llaves .repcontrol { z-index: 10; }

.keybox { padding-right: 0; }
.keybox label { padding-left: 30px; }
.keybox label span:last-child { font-weight: normal; padding-right: 25px; }
.keybox label input { display: none; }
.keybox label input:checked ~ span {
    /* background-color: LightGray; */
    color: SlateGray;
    opacity: 0.5;
    text-decoration: line-through;
}
.keybox label input + span:before {
    position: absolute; top: 10px; left: 0; 
    float: right; 
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--title-color);
    padding: 1px; margin-right: 5px; 
    font-family: "Pictos Custom"; color: transparent; content: "t";
    font-size: 20px; text-align: center; 
}
.keybox label input:checked + span:before {
    color: var(--border-color);
}
.keybox label input + span:after { content: ":"; }


.keybox.editbox details[open] {
    position: relative;
}

/*========================================================================*/
/*==  ADVANCEMENT  ==*/

.advancement ul.advlist { list-style-type: none; }
.advancement ul.advlist label { font-weight: normal; font-size: 100%; }

ul.advlist input[type="checkbox"] { display: none; }
ul.advlist input[type="checkbox"] + span:before {
    display: inline-block; 
    width: 14px; height: 14px; font-size: 16px; padding: 1px; 
    margin-right: 5px; 
    border: 2px solid var(--title-color);
    font-family: "Pictos Custom"; content: "t"; color: transparent;
    text-align: center; vertical-align: middle; 
}
ul.advlist input[type="checkbox"]:checked + span:before {
    color: var(--border-color); 
}
ul.advlist input[type="checkbox"]:checked + span {
    background-color: LightGray; color: Gray; text-decoration: line-through;
}

/*========================================================================*/
/*==  Character Moves  ===================================================*/
/*========================================================================*/

.charsheet .cartel .character_movespage .repcontrol { 
    column-span: all;
}
.charsheet .cartel .move {
    min-width: 300px;
    min-height: 50px; 
    border: 1px solid black; padding: 5px;
    break-inside: avoid;
}

.charsheet .cartel .move header {
    margin: 2px 5px 5px; padding: 0 5px 2px;
    border-bottom: 1px solid var(--border-color);
}
.charsheet .cartel .move main {
    font-size: 16px; font-family: Garamond; padding: 5px 15px; 
}
.charsheet .cartel .move main * { font-size: inherit; font-family: inherit; }

.charsheet .cartel .character_movespage .move button[type="roll"] ,
.charsheet .cartel .character_movespage .move .edit_roll_data { display: none; }
.charsheet .cartel .character_movespage .move input.show_button:checked + button[type="roll"] { display: inline-block; }
.charsheet .cartel .character_movespage .move input.hidden_control:checked + .edit_roll_data { display: block; }

.charsheet .cartel .move_description { white-space: pre-wrap; }

/*========================================================================*/
/*  create an edit popup box for moves */
.charsheet .cartel .move.editbox details[open] {
    position: relative; 
    height: 400px; padding: 15px;
    background-color: #dfecec;
    border: 2px solid black; 
    overflow: auto;
}

.move textarea {
    width: calc(100% - 15px);
    height: 50px;
}

/*================================================================================================*/
/*==  BASIC MOVES  ===============================================================================*/
/*================================================================================================*/

.basic_movespage .move { margin-bottom: 10px; }

/*================================================================================================*/
/*==  EXTRAS  ====================================================================================*/
/*================================================================================================*/

.extraspage > header, .extraspage > main { display: none; }

.extraspage > main section {
    border-top: 1px solid var(--border-color);
    margin-top: 10px; 
}

/* show and hide elements based on the playbook_filter */
.extraspage input.attr_playbook_filter[value="el cocinero"] ~ .cocinero,
.extraspage input.attr_playbook_filter[value="la esposa"] ~ .esposa,
.extraspage input.attr_playbook_filter[value="el halcon"] ~ .halcon,
.extraspage input.attr_playbook_filter[value="el narco"] ~ .narco,
.extraspage input.attr_playbook_filter[value="la polizeta"] ~ .polizeta,
.extraspage input.attr_playbook_filter[value="la rata"] ~ .rata,
.extraspage input.attr_playbook_filter[value="la sicaria"] ~ .sicaria
    { display: block; }


/*==  COCINERO  ==================================================================================*/
.laboratorio ul.checklist span { font-style: italic; }

/*==  ESPOSA  ====================================================================================*/

/*==  HALCON  ====================================================================================*/
.tu_pandilla .move { display: none; }
.tu_pandilla input:checked ~ .move {
    display: block;
    margin: 10px; margin-left: 30px;
}
.tu_pandilla .move header h3 span { color: var(--border-color); opacity: 1; }
.charsheet .cartel .tu_pandilla .move header { border-bottom: none; }

/*==  POLIZETA  ==================================================================================*/
.response { border-bottom: 1px solid Gray; padding: 2px 10px; font-size: 125%; }

/*================================================================================================*/
/*==  STRESS/HEAT MOVES  =========================================================================*/
/*================================================================================================*/

.cartel .stress_heatpage .move { margin-bottom: 10px; }
.cartel section.heat_moves { column-count: 2; }

.cartel .drug_moves details summary { cursor: pointer; }
.cartel .drug_moves details summary h3:before { font-family: "Pictos Three"; content: "l "; font-weight: normal; color: var(--border-color); }
.cartel .drug_moves details summary h3:after { font-family: Pictos; content: " &"; font-weight: normal; }
.cartel .drug_moves details[open] summary h3:after { content: " _"; }


/*================================================================================================*/
/*==  NOTES  =====================================================================================*/
/*================================================================================================*/

.notes .note_text {
    white-space: pre-wrap;
}

/*================================================================================================*/
/*== ROLL TEMPLATE ===============================================================================*/
/*================================================================================================*/

.sheet-rolltemplate-cartel .sheet-cartel-rollbox {
    /* variables for use throughout the rollbox */
    --title-color: Teal;
    --title-color-tint: LightSteelBlue;
    --border-color: FireBrick;
    --border-color-tint: #cfafaf;
    --background-color: Snow;

    border: 3px double var(--border-color);
    background-color: var(--background-color); 
    font-size: 14px;
}

/*========================================================================*/
/* header */
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-header {
    padding: 5px;
    background-color: var(--border-color-tint); 
    border-bottom: 6px double var(--title-color);
    margin-bottom: 10px; 
    text-align: center;
    font-family: Candal;
    font-style: italic;
}
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-rolling {
    font-weight: normal; text-align: left;
    padding: 0; margin: 0;
    font-family: Garamond;
}
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-header h2 { color: White; text-shadow: 0 0 3px Black, 0 0 3px Black; }

.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-trigger {
    display: inline-block; padding: 10px; 
    margin-bottom: 20px;
}

/*========================================================================*/
/* results */
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-result {
    display: block; text-align: center;
    padding-top: 20px;
}
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .inlinerollresult {
    background-color: Linen; color: Teal;
    border: 2px dotted Gray; border-radius: 15px;
    font-size: 48px; font-family: Candal;
    padding: 0 15px; 
    margin-bottom: 10px; 
}


.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-resulttxt {
    background-color: #eee;
    border: 1px dotted #666;
    margin: 10px; padding: 10px;
    margin-top: 20px;
    font-size: 16px; font-family: Garamond;
}